*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Reserves the vertical scrollbar's width permanently instead of only when content is tall
   enough to need one — without this, any page whose height crosses the viewport threshold
   (e.g. the admin dashboard's drill-down panel appearing) visibly shifts everything a few
   pixels sideways as the scrollbar pops in/out. */
html { scrollbar-gutter: stable; }

/* ========================================================
   InterviewWise — global.css
   Dark design system shared by all app pages.
   Landing page overrides these tokens via landing.css.
   ======================================================== */

/* ===== DESIGN TOKENS ===== */
:root {
  --bg:          #0A0A0C;
  --bg-panel:    #0C0C0F;
  --card:        #111114;
  --card-inset:  #0A0A0C;
  --code-bg:     #08090A;
  --line:        rgba(255,255,255,.07);
  --line-strong: rgba(255,255,255,.16);
  --text:        #F4F4F6;
  --text-1:      #ECECEE;
  --text-2:      #9C9CA6;
  --text-3:      #67676F;
  --accent:      #C6F24E;
  --accent-line: rgba(198,242,78,.28);
  --accent-soft: rgba(198,242,78,.06);
  --gold:        #E7B54A;
  --btn-bg:      #ECECEE;
  --btn-text:    #0A0A0C;
  --danger:      #E06A6A;

  /* ── Backward-compat aliases (used by JS inline styles) ── */
  --surface: #111114;            /* legacy = --card */
  --border:  rgba(255,255,255,.07); /* legacy = --line */
  --muted:   #67676F;            /* legacy = --text-3 */
  --accent2: #C6F24E;            /* legacy = was teal, now same as --accent */

  --nav-bg: rgba(10,10,12,.72);
}

/* ===== LIGHT MODE TOKENS ===== */
:root[data-theme="light"] {
  --bg:          #FCFAF5;
  --bg-panel:    #F1EDE3;
  --card:        #FFFFFF;
  --card-inset:  #F1EDE3;
  --line:        rgba(28,24,14,.10);
  --line-strong: rgba(28,24,14,.22);
  --text:        #1C1712;
  --text-1:      #211C15;
  --text-2:      #5C574E;
  --text-3:      #8A857A;
  --accent:      #3F6212;
  --accent-line: rgba(63,98,18,.30);
  --accent-soft: rgba(63,98,18,.07);
  --gold:        #E7B54A;
  --btn-bg:      #1A1A18;
  --btn-text:    #FBFBF9;
  --nav-bg:      rgba(252,250,245,.80);
  /* code-bg intentionally stays dark — device mockups/code surfaces stay dark */
  --surface: #FFFFFF;
  --border:  rgba(28,24,14,.10);
  --muted:   #8A857A;
  --accent2: #3F6212;
}

/* Targeted overrides for hardcoded dark values */
[data-theme="light"] .btn-primary:hover  { box-shadow: 0 10px 28px rgba(0,0,0,.20); }
[data-theme="light"] .btn-accent:hover   { box-shadow: 0 12px 32px rgba(63,98,18,.22); }
[data-theme="light"] .btn-outline:hover  { background: rgba(20,20,18,.03); border-color: rgba(20,20,18,.35); }
[data-theme="light"] .btn-secondary:hover { color: var(--text-1); }
[data-theme="light"] input[type=range]   { background: rgba(20,20,18,.12); }
[data-theme="light"] input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 8px rgba(63,98,18,.40); }
[data-theme="light"] .navbar-link:hover  { background: rgba(20,20,18,.04); }
[data-theme="light"] .navbar-link.active { background: rgba(20,20,18,.06); }

::selection { background: rgba(198,242,78,.30); color: #1A1A18; }

/* ===== BODY ===== */
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ===== SHARED BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  border: none;
}
/* Neutral primary — dark bg, btn-bg fill */
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,255,255,.14); }

/* Accent CTA — lime fill */
.btn-accent {
  background: var(--accent);
  color: var(--btn-text);
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(198,242,78,.25); }

/* Ghost / outline */
.btn-outline {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--line-strong);
}
.btn-outline:hover { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.3); }

/* Secondary ghost */
.btn-secondary {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { color: var(--text-1); }

/* Back-link button */
.back-btn {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color .15s;
  text-decoration: none;
}
.back-btn:hover { color: var(--text); }

/* Shared footer note below pages */
.footer-note { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 30px; }
.footer-note a { color: var(--text-2); text-decoration: none; transition: color .15s; }
.footer-note a:hover { color: var(--text-1); }

/* ===== FOCUS RING ===== */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== SHARED RANGE INPUT ===== */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 980px;
  background: rgba(255,255,255,.12);
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(198,242,78,.5);
}
input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* ===== APP NAVBAR ===== */
.navbar {
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  padding: 0 max(28px, 3vw);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.navbar-logo::before {
  content: '';
  display: block;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.navbar-center-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
}
.navbar-center-links a { color: var(--text-2); text-decoration: none; transition: color .15s; }
.navbar-center-links a:hover { color: var(--text-1); }
.navbar-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.navbar-link {
  padding: 6px 12px;
  border-radius: 7px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .15s, background .15s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.6;
}
.navbar-flag-dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--danger, #f87171);
  vertical-align: middle;
}
.navbar-link:hover { color: var(--text); background: rgba(255,255,255,.04); }
.navbar-link.active { color: var(--text); background: rgba(255,255,255,.06); }
.navbar-link.navbar-logout:hover { color: var(--danger); }

/* ── Site-wide announcement banner (admin-authored, any page) ── */
.announcement-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-line);
  color: var(--text);
  padding: 12px max(20px, 3vw);
  font-size: 13.5px;
  line-height: 1.5;
}
.announcement-banner-body { flex: 1; }
.announcement-banner-body strong { color: var(--text); margin-right: 8px; }
.announcement-banner-body span { color: var(--text-2); }
.announcement-banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.announcement-banner-dismiss:hover { color: var(--text); }
.navbar-link.navbar-cta {
  color: var(--btn-text);
  background: var(--btn-bg);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  margin-left: 4px;
}
.navbar-link.navbar-cta:hover {
  color: var(--btn-text);
  background: var(--btn-bg);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,255,255,.16);
}
[data-theme="light"] .navbar-link.navbar-cta:hover { box-shadow: 0 8px 24px rgba(0,0,0,.20); }
.navbar-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: color .15s;
  line-height: 0;
}
.navbar-hamburger:hover { color: var(--text); }

.navbar-dropdown { position: relative; }
.navbar-dropdown-toggle { display: inline-flex; align-items: center; gap: 5px; }
.navbar-dropdown-caret { transition: transform .15s; }
.navbar-dropdown.open .navbar-dropdown-caret { transform: rotate(180deg); }
.navbar-dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--nav-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  z-index: 200;
}
.navbar-dropdown.open .navbar-dropdown-menu { display: flex; }
.navbar-dropdown-item {
  padding: 8px 12px;
  border-radius: 7px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.navbar-dropdown-item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.navbar-dropdown-item.active { color: var(--text); background: rgba(255,255,255,.06); }

/* Only rendered on the landing page (show_landing_links) — hidden at the same breakpoint
   where landing.css drops the How it works / Features / Pricing sections these link to,
   so there's never a nav link pointing at a hidden section. */
@media (max-width: 960px) {
  .navbar-center-links { display: none; }
}

@media (max-width: 640px) {
  .navbar { flex-wrap: wrap; height: auto; min-height: 64px; padding: 0 20px; }
  .navbar-logo { padding: 16px 0; }
  .navbar-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border-top: 1px solid var(--line);
    padding: 8px 0 12px;
    gap: 2px;
  }
  .navbar-links.open { display: flex; }
  .navbar-hamburger { display: flex; align-items: center; }
  .navbar-link { padding: 10px 8px; }
  /* Make the admin dropdown toggle fill the row like the other links, so tapping
     anywhere inline opens it (not just the button text). */
  .navbar-dropdown { width: 100%; }
  .navbar-dropdown-toggle { width: 100%; justify-content: space-between; }
  .navbar-dropdown-menu {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0 0 0 12px;
  }
  .navbar-dropdown.open .navbar-dropdown-menu { display: flex; }
}