/* ============================================================================
   ArtistOps Design System  —  v1
   ----------------------------------------------------------------------------
   A single source of truth that ELEVATES the existing coral + teal + near-black
   identity into a bold, premium, spacious product surface.

   Principles
     • Additive & non-destructive. We only DEFINE NEW tokens here and add opt-in
       component classes (.ao-*). Existing pages' inline :root tokens
       (--bg/--surface/--accent/…) are untouched, so nothing breaks and no saved
       user data/settings are affected — this is a presentation layer only.
     • Cascade, don't sprawl. Global element refinements are gentle (rendering,
       focus, selection, scrollbars, motion-safety). The bold reinvention lives
       in opt-in classes + bespoke page markup.
     • Premium = restraint + rhythm + depth. Generous space, a real type scale,
       layered elevation, and confident motion.
   ========================================================================== */

:root {
  /* ── Brand palette (kept — the soul of the identity) ───────────────────── */
  --ao-ink:            #0b1114;   /* deepest near-black, page floor */
  --ao-bg:             #0d1417;   /* base background */
  --ao-bg-soft:        #111b1f;   /* faint lift */
  --ao-surface:        #151e22;   /* card / panel */
  --ao-surface-2:      #1b262b;   /* raised panel */
  --ao-surface-3:      #233037;   /* elevated / hover */
  --ao-hairline:       rgba(255,255,255,.07);
  --ao-hairline-2:     rgba(255,255,255,.12);

  --ao-text:           #eef1f2;   /* primary text — brighter than legacy for premium contrast */
  --ao-text-soft:      #b6bfc2;
  --ao-muted:          #7e8a8e;
  --ao-faint:          #56636a;

  --ao-coral:          #f07a54;   /* primary accent — a touch warmer/brighter */
  --ao-coral-bright:   #ff8a63;
  --ao-coral-deep:     #d65f3c;
  --ao-teal:           #2fa3ad;   /* secondary accent — lifted for vibrancy */
  --ao-teal-deep:      #1e5a62;
  --ao-gold:           #e9c46a;   /* tertiary, sparing use */

  --ao-coral-glow:     rgba(240,122,84,.45);
  --ao-coral-wash:     rgba(240,122,84,.10);
  --ao-teal-wash:      rgba(47,163,173,.12);

  /* ── Typography ─────────────────────────────────────────────────────────
     Display: Bricolage Grotesque (characterful). Body: IBM Plex Sans.
     Mono: IBM Plex Mono (labels / eyebrows / data). */
  --ao-font-display: 'Bricolage Grotesque','IBM Plex Sans',system-ui,sans-serif;
  --ao-font-body:    'IBM Plex Sans','Helvetica Neue',system-ui,sans-serif;
  --ao-font-mono:    'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  /* Modular type scale (1.25 major-third, fluid where it matters). */
  --ao-fs-mega:   clamp(3rem, 7vw, 6.25rem);   /* hero headline */
  --ao-fs-h1:     clamp(2.25rem, 4.5vw, 3.75rem);
  --ao-fs-h2:     clamp(1.75rem, 3vw, 2.5rem);
  --ao-fs-h3:     1.5rem;
  --ao-fs-h4:     1.175rem;
  --ao-fs-lg:     1.0625rem;
  --ao-fs-base:   0.95rem;
  --ao-fs-sm:     0.8125rem;
  --ao-fs-xs:     0.6875rem;   /* eyebrows / mono labels */

  --ao-lh-tight:  1.04;
  --ao-lh-snug:   1.18;
  --ao-lh-body:   1.62;

  --ao-track-mega:  -0.03em;
  --ao-track-head:  -0.02em;
  --ao-track-eye:   0.22em;    /* mono eyebrow tracking */

  /* ── Spacing rhythm (8px base, generous) ─────────────────────────────── */
  --ao-1: 4px;  --ao-2: 8px;  --ao-3: 12px; --ao-4: 16px; --ao-5: 24px;
  --ao-6: 32px; --ao-7: 48px; --ao-8: 64px; --ao-9: 96px; --ao-10: 128px;
  --ao-section: clamp(4rem, 9vw, 8rem);   /* vertical padding between major sections */
  --ao-gutter:  clamp(1.25rem, 5vw, 4rem);/* page side gutter */
  --ao-maxw:    1200px;                    /* content max width */
  --ao-maxw-prose: 68ch;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --ao-r-xs: 6px; --ao-r-sm: 10px; --ao-r-md: 14px; --ao-r-lg: 20px;
  --ao-r-xl: 28px; --ao-r-pill: 999px;

  /* ── Elevation (dark-UI: top highlight + soft drop) ──────────────────── */
  --ao-e1: 0 1px 0 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --ao-e2: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 4px 14px -4px rgba(0,0,0,.5);
  --ao-e3: 0 1px 0 0 rgba(255,255,255,.06) inset, 0 14px 40px -12px rgba(0,0,0,.6);
  --ao-e4: 0 1px 0 0 rgba(255,255,255,.07) inset, 0 30px 80px -20px rgba(0,0,0,.7);
  --ao-glow: 0 0 0 1px rgba(240,122,84,.35), 0 8px 30px -6px var(--ao-coral-glow);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ao-ease:        cubic-bezier(.22,.61,.36,1);     /* expo-ish ease-out */
  --ao-ease-spring: cubic-bezier(.34,1.56,.64,1);    /* gentle overshoot */
  --ao-dur-1: .14s; --ao-dur-2: .24s; --ao-dur-3: .42s; --ao-dur-4: .7s;

  --ao-ring: 0 0 0 3px rgba(240,122,84,.30);
}

/* ── Gentle global refinements (fill gaps; inline styles still win) ─────── */
.ao { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.ao ::selection { background: var(--ao-coral); color: #1a0e09; }

.ao :focus-visible {
  outline: none;
  box-shadow: var(--ao-ring);
  border-radius: var(--ao-r-xs);
}

/* Refined scrollbars on the scoped surface */
.ao *::-webkit-scrollbar { width: 11px; height: 11px; }
.ao *::-webkit-scrollbar-thumb {
  background: var(--ao-surface-3); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
.ao *::-webkit-scrollbar-thumb:hover { background: #2f3f46; background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  .ao *, .ao *::before, .ao *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */
.ao-display { font-family: var(--ao-font-display); font-weight: 800; letter-spacing: var(--ao-track-head); line-height: var(--ao-lh-snug); color: var(--ao-text); }
.ao-mega    { font-family: var(--ao-font-display); font-weight: 800; font-size: var(--ao-fs-mega); line-height: var(--ao-lh-tight); letter-spacing: var(--ao-track-mega); }
.ao-h1      { font-family: var(--ao-font-display); font-weight: 800; font-size: var(--ao-fs-h1); line-height: var(--ao-lh-tight); letter-spacing: var(--ao-track-head); }
.ao-h2      { font-family: var(--ao-font-display); font-weight: 700; font-size: var(--ao-fs-h2); line-height: var(--ao-lh-snug); letter-spacing: var(--ao-track-head); }
.ao-h3      { font-family: var(--ao-font-display); font-weight: 700; font-size: var(--ao-fs-h3); line-height: 1.25; }
.ao-lede    { font-size: var(--ao-fs-lg); line-height: var(--ao-lh-body); color: var(--ao-text-soft); max-width: var(--ao-maxw-prose); }
.ao-body    { font-size: var(--ao-fs-base); line-height: var(--ao-lh-body); color: var(--ao-text-soft); }
.ao-muted   { color: var(--ao-muted); }

/* Eyebrow / kicker — mono, tracked, uppercase. A signature of the system. */
.ao-eyebrow {
  font-family: var(--ao-font-mono); font-size: var(--ao-fs-xs); font-weight: 600;
  letter-spacing: var(--ao-track-eye); text-transform: uppercase; color: var(--ao-coral);
  display: inline-flex; align-items: center; gap: .5em;
}
.ao-eyebrow.teal { color: var(--ao-teal); }
.ao-eyebrow::before {
  content: ""; width: 1.75em; height: 1px; background: currentColor; opacity: .6;
}
.ao-eyebrow.bare::before { display: none; }

/* Coral gradient text — for a signature headline word. */
.ao-grad {
  background: linear-gradient(100deg, var(--ao-coral-bright), var(--ao-coral) 55%, var(--ao-teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================================
   LAYOUT
   ========================================================================== */
.ao-container { width: 100%; max-width: var(--ao-maxw); margin-inline: auto; padding-inline: var(--ao-gutter); }
.ao-section   { padding-block: var(--ao-section); }
.ao-stack > * + * { margin-top: var(--ao-4); }
.ao-grid { display: grid; gap: var(--ao-5); }
@media (min-width: 760px){ .ao-grid.cols-2{grid-template-columns:repeat(2,1fr)} .ao-grid.cols-3{grid-template-columns:repeat(3,1fr)} .ao-grid.cols-4{grid-template-columns:repeat(4,1fr)} }

/* ============================================================================
   SURFACES & CARDS
   ========================================================================== */
.ao-surface {
  background: var(--ao-surface); border: 1px solid var(--ao-hairline);
  border-radius: var(--ao-r-md); box-shadow: var(--ao-e2);
}
.ao-card {
  position: relative; background: linear-gradient(180deg, var(--ao-surface-2), var(--ao-surface));
  border: 1px solid var(--ao-hairline); border-radius: var(--ao-r-lg);
  box-shadow: var(--ao-e2); padding: var(--ao-6);
  transition: transform var(--ao-dur-2) var(--ao-ease), box-shadow var(--ao-dur-2) var(--ao-ease), border-color var(--ao-dur-2) var(--ao-ease);
}
.ao-card.interactive:hover {
  transform: translateY(-3px); box-shadow: var(--ao-e3); border-color: var(--ao-hairline-2);
}
.ao-card.featured {
  border-color: rgba(240,122,84,.4);
  box-shadow: var(--ao-e3), 0 0 50px -20px var(--ao-coral-glow);
}
/* Hairline gradient top-edge accent for featured panels */
.ao-card.featured::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: var(--ao-r-lg) var(--ao-r-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--ao-coral), transparent);
}

/* ============================================================================
   BUTTONS
   ========================================================================== */
.ao-btn {
  --_bg: var(--ao-surface-2); --_fg: var(--ao-text); --_bd: var(--ao-hairline-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--ao-font-body); font-size: var(--ao-fs-base); font-weight: 650;
  line-height: 1; padding: .85em 1.4em; border-radius: var(--ao-r-pill);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: transform var(--ao-dur-1) var(--ao-ease), box-shadow var(--ao-dur-2) var(--ao-ease),
              background var(--ao-dur-2) var(--ao-ease), border-color var(--ao-dur-2) var(--ao-ease), filter var(--ao-dur-2) var(--ao-ease);
}
.ao-btn:active { transform: translateY(1px) scale(.99); }
.ao-btn:hover  { border-color: var(--ao-hairline-2); }

.ao-btn.primary {
  --_bg: linear-gradient(180deg, var(--ao-coral-bright), var(--ao-coral)); --_fg: #190d07; --_bd: transparent;
  box-shadow: 0 8px 24px -10px var(--ao-coral-glow), 0 1px 0 rgba(255,255,255,.25) inset; font-weight: 700;
}
.ao-btn.primary:hover { filter: brightness(1.06); box-shadow: 0 12px 34px -10px var(--ao-coral-glow), 0 1px 0 rgba(255,255,255,.3) inset; transform: translateY(-1px); }
.ao-btn.teal { --_bg: linear-gradient(180deg, var(--ao-teal), var(--ao-teal-deep)); --_fg: #02181a; --_bd: transparent; font-weight: 700; }
.ao-btn.ghost { --_bg: transparent; --_fg: var(--ao-text); --_bd: var(--ao-hairline-2); }
.ao-btn.ghost:hover { --_bg: rgba(255,255,255,.04); }
.ao-btn.sm { padding: .55em 1em; font-size: var(--ao-fs-sm); }
.ao-btn.lg { padding: 1.05em 1.9em; font-size: var(--ao-fs-lg); }

/* ============================================================================
   PILLS / BADGES / CHIPS
   ========================================================================== */
.ao-pill {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--ao-font-mono); font-size: var(--ao-fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .4em .85em; border-radius: var(--ao-r-pill);
  background: rgba(255,255,255,.05); color: var(--ao-text-soft); border: 1px solid var(--ao-hairline);
}
.ao-pill.coral { background: var(--ao-coral-wash); color: var(--ao-coral-bright); border-color: rgba(240,122,84,.3); }
.ao-pill.teal  { background: var(--ao-teal-wash);  color: var(--ao-teal);        border-color: rgba(47,163,173,.3); }
.ao-pill .dot  { width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ============================================================================
   FORM CONTROLS
   ========================================================================== */
.ao-input, .ao-select, .ao-textarea {
  width: 100%; font-family: var(--ao-font-body); font-size: var(--ao-fs-base); color: var(--ao-text);
  background: rgba(0,0,0,.28); border: 1px solid var(--ao-hairline-2); border-radius: var(--ao-r-sm);
  padding: .8em 1em; transition: border-color var(--ao-dur-2) var(--ao-ease), box-shadow var(--ao-dur-2) var(--ao-ease), background var(--ao-dur-2) var(--ao-ease);
}
.ao-input::placeholder, .ao-textarea::placeholder { color: var(--ao-faint); }
.ao-input:focus, .ao-select:focus, .ao-textarea:focus {
  outline: none; border-color: var(--ao-coral); background: rgba(0,0,0,.4); box-shadow: var(--ao-ring);
}
.ao-label { display: block; font-family: var(--ao-font-mono); font-size: var(--ao-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ao-muted); margin-bottom: var(--ao-2); }

/* ============================================================================
   TABLE
   ========================================================================== */
.ao-table { width: 100%; border-collapse: collapse; font-size: var(--ao-fs-sm); }
.ao-table th {
  text-align: left; font-family: var(--ao-font-mono); font-size: var(--ao-fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ao-muted);
  padding: var(--ao-3) var(--ao-4); border-bottom: 1px solid var(--ao-hairline-2);
}
.ao-table td { padding: var(--ao-4); border-bottom: 1px solid var(--ao-hairline); color: var(--ao-text-soft); }
.ao-table tr:hover td { background: rgba(255,255,255,.02); }

/* ============================================================================
   DECOR — signature ambience (opt-in)
   ========================================================================== */
/* Soft coral/teal aurora behind a hero. Add <div class="ao-aurora"></div>. */
.ao-aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 18% 0%, var(--ao-coral-wash), transparent 70%),
    radial-gradient(46% 55% at 86% 12%, var(--ao-teal-wash), transparent 72%);
  filter: blur(8px); opacity: .9;
}
/* Hairline grid + film grain for texture (premium tactility). */
.ao-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Entrance animation — add .ao-rise (and optional --d delay inline). */
@keyframes ao-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ao-rise { animation: ao-rise var(--ao-dur-4) var(--ao-ease) both; animation-delay: var(--d, 0s); }

/* Divider with a faint glow */
.ao-rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--ao-hairline-2), transparent); margin-block: var(--ao-7); }

/* ============================================================================
   ELEVATION LAYER  —  lifts EXISTING legacy classes used across all pages.
   Scoped to `.ao` bodies. VISUAL-ONLY refinements (color / border / radius /
   shadow / type / motion) — never touches layout, spacing, or grids, so no
   page breaks and no saved data/settings are affected.
   ========================================================================== */

/* NOTE: intentionally NO body-background or blanket heading-font override —
   each page keeps its own foundation (esp. the admin base, which has a
   deliberate gradient + sidebar). The elevation layer is component-only, so
   it can only ADD polish, never regress a page's established look. */

/* ── Cards: gradient surface, softer radius, real depth, gentle hover ──── */
.ao .card {
  background: linear-gradient(180deg, var(--ao-surface-2), var(--ao-surface));
  border-color: var(--ao-hairline);
  border-radius: var(--ao-r-lg);
  box-shadow: var(--ao-e2);
  transition: transform var(--ao-dur-2) var(--ao-ease), box-shadow var(--ao-dur-2) var(--ao-ease), border-color var(--ao-dur-2) var(--ao-ease);
}
.ao .card:hover, .ao .hero-card:hover { border-color: var(--ao-hairline-2); box-shadow: var(--ao-e3); }

/* ── Buttons: coral gradient primary, refined ghost. Keep legacy sizing. ── */
.ao .btn {
  background: linear-gradient(180deg, var(--ao-coral-bright), var(--ao-coral));
  color: #190d07; border-radius: var(--ao-r-sm); font-family: var(--ao-font-display);
  box-shadow: 0 6px 18px -10px var(--ao-coral-glow), 0 1px 0 rgba(255,255,255,.22) inset;
  transition: filter var(--ao-dur-2) var(--ao-ease), transform var(--ao-dur-1) var(--ao-ease), box-shadow var(--ao-dur-2) var(--ao-ease), background var(--ao-dur-2) var(--ao-ease), border-color var(--ao-dur-2) var(--ao-ease);
}
.ao .btn:hover { background: linear-gradient(180deg, var(--ao-coral-bright), var(--ao-coral)); filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 26px -10px var(--ao-coral-glow), 0 1px 0 rgba(255,255,255,.28) inset; }
.ao .btn.secondary { background: transparent; color: var(--ao-text); border: 1px solid var(--ao-hairline-2); box-shadow: none; }
.ao .btn.secondary:hover { background: rgba(255,255,255,.05); border-color: var(--ao-hairline-2); filter: none; }
.ao .btn.warning, .ao .btn.danger { background: transparent; border: 1px solid var(--ao-coral); color: var(--ao-coral-bright); box-shadow: none; }
.ao .btn.warning:hover, .ao .btn.danger:hover { background: var(--ao-coral); color: #190d07; }

/* ── Eyebrow: brighter, signature coral leading accent ─────────────────── */
.ao .eyebrow { color: var(--ao-text-soft); }
.ao .eyebrow i { color: var(--ao-coral); }

/* ── Stat values: confident display numerals ──────────────────────────── */
.ao .stat .value { font-family: var(--ao-font-display); letter-spacing: -.02em; }

/* ── Nav: coral active state, smoother hover ───────────────────────────── */
.ao .nav a { transition: color var(--ao-dur-2) var(--ao-ease); }
.ao .nav a.active { color: var(--ao-coral); }
.ao .nav a.active::after { background: var(--ao-coral); }

/* ── Inputs: refined focus ring + surface ──────────────────────────────── */
.ao input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.ao textarea, .ao select {
  border-radius: var(--ao-r-sm);
  transition: border-color var(--ao-dur-2) var(--ao-ease), box-shadow var(--ao-dur-2) var(--ao-ease), background var(--ao-dur-2) var(--ao-ease);
}
.ao input:not([type=checkbox]):not([type=radio]):focus, .ao textarea:focus, .ao select:focus {
  outline: none; border-color: var(--ao-coral); box-shadow: var(--ao-ring);
}
.ao input[type=checkbox], .ao input[type=radio] { accent-color: var(--ao-coral); }

/* ── Flash messages: refined, with a soft elevation ────────────────────── */
.ao .flash { border-radius: var(--ao-r-sm); box-shadow: var(--ao-e2); }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.ao .crumbs a:hover { color: var(--ao-coral); }

/* ── Links inside content lift to coral on hover ───────────────────────── */
.ao a { transition: color var(--ao-dur-2) var(--ao-ease); }

/* ============================================================================
   ARTIST PORTAL SHELL  —  bold restyle of base-owned components.
   These classes are defined ONCE in artist/base.html and used by every
   authed page, so restyling them transforms the whole portal with no
   per-page risk. .ao-scoped + higher specificity → wins over base styles.
   ========================================================================== */

/* Cards: unmistakable lift — lighter gradient, crisp edge, real shadow,
   bigger radius, top highlight. Turns flat text-regions into floating panels. */
.ao .card {
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 44px -22px rgba(0,0,0,.8);
}
.ao .card:hover { border-color: rgba(245,128,90,.30); box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 26px 60px -22px rgba(0,0,0,.85); }

/* Topbar: a real, frosted, elevated bar instead of a bare logo row. */
.ao .topbar-brand {
  background: linear-gradient(180deg, rgba(31,46,54,.72), rgba(22,34,42,.55));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.7);
}

/* Page title (the big "Welcome back" / section H1): bigger, tighter, brighter. */
.ao .header .brand h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.02; letter-spacing: -.025em; color: var(--text);
}

/* Primary nav: pill-style active state + smoother hover — instantly reads as a product. */
.ao .nav a { border-radius: 999px; padding: 7px 14px; transition: color var(--ao-dur-2) var(--ao-ease), background var(--ao-dur-2) var(--ao-ease); }
.ao .nav a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.ao .nav a.active { color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-bright), var(--accent)); box-shadow: 0 6px 16px -8px var(--ao-coral-glow); }
.ao .nav a.active::after { display: none; }
.ao .nav a.nav-secondary.active { color: var(--accent-ink); }

/* Eyebrow / kicker on authed pages → signature coral mono leader. */
.ao .eyebrow { color: var(--accent); font-weight: 600; }
.ao .eyebrow i { color: var(--accent); }

/* Breadcrumb chip styling */
.ao .crumbs { font-family: var(--ao-font-mono); font-size: 11px; letter-spacing: .08em; }

/* Stat numbers: big confident display numerals (the dashboard/songs metrics). */
.ao .stat .value { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.ao .stat .label { color: var(--muted); }

/* Inputs/selects/textarea: clearer surface so forms feel crafted. */
.ao input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.ao textarea, .ao select {
  background: rgba(255,255,255,.03); border: 1px solid var(--hairline-strong); border-radius: 12px;
}

/* ============================================================================
   ARTIST PORTAL SHELL — v3 "3× bolder" overrides (later wins over the above).
   ========================================================================== */

/* Cards: dramatic float + coral hover glow + lift. */
.ao .card {
  background: linear-gradient(158deg, var(--surface-2) 0%, var(--surface) 70%);
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  box-shadow: 0 2px 0 rgba(255,255,255,.06) inset, 0 36px 72px -28px rgba(0,0,0,.95);
}
.ao .card:hover {
  transform: translateY(-3px);
  border-color: rgba(249,130,79,.45);
  box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 44px 90px -28px rgba(0,0,0,1),
              0 0 0 1px rgba(249,130,79,.25), 0 20px 60px -24px var(--ao-coral-glow);
}

/* Page title: large, tight, alive. */
.ao .header .brand h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: .98;
  letter-spacing: -.035em; color: var(--text);
}

/* Primary nav: bolder pill, bigger, stronger glow. */
.ao .nav a { border-radius: 999px; padding: 8px 16px; font-weight: 600; }
.ao .nav a.active {
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  box-shadow: 0 8px 22px -8px var(--ao-coral-glow), 0 1px 0 rgba(255,255,255,.3) inset;
}

/* Stat numbers: hero-scale display numerals. */
.ao .stat .value { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem); letter-spacing: -.04em; line-height: 1; color: var(--text); }

/* Eyebrows / kickers: vivid coral, more presence. */
.ao .eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .18em; }

/* Primary buttons: bigger, more confident. */
.ao .btn { min-height: 46px; padding: 12px 22px; font-size: 13.5px; border-radius: 12px; letter-spacing: .01em; }

/* Topbar: stronger frosted presence. */
.ao .topbar-brand {
  background: linear-gradient(180deg, rgba(36,55,67,.82), rgba(26,40,50,.6));
  border: 1px solid var(--hairline-strong); border-radius: 18px;
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.8);
}