/* ═══════════════════════════════════════════════
   MORPHOME — shared.css
   Tokens · Reset · Body · Topbar · Buttons · Utils
   ═══════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --accent:       #3560f0;
  --accent-2:     #6840f5;
  --accent-soft:  rgba(53,96,240,.09);
  --text:         #111827;
  --muted:        #6b7280;
  --surface:      #ffffff;
  --line:         #e5eaf3;
  --glass:        rgba(255,255,255,.75);
  --glass-strong: rgba(255,255,255,.95);
  --shadow:       0 20px 60px rgba(10,20,40,.12);
  --shadow-soft:  0 4px 20px rgba(10,20,40,.07);
  --page-width:   1320px;
  --page-pad:     56px;
}

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

/* ── BODY ── */
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--text);
  background: #f0f4fb;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(53,96,240,.08) 0%, transparent 65%),
    radial-gradient(ellipse 700px 400px at 85%  5%, rgba(104,64,245,.07) 0%, transparent 60%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── TOPBAR ─────────────────────────────────────────────────────────
   Floating capsule. Sits inset 10px from all edges with rounded corners,
   sticky-positioned so it stays in place on scroll while preserving the
   side margins. Light translucency (.86) keeps a hint of the page
   colour visible behind without going grey. The mobile dropdown panel
   docks just below it (also rounded, also inset).
   ─────────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 10px;
  z-index: 200;
  margin: 10px 10px 0;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 18px 0 14px;
  border-radius: 14px;
  /* Light translucency + slight saturation for the glass look. The
     blur level is tuned so the page background visibly shows through
     near the edges but the bar stays clearly dark and readable. */
  background: rgba(11, 16, 32, 0.86);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  /* Floating shadow that matches the site tone (compare var(--shadow-soft)
     used by .uc-card, .glass etc — same RGB, slightly more Y-offset/blur
     so the bar reads as floating well above page content rather than
     sitting on it. Inset highlight on top adds a touch of dimensionality. */
  box-shadow:
    0 10px 28px rgba(10, 20, 40, 0.14),
    0 2px 6px rgba(10, 20, 40, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: 22px;
  flex-shrink: 0;
}
.brand-icon {
  /* brand-mark v1 */
  width: 32px; height: 32px;
  border-radius: 10px;
  background-image:
    url(../assets/logo/brand-icon.png?v=2),
    linear-gradient(140deg, var(--accent), var(--accent-2));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 97% auto, cover; /* brand-size v2 */
  display: grid; place-items: center;
  box-shadow:
    0 4px 14px rgba(53, 96, 240, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0;            /* hide the ✦ glyph */
  line-height: 1;
  transition: transform .2s ease;
}
.brand:hover .brand-icon { transform: rotate(-6deg) scale(1.05); }
.brand-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  /* Line-height:1 keeps the text box flush with the glyph height —
     same trick we apply to nav links — so flex's align-items:center
     puts both on the same baseline despite different font-sizes. */
  line-height: 1;
}

/*
  Nav cluster — no surrounding pill background anymore. Each link is a
  bare label with a tiny dot indicator underneath that fades in on
  hover and grows + glows on the active page. The dot is rendered via
  ::after on each <a> and absolutely positioned a few px below the
  text baseline. This keeps layout stable (the dot doesn't affect the
  link's own box) and lets the indicator extend beyond the link area
  without clipping.
*/
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-right: auto;
}
.topbar-nav a {
  /* Symmetric padding — keeps the text vertically centred so it aligns
     with the brand on the left. The dot indicator lives outside the
     link's own box (bottom: -2px) so it doesn't push the text upward. */
  padding: 9px 14px 7px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  /* Explicit line-height:1 — same as .brand-name. Without this, default
     line-height (~1.5) makes the text's box taller than its glyphs and
     shifts the visual centre. The brand uses line-height:1 too, so both
     elements end up on the same visual baseline under flex's align-center. */
  line-height: 1;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: -0.005em;
  transition: color .16s ease;
  white-space: nowrap;
  position: relative;
}

/*
  The indicator dot. Positioned just below the link's content box —
  close enough to read as belonging to the link, far enough not to
  overlap descenders ("g", "p", "y"). The link's own padding (8px
  bottom) leaves room for the dot to live inside the topbar.
*/
.topbar-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, 4px);
  opacity: 0;
  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.4, 1.5, .5, 1),
    width .18s ease,
    height .18s ease,
    box-shadow .22s ease;
}

.topbar-nav a:hover {
  color: rgba(255, 255, 255, 0.94);
}
.topbar-nav a:hover::after {
  opacity: 0.85;
  transform: translate(-50%, 0);
}

/*
  Active state — same dot, slightly bigger, with a soft glow halo.
  Looks "lit up" rather than "framed". Keeps the visual rhythm of
  the bar light because there's no bg fill behind the text.
*/
.topbar-nav a.active,
.topbar-nav a[aria-current="page"] {
  color: #fff;
}
.topbar-nav a.active::after,
.topbar-nav a[aria-current="page"]::after {
  opacity: 1;
  transform: translate(-50%, 0);
  width: 5px;
  height: 5px;
  background: var(--accent);
  box-shadow:
    0 0 8px rgba(53, 96, 240, 0.65),
    0 0 14px rgba(53, 96, 240, 0.35);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Override .btn-generate inside the topbar — match the bar's softer
   radius (10px) and rein in its big shadow so it doesn't bleed past
   the floating capsule's silhouette. The site-wide .btn-generate
   defined later in shared.css keeps its 7px radius elsewhere. */
.topbar .btn-generate {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(53, 96, 240, 0.36);
}
.topbar .btn-generate:hover {
  box-shadow: 0 6px 18px rgba(53, 96, 240, 0.46);
}

/* ── BURGER (mobile) ───────────────────────────────────────────────
   Hidden on desktop. JS toggles .is-open to animate the bars into
   an X. Aria-expanded is updated by JS for screen readers. */
.topbar-burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}
.topbar-burger:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.12);
}
.topbar-burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .25s cubic-bezier(.5, .1, .25, 1.4),
              opacity .15s ease,
              top .25s cubic-bezier(.5, .1, .25, 1.4);
}
.topbar-burger span:nth-child(1) { top: calc(50% - 5px); }
.topbar-burger span:nth-child(3) { top: calc(50% + 5px); }
.topbar-burger.is-open span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.topbar-burger.is-open span:nth-child(2) { opacity: 0; }
.topbar-burger.is-open span:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ── MOBILE DROPDOWN PANEL ────────────────────────────────────────
   Slides down from below the topbar. Same dark glass surface, full
   width, rounded bottom corners. Initial state: collapsed (max-height: 0).
   Open: slides to its content height + fades the items. */
.topbar-mobile {
  position: fixed;
  /* Sits below the floating topbar (10px top margin + 64px height
     + 8px breathing gap = 82px). Same 10px side inset so the panel
     reads as a sibling of the topbar capsule, not a sticker glued
     to its bottom. */
  top: 82px;
  left: 10px;
  right: 10px;
  z-index: 199;
  border-radius: 14px;
  background: rgba(11, 16, 32, 0.96);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition:
    max-height .32s cubic-bezier(.2, .8, .25, 1),
    visibility 0s linear .32s;
}
.topbar-mobile.is-open {
  max-height: calc(100vh - 100px);
  visibility: visible;
  transition:
    max-height .35s cubic-bezier(.2, .8, .25, 1),
    visibility 0s linear 0s;
}
.topbar-mobile-inner {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.topbar-mobile a {
  display: block;
  padding: 13px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color .14s, background .14s;
}
.topbar-mobile a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.topbar-mobile a.active,
.topbar-mobile a[aria-current="page"] {
  color: #fff;
  background: rgba(53, 96, 240, 0.18);
  box-shadow: inset 0 0 0 1px rgba(53, 96, 240, 0.28);
}
.topbar-mobile-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 8px 0 4px;
}
.topbar-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.topbar-mobile-actions .btn-generate {
  /* Full-width Generate inside the panel feels right on mobile. */
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  font-size: 14px;
}
.topbar-mobile-actions .credits-chip {
  width: fit-content;
}

/* When the panel is open, lock body scroll and add a faint overlay.
   The overlay starts at the very top — it sits BELOW the floating
   topbar (z-index 198 vs the bar's 200) so the bar stays crisp while
   page content darkens. The user perceives "panel open" without the
   bar getting muddied. */
html.topbar-mobile-open { overflow: hidden; }
html.topbar-mobile-open body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 198;
  pointer-events: auto;
  animation: topbar-mobile-fade .25s ease forwards;
}
@keyframes topbar-mobile-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── BUTTONS ── */
.btn-generate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font: 500 13px 'DM Sans', sans-serif;
  box-shadow: 0 3px 14px rgba(53,96,240,.4);
  transition: .18s;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.btn-generate:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(53,96,240,.5);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font: 500 14px 'DM Sans', sans-serif;
  box-shadow: 0 8px 28px rgba(53,96,240,.32);
  transition: .2s;
  text-decoration: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(53,96,240,.42); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--text);
  font: 400 14px 'DM Sans', sans-serif;
  backdrop-filter: blur(12px);
  transition: .18s;
  text-decoration: none;
}
.btn-outline:hover { background: var(--surface); border-color: rgba(53,96,240,.25); }

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  background: #fff;
  color: var(--accent);
  font: 600 14px 'DM Sans', sans-serif;
  box-shadow: 0 6px 22px rgba(0,0,0,.14);
  transition: .2s;
  text-decoration: none;
  flex-shrink: 0;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.2); }

/* ── CREDITS CHIP ── */
.credits-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background .15s ease, border-color .15s ease;
}
.credits-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.13);
}
.credits-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}
.credits-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ── PAGE LAYOUT UTILITIES ── */
.page-wrap {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 52px var(--page-pad) 88px;
}
.page-head { margin-bottom: 36px; }
.page-head h1 { font-size: 34px; font-weight: 500; margin-bottom: 8px; }
.page-head p {
  font-size: 14px;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.68;
  font-weight: 400;
}

/* ── SECTION LABELS ── */
.sec-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sec-title  { font-size: 32px; font-weight: 500; margin-bottom: 8px; color: var(--text); }
.sec-sub    { font-size: 14px; color: var(--muted); line-height: 1.68; max-width: 480px; font-weight: 400; }

/* ── FILTER PILLS ── */
.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.filter-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(12px);
  color: var(--muted);
  font: 400 13px 'DM Sans', sans-serif;
  cursor: pointer;
  transition: .16s;
}
.filter-btn:hover { color: var(--text); border-color: rgba(53,96,240,.28); }
.filter-btn.active {
  background: linear-gradient(135deg, rgba(53,96,240,.11), rgba(104,64,245,.09));
  border-color: rgba(53,96,240,.35);
  color: var(--accent);
  font-weight: 500;
}

/* ── FOOTER CTA ── */
.footer-cta { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-pad) 88px; }
.footer-cta-inner {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius: 24px;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: 0 20px 56px rgba(53,96,240,.28);
}
.footer-cta h2 { font-size: 32px; font-weight: 500; color: #fff; margin-bottom: 6px; }
.footer-cta p  { font-size: 14px; color: rgba(255,255,255,.7); font-weight: 400; }

/* ── BLINK ANIMATION ── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  :root { --page-pad: 40px; }
}
@media (max-width: 860px) {
  :root { --page-pad: 28px; }
  .footer-cta-inner { padding: 40px 32px; }
  .footer-cta h2 { font-size: 26px; }
}

/* ─── Mobile breakpoint: 720px ───
   Below this width the desktop nav hides and the burger appears.
   The floating capsule keeps its 10px side margins — it visually
   adapts to narrow screens just by being relatively short. */
@media (max-width: 720px) {
  .topbar {
    height: 56px;
    /* Slightly tighter side padding inside the capsule. The 10px
       page margin from .topbar still applies. */
    padding: 0 12px 0 10px;
  }
  .topbar-nav { display: none; }
  .topbar-burger { display: block; }
  /* Pin the burger to the right edge of the topbar on mobile. Without
     this, .topbar-nav (which carried `margin-right: auto`) is hidden,
     and the burger collapses against the .topbar-right slot — visually
     "sticking" to the left side of the bar next to the brand. Adding
     margin-left:auto here recreates the spacer that the (now-hidden)
     nav was providing. */
  .topbar-burger { margin-left: auto; }
  .brand { margin-right: 12px; }
  .brand-name { font-size: 14px; }
  .brand-icon { width: 30px; height: 30px; font-size: 0; }
  /* Hide desktop-only chip + Generate. Panel has its own copies. */
  .topbar-right > .credits-chip,
  .topbar-right > .btn-generate,
  .topbar-right > .btn-back {
    display: none;
  }
  /* Panel sits below the capsule: 10px top + 56px height + 8px gap = 74px */
  .topbar-mobile { top: 74px; }
  .topbar-mobile.is-open { max-height: calc(100vh - 92px); }
}

@media (max-width: 560px) {
  :root { --page-pad: 18px; }
  .page-head h1 { font-size: 26px; }
  .sec-title { font-size: 24px; }
  .footer-cta-inner { padding: 36px 28px; }
  .footer-cta h2 { font-size: 24px; }
}

/* ═════════ Toast Notifications ═════════ */
.mph-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.mph-toast {
  min-width: 260px;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  background: rgba(30, 30, 36, 0.95);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  transform: translateX(120%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: auto;
}

.mph-toast--show {
  transform: translateX(0);
}

.mph-toast--success { border-left: 3px solid #4ade80; }
.mph-toast--error   { border-left: 3px solid #ef4444; }
.mph-toast--warning { border-left: 3px solid #f59e0b; }
.mph-toast--info    { border-left: 3px solid #60a5fa; }
/* ═════════ Topbar Auth Slot (used by topbar.js) ═════════
   A small bracket of buttons that lives in .topbar-right. Two visual
   states are toggled by topbar.js:

     1) Logged out: two pills — "Log in" (ghost) and "Sign up" (filled)
     2) Logged in:  avatar pill that opens a tiny dropdown menu

   The slot itself is a flex container with no padding so the buttons
   sit flush with the existing .btn-generate / .credits-chip rhythm.
   ═══════════════════════════════════════════════════════════════════ */

.topbar-auth { display: flex; align-items: center; gap: 8px; }

/* Login link — bare label, white text against the dark topbar */
.topbar-auth .ta-login {
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  transition: color .15s, background .15s;
  line-height: 1;
}
.topbar-auth .ta-login:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* Sign up — small filled accent pill, sized to match .btn-generate
   inside the topbar (overridden in shared.css to padding: 8px 18px). */
.topbar-auth .ta-signup {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font: 500 13px 'DM Sans', sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(53, 96, 240, 0.36);
  transition: transform .15s, box-shadow .15s;
  line-height: 1;
}
.topbar-auth .ta-signup:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(53, 96, 240, 0.46);
}

/* Logged-in pill with avatar + caret */
.topbar-auth .ta-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  position: relative;
}
.topbar-auth .ta-user:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
}
.topbar-auth .ta-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
  /* In case avatar_url is set we use it as background-image — keep
     the gradient as fallback by not blanking it. */
  background-size: cover;
  background-position: center;
}
.topbar-auth .ta-name {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-auth .ta-caret {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 1px;
  transition: transform .15s;
}
.topbar-auth.is-open .ta-caret { transform: rotate(180deg); }

/* Dropdown menu opening below the user pill. Same dark glass surface
   as .topbar-mobile, smaller scale. Fixed positioning so it stays
   anchored if the page scrolls. */
.topbar-auth-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(11, 16, 32, 0.96);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(10, 20, 40, 0.32);
  display: none;
  z-index: 250;
}
.topbar-auth.is-open .topbar-auth-menu { display: block; }

.topbar-auth-menu a,
.topbar-auth-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 9px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font: 400 13px 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.topbar-auth-menu a:hover,
.topbar-auth-menu button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

/* Email row at the top of the menu — informational, not clickable */
.topbar-auth-menu .ta-menu-email {
  padding: 10px 12px 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
  cursor: default;
  word-break: break-all;
}
.topbar-auth-menu .ta-menu-email:hover { background: transparent; color: rgba(255, 255, 255, 0.55); }

/* Logout — visually distinguished by a top border */
.topbar-auth-menu .ta-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 0;
}

/* Mobile: hide the desktop topbar-auth slot, the mobile dropdown panel
   gets its own copy via topbar.js (mirrors how .credits-chip works). */
@media (max-width: 720px) {
  .topbar-auth { display: none; }
}

/* In the mobile dropdown panel, render auth links inline — full-width
   text rows like the other panel items. */
.topbar-mobile-auth {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.topbar-mobile-auth a,
.topbar-mobile-auth button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font: 400 14px 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.topbar-mobile-auth a:hover,
.topbar-mobile-auth button:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ═════════ Auth-only navigation links ═════════
   Hide nav links marked .auth-only by default. topbar.js adds the
   .is-logged-in class to <body> when /api/v1/users/me confirms a
   live session, at which point the link reveals.

   Used for items that only make sense logged in: Dashboard, possibly
   "My library", etc. The default-hidden state is correct UX — guests
   shouldn't see options they can't use.
   ═══════════════════════════════════════════════ */

.auth-only { display: none; }
body.is-logged-in .auth-only { display: inline-block; }

/* Mobile dropdown panel uses block-level layout for its links, so
   override the default inline-block when inside .topbar-mobile-inner. */
body.is-logged-in .topbar-mobile-inner .auth-only { display: block; }

/* ═════════ Anti-flash for topbar auth slot ═════════
   Without this, the empty .topbar-auth slot renders for ~50–200ms
   while topbar.js is still fetching /users/me, then the Login/Sign up
   pills (or avatar) "pop in". On every page navigation. Looks bad.

   Strategy: hide the slot by default, show only when topbar.js has
   finished its first renderAuthState() pass. The slot is .is-ready
   immediately after either renderDesktop() or renderMobile() runs.

   We use `visibility: hidden` (not display:none) so the slot still
   reserves its width — that prevents layout shift when the pills
   appear. Width is reserved by their normal flex-shrink behaviour
   plus .topbar-auth { gap: 8px } from the auth-page section above.
   ═══════════════════════════════════════════════════════════════════ */

.topbar-auth,
.topbar-mobile-auth {
  visibility: hidden;
}
.topbar-auth.is-ready,
.topbar-mobile-auth.is-ready {
  visibility: visible;
}

/* ═════════ Auth-only Generate button ═════════
   The "GENERATE ✦" pill on the right of the topbar. We hide it from
   guests for the same reason we hide Dashboard: clicking it as a guest
   would just bounce them to /login, which is a dead end. The user
   tapped a CTA expecting an action and got a form — bad UX.

   We have to override the generic auth-only display rules above
   because .btn-generate is `inline-flex` (for the gap between text
   and the ✦ glyph), not `inline-block` or `block`. Without this rule
   the button would render but the gap+icon layout would be wrong.
   ═══════════════════════════════════════════════════════════════════ */

body.is-logged-in .topbar-right .btn-generate.auth-only,
body.is-logged-in .topbar-mobile-actions .btn-generate.auth-only {
  display: inline-flex;
}