:root{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#dce6f6;background:#0c1220;font-synthesis:none;font-size:14px;--muted:#8e9bb1;--border:#25324a;--accent:#5bd8cb}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,select,input,textarea{border:1px solid #33425c;border-radius:7px;background:#152137;color:#dce6f6;padding:9px 12px}button{cursor:pointer;transition:background .15s}button:hover{background:#25354e}button:disabled{opacity:.45;cursor:wait}.primary{background:#5bd8cb;border-color:#5bd8cb;color:#09221f;font-weight:600}.primary:hover{background:#89e6dd}.danger{color:#ff9f9b;border-color:#733f49}.quiet{background:transparent;color:var(--muted)}input,select{max-width:100%}input:focus,select:focus,button:focus-visible,textarea:focus{outline:2px solid #5bd8cb;outline-offset:2px}aside{position:fixed;width:212px;height:100vh;border-right:1px solid var(--border);padding:35px 20px;background:#101827;display:flex;flex-direction:column}.brand{color:white;font-size:29px;letter-spacing:3px;text-decoration:none;display:block;font-weight:600}.brand span{display:block;font-size:11px;letter-spacing:1.4px;color:var(--muted);margin-top:8px}.nav-title{margin:58px 12px 15px;color:#697890;font-size:11px;letter-spacing:2px}nav{display:grid;gap:8px}nav button{text-align:left;background:transparent;border-color:transparent;padding:14px 12px;font-size:13px;color:var(--muted)}nav button.active{background:#173338;color:#85e2d5;border-color:#265555}.side-note{margin-top:auto;font-size:12px;color:#b5c3d4;line-height:1.9}.side-note p{color:#718098;font-size:11px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5bd8cb;margin-right:5px}main{max-width:1700px;margin-left:212px;padding:35px 36px;display:grid;gap:22px}header{display:flex;justify-content:space-between;align-items:center;margin:0 0 7px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#7fa5b6;font-weight:600}h1{font-size:27px;font-weight:600;letter-spacing:1px;margin:10px 0}h2{font-size:16px;margin:0;font-weight:600}h3{font-size:14px}p{font-size:12px;line-height:1.7;color:var(--muted);margin:7px 0 0}.header-actions{display:flex;align-items:center;gap:12px}.badge{display:inline-block;border:1px solid #3a4e65;padding:7px 10px;border-radius:5px;font-size:11px;color:#b5c3d4;white-space:nowrap}.badge.running,.badge.connected{background:#133b35;color:#79ddba;border-color:#29584d}.badge.fault{background:#40242c;color:#ff9f9b;border-color:#6b3b43}.badge.idle,.badge.starting{background:#3d3220;color:#ebc87d;border-color:#655332}.badge.offline{background:#252e3b;color:#9caabd}.card{background:#121d2f;border:1px solid var(--border);border-radius:10px;padding:22px;min-width:0}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.summary article>span{color:var(--muted);font-size:12px}.summary strong{display:block;font-size:34px;font-weight:500;margin:14px 0 10px;letter-spacing:-1px}.summary small{font-size:11px;color:#75869e}.summary article:nth-child(2) strong{color:#74d9bc}.summary article:nth-child(3) strong{color:#e6bd76}.controls{display:grid;gap:16px}.control-row{display:flex;align-items:end;gap:10px;flex-wrap:wrap}label{display:grid;gap:7px;font-size:11px;color:var(--muted)}.controls label{min-width:110px}.muted{color:var(--muted);font-size:11px}.workspace{display:grid;grid-template-columns:310px minmax(0,1fr);gap:22px;align-items:start}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}.device-list{padding:20px 0;position:sticky;top:18px}.device-list .section-head,.search-label{margin-left:18px;margin-right:18px}.search-label input{width:100%;font-size:12px;background:#0e1828}.table-scroll{max-height:745px;overflow:auto;margin-top:17px}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;font-size:10px;color:#7889a1;font-weight:400;padding:10px 18px;background:#101a2a}td{padding:13px 18px;border-top:1px solid #1d2a40}td:first-child{line-height:1.8}td small{display:block;color:#8e9bb1;font-size:10px}tr.device{cursor:pointer}tr.device:hover{background:#1a2b40}tr.selected{background:#173139}tr.selected td:first-child{box-shadow:inset 3px 0 #5bd8cb}.device-list .badge{font-size:10px;padding:5px 7px}.detail{display:grid;gap:20px}.device-actions{display:flex;gap:8px;flex-wrap:wrap}.device-actions button{font-size:11px;padding:8px 10px}#state-reason{color:#b0bdce;margin:13px 0}.progress{display:flex;gap:8px;margin:14px 0}.progress span{padding:9px 10px;border:1px solid var(--border);font-size:10px;border-radius:5px;color:#75869e;flex:1}.progress .current{border-color:#5bd8cb;color:#8ee4d5;background:#153739}.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border-top:1px solid var(--border);padding-top:20px}.kpi-row>div{padding-left:17px;border-left:1px solid var(--border)}.kpi-row>div:first-child{padding-left:0;border-left:0}.kpi-row span{display:block;font-size:11px;color:var(--muted)}.kpi-row strong{display:block;margin-top:8px;font-size:22px;font-weight:500}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{padding:13px;text-align:left;background:#17273c;display:block;min-height:80px}.metric span{display:block;color:var(--muted);font-size:11px}.metric strong{display:block;font-weight:500;font-size:18px;margin-top:12px}.metric small{font-size:10px;color:#8397ad;margin-left:5px}.metric.warning{border-color:#98713b;background:#332c23}.metric.warning strong{color:#e7be78}#metric-form{margin-top:18px;padding-top:10px;border-top:1px solid var(--border)}#chart{display:block;width:100%;height:180px;overflow:visible}#chart text{fill:#8093ad;font-size:10px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.record-list{max-height:220px;overflow:auto}.record{font-size:12px;border-bottom:1px solid #243149;padding:11px 0;line-height:1.7}.record small{color:#8497af;display:block;font-size:10px}.record.warning{color:#edb47b}.empty{padding:25px 0;color:#72849d;font-size:12px}details{margin-top:20px;border-top:1px solid var(--border);padding-top:15px}summary{font-size:11px;cursor:pointer;color:#92cfc9}details form{display:grid;gap:13px;margin-top:18px}details input{width:130px}textarea{width:100%;min-height:65px}.event-list{max-height:220px;overflow:auto;font-size:11px;line-height:1.8}.event{display:grid;grid-template-columns:145px 150px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid #223047;color:#9db1c9}.event time{color:#6e839e}.event div{overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#60738d;padding:5px 0}#error{background:#3b242c;border:1px solid #744252;padding:14px;border-radius:8px;color:#ffb5af;font-size:12px}#toast{position:fixed;bottom:24px;right:26px;background:#245149;color:#c0f7e7;padding:14px 24px;border:1px solid #438273;border-radius:8px;z-index:50;max-width:80vw;font-size:13px}.overlay{position:fixed;inset:0;z-index:100;background:#090f1bea;display:grid;place-items:center;backdrop-filter:blur(8px)}.login{width:370px;display:grid;gap:20px}.login p{margin:0}.login h2{font-size:22px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(min-width:1800px){main{margin-left:232px}}@media(max-width:1200px){aside{width:175px;padding:30px 15px}main{margin-left:175px;padding:28px 22px}.workspace{grid-template-columns:260px minmax(0,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}.summary{gap:12px}.card{padding:18px}.device-list{padding:18px 0}}@media(max-width:900px){aside{position:static;width:100%;height:auto;padding:20px}.brand{font-size:22px}.brand span{display:inline;margin-left:20px}.nav-title,.side-note{display:none}nav{display:flex;overflow:auto;margin-top:18px}nav button{white-space:nowrap;padding:10px}.workspace{grid-template-columns:1fr}.device-list{position:static}.table-scroll{max-height:260px}main{margin:0;padding:20px}.summary{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr}header{align-items:start;gap:10px}.header-actions{flex-direction:column;align-items:end}h1{font-size:23px}.event{grid-template-columns:110px 1fr}.event div{grid-column:1/-1}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
