/* ============================================================
   PT Pro — iOS Glass design system  (glass.css)
   The single source of truth for theme tokens, glass materials,
   radii, shadows, motion and shared chrome. Load AFTER the
   page's own <style> so shared components resolve consistently:

     <link rel="stylesheet" href="/glass.css">
     <script src="/theme.js"></script>

   Dark is default. Light is html[data-theme="light"]
   (theme.js mirrors body.theme-light for legacy portal pages).
   Pages that are light-only set <html data-theme-lock="light">.
   ============================================================ */

/* ─────────────────────────── tokens ─────────────────────────── */
:root {
  /* type */
  --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'DM Sans', system-ui, sans-serif;
  --display: 'Bebas Neue', var(--sf);
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* radius scale — the only radii pages should use */
  --r-xs: 9px;
  --r-sm: 13px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 100px;

  /* motion */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* brand (theme-independent fills) */
  --lime-fill: #D4FF47;
  --lime-fill-2: #C2F02B;
  --lime-ink: #08080A;

  /* ── dark theme (default) — iOS dark grouped, brand-tinted ── */
  --bg: #08080A;
  --bg2: #121214;
  --bg3: #1A1A1E;
  --bg4: #232328;
  --bg5: #2C2C32;

  --surface: #161618;
  --surface2: #1F1F23;

  /* glass materials */
  --glass-thick: rgba(22, 22, 26, 0.78);
  --glass: rgba(24, 24, 29, 0.60);
  --glass-thin: rgba(255, 255, 255, 0.05);
  --nav-glass: rgba(10, 10, 13, 0.62);
  --glass-rim: rgba(255, 255, 255, 0.08);
  --glass-blur: 24px;
  --glass-blur-thin: 12px;

  /* separators + borders (both naming schemes used in the codebase) */
  --sep: rgba(255, 255, 255, 0.07);
  --sep2: rgba(255, 255, 255, 0.13);
  --brd: rgba(255, 255, 255, 0.07);
  --brd2: rgba(255, 255, 255, 0.13);
  --border: rgba(255, 255, 255, 0.07);
  --border2: rgba(255, 255, 255, 0.13);

  /* text (both naming schemes) */
  --text: #F5F5F7;
  --t2: rgba(235, 235, 245, 0.62);
  --t3: rgba(235, 235, 245, 0.34);
  --text2: rgba(235, 235, 245, 0.62);
  --text3: rgba(235, 235, 245, 0.34);

  /* brand-as-text + tints */
  --lime: #D4FF47;
  --lime2: #C2F02B;
  --lime-dark: #A8D42E;
  --limd: rgba(212, 255, 71, 0.10);
  --limd2: rgba(212, 255, 71, 0.06);
  --lime-dim: rgba(212, 255, 71, 0.10);
  --lime-glow: rgba(212, 255, 71, 0.18);
  --hero-glow: rgba(212, 255, 71, 0.16);

  /* semantic */
  --red: #FF5A52;
  --grn: #30D158;
  --green: #30D158;
  --yellow: #FFD60A;
  --blue: #0A84FF;
  --purple: #BF5AF2;
  --orange: #FF9F0A;

  /* elevation */
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-glass: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--glass-rim);

  /* fields */
  --field: rgba(255, 255, 255, 0.05);
  --field-brd: rgba(255, 255, 255, 0.10);

  /* floating dock (bottom tab bar) — active-tab lens */
  --dock-lens: rgba(255, 255, 255, 0.13);
  --dock-lens-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

/* ── light theme — iOS systemGroupedBackground ── */
html[data-theme="light"],
html[data-theme-lock="light"] {
  --bg: #F2F2F7;
  --bg2: #FFFFFF;
  --bg3: #ECECF1;
  --bg4: #E3E3EA;
  --bg5: #D9D9E1;

  --surface: #FFFFFF;
  --surface2: #F2F2F7;

  --glass-thick: rgba(255, 255, 255, 0.80);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-thin: rgba(255, 255, 255, 0.50);
  --nav-glass: rgba(248, 248, 250, 0.72);
  --glass-rim: rgba(255, 255, 255, 0.65);

  --sep: rgba(60, 60, 67, 0.10);
  --sep2: rgba(60, 60, 67, 0.18);
  --brd: rgba(60, 60, 67, 0.10);
  --brd2: rgba(60, 60, 67, 0.18);
  --border: rgba(60, 60, 67, 0.10);
  --border2: rgba(60, 60, 67, 0.18);

  --text: #1A1A1C;
  --t2: rgba(60, 60, 67, 0.64);
  --t3: rgba(60, 60, 67, 0.38);
  --text2: rgba(60, 60, 67, 0.64);
  --text3: rgba(60, 60, 67, 0.38);

  /* lime darkened so it reads as text on white; fills keep --lime-fill */
  --lime: #5A8A00;
  --lime2: #4F7A00;
  --lime-dark: #427000;
  --limd: rgba(90, 138, 0, 0.10);
  --limd2: rgba(90, 138, 0, 0.06);
  --lime-dim: rgba(90, 138, 0, 0.10);
  --lime-glow: rgba(90, 138, 0, 0.16);
  --hero-glow: rgba(118, 168, 0, 0.14);

  --red: #D70015;
  --grn: #1E8A4C;
  --green: #1E8A4C;
  --yellow: #A87800;
  --blue: #007AFF;
  --purple: #7C3AED;
  --orange: #C2550A;

  --shadow: 0 24px 60px rgba(60, 60, 67, 0.14);
  --shadow-sm: 0 8px 24px rgba(60, 60, 67, 0.10);
  --shadow-glass: 0 16px 40px rgba(60, 60, 67, 0.14), inset 0 1px 0 var(--glass-rim);

  --field: rgba(60, 60, 67, 0.06);
  --field-brd: rgba(60, 60, 67, 0.16);

  --dock-lens: rgba(255, 255, 255, 0.92);
  --dock-lens-shadow: 0 2px 8px rgba(60, 60, 67, 0.18);

  color-scheme: light;
}

/* ─────────────────────── base polish ─────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* accessible focus — lime ring everywhere, no layout shift */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--lime-glow); }

/* ─────────────────── glass materials ─────────────────── */
.glass,
.glass-thick,
.glass-thin {
  border: 0.5px solid var(--sep);
  box-shadow: var(--shadow-glass);
}
.glass {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
}
.glass-thick {
  background: var(--glass-thick);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
}
.glass-thin {
  background: var(--glass-thin);
  backdrop-filter: saturate(160%) blur(var(--glass-blur-thin));
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur-thin));
  box-shadow: inset 0 1px 0 var(--glass-rim);
}

/* card = the workhorse surface */
.glass-card {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border: 0.5px solid var(--sep);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-glass);
}

/* solid fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-card { background: var(--surface); }
  .glass-thick { background: var(--surface); }
  .glass-thin { background: var(--bg3); }
}

/* honor iOS "Reduce Transparency" */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-card, .glass-thick, .glass-thin {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
  }
}

/* ─────────────────── shared chrome ─────────────────── */
/* Frosted top bars — every page's nav resolves to the same material.
   :where() keeps specificity at (0,0,1) and excludes vertical sidebars and
   the portal's bottom tab bar, which use their own materials. */
nav:where(:not(.sidebar)):where(:not(#bottom-tab-bar)), header.topbar, .topbar {
  background: var(--nav-glass);
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border-bottom: 0.5px solid var(--sep);
}

/* Frosted bottom tab bars (portal + dashboard) */
.tabbar, .tab-bar, .bottom-nav {
  background: var(--glass-thick);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-top: 0.5px solid var(--sep);
}

/* Floating liquid-glass dock — iOS-style detached bottom tab bar.
   The capsule floats clear of the screen edges; the active tab sits in
   its own lighter "lens" bubble (--dock-lens). Pages control visibility
   (typically hidden ≥768px). Badges: .dock-badge(.show). */
.glass-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--glass-thick);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 0.5px solid var(--sep2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--glass-rim);
  max-width: calc(100vw - 20px);
  user-select: none;
  -webkit-user-select: none;
  /* pointermove must track a held finger sliding along the bar */
  touch-action: none;
}
.dock-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-width: 58px;
  padding: 8px 10px 7px;
  background: none;
  border: none;
  border-radius: var(--r-pill);
  color: var(--t2);
  font-family: var(--sf);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color .2s, background .25s var(--ease), box-shadow .25s, transform .18s var(--spring);
}
.dock-btn svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.dock-btn:active { transform: scale(0.94); }
.dock-btn.active {
  color: var(--text);
  background: var(--dock-lens);
  box-shadow: var(--dock-lens-shadow), inset 0 1px 0 var(--glass-rim);
}
.dock-badge {
  position: absolute;
  top: 2px;
  right: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: var(--r-pill);
  padding: 0 4px;
  min-width: 15px;
  height: 15px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dock-badge.show { display: flex; }

/* sliding lens (mounted by ptproDockLens in gestures.js): one highlight
   that springs between tabs and chases the finger while pressed */
.dock-lens-el {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--r-pill);
  background: var(--dock-lens);
  box-shadow: var(--dock-lens-shadow), inset 0 1px 0 var(--glass-rim);
  pointer-events: none;
  z-index: 0;
  transition: transform .38s var(--spring), width .3s var(--spring), opacity .2s, box-shadow .25s;
  will-change: transform;
}
/* the glow layer: breathes while held, ripples outward on release.
   Lives on ::after so its animation never fights the JS-driven inline
   transform on the lens itself. */
.dock-lens-el::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(70% 120% at 50% 0%,
    color-mix(in srgb, var(--lime) 26%, transparent), transparent 72%);
  opacity: 0;
  transition: opacity .25s;
}
/* held: snappier tracking, lime bloom, slow breathe under the finger */
.dock-lens-el.pressed {
  transition: transform .18s var(--ease), width .18s var(--ease), opacity .2s, box-shadow .2s;
  box-shadow: var(--dock-lens-shadow), inset 0 1px 0 var(--glass-rim),
    0 0 0 1px color-mix(in srgb, var(--lime) 28%, transparent),
    0 4px 22px color-mix(in srgb, var(--lime) 24%, transparent);
}
.dock-lens-el.pressed::after {
  opacity: .95;
  animation: lensHold 1.5s ease-in-out .3s infinite;
}
@keyframes lensHold {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
/* let go: one soft expanding ring that fades as the lens springs home */
.dock-lens-el.released::after {
  animation: lensRipple .45s var(--ease) forwards;
}
@keyframes lensRipple {
  0% { opacity: .6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}
/* with a live lens the buttons drop their own static highlight and ride above it */
.glass-dock.has-lens .dock-btn, .glass-dock.has-lens .tab-btn { position: relative; z-index: 1; }
.glass-dock.has-lens .dock-btn.active, .glass-dock.has-lens .tab-btn.active {
  background: none;
  box-shadow: none;
}
/* press: the tab dips under the finger while its icon leans in */
.dock-btn.pressing, .tab-btn.pressing {
  transform: scale(0.9) translateY(1px);
  color: var(--text);
}
.dock-btn.pressing svg, .tab-btn.pressing svg {
  transform: scale(1.12);
  transition: transform .18s var(--spring);
}
/* selection: the icon does a little spring pop */
@keyframes dockIconPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.glass-dock .dock-btn.active svg, .glass-dock .tab-btn.active svg {
  animation: dockIconPop .32s var(--spring);
}

/* iOS page-slide when swiping between dock tabs (added by gestures.js) */
@keyframes glassSlideL { from { opacity: .4; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes glassSlideR { from { opacity: .4; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
.slide-in-l { animation: glassSlideL .28s var(--ease); }
.slide-in-r { animation: glassSlideR .28s var(--ease); }

/* segmented glass theme control (sidebar/menu placement) */
.glass-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--field);
  border: 0.5px solid var(--sep);
}
.glass-seg button {
  width: 34px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--r-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  padding: 0;
  transition: background .2s, color .2s;
}
.glass-seg button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.glass-seg button.on { background: var(--lime-fill); color: var(--lime-ink); }

/* installed-app polish — kill tap flashes; no rubber-band chaining when
   running as an installed PWA */
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}
/* pages with a dock use edge-to-edge swipe nav — stop the browser's own
   horizontal history-swipe from hijacking it */
body:has(.glass-dock) { overscroll-behavior-x: none; }

/* Brand wordmark — Bebas, no gradient-clip, lime accent span */
.nlogo {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.04em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
.nlogo span {
  background: none;
  -webkit-text-fill-color: var(--lime);
  color: var(--lime);
  /* brand glow — soft static halo plus a slow breathe */
  text-shadow: 0 0 12px color-mix(in srgb, var(--lime) 45%, transparent),
               0 0 30px color-mix(in srgb, var(--lime) 22%, transparent);
  animation: logoGlow 3.4s ease-in-out infinite;
}
@keyframes logoGlow {
  0%, 100% {
    text-shadow: 0 0 10px color-mix(in srgb, var(--lime) 35%, transparent),
                 0 0 26px color-mix(in srgb, var(--lime) 16%, transparent);
  }
  50% {
    text-shadow: 0 0 16px color-mix(in srgb, var(--lime) 60%, transparent),
                 0 0 42px color-mix(in srgb, var(--lime) 30%, transparent);
  }
}

/* ─────────────────── buttons — 3 variants ───────────────────
   primary  = lime pill fill      (.btn-primary)
   secondary= glass outline pill  (.btn-secondary)
   ghost    = text only           (.btn-ghost)
   Legacy classes are aliased by the per-page adoption pass. */
.btn-primary, .btn-secondary, .btn-ghost {
  font-family: var(--sf);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .18s var(--spring), filter .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-primary {
  background: var(--lime-fill);
  color: var(--lime-ink);
  border: none;
  padding: 12px 24px;
  box-shadow: 0 6px 18px -4px rgba(212, 255, 71, 0.45);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary {
  background: var(--glass-thin);
  backdrop-filter: saturate(160%) blur(var(--glass-blur-thin));
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur-thin));
  color: var(--text);
  border: 0.5px solid var(--sep2);
  padding: 12px 24px;
}
.btn-secondary:hover { border-color: var(--lime); color: var(--lime); }
.btn-ghost {
  background: none;
  border: none;
  color: var(--t2);
  padding: 8px 12px;
  border-radius: var(--r-xs);
}
.btn-ghost:hover { color: var(--text); background: var(--field); }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active { transform: scale(0.96); }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* tactile press on legacy button classes without renaming markup */
button, [class*="btn"], .pbtn, .bd {
  transition: transform .18s var(--spring), background .2s, filter .2s, box-shadow .2s, border-color .2s, color .2s;
}
button:active, [class*="btn"]:active, .pbtn:active, .bd:active { transform: scale(0.96); }

/* ─────────────────── fields ─────────────────── */
.glass-input {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--field-brd);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  color: var(--text);
  font-size: 15px;
  font-family: var(--sf);
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.glass-input::placeholder { color: var(--t3); }
.glass-input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px var(--limd);
}

/* ─────────────────── chips / badges ─────────────────── */
.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--glass-thin);
  backdrop-filter: saturate(160%) blur(var(--glass-blur-thin));
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur-thin));
  border: 0.5px solid var(--sep2);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  box-shadow: inset 0 1px 0 var(--glass-rim);
}

/* ─────────────────── modal / sheet ─────────────────── */
.glass-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
}
.glass-sheet {
  background: var(--glass-thick);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: 0.5px solid var(--sep2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-rim);
}

/* ─────────────────── hairlines ─────────────────── */
.hairline { border-bottom: 0.5px solid var(--sep); }
.hairline-top { border-top: 0.5px solid var(--sep); }

/* ─────────────────── scrollbars (subtle, iOS-like) ─────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--bg5) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 100px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ─────────────────── motion safety ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Mobile top bar for the sidebar pages ─────────────────────
   settings.html / profile.html / clients.html hide .sidebar under
   768px. Without this they have NO navigation on a phone — no back
   button, no dock, no menu. Sits as the first child of .main and
   full-bleeds out of that container's 16px mobile padding.
   Desktop keeps the sidebar, so the bar stays hidden there. */
.mobile-topbar { display: none; }
@media (max-width: 768px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 300;
    margin: -16px -16px 16px;
    padding: calc(env(safe-area-inset-top) + 11px) 14px 11px;
    background: var(--nav-glass);
    backdrop-filter: saturate(180%) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
    border-bottom: 0.5px solid var(--sep);
  }
  .mobile-topbar .mt-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    height: 34px;
    padding: 0 12px 0 8px;
    border: 0.5px solid var(--brd2);
    border-radius: var(--r-pill);
    background: var(--glass-thin);
    color: var(--text);
    font: 600 13px/1 'DM Sans', system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-topbar .mt-back svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
  .mobile-topbar .mt-title {
    flex: 1;
    min-width: 0;
    font: 700 15px/1.2 'DM Sans', system-ui, sans-serif;
    letter-spacing: -0.2px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-topbar .mt-theme {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--brd2);
    border-radius: 50%;
    background: var(--glass-thin);
    color: var(--text2);
    cursor: pointer;
    padding: 0;
  }
  .mobile-topbar .mt-theme svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
  /* The bar already names the page, so the big Bebas title below it is a
     duplicate on phones — drop it and keep the descriptive subtitle. */
  .mobile-topbar ~ .page-header .page-title { display: none; }
  .mobile-topbar ~ .page-header { margin-bottom: 18px; }
}
