:root{color-scheme:dark;--bg:#07111f;--surface:#0d1a2b;--surface2:#111f32;--line:#24354a;--text:#f3f7fb;--muted:#91a2b7;--green:#4ce1a1;--amber:#ffcc66;--red:#ff6b72;--blue:#63b3ff;--violet:#aa8cff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0,#102a3e 0,transparent 38%),var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
button,input{font:inherit}
.shell{width:min(1320px,calc(100% - 32px));margin:auto;padding:28px 0 52px}
.top,.section-head,.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px}
.top{margin-bottom:24px}.brand,.top-right,.chips{display:flex;align-items:center;gap:14px}.top-right,.chips{gap:7px;flex-wrap:wrap}
.bolt{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#102a30;color:var(--green);font-size:25px}
.brand h1{font-size:1.35rem;letter-spacing:.04em;margin:0}.brand p,.muted{margin:3px 0 0;color:var(--muted);font-size:.86rem}
.version{padding:8px 13px;border:1px solid rgba(99,179,255,.35);border-radius:12px;background:rgba(99,179,255,.08);color:#b9dcff;font-weight:800}
.state{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--line);background:rgba(13,26,43,.8);border-radius:999px;font-weight:650}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}.state.ok .dot{background:var(--green);box-shadow:0 0 0 5px rgba(76,225,161,.12)}.state.bad .dot{background:var(--red);box-shadow:0 0 0 5px rgba(255,107,114,.12)}.state.warn .dot{background:var(--amber)}
.panel,.metric,.details{border:1px solid var(--line);background:linear-gradient(145deg,rgba(17,31,50,.97),rgba(10,23,39,.97));border-radius:18px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.panel{padding:24px}.hero-card{display:flex;justify-content:space-between;align-items:flex-end;min-height:190px;gap:24px}
.label,.section-title{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}.big{font-size:clamp(3rem,7vw,5.5rem);font-weight:750;line-height:1.05;letter-spacing:-.06em;margin-top:12px}.big.small{font-size:clamp(2.7rem,5vw,4.5rem)}
.hero-side{text-align:right;display:grid;gap:4px}.hero-side strong{font-size:1.75rem}.hero-side .muted{max-width:190px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.metric{padding:16px;min-width:0}.metric strong{display:block;margin-top:8px;font-size:1.4rem;overflow-wrap:anywhere}.metric small{display:block;margin-top:4px;color:var(--muted)}
.section-head{align-items:end;margin:30px 0 12px}.section-head .muted{max-width:760px}.button,.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:9px 12px;border-radius:10px;cursor:pointer}
.button.primary{border-color:var(--green);background:rgba(76,225,161,.14);color:#c6f9e2}.button:disabled{opacity:.5;cursor:wait}.chip.active{border-color:var(--blue);background:rgba(99,179,255,.13);color:#d9edff}
.alarm{padding:15px 17px;border:1px solid rgba(76,225,161,.25);background:rgba(76,225,161,.06);border-radius:14px;color:#bcf8dd}.alarm.bad{border-color:rgba(255,107,114,.35);background:rgba(255,107,114,.08);color:#ffc1c4}.alarm.warn{border-color:rgba(255,204,102,.4);background:rgba(255,204,102,.07);color:#ffe6ad}
.toolbar{padding:14px;border:1px solid var(--line);border-radius:16px 16px 0 0;background:var(--surface);flex-wrap:wrap}.toolbar input{flex:1;min-width:260px;max-width:430px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text)}
.log-wrap{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}.toolbar+.log-wrap{border-radius:0 0 16px 16px;border-top:0}
.table-scroll{overflow:auto;max-height:570px}.log-table{width:100%;border-collapse:collapse;font-size:.86rem}.log-table th{position:sticky;top:0;background:#122137;color:var(--muted);z-index:1}.log-table th,.log-table td{text-align:left;padding:11px 13px;border-top:1px solid var(--line);vertical-align:top}.log-table tr.clickable{cursor:pointer}.log-table tr.clickable:hover,.log-table tr.selected{background:rgba(99,179,255,.08)}
.status-pill{display:inline-block;padding:3px 8px;border-radius:8px;background:rgba(76,225,161,.1);color:var(--green);white-space:nowrap}.status-pill.offline{color:var(--amber);background:rgba(255,204,102,.1)}.status-pill.unknown{color:var(--muted);background:rgba(145,162,183,.1)}
.empty{padding:22px;color:var(--muted);text-align:center}.identity{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}.identity div{background:var(--surface);padding:16px;min-width:0}.identity span{display:block;color:var(--muted);font-size:.78rem}.identity strong{display:block;margin-top:6px;overflow-wrap:anywhere;font-size:.95rem}
.notice{padding:10px 12px;border-radius:10px;background:rgba(99,179,255,.08);color:#b9dcff;font-size:.85rem;margin:14px 0}.dp-table td:first-child{font-family:ui-monospace,SFMono-Regular,monospace;color:#d9edff}.dp-table td:nth-child(2){font-family:ui-monospace,SFMono-Regular,monospace}
.details{margin-top:24px;overflow:hidden}.details summary{cursor:pointer;padding:16px 18px;font-weight:700}.details-inner{padding:0 18px 18px;overflow:auto}.details pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#bfd0e2;font-size:.8rem}
.device-catalog{display:grid;gap:8px;margin-top:16px}.catalog-device{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}.catalog-device[open]{border-color:rgba(99,179,255,.55)}.catalog-device summary{padding:12px 15px;font-size:.92rem;overflow-wrap:anywhere}.catalog-inner{padding:0 14px 15px}.catalog-inner .button{margin:5px 0 12px}.catalog-content{color:var(--muted);font-size:.9rem}.catalog-counts{color:var(--text);font-weight:650}.catalog-table{margin-top:12px}.catalog-table td:first-child{min-width:190px;font-weight:650;color:var(--text)}.catalog-table td:nth-child(2){min-width:180px}.catalog-table td:nth-child(3){min-width:220px}.original-name{display:block;margin-top:4px;font-weight:400;color:var(--muted)}.dp-code{font-family:ui-monospace,SFMono-Regular,monospace;color:#b9dcff;overflow-wrap:anywhere}
.footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:24px;color:var(--muted);font-size:.8rem}.footer form{margin:0}.logout{border:0;background:transparent;color:var(--muted);cursor:pointer}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login{width:min(420px,100%);padding:28px;border:1px solid var(--line);background:var(--surface);border-radius:22px}.login h1{margin:15px 0 0}.login label{display:block;margin:28px 0 7px}.login input{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text)}.login button{width:100%;margin-top:12px;padding:13px;border:0;border-radius:12px;background:var(--green);color:#042017;font-weight:750;cursor:pointer}.error{color:#ff9da2;margin-top:12px}
@media(max-width:900px){.hero{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.identity{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shell{width:min(100% - 18px,1320px);padding-top:15px}.top{align-items:flex-start}.top-right{justify-content:flex-end}.brand p{display:none}.hero-card{min-height:150px;padding:17px}.big{font-size:3.8rem}.metrics{grid-template-columns:repeat(2,1fr)}.identity{grid-template-columns:1fr}.footer{display:block}.footer>*{display:block;margin-top:7px}.section-head{align-items:flex-start}.toolbar input{min-width:100%}}