@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f4f3ef;
  --bg2:#eae9e4;
  --surface:#ffffff;
  --surface2:#f9f8f5;
  --border:rgba(0,0,0,0.08);
  --border2:rgba(0,0,0,0.12);
  --text:#1a1a1a;
  --text2:#555;
  --text3:#888;
  --accent:#ff5a2f;
  --accent2:#ff7a52;
  --accent-bg:rgba(255,90,47,0.08);
  --green:#1a9a5c;
  --green-bg:rgba(26,154,92,0.08);
  --red:#dc3545;
  --red-bg:rgba(220,53,69,0.06);
  --gold:#d4890a;
  --gold-bg:rgba(212,137,10,0.08);
  --purple:#6c5ce7;
  --purple-bg:rgba(108,92,231,0.06);
  --dark:#1a1a1a;
  --dark2:#2a2a2a;
  --shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg:0 4px 12px rgba(0,0,0,0.06),0 20px 60px rgba(0,0,0,0.1);
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:6px;
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{max-width:1500px;margin:0 auto;padding:32px;position:relative}

/* ===== TYPOGRAPHY ===== */
h1{font-size:clamp(32px,5vw,48px);font-weight:900;color:var(--text);margin-bottom:6px;letter-spacing:-1.5px;line-height:1.1}
.subtitle{color:var(--text3);font-size:14px;margin-bottom:28px;font-weight:400}
.section-title{font-size:18px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px;letter-spacing:-.3px}

/* ===== NAVIGATION ===== */
.nav{display:flex;gap:6px;margin-bottom:32px;flex-wrap:wrap;padding:6px;background:var(--surface);
  border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);width:fit-content}
.nav a{color:var(--text2);text-decoration:none;font-size:13px;padding:8px 16px;border-radius:8px;
  font-weight:500;transition:all .2s;white-space:nowrap}
.nav a:hover{background:var(--bg);color:var(--text)}
.nav a.active{background:var(--dark);color:#fff;font-weight:600}

/* ===== CARDS ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  text-align:center;box-shadow:var(--shadow);transition:all .3s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.card .label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:600}
.card .value{font-size:26px;font-weight:900;letter-spacing:-.5px}
.card .sub{font-size:11px;color:var(--text2);margin-top:6px}

/* ===== SECTIONS ===== */
.section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;margin-bottom:24px;box-shadow:var(--shadow)}

/* ===== BADGES ===== */
.badge{background:var(--accent);color:#fff;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:700;letter-spacing:.3px}

/* ===== UTILITY COLORS ===== */
.green{color:var(--green)}.red,.neg{color:var(--red)}.blue{color:var(--accent)}
.gold{color:var(--gold)}.purp{color:var(--purple)}

/* ===== DARK CARD VARIANT (from screenshot) ===== */
.card-dark{background:var(--dark);color:#fff;border:none}
.card-dark .label{color:rgba(255,255,255,0.5)}
.card-dark .value{color:#fff}
.card-dark .sub{color:rgba(255,255,255,0.4)}

/* ===== ACCENT CARD VARIANT (orange from screenshot) ===== */
.card-accent{background:var(--accent);color:#fff;border:none}
.card-accent .label{color:rgba(255,255,255,0.7)}
.card-accent .value{color:#fff}
.card-accent:hover{background:var(--accent2)}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.25)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .container{padding:16px}
}