/* Self-hosted from the site's own font directory: no Google Fonts request, and
   nothing to re-download when a visitor moves from the landing page to here. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sharp Dashboard — retuned to the sharp-co.ai.studio landing page identity.
   Surfaces, accent, radius and type all come from site/css/styles.css so the
   dashboard reads as the same product, not a third-party tool. */
:root {
  /* Background — the site's surface ramp, built off the logo's #131814 */
  --bg-primary: #0C100D;
  --bg-secondary: #131814;
  --bg-tertiary: #1A211B;
  --bg-card: #131814;
  --bg-sidebar: #0A0E0B;
  --bg-hover: #232B24;

  /* Text — matches the site, all WCAG AA on the surfaces above */
  --text-primary: #F2F5EF;
  --text-secondary: #9FA7A0;
  --text-tertiary: #7C857E;
  --text-disabled: #626B64;

  /* Brand — the site's hi-vis lime, not the dashboard's original #a3e635 */
  --brand: #BAFB04;
  --brand-hover: #CDFF3A;
  --brand-light: #DCFF7A;
  --brand-grad-start: #93C703;
  --brand-grad-end: #D2FF52;
  --brand-gradient: linear-gradient(135deg, #93C703, #D2FF52);
  /* readable on lime: 15.4:1 */
  --on-brand: #0C100D;

  /* Status — emerald keeps "good" distinct from the lime brand */
  --success: #10b981;
  --warning: #f5b041;
  --danger: #e74c3c;
  --info: #38bdf8;
  --success-bg: rgba(16, 185, 129, 0.15);
  --warning-bg: rgba(245, 176, 65, 0.15);
  --danger-bg: rgba(231, 76, 60, 0.15);
  --info-bg: rgba(56, 189, 248, 0.15);

  /* Charts */
  --chart-bar-active: #BAFB04;
  --chart-bar-inactive: #2A322B;
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-axis: #7C857E;

  /* Borders — the site's hairlines */
  --border-default: rgba(255, 255, 255, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Typography — the site's Archivo, self-hosted from ../../fonts */
  --font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.8;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;

  /* Radius — the site is square-locked, so every panel corner is 0.
     Pills stay pills: they read as status chips, not as containers. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 999px;

  /* Shadows — the site separates surfaces with hairlines, not elevation */
  --shadow-card: none;
  --shadow-elevated: 0 18px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 28px rgba(186, 251, 4, 0.18);

  /* Layout */
  --demo-bar-h: 52px;
  --sidebar-width: 240px;
  --header-height: 72px;
  --content-padding: 24px;
  --card-gap: 16px;

  /* Channel accents */
  --meta-color: #4267f1;
  --google-color: #ea4335;

  /* Topbar surface (theme-aware) — same blur treatment as the site's nav */
  --topbar-bg: rgba(12, 16, 13, 0.82);
  /* Frosted-glass surface for drawer / command palette */
  --glass-bg: rgba(19, 24, 20, 0.78);
}

/* ===================== Light theme ===================== */
:root[data-theme='light'] {
  --bg-primary: #f4f6f9;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef1f5;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-hover: #eef1f5;

  --text-primary: #14171c;
  --text-secondary: #4a515b;
  --text-tertiary: #6b7280;
  --text-disabled: #9aa0a8;

  --border-default: #e3e7ec;
  --border-subtle: #eef1f4;
  --border-strong: #d3d8df;

  --chart-bar-inactive: #d9dee4;
  --chart-grid: #e7eaef;
  --chart-axis: #9aa0a8;

  --shadow-card: 0 2px 10px rgba(16, 24, 40, 0.06);
  --shadow-elevated: 0 10px 30px rgba(16, 24, 40, 0.12);
  --shadow-glow: 0 0 22px rgba(186, 251, 4, 0.22);

  --topbar-bg: rgba(255, 255, 255, 0.82);
  --glass-bg: rgba(255, 255, 255, 0.78);

  color-scheme: light;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#root {
  height: 100%;
}

body {
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 999px;
  border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3a3a;
}

/* ---- Utilities ---- */
/* Everything sits below the fixed demo bar. The sidebar and topbar are both
   pinned, so each needs its own offset rather than one padding on the shell. */
.app-shell {
  display: flex;
  min-height: calc(100vh - var(--demo-bar-h));
  padding-top: var(--demo-bar-h);
}

.main-area {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
}

.page {
  padding: var(--content-padding);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  max-width: 1600px;
  width: 100%;
  /* left-aligned so content hugs the sidebar instead of centering on wide screens */
  margin: 0;
}

.grid {
  display: grid;
  gap: var(--card-gap);
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--card-gap);
}
.metrics-secondary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: calc(-1 * var(--sp-sm));
}

.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--card-gap);
}
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
}
.col-span-2 {
  grid-column: span 2;
}
.span-2-3 {
  grid-template-columns: 2fr 1fr;
}
.span-1-2 {
  grid-template-columns: 1fr 2fr;
}

@media (max-width: 1100px) {
  .cols-3,
  .span-2-3,
  .span-1-2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .cols-2 {
    grid-template-columns: 1fr;
  }
  .col-span-2 {
    grid-column: span 1;
  }
}

.text-secondary {
  color: var(--text-secondary);
}
.text-tertiary {
  color: var(--text-tertiary);
}

.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-sm {
  gap: var(--sp-sm);
}
.gap-md {
  gap: var(--sp-md);
}

.delta-up {
  color: var(--success);
}
.delta-down {
  color: var(--danger);
}

/* Recharts focus outlines off */
.recharts-wrapper:focus,
.recharts-surface:focus {
  outline: none;
}

/* Visible keyboard focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Lazy-route loading fallback */
.page-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  min-height: 60vh;
  color: var(--text-tertiary);
  font-size: var(--fs-md);
}
.spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Entrance choreography (staggered fade-up) ===== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page > *:not(.metrics-row),
.metrics-row > * {
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page > *:nth-child(1) { animation-delay: 0.02s; }
.page > *:nth-child(2) { animation-delay: 0.08s; }
.page > *:nth-child(3) { animation-delay: 0.14s; }
.page > *:nth-child(4) { animation-delay: 0.2s; }
.page > *:nth-child(5) { animation-delay: 0.26s; }
.page > *:nth-child(6) { animation-delay: 0.32s; }
.page > *:nth-child(n + 7) { animation-delay: 0.38s; }

.metrics-row > *:nth-child(1) { animation-delay: 0.04s; }
.metrics-row > *:nth-child(2) { animation-delay: 0.09s; }
.metrics-row > *:nth-child(3) { animation-delay: 0.14s; }
.metrics-row > *:nth-child(4) { animation-delay: 0.19s; }
.metrics-row > *:nth-child(5) { animation-delay: 0.24s; }
.metrics-row > *:nth-child(6) { animation-delay: 0.29s; }
.metrics-row > *:nth-child(7) { animation-delay: 0.34s; }
.metrics-row > *:nth-child(n + 8) { animation-delay: 0.39s; }

/* ===== Smooth theme cross-fade ===== */
body,
.card,
.metric,
.sidebar,
.topbar,
.drawer-panel,
.data-table thead th,
.data-table tbody td {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============ Ambient backdrop ============ */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(680px 420px at 14% -6%, rgba(163, 230, 53, 0.16), transparent 60%),
    radial-gradient(560px 380px at 100% 0%, rgba(52, 152, 219, 0.08), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(0, 0, 0, 0.55), transparent 60%);
}
:root[data-theme='light'] .ambient {
  background:
    radial-gradient(680px 420px at 14% -6%, rgba(163, 230, 53, 0.1), transparent 60%),
    radial-gradient(560px 380px at 100% 0%, rgba(52, 152, 219, 0.06), transparent 55%);
}
/* Lift content above the ambient layer WITHOUT disturbing the fixed sidebar. */
.app-shell > .main-area {
  position: relative;
  z-index: 1;
}

/* ============ Sidebar ============ */
.sidebar {
  position: fixed;
  top: var(--demo-bar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: var(--sp-xl) var(--sp-md);
  z-index: 20;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xs) var(--sp-sm) var(--sp-xl);
}
.brand-logo {
  width: 26px;
  height: 30px;
  flex-shrink: 0;
}
.brand-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  flex: 1;
}
.nav-section {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: var(--sp-sm) var(--sp-sm) var(--sp-xs);
}

/* ============ Demo bar ============
   Fixed strip above the whole shell. It states that this is a demo, offers
   the way back to the site, and carries the booking CTA. Everything else in
   this dashboard is product chrome; this is the only marketing surface. */
.demo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;                       /* above the sidebar (20) and topbar (10) */
  height: var(--demo-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding: 0 var(--sp-xl);
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-default);
}

.demo-bar-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-bar-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--brand);
  border-radius: var(--radius-pill);
}

.demo-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-shrink: 0;
}

.demo-bar-back,
.demo-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 var(--sp-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.demo-bar-back {
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.demo-bar-back:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.demo-bar-cta {
  background: var(--brand);
  color: var(--on-brand);            /* 15.4:1 */
  border: 1px solid var(--brand);
}
.demo-bar-cta:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.demo-bar-back svg,
.demo-bar-cta svg { flex-shrink: 0; }

/* Narrow screens: the disclosure text yields before the actions do. */
@media (max-width: 640px) {
  .demo-bar { padding: 0 var(--sp-md); gap: var(--sp-sm); }
  .demo-bar-tag { font-size: var(--fs-xs); }
  .demo-bar-back span { display: none; }
  .demo-bar-back { padding: 0 var(--sp-sm); }
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  height: 44px;
  padding: 0 var(--sp-md);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-item .nav-icon {
  color: var(--text-secondary);
  transition: color 0.15s ease;
}
.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.nav-item.active {
  background: #1e1e1e;
  color: var(--text-primary);
}
.nav-item.active .nav-icon {
  color: var(--brand);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: var(--brand);
}

/* ============ Topbar ============ */
.topbar {
  position: sticky;
  top: var(--demo-bar-h);
  height: var(--header-height);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--content-padding);
  gap: var(--sp-lg);
  z-index: 15;
}
.topbar-title h1 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}
.topbar-title p {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.search-box {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  height: 40px;
  padding: 0 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  width: 220px;
  transition: border-color 0.15s ease;
}
.search-box:hover {
  border-color: var(--border-strong);
}
.search-placeholder {
  font-size: var(--fs-md);
  color: var(--text-tertiary);
}
.search-kbd {
  margin-left: auto;
}

.range-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 3px;
}
.range-cal {
  color: var(--text-tertiary);
  margin: 0 4px 0 6px;
}
.range-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: all 0.15s ease;
}
.range-btn:hover {
  color: var(--text-primary);
}
.range-btn.active {
  background: var(--brand);
  color: var(--on-brand);
}

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}
.icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.icon-btn .dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--bg-secondary);
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--on-brand);
  background: var(--brand-gradient);
}

/* hamburger + mobile scrim */
.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  min-width: 0;
}
.menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.mobile-scrim {
  display: none;
}

@media (max-width: 980px) {
  .search-box {
    display: none;
  }
}
@media (max-width: 720px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-area {
    margin-left: 0;
  }
  .menu-btn {
    display: grid;
  }
  .mobile-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 18;
  }
  .mobile-scrim.show {
    opacity: 1;
    pointer-events: auto;
  }
  .topbar-title p {
    display: none;
  }
}
/* ============ Card ============ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--sp-xl);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
/* card that shrinks to fit its content instead of filling the row */
.card.card-fit {
  width: fit-content;
  max-width: 100%;
}
.card-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.card-sub {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ============ Metric Card ============ */
.metric {
  position: relative;
  min-height: 120px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--sp-lg) var(--sp-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-md);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
    background-color 0.25s ease, color 0.25s ease;
  overflow: hidden;
}
.metric:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-elevated);
}
/* compact secondary KPI */
.metric.compact {
  min-height: 92px;
  padding: var(--sp-md) var(--sp-lg);
  gap: var(--sp-sm);
}
.metric.compact .metric-value {
  font-size: var(--fs-xl);
}
.metric.compact .metric-icon {
  width: 26px;
  height: 26px;
}

.metric.highlight {
  /* lime is a light surface — text on it is dark, giving very high contrast */
  background: linear-gradient(135deg, #84cc16, #c2f24f);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.metric.highlight .metric-value {
  color: var(--on-brand);
}
.metric.highlight:hover {
  box-shadow: 0 0 36px rgba(163, 230, 53, 0.4);
}

/* Rotating sheen around the hero metric border */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.metric.highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 12%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin-border 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes spin-border {
  to {
    --angle: 360deg;
  }
}
.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.metric-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.metric.highlight .metric-label {
  color: var(--on-brand);
}
.metric-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--bg-tertiary);
  color: var(--brand);
}
.metric.highlight .metric-icon {
  background: rgba(10, 18, 0, 0.14);
  color: var(--on-brand);
}
/* Mono for the headline figures, matching the landing page's metrics band.
   tabular-nums stops the value jittering when the date range changes. */
.metric-value {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metric-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-sm);
}
.metric-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: var(--fw-semibold);
}
.metric-delta.up {
  color: var(--success);
}
.metric-delta.down {
  color: var(--danger);
}
.metric.highlight .metric-delta.up,
.metric.highlight .metric-delta.down {
  color: var(--on-brand);
}
.metric-foot .muted {
  color: var(--text-tertiary);
}
.metric.highlight .metric-foot .muted {
  color: rgba(10, 18, 0, 0.75);
}
/* The site's lime is far brighter than the palette this was drawn for, so the
   sparkline was competing with the delta text sitting on top of it. Fade it
   and mask the top edge so the figure stays the loudest thing in the card. */
.metric-spark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  opacity: 0.16;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 65%);
  mask-image: linear-gradient(180deg, transparent, #000 65%);
}
.metric.highlight .metric-spark {
  opacity: 0.22;
}
.metric-top,
.metric-value,
.metric-foot {
  position: relative;
  z-index: 1;
}

/* ============ Badge ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge.success {
  background: var(--success-bg);
  color: var(--success);
}
.badge.warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge.danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.badge.info {
  background: var(--info-bg);
  color: var(--info);
}
.badge.neutral {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* ============ Button ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  transition: all 0.15s ease;
}
.btn.primary {
  background: var(--brand);
  color: var(--on-brand);
}
.btn.primary:hover {
  background: var(--brand-hover);
}
.btn.secondary {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn.secondary:hover {
  border-color: var(--text-tertiary);
}
.btn.ghost {
  color: var(--text-secondary);
}
.btn.ghost:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

/* ============ Section Header ============ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  flex-wrap: wrap;
}
.section-head .sh-left h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}
.section-head .sh-left p {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.section-head .sh-right {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

/* ============ Tabs ============ */
.tabs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.tab-indicator {
  position: absolute;
  top: 3px;
  left: 0;
  height: 32px;
  border-radius: 9px;
  background: var(--bg-tertiary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), width 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.tab {
  position: relative;
  z-index: 1;
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: color 0.15s ease;
}
.tab:hover {
  color: var(--text-primary);
}
.tab.active {
  color: var(--text-primary);
}

/* ============ Data Table ============ */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.data-table thead th {
  position: sticky;
  top: 0;
  background: #141414;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
  user-select: none;
}
.data-table thead th.sortable {
  cursor: pointer;
}
.data-table thead th.sortable:hover {
  color: var(--text-primary);
}
.data-table thead th.num,
.data-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sort-ind {
  margin-left: 4px;
  opacity: 0.55;
}
.data-table tbody td {
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  white-space: nowrap;
}
.data-table tbody tr {
  transition: background 0.12s ease;
}
.data-table tbody tr:hover {
  background: var(--bg-hover);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.cell-strong {
  font-weight: var(--fw-semibold);
}
.cell-muted {
  color: var(--text-tertiary);
}

/* mini progress bar used in tables */
.minibar {
  position: relative;
  height: 6px;
  width: 90px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  overflow: hidden;
}
.minibar > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--brand-gradient);
}

/* rep avatar */
.rep {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.rep-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-strong);
}

/* channel chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.chip .swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

/* clickable table rows */
.data-table tbody tr.clickable {
  cursor: pointer;
}
.data-table tbody tr.clickable:hover {
  box-shadow: inset 3px 0 0 var(--brand);
}
.row-chevron,
.row-chevron-head {
  width: 36px;
  text-align: center;
}
.row-chevron {
  color: var(--text-disabled);
  transition: color 0.12s ease, transform 0.12s ease;
}
.data-table tbody tr.clickable:hover .row-chevron {
  color: var(--brand);
  transform: translateX(2px);
}

/* ============ Filter chip ============ */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 8px 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(163, 230, 53, 0.12);
  border: 1px solid rgba(163, 230, 53, 0.35);
  color: var(--brand-light);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.filter-chip button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--brand-light);
}
.filter-chip button:hover {
  background: rgba(163, 230, 53, 0.2);
  color: #fff;
}

/* ============ Drawer ============ */
.drawer-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.drawer-root.open {
  pointer-events: auto;
}
.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.drawer-root.open .drawer-overlay {
  opacity: 1;
}
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 92vw;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-elevated);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}
.drawer-root.open .drawer-panel {
  transform: translateX(0);
}
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-xl);
  border-bottom: 1px solid var(--border-subtle);
}
.drawer-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.drawer-sub {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.drawer-body {
  padding: var(--sp-xl);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
}
.drawer-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
}
.dstat {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--sp-md) var(--sp-lg);
}
.dstat-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.dstat-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-top: 4px;
}
.drawer-section-title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-sm);
}

/* ============ Range Popover ============ */
.range-pop {
  position: relative;
}
.range-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  height: 40px;
  padding: 0 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  transition: border-color 0.15s ease;
}
.range-trigger:hover {
  border-color: var(--border-strong);
}
.range-compare-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.range-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: var(--sp-sm);
  z-index: 40;
}
.range-panel-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: var(--sp-sm) var(--sp-sm) var(--sp-xs);
}
.range-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  padding: 0 var(--sp-md);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-md);
}
.range-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.range-option.active {
  color: var(--brand);
}
.range-custom {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-md) var(--sp-sm);
  color: var(--text-secondary);
  font-size: var(--fs-md);
}
.range-custom input {
  width: 56px;
  height: 34px;
  text-align: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-md);
}
.range-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--sp-sm) 0;
}
.range-compare {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  cursor: pointer;
}
.range-compare input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

/* ============ Command Palette ============ */
.cmdk-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(0, 0, 0, 0.55);
}
.cmdk {
  width: 560px;
  max-width: 92vw;
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-lg);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}
.cmdk-input-row input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: var(--fs-lg);
}
.cmdk-list {
  max-height: 52vh;
  overflow-y: auto;
  padding: var(--sp-sm);
}
.cmdk-group-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: var(--sp-sm) var(--sp-md) var(--sp-xs);
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  padding: var(--sp-md);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  text-align: left;
}
.cmdk-item .cmdk-meta {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.cmdk-item.active,
.cmdk-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.cmdk-empty {
  padding: var(--sp-xl);
  text-align: center;
  color: var(--text-tertiary);
}
.cmdk-foot {
  display: flex;
  gap: var(--sp-lg);
  padding: var(--sp-sm) var(--sp-lg);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* ============ Skeleton ============ */
.skel-page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
}
.skel {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
.skel-metric {
  min-height: 120px;
}
.skel-chart {
  min-height: 320px;
}
.skel-table {
  min-height: 280px;
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ============ Insight Bar ============ */
.insight-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--card-gap);
}
.insight {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: 1.4;
}
.insight .insight-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.insight-success {
  border-left-color: var(--success);
}
.insight-success .insight-icon {
  color: var(--success);
}
.insight-danger {
  border-left-color: var(--danger);
}
.insight-danger .insight-icon {
  color: var(--danger);
}
.insight-warning {
  border-left-color: var(--warning);
}
.insight-warning .insight-icon {
  color: var(--warning);
}
.insight-info {
  border-left-color: var(--info);
}
.insight-info .insight-icon {
  color: var(--info);
}
.insight-neutral {
  border-left-color: var(--brand);
}
.insight-neutral .insight-icon {
  color: var(--brand);
}

/* ============ Pacing Card ============ */
.pacing {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.pacing-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.pacing-spent {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}
.pacing-budget {
  font-size: var(--fs-md);
  color: var(--text-tertiary);
}
.pacing-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  overflow: hidden;
}
.pacing-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--brand-gradient);
}
.pacing-expected {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text-secondary);
}
.pacing-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.pacing-proj {
  font-weight: var(--fw-semibold);
}
.chart-tooltip {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--sp-md) var(--sp-md);
  box-shadow: var(--shadow-elevated);
  min-width: 160px;
}
.ct-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--sp-sm);
}
.ct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  font-size: var(--fs-md);
  padding: 2px 0;
}
.ct-key {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
}
.ct-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.ct-val {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  margin-top: var(--sp-md);
}

/* ===== Funnel ===== */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.funnel-stage {
  position: relative;
}
.funnel-bar-wrap {
  display: flex;
  justify-content: center;
}
.funnel-bar {
  position: relative;
  height: 58px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-xl);
  /* Fallback only. charts.js sets the real ink inline per stage, chosen from
     that stage's background luminance. */
  color: var(--on-brand);
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: default;
  min-width: 180px;
}
.funnel-bar:hover {
  transform: scale(1.012);
  filter: brightness(1.08);
}
.funnel-stage-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  z-index: 1;
}
.funnel-stage-count {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.funnel-connector {
  position: relative;
  height: 34px;
}
.funnel-link {
  position: absolute;
  inset: 0;
  opacity: 0.16;
}
.funnel-connector-text {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-sm);
  /* Was --text-tertiary (4.7:1 on the card, but this sits on the connector
     wedge, not the card). Stepped up so it clears AA on the olive too. */
  color: var(--text-secondary);
}
.funnel-connector .rate {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}
/* --danger is tuned for badges sitting on the card surface; on the olive
   connector wedge it only reaches ~2.5:1. This lighter coral clears AA on
   every wedge while still reading as the negative number. */
.funnel-connector .drop {
  color: #FF8A7A;
}
.funnel-connector .velocity {
  color: var(--info);
}
.chart-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-tertiary);
  font-size: var(--fs-md);
}

/* Soft glow + depth under trend curves */
.trend-glow .recharts-area-curve,
.trend-glow .recharts-line-curve {
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 6px rgba(163, 230, 53, 0.18));
}

/* ===== Spend heatmap (calendar) ===== */
.heatmap {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  gap: 4px;
  justify-content: start;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
.heat-cell {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  transition: transform 0.1s ease;
}
.heat-cell:hover {
  transform: scale(1.25);
  outline: 1px solid var(--border-strong);
}
.heat-cell.blank {
  background: transparent;
}
.heat-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-md);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.heat-legend .heat-cell {
  width: 12px;
  height: 12px;
  aspect-ratio: auto;
}

/* ============================================================
   Standalone-mockup additions (charts drawn by hand, no lib)
   ============================================================ */
.ch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  justify-content: flex-end;
  margin-bottom: var(--sp-sm);
}
.ch-cross {
  stroke-width: 1;
}
.ch-line {
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 6px rgba(163, 230, 53, 0.18));
}

/* draw-on animation for trend lines */
.ch-draw {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  animation: chDraw 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes chDraw {
  to { stroke-dashoffset: 0; }
}
.ch-fade {
  animation: chFade 0.9s ease-out both;
}
@keyframes chFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ch-bar-v {
  transform-origin: bottom;
  animation: chGrowY 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes chGrowY {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.ch-bar-h {
  transform-origin: left;
  animation: chGrowX 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes chGrowX {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.ch-pop {
  animation: chFade 0.6s ease-out both;
}
.ch-bar {
  transition: fill-opacity 0.15s ease;
}
.ch-bar:hover {
  fill-opacity: 0.85;
}
.ch-slice {
  transition: fill-opacity 0.15s ease;
}
.ch-slice:hover {
  fill-opacity: 0.85;
}

/* the app renders into #app */
#app {
  min-height: 100vh;
}