/* The app shell. gt7-look.css is imported first: it is the look the app wears, and the rules below are what it overrides. */
@import url("gt7-look.css");
/* -----------------------------------------------------------------------------
 * Edge — GT7 Telemetry — shared design system
 *
 * Tokens + page-shell rules + scrollbar styling shared across every page.
 * Visual language is "digit-edge": navy-dominant surfaces, signature blue
 * #409ed7 accents, sharp 6 px geometry, Inter throughout. Source of
 * truth for the brand tokens lives in
 *   C:/Users/mihae/Documents/NEW Stream Overalys/Banners/design-systems/
 *   digit-edge/colors_and_type.css
 * The design language was originally proven on the Banners > banner-creator
 * tool and is mirrored here so the app and the marketing surfaces feel
 * like the same product.
 *
 * Single-scroll-container rule:
 *   There is exactly ONE scrollbar per page and it lives on <body> — which
 *   puts it at the right edge of the viewport. .gt7-main is NOT a scroll
 *   container. Pages that previously set `overflow:auto` on inner panels
 *   should not — those create "scrollbars in the middle of the window"
 *   which is exactly what the user complained about.
 *
 *   The only sanctioned exception is a self-contained side panel (e.g.
 *   practice.html's drill sidebar) that's side-by-side with main content.
 *   Even those should be styled with .gt7-scroll so the scrollbar matches.
 * -------------------------------------------------------------------------- */

/* Pull Inter from Google so the whole app uses the celeritas-tools-php /
 * digit-edge brand face. Loaded via @import in this stylesheet so we don't
 * have to add a <link> to every HTML page. Display: swap so the page
 * renders in fallback sans-serif while the woff2 streams in.
 *
 * Mirrors the celeritas digit-edge token:
 *   --de-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,
 *                    'Helvetica Neue', Arial, sans-serif;
 * (see celeritas-tools-php/static/css/digit-edge.css). Most pages already
 * pulled in Inter via a per-page <link> so this is largely redundant —
 * keeping the @import here means a deleted/forgotten <link> won't FOUC. */
@import url('./fonts.css');

/* Paint the digit-edge navy before anything else renders. Without this, the
 * browser flashes its default white canvas between tab navigations (each
 * tab is a full page load) before Tailwind's `bg-background-dark` utility
 * kicks in. Setting it here — loaded in <head> before Tailwind — means the
 * very first paint is already the correct color. */
html, body {
  background-color: #09162d;
  color: #ffffff;
}

/* ── Date inputs — app-wide brand-match ──────────────────────────────
 *
 * The native browser date popup can only be styled with
 * `color-scheme: dark` (gives a dark theme but no brand colours, no
 * Inter font, no sharp digit-edge corners). For a fully-branded
 * picker we ship our own — gt7-datepicker.js suppresses the native
 * popup and renders the popup defined below.
 *
 * The native calendar-icon indicator is replaced with our own —
 * white via `filter: invert` so it actually shows on the navy input.
 * Hidden after JS enhancement (.gt7-dp-input) since our popup opens
 * on click of the whole input anyway. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  /* Replace the native black indicator glyph with our own white
   * calendar SVG. The `filter: invert(1) brightness(2)` approach
   * works in most Chromium versions, but Electron 28 has a quirk
   * where the indicator's default rendering uses a paint method
   * that's invisible to CSS filter. Setting background-image is
   * more reliable — it replaces the native icon outright. The
   * SVG is white-stroked at 2 px so it reads cleanly on the navy
   * input background. !important on the colour-affecting properties
   * to defeat any later Tailwind preflight that might land. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  width: 18px;
  height: 18px;
  /* Override the default black glyph that would otherwise still show
   * underneath the background-image in some Chromium builds. */
  color: transparent;
  filter: none !important;
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* Native calendar-picker indicator stays VISIBLE (so the user has a
 * visual cue that the field is a date) with the white-filter from above.
 * `pointer-events: none` makes it click-through — the click passes to
 * the input, whose mousedown handler fires our custom picker rather
 * than the native one. The cursor on the input is already set by the
 * page's input class (text/pointer), so the icon doesn't need its own. */
input.gt7-dp-input::-webkit-calendar-picker-indicator {
  pointer-events: none;
}

/* Inline edit fields (the "dd / mm / yyyy" placeholder text inside
 * the input). Slate-muted so empty state matches other inputs. */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
  color: rgba(226, 232, 240, 0.95);
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text {
  color: rgba(148, 163, 184, 0.6);
  padding: 0 2px;
}

/* ── Custom date picker popup (driven by gt7-datepicker.js) ───────── */
.gt7-dp-popup {
  background: rgba(9, 22, 45, 0.98);
  border: 1px solid rgba(64, 158, 215, 0.4);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(64, 158, 215, 0.18), 0 0 30px rgba(64, 158, 215, 0.18);
  min-width: 268px;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: rgba(226, 232, 240, 0.92);
  user-select: none;
  -webkit-user-select: none;
}
.gt7-dp-header {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(64, 158, 215, 0.16);
  margin-bottom: 8px;
}
.gt7-dp-nav {
  background: transparent;
  border: 1px solid rgba(64, 158, 215, 0.28);
  border-radius: 6px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(226, 232, 240, 0.85);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  padding: 0;
}
.gt7-dp-nav:hover {
  background: rgba(64, 158, 215, 0.18);
  border-color: rgba(64, 158, 215, 0.55);
  color: #ffffff;
}
.gt7-dp-nav .material-icons { font-size: 18px; line-height: 1; }
.gt7-dp-label {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
}
.gt7-dp-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.gt7-dp-dow span {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.7);
  padding: 4px 0;
}
.gt7-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.gt7-dp-day {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.gt7-dp-day:hover {
  background: rgba(64, 158, 215, 0.18);
  border-color: rgba(64, 158, 215, 0.5);
  color: #ffffff;
}
.gt7-dp-day.is-other {
  color: rgba(148, 163, 184, 0.32);
}
.gt7-dp-day.is-today {
  border-color: rgba(64, 158, 215, 0.55);
  font-weight: 700;
}
.gt7-dp-day.is-selected {
  background: #409ed7;
  border-color: #409ed7;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(64, 158, 215, 0.4);
}
.gt7-dp-day.is-selected:hover {
  background: #5dbdf0;
  border-color: #5dbdf0;
}
.gt7-dp-footer {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(64, 158, 215, 0.16);
  margin-top: 8px;
}
.gt7-dp-action {
  background: transparent;
  border: 1px solid rgba(64, 158, 215, 0.28);
  border-radius: 6px;
  padding: 5px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.85);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gt7-dp-action:hover {
  background: rgba(64, 158, 215, 0.18);
  border-color: rgba(64, 158, 215, 0.55);
  color: #ffffff;
}
.gt7-dp-action.gt7-dp-action--primary {
  background: #409ed7;
  border-color: #409ed7;
  color: #ffffff;
}
.gt7-dp-action.gt7-dp-action--primary:hover {
  background: #5dbdf0;
  border-color: #5dbdf0;
}

/* App-wide Inter — matches celeritas-tools-php's `--de-font-sans` token
 * exactly. Tailwind already has Inter configured per page via fontFamily,
 * but this body-level rule with !important guarantees it wins even when
 * a child has a stale Montserrat declaration that hasn't been migrated. */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cross-document view transitions (Chromium 111+, which Electron uses).
 * The browser cross-fades between page navigations so the visible "tabs
 * jumping around" effect from each full page load disappears — even
 * though we're not a SPA, the user perceives smooth transitions. */
@view-transition {
  navigation: auto;
}

/* Reserve the sidebar nav's stacking position across the transition so it
 * doesn't briefly reflow / shift on each navigation. Same idea for the
 * sticky page header — both elements visually stay put while only the
 * main content cross-fades. */
nav.fixed { view-transition-name: gt7-sidebar; }
.gt7-titlebar { view-transition-name: gt7-titlebar; }

/* Bake in critical sidebar link styles so they don't pop in once Tailwind
 * loads (Tailwind CDN is async — there's a 50–100 ms gap on slow loads
 * where utility classes like `flex flex-col items-center` aren't applied
 * yet, which is the "moving" effect you see). These match the existing
 * Tailwind output so nothing changes once Tailwind takes over. */
nav.fixed { display: flex; flex-direction: column; align-items: center; }
nav.fixed > div.flex.flex-col { display: flex; flex-direction: column; align-items: center; }
/* Fixed width on every sidebar link so the ACTIVE pill (bg-primary/10 rounded-lg
   on the current page's link) is the SAME size on every tab — without this it
   sized to each label, so "FAQ" got a small pill and "RECORDING"/"TELEMETRY" a
   wide one. */
nav.fixed a { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0.5rem; width: 5rem; box-sizing: border-box; color: #64748b; text-decoration: none; }
nav.fixed a span:last-child { white-space: nowrap; }

:root {
  /* digit-edge brand colours (from colors_and_type.css). The Tailwind
   * config in each HTML page maps `primary` and `background-dark` to
   * these same hex values so utilities like `bg-primary/20` match. */
  --gt7-bg:               #09162d;   /* page background — digit-edge navy */
  --gt7-bg-elev-1:        #0d1c38;   /* card on page */
  --gt7-bg-elev-2:        #112344;   /* card on card */
  --gt7-bg-inset:         #09162d;   /* sunken — form inputs, terminal-like */
  --gt7-bg-raised:        rgba(13, 28, 56, 0.7);
  --gt7-primary:          #409ed7;   /* signature digit-edge blue */
  --gt7-primary-soft:     rgba(64, 158, 215, 0.12);
  --gt7-border:           rgba(255, 255, 255, 0.08);
  --gt7-border-strong:    rgba(64, 158, 215, 0.4);
  --gt7-text:             #ffffff;
  --gt7-text-dim:         #cbd5e1;
  --gt7-text-faint:       #64748b;
  --gt7-radius:           6px;        /* digit-edge: sharp, geometric */
  --gt7-radius-card:      8px;
  --gt7-nav-w:            6rem;
  --gt7-header-h:         3.5rem;
  --gt7-page-pad:         1.25rem;
  --gt7-scrollbar:        rgba(64, 158, 215, 0.35);
  --gt7-scrollbar-hover:  rgba(64, 158, 215, 0.6);
}

/* -----------------------------------------------------------------------------
 * Themed scrollbars — matches the blue/dark palette instead of default OS grey.
 *
 * Applied globally so every scrollable element (body, aside, modals, tables)
 * gets the same treatment. Keeps the bar narrow and translucent so it doesn't
 * draw attention.
 * -------------------------------------------------------------------------- */

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--gt7-scrollbar);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gt7-scrollbar-hover);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Firefox */
* {
  scrollbar-color: var(--gt7-scrollbar) transparent;
  scrollbar-width: thin;
}

/* -----------------------------------------------------------------------------
 * Page shell — uses the natural document flow so body = scroll container.
 *
 * html/body: no overflow rules that would trap scroll inside a child. The
 * existing per-page `body { overflow-x: hidden }` stays (prevents accidental
 * horizontal scroll on narrow viewports) — we only touch overflow-y.
 * -------------------------------------------------------------------------- */

html {
  overflow-y: auto; /* the ROOT scrolls → scrollbar on window right edge */
}
/* body must NOT be a scroll container. It had overflow-y:auto too, which made
 * it one — and position:sticky attaches to the nearest scroll container, so
 * every sticky page header attached to body… which never actually scrolls
 * (the root does, body just grows). Net effect: the headers scrolled away.
 * overflow-y:visible + the per-page overflow-x:clip keeps horizontal spill
 * cropped without creating a scroll context, so sticky binds to the viewport. */
body {
  overflow-y: visible;
}

/* -----------------------------------------------------------------------------
 * .gt7-shell — outer column (right of the fixed sidebar)
 *
 * All pages put their header + main inside a flex column that starts at the
 * left edge of the content area (past the 96px sidebar). This class
 * replicates the hand-written `ml-24 flex flex-col min-h-screen` combo so
 * pages that opt in get it in one token.
 * -------------------------------------------------------------------------- */

.gt7-shell {
  margin-left: var(--gt7-nav-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -----------------------------------------------------------------------------
 * .gt7-main — standard page content area
 *
 * Before: had max-width:1400px + margin:auto → content centered with empty
 * gutters on wide screens AND the scrollbar appeared in the middle of the
 * window when overflow was set. Both fixed by letting main fill the width
 * and deferring scrolling to <body>.
 *
 * We still keep flex-column layout so `.gt7-fill` children expand to
 * remaining vertical space on pages like recording.
 * -------------------------------------------------------------------------- */

.gt7-main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--gt7-page-pad);
  gap: 0.75rem;
}

/* .gt7-main--scroll — body-scrolled pages (settings, overlays, admin, …).
 * NOT a no-op: the base .gt7-main is `flex: 1 1 0`, so on a long page the
 * flex parent (the min-h-screen column that also holds the sticky header)
 * stays exactly one viewport tall while the content OVERFLOWS it. A sticky
 * element can never leave its containing block — so after ~one screen of
 * scrolling the parent's bottom edge dragged the page title away (the
 * "Settings disappears when I scroll" report). Growing main with its
 * content keeps the column as tall as the page, and the header sticks for
 * the full scroll. (The FAQ had already patched this for itself inline.) */
.gt7-main--scroll {
  flex: 1 0 auto;
}

/* .gt7-main--wide used to turn off the max-width cap; now main is always full
 * width so this is also a no-op. Left as a marker class. */
.gt7-main--wide {
  /* intentionally empty */
}

/* -----------------------------------------------------------------------------
 * .gt7-fill — child that takes the remaining vertical space
 *
 * For pages with a main content pane (recording's map, dashboard panels)
 * that should stretch to fit the viewport instead of pegging to a content
 * height. Uses flex:1 + min-height:0 so it plays nicely inside .gt7-main.
 * -------------------------------------------------------------------------- */

.gt7-fill {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* For pages that genuinely need a scrollable inner panel (practice's sticky
 * drill sidebar), attach this class so the scrollbar matches the theme. */
.gt7-scroll {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* -----------------------------------------------------------------------------
 * Cards / sections — one look across pages.
 * -------------------------------------------------------------------------- */

.gt7-card {
  background: var(--gt7-bg-raised);
  border: 1px solid var(--gt7-border);
  border-radius: var(--gt7-radius);
  padding: 1rem 1.25rem;
}

.gt7-card--accent {
  border-left: 3px solid var(--gt7-primary);
}

.gt7-card-title {
  margin: 0 0 0.75rem 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gt7-text-dim);
  border-bottom: 1px solid var(--gt7-border);
  padding-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------------
 * digit-edge utility classes
 *
 * Mirrors the patterns used by the banner-creator marketing tool so the
 * app and the marketing surfaces feel like the same product. Use these
 * for new UI work; existing Tailwind utility-based markup keeps working
 * unchanged because we only changed the colour TOKENS, not the classes.
 * -------------------------------------------------------------------------- */

/* Card with the brand-blue accent rail on the left, mirroring the Tires +
 * Telemetry — digit-edge overlay. Padding 18 px / 20 px is the rhythm the
 * banner-creator uses on its `.gen-card`. */
.de-card {
  position: relative;
  background: var(--gt7-bg-elev-1);
  border: 1px solid var(--gt7-border);
  border-radius: var(--gt7-radius-card);
  padding: 18px 20px;
}
.de-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gt7-primary);
  border-radius: var(--gt7-radius-card) 0 0 var(--gt7-radius-card);
}

/* Section heading — small, uppercase, wide-tracked. The visual signature
 * of the banner-creator side-panels and our admin section heads. */
.de-heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--gt7-text-dim);
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
}

/* Primary CTA — solid brand blue with navy text. This is the banner
 * creator's main "Generate" button styling. */
.de-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  background: var(--gt7-primary);
  color: var(--gt7-bg);
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  box-shadow: 0 4px 12px rgba(64, 158, 215, 0.25);
}
.de-btn-primary:hover { filter: brightness(1.1); box-shadow: 0 6px 18px rgba(64, 158, 215, 0.45); }
.de-btn-primary:active { transform: translateY(1px); }
.de-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Ghost button — for secondary actions next to a primary. */
.de-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--gt7-border);
  border-radius: 4px;
  color: var(--gt7-text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.de-btn-ghost:hover { border-color: var(--gt7-primary); color: var(--gt7-primary); }

/* Form input — the banner-creator's deep-inset, blue-focus look. Apply
 * to <input>, <select>, <textarea> by adding the class, OR opt-in for
 * the whole form via a `.de-form` wrapper. */
.de-input,
.de-form input[type="text"],
.de-form input[type="email"],
.de-form input[type="password"],
.de-form input[type="number"],
.de-form input[type="search"],
.de-form input[type="date"],
.de-form select,
.de-form textarea {
  padding: 9px 12px;
  background: var(--gt7-bg-inset);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gt7-text);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.de-input::placeholder, .de-form input::placeholder, .de-form textarea::placeholder {
  color: var(--gt7-text-faint);
}
.de-input:focus,
.de-form input:focus,
.de-form select:focus,
.de-form textarea:focus {
  outline: none;
  border-color: var(--gt7-primary);
  box-shadow: 0 0 0 1px var(--gt7-primary);
}

/* Highlight — glowing blue underline behind a span of text. Used in the
 * banner-creator on hero phrases like "GENERATE". */
.de-hl {
  color: var(--gt7-primary);
  position: relative;
  display: inline-block;
}
.de-hl::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--gt7-primary);
  box-shadow: 0 0 14px rgba(64, 158, 215, 0.7);
}

/* -----------------------------------------------------------------------------
 * Sticky tab strip (admin, telemetry).
 *
 * Now that body scrolls (not main), sticky works naturally: top: 0 sticks
 * the strip to the viewport. No z-index wars needed.
 * -------------------------------------------------------------------------- */

.gt7-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 0.25rem;
  padding: 0 1.5rem;
  background: rgba(16, 23, 41, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gt7-border);
  flex-shrink: 0;
  overflow-x: auto;
}

.gt7-tab {
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  font-size: 13px;
  color: var(--gt7-text-dim);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

.gt7-tab:hover { color: var(--gt7-text); }

.gt7-tab.active {
  color: var(--gt7-primary);
  border-bottom-color: var(--gt7-primary);
}

/* -----------------------------------------------------------------------------
 * Toolbars + tables + pills (unchanged from before).
 * -------------------------------------------------------------------------- */

.gt7-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
}

.gt7-toolbar > .gt7-toolbar-spacer { flex: 1; }

/* One table, everywhere.
 *
 * This is the Library's table, and now it is also Leaderboard's, Telemetry's
 * and every table on the Admin page. Those last fourteen used to carry a copy
 * of these rules in admin.html that had drifted a shade off on four counts —
 * a slightly brighter hairline, a dimmer header, off-white cells instead of
 * white, and a grey hover where every other table in the app goes blue. Close
 * enough that nobody could name the difference, far enough that the pages did
 * not look like one app.
 *
 * The Admin tables are matched by element rather than by class, deliberately:
 * there is no class to remember and none to forget, so a table added to a
 * panel tomorrow looks like the others because it is a table in a panel. The
 * BoP grid of updates and classes is one of them too (2026-10-14: it had
 * opted out, and read as a loose grid with no header).
 */
.gt7-table,
.admin-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.gt7-table th,
.gt7-table td,
.admin-panel table th,
.admin-panel table td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gt7-table th,
.admin-panel table th {
  color: var(--gt7-text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

/* The header band. It lived in library/index.html and telemetry/index.html
   as two identical copies of the same three lines, which is why the
   Leaderboard never had it. */
.gt7-table thead th {
  background: rgba(148, 163, 184, 0.06);
}

/* The header band. It lived in library.html and telemetry.html as two
   identical copies of the same three lines, which is why the Leaderboard and
   the Admin never had it. */
.gt7-table thead th,
.admin-panel table thead th {
  background: rgba(148, 163, 184, 0.06);
}

.gt7-table td,
.admin-panel table td { color: var(--gt7-text); }

.gt7-table tbody tr:hover td,
.admin-panel table tbody tr:hover td {
  background: rgba(29, 133, 246, 0.06);
}

/* A row the page has picked out — the one being compared, the one being
   edited. Stronger than hover so it still reads while the cursor is
   somewhere else. */
.gt7-table tbody tr.selected td,
.admin-panel table tbody tr.selected td {
  background: rgba(64, 158, 215, 0.1);
}

.gt7-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
  background-color: var(--gt7-primary-soft);
}

.gt7-main > :first-child { margin-top: 0; }

/* -----------------------------------------------------------------------------
 * Custom title bar (Electron only)
 *
 * Injected by static/js/gt7-titlebar.js when running inside the Electron main
 * window. Lives above every other chrome on the page (sidebar, header). The
 * empty middle area is draggable; everything else isn't, so clicks on the
 * logo + buttons register normally.
 * -------------------------------------------------------------------------- */

:root {
  /* 0 now: the window controls (min/max/close) live INSIDE the page header next
     to the connection badge (see gt7-titlebar.js), so there's no separate
     title-bar strip to reserve space for. Every offset rule below reads this var,
     so 0 collapses them all and the header sits flush at the very top. */
  --gt7-titlebar-h: 0px;
}

/* Do NOT use padding-top on <body> here — combined with the Tailwind
 * `min-h-screen` on the `.ml-24` wrapper that every page uses, you get
 * 100vh + 36px of total content height and an equal overflow of empty
 * black below the main area. Instead we push the wrapper itself down and
 * subtract the title bar height from its minimum, so the content sits
 * under the title bar and ends exactly at the window's bottom edge.
 */

html.gt7-in-electron .ml-24 {
  margin-top: var(--gt7-titlebar-h) !important;
  min-height: calc(100vh - var(--gt7-titlebar-h)) !important;
}

/* Special case: pages using h-screen (recording, telemetry) need the full
 * height overridden too. Tailwind's `h-screen { height: 100vh }` loads
 * after this file (injected at runtime by the CDN script) so we use
 * !important to win regardless of source order. */
html.gt7-in-electron .ml-24.h-screen {
  height: calc(100vh - var(--gt7-titlebar-h)) !important;
}

/* For pages where .ml-24 is itself the scroll container (h-screen +
 * overflow-hidden — recording.html), the wrapper is already shifted down
 * by margin-top, so sticky children inside should stick at top:0 of the
 * wrapper (= viewport y=36), NOT top:36 of the wrapper (= viewport y=72).
 * Override our general `.sticky.top-0` offset rule in that case. */
html.gt7-in-electron .ml-24.h-screen > header.sticky,
html.gt7-in-electron .ml-24.h-screen > .sticky.top-0 {
  top: 0 !important;
}

html.gt7-in-electron .gt7-shell {
  margin-top: var(--gt7-titlebar-h) !important;
  min-height: calc(100vh - var(--gt7-titlebar-h)) !important;
}

html.gt7-in-electron nav.fixed {
  top: var(--gt7-titlebar-h) !important;
  height: calc(100vh - var(--gt7-titlebar-h)) !important;
}

/* macOS: keep the top-left corner of the sidebar clear of the traffic lights.
 *
 * The window is `titleBarStyle: 'hiddenInset'` there, so the page fills the
 * frame and the system paints close/minimise/zoom over the top-left — inside
 * the 96px sidebar column, around y=12..32. The nav centres its links, so on a
 * tall window they sit far below and nothing collides; squash the window
 * towards its 600px minimum and the group runs out of room, rides up to the
 * padding edge, and Home lands under the buttons. Reserving the strip costs
 * nothing at the heights where the links were centred anyway. */
html.gt7-mac nav.fixed {
  padding-top: 44px;
}

/* Sidebar shouldn't lose nav items (especially LOG OUT) on short windows.
 * Make it scrollable internally — its own scrollbar matches the global
 * theme via the shared scrollbar styling above. Combined with tighter
 * vertical spacing on the nav links (gap reduced from 1.25rem to 0.5rem,
 * padding p-2 → p-1.5 on each link via JS-injected button + CSS below),
 * the LOG OUT button stays in view at common viewport heights. */
nav.fixed.h-full,
nav.fixed[class*="w-24"] {
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide the scrollbar visually — it's still functional, just doesn't
   * steal pixels from the already narrow 96 px column. */
  scrollbar-width: none;
}
nav.fixed.h-full::-webkit-scrollbar,
nav.fixed[class*="w-24"]::-webkit-scrollbar {
  display: none;
}

/* Tighten the nav link spacing so all 8 items + LOG OUT fit on a 720 p
 * Electron window without scrolling. Targets the inner flex column the
 * pages use (`<div class="flex flex-col gap-5">`) — overrides the gap. */
nav.fixed > div.flex.flex-col.gap-5 {
  gap: 0.5rem !important;
}
nav.fixed > div.flex.flex-col.gap-5 > a,
#gt7-logout-btn {
  padding: 0.375rem 0.5rem !important;
}

/* The website reuses this shell and adds its own items to the rail (Sign out,
 * Get the app, Premium). Two things went wrong there: a label wider than the
 * 5 rem link was clipped by the rail's overflow-x:hidden ("ET THE APP"), and
 * a bottom group positioned absolutely rode up over FAQ on shorter windows.
 * Make the rail tolerant of extra items instead of assuming eight + Log out:
 * labels may wrap onto two lines, and anything placed absolutely inside the
 * rail becomes a normal flex child pushed to the bottom, where it cannot
 * overlap the scrolling links above it. */
nav.fixed a span:last-child {
  white-space: normal;
  text-align: center;
  line-height: 1.1;
  max-width: 5.5rem;
  overflow-wrap: anywhere;
}
nav.fixed > .absolute,
nav.fixed > [style*="position: absolute"],
nav.fixed > [style*="position:absolute"] {
  position: static !important;
  margin-top: auto;
  flex: 0 0 auto;
}
/* The links group must NEVER shrink. The website's shim appends its own
 * group (Sign out / Get the app / Premium) below the links and then sets
 * min-height:0 + flex-shrink:1 on the links group inline; on a short window
 * the links spill out of the squeezed group and the group below paints over
 * FAQ. !important beats those inline styles. With the links at their full
 * height, the rail's overflow-y:auto takes over and scrolls instead. */
nav.fixed > div.flex.flex-col { flex: 1 0 auto !important; min-height: max-content !important; }
nav.fixed > :last-child { padding-bottom: 0.5rem; }

/* Every sticky chrome element (page header, internal tab strips on admin +
 * telemetry) needs to sit below the 36 px custom title bar. Tailwind's
 * `top-0` utility has the same specificity as `header.sticky` and can win
 * depending on stylesheet load order (Tailwind is injected at runtime by
 * its CDN script, AFTER this file), so the `!important` below is the
 * clean way to pin the shift regardless of ordering.
 *
 * The broad `.sticky.top-0` catches any ad-hoc sticky div a page author
 * adds later without us having to touch this file again. */
html.gt7-in-electron .gt7-header,
html.gt7-in-electron .gt7-tabs,
html.gt7-in-electron header.sticky,
html.gt7-in-electron .sticky.top-0,
html.gt7-in-electron [class*="sticky"][class*="top-0"] {
  top: var(--gt7-titlebar-h) !important;
}

.gt7-titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--gt7-titlebar-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: #0b1120;          /* slightly darker than the page so it reads
                                   as a distinct strip above the content */
  border-bottom: 1px solid var(--gt7-border);
  color: var(--gt7-text);
  font-family: Inter, system-ui, sans-serif;
  user-select: none;
  -webkit-app-region: drag;     /* whole bar draggable by default */
}

.gt7-titlebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  -webkit-app-region: no-drag;  /* so right-click-context etc. still work */
}

.gt7-titlebar-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.gt7-titlebar-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--gt7-text-dim);
  letter-spacing: 0.02em;
}

.gt7-titlebar-drag {
  flex: 1;
  height: 100%;
  -webkit-app-region: drag;
}

.gt7-titlebar-controls {
  display: flex;
  height: 100%;
  -webkit-app-region: no-drag;
}

.gt7-titlebar-btn {
  width: 46px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--gt7-text-dim);
  cursor: pointer;
  padding: 0;
  /* Match the hover feel of the rest of the app — soft primary tint, no
   * hard border or shadow, instant transition. */
  transition: background-color 0.12s ease, color 0.12s ease;
}

.gt7-titlebar-btn:hover {
  background: var(--gt7-primary-soft);
  color: var(--gt7-text);
}

.gt7-titlebar-btn:active {
  background: rgba(29, 133, 246, 0.22);
}

/* Close button gets the app's chart-red hover tint — standard Windows
 * convention, adapted to our palette. */
.gt7-titlebar-close:hover {
  background: rgba(239, 67, 67, 0.85);
  color: #fff;
}

.gt7-titlebar-close:active {
  background: rgba(239, 67, 67, 1);
}

.gt7-titlebar-btn svg {
  pointer-events: none;         /* so the button, not the svg, gets the click */
}

/* ── In-header window controls (Electron) ────────────────────────────────────
   The min/max/close buttons now live INSIDE each page's sticky header, appended
   next to the connection badge by gt7-titlebar.js — so the window chrome reads as
   part of the frame, not a separate strip. The header itself becomes the drag
   region (so the user can still move the frameless window by grabbing an empty
   part of it); every interactive child opts out with no-drag. Only applied inside
   Electron (html.gt7-in-electron) so the plain-browser dev view is unaffected. */
html.gt7-in-electron header.sticky { -webkit-app-region: drag; }
html.gt7-in-electron header.sticky a,
html.gt7-in-electron header.sticky button,
html.gt7-in-electron header.sticky input,
html.gt7-in-electron header.sticky select,
html.gt7-in-electron header.sticky textarea,
html.gt7-in-electron header.sticky label,
html.gt7-in-electron header.sticky .badge,
html.gt7-in-electron header.sticky .cursor-pointer,
html.gt7-in-electron header.sticky [role="tab"],
html.gt7-in-electron header.sticky [role="tablist"],
html.gt7-in-electron header.sticky .gt7-win-controls {
  -webkit-app-region: no-drag;
}

/* Tight right-hand group: [connection badge][min][max][close], kept together so
   the badge never strands in the middle of a justify-between header. */
.gt7-win-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}
.gt7-win-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}
.gt7-win-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(203, 213, 225, 0.85);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.gt7-win-btn:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.gt7-win-btn:active { background: rgba(255, 255, 255, 0.16); }
.gt7-win-close:hover { background: #e11d2a; color: #fff; }
.gt7-win-close:active { background: #b91c24; color: #fff; }
.gt7-win-btn svg { pointer-events: none; display: block; }

/* Fallback when a page somehow has no header to anchor into — pin to the
   top-right corner so the controls are never lost. */
.gt7-win-controls-floating {
  position: fixed;
  top: 5px;
  right: 7px;
  z-index: 120;
  background: rgba(13, 28, 56, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px;
}

/* Admin tab-bar mount: the controls sit at the right end of the .gt7-tabs bar,
   inline with the tabs (so they read as the SAME frame controls as every other
   page — not a floating box). `position: sticky; right: 0` keeps them pinned to
   the visible right edge even if the tabs overflow-scroll on a narrow window. */
.gt7-win-controls-in-tabs {
  margin-left: auto;
  position: sticky;
  right: 0;
  align-self: center;
  background: rgba(16, 23, 41, 0.95);
  padding-left: 8px;
}
/* In Electron, the admin tab bar doubles as the window drag handle (its empty
   area moves the window) while the tabs + controls stay clickable. */
html.gt7-in-electron .gt7-tabs { -webkit-app-region: drag; }
html.gt7-in-electron .gt7-tabs button,
html.gt7-in-electron .gt7-tabs a,
html.gt7-in-electron .gt7-tabs input,
html.gt7-in-electron .gt7-tabs select,
html.gt7-in-electron .gt7-tabs .gt7-win-controls { -webkit-app-region: no-drag; }

/* -----------------------------------------------------------------------------
 * Mobile navigation — phones / narrow windows (≤ 768px)
 *
 * Every page shares the same fixed LEFT sidebar (nav.fixed.top-0.left-0,
 * 96px wide) with the content wrapper offset by .ml-24. On a phone that
 * sidebar eats a quarter of the screen, so below 768px it becomes a
 * BOTTOM tab bar (icons + tiny labels, horizontally scrollable if it
 * ever overflows) and the content wrapper drops its left margin and
 * gains bottom padding so nothing hides behind the bar.
 *
 * !important throughout: the Tailwind CDN injects its utilities at
 * runtime AFTER this stylesheet, so plain rules would lose the tie.
 * Added for the Traces Phone companion app; also improves any narrow
 * desktop window.
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body > nav.fixed.top-0.left-0 {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 62px !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 2px !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(64, 158, 215, 0.25) !important;
    background: #09162d !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  body > nav.fixed.top-0.left-0::-webkit-scrollbar { display: none; }
  body > nav.fixed.top-0.left-0 > div {
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100%;
    min-width: max-content;
  }
  body > nav.fixed.top-0.left-0 a {
    padding: 6px 9px !important;
    flex-shrink: 0;
  }
  body > nav.fixed.top-0.left-0 a .material-icons { font-size: 24px; }
  /* The wrapper next to the nav loses the sidebar offset and reserves
     space for the bottom bar instead. */
  body > div.ml-24 {
    margin-left: 0 !important;
    padding-bottom: 62px;
  }
}

/* --------------------------------------------------------------------------
 * gt7-mobile-fixes - phones / narrow windows (<= 768px), 2026-08-29.
 * Measured at 390x844 before writing anything; each rule names the failure
 * it removes. !important for the same reason as the bottom-bar block above:
 * the Tailwind CDN injects its utilities AFTER this sheet.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* TELEMETRY HEADER. The inner row is h-14 (fixed 56px) + flex-wrap: the
     wrapped tab rows overflow the box and paint over the content below.
     Let the header grow, and keep the tabs on ONE scrollable row. */
  #tev-tabs-header > div {
    height: auto !important;
    min-height: 3.5rem;
    padding: 6px 10px !important;
    row-gap: 4px !important;
  }
  #tev-tabs-header .flex.items-center.gap-4 {
    min-width: 0;
    flex: 1 1 auto;
  }
  #tev-tabs-header .flex.items-center.gap-1.flex-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #tev-tabs-header .flex.items-center.gap-1.flex-wrap::-webkit-scrollbar { display: none; }
  #tev-tabs-header .tev-top-tab { flex-shrink: 0; }

  /* LOADED / REFERENCE bar: the desktop overflow:hidden clip (there to kill
     a scrollbar-gutter artefact) hides half the row on a phone. Scroll it,
     without showing a bar. */
  .tev-session-info-grid {
    overflow-x: auto !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .tev-session-info-grid::-webkit-scrollbar { display: none; }



  /* BOTTOM BAR: 8 items at 9px side-padding cut "Practice" clean off with
     nothing hinting at more. Tighter padding fits more of the strip; the
     scroll stays for whatever still does not. */
  body > nav.fixed.top-0.left-0 a { padding: 6px 6px !important; }
  body > nav.fixed.top-0.left-0 a span:last-child { font-size: 10px !important; }

  /* Every page used to end a different distance above the bottom bar -
     one uniform small gap instead (user, 2026-08-31). */
  body > div.ml-24 { padding-bottom: 72px !important; }
  .gt7-main { padding-bottom: 10px !important; }
  .gt7-main > :last-child, .gt7-main section:last-child { margin-bottom: 0 !important; }
}



/* --------------------------------------------------------------------------
 * gt7-mobile-v2 (<= 768px), 2026-08-30.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {


  /* TELEMETRY TABS: the strip becomes a dropdown (markup + logic in
     telemetry.html; this only swaps which control is visible). */
  #tev-tabs-header .flex.items-center.gap-1.flex-wrap { display: none !important; }
  /* !important because the base display:none is declared LATER in this
     sheet (source order would otherwise win over the media query). */
  #tev-tab-select-wrap { display: block !important; }

  /* TELEMETRY (data) TAB: stack the cockpit. Sidebar first, then every
     channel full width; the tab panel scrolls vertically. */
  #tev-tab-data { overflow-y: auto !important; overflow-x: hidden !important; }
  #tev-content {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  #tev-content > aside.tev-data-sidebar {
    width: 100% !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(64, 158, 215, 0.2);
  }
  #tev-content > *:not(aside) {
    height: auto !important;
    overflow: visible !important;
    min-width: 0;
  }
}
#tev-tab-select-wrap { display: none; position: relative; min-width: 0; }
/* The same swap above 768px, decided by measurement rather than width: a
   narrow desktop window (800px, say) put "Coach" under the title-bar
   buttons long before the phone breakpoint. telemetry.html sets the class
   whenever title + strip + the right-hand cluster would not fit. */
#tev-tabs-header.tev-tabs-compact .flex.items-center.gap-1.flex-wrap { display: none !important; }
#tev-tabs-header.tev-tabs-compact #tev-tab-select-wrap { display: block !important; }
#tev-tab-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(64, 158, 215, 0.35);
  background: rgba(64, 158, 215, 0.12);
  color: #5dbdf0;
  font: 600 13px Inter, system-ui, sans-serif;
  cursor: pointer;
}
#tev-tab-select .material-icons { font-size: 18px; }
#tev-tab-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 180px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #10213e;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
#tev-tab-select-menu.hidden { display: none; }
.tev-tab-select-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #e2e8f0;
  font: 600 13px Inter, system-ui, sans-serif;
  cursor: pointer;
}
.tev-tab-select-item:hover { background: rgba(255, 255, 255, 0.07); }
.tev-tab-select-item.is-active { color: #5dbdf0; background: rgba(64, 158, 215, 0.12); }

/* --------------------------------------------------------------------------
 * gt7-mobile-v3 (<= 768px), 2026-08-30 - the user's phone review, applied.
 * The bottom tab bar STAYS (the drawer was built and reverted same day).
 * The library table keeps its desktop look; the flag column is the one
 * thing pinned, per the user - the name is too wide to pin cleanly.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* APP HEADERS wear the website's navbar clothes: floating rounded glass,
     bell and connection badge riding inside. Same values as .dg-nav on the
     site (hsla white glass + blur(10px), 13px radius). */
  body > div.ml-24 > header,
  #tev-tabs-header {
    position: sticky;
    top: 6px;
    z-index: 45;
    margin: 6px 6px 0 !important;
    border-radius: 13px;
    background: hsla(0, 0%, 100%, 0.14) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 0 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }

  /* LIBRARY: full screen - no side margins - and only the flag pinned. */
  .gt7-main:has(.tev-sessions-section) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .tev-sessions-section:has(#lib-session-list-tbody) thead th:nth-child(3),
  #lib-session-list-tbody td:nth-child(3) {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #09162d;
  }
  .tev-sessions-section:has(#lib-session-list-tbody) thead th:nth-child(3) { background: #0d1c38; }

  /* FILTERS: one label column, every control the same width - instead of
     each field starting wherever its label happened to end. Groups without
     a label (Apply / Clear / Import) stay a button row. */
  .tev-sessions-filters > div:has(> label) {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .tev-sessions-filters > div:has(> label) > .input,
  .tev-sessions-filters > div:has(> label) > input,
  .tev-sessions-filters > div:has(> label) > button {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* SEGMENTS strip: title row on top, the numbers using the full width. */
  #tev-data-segment-deltas-bar { flex-wrap: wrap; row-gap: 8px; }
  #tev-data-segment-deltas-label { order: 0; border-right: 0 !important; }
  #tev-data-segment-deltas-bar > div[role="group"] { order: 1; margin-left: auto; }
  #tev-data-segment-deltas-pills {
    order: 2;
    flex-basis: 100%;
    justify-content: flex-start !important;
  }

  /* DATA TAB map: in the stacked flow its flex-basis collapsed to nothing
     and the map vanished. A real height, and flex sizing off. */
  .tev-data-map-wrap {
    height: 240px !important;
    min-height: 240px !important;
    flex: none !important;
  }

  /* PERFORMANCE tab: the track map ate half the screen. Hidden by default
     behind the toggle (built in telemetry.html); the toggle itself only
     exists on phones. */
  #tev-driving-fullmap-wrap.tev-map-off { display: none !important; }
  /* Shown, it needs a height of its own: the desktop flex-1 sizing
     collapses to nothing in the stacked phone flow. */
  #tev-driving-fullmap-wrap:not(.tev-map-off) {
    min-height: 300px !important;
    flex: none !important;
  }
}
@media (min-width: 769px) {
  #tev-perf-map-toggle { display: none !important; }
  /* Desktop never hides the map, whatever class JS left behind. */
  #tev-driving-fullmap-wrap.tev-map-off { display: flex !important; }
}
#tev-perf-map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 10px 0;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(64, 158, 215, 0.35);
  background: rgba(64, 158, 215, 0.10);
  color: #5dbdf0;
  font: 600 12px Inter, system-ui, sans-serif;
  cursor: pointer;
}
#tev-perf-map-toggle .material-icons { font-size: 16px; }

/* --------------------------------------------------------------------------
 * gt7-mobile-v4+v5, consolidated 2026-08-30.
 *
 * This tail was rebuilt in one piece after four rounds of appended patches
 * left rules in the wrong media blocks. If you add phone rules, add them
 * HERE, inside this block - not as a new appended section.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* HEADER: one row - title, tab pill, bell, badge. Everything a notch
     slimmer so 390px holds it; the right cluster keeps natural size. */
  /* Page TITLES go on phones (user, 2026-08-30): the icon on the left
     already says which page this is, and the freed width goes to the
     controls. */
  #tev-tabs-header h1,
  body > div.ml-24 > header h1 { display: none !important; }
  /* A notch shorter (user, 2026-08-30): 44px of bar is enough for 30px
     controls. Applies to every page header, not just telemetry's. */
  #tev-tabs-header > div {
    padding: 3px 8px !important;
    min-height: 2.75rem !important;
    height: auto !important;
  }
  body > div.ml-24 > header {
    height: 44px !important;
    min-height: 44px !important;
  }
  #tev-tabs-header .flex.items-center.gap-4 {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px !important;
  }
  #tev-tabs-header > div > .justify-end {
    flex: 0 0 auto !important;
    margin-left: auto;
  }
  #gt7-news-bell {
    width: 30px !important;
    height: 30px !important;
    margin: 0 4px 0 0 !important;
  }

  /* The tab strip's phone replacement: grey chrome, same family as the
     bell and the connection badge. */
  #tev-tab-select {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    height: 30px;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
  #tev-tab-select .material-icons { color: #94a3b8; font-size: 16px; }

  /* CHANNELS (delta / speed / throttle / brake): full width to the data.
     Card side-chrome off, scroller padding off, rails slimmed. */
  #tev-content .overflow-y-auto,
  #tev-content > :not(aside) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .tev-waveform-panel {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }
  .tev-waveform-title { width: 26px !important; }
  .tev-waveform-title span { font-size: 10px !important; }
  .tev-waveform-pct {
    width: 3.1rem !important;
    min-width: 3.1rem !important;
    padding: 6px 3px !important;
  }
  .tev-waveform-pct span { font-size: 10px !important; }
  /* This wrapper holds the WHOLE overview section, channels included. */
  #tev-data-overview-wrap { padding-left: 0 !important; padding-right: 0 !important; }
  #tev-data-overview-wrap > .justify-between { padding: 0 8px; }

  /* INPUTS gauges: "% ON THROTTLE" wrapped to two lines and dragged its
     caption below the neighbours'. One line each, slightly smaller, and
     every caption row sits at the same height. */
  [id^="tev-input-gauge-"] > div:last-child {
    white-space: nowrap;
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
  }
  [id^="tev-input-gauge-"] .tev-input-gauge-cmp-value { white-space: nowrap; }

  /* OVERVIEW KPI tiles: one under another, like the practice cards. */
  .tev-tab-content .kpi-strip { grid-template-columns: 1fr !important; }

  /* COACH: sections one under another, the panel scrolls, the map keeps
     a height instead of collapsing. */
  #tev-tab-coach {
    overflow-y: auto !important;
    padding: 8px 0 !important;
  }
  #tev-tab-coach .grid { display: block !important; }
  #tev-tab-coach section {
    min-height: 0;
    margin: 0 0 10px;
    border-radius: 0;
  }
  #tev-tab-coach section:first-of-type { min-height: 280px; }

  /* PERFORMANCE tab, review round 6. The big track map stays (the earlier
     opt-in toggle was a misunderstanding - the optional thing is the
     MINIMAP, switched from the map's own controls). */
  #tev-driving-fullmap-wrap { min-height: 300px !important; }
  /* The tab kept its desktop overflow:hidden cockpit sizing: once the
     stacked content grew taller than the viewport there was NO way to
     reach the charts. The tab itself scrolls now, like data and coach. */
  #tev-tab-driving {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #tev-tab-driving > * { flex-shrink: 0; }
  /* THE actual scroll wall: readout + channel picker + every chart panel
     live inside this overlay, which desktop caps at 45vh and clips. On a
     phone that cap left the charts unreachable below the fold - the TAB
     scrolls now, so the overlay grows to its content. */
  #tev-driving-delta-overlay {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    /* Stacked in the page flow it is no longer an overlay floating on the
       map, so it drops the overlay tint (rgba(16,23,41,.85) read as a
       different colour, #0f172a-ish, against the page's #09162d). */
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* And less air everywhere in it (user, 2026-08-31). */
  #tev-driving-delta-overlay > div {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* The chart panels take the FULL width, like the data tab's channels -
     negative margins swallow the container padding, and the side chrome
     goes with it. Pills and labels above stay padded. */
  /* The panels' own wrapper carries another 24px of side padding. */
  #tev-driving-delta-overlay div:has(> .tev-dop-panel) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #tev-driving-delta-overlay .tev-dop-panel {
    margin-left: -10px !important;
    margin-right: -10px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* Channel picker: label row on top, pills in an even grid - the same
     app-like treatment as the data tab, instead of two ragged wrap rows. */
  div:has(> .tev-dop-channel-pick) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px !important;
    width: 100%;
    padding-bottom: 6px !important;
  }
  div:has(> .tev-dop-channel-pick) > span { grid-column: 1 / -1; }
  .tev-dop-channel-pick {
    width: 100%;
    padding: 7px 2px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Channel picker's right-edge cluster (delta readout + zoom): in the
     grid it landed in a pill cell and the "+" poked past the frame. Own
     full row ABOVE the pills, right-aligned - there is room up there. */
  div:has(> .tev-dop-channel-pick) > span { order: -3; }
  div:has(> .tev-dop-channel-pick) > .ml-auto {
    grid-column: 1 / -1;
    order: -2;
    justify-self: end;
    margin-left: 0 !important;
  }

  /* The TIME / SPEED / GEAR / T / B / DISTANCE readout strip wrapped into
     ragged rows; three even columns keep the labels and values aligned. */
  #tev-tab-driving div:has(> #tev-driving-hover-distance-wrap) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  #tev-tab-driving div:has(> #tev-driving-hover-distance-wrap) > .tev-rdt {
    width: auto !important;
  }
  /* DISTANCE and the three map-mode buttons share the last row - the
     buttons vertically centred against the chip (user, 2026-08-31). */
  #tev-driving-hover-distance-wrap {
    grid-row: 3;
    grid-column: 1 / 3;
    width: auto !important;
  }
  #tev-tab-driving div:has(> #tev-driving-hover-distance-wrap) > div:not(.tev-rdt):not(.hidden) {
    grid-row: 3;
    grid-column: 3;
    justify-self: end;
    align-self: center;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 0 !important;
  }

  /* Performance segments strip: identical stacking to the data tab's. */
  #tev-driving-segment-deltas-bar {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 10px !important;
  }
  #tev-driving-segment-deltas-label { order: 0; border-right: 0 !important; }
  #tev-driving-segment-deltas-bar > div[role="group"] { order: 1; margin-left: auto; }
  #tev-driving-segment-deltas {
    order: 2;
    flex-basis: 100%;
    justify-content: flex-start !important;
  }

  /* LOG OUT overflowed the bottom bar's frame; the icon says it all. */
  #gt7-logout-btn span:last-child { display: none !important; }

  /* LIBRARY: the pinned flag gets even air both sides. (Sticky + bg live
     in the v3 block above.) */
  .tev-sessions-section:has(#lib-session-list-tbody) thead th:nth-child(3),
  #lib-session-list-tbody td:nth-child(3) {
    width: 54px !important;
    min-width: 54px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* LIBRARY actions: the page pins .gt7-table to table-layout:fixed, so
     content cannot widen columns - the buttons overflowed their 150px
     column past the table's own right edge, where no scroll range exists.
     Auto layout + max-content: content sizes columns, the scroll range
     includes every button and the gutter. */
  .tev-sessions-section:has(#lib-session-list-tbody) .gt7-table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100%;
  }
  .tev-sessions-section:has(#lib-session-list-tbody) thead th:last-child,
  #lib-session-list-tbody td:last-child {
    width: auto !important;
    min-width: 212px;
    padding-right: 14px !important;
  }
  #lib-session-list-tbody td:last-child .lib-delete-session { margin-right: 12px !important; }

  /* PAGINATION: side-by-side needed more width than 390px has. */
  #lib-session-pagination {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  /* Pages first, "1-10 of 477" under them (user's call, 2026-08-30). */
  #lib-session-pagination-info { white-space: nowrap; order: 2; }
  #lib-session-pagination-controls { justify-content: center; }

  /* HOME live-status card: the wrap scattered the four fields into ragged
     corners. Grid: connection line on top, three stats in even columns. */
  .apex-glass:has(#hero-connection-dot) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 8px;
    padding: 16px !important;
  }
  .apex-glass:has(#hero-connection-dot) > div:first-child {
    grid-column: 1 / -1;
    min-width: 0 !important;
  }
  .apex-glass:has(#hero-connection-dot) > div { justify-self: start; }
}

/* --------------------------------------------------------------------------
 * Connection status, EVERY screen size: the icon badge born on phones is
 * the style everywhere now (user's call, 2026-08-30). Green antenna =
 * connected, grey = not. The text pill is gone on desktop too.
 * ------------------------------------------------------------------------ */
#header-connection-badge {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  font-size: 0 !important;            /* swallows the text; the icon is ::before */
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  /* The badge still contains its text node as a second flex item; .badge's
     own flex gap applied between icon and (invisible) text and shoved the
     glyph half-a-gap off centre. */
  gap: 0 !important;
}
#header-connection-badge::before {
  font-family: 'Material Icons';
  content: 'sensors';
  font-size: 20px;
  line-height: 1;
  display: block;
  /* The .badge class tracks its (invisible) text; the letter-spacing was
     padding the glyph's right side and shoving the icon ~3px off centre. */
  letter-spacing: 0 !important;
  font-weight: 400;
}
#header-connection-badge.badge-connected::before { color: #21c45d; }
#header-connection-badge.badge-disconnected::before { color: #94a3b8; }
/* The header's right-hand cluster is assembled by two scripts at load time
   (gt7-news.js wraps [bell][badge], gt7-titlebar.js wraps that with the window
   controls). Pin every distance here so no page's own header rules - gap
   utilities, ml-2 on the badge, button resets - can push them apart. */
#gt7-news-bell {
  align-self: center;
  margin: 0 8px 0 0 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}
#header-connection-badge { margin-left: 0 !important; margin-right: 0 !important; }
.gt7-win-group { gap: 10px !important; }
#gt7-news-bell + #header-connection-badge,
span:has(> #gt7-news-bell) { display: inline-flex !important; align-items: center; gap: 0 !important; }
/* Phone: the bell matches the 30px badge and sits 4px from it. Declared AFTER
   the pin above on purpose - same specificity, later wins. */
@media (max-width: 768px) {
  #gt7-news-bell { width: 30px !important; height: 30px !important; margin: 0 4px 0 0 !important; }
}

/* The status icon is a LINK to Settings > Connect PlayStation: you look at
   it when the connection is wrong, so it is the way to the thing that
   fixes it. Anchor styling has to be neutralised - it is an icon chip. */
#header-connection-badge {
  cursor: pointer;
  text-decoration: none !important;
}
#header-connection-badge:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
#header-connection-badge:focus-visible {
  outline: 2px solid rgba(93, 189, 240, 0.9);
  outline-offset: 2px;
}
/* Landing point clears the sticky header instead of hiding under it. */
#connect-playstation { scroll-margin-top: 90px; }

/* Minimap forced off by its toggle in the map options - any screen size. */
#tev-driving-minimap-wrap.tev-minimap-off { display: none !important; }

/* --------------------------------------------------------------------------
 * Replay dock (gt7-replay-dock.js): a lap's video beside the Performance
 * tab's map (?layout=replay) or two videos side by side (?layout=duel).
 * The map's row is a flex row; the dock is one more child of it.
 * ------------------------------------------------------------------------ */
.tev-replay-dock { display: flex; gap: 0; min-width: 0; min-height: 0; border-left: 1px solid rgba(29,133,246,0.15); background: rgba(9,22,45,0.6); }
.tev-replay-replay { flex: 0 0 50%; }
.tev-replay-duel { flex: 1 1 auto; }
.tev-replay-pane { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; }
.tev-replay-pane + .tev-replay-pane { border-left: 1px solid rgba(29,133,246,0.15); }
/* The icon group over the picture, the map's own style: a label and
   square icon buttons on a glass strip, top right. */
.tev-replay-tools { position: absolute; top: 8px; right: 8px; z-index: 12; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(29,133,246,0.2); background: rgba(16,23,41,0.85); backdrop-filter: blur(8px); }
.tev-replay-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-500, #64748b); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Your lap / Reference, in the single picture's tools: two words in one
   pill, the lap being shown lit. Greyed out: that lap has no video. */
.tev-replay-pick { display: inline-flex; border: 1px solid rgba(29,133,246,0.25); border-radius: 6px; overflow: hidden; }
.tev-replay-pick[hidden] { display: none; }
.tev-replay-pick button { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; color: var(--slate-400, #94a3b8); background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.tev-replay-pick button + button { border-left: 1px solid rgba(29,133,246,0.25); }
.tev-replay-pick button:hover:not(:disabled) { color: #e2e8f0; }
.tev-replay-pick button.is-active { color: #fff; background: rgba(64,158,215,0.28); }
.tev-replay-pick button:disabled { opacity: 0.35; cursor: not-allowed; }
.tev-replay-switches { flex: none; }
.tev-replay-switches .tev-replay-layoutbtn .material-icons { font-size: 16px; }
.tev-replay-layoutbtn[disabled] { opacity: .45; cursor: not-allowed; }
.tev-replay-pane[hidden] { display: none !important; }
.tev-replay-screen { position: relative; flex: 1 1 auto; min-height: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.tev-replay-screen video { width: 100%; height: 100%; object-fit: contain; display: block; }
.tev-replay-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--slate-500); font-size: 12px; pointer-events: none; }
.tev-replay-empty .material-icons { font-size: 32px; color: var(--slate-600, #475569); }
.tev-replay-empty[hidden] { display: none !important; }
.tev-replay-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 260px; max-height: 260px; overflow: auto; padding: 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: #10213e; box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.tev-replay-menu.hidden { display: none; }
.tev-replay-menu-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: #cbd5e1; font: 600 12px Inter, system-ui, sans-serif; cursor: pointer; }
.tev-replay-menu-item:hover { background: rgba(255,255,255,0.07); }
.tev-replay-menu-empty { padding: 8px 10px; font-size: 12px; color: #64748b; }
/* Side by side: the map steps aside; a button on the first pane brings it back. */
.tev-replay-layout-duel .tev-replay-map-aside { display: none !important; }
.tev-replay-dock[hidden] { display: none !important; }

/* ── The rail's labels, in every language ────────────────────────────────
   One word each, and some languages' words are long - ENREGISTREMENT,
   EINSTELLUNGEN, REGISTRAZIONE - which broke mid-word in the 96 px rail
   ("REGISTRAZI / ONE"). One line, always: a little less padding on the
   link, and outside English a touch smaller and tighter. */
nav.fixed.w-24 > div > a, nav.fixed.w-24 > div > button { padding-left: 4px; padding-right: 4px; }
nav.fixed.w-24 > div > a > span:not(.material-icons), nav.fixed.w-24 > div > button > span:not(.material-icons) { white-space: nowrap; max-width: 88px; }
html:not([lang="en"]) nav.fixed.w-24 > div > a > span:not(.material-icons),
html:not([lang="en"]) nav.fixed.w-24 > div > button > span:not(.material-icons) { font-size: 10px; letter-spacing: 0.01em; }

/* ── The rail: one frame, a hairline between every icon ─────────────────
   The rail's links sit in one card - the .apex-glass surface the Library's
   table sits in: the same gradient, the 1px border, the thin highlight
   along the top, a soft shadow - as rows, a hairline between them like
   the table's rows, and a darker strip where the tool pages (Admin
   onward) begin, like a section break. The open page is lit the way a
   selected row is, with the 3px inset bar the reference rows carry; a
   hover is the table's row hover. Log out is a small frame of its own at
   the bottom. The one-line labels and the language sizing above stay. */
nav.fixed.w-24 > div.flex.flex-col.gap-5 {
  gap: 0 !important; width: 78px; position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px;
  background: linear-gradient(135deg, rgba(20, 38, 71, 0.9) 0%, rgba(13, 28, 56, 0.94) 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
  flex: 0 0 auto !important; margin: auto 0;
}
nav.fixed.w-24 > div.flex.flex-col.gap-5::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); pointer-events: none;
}
nav.fixed.w-24 > div > a, nav.fixed.w-24 > div > button {
  width: 100%; min-height: 56px; justify-content: center; gap: 3px;
  padding: 6px 4px !important; box-sizing: border-box; position: relative;
  border-radius: 0 !important; background: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color 0.15s ease, color 0.15s ease;
}
nav.fixed.w-24 > div > a:last-child, nav.fixed.w-24 > div > button:last-child { border-bottom: 0; }
nav.fixed.w-24 > div > a:hover, nav.fixed.w-24 > div > button:hover { background: rgba(29, 133, 246, 0.06) !important; }
nav.fixed.w-24 > div > a.bg-primary\/10 { background: rgba(64, 158, 215, 0.10) !important; }
nav.fixed.w-24 > div > a.bg-primary\/10::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(64, 158, 215, 0.9);
}
/* The section break before the tool pages. */
nav.fixed.w-24 > div > a[href="/admin"] { border-top: 6px solid rgba(0, 0, 0, 0.18); }
nav.fixed.w-24 > div > a > .material-icons { font-size: 24px; }
/* Log out: its own small frame under the menu. */
nav.fixed.w-24 > #gt7-logout-btn {
  width: 78px; min-height: 46px; justify-content: center; gap: 3px; margin-top: 10px;
  padding: 6px 4px !important; box-sizing: border-box; position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(20, 38, 71, 0.9) 0%, rgba(13, 28, 56, 0.94) 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30); transition: border-color 0.15s ease, color 0.15s ease;
}
nav.fixed.w-24 > #gt7-logout-btn:hover { border-color: rgba(64, 158, 215, 0.45); }
nav.fixed.w-24 > #gt7-logout-btn > .material-icons { font-size: 24px; }