/* snipo shared theme.
   Loaded after each page's own styles: tokens first, then component overrides.
   Direction: studio black, one acid-lime accent, pill controls, tight grotesk type. */

:root {
  --c-bg: #0A0A0B;
  --c-surface: #121214;
  --c-raised: #1A1A1E;
  --c-raised-hi: #232328;
  --c-border: rgba(255, 255, 255, 0.08);
  --c-border-hi: rgba(255, 255, 255, 0.18);
  --c-text: #FAFAFA;
  --c-muted: #A1A1AA;
  --c-dim: #6B6B76;
  --c-accent: #C8F53C;
  --c-accent-dim: rgba(200, 245, 60, 0.14);
  --c-accent2: #A78BFA;
  --c-green: #34D399;
  --c-gold: #FBBF24;
  --c-orange: #FB923C;
  --c-warn: #FB923C;
  --ff-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

html { color-scheme: dark; }

body {
  font-family: var(--ff-body);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3,
.hero-title, .auth-title, .section-title, .card-title, .plan-name, .plan-price,
.stat-value, .logo, .results-hdr h2, .modal-hdr h2 {
  font-family: var(--ff-display);
  letter-spacing: -0.03em;
}

::selection { background: var(--c-accent); color: #0A0A0B; }

/* ── Backdrop: one soft spotlight instead of the neon grid ── */
.grid-bg {
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, rgba(200, 245, 60, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 0%, rgba(167, 139, 250, 0.08), transparent 70%) !important;
}
.grid-bg::after { display: none !important; }
.bg-gradient { background: none !important; }

/* ── Logo ── */
.logo { color: var(--c-text); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em; text-transform: none; }
.logo span { color: var(--c-text) !important; }
.logo img { max-height: 30px !important; width: 30px; height: 30px; border-radius: 8px; }
.logo-mark {
  position: relative;
  width: 30px !important; height: 30px !important;
  border-radius: 8px !important;
  background: var(--c-accent) !important;
  box-shadow: none !important;
  animation: none !important;
}
.logo-mark::before {
  content: ''; position: absolute; left: 7px; top: 8px; width: 3px; height: 14px;
  border-radius: 2px; background: #0A0A0B;
}
.logo-mark::after {
  content: ''; position: absolute; left: 13px; top: 8px;
  border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #0A0A0B;
  background: none; width: 0; height: 0; inset: auto; left: 13px; top: 8px;
}

/* ── Buttons: pills, sentence case ── */
.btn, .btn-submit, .gen-btn, .nav-btn, .social-btn, .logout-btn, .err-retry, .start-over,
.btn-s, .editor-btn, .paste-btn, .chip-btn, .dl-btn, .hclip-dl, .back-link, .nav-link {
  border-radius: var(--r-pill) !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  font-family: var(--ff-body);
}
.btn, .btn-submit, .gen-btn { font-weight: 600 !important; font-size: 0.95rem !important; }
.btn-primary, .btn-submit, .gen-btn, .btn-s.accent, .editor-btn.primary {
  background: var(--c-accent) !important;
  color: #0A0A0B !important;
  border-color: var(--c-accent) !important;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.btn-primary:hover, .btn-submit:hover:not(:disabled), .gen-btn:hover:not(:disabled) {
  background: #D6FF55 !important;
  box-shadow: 0 8px 30px rgba(200, 245, 60, 0.25) !important;
  transform: translateY(-1px);
}
.btn-primary:active, .btn-submit:active, .gen-btn:active { transform: translateY(0) scale(0.99); }
.btn-submit:disabled, .gen-btn:disabled, .btn:disabled { opacity: 0.55; transform: none; box-shadow: none !important; }
.gen-btn::after { display: none; }
.btn-outline, .nav-btn, .social-btn, .logout-btn, .btn-s.outline, .start-over, .err-retry {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--c-border-hi) !important;
  color: var(--c-text) !important;
}
.btn-outline:hover, .nav-btn:hover, .social-btn:hover, .logout-btn:hover, .btn-s.outline:hover, .start-over:hover, .err-retry:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: var(--c-text) !important;
}
.nav-btn { padding: 8px 16px !important; font-size: 0.85rem !important; font-weight: 500 !important; }
.chip-btn { font-weight: 500; }
.chip-btn.on { background: var(--c-accent-dim) !important; border-color: var(--c-accent) !important; color: var(--c-accent) !important; }

/* ── Fields ── */
.form-input, .cf-input, .hist-search, .caption-textarea, select.form-input {
  background: #0E0E10 !important;
  border: 1px solid var(--c-border-hi) !important;
  border-radius: var(--r-md) !important;
  color: var(--c-text);
  font-family: var(--ff-body) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus, .cf-input:focus, .hist-search:focus, .caption-textarea:focus {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 4px var(--c-accent-dim) !important;
  outline: none;
}
.form-input::placeholder, .url-input::placeholder { color: var(--c-dim); }
.form-label, .setting-label, .s-label { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500; color: var(--c-muted); font-size: 0.85rem; }
.checkbox { accent-color: var(--c-accent); }

/* ── Surfaces ── */
.auth-card, .card, .pricing-card, .clip-card, .modal, .input-block .settings, .video-card, .err-card, .stat-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.auth-card { border-radius: var(--r-xl); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.auth-title { font-size: clamp(1.7rem, 4vw, 2.1rem); font-weight: 700; }
.auth-subtitle { color: var(--c-muted); }
.auth-footer a, .forgot-link, .checkbox-label a { color: var(--c-accent); }
.divider { color: var(--c-dim); text-transform: none; letter-spacing: 0; }
.benefit-icon { background: var(--c-accent-dim); color: var(--c-accent); }
.password-strength-fill.weak { background: #F87171; }
.password-strength-fill.medium { background: var(--c-gold); }
.password-strength-fill.strong { background: var(--c-green); }

/* Error text reads as an error, not as a brand colour */
#errorMsg { color: #FCA5A5 !important; background: rgba(248, 113, 113, 0.10) !important; border: 1px solid rgba(248, 113, 113, 0.30) !important; border-radius: var(--r-sm) !important; }
#successMsg { color: #6EE7B7 !important; background: rgba(52, 211, 153, 0.10) !important; border: 1px solid rgba(52, 211, 153, 0.30) !important; border-radius: var(--r-sm) !important; }
.err-card { border-color: rgba(248, 113, 113, 0.35); }
.err-card h3 { color: #FCA5A5; }
.toast.error { background: #F87171 !important; color: #1A0505 !important; }
.toast.info { background: #FAFAFA !important; color: #0A0A0B !important; }
.toast.success { background: var(--c-accent) !important; color: #0A0A0B !important; }
.toast { border-radius: var(--r-pill) !important; }

/* ── App page (index.html) ── */
.hdr { border-bottom: 1px solid var(--c-border); }
.hero-eyebrow {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--c-border-hi) !important;
  color: var(--c-muted) !important;
  border-radius: var(--r-pill) !important;
  text-transform: none !important; letter-spacing: 0 !important; font-family: var(--ff-body) !important;
  font-weight: 500 !important;
}
.eyebrow-dot { color: var(--c-accent) !important; background: none !important; }
.hero-title { font-weight: 700 !important; letter-spacing: -0.045em !important; line-height: 1.02 !important; text-transform: none !important; }
.hero-title em { font-style: normal; color: var(--c-accent) !important; -webkit-text-fill-color: currentColor; background: none !important; text-decoration: none !important; border: 0 !important; }
.hero-title em::after { display: none !important; }
.hero-sub { color: var(--c-muted) !important; font-size: 1.05rem; line-height: 1.6; }
.url-row {
  background: #0E0E10 !important;
  border: 1px solid var(--c-border-hi) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 6px 6px 22px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.url-row:focus-within { border-color: var(--c-accent) !important; box-shadow: 0 0 0 4px var(--c-accent-dim) !important; }
.url-row.error-state { border-color: #F87171 !important; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15) !important; }
.url-input { font-family: var(--ff-body) !important; font-size: 1rem !important; background: transparent !important; }
.url-input:focus { outline: none; }
.settings { border-radius: var(--r-lg) !important; }
.count-slider, .pos-slider, .font-size-slider { accent-color: var(--c-accent); }
.count-val, .prog-pct, .score-val { color: var(--c-accent); }
.prog-fill { background: var(--c-accent) !important; box-shadow: none !important; }
.stage-node { border-radius: var(--r-md) !important; text-transform: none !important; letter-spacing: 0 !important; }
.stage-node.active { border-color: var(--c-accent) !important; color: var(--c-accent) !important; }
.stage-node.done { color: var(--c-green) !important; }
.spinner { border-top-color: var(--c-accent) !important; }
.viral-chip, .score-chip, .tag, .hjob-badge, .plan-badge, .popular-badge, .render-status { border-radius: var(--r-pill) !important; text-transform: none !important; letter-spacing: 0 !important; }
.popular-badge { background: var(--c-accent) !important; color: #0A0A0B !important; }
.card-title { font-weight: 600; }
.modal { border-radius: var(--r-xl) !important; }
.modal-overlay { background: rgba(0, 0, 0, 0.7) !important; }
.stab.active { color: var(--c-accent) !important; border-color: var(--c-accent) !important; }

/* ── Pricing ── */
.pricing-card.popular { border-color: var(--c-accent) !important; box-shadow: 0 0 0 1px var(--c-accent), 0 30px 80px rgba(200, 245, 60, 0.08) !important; }
.plan-price { font-weight: 700; }
.hero h1 { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--c-text); font-weight: 700; letter-spacing: -0.045em; }
.feature-list li::before { color: var(--c-accent) !important; }

/* ── Dashboard ── */
.top-nav, .nav, .header { background: rgba(10, 10, 11, 0.72) !important; }
.nav-link.active, .nav-link:hover { background: rgba(255, 255, 255, 0.07) !important; color: var(--c-text) !important; }
.sidebar-link { border-radius: var(--r-md) !important; }
.sidebar-link.active { background: var(--c-accent-dim) !important; color: var(--c-accent) !important; }
.sidebar-title { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 0.78rem !important; }
.user-avatar, .profile-avatar { background: var(--c-accent) !important; color: #0A0A0B !important; }
.usage-fill, .usage-bar-fill, #usageBar, #monthlyBar { background: var(--c-accent) !important; }
.plan-badge { background: var(--c-accent-dim); color: var(--c-accent); }

/* Logo above the sign-in and sign-up forms */
.auth-logo { display: block; width: 48px; height: 48px; margin: 0 auto 18px; border-radius: 12px; }

/* Destructive actions and failures read as red, not as a brand colour */
.btn-s.danger { background: rgba(248, 113, 113, 0.10) !important; border: 1px solid rgba(248, 113, 113, 0.35) !important; color: #FCA5A5 !important; border-radius: var(--r-pill) !important; }
.btn-s.danger:hover { background: rgba(248, 113, 113, 0.18) !important; }
.hjob-badge.fail { background: rgba(248, 113, 113, 0.12) !important; color: #FCA5A5 !important; border-color: rgba(248, 113, 113, 0.35) !important; }