:root{font-family:Inter,"Microsoft YaHei UI","Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.55;color:#273149;background:#f6f7fc;font-synthesis:none;text-rendering:optimizeLegibility;--primary:#526bc0;--primary-hover:#3e56ad;--violet:#8069be;--accent-gradient:linear-gradient(112deg,#5876cc 0%,#6b70c9 54%,#8069be 100%);--surface:#fff;--surface-subtle:#f8f9fd;--text:#273149;--muted:#536078;--border:#e3e7f1;--border-strong:#cbd5e9;--success:#16865c;--warning:#9a5809;--danger:#b93243;--focus:#6765d4;--shadow:0 8px 26px rgba(70,76,151,.075);--radius-control:14px;--radius-card:18px;--radius-panel:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button,select,input{touch-action:manipulation}a{color:inherit}svg{width:20px;height:20px;flex:none}h1,h2,h3,p{margin-top:0}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 38%,transparent);outline-offset:2px}[hidden]{display:none!important}.skip-link{position:fixed;left:14px;top:-80px;z-index:100;background:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow)}.skip-link:focus{top:12px}
.app-shell{display:grid;grid-template-columns:204px minmax(0,1fr);min-height:100dvh;background:radial-gradient(ellipse at 93% 2%,rgba(209,217,255,.28),transparent 42%),radial-gradient(ellipse at 47% 92%,rgba(230,219,255,.20),transparent 48%),#f6f7fc}
.sidebar{position:sticky;top:0;display:flex;flex-direction:column;height:100dvh;padding:20px 14px 16px;background:radial-gradient(ellipse at 0 0,rgba(246,249,255,.42),transparent 48%),linear-gradient(165deg,#d7e1f5 0%,#dde2f2 53%,#e4d8f1 100%);border-right:1px solid rgba(139,155,197,.27)}.brand{display:flex;align-items:center;gap:9px;padding:0 8px 24px}.brand-mark{width:36px;height:36px;display:grid;place-items:center;flex:none;color:#fff;background:var(--accent-gradient);border:1px solid #7778dc;box-shadow:0 5px 14px rgba(92,91,192,.18);border-radius:11px}.brand-mark svg{width:22px;height:22px}.brand strong,.brand span{display:block}.brand strong{font-size:15px;letter-spacing:.01em}.brand span{margin-top:2px;font-size:11px;color:#536078}.nav-item{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-control);text-decoration:none;color:#fff;background:var(--accent-gradient);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 7px 18px rgba(84,91,173,.18);font-weight:650}.sidebar-note{display:flex;gap:9px;margin-top:26px;padding:14px 11px;color:#43516b;background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.62);border-radius:var(--radius-card)}.sidebar-note-dot,.mode-dot{width:8px;height:8px;flex:none;margin-top:6px;border-radius:50%;background:#6d77d6;box-shadow:0 0 0 3px rgba(109,119,214,.14)}.sidebar-note strong{font-size:12px}.sidebar-note p{margin:4px 0 0;font-size:11px;line-height:1.6}.sidebar-bottom{margin-top:auto;padding:14px 8px 0;color:#596680;font-size:11px;line-height:1.7}
.main-content{width:min(100%,1220px);margin:0 auto;padding:32px clamp(20px,3vw,42px) 26px}.page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.eyebrow{margin:0 0 6px;color:var(--primary);font-size:11px;font-weight:750;letter-spacing:.12em}.page-header h1{margin:0 0 6px;color:#202640;font-size:clamp(25px,2.6vw,31px);line-height:1.2;letter-spacing:-.025em}.intro{margin:0;color:var(--muted);font-size:13px}.mode-badge{display:inline-flex;align-items:center;gap:9px;flex:none;padding:9px 12px;color:#464f91;background:#edf0fc;border:1px solid #d6def5;border-radius:999px;font-size:12px;font-weight:650}.mode-dot{margin:0}.demo-banner{display:flex;align-items:flex-start;gap:12px;padding:14px 17px;margin-bottom:22px;background:#f0f3ff;border:1px solid #dbe3fa;border-radius:var(--radius-card);color:#415084}.demo-banner>svg{margin-top:2px;color:#5969bd}.demo-banner h2{margin:0 0 3px;font-size:14px;color:#303d79}.demo-banner p{margin:0;font-size:12px;line-height:1.55}
.overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.metric-card{padding:17px 19px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow)}.metric-label{color:#4b5871;font-size:12px;font-weight:650}.metric-value{margin:4px 0;color:#253355;font-size:28px;font-weight:750;line-height:1.25;font-variant-numeric:tabular-nums}.metric-hint{color:#69758d;font-size:11px}
.list-panel{overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-panel);box-shadow:var(--shadow)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 24px 16px}.panel-heading h2{margin:0 0 3px;color:#25304c;font-size:19px;line-height:1.3}.panel-heading p:last-child{margin:0;color:var(--muted);font-size:12px}.text-button{min-height:42px;padding:8px 10px;border:0;border-radius:10px;color:var(--primary);background:transparent;font-size:12px;font-weight:650;white-space:nowrap}.text-button:hover{background:#eff2fd}.toolbar{display:flex;align-items:end;gap:12px;padding:14px 24px 18px;border-bottom:1px solid var(--border)}.toolbar label,.field label{display:block;margin-bottom:6px;color:#43516a;font-size:12px;font-weight:650}.search-wrap{width:min(360px,100%)}.filter-wrap{width:158px}.input-with-icon{position:relative}.input-with-icon svg{position:absolute;left:13px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:#74819a;pointer-events:none}.input-with-icon input{padding-left:40px!important}input[type=search],input[type=text],input[type=number],select{width:100%;min-height:42px;padding:9px 12px;color:var(--text);background:#fff;border:1px solid var(--border-strong);border-radius:11px}input::placeholder{color:#78849b}input:hover,select:hover{border-color:#a9b8d9}.result-count{margin-left:auto;padding-bottom:9px;color:#66748d;font-size:12px;white-space:nowrap}
.device-list{padding:0 11px}.device-row{display:grid;grid-template-columns:minmax(210px,1.35fr) minmax(190px,1.2fr) minmax(132px,.9fr) minmax(150px,.9fr) auto;gap:14px;align-items:center;min-height:103px;padding:14px 13px;border-bottom:1px solid #edf0f6}.device-row:last-child{border-bottom:0}.device-row:hover{background:#fafbff;border-radius:13px}.device-identity{display:flex;align-items:center;gap:12px;min-width:0}.device-avatar{display:grid;place-items:center;width:39px;height:39px;flex:none;color:#5869b8;background:#edf1fc;border:1px solid #e0e7f9;border-radius:12px}.device-avatar svg{width:21px;height:21px}.device-name{font-size:14px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}.device-owner{margin-top:5px;color:#66748b;font-size:12px;overflow-wrap:anywhere}.cell-label{display:block;margin-bottom:4px;color:#7a859b;font-size:11px}.machine-code{font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;color:#3d4a66;overflow-wrap:anywhere}.date-text{font-size:12px;color:#3d4a66;font-variant-numeric:tabular-nums;white-space:nowrap}.sub-text{display:block;margin-top:4px;color:#77849a;font-size:11px}.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;font-size:11px;font-weight:700;border-radius:999px;white-space:nowrap}.status-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.status-active{color:#147752;background:#e7f6ef}.status-expiring{color:#8b500a;background:#fff3dc}.status-expired{color:#835f3b;background:#f4eee7}.status-disabled{color:#ae3546;background:#fcebee}.status-unlicensed{color:#5c6a80;background:#eff1f5}.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap;width:190px}.action-button{min-height:37px;padding:7px 8px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--primary);font-size:11px;font-weight:650;white-space:nowrap}.action-button:hover{background:#eff2fd}.action-button.danger{color:var(--danger)}.action-button.danger:hover{background:#fff0f1}.action-button:disabled{opacity:.4}.empty-state{text-align:center;padding:55px 16px 60px}.empty-art{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;background:#f1f3fa;border-radius:16px;font-size:36px;color:#8a97b4;line-height:1}.empty-state h3{margin:0 0 3px;font-size:16px}.empty-state p{margin:0 0 15px;color:var(--muted);font-size:12px}.page-footer{text-align:center;padding-top:22px;color:#7b869c;font-size:11px}
.action-dialog{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px 24px 24px;border:1px solid #dce2f1;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(35,43,92,.23);color:var(--text)}.action-dialog::backdrop{background:rgba(30,38,67,.40);backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head .eyebrow{margin:0}.icon-button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:#f3f5fb;color:#58647b;font-size:26px;line-height:1}.icon-button:hover{background:#e9edf8}.action-dialog h2{margin:8px 0 6px;color:#202640;font-size:21px}.dialog-description{margin:0 0 20px;color:#56637b;font-size:13px;line-height:1.65}.action-dialog fieldset{margin:0;padding:0;border:0}.action-dialog legend{margin-bottom:10px;font-size:12px;font-weight:700;color:#43516a}.duration-options{display:flex;flex-wrap:wrap;gap:8px}.duration-options label{position:relative;cursor:pointer}.duration-options input{position:absolute;opacity:0;width:1px;height:1px}.duration-options span{display:grid;place-items:center;min-width:68px;min-height:40px;padding:7px 10px;border:1px solid var(--border-strong);border-radius:10px;color:#43516a;font-size:12px;font-weight:650}.duration-options input:checked+span{color:#435ab1;background:#eef2ff;border-color:#a7b6e6;box-shadow:inset 0 0 0 1px #b7c4eb}.duration-options input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--focus) 38%,transparent);outline-offset:2px}.field{margin-top:17px}.field-hint{margin:5px 0 0;color:#758198;font-size:11px}.preview-box,.confirm-box{margin-top:18px;padding:12px 14px;border:1px solid #e0e7f7;border-radius:12px;background:#f7f9ff;color:#465476;font-size:12px;line-height:1.6}.confirm-box{border-color:#f3d8dd;background:#fff5f6;color:#7e3140}.form-error{margin:12px 0 0;color:var(--danger);font-size:12px;font-weight:650}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:23px}.primary-button,.secondary-button{min-height:42px;padding:9px 16px;border-radius:11px;font-size:12px;font-weight:700}.primary-button{color:#fff;border:1px solid #6472c8;background:var(--accent-gradient);box-shadow:0 5px 13px rgba(92,91,192,.15)}.primary-button:hover{filter:brightness(.95)}.primary-button.danger-button{background:#b93243;border-color:#b93243;box-shadow:none}.primary-button.danger-button:hover{background:#9e2837}.secondary-button{color:#405071;background:#fff;border:1px solid var(--border-strong)}.secondary-button:hover{background:#f7f8fc}.toast{position:fixed;right:22px;bottom:22px;z-index:50;max-width:min(430px,calc(100% - 44px));padding:12px 16px;background:#263553;color:#fff;border-radius:12px;box-shadow:0 12px 28px rgba(25,34,74,.22);font-size:13px}
@media(max-width:1170px){.device-row{grid-template-columns:minmax(200px,1.3fr) minmax(170px,1fr) minmax(125px,.8fr) minmax(130px,.8fr)}.row-actions{grid-column:1/-1;width:auto;justify-content:flex-start;margin:-5px 0 0 48px}.device-row{gap:10px}}
@media(max-width:800px){.app-shell{display:block}.sidebar{position:static;height:auto;min-height:0;padding:14px 18px;flex-direction:row;align-items:center;gap:18px}.brand{padding:0}.sidebar nav{margin-left:auto}.sidebar-note,.sidebar-bottom{display:none}.main-content{padding:23px 18px}.page-header{align-items:flex-start}.overview{grid-template-columns:repeat(2,minmax(0,1fr))}.device-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.row-actions{grid-column:1/-1;margin:0}.device-identity{grid-column:1/-1}}
@media(max-width:560px){.sidebar{gap:10px}.brand span{display:none}.nav-item{font-size:12px;padding:0 10px;gap:6px}.nav-item svg{width:17px;height:17px}.page-header{display:block}.mode-badge{margin-top:14px}.toolbar{flex-wrap:wrap;padding:14px 16px}.search-wrap{width:100%}.filter-wrap{flex:1;min-width:145px}.result-count{margin-left:0}.panel-heading{padding:18px 16px 10px}.panel-heading p:last-child{max-width:220px}.metric-card{padding:14px 15px}.device-list{padding:0 7px}.device-row{padding:16px 9px}.date-text{white-space:normal}.row-actions{gap:2px}.action-button{min-height:42px;padding:7px 8px}.action-dialog{padding:18px}.duration-options span{min-width:64px}}
.text-button,.action-button,.icon-button,.duration-options span,input[type=search],input[type=text],input[type=password],input[type=url],input[type=number],select{min-height:44px}.icon-button{width:44px}.empty-art svg{width:27px;height:27px}.license-label{margin-top:9px}
.connection-panel{margin-bottom:22px;padding:18px 21px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow)}.connection-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.connection-top h2{margin:0;font-size:16px;color:#25304c}.mode-switch{display:inline-flex;gap:4px;padding:4px;background:#f0f2f9;border:1px solid #e3e7f1;border-radius:13px}.mode-button{min-height:38px;padding:7px 14px;color:#536079;border:0;border-radius:10px;background:transparent;font-size:12px;font-weight:700}.mode-button.selected{color:#fff;background:var(--accent-gradient);box-shadow:0 3px 9px rgba(92,91,192,.17)}.connection-hint{margin:16px 0 0;color:#56647c;font-size:12px}.connection-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:830px}.connection-fields .field{margin-top:13px}.connection-fields input{width:100%;padding:9px 12px;border:1px solid var(--border-strong);border-radius:11px;background:#fff;color:var(--text)}.connection-fields input::placeholder{color:#78849b}.connection-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}.connection-status{margin:11px 0 0;color:#536078;font-size:12px}.connection-panel code{font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#43516a}.status-cancelled{color:#795f87;background:#f2edf6}
@media(max-width:560px){.connection-panel{padding:16px}.connection-top{align-items:flex-start;flex-direction:column}.connection-fields{grid-template-columns:1fr;gap:0}.mode-button{min-height:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(forced-colors:active){.status-pill,.mode-badge,.nav-item{border:1px solid currentColor}.duration-options input:checked+span{outline:2px solid Highlight}}
.register-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 24px 16px;border-bottom:1px solid var(--border)}.register-form[hidden]{display:none}.register-form label{font-size:12px;font-weight:700;color:#43516a}.register-form input{width:min(340px,100%);font-family:ui-monospace,Consolas,monospace;text-transform:uppercase}.register-form small{flex:1 1 100%;color:var(--muted)}.register-form .form-error{flex:1 1 100%;margin:0}@media(max-width:560px){.register-form{padding:0 16px 16px}.register-form input{width:100%}}
.sidebar nav{display:grid;gap:8px}.sidebar .nav-item{width:100%;justify-content:flex-start;text-align:left;color:#455370;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.55);box-shadow:none}.sidebar .nav-item.active{color:#fff;background:var(--accent-gradient);box-shadow:0 7px 18px rgba(84,91,173,.18)}.sidebar .nav-item:hover:not(.active){background:#fff;color:#344fb0}.sidebar-note{margin-top:18px}.real-mode .demo-banner,.real-mode .sidebar-bottom,.real-mode .page-footer{display:none}.real-mode .page-header{margin-bottom:20px}.connection-panel{padding:16px 20px}.connection-top-actions{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.connection-top .connection-status{margin:3px 0 0}.connection-panel #realSetup:has(#connectionForm[hidden])>.connection-hint,.connection-panel #realSetup:has(#connectionForm[hidden])>#connectionStatus{display:none}.connection-panel #realSetup:has(#connectionForm[hidden]){display:none}.remember-option{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:#536078}.remember-option input{width:16px;height:16px;accent-color:var(--primary)}.panel-actions{display:flex;align-items:center;gap:8px}.panel-heading .primary-button{min-height:40px}.page-header .intro{margin-bottom:0}@media(max-width:560px){.connection-top{align-items:flex-start;gap:8px}.connection-top-actions{justify-content:flex-end}.panel-actions{flex-wrap:wrap;justify-content:flex-end}}
.real-mode .main-content{display:flex;flex-direction:column}.real-mode .page-header{order:0}.real-mode .connection-panel{order:1;margin-bottom:16px}.real-mode .list-panel{order:2}.real-mode .overview{order:3;margin:16px 0 0}.real-mode .connection-top .connection-status,.real-mode #connectionStatus,.real-mode #listDescription,.real-mode .empty-state p{display:none}.real-mode .empty-state{padding:30px 16px 36px}.real-mode .overview .metric-card{padding:13px 16px}.real-mode .overview .metric-value{font-size:24px}