:root{--bg:#f6f8fa;--surface:#fff;--border:#dce2e8;--primary:#2563eb;--text:#202936;--muted:#667085;--success:#16834a;--warning:#a4610b;--danger:#c03232;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--r1:4px;--r2:6px;--r3:8px;--r4:12px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}button,input,select,textarea{font:inherit;color:inherit}button,summary{cursor:pointer}a{color:var(--primary);text-decoration:none}img{vertical-align:middle;flex-shrink:0}h1,h2,p{margin:0}h1{font-size:22px;font-weight:600}h2{font-size:16px;font-weight:600}[hidden]{display:none!important}.muted,.breadcrumb{color:var(--muted);font-size:12px}.breadcrumb{margin-bottom:var(--s2)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}button:disabled{opacity:.5;cursor:default}
.app-topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 var(--s6);gap:var(--s6);position:sticky;top:0;z-index:20}.app-brand{display:flex;align-items:center;gap:var(--s3);font-weight:600;font-size:16px;color:var(--text)}.topbar-context{display:flex;align-items:center;gap:var(--s4);margin-left:auto;font-size:13px}.admin-menu{position:relative;border-left:1px solid var(--border);padding-left:var(--s6)}summary{list-style:none}summary::-webkit-details-marker{display:none}.admin-menu>summary{display:flex;gap:var(--s2);align-items:center;height:34px}.admin-dropdown,.user-picker,.row-menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);box-shadow:0 4px 16px #2029361f;padding:var(--s2);z-index:30}.admin-dropdown{position:absolute;right:0;top:42px;min-width:160px;display:grid;gap:var(--s2)}.admin-dropdown>.muted{padding:var(--s2)}
.app{display:flex;min-height:calc(100vh - 56px)}.sidebar{width:184px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:var(--s6) var(--s3);display:flex;flex-direction:column}.nav-label{font-size:12px;color:var(--muted);padding:0 var(--s3);margin-bottom:var(--s3)}.nav{display:grid;gap:var(--s1)}.nav a{display:flex;align-items:center;gap:var(--s3);min-height:40px;padding:var(--s2) var(--s3);color:#465365;border-radius:var(--r2)}.nav a.active{background:#edf3ff;color:var(--primary);font-weight:600}.sidebar-foot{display:flex;align-items:center;gap:var(--s2);margin-top:auto;padding:var(--s6) var(--s2) 0;color:var(--muted);font-size:12px}.main{min-width:0;flex:1;padding:var(--s6)}.page-heading,.section-heading,.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5)}.page-heading>.btn{align-self:flex-end}
.btn{border:1px solid var(--primary);border-radius:var(--r2);background:var(--primary);color:white;height:34px;padding:0 var(--s3);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);white-space:nowrap;font-size:13px;font-weight:500}.btn img{width:16px;height:16px}.btn:not(.gray):not(.ghost):not(.text-action) img{filter:brightness(0) invert(1)}.btn.gray{background:white;border-color:var(--border);color:var(--text)}.btn.ghost,.btn.text-action{background:transparent;border-color:transparent;color:var(--muted)}.btn.text-action{color:var(--primary);padding:0 var(--s2)}.btn:hover:not(:disabled){filter:brightness(.97)}.btn.ghost:hover,.btn.text-action:hover{background:#f0f3f7}.btn.danger-text{color:var(--danger)}.btn.icon-button{width:32px;padding:0}input,select,textarea{border:1px solid var(--border);border-radius:var(--r2);background:white;padding:0 var(--s3);height:34px;min-width:0}input::placeholder{color:#818b99}input[type=search]{appearance:none}select{padding-right:var(--s2)}
.workspace{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3)}.toolbar{padding:var(--s4);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;border-bottom:1px solid var(--border)}.search-field{position:relative;flex:0 1 260px}.search-field img{position:absolute;left:12px;top:9px;opacity:.6}.search-field input{padding-left:36px;width:100%}.filter-field{display:flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--muted)}.filter-field select{max-width:220px;color:var(--text)}.toolbar-actions{display:flex;gap:var(--s2);margin-left:auto}.user-context{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);min-height:48px}.user-context h2{font-size:14px}.user-context #user-actions{display:flex;gap:var(--s1);margin-left:auto}.user-context .btn{height:30px;border-color:transparent;background:transparent;color:var(--muted)}.user-list{position:relative}.user-picker{position:absolute;top:42px;right:0;width:260px}.user-picker>label{font-size:12px;color:var(--muted)}#user-search{width:100%;margin:var(--s2) 0}#users{max-height:260px;overflow:auto}.user-choice{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);border:0;background:transparent;width:100%;padding:var(--s3);text-align:left;border-radius:var(--r1);font-size:13px}.user-choice[aria-pressed=true]{background:#edf3ff;color:var(--primary)}.user-choice small{font-size:12px;color:var(--muted)}
.table-wrap{overflow:auto;min-height:224px}.table{border-collapse:collapse;width:100%;min-width:980px;font-size:13px}.table th{height:42px;font-size:12px;font-weight:500;color:#596779;text-align:left;background:#f7f9fb;border-top:1px solid var(--border);border-bottom:1px solid var(--border);white-space:nowrap}.table th,.table td{padding:var(--s3) var(--s4)}.table td{height:56px;border-bottom:1px solid #e9edf1;vertical-align:middle}.table tbody tr:last-child td{border-bottom:0}.table tbody tr:hover{background:#fafbfc}.table th:first-child{width:19%}.table td:first-child{font-weight:500}.table .numeric{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.table td:last-child{white-space:nowrap;width:150px}.table td:nth-child(7){font-size:12px;color:var(--muted)}.table-footer{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4);border-top:1px solid var(--border)}.traffic-summary{border-top:1px solid var(--border);padding:var(--s3) var(--s4);line-height:1.8}#device-note{padding:0 var(--s4) var(--s3);font-size:12px}.row-actions{display:flex;align-items:center;gap:var(--s1)}.row-menu{position:fixed;inset:auto;margin:0;min-width:210px;max-width:calc(100vw - 32px)}.row-menu .btn{display:flex;justify-content:flex-start;width:100%;border:0;background:transparent;color:var(--text);padding:0 var(--s3)}.row-menu .btn:hover{background:#f3f5f7}.row-menu .danger-text{color:var(--danger)}.row-menu .menu-note{padding:var(--s2) var(--s3);font-size:12px;color:var(--muted);white-space:normal;border-bottom:1px solid var(--border);margin-bottom:var(--s1)}.status{display:inline-block;padding:2px var(--s2);border-radius:var(--r1);font-size:12px;background:#f0f2f5;color:#626d7c}.status.enabled{background:#eaf7ef;color:var(--success)}.presence{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap;font-size:13px}.presence:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#8d98a7}.presence.online:before{background:var(--success)}.presence.warning:before{background:var(--warning)}.warning-text{color:var(--warning);font-size:12px;display:block;font-weight:400;margin-top:var(--s1)}
.panel-operations{margin-top:var(--s6);border-top:1px solid var(--border);padding-top:var(--s4)}.panel-operations .section-heading{margin-bottom:var(--s3)}.panel-operations .section-heading .btn{border:0;background:transparent;color:var(--muted)}.ops-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:white}.ops-grid>div{padding:var(--s4);border-right:1px solid var(--border)}.ops-grid>div:last-child{border:0}.ops-grid strong{font-size:12px;font-weight:500;color:var(--muted)}.ops-grid p{font-size:13px;margin-top:var(--s2);overflow-wrap:anywhere}.alert,#message:not([hidden]){padding:var(--s3);border:1px solid var(--border);background:#fff;margin-bottom:var(--s4);font-size:13px}.danger-text,#editor-error{color:var(--danger)}
dialog{border:1px solid var(--border);border-radius:var(--r3);padding:var(--s6);width:min(460px,calc(100% - 32px));color:var(--text);box-shadow:0 8px 32px #20293629}dialog::backdrop{background:#20293666}dialog h2{margin-bottom:var(--s3)}dialog p{font-size:13px;color:var(--muted);margin-bottom:var(--s4)}dialog label{display:block;font-size:13px;margin-bottom:var(--s2)}dialog input,dialog textarea{width:100%;margin-bottom:var(--s4)}dialog textarea{height:88px;padding:var(--s2)}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s5)}#subscription{width:min(520px,calc(100% - 32px))}#subscription-url{font-family:ui-monospace,monospace;font-size:12px}#subscription-qr{display:block;width:220px;height:220px;margin:var(--s5) auto;background:white}#subscription .section-heading{align-items:flex-start}
.row-menu{width:260px}.table .empty-state{text-align:center;color:var(--muted);font-weight:400}.table-wrap{min-height:0}
.overview-meta{display:flex;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5)}.overview-content{display:grid;gap:var(--s5)}.overview-section{min-width:0}.overview-section h2{margin-bottom:var(--s3)}.resource-strip,.network-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border-block:1px solid var(--border)}.network-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.resource-metric{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2);border-right:1px solid var(--border);min-width:0}.resource-metric:last-child{border-right:0}.resource-metric strong{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.resource-metric progress{appearance:none;border:0;border-radius:var(--r1);height:6px;width:100%;background:#e8edf2;overflow:hidden;accent-color:var(--primary)}.resource-metric progress::-webkit-progress-bar{background:#e8edf2}.resource-metric progress::-webkit-progress-value{background:var(--primary)}.resource-metric progress::-moz-progress-bar{background:var(--primary)}.overview-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}.info-list{margin:0;background:var(--surface);border-block:1px solid var(--border)}.info-list>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--s4);align-items:center;min-height:40px;padding:var(--s2) var(--s4);border-bottom:1px solid #e9edf1}.info-list>div:last-child{border-bottom:0}.info-list dt{font-size:13px;color:var(--muted)}.info-list dd{margin:0;font-size:13px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.section-note{padding:var(--s3) 0 0}.overview-footnote{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border);line-height:1.8}
.login-page{min-height:100vh}.login-topbar{height:56px;border-bottom:1px solid var(--border);background:var(--surface);padding:0 var(--s6);display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}.login-main{min-height:calc(100vh - 56px);display:grid;place-items:center;padding:var(--s6)}.login-panel{width:360px;max-width:100%;border:1px solid var(--border);border-radius:var(--r3);background:var(--surface);padding:var(--s8);margin-bottom:80px}.login-heading{margin-bottom:var(--s6)}.login-heading h1{font-size:20px;margin-bottom:var(--s2)}#login label{display:block;font-size:13px;margin-bottom:var(--s2)}#login input{width:100%;margin-bottom:var(--s5)}#login .btn{width:100%}#login #message{border-color:#edc7c7;color:var(--danger);font-size:13px;margin-bottom:var(--s4);overflow-wrap:anywhere}.login-access{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--border);text-align:center}
.login-panel{margin-bottom:var(--s8)}.presence.error{color:var(--danger)}.presence.error:before{background:var(--danger)}
@media(max-width:1100px){.ops-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-grid>div{border-bottom:1px solid var(--border)}.toolbar-actions{margin-left:0}}
@media(max-width:760px){.app-topbar{padding:0 var(--s4);gap:var(--s3)}.app-brand{font-size:14px}.topbar-context{display:none}.admin-menu{margin-left:auto;padding-left:var(--s3)}.app{display:block}.sidebar{width:auto;padding:var(--s2) var(--s4);border-right:0;border-bottom:1px solid var(--border)}.nav-label,.sidebar-foot{display:none}.nav{display:flex;gap:var(--s2)}.nav a{font-size:13px;padding:var(--s2);min-height:36px}.main{padding:var(--s4)}.page-heading{gap:var(--s2)}h1{font-size:20px}.toolbar{padding:var(--s3);gap:var(--s2)}.search-field{flex-basis:100%}.filter-field select{max-width:150px}.user-context{flex-wrap:wrap}.user-context #user-actions{margin-left:0}.table-footer{flex-wrap:wrap}.ops-grid,.overview-grid{grid-template-columns:1fr}.ops-grid>div{border-right:0}.user-picker{left:0;right:auto}.overview-card{padding:var(--s4)}}
@media(max-width:760px){.overview-meta{flex-wrap:wrap;gap:var(--s2)}.overview-columns{grid-template-columns:1fr;gap:var(--s5)}.resource-strip{grid-template-columns:1fr}.network-strip{grid-template-columns:1fr 1fr}.resource-metric{border-bottom:1px solid var(--border);padding:var(--s3) var(--s4)}.resource-strip .resource-metric{border-right:0}.resource-metric:last-child{border-bottom:0}.info-list>div{grid-template-columns:100px minmax(0,1fr);gap:var(--s3)}.login-topbar{padding:0 var(--s4)}.login-topbar>.muted{display:none}.login-main{padding:var(--s4)}.login-panel{padding:var(--s6);margin-bottom:var(--s8)}}