@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

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

:root{
  --bg:#F5F3EE;
  --bg2:#EDE9E0;
  --surface:#FFFFFF;
  --dark:#1C1C1E;
  --dark2:#2A2A2C;
  --text1:#111111;
  --text2:#555555;
  --text3:#999999;
  --amber:#F5C842;
  --amber2:#E8B800;
  --amber-bg:rgba(245,200,66,0.15);
  --green:#22C55E;
  --green-bg:rgba(34,197,94,0.12);
  --red:#EF4444;
  --red-bg:rgba(239,68,68,0.12);
  --blue:#3B82F6;
  --blue-bg:rgba(59,130,246,0.12);
  --purple:#A855F7;
  --teal:#14B8A6;
  --font:'Plus Jakarta Sans',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r:14px;
  --r-sm:8px;
  --r-lg:20px;
  --r-xl:28px;
  --shadow:0 2px 12px rgba(0,0,0,0.06);
  --shadow-md:0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.14);
}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text1);
  min-height:100vh;
  font-size:14px;
  line-height:1.6;
}

/* ── Typography ── */
h1{font-size:32px;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
h2{font-size:22px;font-weight:700;letter-spacing:-0.02em}
h3{font-size:16px;font-weight:700}
h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3)}

/* ── Cards ── */
.card{background:var(--surface);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
.card-dark{background:var(--dark);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-md);color:#fff}
.card-amber{background:var(--amber);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-md)}

/* ── Buttons ── */
.btn{font-family:var(--font);font-size:13px;font-weight:700;border:none;border-radius:var(--r);padding:10px 20px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px;letter-spacing:0.01em}
.btn-primary{background:var(--dark);color:#fff}
.btn-primary:hover{background:var(--dark2);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-amber{background:var(--amber);color:var(--dark)}
.btn-amber:hover{background:var(--amber2);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text2);border:1.5px solid #E0DDD6}
.btn-ghost:hover{background:var(--surface);border-color:var(--dark)}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}

/* ── Tags ── */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;font-family:var(--mono);padding:3px 8px;border-radius:6px}
.tag-amber{background:var(--amber-bg);color:#7A5F00}
.tag-green{background:var(--green-bg);color:#15803D}
.tag-red{background:var(--red-bg);color:#B91C1C}
.tag-blue{background:var(--blue-bg);color:#1D4ED8}

/* ── Progress bar ── */
.progress-bar{background:#E8E4D9;border-radius:99px;height:8px;overflow:hidden}
.progress-fill{height:100%;border-radius:99px;transition:width .6s ease}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D0CBBF;border-radius:3px}

/* ── Utility ── */
.mono{font-family:var(--mono)}
.text-amber{color:var(--amber2)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.text-blue{color:var(--blue)}
.text-muted{color:var(--text2)}
.text-faint{color:var(--text3)}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.bold{font-weight:700}.semibold{font-weight:600}
.number-big{font-size:48px;font-weight:800;letter-spacing:-0.04em;line-height:1}
.number-med{font-size:32px;font-weight:800;letter-spacing:-0.03em;line-height:1}
.number-sm{font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1}

/* ── Donut chart ── */
.donut-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.donut-label{position:absolute;text-align:center}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.7)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.fade-up{animation:fadeUp .4s ease both}
.fade-up-1{animation-delay:.05s}
.fade-up-2{animation-delay:.10s}
.fade-up-3{animation-delay:.15s}
.fade-up-4{animation-delay:.20s}

/* ── Live dot ── */
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse-dot 1.5s infinite;display:inline-block}

/* ── Skeleton loading ── */
.skeleton{background:linear-gradient(90deg,#E8E4D9 25%,#F0EDE6 50%,#E8E4D9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}