/* ==========================================================================
   Aurium UI — Randall's Radio design system (UI Cleanup redesign, Wave 1)
   ==========================================================================
   Source of truth: docs/design/ui_cleanup/README.md (design tokens) and the
   .dc.html prototypes (exact hex/px values). All classes are namespaced
   `au-` so this file can coexist with the current Tailwind pages during the
   incremental Wave 2-5 migration.

   GATEWAY COPY (Wave 5): the gateway serves its own static dir, so this is
   a copy of the repo-root static/css/aurium-ui.css with @font-face url()
   paths rewritten to be relative (fonts/ lives beside this file). Keep in
   sync with the root original when the design system changes.

   Fonts are self-hosted in /static/fonts (CSP: no external origins).
   Body/UI text deliberately stays on the system sans stack per the README;
   only display (Baloo 2) and mono (JetBrains Mono) are custom faces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted fonts (variable woff2 from Google Fonts, latin + latin-ext)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens (README "Design Tokens" table — do not invent values)
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds & surfaces */
  --au-bg-app: #0a1120;            /* app background */
  --au-bg-shell: #0c1424;          /* page/panel shell */
  --au-bg-header: #0f1a2e;         /* header bar */
  --au-surface-card: #0e1728;      /* card surface */
  --au-surface-inset: #0a1120;     /* inset / input surface */
  --au-surface-raised: #1c2740;    /* active segmented tab / raised chip (from mocks) */
  --au-surface-ghost: rgba(148,163,184,.06); /* ghost button fill (from mocks) */

  /* Borders */
  --au-border-card: rgba(148,163,184,.10);
  --au-border-input: #26324a;
  --au-border-modal: rgba(148,163,184,.14);  /* modal card border (from mocks) */

  /* Text tiers */
  --au-text-primary: #f8fafc;
  --au-text-primary-2: #f1f5f9;
  --au-text-secondary: #cbd5e1;
  --au-text-secondary-2: #94a3b8;
  --au-text-muted: #64748b;
  --au-text-muted-2: #7f8ea3;
  --au-text-muted-3: #5b6b82;

  /* Accents */
  --au-blue: #3b82f6;
  --au-blue-light: #60a5fa;
  --au-blue-text: #93c5fd;
  --au-gradient-blue: linear-gradient(90deg, #3b82f6, #60a5fa);
  --au-green: #10b981;
  --au-green-light: #34d399;
  --au-amber: #f59e0b;
  --au-amber-light: #fbbf24;
  --au-purple: #8b5cf6;
  --au-purple-light: #a78bfa;
  --au-purple-text: #c4b5fd;
  --au-red: #ef4444;

  /* Hero */
  --au-hero-gradient: linear-gradient(135deg, #132241, #0e1830);
  --au-hero-border: rgba(59,130,246,.22);

  /* Modal scrim */
  --au-scrim: rgba(4,8,17,.72);

  /* Switch (Switch.dc.html) */
  --au-switch-off: #334155;
  --au-switch-knob-off: #cbd5e1;

  /* Typography */
  --au-font-display: 'Baloo 2', sans-serif;
  --au-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --au-font-mono: 'JetBrains Mono', monospace;

  /* Shape */
  --au-radius-card: 14px;      /* cards 12-16px; 14 is the common card value */
  --au-radius-card-lg: 16px;   /* hero / modal */
  --au-radius-card-sm: 12px;   /* small tiles */
  --au-radius-control: 9px;    /* inputs / buttons */
  --au-radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   3. Typography utilities
   -------------------------------------------------------------------------- */
.au-mono {
  font-family: var(--au-font-mono);
}

.au-display {
  font-family: var(--au-font-display);
  font-weight: 700;
  color: var(--au-text-primary);
}

/* Uppercase letter-spaced meta label (README: 10-12px, tracking .12-.16em) */
.au-label {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--au-text-muted);
  font-weight: 600;
}

.au-label-sm {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--au-text-muted-2);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. Cards & hero
   -------------------------------------------------------------------------- */
.au-card {
  background: var(--au-surface-card);
  border: 1px solid var(--au-border-card);
  border-radius: var(--au-radius-card);
  padding: 18px;
}

.au-card-sm {
  border-radius: var(--au-radius-card-sm);
  padding: 14px 16px;
}

.au-card-lg {
  border-radius: var(--au-radius-card-lg);
  padding: 22px;
}

.au-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  display: block;
  margin-bottom: 14px;
}

.au-card-title .fas,
.au-card-title .far {
  color: var(--au-blue-light);
  margin-right: 8px;
}

/* Hero gradient panel (Now-Playing, Active Season) */
.au-hero {
  background: var(--au-hero-gradient);
  border: 1px solid var(--au-hero-border);
  border-radius: var(--au-radius-card-lg);
  padding: 22px;
}

.au-hero-title {
  font-family: var(--au-font-display);
  font-size: 27px;
  font-weight: 800;
  color: var(--au-text-primary);
  line-height: 1.1;
}

.au-h2 {
  font-family: var(--au-font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--au-text-primary);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.au-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--au-radius-control);
  border: 1px solid transparent;
  font-family: var(--au-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, filter .15s;
}

.au-btn:focus-visible {
  outline: 2px solid var(--au-blue);
  outline-offset: 2px;
}

.au-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Solid blue — default confirm/primary (mock: #3b82f6, white text) */
.au-btn-primary {
  background: var(--au-blue);
  color: #fff;
}
.au-btn-primary:hover:not(:disabled) { background: var(--au-blue-light); }

/* Solid green — go/positive (mock: #10b981, dark ink #052e1f, weight 700) */
.au-btn-green {
  background: var(--au-green);
  color: #052e1f;
  font-weight: 700;
}
.au-btn-green:hover:not(:disabled) { background: var(--au-green-light); }

/* Tinted green (mock: rgba(16,185,129,.12) / .3 border / #34d399 text) */
.au-btn-green-soft {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.3);
  color: var(--au-green-light);
}
.au-btn-green-soft:hover:not(:disabled) { background: rgba(16,185,129,.2); }

/* Tinted amber — override/attention (mock "Set override": rgba(245,158,11,.14)) */
.au-btn-amber {
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.3);
  color: var(--au-amber-light);
}
.au-btn-amber:hover:not(:disabled) { background: rgba(245,158,11,.22); }

/* Solid red — destructive confirms (mock: #ef4444, white text) */
.au-btn-danger {
  background: var(--au-red);
  color: #fff;
}
.au-btn-danger:hover:not(:disabled) { filter: brightness(1.12); }

/* Ghost — neutral/cancel (mock: rgba(148,163,184,.06) fill, #26324a border) */
.au-btn-ghost {
  background: var(--au-surface-ghost);
  border-color: var(--au-border-input);
  color: var(--au-text-secondary);
}
.au-btn-ghost:hover:not(:disabled) {
  background: rgba(148,163,184,.12);
  color: var(--au-text-primary-2);
}

/* Sizes */
.au-btn-sm { padding: 6px 12px; font-size: 12px; }
.au-btn-block { display: flex; width: 100%; }

/* Square icon button (mock: 38x38, radius 9) */
.au-btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  flex-shrink: 0;
}
.au-btn-icon-sm { width: 30px; height: 30px; border-radius: 8px; }

/* --------------------------------------------------------------------------
   6. Form controls
   -------------------------------------------------------------------------- */
.au-input,
.au-select {
  width: 100%;
  padding: 9px 12px;
  background: var(--au-surface-inset);
  border: 1px solid var(--au-border-input);
  border-radius: var(--au-radius-control);
  color: #e5e7eb;
  font-family: var(--au-font-sans);
  font-size: 13px;
  transition: border-color .15s;
}

.au-input::placeholder { color: var(--au-text-muted); }

.au-input:focus,
.au-select:focus {
  outline: none;
  border-color: var(--au-blue);
}

.au-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.au-select option {
  background: var(--au-surface-card);
  color: #e5e7eb;
}

/* Labeled field wrapper */
.au-field { display: block; margin-bottom: 12px; }
.au-field > label,
.au-field-label {
  display: block;
  font-size: 11px;
  color: var(--au-text-secondary-2);
  margin-bottom: 6px;
}

/* Input with a leading icon (mock search field) */
.au-input-icon-wrap { position: relative; }
.au-input-icon-wrap > .au-input { padding-left: 32px; }
.au-input-icon-wrap > .fas,
.au-input-icon-wrap > .far {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--au-text-muted);
  font-size: 12px;
  pointer-events: none;
}

/* Checkbox (mock: accent-color matches the action's hue) */
.au-checkbox { accent-color: var(--au-blue); }
.au-checkbox-purple { accent-color: var(--au-purple); }

/* --------------------------------------------------------------------------
   7. Pills & badges
   -------------------------------------------------------------------------- */
/* Rounded chip (mock chips: padding 2px 9px / 5px 12px, radius 999px) */
.au-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: var(--au-radius-pill);
  border: 1px solid var(--au-border-input);
  background: var(--au-surface-inset);
  color: var(--au-text-secondary);
  white-space: nowrap;
}

.au-pill-blue {
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.3);
  color: var(--au-blue-text);
}
.au-pill-green {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.3);
  color: var(--au-green-light);
}
.au-pill-amber {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.25);
  color: var(--au-amber);
}
.au-pill-purple {
  background: rgba(139,92,246,.14);
  border-color: rgba(139,92,246,.3);
  color: var(--au-purple-text);
}
.au-pill-red {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.3);
  color: #fca5a5;
}

/* Selectable chip (Classify modal mood/setting chips: 5px 12px) */
.au-chip-select {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--au-radius-pill);
  background: var(--au-surface-inset);
  border: 1px solid var(--au-border-input);
  color: var(--au-text-secondary);
  cursor: pointer;
}
.au-chip-select.is-selected {
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.3);
  color: var(--au-blue-text);
}

/* Tiny square badge (mock INJECT flag: 9px, radius 4px, padding 1px 5px) */
.au-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(148,163,184,.14);
  color: var(--au-text-secondary-2);
  vertical-align: middle;
}
.au-badge-blue   { background: rgba(59,130,246,.2);  color: var(--au-blue-text); }
.au-badge-green  { background: rgba(16,185,129,.2);  color: var(--au-green-light); }
.au-badge-amber  { background: rgba(245,158,11,.2);  color: var(--au-amber-light); }
.au-badge-purple { background: rgba(139,92,246,.2);  color: var(--au-purple-text); }
.au-badge-red    { background: rgba(239,68,68,.2);   color: #fca5a5; }

/* --------------------------------------------------------------------------
   8. Status dots (header: 7px round; green=up, red=down, amber=degraded)
   -------------------------------------------------------------------------- */
.au-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--au-switch-off); /* neutral/unknown until page JS sets a state */
  flex-shrink: 0;
}
.au-dot-green { background: var(--au-green); }
.au-dot-red   { background: var(--au-red); }
.au-dot-amber { background: var(--au-amber); }

/* Dot + label pairing used in the header (mock: 12.5px, #94a3b8, gap 6px) */
.au-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--au-text-secondary-2);
  cursor: default;
  user-select: none;
}

/* --------------------------------------------------------------------------
   9. Modal (centered card over blurred scrim; see Interactivity Spec)
   -------------------------------------------------------------------------- */
.au-modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--au-scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 20px;
  z-index: 50;
  overflow-y: auto;
}

.au-modal {
  width: 480px;
  max-width: 100%;
  background: var(--au-surface-card);
  border: 1px solid var(--au-border-modal);
  border-radius: var(--au-radius-card-lg);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.au-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.au-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--au-text-primary);
  margin: 0;
}

.au-modal-sub {
  font-size: 12.5px;
  color: var(--au-text-muted-2);
  margin: 0 0 16px;
}

.au-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   10. Segmented control (mock Inject/Override: inset track, raised active)
   -------------------------------------------------------------------------- */
.au-seg {
  display: flex;
  gap: 6px;
  background: var(--au-surface-inset);
  padding: 4px;
  border-radius: 10px;
}

.au-seg-btn {
  flex: 1;
  text-align: center;
  padding: 7px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--au-text-secondary-2);
  font-family: var(--au-font-sans);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.au-seg-btn.is-active {
  background: var(--au-surface-raised);
  color: var(--au-text-primary-2);
  font-weight: 600;
}

.au-seg-btn:focus-visible {
  outline: 2px solid var(--au-blue);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   11. Switch (Switch.dc.html: 44x24, green #10b981 on / #334155 off,
       2px-inset knob that slides; pure CSS over a real checkbox)
       Markup: <label class="au-switch">
                 <input type="checkbox">
                 <span class="au-switch-slider"></span>
               </label>
   -------------------------------------------------------------------------- */
.au-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.au-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.au-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: var(--au-radius-pill);
  background: var(--au-switch-off);
  transition: background .15s;
  pointer-events: none;
}

.au-switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;  /* h - 4 */
  height: 20px;
  border-radius: 50%;
  background: var(--au-switch-knob-off);
  transition: transform .15s, background .15s;
}

.au-switch input:checked + .au-switch-slider {
  background: var(--au-green);
}

.au-switch input:checked + .au-switch-slider::before {
  transform: translateX(20px); /* w - knob - 4 */
  background: #fff;
}

.au-switch input:focus-visible + .au-switch-slider {
  outline: 2px solid var(--au-blue);
  outline-offset: 2px;
}

.au-switch input:disabled + .au-switch-slider {
  opacity: .5;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   12. Nav tabs (header: active = white + 2px blue underline; others muted)
   -------------------------------------------------------------------------- */
.au-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13.5px;
}

.au-tab {
  padding: 6px 12px;
  color: var(--au-text-secondary-2);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
}

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

.au-tab.is-active {
  color: var(--au-text-primary);
  font-weight: 600;
  border-bottom-color: var(--au-blue);
}

/* --------------------------------------------------------------------------
   13. Progress bar (hero: 6px track, blue gradient fill)
   -------------------------------------------------------------------------- */
.au-progress {
  flex: 1;
  height: 6px;
  background: rgba(148,163,184,.16);
  border-radius: var(--au-radius-pill);
  overflow: hidden;
}

.au-progress-fill {
  height: 100%;
  background: var(--au-gradient-blue);
  border-radius: var(--au-radius-pill);
}

/* --------------------------------------------------------------------------
   14. Global header (see templates/_aurium_header.html)
   -------------------------------------------------------------------------- */
.au-header {
  background: var(--au-bg-header);
  border-bottom: 1px solid var(--au-border-card);
}

.au-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.au-header-left,
.au-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.au-brand {
  font-family: var(--au-font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--au-text-primary);
  white-space: nowrap;
}

.au-header-status {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Aurium platform chip (logo | version) */
.au-chip {
  font-size: 11px;
  color: var(--au-text-muted);
  border: 1px solid var(--au-border-input);
  padding: 3px 10px;
  border-radius: var(--au-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  text-decoration: none;
}

.au-chip-logo {
  height: 13px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.au-chip-sep { color: var(--au-switch-off); }

.au-chip-version {
  font-family: var(--au-font-mono);
  font-size: 10px;
}

/* Hamburger (mobile only) */
.au-burger {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  color: var(--au-text-secondary-2);
  font-size: 20px;
  cursor: pointer;
}
.au-burger:hover { color: var(--au-text-primary); }

/* Mobile dropdown menu (toggled by utils.js toggleMobileMenu via .hidden) */
.au-mobile-menu {
  display: none;
  background: var(--au-bg-header);
  border-bottom: 1px solid var(--au-border-card);
  padding: 10px 22px 14px;
  flex-direction: column;
  gap: 6px;
}

.au-mobile-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--au-radius-control);
  font-size: 13.5px;
  color: var(--au-text-secondary-2);
  text-decoration: none;
}

.au-mobile-menu a:hover { color: var(--au-text-primary-2); background: var(--au-surface-ghost); }

.au-mobile-menu a.is-active {
  color: var(--au-text-primary);
  font-weight: 600;
  background: rgba(59,130,246,.14);
}

/* Dropdown menu styled to the new system (instance switcher etc.) */
.au-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  min-width: 176px;
  z-index: 60;
  background: var(--au-surface-card);
  border: 1px solid var(--au-border-modal);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  overflow: hidden;
  padding: 4px;
}

.au-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--au-text-secondary);
  white-space: nowrap;
  text-decoration: none;
}

.au-menu a:hover {
  background: var(--au-surface-raised);
  color: var(--au-text-primary-2);
}

/* Guard: pages using this system may not load Tailwind's `.hidden`.
   Scoped so we never fight other stylesheets globally. */
.au-mobile-menu.hidden,
.au-menu.hidden,
.au-modal-scrim.hidden { display: none; }

/* --------------------------------------------------------------------------
   15. Layout & responsive primitives
       Mocks are desktop (1120px, 1.9fr/1fr split). Collapse mirrors the
       app's existing md: (768px) breakpoint behavior.
   -------------------------------------------------------------------------- */
.au-shell {
  background: var(--au-bg-app);
  color: #e5e7eb;
  font-family: var(--au-font-sans);
  min-height: 100vh;
}

.au-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px;
}

/* Generic responsive grid: n columns desktop, stacks under 768px */
.au-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(var(--au-cols, 2), minmax(0, 1fr));
}

/* Dashboard-style main/rail split (mock: 1.9fr 1fr) */
.au-grid-main {
  display: grid;
  gap: 22px;
  grid-template-columns: 1.9fr 1fr;
}

/* Vertical stack of cards (mock column gap 18px) */
.au-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.au-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 767.98px) {
  .au-grid,
  .au-grid-main { grid-template-columns: minmax(0, 1fr); }

  .au-page { padding: 14px; }
  .au-header-inner { padding: 12px 14px; }

  /* Header collapse: status dots stay (small), nav + switcher fold into
     the hamburger menu, matching the current pages' md: behavior */
  .au-header-nav { display: none; }
  .au-burger { display: inline-flex; }
  .au-mobile-menu { display: flex; }
  .au-mobile-menu.hidden { display: none; }
  .au-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .au-mobile-menu { display: none !important; }
  .au-hide-desktop { display: none !important; }
}