:root {
    --bg-app: #f6f7f9;          /* Clarity — app background */
    --bg-card: #ffffff;         /* Clarity — card surface */
    --bg-sidebar: #ffffff;      /* Clarity — sidebar */
    --bg-input: #f4f4f5;        /* Clarity — input fields */
    --border: #e9ecf1;          /* Clarity — borders */
    --line: var(--border);
    --bg-active-tab: rgba(79, 70, 229, 0.06); /* Muted indigo active tab */
    --text-primary: #0f172a;    /* Clarity — primary text */
    --text-secondary: #64748b;  /* Clarity — secondary text */
    --accent-gold: #4f46e5;     /* Clarity — indigo (replaces gold) */
    --accent-gold-rgb: 79, 70, 229;
    --accent-gold2: #6366f1;    /* Clarity — indigo lighter */
    --accent-green: #16a34a;    /* Clarity — success */
    --accent-red: #e11d48;      /* Clarity — danger */
    --accent-blue: #4f46e5;     /* Clarity — primary accent (indigo) */
    --tech: #0ea5e9;
    --shadow-soft: none;        /* Clarity — flat cards */

    /* Clarity — new tokens */
    --warn: #f59e0b;
    --hero-grad: linear-gradient(135deg, #4f46e5, #6366f1);
    --dark-panel: #0f172a;

    /* Legacy CSS Variable Aliases used by lib/render.js */
    --text: var(--text-primary);
    --mute: var(--text-secondary);
    --gold: var(--accent-gold);
    --gold2: var(--accent-gold2);
    --green: var(--accent-green);
    --red: var(--accent-red);
    --blue: var(--accent-blue);
    --ink: #ffffff;
    --ink2: #ffffff;
    --ink3: #f4f4f5;
  }

  /* body.light: identical to :root so localStorage theme='light' users see Clarity */
  body.light {
    --bg-app: #f6f7f9;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-input: #f4f4f5;
    --border: #e9ecf1;
    --line: var(--border);
    --bg-active-tab: rgba(79, 70, 229, 0.06);
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --accent-gold: #4f46e5;
    --accent-gold-rgb: 79, 70, 229;
    --accent-gold2: #6366f1;
    --accent-green: #16a34a;
    --accent-red: #e11d48;
    --accent-blue: #4f46e5;
    --tech: #0ea5e9;
    --shadow-soft: none;

    --warn: #f59e0b;
    --hero-grad: linear-gradient(135deg, #4f46e5, #6366f1);
    --dark-panel: #0f172a;

    /* Legacy CSS Variable Aliases used by lib/render.js */
    --text: var(--text-primary);
    --mute: var(--text-secondary);
    --gold: var(--accent-gold);
    --gold2: var(--accent-gold2);
    --green: var(--accent-green);
    --red: var(--accent-red);
    --blue: var(--accent-blue);
    --ink: #ffffff;
    --ink2: #ffffff;
    --ink3: #f4f4f5;
  }

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
  body{
    background:var(--bg-app);
    color:var(--text-primary);
    font-family:'Manrope','IBM Plex Sans Thai','Sarabun',system-ui,sans-serif;
    font-size:14px;
    min-height:100vh;
    transition:background .3s, color .3s;
  }
  
  input{font-family:inherit}
  input[type=text]{-moz-appearance:textfield}
  
  /* Layout Structures */
  .app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
  }

  .sidebar {
    width: 280px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 30px 24px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    transition: background 0.3s, border-color 0.3s;
  }

  .sidebar-brand {
    margin-bottom: 24px;
  }
  .sidebar-brand h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 2px;
    letter-spacing: -0.5px;
  }

  .sidebar-total {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    transition: background 0.3s;
  }
  .sidebar-total .total {
    color: var(--accent-gold);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin: 4px 0 2px;
    font-variant-numeric: tabular-nums;
  }
  .sidebar-total .sub {
    font-size: 11px;
    color: var(--text-secondary);
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .sidebar-nav .tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    width: 100%;
    font-family: inherit;
  }
  .sidebar-nav .tab-btn svg {
    opacity: 0.7;
    transition: all 0.2s ease;
  }
  .sidebar-nav .tab-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
  }
  .sidebar-nav .tab-btn:hover svg {
    opacity: 1;
    transform: scale(1.05);
  }
  .sidebar-nav .tab-btn.on {
    background: var(--bg-active-tab);
    color: var(--accent-blue);
    font-weight: 700;
    border-left: 4px solid var(--accent-blue);
    border-radius: 0 10px 10px 0;
    padding-left: 12px;
  }
  .sidebar-nav .tab-btn.on svg {
    stroke: var(--accent-blue);
    opacity: 1;
  }

  .sidebar-footer {
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: auto;
  }

  .main-content {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    transition: background 0.3s, border-color 0.3s;
  }
  .header-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .header-subtitle {
    font-size: 12px;
    margin-top: 2px;
  }

  .header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .profiles-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    padding: 4px 8px;
    border-radius: 20px;
    transition: background 0.3s;
  }
  .profiles {
    display: flex;
    gap: 4px;
  }
  .pf {
    background: none;
    border: none;
    color: var(--text-secondary);
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
  }
  .pf.on {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }
  body.light .pf.on {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
  }

  main {
    padding: 24px 32px 60px;
  }

  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: none;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
  }
  
  .ctitle {
    color: var(--accent-gold);
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
  }
  
  .mini-card {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    transition: background 0.3s;
  }

  .rowh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  /* Modern Progress Bar */
  .track {
    position: relative;
    height: 10px;
    background: var(--bg-input);
    border-radius: 6px;
    overflow: hidden;
    transition: background 0.3s;
  }
  body.light .track {
    background: #e9ecf1;
  }
  .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    transition: width .5s ease;
  }
  .tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--text-primary);
    opacity: .75;
    z-index: 2;
  }
  .ceil {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-red);
    z-index: 2;
  }
  
  .arow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }
  .brow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--border);
  }

  input.num {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 8px 12px;
    width: 128px;
    text-align: right;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s, color 0.3s;
  }
  input.num:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }
  
  select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s, background-color 0.3s, color 0.3s;
  }
  select:focus {
    border-color: var(--accent-blue);
  }

  .btn {
    background: var(--accent-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  }
  .btn:active {
    transform: translateY(0);
  }
  
  .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
  }

  .alert {
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid var(--accent-gold);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
    color: var(--text-primary);
  }
  .alert.warn {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: var(--accent-red);
  }
  body.light .alert {
    background: #fef7ed;
  }
  body.light .alert.warn {
    background: #fef2f4;
  }

  .toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    z-index: 999;
  }

  .muted { color: var(--text-secondary); } 
  .green { color: var(--accent-green); } 
  .red { color: var(--accent-red); } 
  .gold { color: var(--accent-gold); }
  .tnum { font-variant-numeric: tabular-nums; }
  
  .acc {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    font-family: inherit;
    color: var(--text-primary);
  }
  
  .spin {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: sp 0.7s linear infinite;
  }
  @keyframes sp { to { transform: rotate(360deg); } }
  .center { display: grid; place-items: center; min-height: 60vh; gap: 14px; }
  .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .g2 .full { grid-column: 1 / -1; }

  /* ── Range slider (Premium iTAX-style) ── */
  input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0;
    width: 100%;
    transition: background 0.3s;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-gold);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 2px solid var(--bg-card);
    transition: transform 0.1s;
  }
  input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
  }
  input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-gold);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 2px solid var(--bg-card);
  }
  
  /* Bracket thermometer bar */
  .thermo-bar {
    position: relative;
    height: 24px;
    background: var(--bg-input);
    border-radius: 12px;
    overflow: hidden;
  }
  .thermo-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 12px;
    transition: width 0.3s ease;
  }
  .thermo-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    pointer-events: none;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
  }

  /* ── Theme toggle slider ── */
  .theme-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
  .theme-toggle span { font-size: 14px; line-height: 1; }
  .tog-track {
    width: 44px; height: 24px; border-radius: 12px;
    background: var(--bg-input); border: 1px solid var(--border);
    position: relative; transition: background .25s; flex-shrink: 0; cursor: pointer;
  }
  body.light .tog-track { background: var(--accent-gold); }
  .tog-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
    transition: transform .25s;
  }
  body.light .tog-thumb { transform: translateX(20px); }

  /* ── Responsive breakpoints ── */
  @media(min-width: 768px) {
    .dash-overview {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 24px;
      align-items: start;
    }
    .ov-left {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .ov-charts-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .ov-right {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      align-content: start;
    }
    .dash-tax {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items: start;
    }
    .tax-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .tax-col .card { margin-bottom: 0; }
  }

  @media(min-width: 1024px) {
    .ov-charts-grid {
      grid-template-columns: 1.1fr 0.9fr; /* Side-by-side: Donut is slightly wider, Net Worth is sleek */
      gap: 20px;
    }
    .ov-right {
      grid-template-columns: repeat(2, 1fr);
    }
    .dash-tax {
      grid-template-columns: 1fr 1.05fr 0.95fr;
      gap: 20px;
    }
  }

  @media(min-width: 1280px) {
    .ov-right {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Mobile/Tablet Bottom Navigation */
  @media(max-width: 767px) {
    .app-container {
      flex-direction: column;
    }
    .sidebar {
      position: static;
      width: 100%;
      height: auto;
      padding: 20px 16px;
      border-right: none;
      border-bottom: 1px solid var(--border);
    }
    .sidebar-nav {
      flex-direction: row;
      overflow-x: auto;
      padding: 4px 0;
      scrollbar-width: none;
    }
    .sidebar-nav::-webkit-scrollbar {
      display: none;
    }
    .sidebar-nav .tab-btn {
      width: auto;
      white-space: nowrap;
      padding: 8px 12px;
      font-size: 13px;
    }
    .sidebar-footer {
      display: none;
    }
    .main-content {
      margin-left: 0;
    }
    .main-header {
      padding: 16px;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
    .header-controls {
      width: 100%;
      justify-content: space-between;
    }
    main {
      padding: 16px;
    }
  }
}

/* Net Worth Sub-navigation & Sticky UI */
.nw-sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border);
  margin: -24px -32px 20px -32px;
  padding: 16px 32px 12px 32px;
  transition: background 0.3s, border-color 0.3s;
}
@media (max-width: 768px) {
  .nw-sticky-header {
    margin: -16px -16px 16px -16px;
    padding: 12px 16px 8px 16px;
  }
}

.pf-pill {
  border: none;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.pf-pill.on {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.subtab-pill {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.subtab-pill:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}
.subtab-pill.on {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold2));
  color: #09090b;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(251, 191, 36, 0.15);
}

/* KPI Chips */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kpi-chip:hover {
  border-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

/* Accordion Accordion styles */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.accordion-header:hover .accordion-trigger {
  color: var(--accent-gold);
}
.accordion-trigger {
  transition: transform 0.2s ease;
}
.accordion-trigger.open {
  transform: rotate(180deg);
}

/* ╔══════════════════════════════════════════════════╗ */
/* ║  Overview — Clarity theme                         ║ */
/* ╚══════════════════════════════════════════════════╝ */

.ov-clarity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ov-clarity-grid .ov-full { grid-column: 1 / -1; }

/* Hero card — indigo gradient */
.ov-hero {
  background: var(--hero-grad);
  border: none;
  border-radius: 18px;
  padding: 28px 24px 22px;
  color: #fff;
}
.ov-hero .ov-hero-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.75;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ov-hero .ov-hero-value {
  font-size: 44px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.ov-hero .ov-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.18);
  margin-top: 8px;
}
.ov-hero .ov-hero-stats {
  display: flex;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
  flex-wrap: wrap;
}
.ov-hero .ov-hero-stat {
  flex: 1;
  min-width: 100px;
}
.ov-hero .ov-hero-stat-label {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 2px;
}
.ov-hero .ov-hero-stat-val {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Trend chart card */
.ov-trend-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.ov-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.ov-trend-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.ov-trend-pct {
  font-size: 13px;
  font-weight: 700;
}
.ov-trend-caption {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

/* Donut allocation card */
.ov-donut-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
}
.ov-donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ov-donut-legend {
  flex: 1;
  min-width: 120px;
}
.ov-donut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid var(--border);
}
.ov-donut-row:first-child { border-top: none; }

/* Alerts card */
.ov-alerts-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
}
.ov-alert-row {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.ov-alert-row:last-child { margin-bottom: 0; }
.ov-alert-row.warn {
  background: #fef2f4;
  border-left: 4px solid var(--accent-red);
}
.ov-alert-row.info {
  background: #fef7ed;
  border-left: 4px solid var(--warn);
}
.ov-alert-row.tip {
  background: rgba(79,70,229,0.05);
  border-left: 4px solid var(--accent-blue);
}

/* Skeleton loading animation */
.ov-skel {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  animation: ov-pulse 1.2s ease-in-out infinite;
}
@keyframes ov-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Section eyebrow */
.ov-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Header row */
.ov-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.ov-greeting {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}
.ov-header-btns {
  display: flex;
  gap: 8px;
}
.ov-header-btns button {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.ov-header-btns button:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* Monetary numbers always tabular */
.tnum, [data-money] {
  font-variant-numeric: tabular-nums;
}

/* ── Responsive: ≤860px → 1 column ── */
@media (max-width: 860px) {
  .ov-clarity-grid {
    grid-template-columns: 1fr;
  }
  .ov-hero .ov-hero-value {
    font-size: 32px;
  }
  .ov-hero .ov-hero-stats {
    gap: 10px;
  }
  .ov-hero .ov-hero-stat {
    min-width: 80px;
  }
  .ov-hero .ov-hero-stat-val {
    font-size: 15px;
  }
  .ov-header-row {
    flex-direction: column;
    align-items: flex-start;
  }
}