:root{color-scheme:dark;--bg:#0b0d14;--sidebar:#10131d;--surface:#151924;--surface-2:#1b202d;--line:#292f3f;--text:#f5f6fb;--muted:#8d94a7;--purple:#7457ff;--purple-2:#9b87ff;--green:#38c77b;--red:#f0626e;--amber:#f2aa45;--blue:#4e9dff;--radius:15px;font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 72% -20%,#252046 0,transparent 32%),var(--bg);color:var(--text);min-width:1080px}
.app-shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:24px 16px;background:linear-gradient(180deg,#121621,#0d1018);border-right:1px solid #222736;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 28px}
.brand-mark,.login-logo{display:grid;place-items:center;background:linear-gradient(145deg,#8066ff,#5134dd);box-shadow:0 8px 24px #5e41e84d;color:#fff;font-weight:800}
.brand-mark{width:38px;height:38px;border-radius:11px}
.brand-logo{display:block;object-fit:contain;background:transparent;padding:0}
.brand strong,.brand span{display:block}
.brand strong{font-size:15px}
.brand span{font-size:11px;color:var(--muted);margin-top:3px}
.nav-item{width:100%;border:0;background:transparent;color:#aeb4c4;padding:12px 14px;border-radius:10px;text-align:left;font-size:14px;margin:3px 0;cursor:pointer;transition:.2s}
.nav-item:hover{background:#1a1f2d;color:#fff}
.nav-item.active{background:linear-gradient(90deg,#6f54ef33,#6f54ef14);color:#c8beff;box-shadow:inset 3px 0 #795eff}
.nav-icon{display:inline-block;width:24px;font-size:17px}
.sidebar-foot{margin-top:auto;border-top:1px solid #252a38;padding:20px 8px 0;display:flex;gap:10px;align-items:center}
.server-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #38c77b17}
.sidebar-foot strong,.sidebar-foot small{display:block}
.sidebar-foot strong{font-size:12px}
.sidebar-foot small{font-size:10px;color:var(--muted);margin-top:3px}
main{min-width:0}
.topbar{height:89px;border-bottom:1px solid #222735;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#0e1119cc;backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}
.eyebrow{font-size:9px;letter-spacing:1.8px;color:#7f879b;margin:0 0 5px}
.topbar h1{font-size:21px;margin:0}
.top-actions,.admin-chip{display:flex;align-items:center}
.top-actions{gap:14px}
.icon-button,.modal-close{border:1px solid var(--line);background:#161a25;color:#c9ceda;cursor:pointer}
.icon-button{width:36px;height:36px;border-radius:10px;font-size:18px}
.admin-chip{gap:10px;border-left:1px solid var(--line);padding-left:15px}
.admin-chip>span{width:34px;height:34px;border-radius:10px;background:#28223f;color:#aa97ff;display:grid;place-items:center;font-weight:700}
.admin-chip strong,.admin-chip small{display:block;font-size:11px}
.admin-chip small{color:var(--muted);margin-top:2px}
.workspace{padding:28px 34px 50px}
.hidden{display:none!important}
.view{display:none}
.view.active{display:block}
.welcome-panel{min-height:156px;padding:28px 30px;border:1px solid #3a3260;border-radius:18px;background:linear-gradient(115deg,#262043 0%,#191a2b 58%,#151924 100%);display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.welcome-panel:after{content:"KQD";position:absolute;right:170px;font-weight:900;font-size:110px;letter-spacing:-9px;color:#ffffff06;transform:rotate(-8deg)}
.welcome-panel h2{font-size:24px;margin:13px 0 7px}
.welcome-panel p{font-size:13px;color:#aeb4c4;margin:0}
.status-pill{font-size:10px;color:#9be4ba;background:#16372999;padding:6px 10px;border:1px solid #2b6546;border-radius:99px}
.status-pill i{display:inline-block;width:6px;height:6px;background:#3bd17f;border-radius:50%;margin-right:6px}
.primary-button,.secondary-button{height:40px;padding:0 17px;border-radius:10px;border:1px solid transparent;font-size:13px;font-weight:650;cursor:pointer}
.primary-button{color:#fff;background:linear-gradient(135deg,#8064ff,#6042e5);box-shadow:0 8px 24px #6446e536}
.primary-button:hover{filter:brightness(1.08)}
.secondary-button{color:#c8cddb;background:#1b202c;border-color:#313747}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.stat-card{padding:19px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#181c28,#131722);position:relative}
.stat-card:after{content:"";position:absolute;inset:auto 0 0;height:2px;border-radius:2px;background:var(--accent);opacity:.65}
.stat-card.violet{--accent:var(--purple)}
.stat-card.blue{--accent:var(--blue)}
.stat-card.green{--accent:var(--green)}
.stat-card.amber{--accent:var(--amber)}
.stat-icon{float:right;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);display:grid;place-items:center}
.stat-card p{font-size:11px;color:#929aad;margin:1px 0 10px}
.stat-card strong{display:block;font-size:28px}
.stat-card small{font-size:10px;color:#70788b}
.dashboard-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.panel{border:1px solid var(--line);background:linear-gradient(145deg,#171b27,#121620);border-radius:var(--radius)}
.panel-head,.section-toolbar{display:flex;align-items:center;justify-content:space-between}
.panel-head{padding:18px 20px;border-bottom:1px solid #272c3a}
.panel-head h3,.panel-head p,.section-toolbar h2,.section-toolbar p{margin:0}
.panel-head h3{font-size:14px}
.panel-head p,.section-toolbar p{font-size:11px;color:var(--muted);margin-top:5px}
.text-button{background:transparent;border:0;color:#9783ff;font-size:11px;cursor:pointer}
.compact-list{min-height:188px}
.compact-row{display:grid;grid-template-columns:1fr 120px 80px;gap:12px;align-items:center;padding:13px 20px;border-bottom:1px solid #232836;font-size:12px}
.compact-row:last-child{border:0}
.compact-row small{display:block;color:var(--muted);margin-top:4px}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}
.quick-grid button{display:flex;align-items:center;gap:11px;text-align:left;border:1px solid #2a3040;background:#181d29;border-radius:11px;padding:15px;color:#dfe2ec;cursor:pointer}
.quick-grid button:hover{border-color:#5f4ac2;background:#1d2130}
.quick-grid b{font-size:18px;color:#9e8dff}
.quick-grid span,.quick-grid small{display:block}
.quick-grid span{font-size:12px;font-weight:650}
.quick-grid small{font-size:9px;color:var(--muted);margin-top:4px;font-weight:400}
.section-toolbar{margin-bottom:20px}
.section-toolbar h2{font-size:20px}
.table-panel{overflow:hidden}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid #252a38;font-size:11px}
th{background:#1a1e29;color:#81899b;font-size:9px;letter-spacing:.6px;text-transform:uppercase}
td{color:#cdd2de}
tbody tr:hover{background:#1b202b}
.product-name{font-weight:700;color:#f3f4fa}
.mono{font-family:"SFMono-Regular",Consolas,monospace;font-size:9px;color:#949caf}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:99px;font-size:9px;border:1px solid}
.badge.active{color:#7ee4a9;background:#173525;border-color:#285b3d}
.badge.revoked{color:#ff9da5;background:#3a1e25;border-color:#69323c}
.badge.neutral{color:#b5bbca;background:#252a37;border-color:#373e4e}
.filter-row{display:flex;gap:12px;justify-content:space-between;margin-bottom:13px}
.search-input,.filter-row select,.modal input,.modal select{height:39px;border:1px solid #303647;background:#151925;border-radius:9px;color:#e8eaf1;padding:0 12px;outline:none}
.search-input{width:330px}
.search-input:focus,.modal input:focus,.modal select:focus,.filter-row select:focus{border-color:#7358ef;box-shadow:0 0 0 3px #7358ef1e}
.filter-hint{font-size:10px;color:var(--muted);align-self:center}
.copy-button,.state-button,.unbind-button{border:1px solid #323849;background:#1d222e;color:#c6cbd8;border-radius:7px;padding:6px 9px;font-size:9px;cursor:pointer}
.state-button.danger{color:#ff909a;border-color:#66343d;background:#321c22}
.state-button.success{color:#78dfa5;border-color:#315d43;background:#193124}
.license-list{display:grid;gap:12px}
.license-card{padding:0 18px 16px}
.license-main{display:grid;grid-template-columns:1.2fr 1fr 130px 120px;gap:18px;align-items:center;padding:17px 0}
.license-main h3,.license-main p{margin:0}
.license-main h3{font-size:13px}
.license-main p{font-size:9px;color:var(--muted);margin-top:5px}
.license-metric strong,.license-metric small{display:block}
.license-metric strong{font-size:11px}
.license-metric small{font-size:9px;color:var(--muted);margin-top:4px}
.device-row{display:grid;grid-template-columns:1fr 150px 120px 80px;align-items:center;gap:12px;border:1px solid #292f3d;background:#11151f;padding:11px 13px;border-radius:9px;font-size:10px}
.device-row+.device-row{margin-top:7px}
.device-row small{color:var(--muted)}
.empty-state{text-align:center;color:#737b8e;font-size:11px;padding:48px 20px}
.auth-gate{position:fixed;inset:0;z-index:30;background:#090b11e8;backdrop-filter:blur(15px);display:grid;place-items:center}
.login-card{width:390px;padding:34px;border:1px solid #302a50;background:#151824;border-radius:20px;box-shadow:0 30px 100px #0008;text-align:center}
.login-logo{width:52px;height:52px;border-radius:15px;margin:0 auto 18px}
.login-card h2{margin:0;font-size:22px}
.login-card>p{font-size:11px;color:var(--muted);line-height:1.7}
.login-card label,.modal label{display:grid;text-align:left;gap:7px;color:#aab0bf;font-size:10px}
.login-card input{height:42px;border:1px solid #343a4c;background:#0f121b;border-radius:9px;color:#fff;padding:0 12px}
.login-card .primary-button{width:100%;margin-top:12px}
.modal-backdrop{position:fixed;inset:0;background:#05070bbf;backdrop-filter:blur(8px);z-index:50;display:grid;place-items:center}
.modal{width:470px;background:#171b26;border:1px solid #343a4b;border-radius:18px;box-shadow:0 30px 100px #000b}
.modal-wide{width:570px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid #292f3d}
.modal-head h2{font-size:18px;margin:0}
.modal-close{width:32px;height:32px;border-radius:8px;font-size:20px}
.modal form{display:grid;gap:15px;padding:22px 24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal input,.modal select{width:100%}
.modal label small{color:#737b8e;line-height:1.5}
fieldset{border:1px solid #303647;border-radius:11px;padding:13px}
legend{font-size:10px;color:#b7bdcc;padding:0 6px}
legend span{color:#777f92}
.product-options{display:grid;gap:7px;max-height:190px;overflow:auto}
.check-option{display:flex;gap:9px;align-items:center;padding:10px;border-radius:8px;background:#11151f;font-size:11px}
.check-option input{width:15px;height:15px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.form-error{color:#ff828e!important;min-height:14px;font-size:10px!important}
.toast{position:fixed;right:25px;bottom:25px;background:#222838;border:1px solid #3d465b;border-radius:10px;padding:12px 16px;font-size:11px;box-shadow:0 15px 50px #0008;z-index:80}
.toast.success{border-color:#315d43;color:#8ce4b1}
.toast.error{border-color:#6a3540;color:#ff9ca5}
@media(max-width:1180px){.stat-grid{grid-template-columns:1fr 1fr}
.dashboard-grid{grid-template-columns:1fr}
.license-main{grid-template-columns:1fr 1fr}
.app-shell{grid-template-columns:210px}
.workspace{padding:24px}
.topbar{padding:0 24px}
}

.serial-badge{display:inline-flex;align-items:center;justify-content:center;min-width:48px;padding:5px 8px;border-radius:7px;background:#292343;border:1px solid #493d78;color:#b8aaff;font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;font-weight:700}
.modal-code{width:min(820px,calc(100vw - 48px));max-height:92vh;overflow:auto}
.selection-toolbar{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:9px;margin-bottom:10px}
.selection-toolbar input,.selection-toolbar select,.serial-picker textarea,.save-bundle-row input{width:100%;border:1px solid #303647;background:#11151f;border-radius:9px;color:#e8eaf1;padding:10px 12px;outline:none}
.selection-toolbar select{height:39px}
.serial-picker{display:grid;grid-template-columns:1fr 118px;gap:9px;align-items:stretch}
.serial-picker textarea{resize:vertical;min-height:66px;font:11px/1.6 "SFMono-Regular",Consolas,monospace}
.serial-picker button{height:auto}
.selection-summary{display:flex;align-items:center;gap:12px;padding:10px 2px;color:#8d94a7;font-size:10px}
.selection-summary strong{color:#dcd8ff;font-size:11px}
.selection-summary .text-button{margin-left:auto}
.selection-message.warning{color:#f2aa45}
.modal-code .product-options{display:grid;grid-template-columns:1fr 1fr;max-height:260px}
.modal-code .check-option{display:grid;grid-template-columns:18px 54px 1fr;min-width:0}
.modal-code .check-option>span:last-child{min-width:0}
.modal-code .check-option strong,.modal-code .check-option small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-code .check-option small{color:#7f879b;margin-top:4px}
.save-bundle-row{display:grid;grid-template-columns:1fr 104px;gap:9px;margin-top:10px}
.save-bundle-row button{height:39px}
@media(max-width:1180px){.selection-toolbar{grid-template-columns:1fr 1fr}.selection-toolbar input{grid-column:1/-1}.modal-code .product-options{grid-template-columns:1fr}}