/* ============================================================
   ZEROLO — shared prototype theme (plain CSS, mirrors the live app)
   Tokens pulled from tailwind.config.js + app.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:wght@400;600;700&display=swap');

:root {
  /* brand */
  --roi-gold: #F7B500;         /* fills / gradients ONLY — fails CWAG as text */
  --roi-gold-dark: #D19800;    /* darker gold FILL (button hover etc.) */
  --roi-gold-text: #BD8A00;    /* CWAG-safe gold for TEXT + gold-family stat numerals on white */
  --tawny: #BA7517;
  --carbon: #1A1A1A;
  --trust: #FFFFFF;
  --signal: #8B2469;   /* magenta — danger/critical */
  --thrive: #2D8659;   /* green — success */
  --ink: #354A5F;      /* dark navy text */
  --lichen: #E6E9E1;   /* sage page bg */

  /* derived neutrals.
     WAG: these are TEXT tokens, and at their original alphas none of them cleared WCAG AA
     (4.5:1) on any ground we paint on — --ink-60 bottomed out at 2.91:1 on sage, --ink-45 at
     2.14:1. Between them they caused 70 of the 117 contrast failures found in the mobile
     sweep. 0.80 is the measured minimum that passes on white AND on the cream/sage grounds
     (0.75 still fails sage at 4.06:1). Secondary text reads a little darker now — that is the
     fix, not a side-effect. The names are kept so nothing downstream has to change.
     NOTE: this is a colour bug, so it was failing on desktop too — not a mobile-only issue. */
  --ink-60: rgba(53,74,95,0.80);
  --ink-65: rgba(53,74,95,0.80);
  --ink-45: rgba(53,74,95,0.80);
  --lichen-60: rgba(230,233,225,0.60);
  --lichen-50: rgba(230,233,225,0.50);
  --lichen-40: rgba(230,233,225,0.40);
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-700: #374151;

  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --font-sans: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-serif: 'IBM Plex Serif', Georgia, serif;

  /* layered soft shadows — modern elevated surfaces */
  --shadow-card: 0 1px 2px rgba(26,26,26,0.06), 0 6px 20px rgba(26,26,26,0.10);
  --shadow-card-hover: 0 1px 2px rgba(26,26,26,0.06), 0 14px 34px rgba(26,26,26,0.16);
  --shadow-kpi: 0 1px 2px rgba(26,26,26,0.06), 0 6px 20px rgba(26,26,26,0.10);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);

  --page-bg: #E6E9E1;   /* lichen — matches the real Zerolo dashboard */
  --hairline: #ECEDE9;

  /* Floating-label 2-state data-entry fields (Brand Book v06292026, pg 6) */
  --field-empty-border: #CBD4DD;   /* Peridot — 1px border, INCOMPLETE field */
  --field-empty-fill:   #F7F9FA;   /* Cloud   — INCOMPLETE field background   */
  --field-filled-border:#6B839E;   /* Lapis   — 1px border, COMPLETED field   */
  --field-filled-fill:  #EAF0F2;   /* Bluebell— COMPLETED field background     */

  /* Alert / floating-label derivative colours (Brand Book v06292026, pg 3) — border + matching bg pairs */
  --alert-warn-border:    #FFC933;  /* Marigold — warning-tier / pending          */
  --alert-warn-bg:        #FFFBF5;  /* Limoncello                                 */
  --alert-urgent-border:  #B84A94;  /* Berry — urgent / critical / high-priority  */
  --alert-urgent-bg:      #FBF5F8;  /* Glacé                                       */
  --alert-success-border: #5CB387;  /* Blade — success / completed / positive     */
  --alert-success-bg:     #F5FAF7;  /* Dew                                         */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: var(--carbon);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============ APP SHELL ============ */
.app { min-height: 100vh; }

/* ---- Sidebar (floating carbon pill) ---- */
.sidebar {
  position: fixed; top: 12px; bottom: 12px; left: 12px; z-index: 50;
  width: 256px; background: var(--carbon);
  border-radius: var(--r-2xl); box-shadow: var(--shadow-2xl);
  display: flex; flex-direction: column; overflow: hidden;
  background-image:
    linear-gradient(rgba(247,181,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,181,0,0.025) 1px, transparent 1px);
  background-size: 36px 36px;
}
.sb-logo { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 24px; border-bottom: 1px solid rgba(247,181,0,0.18); flex-shrink: 0; }
.sb-logo-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--roi-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-logo-mark svg { width: 18px; height: 18px; color: var(--carbon); }
.sb-logo-text { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sb-nav { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.sb-nav::-webkit-scrollbar { width: 0; }
/* .48 not .40 — white-40% on Carbon composites to #767676 = 3.8:1, below the 4.5 AA floor (Rule 7). */
.sb-section { font-size:12px; font-weight: 600; color: rgba(255,255,255,0.48); text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 12px 4px; }
.sb-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.70);
  border-radius: var(--r-lg); transition: all .15s; cursor: pointer; width: 100%;
}
.sb-item:hover { background: rgba(255,255,255,0.10); color: #fff; }
.sb-item.active { background: var(--roi-gold); color: var(--carbon); font-weight: 600; border-radius: 999px; }
.sb-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.sb-item .sb-label { flex: 1; }
.sb-badge { margin-left: auto; font-size:12px; padding: 1px 8px; border-radius: 999px; font-weight: 500; }
.sb-badge.gold { background: var(--roi-gold); color: var(--carbon); }
.sb-badge.thrive { background: var(--thrive); color: #fff; }
.sb-badge.signal { background: var(--signal); color: #fff; }
.sb-badge.ink { background: var(--ink); color: #fff; }
.sb-chev { margin-left: auto; width: 16px; height: 16px; transition: transform .2s; opacity: .6; }
.sb-group.open .sb-chev { transform: rotate(180deg); }
.sb-sub { margin: 2px 0 2px 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.10); display: none; flex-direction: column; gap: 1px; }
.sb-group.open .sb-sub { display: flex; }
.sb-subitem { display: flex; align-items: center; gap: 9px; padding: 8px 12px; font-size: 13px; color: rgba(255,255,255,0.62); border-radius: var(--r-lg); }
.sb-subitem:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sb-subitem.active { background: var(--roi-gold); color: var(--carbon); font-weight: 600; }
.sb-subitem svg { width: 16px; height: 16px; flex-shrink: 0; }
.sb-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sb-foot-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--roi-gold); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--carbon); }
.sb-foot-name { font-size: 13px; font-weight: 600; color: #fff; }
/* .50 not .45 — white-45% on Carbon = 4.47:1, a hair under the 4.5 AA floor (Rule 7). */
.sb-foot-role { font-size:12px; color: rgba(255,255,255,0.50); }

/* ---- Main column ---- */
.main { margin-left: 280px; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 40; height: 64px; background: #fff;
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
}
.topbar-title { font-size: 16px; font-weight: 600; color: var(--carbon); }
.topbar-search {
  flex: 1; max-width: 460px; margin: 0 8px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--gray-300); border-radius: var(--r-lg); padding: 8px 12px;
  /* WAG: --gray-400 (#9CA3AF, a Tailwind grey) is 1.97:1 on the tinted topbar — the search
     prompt was barely visible. Use the product's own mute token, which is contrast-checked. */
  color: var(--ink-60); font-size: 13px;
}
.topbar-search svg { width: 18px; height: 18px; flex-shrink: 0; }
.topbar-spacer { flex: 1; }
.topbar-icon { position: relative; width: 38px; height: 38px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; color: var(--gray-500); }
.topbar-icon:hover { background: var(--gray-100); color: var(--gray-700); }
.topbar-icon svg { width: 22px; height: 22px; }
.topbar-dot { position: absolute; top: 6px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--signal); color: #fff; font-size:12px; font-weight: 600; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.btn-add { display: flex; align-items: center; gap: 6px; padding: 9px 18px; background: var(--roi-gold); color: var(--carbon); font-size: 14px; font-weight: 600; border-radius: 999px; transition: background .15s; }
.btn-add:hover { background: var(--tawny); color: #fff; }
.btn-add svg { width: 16px; height: 16px; }
.addnew-chev { width: 14px !important; height: 14px !important; opacity: .8; }
/* Add-new dropdown (matches the live app) */
.addnew-wrap { position: relative; }
.addnew-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 230px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-2xl); padding: 7px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; }
.addnew-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.addnew-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-lg); font-size: 13.5px; font-weight: 500; color: var(--ink); transition: background .12s; }
.addnew-menu a:hover { background: var(--page-bg); color: var(--carbon); }
.addnew-menu a svg { width: 16px; height: 16px; color: var(--ink-60); flex-shrink: 0; }
.addnew-div { height: 1px; background: var(--hairline); margin: 5px 4px; }
.topbar-user { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.topbar-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.topbar-user-name { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.topbar-user-role { font-size:12px; color: var(--gray-500); }
.trial-pill { font-size: 12px; font-weight: 500; color: var(--tawny); background: rgba(247,181,0,0.10); border: 1px solid rgba(247,181,0,0.30); padding: 6px 12px; border-radius: 999px; }

/* ---- Content ---- */
.content { flex: 1; padding: 24px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-title { font-size: 22px; font-weight: 700; color: var(--carbon); letter-spacing: -0.01em; }
.page-sub { font-size: 13px; color: var(--ink-60); margin-top: 2px; }

/* ============ COMPONENTS ============ */
.card { background: #fff; border-radius: var(--r-2xl); box-shadow: var(--shadow-card); border: 1px solid var(--hairline); overflow: hidden; }
.card-shadow { box-shadow: var(--shadow-card); transition: box-shadow .2s, transform .2s; }
.card-shadow:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.card-head { padding: 13px 18px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; }
.card-head-title { font-size: 15px; font-weight: 600; color: var(--carbon); display: flex; align-items: center; gap: 8px; }
.card-head-title svg { width: 18px; height: 18px; color: var(--ink-60); }
.card-link { font-size: 12px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 3px; transition: color .15s; }
.card-link:hover { color: var(--roi-gold-text); }
.card-body { padding: 16px; }

/* KPI */
.kpi-grid { display: grid; gap: 14px; margin-bottom: 16px; }
.kpi { position: relative; background: #fff; border-radius: var(--r-2xl); box-shadow: var(--shadow-kpi); border: 1px solid var(--hairline); padding: 16px 18px; display: flex; align-items: flex-start; gap: 13px; transition: box-shadow .2s, transform .2s; overflow: hidden; }
.kpi:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.kpi-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-label { font-size:12px; font-weight: 600; color: var(--ink-60); letter-spacing: 0.03em; text-transform: uppercase; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--carbon); letter-spacing: -0.025em; line-height: 1.05; margin-top: 3px; }
.kpi-delta { font-size:12px; font-weight: 500; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.kpi-delta.up { color: var(--thrive); }
.kpi-delta.warn { color: var(--tawny); }
.kpi-delta.down { color: var(--signal); }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size:12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.badge.gold { background: rgba(247,181,0,0.12); color: var(--tawny); }
.badge.thrive { background: rgba(45,134,89,0.12); color: var(--thrive); }
.badge.signal { background: rgba(139,36,105,0.12); color: var(--signal); }
.badge.ink { background: rgba(53,74,95,0.10); color: var(--ink); }
.badge.gray { background: var(--gray-100); color: var(--gray-500); }

/* Alert cards / banners — derivative border+bg pairs (Brand Book pg 3).
   Text inside stays the darker severity colour for contrast (Marigold/Blade are too pale for text). */
.alert { display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; border-radius: var(--r-xl);
  border: 1px solid transparent; font-size: 13px; line-height: 1.5; }
.alert svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.alert b { font-weight: 700; }
.alert-warn    { background: var(--alert-warn-bg);    border-color: var(--alert-warn-border);    color: var(--tawny); }
.alert-urgent  { background: var(--alert-urgent-bg);  border-color: var(--alert-urgent-border);  color: var(--signal); }
.alert-success { background: var(--alert-success-bg); border-color: var(--alert-success-border); color: var(--thrive); }
.alert-warn svg    { color: var(--alert-warn-border); }
.alert-urgent svg  { color: var(--alert-urgent-border); }
.alert-success svg { color: var(--alert-success-border); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; transition: all .15s; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--roi-gold); color: var(--carbon); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--roi-gold-dark); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); transform: translateY(-1px); }
.btn-dark { background: var(--carbon); color: #fff; }
.btn-dark:hover { background: var(--ink); }
.btn-outline { background: #fff; border: 1px solid var(--gray-300); color: var(--gray-700); }
.btn-outline:hover { background: var(--gray-50); }
.btn-danger { background: rgba(139,36,105,0.10); border: 1px solid rgba(139,36,105,0.30); color: var(--signal); }
.btn-danger:hover { background: rgba(139,36,105,0.16); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { background: var(--gray-50); padding: 10px 16px; text-align: left; font-size:12px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); font-size: 13px; color: var(--carbon); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--gray-50); }
.tbl-avatar { width: 32px; height: 32px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size:12px; font-weight: 700; flex-shrink: 0; }

/* tabs */
.tabs { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
.tab { font-size: 13px; font-weight: 500; padding: 7px 13px; color: var(--ink-60); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
.tab:hover { color: var(--carbon); background: #EFF0EC; }
.tab.active { color: #fff; background: var(--ink); font-weight: 600; }
.tab-badge { font-size:12px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: rgba(139,36,105,0.12); color: var(--signal); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* progress bar */
.bar-bg { height: 6px; background: var(--lichen); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; }

/* VERA strip */
.vera {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, rgba(53,74,95,0.06), rgba(247,181,0,0.05));
  border: 1px solid rgba(53,74,95,0.12); border-radius: var(--r-xl);
  padding: 12px 16px; margin-bottom: 16px;
}
.vera-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.vera-text { flex: 1; font-size: 13px; color: var(--ink); line-height: 1.5; font-style: italic; }
.vera-action { font-size: 12px; font-weight: 600; color: var(--roi-gold-text); white-space: nowrap; align-self: center; }

/* attention banner */
.attention { background: rgba(247,181,0,0.10); border: 1px solid rgba(247,181,0,0.35); border-radius: var(--r-xl); padding: 12px 16px; margin-bottom: 16px; }
.attention-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--tawny); margin-bottom: 8px; }
.attention-head svg { width: 18px; height: 18px; }
.attention-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink); line-height: 1.5; padding: 3px 0; }
.attention-item svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }

/* layout helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.row { display: flex; align-items: center; gap: 8px; }
.mb-16 { margin-bottom: 16px; }
.text-mono { font-family: var(--font-mono); }
.text-thrive { color: var(--thrive); }
.text-signal { color: var(--signal); }
.text-tawny { color: var(--tawny); }
.text-ink60 { color: var(--ink-60); }

/* list rows */
.lrow { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--lichen-50); }
.lrow:last-child { border-bottom: none; }
.lrow:hover { background: #FAFAF8; }
.lrow-title { font-size: 13px; font-weight: 600; color: var(--carbon); }
.lrow-sub { font-size:12px; color: var(--ink-60); margin-top: 1px; }

@media (max-width: 1024px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ===== modern refinements (mono+gold+state, elevation tiers, charts) ===== */
.card-flat { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-2xl); overflow:hidden; }
.group-label { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-45); margin:0 0 10px 2px; }

/* KPI: mono icon chip by default; sparkline */
.kpi-icon.mono { background:#F1F2EF; }
.kpi-icon.mono svg { stroke:var(--ink); }
.kpi-spark { margin-top:8px; height:28px; width:100%; }
.kpi-top { display:flex; align-items:flex-start; justify-content:space-between; }
.kpi-pill { font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; }
.kpi-pill.up { background:rgba(45,134,89,0.10); color:var(--thrive); }
.kpi-pill.warn { background:rgba(186,117,23,0.12); color:var(--tawny); }
.kpi-pill.down { background:rgba(139,36,105,0.10); color:var(--signal); }

/* attention as white card w/ red accent (no yellow flood) */
.attn-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-card); }
.attn-head { display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--hairline); font-size:13px; font-weight:700; color:var(--carbon); }
.attn-head .dot { width:8px; height:8px; border-radius:50%; background:var(--signal); }
.attn-head .count { margin-left:auto; font-size:12px; font-weight:600; color:var(--signal); background:rgba(139,36,105,0.10); padding:2px 8px; border-radius:999px; }
.attn-row { display:flex; align-items:flex-start; gap:10px; padding:10px 16px; border-bottom:1px solid var(--hairline); }
.attn-row:last-child { border-bottom:none; }
.attn-ico { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.attn-ico svg { width:22px; height:22px; }
.attn-body { flex:1; font-size:12.5px; line-height:1.45; color:var(--ink); }
.attn-body b { color:var(--carbon); }
.attn-fix { font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; align-self:center; }
.attn-fix:hover { color:var(--roi-gold-text); }

/* donut */
.donut { --val:42; width:96px; height:96px; border-radius:50%;
  background: conic-gradient(var(--ink) calc(var(--val)*1%), var(--lichen) 0);
  display:flex; align-items:center; justify-content:center; position:relative; }
.donut::after { content:''; position:absolute; width:66px; height:66px; border-radius:50%; background:#fff; }
.donut-val { position:relative; z-index:1; font-size:18px; font-weight:700; color:var(--carbon); }


/* ===== presentation helper: bulb + notes panel ===== */
.bulb { position:fixed; right:22px; bottom:22px; z-index:80; width:50px; height:50px; border-radius:50%;
  background:var(--roi-gold); color:var(--carbon); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(247,181,0,.45); cursor:pointer; transition:transform .15s, box-shadow .2s; }
.bulb:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 10px 28px rgba(247,181,0,.55); }
.bulb svg { width:24px; height:24px; }
.notes-ov { position:fixed; inset:0; z-index:90; background:rgba(26,26,26,.45); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:24px; }
.notes-ov.open { display:flex; }
.notes-modal { background:#fff; border-radius:var(--r-2xl); box-shadow:var(--shadow-2xl); max-width:560px; width:100%;
  max-height:84vh; overflow-y:auto; }
.notes-hd { display:flex; align-items:center; gap:10px; padding:18px 22px; border-bottom:1px solid var(--hairline); position:sticky; top:0; background:#fff; }
.notes-hd .nb { width:34px; height:34px; border-radius:9px; background:rgba(247,181,0,.15); display:flex; align-items:center; justify-content:center; }
.notes-hd .nb svg { width:18px; height:18px; color:var(--roi-gold-text); }
.notes-hd h3 { font-size:16px; font-weight:700; color:var(--carbon); flex:1; }
.notes-x { font-size:22px; color:var(--ink-45); cursor:pointer; line-height:1; }
.notes-bd { padding:18px 22px; }
.notes-bd .nsec { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-45); margin:14px 0 8px; }
.notes-bd .nsec:first-child { margin-top:0; }
.fix { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--hairline); }
.fix:last-child { border-bottom:none; }
.fix-ic { width:22px; height:22px; border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(45,134,89,.12); color:var(--thrive); font-size:13px; font-weight:700; margin-top:1px; }
.fix-b { flex:1; font-size:13px; line-height:1.5; }
.fix-b b { color:var(--carbon); }
.fix-b .why { color:var(--ink-60); }
.notes-foot { padding:12px 22px; border-top:1px solid var(--hairline); font-size:12px; color:var(--ink-45); background:var(--gray-50); }


/* ===== palette overlay (Add new) ===== */
.pal-ov{position:fixed;inset:0;z-index:90;background:rgba(26,26,26,.45);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:90px 24px;}
.pal-ov.open{display:flex;}
.pal-ov .pal{width:100%;max-width:560px;background:#fff;border-radius:var(--r-2xl);box-shadow:var(--shadow-2xl);overflow:hidden;}
.pal-ov .pal-search{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--hairline);}
.pal-ov .pal-search svg{width:18px;height:18px;color:var(--ink-45);}
.pal-ov .pal-search input{flex:1;border:none;outline:none;font-family:var(--font-sans);font-size:14px;color:var(--carbon);background:transparent;}
.pal-ov .pal-x{font-size:12px;color:var(--ink-45);font-family:var(--font-mono);border:1px solid var(--gray-200);border-radius:5px;padding:2px 6px;cursor:pointer;}
.pal-ov .pal-sec{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);padding:10px 16px 4px;display:flex;align-items:center;gap:8px;}
.pal-ov .pal-badge{font-size:12px;background:rgba(186,117,23,.12);color:var(--tawny);padding:1px 7px;border-radius:999px;font-weight:600;}
.pal-ov .pal-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;}
.pal-ov .pal-item:hover{background:#FAFAF8;}
.pal-ov .pal-item.sel{background:rgba(53,74,95,.06);}
.pal-ov .pal-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#F1F2EF;}
.pal-ov .pal-ico svg{width:17px;height:17px;stroke:var(--ink);}
.pal-ov .pal-nm{font-size:13.5px;font-weight:600;color:var(--carbon);}
.pal-ov .pal-ds{font-size:12px;color:var(--ink-60);}
.pal-ov .pal-log{font-size:12px;color:var(--tawny);background:rgba(186,117,23,.10);padding:2px 8px;border-radius:6px;margin-left:auto;flex-shrink:0;}
.pal-ov .pal-foot{padding:10px 16px;border-top:1px solid var(--hairline);font-size:12px;color:var(--ink-45);}


/* ===== motion / animation system (tasteful, GPU-friendly) ===== */
@keyframes riseIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes softPulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@keyframes ringPulse { 0% { box-shadow:0 0 0 0 rgba(45,134,89,.45); } 70% { box-shadow:0 0 0 7px rgba(45,134,89,0); } 100% { box-shadow:0 0 0 0 rgba(45,134,89,0); } }
@keyframes accentPulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@keyframes growW { from { width:0 !important; } }

/* entrance: anything with .anim rises in; stagger via --d */
.anim { opacity:0; animation:riseIn .5s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:var(--d,0s); }

/* tab cross-fade */
.slot-pane.active, .tab-pane.active { animation:fadeIn .22s ease both; }

/* live signals */
.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--thrive); animation:softPulse 1.8s ease-in-out infinite; }
.pulse-ring { animation:ringPulse 2.2s ease-out infinite; }
.attn-card .dot { animation:accentPulse 1.8s ease-in-out infinite; }
.bar-fill { animation:growW 1s cubic-bezier(.2,.7,.3,1) both; }
.bulb { animation:fadeIn .4s ease .6s both; }
.bulb::after { content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(247,181,0,.5); animation:ringPulse 2.6s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim, .slot-pane.active, .tab-pane.active, .bulb { animation:none !important; opacity:1 !important; }
  .live-dot, .pulse-ring, .attn-card .dot, .bar-fill, .bulb::after { animation:none !important; }
}


/* == TASK5 MOBILE TYPE BUMP == */
/* Mobile type floor-raise (Nadine). MOBILE ONLY — nothing above 760px changes.
   Same size-band remap as the per-screen blocks, applied to the SHARED tokens so the
   screens that get most of their type from here move in lockstep with the rest.
   11/11.5→12.5 · 12/12.5→13.5 · 13/13.5→14.5 · 14/14.5→15.5 · 15/16→17. >=18px untouched. */
@media (max-width:760px){
  body{ font-size:15.5px; }
  .sb-item{ font-size:15.5px; }
  .sb-badge{ font-size:13.5px; }
  .sb-subitem{ font-size:14.5px; }
  .sb-foot-avatar{ font-size:13.5px; }
  .sb-foot-name{ font-size:14.5px; }
  .topbar-title{ font-size:17px; }
  .topbar-search{ font-size:14.5px; }
  .topbar-dot{ font-size:13.5px; }
  .btn-add{ font-size:15.5px; }
  .addnew-menu a{ font-size:14.5px; }
  .topbar-user-avatar{ font-size:13.5px; }
  .topbar-user-name{ font-size:14.5px; }
  .topbar-user-role{ font-size:13.5px; }
  .trial-pill{ font-size:13.5px; }
  .page-sub{ font-size:14.5px; }
  .card-head-title{ font-size:17px; }
  .card-link{ font-size:13.5px; }
  .kpi-label{ font-size:13.5px; }
  .kpi-delta{ font-size:13.5px; }
  .tbl th{ font-size:13.5px; }
  .tbl td{ font-size:14.5px; }
  .tbl-avatar{ font-size:13.5px; }
  .tab{ font-size:14.5px; }
  .tab-badge{ font-size:13.5px; }
  .vera-avatar{ font-size:14.5px; }
  .vera-text{ font-size:14.5px; }
  .vera-action{ font-size:13.5px; }
  .attention-head{ font-size:14.5px; }
  .attention-item{ font-size:13.5px; }
  .lrow-title{ font-size:14.5px; }
  .lrow-sub{ font-size:13.5px; }
  .group-label{ font-size:13.5px; }
  .kpi-pill{ font-size:13.5px; }
  .attn-head{ font-size:14.5px; }
  .attn-head .count{ font-size:13.5px; }
  .attn-body{ font-size:13.5px; }
  .attn-fix{ font-size:13.5px; }
  .notes-hd h3{ font-size:17px; }
  .notes-bd .nsec{ font-size:13.5px; }
  .fix-ic{ font-size:14.5px; }
  .fix-b{ font-size:14.5px; }
  .notes-foot{ font-size:13.5px; }
  .pal-ov .pal-search input{ font-size:15.5px; }
  .pal-ov .pal-x{ font-size:13.5px; }
  .pal-ov .pal-sec{ font-size:13.5px; }
  .pal-ov .pal-badge{ font-size:13.5px; }
  .pal-ov .pal-nm{ font-size:14.5px; }
  .pal-ov .pal-ds{ font-size:13.5px; }
  .pal-ov .pal-log{ font-size:13.5px; }
  .pal-ov .pal-foot{ font-size:13.5px; }
}