/* ============================================================
   Base reset + primitives
   ============================================================ */

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

html, body { height: 100%; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(16,185,129,0.05), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(59,130,246,0.04), transparent 55%),
    var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, .head { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* Numeric / data blocks: tabular figures, no shadow */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Logical-property utilities so layout flips cleanly with dir */
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap1 { gap: var(--s1); } .gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); }
.gap4 { gap: var(--s4); } .gap6 { gap: var(--s6); }
.grow { flex: 1; }
.wrap { flex-wrap: wrap; }

.t-body  { color: var(--text-body); }
.t-muted { color: var(--text-muted); }
.t-em    { color: var(--emerald); }
.t-am    { color: var(--amber); }
.t-red   { color: var(--red); }
.upper   { text-transform: uppercase; letter-spacing: 0.08em; }
.mono-label { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-head); font-weight: 600; }

/* Scrollbars */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid var(--bg-base); }
*::-webkit-scrollbar-thumb:hover { background: #3a4f6e; }

/* Focus ring — accessible, crisp */
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: var(--r-sm); }

/* Selection */
::selection { background: var(--emerald-soft); color: var(--text-strong); }

/* App scaffolding */
#app { min-height: 100vh; display: flex; flex-direction: column; }

.hidden { display: none !important; }

/* Animated mount */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise var(--dur) var(--ease) both; }

@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes scan { 0% { top: 4%; } 100% { top: 96%; } }
@keyframes ring-spin { to { transform: rotate(360deg); } }