/* ============================================================================
   AvaSci — "Meridian" theme  ·  creative redesign over Bootstrap 5
   ----------------------------------------------------------------------------
   Type:   Newsreader (editorial serif display) · Schibsted Grotesk (UI) · IBM Plex Mono (data)
   Icons:  Phosphor
   Motif:  longitude/meridian lines + indigo-night glass; cyan→emerald signal
   Load AFTER bootstrap.min.css and the legacy site.css. Variable-driven.
   (Prior themes preserved: avasci-theme-motionlab.css, avasci-theme-vitalis.css.)
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens -- */
:root {
  /* Surfaces — indigo-night ink ramp */
  --av-bg:        #080B1A;
  --av-surface-1: #0E1330;
  --av-surface-2: #141A3A;
  --av-surface-3: #1E2750;
  --av-surface-4: #2A356A;

  --av-line:        rgba(150,170,210,.13);
  --av-line-strong: rgba(150,170,210,.22);
  --av-line-faint:  rgba(150,170,210,.07);

  --av-ink:       #EEF2FB;
  --av-ink-muted: #9FA9C2;
  --av-ink-dim:   #6B7691;

  /* Brand — refined blue→cyan with a green vitality signal */
  --av-accent:      #3B9EFF;
  --av-accent-2:    #36E2C8;
  --av-accent-600:  #2A7FE0;
  --av-accent-ink:  #04101F;
  --av-vitality:    #4ADE80;
  --av-grad:        linear-gradient(118deg, #3B9EFF 0%, #36E2C8 92%);
  --av-grad-soft:   linear-gradient(118deg, rgba(59,158,255,.16), rgba(54,226,200,.16));
  /* Orange neon — primary buttons */
  --av-btn:         linear-gradient(118deg, #FF9A2B 0%, #FF5E2C 94%);
  --av-btn-ink:     #1F0A00;
  --av-btn-glow:    rgba(255,120,44,.42);
  --av-btn-glow-hi: rgba(255,150,43,.5);
  --av-accent-soft: rgba(59,158,255,.13);
  --av-accent-ring: rgba(59,158,255,.5);

  --av-success: #3DDC84; --av-success-soft: rgba(61,220,132,.14);
  --av-warning: #FFB454; --av-warning-soft: rgba(255,180,84,.14);
  --av-danger:  #FF6B73; --av-danger-soft:  rgba(255,107,115,.14);

  /* Liquid-glass surfaces (themeable) — indigo tint, more transparent */
  --av-glass:        linear-gradient(165deg, rgba(62,74,150,.34), rgba(16,22,52,.44));
  --av-glass-table:  linear-gradient(165deg, rgba(62,74,150,.3), rgba(16,22,52,.4));
  --av-glass-strong: linear-gradient(165deg, rgba(58,70,140,.66), rgba(16,22,52,.78));
  --av-glass-menu:   linear-gradient(165deg, rgba(58,70,140,.72), rgba(18,24,56,.82));
  --av-glass-sheen:  rgba(255,255,255,.07);
  --av-glass-sheen-top: rgba(190,212,255,.14);
  --av-report-glass: linear-gradient(155deg, rgba(62,74,150,.3), rgba(13,17,44,.5));
  --av-grid-line: rgba(150,170,230,.06);
  --av-toast-bg: #fff; --av-toast-ink: #0B1426;
  --av-scrim: rgba(8,11,26,.66);          /* topbar/sidebar blur scrim */
  --av-sidebar-grad: linear-gradient(180deg, rgba(16,21,52,.62), rgba(8,11,26,.88));

  /* AI report category gradients */
  --av-cat-insights: linear-gradient(135deg,#6366F1,#A855F7);
  --av-cat-compare:  linear-gradient(135deg,#06B6D4,#22D3EE);
  --av-cat-athletic: linear-gradient(135deg,#F97316,#FBBF24);
  --av-cat-consist:  linear-gradient(135deg,#10B981,#A3E635);

  /* Type — editorial serif display + grotesk UI + mono data */
  --av-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --av-font: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --av-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --av-font-num: 'Schibsted Grotesk', system-ui, sans-serif;  /* big numerals stay grotesk for legibility */

  /* Radius — softer, more premium */
  --av-radius-sm: 10px;
  --av-radius:    14px;
  --av-radius-lg: 18px;
  --av-radius-xl: 24px;
  --av-pill: 999px;

  --av-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --av-shadow:    0 10px 30px rgba(0,0,0,.4);
  --av-shadow-lg: 0 24px 60px rgba(0,0,0,.5);
  --av-glow:      0 0 0 4px var(--av-accent-soft);

  --av-sidebar-w: 256px;
  --av-topbar-h:  62px;

  /* Bootstrap remap */
  --bs-body-bg: var(--av-bg);
  --bs-body-color: var(--av-ink);
  --bs-body-font-family: var(--av-font);
  --bs-emphasis-color: var(--av-ink);
  --bs-secondary-color: var(--av-ink-muted);
  --bs-tertiary-color: var(--av-ink-dim);
  --bs-border-color: var(--av-line);
  --bs-border-color-translucent: var(--av-line);
  --bs-link-color: var(--av-accent);
  --bs-link-color-rgb: 69,164,255;
  --bs-link-hover-color: #6FB8FF;
  --bs-primary: var(--av-accent);
  --bs-primary-rgb: 69,164,255;
  --bs-focus-ring-color: var(--av-accent-ring);
  --bs-border-radius: var(--av-radius);
  --bs-border-radius-sm: var(--av-radius-sm);
  --bs-border-radius-lg: var(--av-radius-lg);
}

/* ============================================================================
   LIGHT THEME  ·  set <html data-theme="light"> (toggled + persisted by shell.js)
   A cool clinical daylight palette; glass becomes frosted white.
   ========================================================================== */
[data-theme="light"] {
  --av-bg:        #EEF2F9;
  --av-surface-1: #FFFFFF;
  --av-surface-2: #FFFFFF;
  --av-surface-3: #F1F4FA;
  --av-surface-4: #E6ECF6;

  --av-line:        rgba(30,52,92,.14);
  --av-line-strong: rgba(30,52,92,.22);
  --av-line-faint:  rgba(30,52,92,.08);

  --av-ink:       #0E1A2E;
  --av-ink-muted: #4A586F;
  --av-ink-dim:   #7C8AA3;

  --av-accent:      #1E7FE0;
  --av-accent-2:    #11B5C9;
  --av-accent-600:  #1668BD;
  --av-accent-ink:  #FFFFFF;
  --av-grad:        linear-gradient(120deg, #1E7FE0 0%, #11B5C9 100%);
  --av-grad-soft:   linear-gradient(120deg, rgba(30,127,224,.12), rgba(17,181,201,.12));
  --av-btn:         linear-gradient(120deg, #FB8B1E 0%, #F5532A 100%);
  --av-btn-ink:     #2A0C00;
  --av-btn-glow:    rgba(251,139,30,.34);
  --av-btn-glow-hi: rgba(245,83,42,.42);
  --av-accent-soft: rgba(30,127,224,.10);
  --av-accent-ring: rgba(30,127,224,.4);

  --av-success: #1FA463; --av-success-soft: rgba(31,164,99,.12);
  --av-warning: #C77A12; --av-warning-soft: rgba(199,122,18,.12);
  --av-danger:  #DC3D45; --av-danger-soft:  rgba(220,61,69,.12);

  /* Frosted-white glass — more transparent */
  --av-glass:        linear-gradient(165deg, rgba(255,255,255,.66), rgba(238,243,250,.5));
  --av-glass-table:  linear-gradient(165deg, rgba(255,255,255,.62), rgba(238,243,250,.46));
  --av-glass-strong: linear-gradient(165deg, rgba(255,255,255,.86), rgba(240,244,250,.78));
  --av-glass-menu:   linear-gradient(165deg, rgba(255,255,255,.95), rgba(238,243,250,.9));
  --av-glass-sheen:  rgba(255,255,255,.6);
  --av-glass-sheen-top: rgba(255,255,255,.7);
  --av-report-glass: linear-gradient(155deg, rgba(255,255,255,.82), rgba(238,243,250,.62));
  --av-grid-line: rgba(30,52,92,.05);
  --av-toast-bg: #0E1A2E; --av-toast-ink: #F4F7FF;
  --av-scrim: rgba(255,255,255,.72);
  --av-sidebar-grad: linear-gradient(180deg, rgba(255,255,255,.7), rgba(238,243,250,.55));

  --av-shadow-sm: 0 1px 2px rgba(30,52,92,.08);
  --av-shadow:    0 10px 30px rgba(30,52,92,.10);
  --av-shadow-lg: 0 24px 60px rgba(30,52,92,.16);

  --bs-link-hover-color: #1668BD;
}

/* ----------------------------------------------------------------- Base -- */
body {
  background: var(--av-bg);
  color: var(--av-ink);
  font-family: var(--av-font);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,.av-display { font-family: var(--av-font-display); font-weight: 500; letter-spacing: -.01em; color: var(--av-ink); }
.av-page-head h1 { font-weight: 500; letter-spacing: -.015em; }
a { color: var(--av-accent); text-decoration: none; }
a:hover { color: #7CC4FF; }
.text-muted, .text-secondary { color: var(--av-ink-muted) !important; }
.av-dim { color: var(--av-ink-dim); }
code, .av-mono, .font-monospace { font-family: var(--av-font-mono); font-variant-numeric: tabular-nums; }
.av-eyebrow { font-family: var(--av-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--av-accent-2); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--av-surface-3); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--av-accent); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------- Motion grid -- */
/* Signature backdrop: faint coordinate grid + drifting tracking dots. */
.av-app { display: flex; min-height: 100vh; position: relative; background: var(--av-bg); }
.av-app::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, var(--av-grid-line) 78px 79px),
    repeating-linear-gradient(90deg, transparent 0 13px, var(--av-grid-line) 13px 13.5px);
  -webkit-mask-image: radial-gradient(150% 120% at 82% -10%, #000 18%, transparent 70%);
  mask-image: radial-gradient(150% 120% at 82% -10%, #000 18%, transparent 70%);
}
/* Blue aurora base layer (injected .av-fx by shell.js) */
.av-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1000px 620px at 84% -12%, rgba(69,164,255,.16), transparent 60%),
    radial-gradient(820px 560px at 2% 6%, rgba(52,230,214,.10), transparent 55%),
    radial-gradient(760px 620px at 12% 108%, rgba(139,92,246,.12), transparent 58%),
    radial-gradient(900px 700px at 100% 96%, rgba(16,185,129,.07), transparent 55%);
  animation: av-aurora 26s ease-in-out infinite alternate;
}
/* Orange wash that breathes over the blue: background drifts blue → orange → blue */
.av-app::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1040px 660px at 84% -12%, rgba(255,140,46,.20), transparent 60%),
    radial-gradient(820px 560px at 2% 6%, rgba(255,94,44,.13), transparent 55%),
    radial-gradient(900px 700px at 100% 96%, rgba(255,176,64,.10), transparent 55%);
  opacity: 0; animation: av-warmwash 24s ease-in-out infinite;
}
@keyframes av-warmwash { 0%, 100% { opacity: 0; } 50% { opacity: .92; } }
@keyframes av-aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-1.5%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.02); }
}
.av-main, .av-sidebar { position: relative; z-index: 1; }
.av-content > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------- App shell -- */
.av-sidebar {
  width: var(--av-sidebar-w); flex: 0 0 var(--av-sidebar-w);
  background: radial-gradient(130% 36% at 50% -4%, var(--av-accent-soft), transparent 62%), var(--av-sidebar-grad);
  border-right: 1px solid var(--av-line-faint); padding: 18px 14px;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  backdrop-filter: blur(4px);
}
.av-brand { padding: 6px 8px 20px; display: flex; align-items: center; gap: 11px; }
.av-brand__logo {
  width: 34px; height: 34px; border-radius: 10px; background: var(--av-grad);
  display: flex; align-items: center; justify-content: center; flex: 0 0 34px;
  box-shadow: 0 6px 18px rgba(52,230,214,.35); position: relative; overflow: hidden;
}
.av-brand__logo::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 45%); }
.av-brand__logo i { color: #04101F; font-size: 19px; position: relative; z-index: 1; }
.av-brand__mark { font-family: var(--av-font-display); font-style: italic; font-weight: 700; font-size: 22px; line-height: 1; color: var(--av-ink); }
.av-brand__tag { font-family: var(--av-font-mono); font-size: 8.5px; letter-spacing: .06em; color: var(--av-ink-dim); margin-top: 3px; text-transform: uppercase; }

.av-nav { display: flex; flex-direction: column; gap: 2px; }
.av-nav__label { font-family: var(--av-font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--av-ink-dim); padding: 16px 12px 6px; }
.av-nav__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--av-radius); color: var(--av-ink-muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.av-nav__item:hover { background: var(--av-grad-soft); color: var(--av-ink); border-color: var(--av-line-strong); }
.av-nav__item:hover .av-nav__icon { color: var(--av-ink); }
.av-nav__item.active { background: var(--av-grad-soft); color: var(--av-ink); font-weight: 600; border: 1px solid var(--av-accent-ring); box-shadow: 0 0 0 1px var(--av-accent-soft), 0 10px 24px -12px var(--av-accent), inset 0 1px 0 rgba(255,255,255,.06); }
.av-nav__item.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--av-grad); box-shadow: 0 0 12px var(--av-accent); }
.av-nav__icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: var(--av-surface-3); color: var(--av-ink-muted); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background .15s, color .15s; }
.av-nav__item.active .av-nav__icon { background: var(--av-grad); color: var(--av-accent-ink); }

.av-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.av-topbar { height: var(--av-topbar-h); flex: 0 0 var(--av-topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 26px; border-bottom: 1px solid var(--av-line-faint); background: var(--av-scrim); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.av-topbar__spacer { flex: 1 1 auto; }
.av-topbar__link { color: var(--av-ink-muted); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.av-topbar__link:hover { color: var(--av-ink); }
.av-content { padding: 30px 34px 52px; flex: 1 1 auto; }

.av-page-head { margin-bottom: 26px; }
.av-page-head h1 { font-size: 30px; margin: 0 0 5px; }
.av-page-head p { margin: 0; color: var(--av-ink-muted); font-size: 15px; }

.av-search { position: relative; width: 340px; max-width: 40vw; }
.av-search input { width: 100%; background: var(--av-surface-2); border: 1px solid var(--av-line); color: var(--av-ink); border-radius: var(--av-pill); padding: 8px 14px 8px 40px; font-size: 14px; font-family: var(--av-font); }
.av-search input::placeholder { color: var(--av-ink-dim); }
.av-search input:focus { outline: none; border-color: var(--av-accent); box-shadow: var(--av-glow); }
.av-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--av-ink-dim); font-size: 16px; }

/* ----------------------------------------------------------- Buttons -- */
.btn { border-radius: var(--av-pill); font-weight: 600; font-size: 14px; padding: 9px 20px; font-family: var(--av-font); transition: filter .15s, box-shadow .15s, transform .04s; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 12px 26px; font-size: 16px; }
.btn-primary, .btn-av { position: relative; background: var(--av-btn); border: none; color: var(--av-btn-ink); box-shadow: 0 8px 22px var(--av-btn-glow); }
.btn-primary:hover, .btn-av:hover { color: var(--av-btn-ink); filter: brightness(1.07); box-shadow: 0 12px 30px var(--av-btn-glow-hi); }
.btn-primary:focus-visible, .btn-av:focus-visible { box-shadow: var(--av-glow); }
.btn-secondary, .btn-av-ghost { background: var(--av-surface-3); border: 1px solid var(--av-line-strong); color: var(--av-ink); }
.btn-secondary:hover, .btn-av-ghost:hover { background: var(--av-surface-4); color: var(--av-ink); }
.btn-outline-light { border-color: var(--av-line-strong); color: var(--av-ink); }
.btn-outline-light:hover { background: var(--av-surface-3); color: var(--av-ink); }
.btn-danger { background: var(--av-danger); border-color: #E25058; color: #2A0608; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--av-ink-muted); }
.btn-ghost:hover { background: var(--av-surface-2); color: var(--av-ink); }
.av-iconbtn { width: 36px; height: 36px; border-radius: var(--av-radius); border: 1px solid var(--av-line); background: var(--av-surface-2); color: var(--av-ink-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
.av-iconbtn:hover { background: var(--av-surface-3); color: var(--av-ink); }

/* ------------------------------------------------------------- Cards -- */
/* Liquid glass: translucent fill + backdrop blur + top sheen highlight. */
.card, .av-card {
  position: relative;
  background: var(--av-glass);
  border: 1px solid var(--av-line-strong);
  border-radius: var(--av-radius-xl); color: var(--av-ink);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--av-shadow), inset 0 1px 0 var(--av-glass-sheen);
}
/* glass sheen on the top edge */
.card::after, .av-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--av-glass-sheen-top), transparent 38%);
  -webkit-mask: linear-gradient(#000,#000); opacity: .8;
}
.card > *, .av-card > * { position: relative; z-index: 1; }
.card-header, .av-card__head { background: transparent; border-bottom: 1px solid var(--av-line); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; }
.card-header { font-weight: 600; font-family: var(--av-font-display); }
.card-body, .av-card__body { padding: 22px; }
.av-card__title { font-family: var(--av-font-display); font-size: 17px; font-weight: 600; margin: 0; }

.av-stat { padding: 20px 22px; position: relative; overflow: hidden; }
.av-stat__label { font-size: 13px; color: var(--av-ink-muted); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.av-stat__label i { font-size: 16px; }
.av-stat__value { font-family: var(--av-font-num); font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.av-stat__delta { font-size: 13px; font-weight: 600; margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--av-font-mono); }
.av-stat__delta.up { color: var(--av-success); }
.av-stat__delta.down { color: var(--av-danger); }
.av-stat__icon { width: 40px; height: 40px; border-radius: var(--av-radius); display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* ------------------------------------------------------------ Badges -- */
.badge { font-weight: 600; font-size: 12px; padding: 5px 11px; border-radius: var(--av-pill); border: 1px solid transparent; }
.av-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .02em; }
.av-badge i { font-size: 13px; }
.av-badge--neutral { background: rgba(150,170,210,.08); color: var(--av-ink-muted); border-color: var(--av-line); }
.av-badge--accent  { background: var(--av-accent-soft); color: #9CD0FF; border-color: var(--av-accent-ring); }
.av-badge--success { background: var(--av-success-soft); color: #86EFB5; border-color: rgba(61,220,132,.35); }
.av-badge--warning { background: var(--av-warning-soft); color: #FFD08A; border-color: rgba(255,180,84,.35); }
.av-badge--danger  { background: var(--av-danger-soft);  color: #FFA0A5; border-color: rgba(255,107,115,.35); }
.av-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ------------------------------------------------------------- Forms -- */
.form-label { font-size: 13px; color: var(--av-ink-muted); font-weight: 500; margin-bottom: 6px; }
.form-control, .form-select { background: var(--av-surface-1); border: 1px solid var(--av-line); color: var(--av-ink); border-radius: var(--av-radius-sm); padding: 10px 13px; font-size: 14px; font-family: var(--av-font); }
.form-control::placeholder { color: var(--av-ink-dim); }
.form-control:focus, .form-select:focus { background: var(--av-surface-1); color: var(--av-ink); border-color: var(--av-accent); box-shadow: var(--av-glow); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239FA9C2'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.form-check-input { background: var(--av-surface-1); border-color: var(--av-line-strong); }
.form-check-input:checked { background: var(--av-accent); border-color: var(--av-accent); }
.input-group-text { background: var(--av-surface-3); border-color: var(--av-line); color: var(--av-ink-muted); }

/* ------------------------------------------------------------ Tables -- */
.table { --bs-table-bg: transparent; color: var(--av-ink); margin: 0; border-color: var(--av-line); }
.table > thead th { font-family: var(--av-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; color: var(--av-ink-muted); border-bottom: 1px solid var(--av-line); padding: 12px 14px; white-space: nowrap; }
.table > tbody td { padding: 13px 14px; border-bottom: 1px solid var(--av-line-faint); color: var(--av-ink); vertical-align: middle; font-size: 14px; }
.table > tbody tr { transition: background .12s; }
.table > tbody tr:hover td { background: var(--av-surface-3); }
.table > tbody td:first-child { color: var(--av-ink); font-weight: 600; }
.av-table-card { position: relative; background: var(--av-glass-table); border: 1px solid var(--av-line-strong); border-radius: var(--av-radius-xl); overflow: hidden; -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: var(--av-shadow), inset 0 1px 0 var(--av-glass-sheen); }
.av-table-card .av-card__head { padding: 18px 20px; }

.dataTables_wrapper { color: var(--av-ink-muted); padding: 16px 20px; font-family: var(--av-font); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { background: var(--av-surface-1); border: 1px solid var(--av-line); color: var(--av-ink); border-radius: var(--av-radius-sm); padding: 6px 10px; margin: 0 6px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--av-ink-muted) !important; border-radius: var(--av-radius-sm); border: 1px solid transparent !important; padding: 5px 11px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--av-accent) !important; color: var(--av-accent-ink) !important; border-color: var(--av-accent-600) !important; }

/* Bootstrap-5 DataTables pagination (.page-link / .page-item) — the real markup */
.pagination { gap: 6px; margin: 0; }
.page-link {
  background: var(--av-surface-3); border: 1px solid var(--av-line);
  color: var(--av-ink-muted); border-radius: var(--av-radius-sm) !important;
  padding: 7px 13px; font-size: 13px; font-family: var(--av-font-mono); transition: all .15s;
}
.page-link:hover { background: var(--av-surface-4); border-color: var(--av-line-strong); color: var(--av-ink); }
.page-link:focus { box-shadow: var(--av-glow); }
.page-item.active .page-link {
  background: var(--av-grad); border: none; color: var(--av-accent-ink);
  box-shadow: 0 6px 16px rgba(69,164,255,.3);
}
.page-item.disabled .page-link { background: transparent; border-color: var(--av-line-faint); color: var(--av-ink-dim); opacity: .6; }

/* Theme toggle pill in the topbar */
.av-theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--av-line);
  background: var(--av-surface-2); color: var(--av-ink-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  transition: background .15s, color .15s, transform .3s;
}
.av-theme-toggle:hover { background: var(--av-surface-3); color: var(--av-accent); }
.av-theme-toggle:active { transform: scale(.92) rotate(35deg); }
.av-theme-toggle .ph-sun { display: none; }
.av-theme-toggle .ph-moon { display: inline; }
[data-theme="light"] .av-theme-toggle .ph-sun { display: inline; }
[data-theme="light"] .av-theme-toggle .ph-moon { display: none; }

/* --------------------------------------------------------- Nav / Tabs -- */
.nav-tabs { border-bottom: 1px solid var(--av-line); gap: 4px; }
.nav-tabs .nav-link { color: var(--av-ink-muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 16px; font-weight: 600; font-size: 14px; font-family: var(--av-font); }
.nav-tabs .nav-link:hover { color: var(--av-ink); border-bottom-color: #FF7A2C; }
.nav-tabs .nav-link.active { color: var(--av-ink); background: transparent; border-bottom-color: var(--av-accent); }
.nav-pills .nav-link { color: var(--av-ink-muted); border-radius: var(--av-pill); padding: 7px 16px; font-weight: 600; font-size: 13px; font-family: var(--av-font-mono); transition: background .15s, color .15s; }
.nav-pills .nav-link:hover { background: linear-gradient(118deg, rgba(255,154,43,.16), rgba(255,94,44,.16)); color: var(--av-ink); }
.nav-pills .nav-link.active { background: var(--av-grad); color: var(--av-accent-ink); }

/* ------------------------------------------------ Modals / Dropdowns -- */
.modal-content { background: var(--av-glass-strong); border: 1px solid var(--av-line-strong); border-radius: var(--av-radius-xl); color: var(--av-ink); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); box-shadow: var(--av-shadow-lg), inset 0 1px 0 var(--av-glass-sheen); }
.modal-header, .modal-footer { border-color: var(--av-line); }
.modal-title { font-family: var(--av-font-display); }
.dropdown-menu { background: var(--av-glass-menu); border: 1px solid var(--av-line-strong); border-radius: var(--av-radius); box-shadow: var(--av-shadow); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.dropdown-item { color: var(--av-ink-muted); }
.dropdown-item:hover { background: var(--av-surface-3); color: var(--av-ink); }
.dropdown-divider { border-color: var(--av-line); }
.select2-container--default .select2-selection--single { background: var(--av-surface-1); border: 1px solid var(--av-line); border-radius: var(--av-radius-sm); height: 42px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--av-ink); line-height: 42px; }
.select2-dropdown { background: var(--av-surface-4); border-color: var(--av-line-strong); color: var(--av-ink); }
.select2-results__option--highlighted { background: var(--av-accent) !important; color: var(--av-accent-ink) !important; }

/* ----------------------------------------------------------- Alerts -- */
.alert { border-radius: var(--av-radius); border: 1px solid var(--av-line); background: var(--av-surface-3); color: var(--av-ink); }
.alert-success { background: var(--av-success-soft); border-color: rgba(61,220,132,.35); color: #BFF3CF; }
.alert-warning { background: var(--av-warning-soft); border-color: rgba(255,180,84,.35); color: #FFE0B0; }
.alert-danger  { background: var(--av-danger-soft);  border-color: rgba(255,107,115,.35); color: #FFC2C5; }
.alert-info    { background: var(--av-accent-soft);  border-color: var(--av-accent-ring); color: #BFE0FF; }
.av-toast { background: var(--av-toast-bg); color: var(--av-toast-ink); border-left: 4px solid var(--av-accent); border-radius: var(--av-radius-sm); padding: 13px 18px; box-shadow: var(--av-shadow-lg); display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.av-toast.success { border-left-color: var(--av-success); }
.av-toast.danger { border-left-color: var(--av-danger); }

/* --------------------------------------------------- AI report cards -- */
.av-report { --cat: #8B5CF6; -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--av-report-glass); border: 1px solid var(--av-line); border-radius: var(--av-radius-xl); padding: 26px; min-height: 282px; transition: border-color .25s, transform .25s, box-shadow .25s; }
/* beautiful baked category aura (top-right) + soft inner sheen */
.av-report::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--cat) 22%, transparent), transparent 58%), linear-gradient(160deg, var(--av-glass-sheen-top), transparent 34%); opacity: .9; }
.av-report::after { content: ""; position: absolute; bottom: -70px; left: -50px; width: 200px; height: 200px; border-radius: 50%; background: var(--cat); filter: blur(70px); opacity: .14; transition: opacity .25s; pointer-events: none; z-index: 0; }
.av-report > * { position: relative; z-index: 1; }
.av-report:hover { transform: translateY(-6px); }
.av-report:hover::after { opacity: .3; }
.av-report__icon { position: relative; width: 56px; height: 56px; border-radius: var(--av-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; box-shadow: var(--av-shadow); margin-bottom: 18px; }
.av-report__title { font-family: var(--av-font-display); font-size: 19px; font-weight: 600; margin: 0 0 8px; }
.av-report__desc { color: var(--av-ink-muted); font-size: 14px; line-height: 1.55; flex: 1 1 auto; margin: 0 0 16px; }
.av-report__list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.av-report__list li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--av-ink); }
.av-report__list li i { color: var(--av-accent); font-size: 16px; flex: 0 0 auto; }
.av-report__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.av-report__cta { align-self: flex-start; border: none; border-radius: var(--av-radius); color: #fff; font-weight: 600; font-size: 14px; padding: 11px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: gap .2s, filter .2s; }
.av-report__cta:hover { gap: 12px; filter: brightness(1.08); }
.cat-insights { --cat: #8B5CF6; } .cat-compare { --cat: #22D3EE; } .cat-athletic { --cat: #F97316; } .cat-consist { --cat: #10B981; }
.cat-insights .av-report__icon, .cat-insights .av-report__cta { background: var(--av-cat-insights); }
.cat-compare  .av-report__icon, .cat-compare  .av-report__cta { background: var(--av-cat-compare); }
.cat-athletic .av-report__icon, .cat-athletic .av-report__cta { background: var(--av-cat-athletic); }
.cat-consist  .av-report__icon, .cat-consist  .av-report__cta { background: var(--av-cat-consist); }
.cat-insights:hover { border-color: rgba(139,92,246,.5); box-shadow: 0 20px 44px rgba(139,92,246,.22); }
.cat-compare:hover  { border-color: rgba(34,211,238,.5); box-shadow: 0 20px 44px rgba(34,211,238,.22); }
.cat-athletic:hover { border-color: rgba(249,115,22,.5); box-shadow: 0 20px 44px rgba(249,115,22,.22); }
.cat-consist:hover  { border-color: rgba(16,185,129,.5); box-shadow: 0 20px 44px rgba(16,185,129,.22); }

/* AI report list rows (alternate presentation) */
.av-replist { display: flex; flex-direction: column; gap: 14px; }
.av-rrow {
  position: relative; display: flex; align-items: center; gap: 22px; overflow: hidden;
  background: var(--av-report-glass); border: 1px solid var(--av-line);
  border-radius: var(--av-radius-xl); padding: 22px 26px; text-decoration: none; color: var(--av-ink);
  -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.av-rrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; opacity: .95; }
.av-rrow::after { content: ""; position: absolute; left: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; filter: blur(54px); opacity: .22; transition: opacity .22s; pointer-events: none; }
.av-rrow:hover { transform: translateX(4px); color: var(--av-ink); }
.av-rrow:hover::after { opacity: .5; }
.av-rrow__icon { width: 58px; height: 58px; flex: 0 0 58px; border-radius: var(--av-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 27px; color: #fff; box-shadow: var(--av-shadow); }
.av-rrow__body { flex: 1 1 auto; min-width: 0; }
.av-rrow__title { font-family: var(--av-font-display); font-size: 18px; font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.av-rrow__desc { color: var(--av-ink-muted); font-size: 13.5px; line-height: 1.5; margin: 0; max-width: 68ch; }
.av-rrow__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.av-rrow__tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.av-rrow__go { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; box-shadow: var(--av-shadow); transition: transform .2s; }
.av-rrow:hover .av-rrow__go { transform: translateX(3px); }
.cat-insights.av-rrow::before, .cat-insights .av-rrow__icon, .cat-insights .av-rrow__go { background: var(--av-cat-insights); }
.cat-compare.av-rrow::before,  .cat-compare .av-rrow__icon,  .cat-compare .av-rrow__go  { background: var(--av-cat-compare); }
.cat-athletic.av-rrow::before, .cat-athletic .av-rrow__icon, .cat-athletic .av-rrow__go { background: var(--av-cat-athletic); }
.cat-consist.av-rrow::before,  .cat-consist .av-rrow__icon,  .cat-consist .av-rrow__go  { background: var(--av-cat-consist); }
.cat-insights.av-rrow::after { background: #8B5CF6; } .cat-compare.av-rrow::after { background: #22D3EE; }
.cat-athletic.av-rrow::after { background: #F97316; } .cat-consist.av-rrow::after { background: #10B981; }
.cat-insights.av-rrow:hover { border-color: rgba(139,92,246,.45); box-shadow: 0 16px 40px rgba(139,92,246,.18); }
.cat-compare.av-rrow:hover  { border-color: rgba(34,211,238,.45); box-shadow: 0 16px 40px rgba(34,211,238,.18); }
.cat-athletic.av-rrow:hover { border-color: rgba(249,115,22,.45); box-shadow: 0 16px 40px rgba(249,115,22,.18); }
.cat-consist.av-rrow:hover  { border-color: rgba(16,185,129,.45); box-shadow: 0 16px 40px rgba(16,185,129,.18); }
@media (max-width: 720px){ .av-rrow { flex-wrap: wrap; gap: 14px; } .av-rrow__meta { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; } }

/* Gradient display heading with animated shimmer */
.av-display { font-family: var(--av-font-display); font-style: italic; font-size: 46px; font-weight: 500; letter-spacing: -.02em; background: linear-gradient(100deg,#EEF2FB 28%, #7CC4FF 46%, #34E6D6 56%, #EEF2FB 72%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 6px; animation: av-shimmer 8s linear infinite; }
@keyframes av-shimmer { to { background-position: -220% center; } }

/* --------------------------------------------------------- Utilities -- */
.av-divider { height: 1px; background: var(--av-line); border: 0; margin: 20px 0; }
.av-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--av-surface-4); color: var(--av-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; font-family: var(--av-font-display); }
.av-meta { color: var(--av-ink-dim); font-size: 13px; }
.bg-surface-1 { background: var(--av-surface-1) !important; }
.bg-surface-2 { background: var(--av-surface-2) !important; }
.text-accent { color: var(--av-accent) !important; }

/* Scroll-reveal (driven by studio.js). Transform-only with a fully visible
   default — if transitions are frozen (off-screen iframe, print, PDF, DS
   card thumbnails) content still shows; it just doesn't slide. */
@media (prefers-reduced-motion: no-preference) {
  .av-reveal { transform: translateY(16px); transition: transform .55s cubic-bezier(.22,1,.36,1); }
  .av-reveal.is-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) { *, .av-display { animation: none !important; transition: none !important; } }

/* Responsive */
@media (max-width: 991.98px) {
  .av-sidebar { position: fixed; left: 0; top: 0; z-index: 1050; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--av-shadow-lg); }
  .av-sidebar.show { transform: translateX(0); }
  .av-content { padding: 22px 18px 40px; }
}

/* ====================================================================
   LIQUID GLASS utility + conversational Query Builder ("Ask the data")
   ==================================================================== */
.av-glass {
  background: var(--av-glass);
  border: 1px solid var(--av-line-strong); border-radius: var(--av-radius-xl);
  -webkit-backdrop-filter: blur(20px) saturate(145%); backdrop-filter: blur(20px) saturate(145%);
  box-shadow: var(--av-shadow), inset 0 1px 0 var(--av-glass-sheen);
}

/* Chat shell */
.av-chat { display: flex; flex-direction: column; height: 620px; overflow: hidden; }
.av-chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--av-line); }
.av-chat__orb { width: 38px; height: 38px; border-radius: 12px; background: var(--av-grad); display: flex; align-items: center; justify-content: center; color: var(--av-accent-ink); font-size: 19px; box-shadow: 0 6px 18px rgba(52,230,214,.4); position: relative; }
.av-chat__orb::after { content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6), transparent 46%); }
.av-chat__title { font-family: var(--av-font-display); font-weight: 600; font-size: 15px; }
.av-chat__sub { font-family: var(--av-font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--av-success); display: flex; align-items: center; gap: 6px; }
.av-chat__sub .av-dot { background: var(--av-success); box-shadow: 0 0 8px var(--av-success); animation: av-pulse 2s infinite; }
@keyframes av-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.av-chat__log { flex: 1 1 auto; overflow-y: auto; padding: 22px 20px; display: flex; flex-direction: column; gap: 18px; }
.av-msg { display: flex; gap: 11px; max-width: 88%; animation: av-msg-in .35s cubic-bezier(.22,1,.36,1); }
@keyframes av-msg-in { from { transform: translateY(10px); } to { transform: none; } }
.av-msg__av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.av-msg__bubble { padding: 12px 15px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.av-msg__bubble p { margin: 0 0 8px; } .av-msg__bubble p:last-child { margin: 0; }
/* assistant (left) */
.av-msg--ai .av-msg__av { background: var(--av-grad); color: var(--av-accent-ink); }
.av-msg--ai .av-msg__bubble { background: rgba(150,170,210,.08); border: 1px solid var(--av-line); border-top-left-radius: 4px; }
/* user (right) */
.av-msg--me { align-self: flex-end; flex-direction: row-reverse; }
.av-msg--me .av-msg__av { background: var(--av-surface-4); color: var(--av-ink); }
.av-msg--me .av-msg__bubble { background: var(--av-grad-soft); border: 1px solid var(--av-accent-ring); color: var(--av-ink); border-top-right-radius: 4px; }

/* generated SQL block */
.av-sql { margin-top: 10px; background: rgba(6,8,15,.6); border: 1px solid var(--av-line); border-radius: 10px; padding: 11px 13px; font-family: var(--av-font-mono); font-size: 12.5px; line-height: 1.6; color: #BFE0FF; white-space: pre-wrap; }
.av-sql .k { color: #34E6D6; } .av-sql .n { color: #FFD08A; } .av-sql .s { color: #86EFB5; }
.av-chip-result { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--av-font-mono); font-size: 12px; color: var(--av-success); }

/* typing indicator */
.av-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.av-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--av-ink-muted); animation: av-bounce 1.2s infinite; }
.av-typing span:nth-child(2){ animation-delay: .15s; } .av-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes av-bounce { 0%,60%,100%{ transform: translateY(0); opacity:.5 } 30%{ transform: translateY(-5px); opacity:1 } }

/* composer */
.av-chat__bar { padding: 14px 16px; border-top: 1px solid var(--av-line); }
.av-chat__input { display: flex; gap: 10px; align-items: flex-end; background: var(--av-surface-1); border: 1px solid var(--av-line); border-radius: 16px; padding: 8px 8px 8px 16px; transition: border-color .15s, box-shadow .15s; }
.av-chat__input:focus-within { border-color: var(--av-accent); box-shadow: var(--av-glow); }
.av-chat__input textarea { flex: 1 1 auto; background: transparent; border: none; resize: none; color: var(--av-ink); font-family: var(--av-font); font-size: 14px; line-height: 1.5; max-height: 96px; outline: none; padding: 6px 0; }
.av-chat__input textarea::placeholder { color: var(--av-ink-dim); }
.av-send { width: 40px; height: 40px; flex: 0 0 40px; border: none; border-radius: 12px; background: var(--av-btn); color: var(--av-btn-ink); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(69,164,255,.3); }
.av-send:hover { filter: brightness(1.08); }
.av-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.av-suggest button { background: rgba(150,170,210,.07); border: 1px solid var(--av-line); color: var(--av-ink-muted); border-radius: var(--av-pill); padding: 7px 14px; font-size: 12.5px; font-family: var(--av-font-mono); cursor: pointer; transition: all .15s; }
.av-suggest button:hover { border-color: var(--av-accent-ring); color: var(--av-ink); background: var(--av-accent-soft); }

/* Floating chart tooltip card (crosshair area charts) */
.av-charttip {
  position: absolute; z-index: 60; pointer-events: none; min-width: 190px;
  background: var(--av-glass-strong); border: 1px solid var(--av-line-strong);
  border-radius: 14px; padding: 13px 15px; box-shadow: var(--av-shadow-lg), inset 0 1px 0 var(--av-glass-sheen);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  transition: opacity .15s ease, left .08s ease, top .08s ease; opacity: 0;
}
.av-charttip__title { font-family: var(--av-font-display); font-weight: 600; font-size: 14px; color: var(--av-ink); margin-bottom: 9px; }
.av-charttip__row { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 3px 0; }
.av-charttip__lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--av-ink-muted); }
.av-charttip__val { font-family: var(--av-font-mono); font-size: 13px; font-weight: 600; color: var(--av-ink); font-variant-numeric: tabular-nums; }

/* ====================================================================
   UX components — quick-launch, sparkline tiles, activity feed
   ==================================================================== */

/* Quick-launch strip: one-tap access to the core report types */
.av-launch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 991.98px) { .av-launch { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .av-launch { grid-template-columns: 1fr; } }
.av-launch__tile {
  --cat: var(--av-accent);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; border-radius: var(--av-radius-lg); text-decoration: none;
  background: var(--av-glass); border: 1px solid var(--av-line-strong);
  box-shadow: var(--av-shadow-sm), inset 0 1px 0 var(--av-glass-sheen);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  transition: transform .2s, border-color .2s, box-shadow .2s; color: var(--av-ink);
}
.av-launch__tile::after { content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--cat); filter: blur(48px); opacity: .16; transition: opacity .2s; }
.av-launch__tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cat) 45%, transparent); box-shadow: 0 16px 34px rgba(0,0,0,.28); color: var(--av-ink); }
.av-launch__tile:hover::after { opacity: .32; }
.av-launch__ic { position: relative; z-index: 1; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: var(--cat-grad, var(--av-grad)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 21px; box-shadow: var(--av-shadow-sm); }
.av-launch__tx { position: relative; z-index: 1; min-width: 0; }
.av-launch__tx b { display: block; font-family: var(--av-font); font-weight: 600; font-size: 14px; line-height: 1.2; }
.av-launch__tx span { font-size: 12px; color: var(--av-ink-muted); }
.av-launch__go { position: relative; z-index: 1; margin-left: auto; color: var(--av-ink-dim); font-size: 17px; transition: transform .2s, color .2s; }
.av-launch__tile:hover .av-launch__go { color: var(--cat); transform: translateX(3px); }
.cat-insights { --cat: #8B5CF6; --cat-grad: var(--av-cat-insights); }
.cat-compare  { --cat: #22D3EE; --cat-grad: var(--av-cat-compare); }
.cat-athletic { --cat: #F97316; --cat-grad: var(--av-cat-athletic); }
.cat-consist  { --cat: #10B981; --cat-grad: var(--av-cat-consist); }

/* Stat tile with embedded sparkline */
.av-stat__spark { position: relative; height: 40px; margin: 12px -4px -2px; }
.av-stat__top { display: flex; align-items: flex-start; justify-content: space-between; }

/* Section header (consistent eyebrow + title + action) */
.av-sec { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 14px; }
.av-sec__t { display: flex; align-items: center; gap: 10px; }
.av-sec__t i { color: var(--av-accent); font-size: 19px; }
.av-sec__t h2 { font-size: 19px; margin: 0; }

/* Activity feed (richer "recent" than a bare table) */
.av-feed { display: flex; flex-direction: column; }
.av-feed__row { display: flex; align-items: center; gap: 14px; padding: 13px 6px; border-bottom: 1px solid var(--av-line-faint); transition: background .12s; border-radius: 10px; }
.av-feed__row:last-child { border-bottom: 0; }
.av-feed__row:hover { background: var(--av-surface-3); }
.av-feed__ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.av-feed__main { min-width: 0; flex: 1 1 auto; }
.av-feed__main b { font-weight: 600; font-size: 14px; }
.av-feed__main span { display: block; font-size: 12.5px; color: var(--av-ink-muted); }
.av-feed__time { font-family: var(--av-font-mono); font-size: 12px; color: var(--av-ink-dim); white-space: nowrap; }

/* Toolbar above tables: segmented filter + count */
.av-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.av-seg { display: inline-flex; background: var(--av-surface-2); border: 1px solid var(--av-line); border-radius: var(--av-pill); padding: 3px; gap: 2px; }
.av-seg button { border: none; background: transparent; color: var(--av-ink-muted); font-family: var(--av-font); font-weight: 600; font-size: 13px; padding: 7px 15px; border-radius: var(--av-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s; }
.av-seg button:hover { color: var(--av-ink); }
.av-seg button.active { background: var(--av-grad); color: var(--av-accent-ink); }

/* Empty state */
.av-empty { text-align: center; padding: 48px 20px; color: var(--av-ink-muted); }
.av-empty i { font-size: 38px; color: var(--av-ink-dim); display: block; margin-bottom: 12px; }

/* Cell with leading icon/avatar */
.av-cell { display: inline-flex; align-items: center; gap: 10px; }
.av-cell__ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: var(--av-surface-3); color: var(--av-ink-muted); }
