/* ==========================================================================
   Refined premium design layer: October 2026
   Loaded after styles.css. It re-tunes the tokens, adds a dark theme, and
   gives the shell, cards, controls, charts and sign-in screen their depth and
   motion. Structure and behaviour stay in styles.css; this file is the look.
   ========================================================================== */

/* --- Tokens: light ---------------------------------------------------------- */
:root {
  --canvas: #f7f4ee;
  --surface: #ffffff;
  --surface-raised: #f6f2eb;
  --surface-input: #ffffff;
  --surface-hover: #fbf8f3;
  --surface-sunken: #efe9df;
  --line: #e7e0d5;
  --border: #e7e0d5;
  --line-soft: #efe9df;
  --line-strong: #d8cebf;
  --ink: #1b1814;
  --muted: #6a645c;
  --muted-2: #746d63;
  --accent: #8b5a2b;
  --accent-dark: #6f4520;
  --accent-bright: #c08a4e;
  --accent-soft: #f5ece1;
  --on-accent: #ffffff;
  --accent-gradient: linear-gradient(135deg, #a46c37 0%, #8b5a2b 48%, #6f4520 100%);
  --gold-glow: radial-gradient(60% 80% at 100% 0%, rgba(192, 138, 78, .16), transparent 70%);
  --chart-muted: #e6dccd;
  --bar-top: #b9824a;
  --bar-bottom: #7f5026;
  --sidebar: #161412;
  --sidebar-soft: #26221e;
  --shadow-xs: 0 1px 2px rgba(41, 30, 18, .05);
  --shadow: 0 1px 2px rgba(41, 30, 18, .04), 0 4px 12px -2px rgba(41, 30, 18, .06), 0 16px 32px -16px rgba(41, 30, 18, .10);
  --shadow-hover: 0 1px 2px rgba(41, 30, 18, .05), 0 10px 24px -6px rgba(41, 30, 18, .12), 0 28px 48px -24px rgba(41, 30, 18, .18);
  --shadow-lg: 0 24px 64px -16px rgba(41, 30, 18, .28), 0 2px 6px rgba(41, 30, 18, .06);
  --shadow-accent: 0 6px 18px -6px rgba(139, 90, 43, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, .7);
  --ring: 0 0 0 4px rgba(139, 90, 43, .16);
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --canvas-glow:
    radial-gradient(1100px 520px at 88% -8%, rgba(192, 138, 78, .14), transparent 60%),
    radial-gradient(800px 480px at -10% 110%, rgba(139, 90, 43, .07), transparent 60%);
}

/* --- Tokens: dark ----------------------------------------------------------- */
/* Declared twice on purpose: once for an explicit choice, once for "follow the
   device". The values are identical. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #121110;
  --surface: #1b1917;
  --surface-raised: #242119;
  --surface-input: #1f1c19;
  --surface-hover: #221f1b;
  --surface-sunken: #161412;
  --line: #322d27;
  --border: #322d27;
  --line-soft: #29251f;
  --line-strong: #463f36;
  --ink: #f4efe7;
  --muted: #b3aa9e;
  --muted-2: #a0978b;
  --accent: #d39a5b;
  --accent-dark: #e8b67d;
  --accent-bright: #f0c58f;
  --accent-soft: #2e2419;
  --on-accent: #1d1308;
  --accent-gradient: linear-gradient(135deg, #e7b67c 0%, #d39a5b 50%, #b47a3e 100%);
  --gold-glow: radial-gradient(60% 80% at 100% 0%, rgba(211, 154, 91, .14), transparent 70%);
  --chart-muted: #3a332b;
  --bar-top: #e9b77c;
  --bar-bottom: #a8713a;
  --mint: #55d3a4; --mint-soft: #13291f;
  --orange: #f2a27f; --orange-soft: #301f16;
  --blue: #8db5f6; --blue-soft: #16233a;
  --red: #f48d9b; --red-soft: #341a20;
  --sidebar: #0d0c0b;
  --sidebar-soft: #1f1c19;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -10px rgba(0, 0, 0, .55);
  --shadow-hover: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 36px -12px rgba(0, 0, 0, .7);
  --shadow-lg: 0 28px 70px -16px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
  --shadow-accent: 0 8px 22px -8px rgba(211, 154, 91, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, .04);
  --ring: 0 0 0 4px rgba(211, 154, 91, .22);
  --canvas-glow:
    radial-gradient(1100px 520px at 88% -8%, rgba(211, 154, 91, .10), transparent 60%),
    radial-gradient(800px 480px at -10% 110%, rgba(139, 90, 43, .08), transparent 60%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #121110;
    --surface: #1b1917;
    --surface-raised: #242119;
    --surface-input: #1f1c19;
    --surface-hover: #221f1b;
    --surface-sunken: #161412;
    --line: #322d27;
    --border: #322d27;
    --line-soft: #29251f;
    --line-strong: #463f36;
    --ink: #f4efe7;
    --muted: #b3aa9e;
    --muted-2: #a0978b;
    --accent: #d39a5b;
    --accent-dark: #e8b67d;
    --accent-bright: #f0c58f;
    --accent-soft: #2e2419;
    --on-accent: #1d1308;
    --accent-gradient: linear-gradient(135deg, #e7b67c 0%, #d39a5b 50%, #b47a3e 100%);
    --gold-glow: radial-gradient(60% 80% at 100% 0%, rgba(211, 154, 91, .14), transparent 70%);
    --chart-muted: #3a332b;
    --bar-top: #e9b77c;
    --bar-bottom: #a8713a;
    --mint: #55d3a4; --mint-soft: #13291f;
    --orange: #f2a27f; --orange-soft: #301f16;
    --blue: #8db5f6; --blue-soft: #16233a;
    --red: #f48d9b; --red-soft: #341a20;
    --sidebar: #0d0c0b;
    --sidebar-soft: #1f1c19;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -10px rgba(0, 0, 0, .55);
    --shadow-hover: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 36px -12px rgba(0, 0, 0, .7);
    --shadow-lg: 0 28px 70px -16px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
    --shadow-accent: 0 8px 22px -8px rgba(211, 154, 91, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
    --card-highlight: inset 0 1px 0 rgba(255, 255, 255, .04);
    --ring: 0 0 0 4px rgba(211, 154, 91, .22);
    --canvas-glow:
      radial-gradient(1100px 520px at 88% -8%, rgba(211, 154, 91, .10), transparent 60%),
      radial-gradient(800px 480px at -10% 110%, rgba(139, 90, 43, .08), transparent 60%);
  }
}

/* --- Base ------------------------------------------------------------------- */
body {
  background: var(--canvas-glow), var(--canvas);
  background-attachment: fixed;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--ink); }
html { scrollbar-color: var(--line-strong) transparent; }
.metric-value strong, .performance-stage strong, .finance-card > strong, .performance-chart-summary strong,
.owed-chatters-total > strong, .money-cell, .data-table td strong { font-variant-numeric: tabular-nums; }

/* --- Sidebar ---------------------------------------------------------------- */
.sidebar {
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(192, 138, 78, .16), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--sidebar) 92%, #2a231b) 0%, var(--sidebar) 46%);
  border-right: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .02);
}
.brand .brand-logo {
  background: radial-gradient(circle at 30% 25%, #3a3128, #1d1915);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 18px -6px rgba(192, 138, 78, .55);
}
.nav-item, .nav-more > summary {
  position: relative;
  border-radius: 10px;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav-item:hover, .nav-more > summary:hover { background: rgba(255, 255, 255, .055); transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(192, 138, 78, .26), rgba(192, 138, 78, .06) 70%, transparent);
  box-shadow: none;
  color: #fff;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #f0c58f, #c08a4e);
  box-shadow: 0 0 12px rgba(240, 197, 143, .65);
}
.nav-item.active svg { color: #f0c58f; }
.nav-item b { background: rgba(255, 255, 255, .09); }
.nav-item.active b, .nav-item b:not([hidden]) { font-variant-numeric: tabular-nums; }
.nav-item.active b { background: var(--accent-gradient); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.sidebar-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-foot-row .system-status { min-width: 0; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.theme-toggle:hover { background: rgba(255, 255, 255, .1); border-color: rgba(240, 197, 143, .5); color: #fff; }
.theme-toggle svg { width: 15px; height: 15px; }
.profile-chip .avatar-owner { background: var(--accent-gradient); box-shadow: 0 6px 16px -6px rgba(192, 138, 78, .7); }

/* --- Topbar: glass that gains depth once content slides under it ------------ */
.topbar {
  background: color-mix(in srgb, var(--canvas) 74%, transparent);
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  border-bottom-color: transparent;
  transition: box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
body.is-scrolled .topbar {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -18px rgba(41, 30, 18, .35);
}
.search-trigger, .icon-button {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow-xs);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.search-trigger:hover, .icon-button:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-xs), var(--ring); }
.notification-dot { box-shadow: 0 0 0 0 rgba(187, 64, 82, .5); animation: dot-pulse 2.4s ease-out infinite; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(187, 64, 82, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(187, 64, 82, 0); } }

/* --- Typography ------------------------------------------------------------- */
.page-heading h1, .login-card h1 {
  background: linear-gradient(100deg, var(--ink) 35%, color-mix(in srgb, var(--accent) 80%, var(--ink)) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .02em;
}
.eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.page-heading p:not(.eyebrow) { color: var(--muted); }

/* --- Surfaces --------------------------------------------------------------- */
.panel, .metric-card, .finance-card, .performance-stage, .creator-card, .owed-chatters,
.login-card, .finance-summary.creator-earnings-summary {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow), var(--card-highlight);
}
.metric-card, .finance-card, .performance-stage { position: relative; overflow: hidden; isolation: isolate; }
.metric-card::after, .finance-card::after, .performance-stage::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--gold-glow);
  opacity: .9;
  pointer-events: none;
}
/* The first period figure is the hero of the dashboard. */
.performance-stage:first-child {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-bright) 22%, transparent), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 70%, var(--surface)), var(--surface) 70%);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.performance-stage:first-child strong {
  background: linear-gradient(100deg, var(--ink) 20%, var(--accent) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.performance-stage strong, .metric-value strong, .finance-card > strong { letter-spacing: -.035em; }
.performance-chart-summary strong { letter-spacing: -.035em; }
.metric-icon {
  border-radius: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 60%, var(--surface)), var(--accent-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Cards you can act on respond to the pointer. */
.creator-card, .quick-card, .attention-item, .sop-card, .owed-chatter-list li {
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out), background .2s var(--ease-out);
}
.creator-card:hover, .quick-card:hover, .sop-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover), var(--card-highlight);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.attention-item:hover { background: var(--surface-hover); transform: translateX(2px); }
.attention-icon { border-radius: 10px; }
.owed-chatters-total { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 70%, var(--surface)), var(--surface-raised)); }
.owed-chatters.is-settled .owed-chatters-total { background: transparent; }
.contract-note {
  border-radius: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)), var(--surface-raised));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

/* --- Buttons ---------------------------------------------------------------- */
.button { border-radius: 11px; letter-spacing: .01em; transition: transform .18s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out); }
.button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.button-primary {
  background: var(--accent-gradient);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
.button-primary:hover { background: var(--accent-gradient); filter: brightness(1.06) saturate(1.05); box-shadow: var(--shadow-accent), 0 10px 26px -10px rgba(139, 90, 43, .6); }
.button-secondary { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-xs); }
.button-secondary:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.button-danger:hover { color: var(--on-accent); }
.row-action { border-radius: 10px; transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .18s var(--ease-out); }
.row-action:hover { transform: translateY(-1px); }
.mobile-fab { background: var(--accent-gradient); box-shadow: var(--shadow-accent), 0 14px 30px -10px rgba(139, 90, 43, .65); }

/* --- Inputs ----------------------------------------------------------------- */
.field input, .field select, .field textarea, .filter-search {
  border-radius: 11px;
  border-color: var(--line-strong);
  background: var(--surface-input);
  box-shadow: var(--shadow-xs);
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
}
.field input:hover, .field select:hover, .field textarea:hover, .filter-search:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong)); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
.filter-search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.filter-search input:focus-visible { outline: none !important; }

/* --- Segmented controls and filter pills ----------------------------------- */
.filter-pills, .segmented, .planner-density {
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 80%, var(--surface));
  box-shadow: inset 0 1px 2px rgba(41, 30, 18, .05);
}
.filter-pills button, .segmented button, .planner-density button { border-radius: 9px; transition: background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.filter-pills button.active { background: var(--accent-gradient); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.segmented button.active, .segmented button[aria-pressed="true"], .planner-density button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs), 0 0 0 1px var(--line);
}
.density-switcher button[aria-pressed="true"] { color: var(--accent); }
.density-switcher button { transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }

/* --- Status pills ----------------------------------------------------------- */
.status-pill { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.status-pill.overdue::before, .status-pill.missed::before, .status-pill.needs_finish::before { animation: dot-pulse-soft 2s ease-in-out infinite; }
@keyframes dot-pulse-soft { 50% { opacity: .35; } }

/* --- Tables ----------------------------------------------------------------- */
.table-panel { overflow: hidden; }
.data-table th { background: color-mix(in srgb, var(--surface-raised) 70%, var(--surface)); color: var(--muted); }
.data-table tbody tr { transition: background .18s var(--ease-out); }
.data-table tbody tr:hover { background: var(--surface-hover); }
.table-avatar { border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* --- Empty states ----------------------------------------------------------- */
.empty-state > .empty-icon, .empty-state > span:first-child {
  width: 52px; height: 52px;
  border-radius: 16px;
  border: 0;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-bright) 26%, var(--surface)), var(--accent-soft));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 7%, transparent), var(--shadow-xs);
}

/* --- Charts ----------------------------------------------------------------- */
.bar-stop-top { stop-color: var(--bar-top); }
.bar-stop-bottom { stop-color: var(--bar-bottom); }
.performance-current-bar { fill: url(#overview-bar-fill); }
.performance-day-bar:hover .performance-current-bar, .performance-day-bar.selected .performance-current-bar { fill: url(#overview-bar-fill); filter: brightness(1.12) drop-shadow(0 4px 8px rgba(139, 90, 43, .35)); }
.svg-bar-earned { fill: url(#earnings-bar-fill); }
.svg-bar-gross { fill: var(--chart-muted); }
.chart-label { fill: var(--muted); }
.chart-animate .performance-current-bar, .chart-animate .svg-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bar-grow .75s var(--ease-out) both;
  animation-delay: calc(min(var(--bar-index, 0), 45) * 14ms);
}
@keyframes bar-grow { from { transform: scaleY(0); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
.donut-segment { transition: stroke-width .2s var(--ease-out); }
.donut-segment:hover { stroke-width: 24; }
.progress-track i { background: var(--accent-gradient); }

/* --- Overlays --------------------------------------------------------------- */
.drawer { box-shadow: var(--shadow-lg); border-left: 1px solid var(--line); background: var(--surface); }
.drawer-head { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.modal-backdrop { background: rgba(20, 16, 12, .42); }
.command-box { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.toast { border-radius: 14px; box-shadow: var(--shadow-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.quick-card { border-radius: 14px; }

/* --- Planner ---------------------------------------------------------------- */
.planner-shell { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.planner-head.today { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 85%, var(--surface)), var(--surface-raised)); }
.planner-head.today strong { background: var(--accent-gradient); box-shadow: var(--shadow-accent); }
.mini-day { border-radius: 12px; transition: transform .2s var(--ease-out), border-color .2s var(--ease-out); }
.mini-day.today { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 85%, var(--surface)), var(--accent-soft)); box-shadow: 0 0 0 1px var(--accent), 0 8px 18px -10px rgba(139, 90, 43, .6); }

/* --- Sign-in ---------------------------------------------------------------- */
.login-screen { background: var(--canvas-glow), var(--canvas); }
.login-card { padding: 40px; border-radius: var(--radius-xl); }
.login-showcase { display: none; }
@media (min-width: 980px) {
  .login-screen {
    grid-template-columns: minmax(420px, 46%) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    padding: 0;
    column-gap: 0;
  }
  .login-showcase {
    grid-column: 1; grid-row: 1 / -1;
    align-self: stretch;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 64px clamp(40px, 6vw, 88px);
    background:
      radial-gradient(700px 420px at 15% 10%, rgba(240, 197, 143, .22), transparent 60%),
      radial-gradient(600px 400px at 90% 100%, rgba(139, 90, 43, .35), transparent 60%),
      linear-gradient(160deg, #221c16, #0f0d0b 70%);
    color: #f6efe5;
  }
  .login-showcase::after {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
    pointer-events: none;
  }
  .login-showcase-glow {
    position: absolute;
    width: 420px; height: 420px;
    right: -120px; top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 197, 143, .45), rgba(192, 138, 78, .12) 45%, transparent 70%);
    filter: blur(10px);
    animation: glow-drift 14s ease-in-out infinite alternate;
  }
  @keyframes glow-drift { to { transform: translate(-60px, 80px) scale(1.1); } }
  .login-showcase > *:not(.login-showcase-glow) { position: relative; z-index: 1; max-width: 520px; }
  .login-showcase-kicker { margin: 0; color: #f0c58f; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
  .login-showcase-title {
    margin: 0;
    font-family: Montserrat, Inter, sans-serif;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    background: linear-gradient(100deg, #fff 30%, #f0c58f 110%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .login-showcase-points { display: grid; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
  .login-showcase-points li {
    display: grid;
    gap: 2px;
    padding: 14px 16px 14px 44px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    backdrop-filter: blur(6px);
    position: relative;
  }
  .login-showcase-points li::before {
    content: '';
    position: absolute; left: 16px; top: 18px;
    width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f6d3a4, #c08a4e);
    box-shadow: 0 0 14px rgba(240, 197, 143, .6);
  }
  .login-showcase-points strong { font-size: 14px; color: #fff; }
  .login-showcase-points span { font-size: 13px; color: rgba(246, 239, 229, .66); }
  .login-brand { grid-column: 2; grid-row: 2; justify-self: center; margin-bottom: 22px; }
  .login-screen > .login-card { grid-column: 2; grid-row: 3; justify-self: center; align-self: start; }
}

/* --- Motion ----------------------------------------------------------------- */
/* A view composes itself when opened: blocks rise in sequence, then the cards
   inside grids follow. "entering" is set only on navigation, so live data
   refreshes never replay it. */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rise-scale { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.view.entering > * { animation: rise .6s var(--ease-out) both; }
.view.entering > :nth-child(2) { animation-delay: 50ms; }
.view.entering > :nth-child(3) { animation-delay: 100ms; }
.view.entering > :nth-child(4) { animation-delay: 150ms; }
.view.entering > :nth-child(5) { animation-delay: 200ms; }
.view.entering > :nth-child(6) { animation-delay: 240ms; }
.view.entering > :nth-child(n+7) { animation-delay: 280ms; }
.view.entering :is(.performance-stages, .metric-grid, .finance-summary, .creator-grid, .sops-grid, .attention-list, #team-grid, .mini-week) > * {
  animation: rise-scale .6s var(--ease-out) both;
  animation-delay: 160ms;
}
.view.entering :is(.performance-stages, .metric-grid, .finance-summary, .creator-grid, .sops-grid, .attention-list, #team-grid, .mini-week) > :nth-child(2) { animation-delay: 210ms; }
.view.entering :is(.performance-stages, .metric-grid, .finance-summary, .creator-grid, .sops-grid, .attention-list, #team-grid, .mini-week) > :nth-child(3) { animation-delay: 260ms; }
.view.entering :is(.performance-stages, .metric-grid, .finance-summary, .creator-grid, .sops-grid, .attention-list, #team-grid, .mini-week) > :nth-child(4) { animation-delay: 310ms; }
.view.entering :is(.performance-stages, .metric-grid, .finance-summary, .creator-grid, .sops-grid, .attention-list, #team-grid, .mini-week) > :nth-child(5) { animation-delay: 350ms; }
.view.entering :is(.performance-stages, .metric-grid, .finance-summary, .creator-grid, .sops-grid, .attention-list, #team-grid, .mini-week) > :nth-child(n+6) { animation-delay: 390ms; }
.login-card { animation: rise-scale .7s var(--ease-out) both; }
.login-showcase-points li { animation: rise .7s var(--ease-out) both; }
.login-showcase-points li:nth-child(2) { animation-delay: 90ms; }
.login-showcase-points li:nth-child(3) { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .view.entering > *, .view.entering *, .chart-animate *, .login-card, .login-showcase-points li,
  .login-showcase-glow, .notification-dot, .status-pill::before { animation: none !important; }
  .creator-card:hover, .quick-card:hover, .sop-card:hover, .attention-item:hover, .nav-item:hover, .button:hover { transform: none !important; }
}

/* --- Print: always the light, ink-on-paper palette ------------------------- */
@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    --canvas: #fff; --surface: #fff; --surface-raised: #f4f4f4; --ink: #000; --muted: #444; --muted-2: #555;
    --line: #ccc; --accent: #6f4520; --accent-soft: #f4ede5; --on-accent: #fff;
  }
  body { background: #fff; }
  .page-heading h1, .login-card h1, .performance-stage:first-child strong { background: none; color: #000; }
  .metric-card::after, .finance-card::after, .performance-stage::after { display: none; }
}

/* --- Signature: the Overview hero ----------------------------------------- */
/* The greeting becomes a warm, lit banner in the same family as the sign-in
   showcase: the one dramatic surface in an otherwise calm workspace. */
#view-overview > .page-heading {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 34px 36px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(720px 320px at 88% -30%, rgba(240, 197, 143, .30), transparent 62%),
    radial-gradient(520px 320px at -5% 130%, rgba(139, 90, 43, .50), transparent 62%),
    linear-gradient(135deg, #2b231b 0%, #15120f 68%);
  box-shadow: 0 30px 60px -30px rgba(41, 30, 18, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: #f6efe5;
}
#view-overview > .page-heading::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 80% 20%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 10%, transparent 70%);
}
#view-overview > .page-heading::after {
  content: '';
  position: absolute; z-index: -1;
  width: 360px; height: 360px; right: -90px; top: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 197, 143, .38), rgba(192, 138, 78, .1) 45%, transparent 70%);
  filter: blur(8px);
  animation: glow-drift-hero 16s ease-in-out infinite alternate;
}
@keyframes glow-drift-hero { to { transform: translate(-80px, 40px) scale(1.15); } }
#view-overview > .page-heading h1 {
  background: linear-gradient(100deg, #fff 30%, #f0c58f 115%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#view-overview > .page-heading .eyebrow { color: #f0c58f; }
#view-overview > .page-heading .eyebrow::before { background: #f0c58f; box-shadow: 0 0 0 3px rgba(240, 197, 143, .2), 0 0 12px rgba(240, 197, 143, .7); }
#view-overview > .page-heading .button-secondary {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #f6efe5;
  box-shadow: none;
  backdrop-filter: blur(6px);
}
#view-overview > .page-heading .button-secondary:hover { background: rgba(255, 255, 255, .13); border-color: rgba(240, 197, 143, .5); }
#view-overview > .page-heading .button-primary {
  background: linear-gradient(135deg, #f3cd98, #d39a5b 55%, #b47a3e);
  color: #1d1308;
  box-shadow: 0 10px 26px -10px rgba(240, 197, 143, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
}
@media (max-width: 768px) {
  #view-overview > .page-heading { padding: 24px 20px; border-radius: var(--radius-lg); }
}
@media (prefers-reduced-motion: reduce) { #view-overview > .page-heading::after { animation: none; } }
@media print {
  #view-overview > .page-heading { background: none; color: #000; box-shadow: none; border: 0; padding: 0; }
  #view-overview > .page-heading::before, #view-overview > .page-heading::after { display: none; }
  #view-overview > .page-heading h1 { background: none; color: #000; }
}

/* The theme switch is a compact round control beside the workspace status. */
.theme-toggle { width: 34px; height: 34px; padding: 0; justify-content: center; flex: none; }
.theme-toggle svg { width: 16px; height: 16px; }

/* On the dark canvas the hero needs an edge to separate it. */
:root[data-theme="dark"] #view-overview > .page-heading { border-color: rgba(240, 197, 143, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view-overview > .page-heading { border-color: rgba(240, 197, 143, .16); } }
.login-brand .brand-logo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 24px -10px rgba(192, 138, 78, .7); }

/* ==========================================================================
   Debloat and typography: October 2026
   Standing explanations become one-line hints or tooltips; capitals are kept
   for eyebrows, section labels and table headers only; secondary text never
   drops below 12px.
   ========================================================================== */

/* --- One-line expandable hint (replaces permanent explainer boxes) -------- */
.inline-hint { margin: 0; color: var(--muted); font-size: 12.5px; }
.inline-hint.span-2, .inline-hint.platform-account-note { grid-column: 1 / -1; }
.inline-hint > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 32px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  transition: color .18s var(--ease-out);
}
.inline-hint > summary::-webkit-details-marker { display: none; }
.inline-hint > summary > svg { flex: none; width: 15px; height: 15px; color: var(--accent); }
.inline-hint > summary > span:first-of-type { min-width: 0; }
.inline-hint > summary::after {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  margin-left: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  opacity: .55;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s var(--ease-out);
}
.inline-hint[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.inline-hint > summary:hover, .inline-hint[open] > summary { color: var(--ink); }
.inline-hint > p, .inline-hint > .earnings-fx-note {
  max-width: 72ch;
  margin: 2px 0 10px 23px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.inline-hint strong { color: var(--ink); }
.drawer-body > .inline-hint, .drawer-form > .inline-hint, .drawer-section > .inline-hint { display: block; margin-bottom: 12px; }
.currency-estimate-note, .metric-note { margin-top: 10px; }
#view-overview > .metric-note + .currency-estimate-note { margin-top: 0; }

/* --- Info tooltip ---------------------------------------------------------- */
.info-tip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-2);
  vertical-align: -3px;
  cursor: help;
  transition: color .15s var(--ease-out);
}
.info-tip svg { width: 14px; height: 14px; }
.info-tip:hover, .info-tip:focus-visible { color: var(--accent); }
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: -6px;
  width: max-content;
  max-width: min(260px, 70vw);
  padding: 8px 11px;
  border-radius: 10px;
  background: #1d1a16;
  color: #f6efe5;
  box-shadow: var(--shadow-lg);
  font: 500 12px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
.info-tip:hover::after, .info-tip:focus-visible::after { opacity: 1; transform: none; }
.owed-chatters-total .info-tip::after { top: auto; bottom: calc(100% + 8px); transform: translateY(4px); }
.owed-chatters-total .info-tip:hover::after, .owed-chatters-total .info-tip:focus-visible::after { transform: none; }
.owed-chatters, .owed-chatters-total { overflow: visible; }

/* --- Calmer capitals ------------------------------------------------------- */
h1, .page-heading h1, .login-card h1 {
  text-transform: none;
  font-weight: 800;
  letter-spacing: -.02em;
}
.metric-top > span:first-child, .finance-card > span:first-child, .owed-chatters-total > span,
.creator-stat span, .team-stat span, .paired-models span, .workload-head span,
.pairing-scope > span, .pairing-rate-label, .currency-guard, .sop-badge, .token-adjustment-hint {
  text-transform: none;
  letter-spacing: 0;
}
.metric-top > span:first-child, .finance-card > span:first-child, .owed-chatters-total > span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}
.creator-stat span, .team-stat span, .paired-models span, .workload-head span, .pairing-scope > span, .pairing-rate-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.status-pill {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 650;
}

/* --- Readable minimum: secondary text at 12px ------------------------------ */
.system-status small, .profile-chip small, .creator-earnings-table small, .performance-name small,
.performance-values small, .account-chips small, .planner-guide, .planner-guide > strong, .cell-stack small,
.calc-preview-head small, .calc-line span small, .assignment-option small, .balance-history-item small,
.attribution-reconciliation small, .attribution-person small, .attribution-card-foot small,
.attribution-platform-name small, .commission-ledger-main small, .payment-stack span, .receipt-payroll-summary small,
.receipt-table td > small, .sop-attachment-info small, .metric-foot, .agenda-shift-copy > small,
.agenda-shift-side > small, .performance-day-list button small, .token-adjustment-hint, .demo-logins > span,
.planner-tool-button, .sop-visibility, .field > small, .field-help, .section-help {
  font-size: 12px;
}
.planner-density button { font-size: 11.5px; }
.agenda-day-tabs span, .agenda-time small { font-size: 11px; }
/* Hints placed directly in a panel follow its inner padding. */
.panel > .inline-hint { margin: 0 24px 14px; }
/* Tooltips must escape their card: the glow is clipped by rounding instead of
   overflow, and the card holding an open tip rises above its neighbours. */
.performance-stage { overflow: visible; }
.performance-stage::after, .metric-card::after, .finance-card::after { border-radius: inherit; }
.performance-stage:has(.info-tip:hover, .info-tip:focus), .owed-chatters:has(.info-tip:hover, .info-tip:focus) { z-index: 6; }
/* Click or tap shows the tip too (touch screens have no hover). */
.info-tip:focus::after { opacity: 1; transform: none; }
.info-tip::after { border: 1px solid rgba(255, 255, 255, .1); }

/* Counting figures: the real value stays in the text (hidden while counting)
   and the moving number is drawn over it, so screen readers and anything that
   reads the page only ever see the true amount. */
.figure-counting { position: relative; color: transparent !important; -webkit-text-fill-color: transparent; }
.figure-counting::after {
  content: attr(data-figure-display);
  position: absolute;
  inset: 0;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  white-space: nowrap;
  pointer-events: none;
}
.figure-counting-gradient::after {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Overview daily chart: smooth area instead of bars --------------------- */
.area-stop-top { stop-color: var(--accent-bright); stop-opacity: .46; }
.area-stop-bottom { stop-color: var(--accent); stop-opacity: 0; }
.line-stop-start { stop-color: var(--bar-bottom); }
.line-stop-end { stop-color: var(--bar-top); }
.performance-area { fill: url(#overview-area-fill); }
.performance-line {
  fill: none;
  stroke: url(#overview-line-stroke);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 30%, transparent));
}
.performance-previous-line {
  fill: none;
  stroke: var(--muted-2);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  opacity: .75;
}
.performance-day { cursor: pointer; outline: none; }
.performance-hit { fill: transparent; }
.performance-point {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  transition: opacity .15s var(--ease-out);
}
.performance-day:hover .performance-point, .performance-day:focus-visible .performance-point { opacity: 1; }
.performance-day.selected .performance-point { opacity: 0; }
.performance-day:focus-visible .performance-focus-indicator { fill: var(--focus-ring); }
.performance-marker { pointer-events: none; }
.performance-marker-halo { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.performance-marker-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }
.chart-animate .performance-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: line-draw 1.1s var(--ease-out) forwards; }
.chart-animate .performance-area, .chart-animate .performance-previous-line { animation: area-fade .9s .2s var(--ease-out) both; }
.chart-animate .performance-marker { animation: area-fade .4s .9s var(--ease-out) both; }
@keyframes line-draw { to { stroke-dashoffset: 0; } }
@keyframes area-fade { from { opacity: 0; } }
.performance-chart-legend i.performance-legend-current { width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--bar-bottom), var(--bar-top)); }
.performance-chart-legend i.performance-legend-previous { width: 18px; height: 0; border-top: 2px dashed var(--muted-2); background: none; border-radius: 0; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .chart-animate .performance-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .chart-animate .performance-area, .chart-animate .performance-previous-line, .chart-animate .performance-marker { animation: none; }
}

/* ==========================================================================
   Charts, loading and personality: October 2026
   ========================================================================== */

/* Categorical chart colours, tuned per theme so slices stay distinct and
   legible on dark surfaces. */
:root { --chart-1: #8b5a2b; --chart-2: #2d6bca; --chart-3: #127e5f; --chart-4: #c0703f; --chart-5: #bb4052; --chart-6: #8a8278; }
:root[data-theme="dark"] { --chart-1: #e3a96b; --chart-2: #8db5f6; --chart-3: #55d3a4; --chart-4: #f2a27f; --chart-5: #f48d9b; --chart-6: #b3aa9e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chart-1: #e3a96b; --chart-2: #8db5f6; --chart-3: #55d3a4; --chart-4: #f2a27f; --chart-5: #f48d9b; --chart-6: #b3aa9e; }
}

/* --- Earnings daily chart: areas, matching the Overview --------------------- */
.earnings-area { fill: url(#earnings-area-fill); }
.earnings-line {
  fill: none;
  stroke: url(#earnings-line-stroke);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 30%, transparent));
}
.earnings-gross-area { fill: color-mix(in srgb, var(--chart-muted) 55%, transparent); }
.earnings-gross-line { fill: none; stroke: color-mix(in srgb, var(--muted-2) 55%, transparent); stroke-width: 1.5; stroke-linecap: round; }
.earnings-area-chart .bar-group { cursor: default; outline: none; }
.earnings-area-chart .bar-group:hover .performance-point, .earnings-area-chart .bar-group:focus-visible .performance-point,
.earnings-area-chart.single-day .performance-point { opacity: 1; }
.chart-animate .earnings-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: line-draw 1.1s var(--ease-out) forwards; }
.chart-animate .earnings-area, .chart-animate .earnings-gross-area, .chart-animate .earnings-gross-line { animation: area-fade .9s .2s var(--ease-out) both; }
.earnings-legend { justify-content: flex-end; padding: 10px 0 0; }
.performance-chart-legend i.earnings-legend-gross { width: 18px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--chart-muted) 80%, transparent); }
.chart-tooltip { border-radius: 12px; background: #1d1a16; color: #f6efe5; border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shadow-lg); padding: 10px 12px; line-height: 1.55; }

/* --- Platform donut --------------------------------------------------------- */
.donut-wrap { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); align-items: center; gap: 28px; padding: 8px 4px; }
.svg-donut { width: 100%; height: auto; overflow: visible; }
.donut-track { fill: none; stroke: var(--surface-raised); stroke-width: 22; }
.donut-segment {
  fill: none;
  stroke-width: 22;
  stroke-linecap: round;
  transition: stroke-width .2s var(--ease-out), filter .2s var(--ease-out);
  animation: area-fade .7s var(--ease-out) both;
  animation-delay: calc(var(--slice, 0) * 90ms);
}
.donut-segment:hover { stroke-width: 26; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18)); }
.donut-total { fill: var(--ink); font: 800 21px/1 Montserrat, Inter, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.donut-caption { fill: var(--muted); font: 600 12px/1 Inter, sans-serif; }
.donut-legend { display: grid; gap: 14px; }
.legend-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 6px;
  padding: 0;
  border: 0;
}
.legend-name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink); font-weight: 650; }
.legend-color { width: 10px; height: 10px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.legend-item > strong { font-variant-numeric: tabular-nums; }
.legend-item > small { min-width: 44px; color: var(--muted); font-size: 12px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.legend-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--surface-raised); overflow: hidden; }
.legend-bar > i { display: block; height: 100%; border-radius: inherit; animation: grow-x .8s var(--ease-out) both; transform-origin: left; }
@keyframes grow-x { from { transform: scaleX(0); } }
@media (max-width: 640px) {
  .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .svg-donut { max-width: 220px; }
  .donut-legend { width: 100%; }
}

/* --- Loading skeletons ------------------------------------------------------ */
.performance-skeleton {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 150px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow), var(--card-highlight);
}
.performance-skeleton > i {
  display: block;
  height: 12px;
  width: 55%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-raised) 0%, color-mix(in srgb, var(--surface-raised) 40%, var(--surface)) 50%, var(--surface-raised) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.performance-skeleton > i:nth-child(2) { height: 30px; width: 70%; }
.performance-skeleton > i:nth-child(3) { width: 40%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --- Hero trend line -------------------------------------------------------- */
.performance-stage > .stage-sparkline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: -1;
  width: 100%;
  height: 58%;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  pointer-events: none;
}
.stage-sparkline-area { fill: color-mix(in srgb, var(--accent-bright) 16%, transparent); }
.stage-sparkline-line { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 2; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .performance-skeleton > i, .donut-segment, .legend-bar > i,
  .chart-animate .earnings-line, .chart-animate .earnings-area, .chart-animate .earnings-gross-area, .chart-animate .earnings-gross-line { animation: none !important; }
  .chart-animate .earnings-line { stroke-dasharray: none; stroke-dashoffset: 0; }
}
/* The segments rotate inside the SVG now, so the centre total stays upright. */
.svg-donut { transform: none; height: auto; }
.donut-legend { display: grid; flex-direction: initial; }
.legend-item { display: grid; justify-content: initial; font-size: 13px; }
.legend-color { margin-right: 0; }
.donut-segment { cursor: default; opacity: 1; }
/* Quieter: low, faded towards the text side, and behind it in tone. */
.performance-stage > .stage-sparkline {
  height: 44%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 75%);
}
.stage-sparkline-area { fill: color-mix(in srgb, var(--accent-bright) 11%, transparent); }
.stage-sparkline-line { stroke: color-mix(in srgb, var(--accent) 32%, transparent); stroke-width: 1.5; }