/* Shared navbar/popup/drawer/auth-modal chrome for base.html and nb_base.html.
   Raw colors permitted; never add to ZERO_RAW_COLOR_FILES. */

:root {
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --lift-sm: -1px;
  --focus-ring: rgba(91, 140, 255, 0.82);
}

/* =========================
   Top Bar
========================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 72px;
  height: auto;
  padding: 0 48px;
  /* 1fr | auto | 1fr keeps the programme nav on the true viewport centre
     no matter how wide the flanks are (logged-out shows two right-side
     buttons, logged-in premium only one — flex space-between drifted).
     Both flank tracks may shrink symmetrically when text is enlarged. Their
     contents own the corresponding wrap rules below, so the programme strip
     remains exactly centred without overlap or page-level overflow. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  background:
    radial-gradient(540px 200px at 14% 0%, rgba(91,140,255,0.10), transparent 70%),
    linear-gradient(180deg, rgba(14,17,32,0.97) 0%, rgba(10,13,26,0.97) 100%);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-bottom: 1px solid rgba(185,196,230,0.12);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.14),
    0 8px 22px rgba(0,0,0,0.16),
    inset 0 -1px 0 rgba(255,255,255,0.035);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.topbar.scrolled {
  background:
    radial-gradient(540px 200px at 14% 0%, rgba(91,140,255,0.08), transparent 70%),
    linear-gradient(180deg, rgba(14,17,32,0.985) 0%, rgba(10,13,26,0.985) 100%);
  border-bottom-color: rgba(185,196,230,0.15);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.18),
    0 10px 26px rgba(0,0,0,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.040);
}

/* ── Dark-mode topbar surface — flat near-black-navy that matches the
   sidebar's top stop (#0b1020 from noteviewer-left-rail.css:1657). This
   eliminates the periwinkle bleed coming from the base radial-gradient at
   14% from the left + the warmer linear-gradient layer. The navbar and
   sidebar now meet as one continuous surface; the body (#05070d) reads
   one shade darker below. Light-mode override stays in theme-light.css. */
html.theme-dark .topbar,
html.theme-dark .topbar.scrolled {
  background: #0b1020;
}

/* Column homes for the three visible bar children. justify-self keeps each
   sized to its content (a stretched .logo anchor would be a dead click zone). */
.topbar > .logo { justify-self: start; max-width: 100%; min-width: 0; }
.topbar > .nav { justify-self: center; }
.topbar > .account-wrap { justify-self: end; max-width: 100%; min-width: 0; }

/* Tight desktop band: give up flank padding/gap before the columns hit their
   max-content floors. Below 1024px the widest auth state collides with the
   centred programme strip, so the compact drawer shell owns that band. */
@media (min-width: 1024px) and (max-width: 1120px) {
  .topbar {
    padding: 0 20px;
    gap: 16px;
  }
}

/* ── Brand lockup ── */
.logo {
  --logo-wordmark-width: 8.75rem;
  --logo-collapse-duration: 420ms;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 1;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.logo:hover {
  opacity: 0.78;
}

.logo-img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}

.logo-text {
  display: inline-block;
  max-inline-size: var(--logo-wordmark-width);
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  color: inherit;
  opacity: 1;
}

.topbar--home .logo {
  transition:
    gap var(--logo-collapse-duration) var(--nb-ease, var(--ease-expo)),
    opacity 0.18s ease;
}

.topbar--home .logo-text {
  transition:
    max-inline-size var(--logo-collapse-duration) var(--nb-ease, var(--ease-expo)),
    opacity var(--logo-collapse-duration) var(--nb-ease, var(--ease-expo));
}

.topbar--home.scrolled .logo {
  gap: 0;
}

.topbar--home.scrolled .logo-text {
  max-inline-size: 0;
  opacity: 0;
}

/* ── Centre programme nav ── */
.nav {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.046);
  border: 1px solid rgba(185,196,230,0.11);
  border-radius: 13px;
  padding: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.046),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 1px 3px rgba(0,0,0,0.10);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: rgba(240,243,255,0.70);
  text-decoration: none;
  font-weight: 660;
  font-size: 0.90625rem;
  line-height: 1;
  letter-spacing: 0;
  min-height: 35px;
  padding: 8px 15px;
  border-radius: 10px;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}

.nav .nav-link {
  min-width: 58px;
  text-align: center;
  justify-content: center;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(77,110,248,0.72), rgba(130,158,255,0.88));
  opacity: 0;
  transform: scaleX(0.52);
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.nav-link:hover {
  color: rgba(248,250,255,0.96);
  background: rgba(255,255,255,0.072);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after,
.nav-link[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-link.is-active,
.nav-link[aria-current="page"] {
  color: rgba(252,253,255,0.98);
  background: rgba(255,255,255,0.092);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.075),
    0 1px 2px rgba(0,0,0,0.10);
}

.nav-link:focus-visible {
  outline: 2px solid rgba(91,140,255,0.45);
  outline-offset: 2px;
}

.dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.90625rem;
  font-weight: 660;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(240,243,255,0.70);
  padding: 8px 15px;
  box-shadow: none;
}

/* Active/open state: neutral white lift — matches segmented-control logic */
.dropdown:hover > .dropdown-trigger,
.dropdown:focus-within > .dropdown-trigger {
  color: rgba(248,250,255,0.96);
  background: rgba(255,255,255,0.072);
}

.dropdown:hover > .dropdown-trigger::after,
.dropdown:focus-within > .dropdown-trigger::after {
  opacity: 1;
  transform: scaleX(1);
}

.dropdown-trigger:focus {
  outline: none;
}

.dropdown-trigger:focus-visible {
  outline: 2px solid rgba(91,140,255,0.35);
  outline-offset: 2px;
}

/* ── Right-side actions ── */
.account-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
}

/* Premium CTA — indigo-blue gradient pill.
   Drop-shadow is intentionally contained: ~6px blur so the indigo glow
   stays local to the button and doesn't paint into the navbar background.
   The inset highlight + linear-gradient fill carry the elevation cue. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 20px;
  border-radius: 11px;
  font-size: 0.90625rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: rgba(255,255,255,0.96);
  background: linear-gradient(180deg, #4d6ef8 0%, #3a56e0 100%);
  border: 1px solid rgba(130,158,255,0.30);
  box-shadow:
    0 2px 6px rgba(50,76,210,0.32),
    inset 0 1px 0 rgba(255,255,255,0.16);
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  justify-content: center;
  transition: background 0.20s ease, border-color 0.20s ease, box-shadow 0.20s ease, transform 0.20s ease;
}

.nav-cta:hover {
  color: #fff;
  background: linear-gradient(180deg, #5d7eff 0%, #4464f0 100%);
  border-color: rgba(150,175,255,0.38);
  box-shadow:
    0 3px 8px rgba(50,76,210,0.40),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

.nav-cta:focus-visible {
  outline: 2px solid rgba(80,120,245,0.55);
  outline-offset: 2px;
  transform: none;
}

/* Secondary button — Log In / username */
.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(240,243,255,0.84);
  font-size: 0.90625rem;
  font-weight: 680;
  font-family: inherit;
  letter-spacing: 0;
  line-height: 1;
  min-height: 40px;
  padding: 9px 19px;
  border-radius: 11px;
  background: rgba(255,255,255,0.062);
  border: 1px solid rgba(185,196,230,0.14);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.055);
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.20s ease;
}

.account-btn:hover {
  color: rgba(248,250,255,0.96);
  background: rgba(255,255,255,0.082);
  border-color: rgba(185,196,230,0.20);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.060);
}

.account-btn:focus-visible {
  outline: 2px solid rgba(150,170,255,0.62);
  outline-offset: 2px;
  transform: none;
}

/* Current-page state */
.account-btn--current {
  text-decoration: none;
  color: rgba(255,255,255,0.90);
  background: rgba(91,140,255,0.16);
  border-color: rgba(120,174,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.050),
    0 1px 1px rgba(0,0,0,0.08);
  cursor: default;
}

.account-btn--current:hover {
  transform: none;
  color: rgba(255,255,255,0.90);
  background: rgba(91,140,255,0.18);
  border-color: rgba(120,174,255,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.050),
    0 1px 1px rgba(0,0,0,0.08);
}

/* Account popup panel */
.account-popup {
  position: absolute;
  top: calc(100% + 9px);
  right: 16px;
  width: 292px;
  max-width: min(292px, calc(100% - 24px));
  padding: 15px;
  background:
    radial-gradient(ellipse 86% 44% at 50% -18%, rgba(165,180,255,0.048) 0%, transparent 56%),
    linear-gradient(160deg, rgba(16,20,42,0.98) 0%, rgba(11,14,32,0.98) 100%);
  border: 1px solid rgba(185,196,230,0.12);
  border-top-color: rgba(185,196,230,0.18);
  border-radius: 18px;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.36),
    0 4px 16px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.022),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(28px) saturate(1.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  z-index: 2100;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.account-popup--hidden {
  /* visibility (not display:none) so CLOSE animates out via the transition above */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
}

.account-popup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}

.account-popup-icon {
  color: rgba(160, 182, 255, 0.82);
  flex-shrink: 0;
}

/* Logged-in popup: avatar circle */
.account-popup-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(24,30,54,0.90) 0%, rgba(13,17,34,0.94) 100%);
  border: 1.5px solid rgba(165,184,245,0.28);
  box-shadow:
    0 0 0 3px rgba(120,140,220,0.056),
    0 6px 16px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.086);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.88);
}

.account-popup-avatar--guest {
  background: linear-gradient(180deg, rgba(24,30,54,0.88) 0%, rgba(13,17,34,0.92) 100%);
  border-color: rgba(170,188,250,0.26);
  color: rgba(230,236,255,0.82);
}

/* Logged-in popup: name + email stack */
.account-popup-identity {
  flex: 1;
  min-width: 0;
}

.account-popup-heading {
  font-size: 15.75px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Email line beneath heading in popup */
.account-popup-email {
  font-size: 13.25px;
  color: rgba(225,232,255,0.72);
  margin: 3px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-popup-support {
  font-size: 13.25px;
  color: rgba(225,232,255,0.72);
  margin: 6px 0 18px 0;
  line-height: 1.5;
}

.account-popup-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 145, 205, 0.22), transparent);
  margin: 10px 0 9px;
}

.account-popup-divider--guest {
  margin: 12px 0 13px;
}

.account-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-popup-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  text-align: center;
  font-size: 14px;
  font-weight: 660;
  font-family: inherit;
  padding: 10px 16px;
  border-radius: 11px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-popup-action--primary {
  font-weight: 700;
  background: linear-gradient(180deg, #4d6ef8 0%, #3855e0 55%, #2c46cc 100%);
  color: #ffffff;
  border: 1px solid rgba(110, 138, 248, 0.34);
  box-shadow:
    0 8px 22px rgba(42, 64, 188, 0.24),
    0 1px 3px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}

.account-popup-action--primary:hover {
  background: linear-gradient(180deg, #5d7eff 0%, #4464f0 52%, #3552d8 100%);
  color: #ffffff;
  border-color: rgba(130,158,255,0.44);
  box-shadow:
    0 12px 28px rgba(42,64,188,0.30),
    0 1px 4px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}

.account-popup-action--ghost {
  background: linear-gradient(180deg, rgba(22,26,42,0.88), rgba(12,15,28,0.94));
  color: rgba(238,243,255,0.88);
  border: 1px solid rgba(125,145,205,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    inset 0 -1px 0 rgba(0,0,0,0.10);
}

.account-popup-action--ghost:hover {
  background: linear-gradient(180deg, rgba(30,36,58,0.90), rgba(15,19,35,0.96));
  color: rgba(247,248,255,0.96);
  border-color: rgba(165,182,245,0.42);
}

.account-popup-action:focus-visible,
.account-popup-nav-link:focus-visible,
.account-popup-signout:focus-visible,
.account-popup-link:focus-visible {
  outline: 2px solid rgba(155, 175, 245, 0.58);
  outline-offset: 2px;
}

/* Prevent global button:hover transform from lifting popup actions */
.account-popup-action:hover,
.account-popup-action:active {
  transform: none;
}

/* Logout form — normalise so flex layout is unaffected */
.account-logout-form {
  margin: 0;
  padding: 0;
}

.account-logout-form .account-popup-action {
  width: 100%;
  background: transparent;
  color: rgba(239, 68, 68, 0.62);
  border-color: rgba(239, 68, 68, 0.16);
}

.account-logout-form .account-popup-action:hover {
  background: rgba(239, 68, 68, 0.07);
  color: rgba(239, 68, 68, 0.90);
  border-color: rgba(239, 68, 68, 0.28);
}

.account-popup-footer {
  margin-top: 13px;
  text-align: center;
}

.account-popup-link {
  font-size: 12.5px;
  color: rgba(205,216,245,0.66);
  text-decoration: none;
  transition: color 0.15s ease;
}

.account-popup-link:hover,
.account-popup-link:focus-visible {
  color: rgba(178,196,255,0.92);
}

@media (max-width: 400px) {
  .account-popup {
    right: 0;
    width: calc(100vw - 32px);
    max-width: 292px;
    padding: 15px;
  }
}

/* ── Logged-in popup: account status pill ── */
.account-popup-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  margin: 1px 0 10px;
  border-radius: 20px;
  background: rgba(185, 196, 230, 0.075);
  border: 1px solid rgba(185, 196, 230, 0.14);
  font-size: 11.25px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(225,232,255,0.76);
}

.account-popup-plan-badge--premium {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(74, 222, 128, 0.22);
  color: rgba(134, 239, 172, 0.86);
}

.account-popup-plan-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(180,190,220,0.82);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(180,190,220,0.12);
}

.account-popup-plan-badge--premium .account-popup-plan-dot {
  background: rgba(134, 239, 172, 0.90);
  box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.14);
}

.account-popup-upgrade {
  margin-bottom: 10px;
}

/* ── Logged-in popup: nav rows ── */
.account-popup-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.account-popup-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.account-popup-nav-link span {
  flex: 1;
}

.account-popup-nav-link:hover {
  background: rgba(255,255,255,0.068);
  border-color: rgba(185,196,230,0.08);
  color: rgba(247, 248, 255, 0.97);
}

.account-popup-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(225,232,255,0.76);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.account-popup-theme:hover {
  background: rgba(91,140,255,0.12);
  border-color: rgba(120,174,255,0.16);
  color: rgba(247,248,255,0.97);
}

.account-popup-theme:focus-visible {
  outline: 2px solid rgba(150,170,255,0.62);
  outline-offset: 2px;
}

.account-popup-theme .ft-theme-icon {
  position: static;
  transform: none;
}

.account-popup-theme-state {
  margin-left: auto;
  opacity: 0.66;
}

html.theme-dark .account-popup-theme-state--light,
html.theme-light .account-popup-theme-state--dark {
  display: none;
}

html.theme-light .account-popup-theme {
  color: #4f5b72;
}

html.theme-light .account-popup-theme:hover {
  background: #ebf0ff;
  border-color: rgba(59,82,200,0.16);
  color: #3450C0;
}

html.theme-light .account-popup-theme:focus-visible {
  outline-color: #3450C0;
}

.account-popup-nav-icon {
  color: rgba(245, 248, 255, 0.88);
  flex-shrink: 0;
  transition: color 0.13s ease;
}

.account-popup-nav-link:hover .account-popup-nav-icon {
  color: rgba(190, 202, 255, 0.96);
}

.account-popup-nav-chevron {
  color: rgba(245, 248, 255, 0.46);
  flex-shrink: 0;
  transition: color 0.13s ease, transform 0.18s var(--ease-expo);
}

.account-popup-nav-link:hover .account-popup-nav-chevron {
  color: rgba(220, 228, 255, 0.66);
  transform: translateX(2px);
}

/* ── Logged-in popup: sign out button ── */
.account-popup-signout {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  color: rgba(252, 172, 180, 0.76);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.account-popup-signout span {
  flex: 1;
  text-align: left;
}

.account-popup-signout:hover {
  background: rgba(239, 68, 88, 0.080);
  border-color: rgba(239, 68, 88, 0.10);
  color: rgba(255, 190, 196, 0.94);
  transform: none;
}

.account-popup-signout:hover .account-popup-nav-icon {
  color: rgba(255, 190, 196, 0.72);
}

/* =========================
   Dropdown (IGCSE / A-Levels)
========================= */
.dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dropdown > .nav-link {
  min-width: 76px;
}

/* dropdown panel */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  right: auto;
  transform: translate(-50%, 6px);

  min-width: 168px;
  max-width: min(210px, calc(100vw - 24px));
  padding: 7px;

  background: linear-gradient(160deg, rgba(13,17,38,0.99) 0%, rgba(9,12,26,0.99) 100%);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid rgba(185,196,230,0.11);
  border-top-color: rgba(185,196,230,0.18);
  border-radius: 16px;
  box-shadow:
    0 22px 46px rgba(0,0,0,0.36),
    0 4px 14px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.062);
  z-index: 2000;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

/* show */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Mutual exclusion: when any sibling dropdown is hovered, suppress stale
   focus-within state on the others so only one menu is ever visible. */
.nav:has(.dropdown:hover) .dropdown:not(:hover):focus-within .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
}
.nav:has(.dropdown:hover) .dropdown:not(:hover):focus-within > .dropdown-trigger {
  color: rgba(240,243,255,0.70);
  background: none;
}
.nav:has(.dropdown:hover) .dropdown:not(:hover):focus-within > .dropdown-trigger::after {
  opacity: 0;
  transform: scaleX(0.52);
}

/* dropdown items */
.dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: 40px;

  padding: 10px 13px;
  border-radius: 11px;

  color: rgba(240,243,255,0.88) !important;
  text-decoration: none;
  font-weight: 650;
  font-size: 0.90625rem;
  letter-spacing: 0;

  transition: background 0.14s ease, color 0.14s ease;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background: rgba(255,255,255,0.076);
  color: rgba(248,250,255,0.98) !important;
}

.dropdown-menu a:focus-visible {
  outline: 2px solid rgba(91,140,255,0.36);
  outline-offset: 2px;
}

/* invisible hover bridge (prevents flicker) */
.dropdown::after{
  content:"";
  position:absolute;
  left:-12px;
  right:-12px;
  top:100%;
  height:13px;
}

/* =========================
   Responsive: compact collision shell
========================= */
/* Full-screen drawer navigation. The 1024px threshold is content-driven:
   it keeps the widest account flank from colliding with the centred strip. */
.mobile-drawer-toggle,
.mobile-nav-drawer{
  display: none;
}

body.mobile-drawer-open{
  overflow: hidden;
}

@media (max-width: 1023px) {
  .topbar{
    /* Only the logo and hamburger render here (nav/account-wrap are
       display:none), so the desktop 3-column grid would centre the
       hamburger — flex space-between pins it back to the right edge. */
    display: flex;
    padding: 0 16px;
    gap: 12px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
  }
  .logo{
    flex: 1 1 0;
    min-width: 0;
  }
  .logo-text{
    display: inline-block;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.1;
  }
  .logo-img{
    height: 32px;
  }
  .nav,
  .account-wrap{
    display: none;
  }
  .mobile-drawer-toggle{
    position: relative;
    z-index: 3100;
    display: inline-flex;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(185,196,230,0.16);
    border-radius: 12px;
    background: rgba(255,255,255,0.055);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      0 1px 3px rgba(0,0,0,0.16);
    cursor: pointer;
  }
  .mobile-drawer-toggle span{
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: rgba(248,250,255,0.94);
    transition: transform 180ms ease, opacity 160ms ease;
  }
  html.theme-transitions-enabled .mobile-drawer-toggle span{
    transition: transform 180ms ease, opacity 160ms ease;
  }
  .mobile-drawer-toggle span:nth-child(1){
    transform: translateY(-6px);
  }
  .mobile-drawer-toggle span:nth-child(2){
    transform: translateY(0);
  }
  .mobile-drawer-toggle span:nth-child(3){
    transform: translateY(6px);
  }
  .mobile-drawer-toggle.is-open span:nth-child(1){
    transform: rotate(45deg);
  }
  .mobile-drawer-toggle.is-open span:nth-child(2){
    opacity: 0;
    transform: scaleX(0.4);
  }
  .mobile-drawer-toggle.is-open span:nth-child(3){
    transform: rotate(-45deg);
  }
  .mobile-nav-drawer{
    position: fixed;
    inset: 0;
    z-index: 900;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  .mobile-nav-drawer[hidden]{
    display: none;
  }
  .mobile-nav-drawer:not(.is-open),
  .mobile-nav-drawer:not(.is-open) .mobile-nav-drawer__content{
    pointer-events: none;
  }
  html.theme-transitions-enabled .mobile-nav-drawer{
    transition: opacity 180ms ease;
  }
  .mobile-nav-drawer.is-open{
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-nav-drawer__backdrop{
    position: absolute;
    inset: 0;
    background:
      radial-gradient(420px 220px at 16% 0%, rgba(77,110,248,0.14), transparent 70%),
      rgba(5,7,13,0.94);
    backdrop-filter: blur(18px) saturate(1.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
  }
  .mobile-nav-drawer__panel{
    position: absolute;
    inset: 0;
    display: block;
    min-width: 0;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform 220ms ease, opacity 180ms ease;
  }
  html.theme-transitions-enabled .mobile-nav-drawer__panel{
    transition: transform 220ms ease, opacity 180ms ease;
  }
  .mobile-nav-drawer.is-open .mobile-nav-drawer__panel{
    transform: translateY(0);
    opacity: 1;
  }
  .mobile-nav-drawer__content{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 88px 18px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    pointer-events: auto;
  }
  .mobile-nav-group{
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
  }
  .mobile-nav-label{
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 6px;
    color: rgba(220,228,255,0.66);
    font-size: 0.8125rem;
    font-weight: 760;
    letter-spacing: 0;
  }
  .mobile-nav-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(185,196,230,0.12);
    border-radius: 14px;
    color: rgba(248,250,255,0.94);
    background: rgba(255,255,255,0.055);
    font: inherit;
    font-size: clamp(15.5px, 1rem, 16px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
  }
  .mobile-nav-row:hover,
  .mobile-nav-row:focus-visible{
    color: #fff;
    background: rgba(255,255,255,0.085);
  }
  .mobile-nav-row:focus-visible,
  .mobile-drawer-toggle:focus-visible{
    outline: 2px solid rgba(130,158,255,0.55);
    outline-offset: 3px;
  }
  .mobile-nav-row--premium{
    justify-content: center;
    color: rgba(255,255,255,0.98);
    background: linear-gradient(180deg, #4d6ef8 0%, #3a56e0 100%);
    border-color: rgba(150,175,255,0.40);
    box-shadow:
      0 8px 22px rgba(50,76,210,0.26),
      inset 0 1px 0 rgba(255,255,255,0.16);
  }
  .mobile-nav-row--account{
    justify-content: center;
  }
  .mobile-nav-divider{
    width: 100%;
    height: 1px;
    margin: 8px 0;
    background: rgba(185,196,230,0.14);
  }
}

/* Phones keep the established shorter chrome; tablet compact mode retains
   the 72px desktop height so --nb-chrome-h and sticky offsets stay aligned. */
@media (max-width: 767px) {
  .topbar {
    height: auto;
    min-height: 64px;
  }
}

/* sun/moon stack centred; the swap rules show exactly one per theme */
.ft-theme-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

html.theme-dark .ft-theme-icon--sun { display: none; }
html.theme-light .ft-theme-icon--moon { display: none; }

/* Mobile-drawer theme row: label left, current-theme state right */
.mobile-nav-row--theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}
.mobile-nav-theme-state {
  font-weight: 600;
  opacity: 0.66;
  text-transform: capitalize;
}

/* Google button — white, dark text, G icon left */
.google-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  border-radius: 12px;
  border: 1px solid rgba(228, 231, 238, 0.98);
  background: #ffffff;
  color: #3c4043;
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.15px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 4px 14px rgba(0,0,0,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.04);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.google-btn svg{
  flex-shrink: 0;
  display: block;
}

.google-btn:hover{
  background: #f8f9fa;
  color: #3c4043;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  transform: translateY(var(--lift-sm));
}

.google-btn:active{
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* or divider */
.auth-divider{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.875rem 0;
}

.auth-divider::before,
.auth-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(130,148,210,0.25), transparent);
}

.auth-divider span{
  font-size: 12px;
  font-weight: 600;
  color: rgba(205,216,245,0.58);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

/* Field: label stacked above input */
.auth-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.375rem;
}

.auth-field label{
  font-size: 14px;
  font-weight: 600;
  color: rgba(245, 248, 255, 0.92);
  letter-spacing: 0.2px;
}

.auth-field input{
  width: 100%;
  padding: 14px 16px;
  border-radius: 11px;
  border: 1px solid rgba(125,142,198,0.27);
  background: linear-gradient(180deg, rgba(10,13,28,0.94), rgba(7,10,20,0.96));
  color: rgba(255,255,255,0.96);
  font-family: inherit;
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.038),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 1px 0 rgba(0,0,0,0.18);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.auth-field input:focus{
  background: linear-gradient(180deg, rgba(10,13,28,0.96), rgba(8,11,22,0.98));
  border-color: rgba(104,151,255,0.60);
  box-shadow:
    0 0 0 3px rgba(82,130,255,0.13),
    inset 0 1px 0 rgba(255,255,255,0.050),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  outline: none;
}

/* Defeat Chrome autofill yellow */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px #0c1020 inset;
  -webkit-text-fill-color: rgba(255,255,255,0.96);
  caret-color: rgba(255,255,255,0.96);
}

/* Submit button */
.auth-btn{
  display: block;
  width: 100%;
  margin-top: 0.875rem;
  padding: 16px 20px;
  border-radius: 13px;
  border: 1px solid rgba(170,185,255,0.34);
  background: linear-gradient(180deg, #4d6ef8 0%, #3855e0 52%, #2c46cc 100%);
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow:
    0 14px 32px rgba(42,64,188,0.24),
    0 1px 3px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.16);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.auth-btn:hover{
  background: linear-gradient(180deg, #5d7eff 0%, #4464f0 52%, #3552d8 100%);
  border-color: rgba(190,202,255,0.46);
  box-shadow:
    0 16px 36px rgba(42,64,188,0.28),
    0 1px 4px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.16);
  transform: translateY(var(--lift-sm));
}

.auth-btn:active{
  transform: translateY(0);
}

.auth-btn:focus-visible {
  outline: 2px solid rgba(165, 185, 255, 0.58);
  outline-offset: 3px;
}

/* =========================
   Auth Modal
========================= */

body.auth-modal-open {
  overflow: hidden;
}

/* Full-screen overlay — backdrop + flex centering */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(70, 94, 185, 0.10), transparent 58%),
    rgba(9, 13, 32, 0.56);
  backdrop-filter: blur(8px) saturate(1.14);
  -webkit-backdrop-filter: blur(8px) saturate(1.14);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.auth-modal-overlay--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Animate card upward when overlay hides */
.auth-modal-overlay--hidden .auth-modal {
  transform: translateY(-10px);
}

/* Modal card */
.auth-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background:
    radial-gradient(ellipse 72% 38% at 50% -10%, rgba(130,155,255,0.046) 0%, rgba(95,115,200,0.014) 52%, transparent 100%),
    linear-gradient(180deg, rgba(17,21,44,0.982) 0%, rgba(13,16,35,0.986) 52%, rgba(10,13,28,0.990) 100%);
  border: 1px solid rgba(155,170,215,0.18);
  border-top-color: rgba(200,212,248,0.24);
  border-radius: 22px;
  padding: 3.5rem 3.25rem;
  box-shadow:
    0 24px 66px rgba(0, 0, 0, 0.38),
    0 10px 32px rgba(30, 42, 105, 0.14),
    0 0 0 1px rgba(105, 125, 200, 0.048),
    inset 0 1px 0 rgba(255, 255, 255, 0.048),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  transform: translateY(0);
  transition: transform 0.22s ease;
}

.auth-modal--account {
  max-width: 640px;
  padding: 42px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 82% 36% at 50% -12%, rgba(130,158,255,0.050) 0%, rgba(95,115,210,0.014) 48%, transparent 70%),
    linear-gradient(180deg, rgba(18,22,46,0.988) 0%, rgba(13,17,37,0.990) 48%, rgba(10,13,30,0.992) 100%);
  border-color: rgba(155,170,215,0.18);
  border-top-color: rgba(200,212,248,0.24);
  box-shadow:
    0 34px 92px rgba(0, 0, 0, 0.50),
    0 16px 40px rgba(7, 12, 30, 0.28),
    0 8px 24px rgba(25, 38, 86, 0.13),
    0 0 0 1px rgba(255, 255, 255, 0.026) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.078),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

/* Sign-up panel is widest — it has the most fields */
.auth-modal:has(#auth-modal-panel-signup:not(.auth-modal-panel--hidden)) {
  max-width: 600px;
}

/* Close button — top-right corner */
/* Shared close-button centering primitive — the single rule every X/close
   button uses. A <button> with display:grid does NOT centre its child in
   Chromium; inline-flex does. Pair with a symmetric inline-SVG cross. */
.x-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.x-close svg { display: block; flex: none; }
.x-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(185,196,230,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.068), rgba(120,140,210,0.040));
  color: rgba(225, 232, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    inset 0 -1px 0 rgba(0,0,0,0.10);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.auth-modal-close:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.092), rgba(135,155,225,0.058));
  color: rgba(247, 248, 255, 0.88);
  border-color: rgba(185, 202, 255, 0.30);
  transform: none;
}

.auth-modal-close:focus-visible {
  outline: 2px solid rgba(155, 175, 245, 0.58);
  outline-offset: 2px;
}

/* Title */
.auth-modal-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 2rem;
  letter-spacing: -0.03em;
}

/* Hidden panel (login ↔ signup switching) */
.auth-modal-panel--hidden {
  display: none;
}

/* Subtle password hint */
.auth-field-hint {
  font-size: 13px;
  color: rgba(205, 216, 245, 0.60);
  line-height: 1.4;
}

/* Footer row: forgot password / switch link */
.auth-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
  font-size: 15px;
  color: rgba(225, 232, 255, 0.68);
}

.auth-modal-footer-link {
  color: rgba(205, 216, 245, 0.64);
  text-decoration: none;
  font-size: 15px;
  transition: color 0.15s ease;
}

.auth-modal-footer-link:hover {
  color: rgba(178, 196, 255, 0.94);
}

.auth-modal-footer-sep {
  color: rgba(205, 216, 245, 0.34);
  user-select: none;
}

/* Switch panel button — looks like a link */
.auth-modal-switch-btn {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: rgba(178, 196, 255, 0.92);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}

.auth-modal-switch-btn:hover {
  color: rgba(210, 220, 255, 0.98);
  background: none;
  border: none;
  transform: none;
}

.auth-modal-switch-btn:focus-visible {
  outline: 2px solid rgba(155, 175, 245, 0.58);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (max-width: 560px) {
  .auth-modal {
    padding: 2.5rem 1.75rem;
    border-radius: 18px;
  }

  .auth-modal--account {
    padding: 34px 26px;
    border-radius: 22px;
  }

  .auth-modal-title {
    font-size: 1.625rem;
    margin-bottom: 1.625rem;
  }
}

@media (max-width: 420px) {
  .auth-modal {
    padding: 2rem 1.25rem;
    border-radius: 14px;
  }

  .auth-modal--account {
    padding: 30px 20px;
    border-radius: 20px;
  }

  .acct-profile {
    gap: 14px;
  }

  .acct-avatar {
    width: 58px;
    height: 58px;
  }

  .auth-modal-title {
    font-size: 1.4rem;
    margin-bottom: 1.375rem;
  }
}

/* =========================
   Account Modal Panel
========================= */

/* ── Profile header ── */
.acct-profile {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(185,196,230,0.16);
  margin-bottom: 22px;
}

/* Avatar wrapper — positions the status dot relative to the circle */
.acct-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.acct-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 18%, rgba(165,185,255,0.15) 0%, transparent 44%),
    linear-gradient(180deg, rgba(30,38,68,0.88) 0%, rgba(17,23,47,0.94) 100%);
  border: 1.5px solid rgba(185,202,255,0.26);
  box-shadow:
    0 0 0 4px rgba(120,140,220,0.060),
    0 6px 18px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0,0,0,0.19);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.96);
}

/* Green status dot — bottom-right of avatar, premium only */
.acct-avatar-status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(134, 239, 172, 0.94);
  border: 2px solid #10142a;
  box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.16);
}

.acct-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Tiny role eyebrow above username */
.acct-identity-label {
  display: block;
  font-size: 0.71875rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(205, 216, 245, 0.68);
  margin-bottom: 2px;
}

.acct-identity-label--premium {
  color: rgba(205, 218, 255, 0.96);
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(77, 110, 248, 0.12);
}

.acct-identity-label--free {
  color: rgba(205, 216, 245, 0.62);
}

.acct-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-email {
  font-size: 0.875rem;
  color: rgba(225, 232, 255, 0.68);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Account modal — hierarchy polish (impeccable live, accepted V2: glow 0.15, avatar lg) */
.auth-modal--account .acct-profile { gap: 20px; margin-bottom: 24px; }
.auth-modal--account .acct-avatar {
  width: 76px;
  height: 76px;
  border-color: rgba(185,202,255,0.29);
  box-shadow:
    0 0 0 4px rgba(120,140,220,0.075),
    0 0 24px rgba(91,140,255,0.054),
    0 6px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.auth-modal--account .acct-identity-label--premium {
  color: #cfe0ff;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 10px rgba(77,110,248,0.156);
}
.auth-modal--account .acct-name { font-size: 1.4rem; letter-spacing: -0.03em; }
.auth-modal--account .acct-email { font-size: 0.84rem; color: rgba(225,232,255,0.54); }

@media (max-width: 420px) {
  .auth-modal--account .acct-avatar { width: 62px; height: 62px; }
  .auth-modal--account .acct-name { font-size: 1.25rem; }
}

/* ── Plan card ── */
.acct-plan {
  border-radius: 16px;
  border: 1px solid rgba(185,196,230,0.16);
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.038),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}

.acct-plan--free {
  padding: 20px;
  background: linear-gradient(180deg, rgba(25, 32, 60, 0.78), rgba(16, 22, 45, 0.88));
  border-color: rgba(185,196,230,0.16);
}

.acct-plan--premium {
  padding: 17px 18px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(74, 222, 128, 0.105), transparent 62%),
    linear-gradient(135deg, rgba(25, 48, 62, 0.86) 0%, rgba(16, 30, 52, 0.88) 54%, rgba(14, 24, 45, 0.90) 100%);
  border-color: rgba(74, 222, 128, 0.28);
  border-top-color: rgba(134, 239, 172, 0.34);
  box-shadow:
    0 10px 24px rgba(16, 185, 129, 0.060),
    inset 0 1px 0 rgba(255, 255, 255, 0.060),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

/* Premium plan: icon + text row */
.acct-plan-premium-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

/* Checkmark icon in a small green circle */
.acct-plan-status-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(74,222,128,0.24), rgba(32,128,100,0.15));
  border: 1px solid rgba(92, 245, 190, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(152, 245, 202, 0.96);
  margin-top: 1px;
  box-shadow: inset 0 1px 0 rgba(180, 245, 205, 0.07);
}

/* Premium text stack */
.acct-plan-premium-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.acct-plan-premium-title {
  font-size: 0.9375rem;
  font-weight: 760;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.acct-plan-premium-sub {
  font-size: 0.8125rem;
  color: rgba(225, 232, 255, 0.76);
  line-height: 1.5;
}

/* Free plan */
.acct-plan-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.acct-plan-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(225, 232, 255, 0.52);
}

.acct-plan-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(245, 248, 255, 0.94);
}

.acct-plan-desc {
  font-size: 0.875rem;
  color: rgba(225, 232, 255, 0.68);
  margin: 0 0 16px;
  line-height: 1.55;
}

/* Legacy badge class — kept for safety */
.acct-plan-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(150, 228, 184);
}

.acct-plan-badge svg {
  flex-shrink: 0;
}

/* Upgrade button */
.acct-upgrade-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 13px 18px;
  background: linear-gradient(180deg, #4d6ef8 0%, #3855e0 55%, #2c46cc 100%);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  border-radius: 11px;
  text-decoration: none;
  border: 1px solid rgba(170, 185, 255, 0.34);
  box-shadow: 0 10px 24px rgba(42, 64, 188, 0.24), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.14);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.acct-upgrade-btn:hover {
  border-color: rgba(190, 202, 255, 0.46);
  background: linear-gradient(180deg, #5d7eff 0%, #4464f0 52%, #3552d8 100%);
  box-shadow: 0 12px 28px rgba(42,64,188,0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.14);
  color: #fff;
}

/* ── Navigation links — icon + label + chevron rows ── */
.acct-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.acct-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(185,196,230,0.070);
  background: rgba(255,255,255,0.024);
  font-size: 0.9375rem;
  font-weight: 650;
  color: rgba(245, 248, 255, 0.90);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.acct-nav-link:hover,
.acct-nav-link:focus-visible {
  transform: translateY(var(--lift-sm));
  background: rgba(255,255,255,0.064);
  border-color: rgba(185,196,230,0.14);
  color: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

.acct-nav-link:focus-visible,
.acct-upgrade-btn:focus-visible,
.acct-logout-btn:focus-visible {
  outline: 2px solid rgba(155, 175, 245, 0.58);
  outline-offset: 2px;
}

.acct-nav-icon {
  color: rgba(210, 220, 255, 0.72);
  flex-shrink: 0;
  transition: color 0.14s ease;
}

.acct-nav-link:hover .acct-nav-icon {
  color: rgba(190, 202, 255, 0.96);
}

.acct-nav-label {
  flex: 1;
}

.acct-nav-chevron {
  color: rgba(245, 248, 255, 0.46);
  flex-shrink: 0;
  transition: color 0.14s ease, transform 0.18s var(--ease-expo);
}

.acct-nav-link:hover .acct-nav-chevron {
  color: rgba(220, 228, 255, 0.68);
  transform: translateX(3px);
}

/* ── Divider ── */
.acct-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185,196,230,0.16), transparent);
  margin: 5px 0 13px;
}

/* ── Sign out ── */
.acct-logout-form {
  margin: 0;
}

.acct-logout-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(239, 68, 88, 0.014);
  border: 1px solid rgba(239, 68, 88, 0.048);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  color: rgba(252, 172, 180, 0.68);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.acct-logout-btn:hover {
  background: rgba(239, 68, 88, 0.056);
  border-color: rgba(239, 68, 88, 0.096);
  color: rgba(255, 190, 196, 0.88);
}

.acct-logout-icon {
  flex-shrink: 0;
  color: rgba(252, 172, 180, 0.54);
  transition: color 0.14s ease;
}

.acct-logout-btn:hover .acct-logout-icon {
  color: rgba(255, 190, 196, 0.72);
}

/* Shared focus rings whose legacy group also includes non-chrome selectors. */
.logo:focus-visible,
.google-btn:focus-visible,
.auth-modal-footer-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .logo-text { transition-duration: 0s !important; }
  .auth-modal-overlay,
  .auth-modal,
  .account-popup { transition: none; }
}