/* ============================================================
   TEKNO UF  —  Premium Dark UI  |  Fully Responsive
   Fonts: Syne (headings)  +  DM Sans (body)
   ============================================================ */

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  --bg-base:       #080c14;
  --bg-card:       rgba(14,20,35,.88);
  --bg-card-solid: #0e1423;
  --bg-elevated:   rgba(18,26,46,.92);
  --bg-input:      rgba(255,255,255,.06);

  --accent:        #00e5ff;
  --accent-dim:    rgba(0,229,255,.14);
  --accent-glow:   rgba(0,229,255,.32);
  --gold:          #ffd166;
  --gold-dim:      rgba(255,209,102,.14);
  --green:         #06d6a0;
  --green-dim:     rgba(6,214,160,.13);
  --red:           #ef476f;
  --red-dim:       rgba(239,71,111,.13);
  --purple:        #b388ff;
  --purple-dim:    rgba(179,136,255,.13);

  --text-primary:  #eef2ff;
  --text-secondary:#8892b0;
  --text-muted:    #4a5568;

  --border:        rgba(255,255,255,.07);
  --border-m:      rgba(255,255,255,.11);
  --border-accent: rgba(0,229,255,.24);

  --font-head: 'Syne',     sans-serif;
  --font-body: 'DM Sans',  sans-serif;

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow:    0 4px 32px rgba(0,0,0,.4);
  --shadow-accent: 0 0 32px rgba(0,229,255,.14);

  --nav-h: 68px;
  --container: 1240px;
  --side-pad: 24px;
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body  {
  font-family: var(--font-body);
  background:  var(--bg-base);
  color:       var(--text-primary);
  line-height: 1.65;
  overflow-x:  hidden;
  font-size:   15px;
}
a    { text-decoration:none; color:inherit; }
img  { max-width:100%; display:block; }
ul   { list-style:none; }

/* Scrollbar */
::-webkit-scrollbar       { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:var(--accent-dim); border-radius:3px; }

/* ─── BACKGROUND ──────────────────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 55% at 10%  10%, rgba(0,229,255,.055) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90%  80%, rgba(179,136,255,.045) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50%  50%, rgba(6,214,160,.025) 0%, transparent 60%);
}

/* ─── TYPOGRAPHY ──────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem,  5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem,3.5vw,2.8rem); }
h3 { font-size: clamp(1.2rem,2.5vw,1.8rem); }
h4 { font-size: 1.05rem; }

.accent    { color:var(--accent);  }
.gold      { color:var(--gold);    }
.green-text{ color:var(--green);   }

/* ─── LAYOUT ──────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--side-pad);
  position:relative;
  z-index:1;
}
.section    { padding:80px 0; }
.section-sm { padding:48px 0; }

.section-header        { margin-bottom:48px; }
.section-header .tag   { display:inline-block; margin-bottom:16px; }
.section-header p      { color:var(--text-secondary); font-size:1.05rem; max-width:520px; margin-top:12px; }

/* ─── GRID ────────────────────────────────────────────────── */
.grid-2   { display:grid; grid-template-columns:repeat(2,1fr);                      gap:24px; }
.grid-3   { display:grid; grid-template-columns:repeat(3,1fr);                      gap:24px; }
.grid-4   { display:grid; grid-template-columns:repeat(4,1fr);                      gap:20px; }
.grid-auto{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px; }

/* ─── NAVBAR ──────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  background:rgba(8,12,20,.72);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
  transition:background .3s, border-color .3s;
}
.navbar.scrolled {
  background:rgba(8,12,20,.97);
  border-bottom-color:var(--border-accent);
}

.nav-container {
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--side-pad);
  height:100%;
  display:flex;
  align-items:center;
  gap:28px;
}

/* Logo */
.nav-logo {
  display:flex; align-items:center; gap:9px;
  text-decoration:none; flex-shrink:0;
}
.logo-icon {
  font-size:1.55rem;
  filter:drop-shadow(0 0 9px var(--accent));
  line-height:1;
}
.logo-text {
  font-family:var(--font-head);
  font-size:1.28rem;
  font-weight:800;
  color:var(--text-primary);
  letter-spacing:-.03em;
}

/* Nav links */
.nav-links {
  display:flex;
  list-style:none;
  gap:2px;
  flex:1;
  align-items:center;
}
.nav-link {
  color:var(--text-secondary);
  text-decoration:none;
  font-size:.875rem;
  font-weight:500;
  padding:7px 13px;
  border-radius:8px;
  transition:all .2s;
  white-space:nowrap;
}
.nav-link:hover, .nav-link.active { color:var(--text-primary); background:var(--bg-input); }
.nav-link.active { color:var(--accent); }

/* Nav right side */
.nav-actions {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.nav-avatar-link { display:flex; align-items:center; gap:8px; text-decoration:none; }
.nav-avatar {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.82rem; color:var(--bg-base);
  flex-shrink:0;
}
.nav-username { color:var(--text-primary); font-size:.875rem; font-weight:500; }

/* ── HAMBURGER ── */
.nav-toggle {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none; border:none;
  cursor:pointer; padding:8px 6px;
  width:40px; height:40px;
  border-radius:8px;
  transition:background .2s;
  flex-shrink:0;
}
.nav-toggle:hover { background:var(--bg-input); }
.nav-toggle span {
  display:block; width:22px; height:2px;
  background:var(--text-secondary);
  border-radius:2px;
  transition:all .32s cubic-bezier(.4,0,.2,1);
  transform-origin:center;
}
/* Animated X state */
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:var(--accent); }
.nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:var(--accent); }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 22px; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.875rem; font-weight:600;
  text-decoration:none; cursor:pointer; border:none;
  transition:all .22s ease; white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0);
  transition:background .18s;
}
.btn:hover::after { background:rgba(255,255,255,.06); }

.btn-primary  { background:var(--accent); color:var(--bg-base); box-shadow:0 0 22px var(--accent-glow); }
.btn-primary:hover { box-shadow:0 0 38px var(--accent-glow); transform:translateY(-1px); }
.btn-gold     { background:var(--gold);   color:var(--bg-base); box-shadow:0 0 22px rgba(255,209,102,.32); }
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 0 38px rgba(255,209,102,.48); }
.btn-outline  { background:transparent; color:var(--text-primary); border:1px solid var(--border-m); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-ghost    { background:var(--bg-input); color:var(--text-secondary); }
.btn-ghost:hover { color:var(--text-primary); background:rgba(255,255,255,.1); }

.btn-sm  { padding:7px 15px; font-size:.8rem;  border-radius:8px; }
.btn-lg  { padding:14px 32px; font-size:.95rem; border-radius:12px; }
.btn-full{ width:100%; }

.btn-group { display:flex; gap:12px; flex-wrap:wrap; }

/* ─── TAGS / BADGES ───────────────────────────────────────── */
.tag {
  display:inline-block;
  background:var(--accent-dim);
  color:var(--accent);
  font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 13px; border-radius:100px;
  border:1px solid var(--border-accent);
}
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:100px;
  font-size:.7rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; border:1px solid;
}
.badge-accent      { background:var(--accent-dim); color:var(--accent);  border-color:var(--border-accent); }
.badge-gold        { background:var(--gold-dim);   color:var(--gold);    border-color:rgba(255,209,102,.24); }
.badge-green       { background:var(--green-dim);  color:var(--green);   border-color:rgba(6,214,160,.24); }
.badge-red         { background:var(--red-dim);    color:var(--red);     border-color:rgba(239,71,111,.24); }
.badge-purple      { background:var(--purple-dim); color:var(--purple);  border-color:rgba(179,136,255,.24); }
.badge-free        { background:var(--green-dim);  color:var(--green);   border-color:rgba(6,214,160,.24); }
.badge-prime       { background:var(--accent-dim); color:var(--accent);  border-color:var(--border-accent); }
.badge-super_prime { background:var(--gold-dim);   color:var(--gold);    border-color:rgba(255,209,102,.24); }

/* ─── CARDS ───────────────────────────────────────────────── */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:all .28s ease;
  overflow:hidden;
}
.card:hover { border-color:var(--border-accent); transform:translateY(-4px); box-shadow:var(--shadow-accent); }
.card-body   { padding:24px; }
.card-header { padding:18px 24px; border-bottom:1px solid var(--border); }

/* ─── PROGRESS BAR ────────────────────────────────────────── */
.progress-bar  { width:100%; height:7px; background:rgba(255,255,255,.08); border-radius:100px; overflow:hidden; }
.progress-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--accent),var(--green)); transition:width 1.2s cubic-bezier(.4,0,.2,1); width:0; }
.progress-fill.gold { background:linear-gradient(90deg,var(--gold),#ff9f43); }

/* ─── FORM ELEMENTS ───────────────────────────────────────── */
.form-group    { margin-bottom:20px; }
.form-label    { display:block; margin-bottom:7px; font-size:.82rem; font-weight:500; color:var(--text-secondary); }
.form-input, .form-select, .form-textarea {
  width:100%; padding:11px 15px;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text-primary);
  font-family:var(--font-body); font-size:.88rem; outline:none;
  transition:all .2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);
}
.form-select option { background:var(--bg-card-solid); }
.form-textarea { min-height:120px; resize:vertical; }
.form-row   { display:grid; grid-template-columns:1fr 1fr;   gap:16px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* ─── HERO ────────────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding-top:var(--nav-h); position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(0,229,255,.08) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 82% 60%, rgba(179,136,255,.06) 0%, transparent 60%);
}
.hero-grid-lines {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:60px 60px;
}
.hero-content {
  position:relative; z-index:1; text-align:center;
  max-width:860px; margin:0 auto;
  padding:80px var(--side-pad);
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-dim); border:1px solid var(--border-accent); border-radius:100px;
  padding:6px 16px 6px 8px; margin-bottom:28px;
  font-size:.8rem; color:var(--accent); font-weight:600;
}
.hero-eyebrow .dot {
  width:8px; height:8px; background:var(--accent); border-radius:50%;
  animation:pulse 2s infinite;
}
.hero h1 {
  margin-bottom:18px;
  background:linear-gradient(145deg, #fff 40%, var(--accent) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub {
  font-size:1.1rem; color:var(--text-secondary); margin-bottom:34px;
  max-width:600px; margin-left:auto; margin-right:auto; line-height:1.72;
}
.hero-cta { justify-content:center; }

.hero-companies {
  margin-top:52px;
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap;
}
.hero-companies-label { font-size:.76rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }
.company-pill {
  padding:5px 13px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:100px;
  font-size:.78rem; color:var(--text-secondary); transition:all .2s;
}
.company-pill:hover { border-color:var(--accent); color:var(--accent); }

/* ─── STATS STRIP ─────────────────────────────────────────── */
.stats-strip {
  padding:48px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  position:relative; z-index:1;
}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat-item  { text-align:center; padding:24px 16px; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:none; }
.stat-number {
  font-family:var(--font-head);
  font-size:clamp(1.8rem,4vw,3rem); font-weight:800;
  color:var(--accent); display:block; letter-spacing:-.03em;
}
.stat-number.gold  { color:var(--gold);  }
.stat-number.green { color:var(--green); }
.stat-label { font-size:.78rem; color:var(--text-secondary); margin-top:5px; text-transform:uppercase; letter-spacing:.06em; }

/* ─── COMPANY CARDS ───────────────────────────────────────── */
.company-card {
  display:flex; flex-direction:column; align-items:flex-start;
  padding:26px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); text-decoration:none; cursor:pointer;
  transition:all .28s ease; position:relative; overflow:hidden;
}
.company-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--ccolor, var(--accent)); opacity:0; transition:opacity .28s;
}
.company-card:hover::before { opacity:1; }
.company-card:hover { transform:translateY(-6px); border-color:var(--border-accent); box-shadow:0 12px 40px rgba(0,0,0,.28); }
.company-icon  { font-size:2.4rem; margin-bottom:14px; display:block; }
.company-name  { font-family:var(--font-head); font-size:1.05rem; font-weight:700; color:var(--text-primary); margin-bottom:5px; }
.company-tests { font-size:.78rem; color:var(--text-secondary); }
.company-arrow {
  margin-top:18px; width:34px; height:34px; border-radius:50%;
  background:var(--bg-input); display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:1rem; transition:all .2s;
}
.company-card:hover .company-arrow { background:var(--accent); color:var(--bg-base); }

/* ─── MOCK TEST CARDS ─────────────────────────────────────── */
.test-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:all .28s; }
.test-card:hover { border-color:var(--border-accent); transform:translateY(-4px); box-shadow:var(--shadow-accent); }
.test-card-top  { padding:18px 22px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.test-card-body { padding:0 22px 18px; }
.test-title     { font-family:var(--font-head); font-size:.98rem; font-weight:700; margin-bottom:5px; color:var(--text-primary); }
.test-meta      { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 14px; }
.test-meta span { font-size:.78rem; color:var(--text-secondary); display:flex; align-items:center; gap:4px; }
.test-actions   { display:flex; gap:10px; }

/* ─── SLOT QUESTION CARD ──────────────────────────────────── */
.slot-question-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; transition:all .28s; cursor:pointer; }
.slot-question-card:hover { border-color:var(--border-accent); }
.slot-question-text { font-size:.92rem; color:var(--text-primary); margin-bottom:11px; line-height:1.65; }
.slot-tags  { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px; }
.slot-tag   { padding:3px 10px; background:var(--bg-input); border-radius:100px; font-size:.7rem; color:var(--text-secondary); }
.slot-actions { display:flex; align-items:center; gap:14px; }
.upvote-btn {
  display:flex; align-items:center; gap:5px;
  background:none; border:1px solid var(--border); border-radius:100px;
  padding:5px 12px; color:var(--text-secondary); font-size:.78rem;
  cursor:pointer; transition:all .2s; font-family:var(--font-body);
}
.upvote-btn:hover, .upvote-btn.voted { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.hot-badge      { padding:3px 10px; background:var(--red-dim);  border-radius:100px; font-size:.7rem; color:var(--red);  font-weight:600; }
.trending-badge { padding:3px 10px; background:var(--gold-dim); border-radius:100px; font-size:.7rem; color:var(--gold); font-weight:600; }

/* ─── TESTIMONIALS ────────────────────────────────────────── */
.testimonial-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; transition:all .28s; }
.testimonial-card:hover { border-color:var(--border-accent); transform:translateY(-4px); }
.testimonial-stars { color:var(--gold); margin-bottom:14px; font-size:.95rem; }
.testimonial-text  { font-size:.9rem; color:var(--text-secondary); line-height:1.76; margin-bottom:18px; }
.testimonial-author{ display:flex; align-items:center; gap:11px; }
.author-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem; color:var(--bg-base); flex-shrink:0;
}
.author-name    { font-weight:600; font-size:.88rem; }
.author-company { font-size:.76rem; color:var(--text-secondary); margin-top:2px; }

/* ─── PRICING ─────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.pricing-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:34px; position:relative; transition:all .28s; }
.pricing-card.featured      { border-color:var(--accent); box-shadow:0 0 48px rgba(0,229,255,.12); transform:scale(1.03); }
.pricing-card.featured-gold { border-color:var(--gold);   box-shadow:0 0 48px rgba(255,209,102,.12); }
.pricing-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:5px 15px; border-radius:100px; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.pricing-badge.accent { background:var(--accent); color:var(--bg-base); }
.pricing-badge.gold   { background:var(--gold);   color:var(--bg-base); }
.plan-name  { font-family:var(--font-head); font-size:1.05rem; font-weight:700; margin-bottom:7px; }
.plan-price { font-family:var(--font-head); font-size:2.7rem; font-weight:800; letter-spacing:-.04em; margin:14px 0 3px; }
.plan-price span { font-size:.95rem; font-weight:400; color:var(--text-secondary); }
.plan-desc  { font-size:.83rem; color:var(--text-secondary); margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--border); }
.plan-features { list-style:none; margin-bottom:28px; }
.plan-features li { padding:7px 0; font-size:.86rem; color:var(--text-secondary); display:flex; align-items:flex-start; gap:9px; border-bottom:1px solid var(--border); }
.plan-features li:last-child { border-bottom:none; }
.plan-features li.yes { color:var(--text-primary); }
.plan-features li .check { color:var(--green); flex-shrink:0; margin-top:2px; }
.plan-features li .cross { color:var(--text-muted); flex-shrink:0; margin-top:2px; }

/* ─── DASHBOARD ───────────────────────────────────────────── */
.dashboard-layout { display:grid; grid-template-columns:260px 1fr; gap:24px; }
.sidebar { position:sticky; top:calc(var(--nav-h) + 24px); height:fit-content; }
.sidebar-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sidebar-profile { padding:22px; text-align:center; border-bottom:1px solid var(--border); }
.profile-avatar-lg {
  width:70px; height:70px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; font-weight:800; color:var(--bg-base);
  margin:0 auto 11px; border:3px solid var(--border-accent);
}
.profile-name  { font-weight:700; font-size:.98rem; }
.profile-email { font-size:.76rem; color:var(--text-secondary); margin-top:3px; }
.sidebar-nav   { list-style:none; padding:10px; }
.sidebar-nav li a {
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; border-radius:8px;
  color:var(--text-secondary); text-decoration:none; font-size:.86rem; font-weight:500; transition:all .2s;
}
.sidebar-nav li a:hover, .sidebar-nav li a.active { background:var(--accent-dim); color:var(--accent); }
.sidebar-nav li a .icon { font-size:.95rem; width:17px; text-align:center; }

.dashboard-main {}
.dash-greeting { margin-bottom:30px; }
.dash-greeting h2 { font-size:1.55rem; }
.dash-greeting p { color:var(--text-secondary); }

.dash-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px; }
.dash-stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; transition:all .28s; }
.dash-stat-card:hover { border-color:var(--border-accent); }
.dash-stat-icon  { font-size:1.4rem; margin-bottom:10px; display:block; }
.dash-stat-value { font-family:var(--font-head); font-size:1.7rem; font-weight:800; color:var(--accent); letter-spacing:-.03em; }
.dash-stat-label { font-size:.74rem; color:var(--text-secondary); margin-top:3px; text-transform:uppercase; letter-spacing:.05em; }

/* Roadmap */
.roadmap { display:flex; align-items:center; margin-bottom:28px; overflow-x:auto; padding-bottom:6px; gap:0; }
.roadmap-step { display:flex; flex-direction:column; align-items:center; flex:1; min-width:82px; position:relative; }
.roadmap-step::after { content:''; position:absolute; top:17px; left:60%; width:80%; height:2px; background:var(--border); }
.roadmap-step:last-child::after { display:none; }
.roadmap-step.done::after { background:var(--accent); }
.step-circle { width:34px; height:34px; border-radius:50%; background:var(--bg-card); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; z-index:1; transition:all .28s; }
.roadmap-step.done .step-circle   { background:var(--accent); border-color:var(--accent); color:var(--bg-base); }
.roadmap-step.active .step-circle { border-color:var(--accent); color:var(--accent); box-shadow:0 0 11px var(--accent-glow); }
.step-label { font-size:.68rem; color:var(--text-secondary); margin-top:7px; text-align:center; }
.roadmap-step.done .step-label, .roadmap-step.active .step-label { color:var(--text-primary); }

/* Leaderboard */
.leaderboard-table { width:100%; border-collapse:collapse; }
.leaderboard-table th { padding:9px 15px; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); text-align:left; border-bottom:1px solid var(--border); }
.leaderboard-table td { padding:11px 15px; font-size:.86rem; border-bottom:1px solid var(--border); color:var(--text-secondary); }
.leaderboard-table tr:last-child td { border-bottom:none; }
.leaderboard-table tr:hover td { background:var(--bg-input); color:var(--text-primary); }
.rank-1 td:first-child { color:var(--gold);   font-weight:700; }
.rank-2 td:first-child { color:#c0c0c0;       font-weight:700; }
.rank-3 td:first-child { color:#cd7f32;       font-weight:700; }

/* Streak */
.streak-bar { display:flex; gap:5px; flex-wrap:wrap; }
.streak-day { width:26px; height:26px; border-radius:5px; background:var(--bg-input); border:1px solid var(--border); transition:all .28s; }
.streak-day.done  { background:var(--green);  border-color:var(--green);  }
.streak-day.today { background:var(--accent); border-color:var(--accent); }

/* ─── HIRING DRIVE CARD ───────────────────────────────────── */
.drive-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; transition:all .28s; }
.drive-card:hover { border-color:var(--border-accent); transform:translateY(-4px); }
.drive-header   { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:11px; }
.drive-company  { font-size:.78rem; color:var(--text-secondary); margin-bottom:5px; }
.drive-title    { font-family:var(--font-head); font-size:.98rem; font-weight:700; }
.drive-meta     { font-size:.78rem; color:var(--text-secondary); margin:11px 0; display:flex; gap:14px; flex-wrap:wrap; }
.drive-deadline { font-size:.78rem; color:var(--red); font-weight:500; }
.drive-deadline.safe { color:var(--green); }

/* ─── MATERIAL CARD ───────────────────────────────────────── */
.material-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; transition:all .28s; position:relative; overflow:hidden; }
.material-card:hover { border-color:var(--border-accent); transform:translateY(-4px); }
.material-card.locked::after { content:'🔒'; position:absolute; top:11px; right:11px; font-size:.95rem; }
.material-icon  { font-size:2.4rem; margin-bottom:11px; display:block; }
.material-title { font-weight:700; font-size:.93rem; margin-bottom:5px; }
.material-desc  { font-size:.8rem; color:var(--text-secondary); margin-bottom:11px; }
.material-downloads { font-size:.73rem; color:var(--text-muted); }

/* ─── PAGE HERO ───────────────────────────────────────────── */
.page-hero    { padding:calc(var(--nav-h) + 48px) 0 48px; position:relative; }
.page-hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0,229,255,.06) 0%, transparent 70%); }

/* ─── AUTH ────────────────────────────────────────────────── */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:calc(var(--nav-h) + 32px) var(--side-pad) 48px; }
.auth-card  { width:100%; max-width:430px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:38px; backdrop-filter:blur(16px); }
.auth-logo  { text-align:center; margin-bottom:26px; }
.auth-logo .logo-text { font-size:1.45rem; font-family:var(--font-head); font-weight:800; }
.auth-title { font-family:var(--font-head); font-size:1.55rem; text-align:center; margin-bottom:5px; }
.auth-sub   { text-align:center; color:var(--text-secondary); font-size:.88rem; margin-bottom:26px; }

/* Alert */
.alert { padding:11px 15px; border-radius:var(--radius-sm); font-size:.83rem; margin-bottom:14px; }
.alert-error   { background:var(--red-dim);    border:1px solid rgba(239,71,111,.25);  color:var(--red);    }
.alert-success { background:var(--green-dim);  border:1px solid rgba(6,214,160,.25);   color:var(--green);  }
.alert-info    { background:var(--accent-dim); border:1px solid var(--border-accent);  color:var(--accent); }

/* ─── YT SECTION ──────────────────────────────────────────── */
.yt-section { padding:80px 0; }
.yt-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; }
.yt-info  { padding:44px; }
.yt-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 13px; background:rgba(255,0,0,.13); border:1px solid rgba(255,0,0,.28); border-radius:100px; font-size:.76rem; color:#ff4444; font-weight:600; margin-bottom:18px; }
.yt-thumb { background:linear-gradient(135deg,#1a1a2e,#16213e); display:flex; align-items:center; justify-content:center; min-height:260px; position:relative; cursor:pointer; }
.yt-play  { width:68px; height:68px; border-radius:50%; background:rgba(255,0,0,.88); display:flex; align-items:center; justify-content:center; font-size:1.7rem; transition:all .28s; }
.yt-thumb:hover .yt-play { transform:scale(1.1); background:#f00; }

/* ─── COMMUNITY ───────────────────────────────────────────── */
.community-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:600px; }
.comm-card { padding:24px; border-radius:var(--radius); border:1px solid; display:flex; align-items:center; gap:18px; text-decoration:none; transition:all .28s; }
.comm-card.tg { border-color:rgba(38,169,224,.28); background:rgba(38,169,224,.07); }
.comm-card.wa { border-color:rgba(37,211,102,.28); background:rgba(37,211,102,.07); }
.comm-card:hover { transform:translateY(-4px); }
.comm-icon    { font-size:2.4rem; }
.comm-name    { font-family:var(--font-head); font-weight:700; font-size:1.05rem; }
.comm-members { font-size:.8rem; color:var(--text-secondary); margin-top:3px; }

/* ─── TABS ────────────────────────────────────────────────── */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:26px; overflow-x:auto; }
.tab-btn { padding:9px 18px; background:none; border:none; border-bottom:2px solid transparent; color:var(--text-secondary); cursor:pointer; font-family:var(--font-body); font-size:.86rem; font-weight:500; white-space:nowrap; transition:all .2s; margin-bottom:-1px; }
.tab-btn.active { border-bottom-color:var(--accent); color:var(--accent); }
.tab-btn:hover  { color:var(--text-primary); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ─── EMPTY STATE ─────────────────────────────────────────── */
.empty-state       { text-align:center; padding:60px 24px; color:var(--text-secondary); }
.empty-icon        { font-size:2.8rem; margin-bottom:14px; display:block; opacity:.5; }
.empty-state h3    { font-size:1.05rem; margin-bottom:7px; color:var(--text-primary); }

/* ─── TOAST ───────────────────────────────────────────────── */
.toast-container { position:fixed; top:calc(var(--nav-h) + 14px); right:22px; z-index:9999; display:flex; flex-direction:column; gap:9px; }
.toast { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 17px; font-size:.86rem; box-shadow:var(--shadow); transform:translateX(120%); transition:transform .3s cubic-bezier(.4,0,.2,1); max-width:310px; backdrop-filter:blur(14px); }
.toast.show { transform:translateX(0); }
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red);   }
.toast.info    { border-left:3px solid var(--accent); }

/* ─── FOOTER ──────────────────────────────────────────────── */
.footer { border-top:1px solid var(--border); padding:64px 0 0; position:relative; z-index:1; }
.footer-grid { max-width:var(--container); margin:0 auto; padding:0 var(--side-pad); display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; }
.footer-brand {}
.footer-logo { font-family:var(--font-head); font-size:1.3rem; font-weight:800; margin-bottom:12px; }
.footer-tagline { font-size:.85rem; color:var(--text-secondary); line-height:1.7; margin-bottom:20px; max-width:280px; }
.footer-socials { display:flex; gap:10px; flex-wrap:wrap; }
.social-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px; background:var(--bg-input); border:1px solid var(--border); font-size:.8rem; color:var(--text-secondary); text-decoration:none; transition:all .2s; }
.social-btn:hover { color:var(--text-primary); border-color:var(--border-m); }
.footer-links-group h4 { font-family:var(--font-head); font-size:.88rem; font-weight:700; margin-bottom:14px; color:var(--text-primary); }
.footer-links-group ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-links-group ul li a { font-size:.83rem; color:var(--text-secondary); text-decoration:none; transition:color .2s; }
.footer-links-group ul li a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid var(--border); padding:22px var(--side-pad); max-width:var(--container); margin:0 auto; display:flex; flex-direction:column; gap:4px; }
.footer-bottom p { font-size:.78rem; color:var(--text-muted); }
.footer-disclaimer { font-size:.7rem !important; }

/* ─── ADMIN ───────────────────────────────────────────────── */
.admin-layout   { display:grid; grid-template-columns:var(--sidebar-w,240px) 1fr; min-height:100vh; padding-top:var(--nav-h); }
.admin-sidebar  { background:var(--bg-card-solid); border-right:1px solid var(--border); position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); overflow-y:auto; padding:22px 0; }
.admin-nav-item { display:flex; align-items:center; gap:9px; padding:9px 19px; color:var(--text-secondary); text-decoration:none; font-size:.86rem; transition:all .2s; border-left:3px solid transparent; }
.admin-nav-item:hover, .admin-nav-item.active { background:var(--accent-dim); color:var(--accent); border-left-color:var(--accent); }
.admin-nav-section { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); padding:18px 19px 7px; }
.admin-content { padding:28px; }
.admin-table   { width:100%; border-collapse:collapse; }
.admin-table th, .admin-table td { padding:11px 15px; text-align:left; border-bottom:1px solid var(--border); font-size:.83rem; }
.admin-table th { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); background:var(--bg-input); }
.admin-table tr:hover td { background:var(--bg-input); }

/* ─── MISC UTILITIES ──────────────────────────────────────── */
.flex          { display:flex; }
.flex-center   { display:flex; align-items:center; justify-content:center; }
.flex-between  { display:flex; align-items:center; justify-content:space-between; }
.gap-6  { gap:6px;  } .gap-8  { gap:8px;  } .gap-12 { gap:12px; }
.gap-16 { gap:16px; } .gap-24 { gap:24px; }
.mb-8   { margin-bottom:8px;  } .mb-12  { margin-bottom:12px; }
.mb-16  { margin-bottom:16px; } .mb-24  { margin-bottom:24px; }
.mb-32  { margin-bottom:32px; } .mb-48  { margin-bottom:48px; }
.mt-8   { margin-top:8px;  }   .mt-16  { margin-top:16px;    }
.mt-24  { margin-top:24px; }   .mt-32  { margin-top:32px;    }
.text-center    { text-align:center;  }
.text-right     { text-align:right;   }
.text-sm        { font-size:.8rem;    }
.text-xs        { font-size:.73rem;   }
.text-muted     { color:var(--text-muted);     }
.text-secondary { color:var(--text-secondary); }
.font-head      { font-family:var(--font-head); }
.font-700       { font-weight:700; }
.w-full         { width:100%; }
.divider        { height:1px; background:var(--border); margin:22px 0; }
.red-dim        { background:var(--red-dim); }

/* ─── ANIMATIONS ──────────────────────────────────────────── */
@keyframes pulse    { 0%,100%{opacity:1;transform:scale(1);}  50%{opacity:.7;transform:scale(.9);}  }
@keyframes float    { 0%,100%{transform:translateY(0);}       50%{transform:translateY(-10px);}       }
@keyframes fadeInUp { from{opacity:0;transform:translateY(28px);} to{opacity:1;transform:translateY(0);} }
@keyframes glow     { 0%,100%{box-shadow:0 0 18px var(--accent-glow);} 50%{box-shadow:0 0 38px var(--accent-glow),0 0 56px rgba(0,229,255,.1);} }

.animate-in { animation:fadeInUp .6s ease forwards; opacity:0; }
.delay-1 { animation-delay:.1s; } .delay-2 { animation-delay:.2s; }
.delay-3 { animation-delay:.3s; } .delay-4 { animation-delay:.4s; }
.delay-5 { animation-delay:.5s; } .delay-6 { animation-delay:.6s; }

.animate-on-scroll { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

/* ── 1280px ── */
@media (max-width:1280px) {
  :root { --container:1060px; }
  .footer-grid { grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
}

/* ── 1024px (tablet landscape) ── */
@media (max-width:1024px) {
  :root { --side-pad:20px; }
  .grid-4          { grid-template-columns:repeat(2,1fr); }
  .pricing-grid    { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
  .pricing-card.featured { transform:none; }
  .yt-card         { grid-template-columns:1fr; }
  .yt-thumb        { min-height:240px; }
  .dashboard-layout{ grid-template-columns:1fr; }
  .sidebar         { position:static; }
  .stats-grid      { grid-template-columns:repeat(2,1fr); }
  .admin-layout    { grid-template-columns:1fr; }
  .admin-sidebar   { position:static; height:auto; }
  .footer-grid     { grid-template-columns:1fr 1fr; gap:32px; }
}

/* ── 768px (tablet portrait / large phone) ── */
@media (max-width:768px) {
  :root { --nav-h:60px; --side-pad:16px; }

  /* ── Navbar: show hamburger, hide links ── */
  .nav-links {
    display:none;
    position:fixed;
    top:var(--nav-h); left:0; right:0; bottom:0;
    background:rgba(5,8,18,.97);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    flex-direction:column;
    padding:20px 16px 32px;
    gap:4px;
    overflow-y:auto;
    border-top:1px solid var(--border);
    /* slide in from right */
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .32s;
    opacity:0;
    z-index:999;
  }
  .nav-links.open {
    display:flex;
    transform:translateX(0);
    opacity:1;
  }
  .nav-link {
    padding:13px 16px;
    font-size:.95rem;
    border-radius:10px;
    border:1px solid transparent;
  }
  .nav-link:hover, .nav-link.active {
    border-color:var(--border);
    background:rgba(255,255,255,.05);
  }
  /* Separator line above auth buttons in mobile menu */
  .nav-links .nav-separator {
    height:1px; background:var(--border); margin:10px 0;
  }

  .nav-toggle { display:flex; }

  /* Hide desktop auth buttons text on very small screens */
  .nav-username { display:none; }

  /* Grids */
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .dash-grid   { grid-template-columns:repeat(2,1fr); }
  .stats-grid  { grid-template-columns:repeat(2,1fr); }
  .community-cards { grid-template-columns:1fr; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }

  /* Hero */
  .hero-content { padding:60px var(--side-pad); }
  .hero-sub     { font-size:1rem; }
  .btn-group.hero-cta { flex-direction:column; align-items:center; }
  .btn-group.hero-cta .btn { width:100%; max-width:340px; justify-content:center; }

  /* Stats */
  .stat-item { border-right:none; border-bottom:1px solid var(--border); }
  .stat-item:last-child { border-bottom:none; }

  /* Section */
  .section    { padding:56px 0; }
  .section-sm { padding:36px 0; }

  /* Auth */
  .auth-card  { padding:26px 18px; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-tagline { max-width:100%; }

  /* YT card */
  .yt-info { padding:28px; }

  /* Pricing */
  .pricing-grid { grid-template-columns:1fr; max-width:100%; }

  /* Dashboard */
  .dash-grid { grid-template-columns:1fr 1fr; }
  .roadmap   { gap:0; }
}

/* ── 480px (small phones) ── */
@media (max-width:480px) {
  :root { --side-pad:14px; }

  .stats-grid  { grid-template-columns:1fr 1fr; }
  .dash-grid   { grid-template-columns:1fr; }
  .btn-group   { flex-direction:column; }
  .btn-group .btn { width:100%; }
  .community-cards { grid-template-columns:1fr; }

  .hero-eyebrow  { font-size:.72rem; }
  .hero-companies{ gap:7px; }
  .company-pill  { font-size:.72rem; padding:4px 10px; }

  .nav-actions .btn-sm { padding:6px 10px; font-size:.74rem; }

  /* Footer one column */
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { text-align:center; }

  /* Company cards 2-col on small phones */
  .grid-4 { grid-template-columns:1fr 1fr; }
}

/* ── 360px (very small phones) ── */
@media (max-width:360px) {
  :root { --side-pad:12px; }
  .grid-4 { grid-template-columns:1fr; }
  .nav-logo .logo-text { font-size:1.1rem; }
}

/* ── Print ── */
@media print {
  .navbar, .nav-toggle, .toast-container { display:none !important; }
  body { background:#fff; color:#111; }
}
body.menu-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .nav-links {
    height: var(--mobile-menu-height, calc(100dvh - var(--nav-h)));
    max-height: var(--mobile-menu-height, calc(100dvh - var(--nav-h)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 110px;
  }

  .nav-links.open {
    display: flex !important;
  }
}
/* ============================================================
   THEME SWITCHER — Dark / Light Mode
   Paste at the END of main.css
============================================================ */

/* Light mode variables */
html[data-theme="light"] {
  --bg-base:       #f6f8fc;
  --bg-card:       rgba(255,255,255,.88);
  --bg-card-solid: #ffffff;
  --bg-elevated:   rgba(255,255,255,.94);
  --bg-input:      rgba(2,6,23,.055);

  /* Keep same effects/accent colors */
  --accent:        #00e5ff;
  --accent-dim:    rgba(0,229,255,.16);
  --accent-glow:   rgba(0,229,255,.34);

  --gold:          #d99a00;
  --gold-dim:      rgba(217,154,0,.14);
  --green:         #009f78;
  --green-dim:     rgba(0,159,120,.13);
  --red:           #d92d59;
  --red-dim:       rgba(217,45,89,.12);
  --purple:        #7c3aed;
  --purple-dim:    rgba(124,58,237,.12);

  /* Light mode text */
  --text-primary:   #050816;
  --text-secondary: #334155;
  --text-muted:     #64748b;

  --border:        rgba(2,6,23,.09);
  --border-m:      rgba(2,6,23,.14);
  --border-accent: rgba(0,166,185,.28);

  --shadow:        0 8px 32px rgba(15,23,42,.10);
  --shadow-accent: 0 0 32px rgba(0,229,255,.18);
}

/* Light mode body */
html[data-theme="light"] body {
  background: var(--bg-base);
  color: var(--text-primary);
}

/* Keep glowing background effect, but make it light-friendly */
html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 80% 55% at 10% 10%, rgba(0,229,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(124,58,237,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6,214,160,.05) 0%, transparent 60%);
}

/* Navbar light mode */
html[data-theme="light"] .navbar {
  background: rgba(255,255,255,.76);
  border-bottom-color: var(--border);
}

html[data-theme="light"] .navbar.scrolled {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--border-accent);
}

/* Hero title gradient fix for light mode */
html[data-theme="light"] .hero h1 {
  background: linear-gradient(145deg, #050816 40%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Grid lines visible on light mode */
html[data-theme="light"] .hero-grid-lines {
  background-image:
    linear-gradient(rgba(2,6,23,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,6,23,.045) 1px, transparent 1px);
}

/* Cards / tables / menus remain premium */
html[data-theme="light"] .card,
html[data-theme="light"] .company-card,
html[data-theme="light"] .test-card,
html[data-theme="light"] .slot-question-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .dash-stat-card,
html[data-theme="light"] .drive-card,
html[data-theme="light"] .material-card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .yt-card,
html[data-theme="light"] .sidebar-card,
html[data-theme="light"] .toast,
html[data-theme="light"] .ns-dropdown {
  box-shadow: 0 12px 36px rgba(15,23,42,.08);
}

/* Fix colored button text in light mode */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-gold,
html[data-theme="light"] .company-card:hover .company-arrow,
html[data-theme="light"] .roadmap-step.done .step-circle,
html[data-theme="light"] .nav-avatar,
html[data-theme="light"] .author-avatar,
html[data-theme="light"] .profile-avatar-lg,
html[data-theme="light"] .pricing-badge.accent,
html[data-theme="light"] .pricing-badge.gold {
  color: #050816;
}

/* Ghost hover fix */
html[data-theme="light"] .btn-ghost:hover {
  background: rgba(2,6,23,.08);
}

/* Form option background */
html[data-theme="light"] .form-select option {
  background: #ffffff;
  color: #050816;
}

/* Progress background */
html[data-theme="light"] .progress-bar {
  background: rgba(2,6,23,.08);
}

/* Leaderboard hover */
html[data-theme="light"] .leaderboard-table tr:hover td,
html[data-theme="light"] .admin-table tr:hover td {
  background: rgba(2,6,23,.04);
}

/* YouTube thumb can stay dark, but text should remain visible */
html[data-theme="light"] .yt-thumb {
  background: linear-gradient(135deg, #eaf3ff, #f5f7ff);
}

/* Mobile menu light mode */
@media (max-width: 768px) {
  html[data-theme="light"] .nav-links {
    background: rgba(255,255,255,.98) !important;
    border-top-color: var(--border);
  }

  html[data-theme="light"] .nav-links .nav-link:hover,
  html[data-theme="light"] .nav-links .nav-link.active {
    background: rgba(2,6,23,.055);
  }

  html[data-theme="light"] .nav-separator {
    background: rgba(2,6,23,.10);
  }
}

/* Theme toggle button */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .22s ease;
  font-family: inherit;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
}

.theme-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Mobile navbar spacing */
@media (max-width: 480px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
  }
}

html[data-theme="dark"] {
  --bg-base:       #080c14;
  --bg-card:       rgba(14,20,35,.88);
  --bg-card-solid: #0e1423;
  --bg-elevated:   rgba(18,26,46,.92);
  --bg-input:      rgba(255,255,255,.06);

  --accent:        #00e5ff;
  --accent-dim:    rgba(0,229,255,.14);
  --accent-glow:   rgba(0,229,255,.32);
  --gold:          #ffd166;
  --gold-dim:      rgba(255,209,102,.14);
  --green:         #06d6a0;
  --green-dim:     rgba(6,214,160,.13);
  --red:           #ef476f;
  --red-dim:       rgba(239,71,111,.13);
  --purple:        #b388ff;
  --purple-dim:    rgba(179,136,255,.13);

  --text-primary:  #eef2ff;
  --text-secondary:#8892b0;
  --text-muted:    #4a5568;

  --border:        rgba(255,255,255,.07);
  --border-m:      rgba(255,255,255,.11);
  --border-accent: rgba(0,229,255,.24);

  --shadow:        0 4px 32px rgba(0,0,0,.4);
  --shadow-accent: 0 0 32px rgba(0,229,255,.14);
}

html[data-theme="light"] {
  --bg-base:       #f6f8fc;
  --bg-card:       rgba(255,255,255,.88);
  --bg-card-solid: #ffffff;
  --bg-elevated:   rgba(255,255,255,.94);
  --bg-input:      rgba(2,6,23,.055);

  --accent:        #00e5ff;
  --accent-dim:    rgba(0,229,255,.16);
  --accent-glow:   rgba(0,229,255,.34);

  --gold:          #d99a00;
  --gold-dim:      rgba(217,154,0,.14);
  --green:         #009f78;
  --green-dim:     rgba(0,159,120,.13);
  --red:           #d92d59;
  --red-dim:       rgba(217,45,89,.12);
  --purple:        #7c3aed;
  --purple-dim:    rgba(124,58,237,.12);

  --text-primary:   #050816;
  --text-secondary: #334155;
  --text-muted:     #64748b;

  --border:        rgba(2,6,23,.09);
  --border-m:      rgba(2,6,23,.14);
  --border-accent: rgba(0,166,185,.28);

  --shadow:        0 8px 32px rgba(15,23,42,.10);
  --shadow-accent: 0 0 32px rgba(0,229,255,.18);
}

html[data-theme="dark"] {
  --bg-base:       #080c14;
  --bg-card:       rgba(14,20,35,.88);
  --bg-card-solid: #0e1423;
  --bg-elevated:   rgba(18,26,46,.92);
  --bg-input:      rgba(255,255,255,.06);

  --accent:        #00e5ff;
  --accent-dim:    rgba(0,229,255,.14);
  --accent-glow:   rgba(0,229,255,.32);
  --gold:          #ffd166;
  --gold-dim:      rgba(255,209,102,.14);
  --green:         #06d6a0;
  --green-dim:     rgba(6,214,160,.13);
  --red:           #ef476f;
  --red-dim:       rgba(239,71,111,.13);
  --purple:        #b388ff;
  --purple-dim:    rgba(179,136,255,.13);

  --text-primary:  #eef2ff;
  --text-secondary:#8892b0;
  --text-muted:    #4a5568;

  --border:        rgba(255,255,255,.07);
  --border-m:      rgba(255,255,255,.11);
  --border-accent: rgba(0,229,255,.24);

  --shadow:        0 4px 32px rgba(0,0,0,.4);
  --shadow-accent: 0 0 32px rgba(0,229,255,.14);
}

/* ─── MOCK TESTS PAGE LIGHT MODE ─────────────────────────── */
html[data-theme="light"] .mt-page,
html[data-theme="light"] .mt-page * {
  --bg:     #f0f4ff;
  --card:   #ffffff;
  --card2:  #f5f7fc;
  --muted:  #475569;
  --text:   #0f172a;
  --brand:  #7c3aed;
  --brand2: #6d28d9;
  --gold:   #b45309;
  --ok:     #15803d;
  --danger: #dc2626;
  --line:   rgba(2,6,23,.12);
}

html[data-theme="light"] body {
  background: #f0f4ff;
}

html[data-theme="light"] .test-card {
  background: #ffffff;
  border-color: rgba(2,6,23,.12);
  box-shadow: 0 2px 16px rgba(15,23,42,.07);
}

html[data-theme="light"] .test-card:hover {
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 8px 32px rgba(124,58,237,.12);
}

html[data-theme="light"] .card-title {
  color: #0f172a;
}

html[data-theme="light"] .card-co-name {
  color: #475569;
}

html[data-theme="light"] .card-meta {
  color: #475569;
}

html[data-theme="light"] .card-meta b {
  color: #0f172a;
}

html[data-theme="light"] .card-attempts {
  color: #475569;
}

html[data-theme="light"] .tag {
  background: rgba(2,6,23,.05);
  border-color: rgba(2,6,23,.13);
  color: #334155;
}

html[data-theme="light"] .tag.diff-easy {
  background: rgba(21,128,61,.08);
  border-color: rgba(21,128,61,.28);
  color: #14532d;
}

html[data-theme="light"] .tag.diff-medium {
  background: rgba(180,83,9,.08);
  border-color: rgba(180,83,9,.28);
  color: #7c2d12;
}

html[data-theme="light"] .tag.diff-hard {
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.28);
  color: #7f1d1d;
}

html[data-theme="light"] .tag.plan-free {
  background: rgba(21,128,61,.08);
  border-color: rgba(21,128,61,.28);
  color: #14532d;
}

html[data-theme="light"] .tag.plan-prime {
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.28);
  color: #4c1d95;
}

html[data-theme="light"] .tag.plan-super {
  background: rgba(180,83,9,.08);
  border-color: rgba(180,83,9,.28);
  color: #7c2d12;
}

html[data-theme="light"] .tag.plan-victory {
  background: rgba(180,83,9,.09);
  border-color: rgba(180,83,9,.32);
  color: #78350f;
}

html[data-theme="light"] .tag.plan-lord {
  background: rgba(21,128,61,.09);
  border-color: rgba(21,128,61,.32);
  color: #14532d;
}

html[data-theme="light"] .btn-start {
  background: linear-gradient(180deg, rgba(124,58,237,.16), rgba(124,58,237,.09));
  border-color: rgba(124,58,237,.4);
  color: #4c1d95;
  font-weight: 800;
}

html[data-theme="light"] .btn-start:hover {
  background: linear-gradient(180deg, rgba(124,58,237,.26), rgba(124,58,237,.16));
}

html[data-theme="light"] .btn-upgrade {
  background: linear-gradient(180deg, rgba(180,83,9,.13), rgba(180,83,9,.06));
  border-color: rgba(180,83,9,.38);
  color: #7c2d12;
  font-weight: 800;
}

html[data-theme="light"] .btn-result {
  background: rgba(2,6,23,.04);
  border-color: rgba(2,6,23,.14);
  color: #334155;
}

html[data-theme="light"] .btn-result:hover {
  border-color: rgba(124,58,237,.4);
  color: #4c1d95;
}

html[data-theme="light"] .filter-search,
html[data-theme="light"] .filter-select {
  background: #ffffff;
  border-color: rgba(2,6,23,.14);
  color: #0f172a;
}

html[data-theme="light"] .cpill {
  background: #ffffff;
  border-color: rgba(2,6,23,.13);
  color: #334155;
}

html[data-theme="light"] .cpill:hover,
html[data-theme="light"] .cpill.active {
  background: rgba(124,58,237,.09);
  border-color: rgba(124,58,237,.38);
  color: #4c1d95;
}

html[data-theme="light"] .mt-hero {
  background: linear-gradient(135deg, rgba(124,58,237,.07) 0%, transparent 60%);
  border-color: rgba(124,58,237,.18);
}

html[data-theme="light"] .mt-hero h1 { color: #0f172a; }
html[data-theme="light"] .mt-hero p  { color: #475569; }

html[data-theme="light"] .plan-banner {
  background: linear-gradient(90deg, rgba(180,83,9,.09), rgba(180,83,9,.03));
  border-color: rgba(180,83,9,.28);
}

html[data-theme="light"] .plan-banner.full-access {
  background: linear-gradient(90deg, rgba(21,128,61,.09), rgba(21,128,61,.03));
  border-color: rgba(21,128,61,.28);
}

html[data-theme="light"] .section-head { color: #0f172a; }
html[data-theme="light"] .section-head span { color: #64748b; }

html[data-theme="light"] .lock-overlay {
  background: rgba(240,244,255,.88);
  backdrop-filter: blur(4px);
}

html[data-theme="light"] .lock-msg { color: #334155; }

html[data-theme="light"] .mt-topbar-back { color: #64748b; }
html[data-theme="light"] .mt-topbar-back:hover { color: #0f172a; }