:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --line:#2a3240;
  --txt:#e6edf3; --muted:#8b98a9; --accent:#4cc9f0; --accent2:#7b8cff;
  --opus:#7b8cff; --sonnet:#4cc9f0; --haiku:#3ddc97; --other:#5a6472;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a,button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.topbar{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:18px;letter-spacing:.3px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);margin-right:4px}
.sub{color:var(--muted);font-size:13px}
.logout{margin-left:auto;color:var(--muted);text-decoration:none;font-size:13px;border:1px solid var(--line);padding:6px 13px;border-radius:8px;transition:color .15s,border-color .15s}
.logout:hover{color:var(--txt);border-color:var(--accent)}

main{max-width:1080px;margin:0 auto;padding:22px;display:flex;flex-direction:column;gap:18px;animation:fadeup .35s ease both}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;transition:border-color .18s}
.card h2{margin:0 0 14px;font-size:15px;font-weight:600;display:flex;gap:8px;align-items:baseline}
.card h2 small,.note{color:var(--muted);font-weight:400;font-size:12px}
.note{margin:10px 0 0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-head h2{margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kpi{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 14px;transition:transform .18s,border-color .18s}
.kpi:hover{transform:translateY(-2px);border-color:#33485f}
.kpi .v{font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.kpi .l{color:var(--muted);font-size:11px;margin-top:5px;text-transform:uppercase;letter-spacing:.04em}
.kpi--hero{border-color:#2c4a63}
.kpi--hero::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:12px 12px 0 0;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.kpi--hero .v{color:var(--accent)}

/* AI -> umano */
.he-row{display:flex;align-items:stretch;gap:14px}
.he-side{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:16px;text-align:center}
.he-side--accent{border-color:#2c4a63;background:linear-gradient(180deg,rgba(76,201,240,.10),rgba(76,201,240,.02))}
.he-v{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.he-side--accent .he-v{color:var(--accent)}
.he-l{color:var(--muted);font-size:12px;margin-top:4px}
.he-arrow{display:flex;align-items:center;color:var(--muted);font-size:24px}
.he-months{margin-top:12px;font-size:13px;color:var(--txt);font-variant-numeric:tabular-nums}

/* grafico giornaliero con assi */
.month-nav{display:flex;align-items:center;gap:10px}
.month-nav button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);width:30px;height:30px;border-radius:8px;font-size:16px;line-height:1;transition:border-color .15s,background .15s}
.month-nav button:hover:not(:disabled){border-color:var(--accent)}
.month-nav button:disabled{opacity:.35;cursor:default}
.month-nav span{font-size:13px;color:var(--muted);min-width:120px;text-align:center}
.chart{display:grid;grid-template-columns:auto 1fr;gap:10px}
.chart-yaxis{align-self:start;height:160px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.chart-plot{min-width:0}
.chart-daily{display:flex;align-items:flex-end;gap:2px;height:160px;
  background:linear-gradient(var(--line),var(--line)) left top/100% 1px no-repeat,
            linear-gradient(var(--line),var(--line)) left 50%/100% 1px no-repeat,
            linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
.chart-daily .b{flex:1;min-width:0;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:3px 3px 0 0;min-height:2px;transition:filter .15s}
.chart-daily .b:hover{filter:brightness(1.3)}
.chart-xaxis{display:flex;gap:2px;margin-top:6px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.chart-xaxis span{flex:1;min-width:0;text-align:center;overflow:hidden}

/* progetti */
.bars{display:flex;flex-direction:column;gap:8px}
.bars .row{display:grid;grid-template-columns:160px 1fr auto;gap:10px;align-items:center;font-size:13px}
.bars .name{color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .track{background:var(--panel2);border-radius:5px;height:14px;overflow:hidden}
.bars .fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:5px}
.bars .val{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* modelli */
.models{display:flex;gap:18px;align-items:center}
.models .legend{display:flex;flex-direction:column;gap:8px;font-size:13px;font-variant-numeric:tabular-nums}
.models .lg{display:flex;align-items:center;gap:8px}
.models .sw{width:11px;height:11px;border-radius:3px}

/* token */
#tokens .trow{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
#tokens .trow:last-child{border:0}
#tokens .num{font-variant-numeric:tabular-nums}
#tokens .cost{font-size:30px;font-weight:700;margin-top:10px;color:var(--accent);font-variant-numeric:tabular-nums}

/* skill */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:13px}
.chip b{color:var(--accent);font-variant-numeric:tabular-nums}

/* recenti */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.feed li{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:8px}
.feed li:last-child{border:0}
.feed .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .m{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.foot{max-width:1080px;margin:0 auto;padding:14px 22px 30px;color:var(--muted);font-size:12px}

/* login */
.login-body{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:22px;
  background:radial-gradient(1100px 520px at 50% -8%, #182434 0%, var(--bg) 58%)}
.login-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.login-card .brand{font-size:20px}
.login-sub{color:var(--muted);font-size:13px;margin:-4px 0 6px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.login-card input{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 12px;color:var(--txt);font-size:15px;transition:border-color .15s,box-shadow .15s}
.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,201,240,.15)}
.login-card button{margin-top:6px;background:linear-gradient(90deg,var(--accent2),var(--accent));color:#0d1117;font-weight:700;border:0;border-radius:8px;padding:12px;font-size:15px;transition:filter .12s,transform .08s}
.login-card button:hover{filter:brightness(1.08)}
.login-card button:active{transform:translateY(1px)}
.login-err{background:#3a1d22;border:1px solid #7a2d36;color:#ffb3bd;border-radius:8px;padding:9px 12px;font-size:13px}

@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.bars .row{grid-template-columns:110px 1fr auto}}
@media(max-width:560px){.he-row{flex-direction:column}.he-arrow{transform:rotate(90deg);justify-content:center}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}