*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--ink);background:var(--surface);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit}
ul,ol{list-style:none}
input,textarea,select{font-family:inherit;font-size:inherit;border:none;outline:none;background:none}

:root{
  /* Unique identity: Deep slate navy sidebar + warm light content */
  --navy-950:#0c1222;
  --navy-900:#111827;
  --navy-800:#1e2a3a;
  --navy-700:#2a3a4e;
  --navy-600:#3d5068;
  --navy-500:#556a80;
  --navy-400:#7a8da0;
  --navy-300:#a3b1c0;

  /* Warm content surface — NOT pure white, slightly warm */
  --surface:#f8f7f4;
  --surface-2:#ffffff;
  --surface-3:#f0efeb;
  --surface-raised:#ffffff;
  --surface-overlay:rgba(255,255,255,0.95);

  /* Ink — warm near-black, not harsh */
  --ink:#1a1a1a;
  --ink-2:#3d3d3d;
  --ink-3:#6b6b6b;
  --ink-4:#8a8a8a;
  --ink-5:#b8b8b8;

  /* Accent — warm copper, unique, not fintech-green */
  --copper:#c4733b;
  --copper-light:#d4915e;
  --copper-dark:#a85d2a;
  --copper-bg:rgba(196,115,59,0.08);
  --copper-border:rgba(196,115,59,0.2);

  /* Functional colors */
  --positive:#2d8a56;
  --positive-bg:rgba(45,138,86,0.08);
  --negative:#c0392b;
  --negative-bg:rgba(192,57,43,0.08);
  --info:#2e6bb0;
  --info-bg:rgba(46,107,176,0.08);
  --warn:#c98a1a;
  --warn-bg:rgba(201,138,26,0.08);

  /* Borders — subtle warm gray */
  --border:#e8e6e1;
  --border-2:#d9d7d2;
  --border-3:#cbc9c4;

  /* Sidebar specific */
  --sidebar-bg:var(--navy-900);
  --sidebar-text:#94a3b8;
  --sidebar-text-active:#ffffff;
  --sidebar-hover:rgba(255,255,255,0.06);
  --sidebar-active:rgba(196,115,59,0.15);
  --sidebar-active-border:var(--copper);

  /* Layout */
  --sidebar-w:256px;
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;

  /* Shadows — warm, not harsh */
  --shadow-sm:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.08);

  --mono:'DM Mono',monospace;

  /* Typography scale */
  --text-xxl:28px;
  --text-xl:20px;
  --text-lg:16px;
  --text-md:14px;
  --text-sm:12px;
  --text-xs:11px;
  --text-xxs:10px;

  /* Spacing rhythm */
  --sp-xs:3px;
  --sp-sm:6px;
  --sp-md:10px;
  --sp-lg:12px;
  --sp-xl:16px;
  --sp-2xl:20px;
  --sp-3xl:28px;
}

/* Selection */
::selection{background:rgba(196,115,59,0.2);color:var(--ink)}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ink-5);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;font-size:14px;font-weight:600;border-radius:var(--radius);transition:all 0.2s ease;white-space:nowrap}
.btn-primary{background:var(--copper);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.btn-primary:hover{background:var(--copper-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--surface-2);color:var(--ink);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--border-3);background:var(--surface-3)}
.btn-ghost{color:var(--ink-3);padding:6px 12px}
.btn-ghost:hover{color:var(--ink);background:var(--surface-3)}
.btn-lg{padding:12px 28px;font-size:15px;border-radius:var(--radius-lg)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--ink-3)}
.btn-icon:hover{border-color:var(--border-3);color:var(--ink)}

/* --- Cards --- */
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all 0.2s ease}
.card:hover{border-color:var(--border-2);box-shadow:var(--shadow-sm)}

/* --- Badges --- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;font-size:11px;font-weight:600;border-radius:20px;letter-spacing:0.01em}
.badge-positive{background:var(--positive-bg);color:var(--positive)}
.badge-negative{background:var(--negative-bg);color:var(--negative)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-neutral{background:var(--surface-3);color:var(--ink-3)}
.badge-copper{background:var(--copper-bg);color:var(--copper)}

/* --- Shared Page Header --- */
.v-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-lg);padding-bottom:var(--sp-md);border-bottom:1px solid var(--border)}
.v-page-title{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-0.03em}
.v-page-subtitle{font-size:var(--text-xs);color:var(--ink-4);font-weight:500;margin-top:2px}
.v-page-actions{display:flex;align-items:center;gap:var(--sp-sm)}

/* --- Shared Section Title --- */
.v-section-title{font-size:var(--text-sm);font-weight:700;color:var(--ink);letter-spacing:-0.01em;margin-bottom:var(--sp-md);display:flex;align-items:center;gap:var(--sp-sm)}
.v-section-count{font-size:var(--text-xs);font-weight:600;padding:2px 8px;border-radius:20px;background:var(--copper-bg);color:var(--copper)}

/* --- Data Emphasis --- */
.v-money{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.v-money-lg{font-size:var(--text-xxl);font-weight:800;letter-spacing:-0.03em}
.v-label{font-size:var(--text-xxs);font-weight:600;color:var(--ink-4);text-transform:uppercase;letter-spacing:0.05em}

/* --- Reveal --- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:0.1s}.reveal-d2{transition-delay:0.2s}.reveal-d3{transition-delay:0.3s}

/* --- Responsive --- */
@media(max-width:1024px){
  :root{--sidebar-w:0px}
}
@media(max-width:768px){
  body{font-size:14px}
}