:root{
  --bg:#020611;--panel:#071029;--panel2:#0B1736;--line:rgba(61,139,255,.28);--line2:rgba(61,139,255,.5);
  --y:#FFD60A;--b:#3D8BFF;--b2:#6FA8FF;--txt:#E3ECFF;--mut:#8EA1C9;--ok:#3BE08A;--bad:#FF5470;--warn:#FFB800;
  --cut:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.5 'JetBrains Mono',ui-monospace,monospace}
body{background-image:linear-gradient(rgba(255,214,10,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(61,139,255,.05) 1px,transparent 1px);background-size:40px 40px}
a{color:var(--b2)}a:hover{color:var(--y)}
h1,h2,h3{font-family:'Chakra Petch',sans-serif;letter-spacing:.03em;margin:0}
h2{font-size:18px;text-transform:uppercase;margin-bottom:14px}
@keyframes flicker{0%,19%,21%,62%,64%,100%{opacity:1}20%,63%{opacity:.35}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(59,224,138,.7)}50%{box-shadow:0 0 0 6px rgba(59,224,138,0)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.shell{display:flex;min-height:100vh}
.side{width:236px;flex:none;background:rgba(7,16,41,.92);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{font:700 24px 'Chakra Petch',sans-serif;padding:4px 10px 12px;border-bottom:1px solid var(--line)}
.brand .flick{color:var(--y);text-shadow:0 0 10px var(--y),0 0 24px var(--y);animation:flicker 4s infinite}
.brand b{color:var(--b2);margin-left:2px}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a,.logout button{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--mut);text-decoration:none;border:0;background:none;font:600 14px 'JetBrains Mono',monospace;cursor:pointer;width:100%;text-align:left;transition:background .2s,color .2s,transform .2s}
.side nav a:hover,.logout button:hover{color:var(--txt);background:rgba(61,139,255,.1);transform:translateX(4px)}
.side nav a.on{color:#020611;background:var(--y);clip-path:var(--cut);box-shadow:0 0 18px rgba(255,214,10,.4)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:rgba(2,6,17,.85);position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.top h1{font-size:24px;text-transform:uppercase;flex:1;text-shadow:2px 0 rgba(255,214,10,.5),-2px 0 rgba(61,139,255,.5)}
.who{display:flex;gap:8px;flex-wrap:wrap}
.burger{display:none;background:none;border:1px solid var(--line2);color:var(--txt);font-size:20px;width:44px;height:44px;cursor:pointer}
.content{padding:24px 28px 60px;display:flex;flex-direction:column;gap:22px;animation:rise .35s ease both}

.card{background:rgba(7,16,41,.85);border:1px solid var(--line);padding:20px;position:relative}
.card.y{border-color:rgba(255,214,10,.5);box-shadow:0 0 22px rgba(255,214,10,.08)}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.kpi{padding:18px;border:1px solid var(--line);background:rgba(7,16,41,.85);clip-path:var(--cut)}
.kpi .n{font:700 34px/1 'Chakra Petch',sans-serif;color:var(--y);text-shadow:0 0 14px rgba(255,214,10,.35)}
.kpi .l{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-top:6px}
.kpi.b .n{color:var(--b2);text-shadow:0 0 14px rgba(61,139,255,.4)}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>.f{flex:1 1 180px;min-width:0}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
label{display:block;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
input,select,textarea{width:100%;background:#030A1E;border:1px solid var(--line2);color:var(--txt);padding:11px 12px;font:14px 'JetBrains Mono',monospace;border-radius:0;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--y);box-shadow:0 0 0 1px var(--y),0 0 14px rgba(255,214,10,.25)}
textarea{min-height:90px;resize:vertical}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--y);vertical-align:middle}
.check{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--txt);margin:0}
.hint{font-size:12px;color:var(--mut);margin-top:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;padding:11px 20px;font:700 14px 'Chakra Petch',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;background:var(--y);color:#020611;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:transform .15s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:drop-shadow(0 0 10px rgba(255,214,10,.6));color:#020611}
.btn.ghost{background:transparent;color:var(--b2);clip-path:none;border:1px solid var(--b);padding:10px 19px}
.btn.ghost.sm{padding:6px 11px}
.btn.ghost:hover{color:var(--y);filter:none;border-color:var(--y)}
.btn.danger{background:var(--bad);color:#fff}
.btn.sm{padding:7px 12px;font-size:12px}
form.inline{display:inline}

.tbl{overflow-x:auto;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(61,139,255,.14);white-space:nowrap}
th{font:700 12px 'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--b2);background:rgba(61,139,255,.07)}
tr{transition:background .15s}
tbody tr:hover{background:rgba(255,214,10,.05)}
td.wrap{white-space:normal}
.mono{font-family:'JetBrains Mono',monospace}
.mut{color:var(--mut)}

.badge{display:inline-block;padding:3px 9px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid}
.badge.ok{color:var(--ok);border-color:rgba(59,224,138,.5)}
.badge.bad{color:var(--bad);border-color:rgba(255,84,112,.5)}
.badge.warn{color:var(--warn);border-color:rgba(255,184,0,.5)}
.badge.off{color:var(--mut);border-color:rgba(142,161,201,.4)}
.badge.y{color:#020611;background:var(--y);border-color:var(--y)}
.pill{padding:6px 12px;border:1px solid var(--line2);font-size:12px;color:var(--b2)}
.pill.y{border-color:var(--y);color:var(--y)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#2A3554}
.dot.on{background:var(--ok);animation:pulse 1.8s infinite}

.flash{padding:12px 16px;border:1px solid;font-weight:600}
.flash.ok{border-color:var(--ok);color:var(--ok);background:rgba(59,224,138,.07)}
.flash.err{border-color:var(--bad);color:var(--bad);background:rgba(255,84,112,.07)}

.bars{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:10px}
.bars .bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars .bar i{display:block;width:100%;background:linear-gradient(180deg,var(--y),var(--b));transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.8,.2,1) both;min-height:2px}
.bars .bar span{font-size:11px;color:var(--mut)}
.bars .bar b{font-size:11px;color:var(--txt)}

.pl{border:1px solid var(--line);padding:14px;margin-bottom:12px;background:rgba(3,10,30,.6)}
.pl .between{margin-bottom:10px}
.copy{cursor:pointer}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:100%;max-width:400px;border:2px solid var(--b);box-shadow:0 0 40px rgba(61,139,255,.3);background:rgba(2,6,17,.92);padding:32px;display:flex;flex-direction:column;gap:16px}
.login .brand{border:0;padding:0;font-size:38px;text-align:center}

@media (max-width:900px){
  .side{position:fixed;left:0;top:0;z-index:20;transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 40px rgba(0,0,0,.6)}
  .side.open{transform:none}
  .burger{display:inline-block}
  .top{padding:12px 16px}
  .top h1{font-size:18px}
  .content{padding:16px 16px 60px}
  .who .pill:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}