:root { --bg:#101418; --panel:#1a2027; --ink:#e6e9ec; --dim:#9aa5ae;
        --pos:#4f9d69; --neg:#c0504d; --accent:#5b9bd5; }
* { box-sizing:border-box; }
body { margin:0 auto; max-width:960px; padding:0 16px 48px;
       background:var(--bg); color:var(--ink);
       font:15px/1.5 system-ui, sans-serif; }
header h1 { margin:24px 0 4px; font-size:28px; }
header p { color:var(--dim); margin-top:0; }
h2 { font-size:16px; margin:28px 0 8px; }
.panel { background:var(--panel); border-radius:10px; padding:16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
        gap:12px; }
label { display:flex; flex-direction:column; font-size:12px; color:var(--dim); }
input, select { margin-top:4px; padding:6px 8px; border-radius:6px;
        border:1px solid #333c46; background:#0d1116; color:var(--ink);
        font-size:14px; }
button { margin-top:14px; padding:9px 22px; border:none; border-radius:8px;
        background:var(--accent); color:#fff; font-size:15px; cursor:pointer; }
button:hover { filter:brightness(1.1); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
        gap:10px; margin-top:20px; }
.tile { background:var(--panel); border-radius:10px; padding:12px 14px; }
.tile .k { font-size:12px; color:var(--dim); }
.tile .v { font-size:20px; margin-top:2px; }
canvas { width:100%; background:var(--panel); border-radius:10px; }
table { width:100%; border-collapse:collapse; background:var(--panel);
        border-radius:10px; overflow:hidden; }
th, td { padding:7px 10px; text-align:right; font-size:13px; }
th { color:var(--dim); border-bottom:1px solid #333c46; }
td:first-child, th:first-child { text-align:left; }
.pos { color:var(--pos); } .neg { color:var(--neg); }
.warn { color:#e0b252; font-size:13px; }
.note, .meta { color:var(--dim); font-size:12px; }
.hint { color:var(--accent); font-size:14px; }
footer { margin-top:40px; color:var(--dim); font-size:12px; }
footer a { color:var(--accent); }

/* ── field tooltips ─────────────────────────────────────────────── */
.has-tip { position:relative; cursor:help; }
.has-tip::after { content:"ⓘ"; position:absolute; top:0; right:2px;
  font-size:11px; color:var(--dim); }
.has-tip:hover::before, .has-tip:focus-within::before {
  content:attr(data-tip); position:absolute; bottom:100%; left:0; z-index:10;
  width:min(300px, 80vw); padding:8px 10px; margin-bottom:6px;
  background:#0d1116; color:var(--ink); border:1px solid #3a4652;
  border-radius:8px; font-size:12px; line-height:1.45; font-weight:normal;
  box-shadow:0 4px 14px rgba(0,0,0,.5); pointer-events:none; }