:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #efeee9;
  --ink: #16181d;
  --ink-2: #4a4f59;
  --ink-3: #8a8f99;
  --line: #dcdad3;
  --accent: #2f6fde;
  --accent-ink: #ffffff;
  --ok: #1f9d6b;
  --warn: #c2410c;
  --danger: #c7362b;
  --q1: #eaf3ec;
  --q2: #edf1fa;
  --q3: #f4f2ec;
  --q4: #fbefe9;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 22, 26, .06), 0 4px 16px rgba(20, 22, 26, .06);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121418; --surface: #1b1e24; --surface-2: #23272f; --ink: #eef0f3; --ink-2: #b4bac4;
    --ink-3: #7c838f; --line: #2f343d; --accent: #5b8ff0;
    --q1: #18261f; --q2: #182033; --q3: #22211d; --q4: #2a1d18;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  --bg: #121418; --surface: #1b1e24; --surface-2: #23272f; --ink: #eef0f3; --ink-2: #b4bac4;
  --ink-3: #7c838f; --line: #2f343d; --accent: #5b8ff0;
  --q1: #18261f; --q2: #182033; --q3: #22211d; --q4: #2a1d18;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.btn { display: inline-flex; align-items: center; gap: .45em; border: 1px solid var(--line); background: var(--surface);
  border-radius: 10px; padding: .55em .9em; font-weight: 550; line-height: 1.1; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: .6em .75em; }
.input:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
label.f { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: .3em; }
.muted { color: var(--ink-3); }
.pill { display: inline-flex; align-items: center; gap: .4em; padding: .2em .65em; border-radius: 999px; font-size: .8rem;
  font-weight: 650; background: var(--surface-2); color: var(--ink-2); }
.pill .dot { width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.pill.on { color: var(--ok); }
.pill.off { color: var(--warn); }
.hidden { display: none !important; }

/* ---- griglia SVG ---- */
.g2-svg { width: 100%; height: 100%; display: block; font-family: var(--font); }
.g2-quad.q1 { fill: var(--q1); } .g2-quad.q2 { fill: var(--q2); }
.g2-quad.q3 { fill: var(--q3); } .g2-quad.q4 { fill: var(--q4); }
.g2-border { fill: none; stroke: var(--line); stroke-width: 2; }
.g2-mid { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: .6; }
.g2-axis { fill: var(--ink); font-size: 28px; font-weight: 700; }
.g2-end { fill: var(--ink-2); font-size: 20px; font-weight: 550; }
.g2-pt { opacity: .28; }
.g2-dot { transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.g2-dot.entering { opacity: 0; }
.g2-dot.dim, .g2-label.dim { opacity: .18; }
.g2-dot-c { stroke: var(--surface); stroke-width: 3; }
.g2-dot-n { fill: #fff; font-size: 19px; font-weight: 750; pointer-events: none; }
.g2-label { transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.g2-label-bg { fill: var(--surface); stroke-width: 2; }
.g2-label-t { fill: var(--ink); font-size: 22px; font-weight: 600; }