/* ════════════════════════════════════════════════════════════════════════════
   AURORA TOPBAR — Enterprise Command Navigator (v2, 2026-05-27)
   ────────────────────────────────────────────────────────────────────────────
   PRESERVED (the unique interaction identity — do not alter the concept):
     • hover-reveal mega panel with 240ms close hysteresis (topbar-aurora.js)
     • trigger pill: breathing halo, mini-logo glow, chevron bob
     • mega drop: transform + opacity + clip-path ellipse (same timings)
     • multi-column operational grouping, active-page highlight, Esc/click-nav
   ELEVATED (this pass):
     • panel depth + layered aurora glow + top hairline
     • operational zoning (per-group accent within the cyan→violet aurora spectrum)
     • zoned icon tiles, refined hover (icon lift + trailing chevron), denser rhythm
     • content-driven height + internal scroll (fixes 8-group clipping)
   IDENTITY: cyan #00d9ff → violet #a855f7 aurora — kept as the signature look.
   ════════════════════════════════════════════════════════════════════════════ */

.aurora-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;

  /* Aurora spectrum tokens (cyan → violet) — single source for the topbar */
  --atb-cyan:   #00d9ff;
  --atb-violet: #a855f7;
  --atb-ink:    rgba(255,255,255,0.98);
}

/* ── COMPACT bar ──────────────────────────────────────────────── */
.aurora-topbar-bar {
  position: relative;
  height: 52px;
  background: linear-gradient(180deg, #0c0e16 0%, #121626 100%);
  border-bottom: 1px solid rgba(0,217,255,0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 16px;
  z-index: 3;
}
.aurora-topbar.is-open .aurora-topbar-bar { border-bottom-color: rgba(0,217,255,0.40); }

.atb-l { display: flex; align-items: center; gap: 14px; }
.atb-r { display: flex; align-items: center; gap: 8px; }

/* ── TRIGGER pill — breathing halo (GPU-cheap box-shadow) ─────── */
.aurora-topbar-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 5px 14px 5px 6px;
  background: linear-gradient(90deg, rgba(0,217,255,0.10), rgba(168,85,247,0.08));
  border: 1.5px solid rgba(0,217,255,0.30);
  border-radius: 99px;
  cursor: pointer;
  user-select: none;
  transition: background 200ms ease, border-color 200ms ease;
  animation: atbBreath 2.6s ease-in-out infinite;
}
@keyframes atbBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,217,255,0.0), 0 2px 8px rgba(0,217,255,0.10); }
  50%      { box-shadow: 0 0 0 5px rgba(0,217,255,0.10), 0 4px 14px rgba(0,217,255,0.25); }
}
/* Attention "ping" — an expanding ring radiates periodically to invite hover */
.aurora-topbar-trigger::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 99px;
  border: 1.5px solid rgba(0,217,255,0.5);
  opacity: 0;
  pointer-events: none;
  animation: atbPing 3.6s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes atbPing {
  0%   { opacity: 0;    transform: scale(1); }
  10%  { opacity: 0.55; }
  45%  { opacity: 0;    transform: scale(1.22); }
  100% { opacity: 0;    transform: scale(1.22); }
}
/* "Hover me" pill hint that slides in below the trigger when idle */
.atb-hint {
  position: absolute;
  top: calc(100% + 7px); left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  color: #aef2ff;
  background: rgba(0,217,255,0.10);
  border: 1px solid rgba(0,217,255,0.30);
  border-radius: 99px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: atbHintFloat 3.6s ease-in-out infinite;
}
.atb-hint::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #00d9ff;
  box-shadow: 0 0 8px rgba(0,217,255,0.9);
}
@keyframes atbHintFloat {
  0%, 100% { opacity: 0; transform: translateY(-3px); }
  35%, 70% { opacity: 0.92; transform: translateY(0); }
}
/* Calm everything down once the user engages */
.aurora-topbar-trigger:hover::after,
.aurora-topbar.is-open .aurora-topbar-trigger::after { animation: none; opacity: 0; }
.aurora-topbar-trigger:hover .atb-hint,
.aurora-topbar.is-open .atb-hint { opacity: 0 !important; animation: none; }
.aurora-topbar-trigger:hover {
  background: linear-gradient(90deg, rgba(0,217,255,0.20), rgba(168,85,247,0.14));
  border-color: rgba(0,217,255,0.55);
}
.aurora-topbar-trigger:focus-visible {
  outline: 2px solid rgba(0,217,255,0.60);
  outline-offset: 3px;
  animation: none;
}
.aurora-topbar.is-open .aurora-topbar-trigger {
  background: linear-gradient(90deg, rgba(0,217,255,0.24), rgba(168,85,247,0.18));
  border-color: rgba(0,217,255,0.60);
  animation: none;
}

/* Mini logo in trigger */
.atb-trigger-logo {
  width: 32px; height: 32px;
  position: relative;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.atb-trigger-logo::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,217,255,0.45), rgba(168,85,247,0.20) 50%, transparent 75%);
  filter: blur(5px);
  z-index: -1;
  will-change: opacity, transform;
  animation: atbLogoPulse 2.4s ease-in-out infinite;
}
.atb-trigger-logo img {
  width: 28px; height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0,217,255,0.70));
  transition: filter 200ms ease, transform 200ms ease;
}
.aurora-topbar-trigger:hover .atb-trigger-logo img {
  filter: drop-shadow(0 0 12px rgba(0,217,255,0.90));
  transform: scale(1.08);
}
@keyframes atbLogoPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.15); }
}

.atb-current { display: flex; flex-direction: column; gap: 0; line-height: 1; }
.atb-current-lbl {
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(90deg, #00d9ff, #c084fc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 3px;
}
.atb-current-name {
  font-size: 13px; font-weight: 800;
  color: rgba(255,255,255,0.98);
  letter-spacing: -0.01em;
}
.atb-chev {
  color: #00d9ff;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: atbChevBob 1.6s ease-in-out infinite;
}
.aurora-topbar.is-open .atb-chev { transform: rotate(180deg); animation: none; }
@keyframes atbChevBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

/* ════════════════════════════════════════════════════════════════
   MEGA PANEL — content-driven height, layered aurora depth
   (open/close transform + opacity + clip-path timings UNCHANGED)
   ════════════════════════════════════════════════════════════════ */
.aurora-topbar-mega {
  position: absolute;
  top: 51px; left: 0; right: 0;
  width: min(1060px, calc(100% - 24px));
  margin: 0 auto;
  max-height: min(440px, calc(100vh - 120px));
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 620px 150px at 50% -16%, rgba(0,217,255,0.15), transparent 60%),
    radial-gradient(ellipse 440px 140px at 86% -8%, rgba(168,85,247,0.10), transparent 60%),
    linear-gradient(180deg, #0d0f18 0%, #0f1320 55%, #121626 100%);
  border: 1px solid rgba(0,217,255,0.20);
  border-top: none;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  /* Rectangular curtain wipe — reveals top→bottom, never clips corner items */
  clip-path: inset(0 0 100% 0 round 0 0 16px 16px);
  -webkit-clip-path: inset(0 0 100% 0 round 0 0 16px 16px);
  transform: translateY(-6px);
  opacity: 0;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    clip-path 340ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 18px 44px rgba(0,0,0,0.46), 0 0 0 1px rgba(0,217,255,0.05);
}
/* Top hairline highlight — gives the panel a crisp lit edge */
.aurora-topbar-mega::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,217,255,0.55) 35%, rgba(168,85,247,0.45) 65%, transparent);
  opacity: 0.9;
  z-index: 1;
}
.aurora-topbar.is-open .aurora-topbar-mega {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  clip-path: inset(0 0 0 0 round 0 0 16px 16px);
  -webkit-clip-path: inset(0 0 0 0 round 0 0 16px 16px);
}

/* ════════════════════════════════════════════════════════════════
   COMMAND DECK — horizontal category tabs + app-launcher tiles.
   Top tabs (not a vertical rail) → deliberately unlike the sidebar.
   ════════════════════════════════════════════════════════════════ */
.atb-mega-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: min(404px, calc(100vh - 132px));
  overflow: hidden;
}

/* ── CATEGORY TABS (horizontal chip row, wraps — never scrolls) ── */
.atb-tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.atb-tab {
  --z: var(--atb-cyan);
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: rgba(255,255,255,0.60);
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  /* idle auto-blink (zone-coloured glow) — runs without hover; waves across the row */
  animation: atbTabPulse 2.6s ease-in-out infinite;
}
@keyframes atbTabPulse {
  0%, 100% {
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    border-color: color-mix(in srgb, var(--z) 55%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--z) 34%, transparent);
  }
}
/* Stagger the pulse so it ripples left→right across the tabs */
.atb-tab:nth-child(1) { animation-delay: 0ms; }
.atb-tab:nth-child(2) { animation-delay: 180ms; }
.atb-tab:nth-child(3) { animation-delay: 360ms; }
.atb-tab:nth-child(4) { animation-delay: 540ms; }
.atb-tab:nth-child(5) { animation-delay: 720ms; }
.atb-tab:nth-child(6) { animation-delay: 900ms; }
.atb-tab:nth-child(7) { animation-delay: 1080ms; }
.atb-tab:nth-child(8) { animation-delay: 1260ms; }
.atb-tab:nth-child(n+9) { animation-delay: 1440ms; }
/* Stop the blink once a tab is engaged (hover or active = solid state) */
.atb-tab:hover, .atb-tab.is-active { animation: none; }
.atb-tab-ic { display: grid; place-items: center; flex-shrink: 0; }
.atb-tab-ic svg { width: 15px; height: 15px; color: currentColor; }
.atb-tab-lb { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }
.atb-tab-cnt {
  font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: inherit; opacity: 0.7;
  background: rgba(255,255,255,0.08);
  border-radius: 99px; padding: 0 6px; min-width: 16px; text-align: center;
}
.atb-tab:hover {
  color: #fff;
  background: transparent;
  border-color: color-mix(in srgb, var(--z) 45%, rgba(255,255,255,0.2));
}
.atb-tab.is-active {
  color: var(--z);
  background: transparent;
  border-color: color-mix(in srgb, var(--z) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--z) 30%, transparent),
              0 0 16px color-mix(in srgb, var(--z) 28%, transparent);
}
.atb-tab.is-active .atb-tab-cnt { background: color-mix(in srgb, var(--z) 24%, transparent); opacity: 1; }

/* ── STAGE: decks of item tiles (only the active one shows) ────── */
.atb-stage {
  position: relative;
  flex: 1; min-width: 0;
  padding: 14px 18px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.atb-stage::-webkit-scrollbar { width: 8px; }
.atb-stage::-webkit-scrollbar-thumb { background: rgba(0,217,255,0.20); border-radius: 99px; }

.atb-deck { display: none; }
.atb-deck.is-active {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
}
/* Staggered tile entrance — tiles cascade in to catch the eye on open */
.atb-deck.is-active .atb-tile { animation: atbTileIn 360ms cubic-bezier(0.22,1,0.36,1) both; }
.atb-deck.is-active .atb-tile:nth-child(1)  { animation-delay: 20ms; }
.atb-deck.is-active .atb-tile:nth-child(2)  { animation-delay: 45ms; }
.atb-deck.is-active .atb-tile:nth-child(3)  { animation-delay: 70ms; }
.atb-deck.is-active .atb-tile:nth-child(4)  { animation-delay: 95ms; }
.atb-deck.is-active .atb-tile:nth-child(5)  { animation-delay: 120ms; }
.atb-deck.is-active .atb-tile:nth-child(6)  { animation-delay: 145ms; }
.atb-deck.is-active .atb-tile:nth-child(7)  { animation-delay: 170ms; }
.atb-deck.is-active .atb-tile:nth-child(8)  { animation-delay: 195ms; }
.atb-deck.is-active .atb-tile:nth-child(9)  { animation-delay: 220ms; }
.atb-deck.is-active .atb-tile:nth-child(10) { animation-delay: 245ms; }
.atb-deck.is-active .atb-tile:nth-child(n+11) { animation-delay: 268ms; }
@keyframes atbTileIn {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── ITEM TILE (app-launcher) ─────────────────────────────────── */
.atb-tile {
  /* --z inherits from the deck's .zone-* so each category is colour-true */
  position: relative;
  overflow: hidden;                 /* clips the water-drop ripple to the tile */
  width: 110px; flex: 0 0 110px;    /* fixed width → tiles pack left, no empty grid void */
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 7px 10px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: transform 180ms cubic-bezier(0.22,1,0.36,1), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

/* ── Water-drop ripple — radiates from the cursor on hover ─────── */
.atb-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--z) 60%, transparent) 0%,
    color-mix(in srgb, var(--z) 30%, transparent) 40%,
    transparent 72%);
  transform: scale(0);
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
  animation: atbRipple 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes atbRipple {
  to { transform: scale(1); opacity: 0; }
}
/* keep icon + label above the ripple */
.atb-tile-ic, .atb-tile-lb { position: relative; z-index: 1; }
.atb-tile-ic {
  position: relative;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--z) 12%, rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--z) 22%, transparent);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.atb-tile-ic svg { width: 18px; height: 18px; color: var(--z); transition: transform 180ms ease; }
.atb-tile-lb {
  font-size: 11px; font-weight: 600; line-height: 1.2;
  color: rgba(255,255,255,0.82);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 180ms ease;
}
.atb-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--z) 45%, transparent);
  background: color-mix(in srgb, var(--z) 8%, rgba(255,255,255,0.02));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--z) 22%, transparent), 0 2px 6px rgba(0,0,0,0.30);
}
.atb-tile:hover .atb-tile-ic {
  background: color-mix(in srgb, var(--z) 24%, transparent);
  border-color: color-mix(in srgb, var(--z) 55%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--z) 35%, transparent);
}
.atb-tile:hover .atb-tile-ic svg { transform: scale(1.1); }
.atb-tile:hover .atb-tile-lb { color: #fff; }

.atb-tile.is-current {
  border-color: color-mix(in srgb, var(--z) 55%, transparent);
  background: color-mix(in srgb, var(--z) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z) 30%, transparent);
}
.atb-tile.is-current .atb-tile-ic { background: color-mix(in srgb, var(--z) 26%, transparent); border-color: color-mix(in srgb, var(--z) 60%, transparent); }
.atb-tile.is-current .atb-tile-lb { color: var(--z); }

/* Tile badge (alert counts) — corner pill on the icon */
.atb-tile-bdg {
  position: absolute; top: -5px; right: -7px;
  font-size: 9px; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: 99px;
  background: #0c0e16;
  color: #67e8f9;
  border: 1px solid rgba(0,217,255,0.5);
  font-variant-numeric: tabular-nums;
}
.atb-tile-bdg.alert { color: #fda4af; border-color: rgba(244,63,94,0.6); }

/* ════════════════════════════════════════════════════════════════
   OPERATIONAL ZONING — accents stay inside the cyan→violet aurora
   spectrum so the signature identity is preserved (no green/gold/red).
   Element-agnostic so --z resolves on both the rail row + the pane.
   ════════════════════════════════════════════════════════════════ */
.aurora-topbar .zone-cyan   { --z: #00d9ff; }   /* Home / Main / Quick      */
.aurora-topbar .zone-teal   { --z: #2dd4bf; }   /* Sales & Bookings         */
.aurora-topbar .zone-sky    { --z: #38bdf8; }   /* Payments                 */
.aurora-topbar .zone-indigo { --z: #818cf8; }   /* Reports & Docs           */
.aurora-topbar .zone-violet { --z: #a855f7; }   /* Clients / Quick          */
.aurora-topbar .zone-purple { --z: #c084fc; }   /* Finance & Compliance     */
.aurora-topbar .zone-slate  { --z: #94a3b8; }   /* System                   */
.aurora-topbar .zone-aurora { --z: #00d9ff; }   /* Recovery (operational heart) */

/* Recovery — signature cyan→violet gradient on the active tab label. */
.atb-tab.zone-aurora.is-active .atb-tab-lb {
  background: linear-gradient(90deg, #00d9ff, #c084fc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME
   ════════════════════════════════════════════════════════════════ */
[data-theme="light"] .aurora-topbar-bar {
  background: linear-gradient(180deg, #fafbff, #f0f3fc);
  border-bottom-color: rgba(0,140,170,0.25);
}
[data-theme="light"] .aurora-topbar-trigger {
  background: linear-gradient(90deg, rgba(37,99,235,0.06), rgba(168,85,247,0.04));
  border-color: rgba(37,99,235,0.22);
}
[data-theme="light"] .atb-current-lbl { background: linear-gradient(90deg, #2563EB, #c084fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="light"] .atb-current-name { color: #0f0f1a; }
[data-theme="light"] .atb-chev { color: #2563EB; }

/* Light theme → LIGHT panel (matches the active theme). Dark text, deeper hues. */
[data-theme="light"] .aurora-topbar-mega {
  background:
    radial-gradient(ellipse 620px 150px at 50% -16%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(ellipse 440px 140px at 86% -8%, rgba(168,85,247,0.07), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5f8fd 55%, #eef2fb 100%);
  border-color: rgba(37,99,235,0.18);
  border-bottom-color: rgba(37,99,235,0.28);
  box-shadow: 0 18px 48px rgba(15,23,42,0.16), 0 0 0 1px rgba(37,99,235,0.05);
}
[data-theme="light"] .aurora-topbar-mega::before {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.45) 35%, rgba(168,85,247,0.40) 65%, transparent);
}
[data-theme="light"] .atb-tabs { border-bottom-color: rgba(15,23,42,0.08); }
[data-theme="light"] .atb-tab { color: rgba(15,23,42,0.62); background: transparent; }
[data-theme="light"] .atb-tab:hover { color: #0f0f1a; background: transparent; border-color: color-mix(in srgb, var(--z) 45%, rgba(15,23,42,0.18)); }
[data-theme="light"] .atb-tab-cnt { background: rgba(15,23,42,0.07); color: rgba(15,23,42,0.6); }
[data-theme="light"] .atb-tile { border-color: rgba(15,23,42,0.10); background: rgba(15,23,42,0.02); }
[data-theme="light"] .atb-tile-lb { color: rgba(15,23,42,0.82); }
[data-theme="light"] .atb-tile:hover .atb-tile-lb { color: #0f0f1a; }
[data-theme="light"] .atb-tile-bdg { background: #ffffff; color: #0891b2; border-color: rgba(8,145,178,0.5); }
[data-theme="light"] .atb-tile-bdg.alert { color: #dc2626; border-color: rgba(220,38,38,0.5); }

/* Light bg → deeper zone hues so colours stay legible */
[data-theme="light"] .aurora-topbar .zone-cyan   { --z: #0891b2; }
[data-theme="light"] .aurora-topbar .zone-teal   { --z: #0d9488; }
[data-theme="light"] .aurora-topbar .zone-sky    { --z: #0284c7; }
[data-theme="light"] .aurora-topbar .zone-indigo { --z: #4f46e5; }
[data-theme="light"] .aurora-topbar .zone-violet { --z: #7c3aed; }
[data-theme="light"] .aurora-topbar .zone-purple { --z: #9333ea; }
[data-theme="light"] .aurora-topbar .zone-slate  { --z: #64748b; }
[data-theme="light"] .aurora-topbar .zone-aurora { --z: #0891b2; }
[data-theme="light"] .atb-tab.zone-aurora.is-active .atb-tab-lb { background: linear-gradient(90deg, #0891b2, #9333ea); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .atb-current-lbl { display: none; }
  .aurora-topbar-bar { padding: 0 14px; }
  .aurora-topbar-mega { width: calc(100% - 16px); max-height: min(72vh, calc(100vh - 100px)); }
  .atb-mega-grid { max-height: min(72vh, calc(100vh - 112px)); }
  .atb-tabs { padding: 12px 14px 10px; }
  .atb-stage { padding: 14px; }
  .atb-deck.is-active { gap: 8px; }
  .atb-tile { width: 92px; flex-basis: 92px; padding: 13px 8px 11px; }
  .atb-tile-ic { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-topbar, .aurora-topbar *,
  .aurora-topbar *::before, .aurora-topbar *::after {
    transition-duration: 100ms !important; animation: none !important;
  }
  .atb-hint { opacity: 0 !important; }
}

/* Fallback for browsers without color-mix() — keep tiles/tabs legible */
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .atb-tab:hover, .atb-tab.is-active { background: transparent; border-color: rgba(0,217,255,0.5); color: #67e8f9; }
  .atb-tile:hover { background: rgba(0,217,255,0.08); border-color: rgba(0,217,255,0.40); }
  .atb-tile.is-current { background: rgba(0,217,255,0.14); border-color: rgba(0,217,255,0.5); }
  .atb-tile-ic { background: rgba(0,217,255,0.12); border-color: rgba(0,217,255,0.22); }
}