:root{--ink:#102033;--muted:#66758a;--line:#d8e2ed;--bg:#eef3f8;--panel:#fff;--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(320px,1fr) 260px 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:minmax(520px,1.15fr) minmax(340px,.85fr) 390px;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;cursor:pointer}.panel-title span,#badge{padding:7px 11px;border-radius:999px;background:#fff3cd;color:var(--amber);font-weight:900}
.table-wrap{padding:14px}.head,.row{display:grid;grid-template-columns:1.35fr 82px 90px 96px 90px 92px;gap:8px;align-items:center}.head{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;margin-bottom:7px}.row{padding:8px 0;border-top:1px solid #edf2f7}.row input,.row select{width:100%;min-height:36px;border:1px solid var(--line);border-radius:6px;padding:7px}.ok{color:var(--green);font-weight:900}.bad{color:var(--red);font-weight:900}.form-grid{display:grid;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}
dl{margin:0 18px 18px;border:1px solid var(--line);border-radius:8px;overflow:hidden}dl div{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}dl div:last-child{border-bottom:0}dt,dd{margin:0;padding:12px}dt{background:#f6f8fb;color:var(--muted)}dd{font-weight:900}.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}.warning-box{display:flex;gap:12px;align-items:center;margin:0 14px 14px;padding:14px;border:1px solid #ffd9a1;background:#fffaf0;border-radius:8px}.warning-box span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:#fff;font-weight:900;flex:none}
.chart-panel{grid-column:span 1}canvas{width:100%;display:block;max-height:340px;padding:14px 18px 18px}@media(max-width:1220px){.sidebar{position:static;width:auto}main{margin-left:0}.topbar,.grid{grid-template-columns:1fr}}@media(max-width:720px){main{padding:12px}.sidebar{padding:18px}nav{grid-template-columns:1fr 1fr}h1{font-size:25px}.head{display:none}.row,.metrics{grid-template-columns:1fr}}