:root {
  --ink:#102033; --muted:#66758a; --line:#d8e2ed; --bg:#eef3f8; --panel:#fff;
  --nav:#061f35; --blue:#1769d2; --green:#168a45; --amber:#c77700; --red:#d92d20;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box} body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink)} button,input,select{font:inherit}
.sidebar{position:fixed;inset:0 auto 0 0;width:250px;padding:24px 18px;background:linear-gradient(180deg,#062a46,#031927);color:#fff;display:flex;flex-direction:column}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:30px}.brand-mark{width:50px;height:50px;border:2px solid #4ba1ff;border-radius:50%;display:grid;place-items:center;color:#75b7ff;font-size:27px;font-weight:900}.brand strong{display:block;font-size:23px}.brand span{color:#75b7ff;letter-spacing:.16em;text-transform:uppercase}
nav{display:grid;gap:8px}nav a{color:#d8ebff;text-decoration:none;padding:14px 16px;border-radius:8px}nav a.active,nav a:hover{background:#145d9c}.profile{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:6px}.profile span,.profile small{color:#abc3d8}
main{margin-left:250px;padding:24px}.topbar{display:grid;grid-template-columns:minmax(300px,1fr) 240px auto;gap:18px;align-items:center;margin-bottom:18px}h1,h2,p{margin:0}h1{font-size:32px}.topbar p{color:var(--muted);margin-top:5px}.topbar label,.status{min-height:58px;display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--panel);padding:10px 14px;border-radius:8px;color:var(--muted);font-weight:800}.topbar select{border:0;background:transparent;color:var(--ink);font-weight:900}.status{color:var(--green)}.status span{width:10px;height:10px;border-radius:50%;background:var(--green)}
.grid{display:grid;grid-template-columns:390px minmax(430px,1fr) 410px;gap:14px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 12px 30px rgba(24,39,55,.08)}.panel-title{min-height:56px;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.panel-title h2{font-size:18px}.panel-title button{border:1px solid var(--line);background:#f7fbff;color:var(--blue);border-radius:6px;padding:8px 10px;font-weight:800}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}label{display:grid;gap:7px;font-size:14px;font-weight:800;color:#26384d}label span{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;color:var(--muted)}label input{min-width:0;border:0;padding:10px}.wide{grid-column:1/-1}output{justify-self:end;color:var(--blue);font-weight:900}input[type=range]{accent-color:var(--blue)}
.trends{min-height:410px}.trends{grid-column:span 1}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}.metrics article{border:1px solid var(--line);border-radius:8px;padding:14px;background:#fbfdff}.metrics span{color:var(--muted)}.metrics strong{display:block;margin-top:6px;color:var(--blue);font-size:24px}#riskBadge,#anomaly{padding:7px 11px;border-radius:999px;background:#fff3cd;color:var(--amber);font-weight:900}#riskBadge.danger{background:#fee4e2;color:var(--red)}#riskBadge.ok{background:#dcfce7;color:var(--green)}
canvas{width:100%;max-height:360px;display:block;padding:14px 18px 18px}#drivers{grid-column:span 1}#savings{grid-column:span 2}table{width:calc(100% - 28px);margin:14px;border-collapse:collapse}th,td{padding:11px;border:1px solid var(--line);text-align:left}th{background:#f6f8fb}
@media(max-width:1220px){.sidebar{position:static;width:auto}main{margin-left:0}.topbar,.grid{grid-template-columns:1fr}#savings{grid-column:auto}}
@media(max-width:680px){main{padding:12px}.sidebar{padding:18px}nav{grid-template-columns:1fr 1fr}h1{font-size:25px}.form-grid,.metrics{grid-template-columns:1fr}}