:root {
  --navy-deep: #030712; --navy-dark: #0b0f19; --navy-mid: #0f172a;
  --gold: #D4AF37; --gold-bright: #F3D977; --gold-glow: rgba(212,175,55,0.18);
  --text-light: #f8fafc; --text-gray: #94a3b8;
  --radius-lg: 24px; --radius-md: 16px;
}
* { box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--navy-deep);
       color: var(--text-light); margin: 0; min-height: 100vh; }
h1, h2, .brand-serif { font-family: 'Playfair Display', serif; }
.gold { color: var(--gold); }
a { color: var(--gold-bright); }
.glass { background: rgba(11,24,43,0.6); border: 1px solid rgba(212,175,55,0.12);
         backdrop-filter: blur(20px); border-radius: var(--radius-lg); padding: 28px; }
.navbar-scrape { display: flex; justify-content: space-between; align-items: center;
                 padding: 18px 32px; border-bottom: 1px solid rgba(212,175,55,0.1); }
.navbar-scrape .logo { font-weight: 800; font-size: 1.2rem; color: var(--text-light);
                       text-decoration: none; }
.container-narrow { max-width: 1080px; margin: 0 auto; padding: 32px 20px; }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-dark, #AA8418));
            color: #0b0f19; border: none; border-radius: 12px; padding: 12px 26px;
            font-weight: 700; cursor: pointer; }
.btn-gold:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--gold-bright);
             border: 1px solid rgba(212,175,55,0.35); border-radius: 12px;
             padding: 10px 22px; cursor: pointer; text-decoration: none; }
input, textarea, select { background: var(--navy-mid); color: var(--text-light);
  border: 1px solid rgba(212,175,55,0.2); border-radius: 10px; padding: 12px 14px;
  width: 100%; font-family: inherit; }
label { display: block; margin: 14px 0 6px; color: var(--text-gray); font-size: 0.9rem; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px;
         font-size: 0.75rem; font-weight: 700; }
.badge-queued  { background: rgba(148,163,184,0.15); color: #94a3b8; }
.badge-running { background: rgba(212,175,55,0.15);  color: var(--gold-bright); }
.badge-done    { background: rgba(34,197,94,0.15);   color: #4ade80; }
.badge-failed  { background: rgba(239,68,68,0.15);   color: #f87171; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid rgba(212,175,55,0.08); }
th { color: var(--text-gray); font-size: 0.8rem; text-transform: uppercase; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
                gap: 20px; margin: 40px 0; }
.flash { padding: 12px 18px; border-radius: 12px; margin: 12px 0; }
.flash-danger  { background: rgba(239,68,68,0.12); color: #f87171; }
.flash-warning { background: rgba(212,175,55,0.12); color: var(--gold-bright); }
.preview-box { background: var(--navy-mid); border-radius: var(--radius-md);
               padding: 22px; max-height: 480px; overflow: auto; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tab { padding: 10px 20px; border-radius: 10px; cursor: pointer;
       color: var(--text-gray); border: 1px solid transparent; }
.tab.active { color: var(--gold-bright); border-color: rgba(212,175,55,0.35);
              background: rgba(212,175,55,0.08); }
.coming-soon { opacity: 0.55; position: relative; }