:root{--bg:#f4f6f8;--surface:#fff;--surface2:#f8fafc;--text:#111827;--muted:#667085;--line:#d0d5dd;--accent:#2563eb;--accentText:#fff;--good:#15803d;--warn:#b45309;--bad:#b42318;--shadow:0 8px 28px rgba(16,24,40,.08);--radius:12px;--sidebar:#111827;--sidebarText:#f9fafb;--font:"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font);background:var(--bg);color:var(--text)}button,input,select{font:inherit}.hidden{display:none!important}.auth-view{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}.auth-card{width:min(390px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;display:grid;gap:16px}.auth-card h1{margin:0;font-size:26px}.auth-card p{margin:4px 0 0;color:var(--muted)}label{display:grid;gap:6px;font-weight:600}input,select{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:9px 10px}.brand-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:var(--accent);color:#fff;font-weight:800}.brand-mark.small{width:34px;height:34px;border-radius:9px;font-size:12px}.btn,.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:8px 12px;cursor:pointer}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accentText)}.btn.danger{color:var(--bad)}.form-error{min-height:18px;color:var(--bad)}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:var(--sidebar);color:var(--sidebarText);padding:16px 12px;display:flex;flex-direction:column;gap:16px}.side-brand{display:flex;align-items:center;gap:10px;padding:4px 6px 12px}.side-brand small{display:block;opacity:.68;margin-top:2px}.nav{display:grid;gap:4px}.nav button{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;color:inherit;text-align:left;padding:10px 11px;border-radius:8px;cursor:pointer}.nav button:hover,.nav button.active{background:rgba(255,255,255,.12)}.nav-separator{height:1px;background:rgba(255,255,255,.16);margin:7px 4px}.legacy-badge{font-size:10px;opacity:.65;border:1px solid currentColor;border-radius:999px;padding:1px 5px}.side-footer{margin-top:auto;display:flex;gap:9px;align-items:center;padding:10px 7px;border-top:1px solid rgba(255,255,255,.16)}.side-footer small{display:block;opacity:.65;margin-top:2px}.status-dot{width:10px;height:10px;border-radius:50%;background:#22c55e}.workspace{min-width:0}.topbar{height:64px;position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:16px}.topbar>div:first-of-type{display:grid}.topbar small{color:var(--muted);margin-top:2px}.top-actions{display:flex;align-items:center;gap:9px}.user-chip{white-space:nowrap;color:var(--muted)}.content{padding:22px;max-width:1680px;margin:0 auto}.page-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:18px}.page-head h1{margin:0 0 5px;font-size:26px}.page-head p{margin:0;color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.stat,.panel,.device-card,.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.stat{padding:15px}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;font-size:27px;margin-top:7px}.panel{padding:16px;margin-bottom:16px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.toolbar input{flex:1;min-width:220px}.device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.device-card{padding:14px;cursor:pointer;transition:transform .12s ease,border-color .12s ease}.device-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}.device-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.device-card h3{margin:0 0 4px;font-size:16px}.muted{color:var(--muted)}.status{font-size:11px;padding:4px 7px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);white-space:nowrap}.status.online{color:var(--good)}.status.offline{color:var(--muted)}.status.bad{color:var(--bad)}.kv{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:6px 10px;margin-top:12px;font-size:13px}.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.metric{padding:14px}.metric small{display:block;color:var(--muted)}.metric strong{display:block;font-size:22px;margin-top:6px}.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:14px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}.table th{font-size:12px;color:var(--muted);font-weight:600}.problem-list{display:grid;gap:8px}.problem{border-left:3px solid var(--bad);background:var(--surface2);padding:9px 10px}.empty{padding:28px;text-align:center;color:var(--muted)}.skeleton{height:120px;border-radius:var(--radius);background:linear-gradient(90deg,var(--surface2),var(--surface),var(--surface2));background-size:200% 100%;animation:pulse 1.2s infinite}@keyframes pulse{to{background-position:-200% 0}}.mobile-only{display:none}
html[data-theme="win11-dark"]{--bg:#111318;--surface:#1b1e24;--surface2:#242832;--text:#f3f4f6;--muted:#a7afbd;--line:#343a46;--accent:#60a5fa;--accentText:#07111f;--sidebar:#090b0f;--shadow:0 10px 28px rgba(0,0,0,.28);color-scheme:dark}
html[data-theme="win311"]{--bg:#c0c0c0;--surface:#c0c0c0;--surface2:#d4d0c8;--text:#000;--muted:#444;--line:#808080;--accent:#000080;--accentText:#fff;--sidebar:#c0c0c0;--sidebarText:#000;--radius:0;--shadow:none;--font:Tahoma,"MS Sans Serif",Arial,sans-serif}html[data-theme="win311"] .sidebar{border-right:2px outset #fff}html[data-theme="win311"] .nav button:hover,html[data-theme="win311"] .nav button.active{background:#000080;color:#fff;border-radius:0}html[data-theme="win311"] .stat,html[data-theme="win311"] .panel,html[data-theme="win311"] .device-card,html[data-theme="win311"] .metric,html[data-theme="win311"] .auth-card{border:2px outset #fff}html[data-theme="win311"] input,html[data-theme="win311"] select{border:2px inset #fff;border-radius:0}html[data-theme="win311"] .btn{border:2px outset #fff;border-radius:0}html[data-theme="win311"] .nav-separator,html[data-theme="win311"] .side-footer{border-color:#808080;background:#808080}
html[data-theme="winxp"]{--bg:#dce9f9;--surface:#fff;--surface2:#edf5ff;--text:#162337;--muted:#586b83;--line:#9db9dc;--accent:#176fd3;--accentText:#fff;--sidebar:#0b52ad;--sidebarText:#fff;--shadow:0 2px 8px rgba(19,72,132,.14);--radius:8px}html[data-theme="winxp"] .sidebar{background:linear-gradient(#176fd3,#0b4c9e)}html[data-theme="winxp"] .topbar{background:linear-gradient(#f8fbff,#e9f2ff)}
html[data-theme="cyberunion"]{--bg:#f4f5f7;--surface:#fff;--surface2:#f7f8fa;--text:#0b0d12;--muted:#69707d;--line:#e6e8ec;--accent:#3157ff;--accentText:#fff;--good:#08a873;--warn:#d67a00;--bad:#d92d20;--shadow:0 18px 48px rgba(17,24,39,.07);--radius:18px;--sidebar:#0b0d12;--sidebarText:#fff;--font:Inter,"Segoe UI",Arial,sans-serif;color-scheme:light}
html[data-theme="cyberunion"] body{background:radial-gradient(circle at 88% -10%,rgba(49,87,255,.11),transparent 30%),var(--bg)}
html[data-theme="cyberunion"] .auth-view{background:radial-gradient(circle at 16% 14%,rgba(49,87,255,.35),transparent 26%),radial-gradient(circle at 85% 82%,rgba(104,66,255,.24),transparent 28%),#0b0d12}
html[data-theme="cyberunion"] .auth-card{border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 90px rgba(0,0,0,.35);padding:34px;border-radius:24px}
html[data-theme="cyberunion"] .auth-card h1{font-size:30px;letter-spacing:-.035em}
html[data-theme="cyberunion"] .brand-mark{background:linear-gradient(135deg,#3157ff 0%,#6e45ff 55%,#20b8ff 100%);box-shadow:0 10px 28px rgba(49,87,255,.32);border-radius:14px}
html[data-theme="cyberunion"] .sidebar{background:linear-gradient(180deg,#090b0f 0%,#111520 100%);border-right:1px solid rgba(255,255,255,.06);padding:20px 14px}
html[data-theme="cyberunion"] .side-brand{padding:4px 8px 16px}
html[data-theme="cyberunion"] .side-brand strong{font-size:15px;letter-spacing:-.015em}
html[data-theme="cyberunion"] .side-brand small{opacity:.48}
html[data-theme="cyberunion"] .nav{gap:5px}
html[data-theme="cyberunion"] .nav button{padding:11px 12px;border-radius:12px;color:rgba(255,255,255,.72);transition:background .15s ease,color .15s ease,transform .15s ease}
html[data-theme="cyberunion"] .nav button:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
html[data-theme="cyberunion"] .nav button.active{background:#fff;color:#11141b;box-shadow:0 12px 28px rgba(0,0,0,.16);font-weight:650}
html[data-theme="cyberunion"] .side-footer{border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
html[data-theme="cyberunion"] .status-dot{background:#35e3a3;box-shadow:0 0 0 4px rgba(53,227,163,.11)}
html[data-theme="cyberunion"] .topbar{height:72px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(17,24,39,.06);box-shadow:0 4px 24px rgba(17,24,39,.035);padding:0 26px}
html[data-theme="cyberunion"] .topbar strong{letter-spacing:-.015em}
html[data-theme="cyberunion"] .content{padding:28px 30px 40px}
html[data-theme="cyberunion"] .page-head{margin-bottom:22px}
html[data-theme="cyberunion"] .page-head h1{font-size:32px;line-height:1.08;letter-spacing:-.04em;font-weight:760}
html[data-theme="cyberunion"] .page-head p{font-size:14px}
html[data-theme="cyberunion"] input,html[data-theme="cyberunion"] select{border-color:#e5e7eb;border-radius:12px;padding:10px 12px;box-shadow:0 1px 2px rgba(17,24,39,.02);outline:none}
html[data-theme="cyberunion"] input:focus,html[data-theme="cyberunion"] select:focus{border-color:rgba(49,87,255,.55);box-shadow:0 0 0 4px rgba(49,87,255,.09)}
html[data-theme="cyberunion"] .btn,html[data-theme="cyberunion"] .icon-btn{border-color:#e5e7eb;border-radius:12px;padding:9px 14px;font-weight:600;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
html[data-theme="cyberunion"] .btn:hover,html[data-theme="cyberunion"] .icon-btn:hover{transform:translateY(-1px);border-color:#cfd4dc;box-shadow:0 7px 20px rgba(17,24,39,.07)}
html[data-theme="cyberunion"] .btn.primary{background:linear-gradient(135deg,#3157ff,#5846ff);border-color:#3157ff;box-shadow:0 10px 24px rgba(49,87,255,.22)}
html[data-theme="cyberunion"] .stat,html[data-theme="cyberunion"] .panel,html[data-theme="cyberunion"] .device-card,html[data-theme="cyberunion"] .metric{border:1px solid rgba(17,24,39,.055);box-shadow:var(--shadow)}
html[data-theme="cyberunion"] .stat{padding:20px}
html[data-theme="cyberunion"] .stat span,html[data-theme="cyberunion"] .metric small{text-transform:uppercase;letter-spacing:.065em;font-size:10px;font-weight:700}
html[data-theme="cyberunion"] .stat strong{font-size:31px;letter-spacing:-.045em}
html[data-theme="cyberunion"] .panel{padding:20px}
html[data-theme="cyberunion"] .device-card{padding:17px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
html[data-theme="cyberunion"] .device-card:hover{transform:translateY(-3px);border-color:rgba(49,87,255,.2);box-shadow:0 22px 48px rgba(17,24,39,.11)}
html[data-theme="cyberunion"] .status{border-color:#eceef2;background:#fafbfc;border-radius:999px;font-weight:650}
html[data-theme="cyberunion"] .table th{font-size:10px;text-transform:uppercase;letter-spacing:.065em;font-weight:750}
html[data-theme="cyberunion"] .table td{padding-top:12px;padding-bottom:12px}
html[data-theme="cyberunion"] .problem{border-left-width:4px;border-radius:0 12px 12px 0}
@media(max-width:760px){html[data-theme="cyberunion"] .content{padding:18px 14px 30px}html[data-theme="cyberunion"] .topbar{height:64px;padding:0 12px}html[data-theme="cyberunion"] .page-head h1{font-size:27px}}
@media(max-width:1180px){.device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;width:250px;z-index:40;transition:left .18s ease}.app-shell.menu-open .sidebar{left:0}.mobile-only{display:inline-flex}.topbar{padding:0 12px}.top-actions .user-chip{display:none}.content{padding:14px}.device-grid,.stats,.metrics{grid-template-columns:1fr}.page-head{flex-direction:column}.top-actions select{max-width:135px}}