/* ══════════════════════════════════════════════════════
   Base · Reset + Typography + Scrollbar
══════════════════════════════════════════════════════ */

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

html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--t1);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--t3); }

a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }

.mono { font-family: var(--font-mono); font-size: 11px; }

/* ── Utility ──────────────────────────────── */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.scr { overflow-y: auto; }
.scr-280 { max-height: 280px; }
.scr-400 { max-height: 400px; }
.scr-500 { max-height: 500px; }

/* ── Live indicator ───────────────────────── */
.ldot {
  width: 7px; height: 7px; background: var(--green); border-radius: 50%;
  animation: lpul 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lpul {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 40%, transparent); }
  50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent); }
}