/* 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;
  /* THE ONE BAR (owner, 2026-10-10: "make this the navbar default, delete
     any other navbar"). The bar is the dashboard's, flat: the night paper
     over its hairline, the raw values of --nb-m-paper and --nb-m-hairline
     for a page that loads no token sheet. The notebook skin
     (notebook-navbar-skin.css) paints the same pair from the tokens, in
     both themes; the old glassy navy bar and its scrolled and dark-mode
     variants are gone. */
  background: #0F1013;
  border-bottom: 1px solid #2A2D34;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* the soft lift once the page scrolls under it, the skin's own (tokens
   first, their night values as the fallback) */
.topbar.scrolled {
  border-bottom-color: var(--nb-border-strong, #3A404D);
  box-shadow: var(--nb-shadow-1, 0 1px 3px rgba(0, 0, 0, 0.35));
}

/* ONE LIGHT BAR (owner, 2026-10-10: "make sure there is also one light
   mode, like the darkmode there is one only"). By day the bar is the
   dashboard's paper with no line under it, lifted by the soft shadow once
   the page scrolls under it, on every page. theme-light.css (base.html
   pages only, never edited) still draws its glassy gradient bar at
   html.theme-light .topbar; the body step outranks it. Every value is the
   notebook skin's own token with its day value as the fallback, so where
   the skin is loaded (every live page) these change nothing, and where it is
   not (NOTEBOOK_PROOF off) the bar is still the one bar. */
html.theme-light body .topbar,
html.theme-light body .topbar.scrolled {
  background: var(--nb-chrome, #F1F2EF);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
html.theme-light body .topbar {
  box-shadow: none;
}
html.theme-light body .topbar.scrolled {
  box-shadow: var(--nb-shadow-1, 0 1px 3px rgba(17, 28, 52, 0.09));
}

/* 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;
  }
}

/* A SHORT SCREEN SCROLLS THE BAR AWAY (audit N-031a, 2026-09-25). On a phone
   held sideways (844 x 390) the sticky 72px bar plus the notes tutor pill were
   a third of the screen at all times. At 1080px wide and under, on a screen
   500px tall or less, the bar sits at the top of the page and scrolls away
   with it, like the page head; the menu is back at the top of the page.
   Portrait phones, tablets and the desk never match (all taller than 500px).
   With the bar out of the way nothing needs to clear it, so the chrome height
   every sticky offset, scroll margin and viewport fit reads is 0 here, and an
   anchor jump lands 16px from the top: html:root outranks the :root token
   (notebook-tokens.css loads after this sheet on both bases), and it also
   overrides styles.css's 108px scroll padding on base.html pages.
   Two exceptions keep the sticky bar:
     · while the phone menu is open, so its close button is always at the top
       of the screen over the open menu;
     · the flashcards page, whose card is sized to the window under the bar
       and whose opening scroll (nb_flashcard_index.html) places the card and
       its controls under a bar it measures as always there (S-006, S-008).
       A student there flips cards and does not scroll, so the bar costs no
       reading room. */
@media (max-width: 1080px) and (max-height: 500px) {
  html:not(:has(.nb-fc-scene)) body:not(.mobile-drawer-open) .topbar {
    position: relative;
  }
  html:root:not(:has(.nb-fc-scene)) {
    --nb-chrome-h: 0px;
    scroll-padding-top: var(--nb-s4, 16px);
  }
}

/* ── Brand lockup ── */
.logo {
  --logo-wordmark-width: 8.75rem;
  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;
  /* Must stay >= the font's ascent+descent. At line-height: 1 the 20px line
     box is shorter than the content area of every UI face in the stack, and
     the overflow: hidden above clips the difference — which cut the "y"
     descender flat. `normal` is the font's own recommended spacing, so the
     content area always fits and nothing is clipped vertically. */
  line-height: normal;
  color: inherit;
  opacity: 1;
}

/* With 2x text on the desktop bar the wordmark outgrew its flank and was cut
   mid-letter ("ExamStud|y" at 1024 to about 1270 wide). As on phones (below),
   the brand stops growing where it would be cut: 2.6vw is 26.6px at 1024, so
   normal text (20px) and 1.3x text keep their size at every desktop width,
   1.5x text gives up at most 3px under 1154 wide, and 2x text fits whole. */
@media (min-width: 1024px) {
  .logo-text {
    font-size: min(1em, 2.6vw);
  }
}

/* ── 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[data-ui-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-link.is-active,
.nav-link[data-ui-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 {
  /* Containing block for .account-popup. Without this the panel resolved
     against .topbar (position: sticky) and sat at the bar's own 16px inset,
     32px right of the trigger's edge — invisible behind a 120px text button,
     obvious under a 40px circle. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
}

/* WHEN THE ACTIONS DO NOT FIT ONE LINE, THE PILL TAKES THE LINE ABOVE (audit
   P-032 and the profile pass, 2026-09-25). With large text a free account's
   Upgrade pill was the only thing in the flank that could shrink, so it
   wrapped letter by letter (15 lines and a 561px bar at 1024 with 2x text)
   and the avatar ran 20px off the screen. Now the flank wraps instead, right
   aligned: the pill on top, Dashboard and the avatar under it. The Dashboard
   link carries the avatar's width plus the gap as a margin that the avatar
   takes back, so the two always move to the second line together and never
   part; on one line every box sits exactly where it did. Wherever the
   actions fit one line (every account at normal text from 1024px up, after
   the band rule below) nothing moves. */
.topbar > .account-wrap {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}
.topbar > .account-wrap > .nav-link:has(+ .account-avatar-btn) {
  margin-inline-end: 50px;
}
.topbar > .account-wrap > .nav-link + .account-avatar-btn {
  margin-inline-start: -50px;
}
/* 1024 to 1199: a free account's three actions (353px) did not fit the flank
   (324 to 352px), so "Upgrade to Premium" wrapped to a 56px two-line pill.
   Tighter padding and gaps for that state only bring it to 317px, one line,
   40px tall, 23px clear of the programme links at 1024. Signed-out and
   Premium bars, and every width from 1200 up, are untouched. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .topbar > .account-wrap:has(> .nav-cta + .nav-link) {
    gap: 6px;
  }
  .topbar > .account-wrap:has(> .nav-cta + .nav-link) > .nav-cta {
    padding-inline: 12px;
  }
  .topbar > .account-wrap:has(> .nav-cta + .nav-link) > .nav-link {
    padding-inline: 10px;
    margin-inline-end: 46px;
  }
  .topbar > .account-wrap:has(> .nav-cta + .nav-link) > .account-avatar-btn {
    margin-inline-start: -46px;
  }
}

/* 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);
}

/* THE BAR HOLDS STILL ON EVERY PAGE (owner, 2026-10-10: "make sure there is
   also one light mode, like the darkmode there is one only"). The legacy
   styles.css, which only base.html pages load, lifts every button and the
   Get Premium link 1px under the pointer and squeezes the link when
   pressed; on the notebook pages the bar's controls never moved. This
   cancels both, as .account-avatar-btn:hover does for the avatar. */
.nav-cta:hover,
.nav-cta:active,
.account-btn:hover,
.account-btn:active {
  transform: none;
}

/* ── Account avatar (pages/includes/user_avatar.html) ──────────────────
   One object across five surfaces. .esa-avatar--nav and --drawer own their
   own circle; --inherit fills a pre-existing wrapper (.account-popup-avatar,
   .acct-hub-avatar, .pv-avatar) so that wrapper keeps its size, radius, colour
   and font and only the contents come from the include. overflow: hidden lives
   on the base so an uploaded photo will crop to whichever shape it lands in. */
.esa-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  line-height: 1;
}

.esa-avatar--inherit {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
}

.esa-avatar--nav,
.esa-avatar--drawer {
  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);
  color: rgba(255,255,255,0.92);
}

.esa-avatar--nav {
  width: 40px;
  height: 40px;
}

.esa-avatar--drawer {
  width: 44px;
  height: 44px;
  font-size: 0.9375rem;
  font-weight: 680;
}

/* No font-size here: the nav circle takes its metric from .account-avatar-btn
   so notebook-typography.css stays the computed owner when the skin is on. */
.esa-avatar-initials {
  line-height: 1;
  letter-spacing: 0.02em;
  /* A two-letter RTL pair renders in logical order without leaking bidi
     state into the rest of the bar. */
  unicode-bidi: isolate;
}

/* Large text (mobile audit P-R1-6, 2026-09-26): the initials take a rem size
   but the nav (40px) and drawer (44px) rings do not grow, so from about 1.5x
   they filled the ring and were cut by it (43x39 in 40px at 2x). Each ring is
   a size container and the initials stop at 42% of its inner width: 15.96px
   in the nav ring, 17.64px in the drawer's. The default 15px sits under both
   caps (and under the 15.54px a 1.5px border leaves), so it never changes.
   The profile header's --inherit circle has its own rule (P-G5). */
.esa-avatar--nav,
.esa-avatar--drawer {
  container-type: size;
}

.esa-avatar--nav .esa-avatar-initials,
.esa-avatar--drawer .esa-avatar-initials {
  font-size: min(1em, 42cqi);
}

.esa-avatar-glyph {
  flex-shrink: 0;
}

.esa-avatar--nav .esa-avatar-glyph {
  width: 18px;
  height: 18px;
}

.esa-avatar--drawer .esa-avatar-glyph {
  width: 20px;
  height: 20px;
}

/* Keeps the dropdown header's fallback glyph at the 18px it has always been;
   the include ships 24px so the 50px hub circle is unchanged too. */
.account-popup-avatar .esa-avatar-glyph {
  width: 18px;
  height: 18px;
}

/* Avatar trigger — a bare circle. Deliberately NOT .account-btn: that pill is
   still the anonymous Log In control and keeps its padding and reflow rules. */
.account-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  color: rgba(240,243,255,0.90);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 680;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.20s ease;
}

.account-avatar-btn .esa-avatar--nav {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.account-avatar-btn:hover .esa-avatar--nav {
  border-color: rgba(185,202,255,0.46);
  box-shadow: 0 0 0 3px rgba(120,140,220,0.10);
}

/* background: none cancels the legacy styles.css `button:hover` wash (0,1,1),
   which painted 10% white behind the translucent night disc on base.html
   pages and dropped the initials to 4.2:1 (audit K-022, 2026-09-25). The
   avatar's hover is the border step above, as on the notebook pages. */
.account-avatar-btn:hover {
  background: none;
  transform: none;
}

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

/* Account popup panel */
.account-popup {
  position: absolute;
  top: calc(100% + 9px);
  /* Flush with the trigger's right edge — see .account-wrap above. */
  right: 0;
  width: 292px;
  /* Viewport units, NOT calc(100% - 24px). The percentage resolved against the
     containing block, which is now .account-wrap — 40px wide for a premium user
     whose flank is just the avatar. That collapsed the panel to 32px and burst
     its fixed-width children 90px past the document edge. The guard means "fit
     the viewport with a gutter", so it has to be measured against the viewport. */
  max-width: min(292px, calc(100vw - 32px));
  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);
  /* no glass (2026-10-10): the panel is opaque paper on every page, so its
     blur only ever showed where theme-light.css had not already taken it off */
  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);
}

/* ── Plan badge: an annotation, not a chip (2026-08-30) ───────────────────
   Spoken in the notebook's [worked example] register -- brackets, serif
   italic, small -- rather than as a status pill with a light on it.

   The chrome is stripped from an ID-scoped selector on purpose. Three sheets
   dress this element (this one, theme-light.css at 0-1-1 and
   notebook-navchrome-skin.css at 0-2-0), so a plain class here would lose to
   both and the pill would survive in one theme or the other. #account-popup
   at 1-1-0 outranks them without touching their COLOUR rules, which are what
   keep the label blue on premium and muted on free, per theme.

   The word carries its own family/style on an inner span rather than on the
   badge: .account-popup-plan-badge already takes `font: var(--nb-type-label)`
   from three typography sheets, one of them at ID specificity, and a
   shorthand would reset whatever we set here. Styling the span sidesteps that
   fight entirely and keeps the badge's role assignment intact. */
#account-popup .account-popup-plan-badge {
  display: inline-flex;
  align-items: center;
  margin: 2px 0 13px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--nb-ink-2, rgba(225,232,255,0.76));
  border-radius: var(--nb-r-sm, 4px);
  color: var(--nb-ink-2, rgba(225,232,255,0.76));
}

#account-popup .account-popup-plan-badge--premium {
  border-color: var(--nb-success, #34d399);
  color: var(--nb-success, #34d399);
  background: transparent;
}

.account-popup-plan-label {
  /* Fallbacks matter: on a non-nb page notebook-tokens.css is absent, and a
     var() with no fallback would drop the declaration entirely. */
  font-family: var(--nb-sans, system-ui, sans-serif);
  font-style: normal;
  font-weight: 600;
  font-size: var(--nb-text-sm, 0.8125rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.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;
  }
  /* The anchor is as wide as the lockup and no wider (audit K-015): grown to
     fill the bar it made a tap anywhere between the wordmark and the menu
     button go Home. space-between keeps the menu button on the right. */
  .logo{
    flex: 0 1 auto;
    min-width: 0;
  }
  /* The wordmark never breaks (audit D-G10): with large text it broke to
     "ExamStudyAi / d", and at 200% zoom on a 320 phone into 7 pieces and a
     155px bar. It stays one line and gives up size instead: 6.25vw is 20px at
     320, so no phone at normal text changes; the brand stops growing only
     where it would otherwise split, while the page's own text still scales. */
  .logo-text{
    display: inline-block;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: min(1em, 6.25vw);
    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%;
    /* The panel is the whole screen; the content scrolls INSIDE it. Without a
       height it just grew past the screen and overflow never engaged, so on a
       landscape or short phone Log In, Theme and Sign Out were out of reach
       (mobile audit 2026-09-25, every page). */
    height: 100%;
    box-sizing: border-box;
    padding: 88px 18px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    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;
  }
}

/* When large text makes the bar taller than its 72px (64px on phones), its
   contents keep 8px off the bar's top and bottom edges instead of touching
   them (the wrapped account actions above, at 1024 with 2x text). The bar is
   border-box, so at normal text its height and every centred item stay
   exactly where they were. After every .topbar padding shorthand on purpose. */
.topbar {
  padding-block: 8px;
}

/* Under 240 CSS px (only reached at 150 to 200% zoom on the smallest phones)
   the cap steps aside so the name stays whole beside the menu button (audit
   D-G11a). */
@media (max-width: 239px) {
  .logo-img {
    display: none;
  }
}

/* A THUMB-SIZED TARGET FOR EVERY BAR CONTROL ON A TOUCH SCREEN (audits D-024
   and K-004b, 2026-09-25). The logo is 32px tall on phones and portrait
   tablets, and on a touch tablet with the desktop bar the programme links are
   35px, the pills 40px and the avatar 40px. Each gets an invisible 44px hit
   box centred on it, never a bigger drawing, so every pill looks exactly as
   it did. Each box stays inside the bar and clear of its neighbours (the
   links sit 4px apart and are wider than 44px; the avatar sits 6 to 10px
   from Dashboard). .nav-link takes ::before because its ::after is the
   retired underline. A mouse never matches. */
@media (pointer: coarse) {
  .topbar .logo,
  .topbar .nav-cta,
  .topbar .account-btn,
  .topbar .account-avatar-btn {
    position: relative;
  }
  .topbar .logo::after,
  .topbar .nav-link::before,
  .topbar .nav-cta::before,
  .topbar .account-btn::before,
  .topbar .account-avatar-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* 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;
}

/* ── Drawer identity row + sign out ──────────────────────────────────
   Declared after the @media block above so --identity beats the centring
   --account sets; source order decides, media queries add no specificity. */
.mobile-nav-row--identity {
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}

.mobile-nav-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.mobile-nav-identity-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-identity-email {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.68;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-logout-form {
  margin: 0;
  padding: 0;
  width: 100%;
}

.mobile-nav-row--signout {
  cursor: pointer;
  color: rgba(252, 172, 180, 0.80);
  background: rgba(239, 68, 88, 0.030);
  border-color: rgba(239, 68, 88, 0.10);
}

.mobile-nav-row--signout:hover,
.mobile-nav-row--signout:focus-visible {
  color: rgba(255, 190, 196, 0.96);
  background: rgba(239, 68, 88, 0.075);
  border-color: rgba(239, 68, 88, 0.20);
}

.mobile-nav-signout-icon {
  flex-shrink: 0;
  opacity: 0.72;
}

/* 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 { transition-duration: 0s !important; }
  .auth-modal-overlay,
  .auth-modal,
  .account-popup { transition: none; }
}

/* The sign-up modal's two required boxes (Terms of Service, Privacy Policy),
   unticked. Outside .auth-field, whose input rules would stretch a checkbox. */
.auth-legal-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 0.875rem;
  font-size: 14px;
  line-height: 1.45;
}
.auth-legal-box input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #5B8CFF;
}
.auth-legal-box label {
  color: inherit;
}
.auth-legal-box a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}