.metric{--bg:#0f1114;--card:#171a1f;--ink:#eef1f4;--muted:#aab0b6;--stroke:#262b32;--accent:#5b8cff;--accent2:#3dd1c0;background:var(--bg);border:1px solid var(--stroke);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.25);color:var(--ink);display:grid;gap:16px;margin-inline:auto;max-width:1200px;padding:20px clamp(14px,3vw,28px)}.metric-header{display:flex;flex-direction:column;gap:4px}.metric-title{font:800 clamp(18px,2.2vw,22px)/1.25 system-ui;margin:0}.metric-kicker{color:var(--muted);font:600 12px/1.2 system-ui;margin:0}.metric-controls{background:linear-gradient(180deg,hsla(0,0%,100%,.03),hsla(0,0%,100%,.02));border:1px solid var(--stroke);border-radius:12px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));padding:12px}.ctrl{display:grid;gap:8px;min-width:0}.ctrl-head{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}.ctrl label{color:#d8dde3;font:700 12px/1 system-ui;letter-spacing:.2px}.inline-actions{display:flex;flex-wrap:wrap;gap:6px}.mini{background:hsla(0,0%,100%,.04);border:1px solid var(--stroke);border-radius:8px;color:var(--ink);cursor:pointer;font:600 11px/1 system-ui;padding:4px 8px}.mini:hover{border-color:var(--accent)}.hint,.mini.clear{color:var(--muted)}.hint{display:block;font:500 11px/1.2 system-ui;margin-top:2px}.checklist{background:var(--card);border:1px solid var(--stroke);border-radius:10px;display:grid;gap:6px;max-height:150px;overflow:auto;padding:6px}.checklist--row{display:grid;gap:6px;grid-auto-rows:min-content;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.check{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:10px;padding:6px 8px;user-select:none}.check:hover{background:hsla(0,0%,100%,.04)}.check input{appearance:none;background:#0f1216;border:1.6px solid var(--stroke);border-radius:5px;display:inline-grid;height:18px;place-items:center;transition:all .15s ease;width:18px}.check input:checked{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 0 0 2px rgba(91,140,255,.25)}.check input:checked:after{background:#0b0e12;border-radius:2px;content:"";height:9px;width:9px}.check span{color:var(--ink);font:600 13px/1.2 system-ui}.metric-summary{align-items:center;display:flex;justify-content:flex-start}.metric-chip{align-items:center;background:var(--card);border:1px dashed var(--stroke);border-radius:999px;display:inline-flex;gap:10px;padding:8px 12px}.metric-chip span{color:var(--muted);font:700 12px/1 system-ui}.metric-chip strong{font:800 clamp(15px,2vw,16px)/1.1 system-ui}.metric-canvas{background:var(--card);border:1px solid var(--stroke);border-radius:12px;margin:0;padding:10px;width:100%}.metric-canvas canvas{display:block;height:clamp(220px,42vw,420px)!important;width:100%!important}@media (max-width:900px){.metric{gap:14px}.metric-canvas canvas{height:clamp(220px,50vw,380px)!important}.checklist{max-height:180px}}@media (max-width:600px){.metric{padding:16px}.metric-kicker{font-size:11px}.mini{padding:3px 7px}.metric-summary{justify-content:center}.metric-canvas canvas{height:clamp(200px,58vw,340px)!important}}@media (max-width:400px){.metric-canvas canvas{height:clamp(180px,64vw,300px)!important}.check span{font-size:12.5px}}.metric-empty{background:hsla(0,0%,100%,.03);border:1px dashed var(--stroke);border-radius:10px;color:var(--muted);font:500 13px/1.35 system-ui;padding:12px}