[hidden] { display: none !important; }
:root { color-scheme: light; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --soft:#f7f8fa; --blue:#0b78f0; --blue-soft:#eaf3ff; --red:#c2413b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#f4f6f8; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
.login-view { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-panel { width:min(390px,100%); padding:40px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 16px 40px rgba(31,41,55,.08); }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:12px; color:#fff; background:var(--blue); font-weight:800; letter-spacing:0; }
.brand-mark.small { width:30px; height:30px; border-radius:8px; font-size:11px; }
.eyebrow { margin:0 0 4px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:1px; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:8px; font-size:28px; letter-spacing:0; }
h2 { margin:0; font-size:22px; letter-spacing:0; }
h3 { margin:2px 0 4px; font-size:22px; overflow-wrap:anywhere; }
.muted { color:var(--muted); }
.login-panel > .muted { margin-bottom:28px; }
label { display:block; margin:16px 0 8px; color:#374151; font-weight:600; }
input,textarea { width:100%; border:1px solid #d1d5db; border-radius:6px; padding:10px 12px; outline:none; color:var(--ink); background:#fff; }
input:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,120,240,.12); }
.primary,.secondary,.danger,.icon-button,.text-button { border:0; border-radius:6px; padding:10px 14px; font-weight:650; }
.primary { color:#fff; background:var(--blue); }
.primary:hover { background:#096bd3; }
.login-panel .primary { width:100%; margin-top:22px; }
.secondary { color:#374151; background:#eef0f3; }
.secondary:hover { background:#e2e5e9; }
.danger { color:var(--red); background:#fff0ef; }
.text-button { padding:8px 0; color:var(--muted); background:transparent; }
.text-button:hover { color:var(--ink); }
.error { min-height:21px; margin:12px 0 0; color:var(--red); }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:230px; display:flex; flex-direction:column; padding:24px 16px; border-right:1px solid var(--line); background:#fff; }
.brand { display:flex; align-items:center; gap:10px; padding:0 10px 28px; font-size:16px; font-weight:750; }
.account { display:flex; align-items:center; gap:10px; padding:12px 10px; border:1px solid var(--line); border-radius:8px; background:var(--soft); }
.avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; background:#1f9d73; font-weight:700; }
.account strong,.account small { display:block; }
.account small { margin-top:2px; color:var(--muted); font-size:12px; }
nav { display:grid; gap:5px; margin-top:24px; }
.nav-item { border:0; border-radius:6px; padding:11px 12px; text-align:left; color:#5b6472; background:transparent; }
.nav-item span { display:inline-block; width:24px; color:#7b8797; font-size:18px; vertical-align:-1px; }
.nav-item.active { color:var(--blue); background:var(--blue-soft); font-weight:700; }
.nav-item.active span { color:var(--blue); }
.sidebar-bottom { margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--line); }
.workspace { flex:1; min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:100px; padding:26px 32px 20px; border-bottom:1px solid var(--line); background:#fff; }
.count { display:inline-grid; place-items:center; min-width:27px; height:22px; margin-left:6px; padding:0 7px; border-radius:12px; color:var(--blue); background:var(--blue-soft); font-size:12px; vertical-align:3px; }
.top-actions { display:flex; align-items:center; gap:14px; }
.icon-button { width:38px; height:38px; padding:0; color:#374151; background:#eef0f3; font-size:22px; }
.toolbar { display:flex; gap:10px; padding:18px 32px; border-bottom:1px solid var(--line); background:#fff; }
.search { display:flex; align-items:center; gap:8px; max-width:560px; flex:1; margin:0; padding:0 12px; border:1px solid #d1d5db; border-radius:22px; font-weight:400; }
.search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,120,240,.12); }
.search span { color:var(--muted); font-size:22px; }
.search input { border:0; padding:9px 0; box-shadow:none; }
.content-grid { display:grid; grid-template-columns:minmax(360px, 1fr) minmax(340px, 460px); min-height:calc(100vh - 167px); }
.device-list-panel { min-width:0; border-right:1px solid var(--line); background:#fff; }
.device-list { padding:8px 0; }
.device-row { display:flex; align-items:center; gap:12px; width:100%; min-height:70px; border:0; border-bottom:1px solid #f0f1f2; padding:12px 26px; text-align:left; color:var(--ink); background:#fff; }
.device-row:hover,.device-row.selected { background:#f6f9fd; }
.device-row.selected { box-shadow:inset 3px 0 0 var(--blue); }
.status-dot { width:10px; height:10px; flex:none; border-radius:50%; background:#32b56a; }
.device-icon { display:grid; place-items:center; width:30px; height:30px; border:1px solid #b7c2d0; border-radius:7px; color:#607080; font-size:17px; }
.device-copy { min-width:0; flex:1; }
.device-copy strong,.device-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-copy small { margin-top:3px; color:var(--muted); font-size:12px; }
.star { color:#f2a500; font-size:16px; }
.empty-state { display:grid; gap:6px; place-items:center; padding:100px 30px; color:var(--muted); text-align:center; }
.empty-state strong { color:var(--ink); font-size:16px; }
.detail-panel { padding:32px; background:#fbfcfd; }
.detail-empty { display:grid; place-items:center; min-height:300px; color:var(--muted); }
.detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.online-label { color:#23834d; font-size:12px; }
.online-label i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#32b56a; }
.facts { display:grid; gap:0; margin:0; padding:4px 0 18px; border-bottom:1px solid var(--line); }
.facts div { display:flex; justify-content:space-between; gap:20px; padding:11px 0; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.field { margin-top:20px; }
.field span { display:block; margin-bottom:7px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.detail-actions .primary { order:-1; }
#detail-message { min-height:21px; margin:12px 0 0; }
@media (max-width: 820px) { .sidebar { width:70px; padding:16px 10px; } .brand { justify-content:center; padding:0 0 22px; } .brand > span:last-child,.account div,.nav-item:not(.active)::after,.nav-item { font-size:0; } .account { justify-content:center; padding:10px 0; } .nav-item { padding:10px 0; text-align:center; } .nav-item span { width:auto; font-size:20px; } .sidebar-bottom { padding:12px 0 0; text-align:center; } .text-button { font-size:0; } .text-button::before { content:'⇥'; font-size:20px; } .topbar,.toolbar { padding-left:18px; padding-right:18px; } .content-grid { grid-template-columns:1fr; } .detail-panel { border-top:1px solid var(--line); } }