:root {
  color-scheme: light dark;
  --bg: #f2f5f7; --surface: #ffffff; --surface-raised: #f9fbfc;
  --text: #1d2939; --muted: #526275; --line: #d9e2e8; --soft: #edf2f5;
  --ink: #233540; --on-ink: #f7fbfb; --accent: #286b68; --accent-strong: #1d5856;
  --accent-soft: #e3f0ee; --warning: #825510; --warning-soft: #fff3d9;
  --danger: #a33d46; --danger-soft: #fae9eb; --ok: #28724e; --ok-soft: #e3f3ea;
  --focus: #387eaa; --ease: cubic-bezier(.23,1,.32,1);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI Variable", "Segoe UI", "PingFang SC", sans-serif;
  font-size: 15px; font-weight: 400; font-kerning: normal; text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#252c34;--surface:#2e3842;--surface-raised:#394550;--text:#f0f3f5;--muted:#c0cbd4;
    --line:#4a5865;--soft:#3a4752;--ink:#e3efeb;--on-ink:#1d2a28;--accent:#b7ddd5;
    --accent-strong:#d0eae4;--accent-soft:#405653;--warning:#f1d096;--warning-soft:#51452f;
    --danger:#f2abb2;--danger-soft:#51373c;--ok:#a8ddb9;--ok-soft:#344a3e;--focus:#a2d7f1;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;--bg:#252c34;--surface:#2e3842;--surface-raised:#394550;--text:#f0f3f5;
  --muted:#c0cbd4;--line:#4a5865;--soft:#3a4752;--ink:#e3efeb;--on-ink:#1d2a28;
  --accent:#b7ddd5;--accent-strong:#d0eae4;--accent-soft:#405653;--warning:#f1d096;
  --warning-soft:#51452f;--danger:#f2abb2;--danger-soft:#51373c;--ok:#a8ddb9;
  --ok-soft:#344a3e;--focus:#a2d7f1;
}
*{box-sizing:border-box}
html{min-width:360px;min-height:100%;background:var(--bg)}
body{min-width:360px;min-height:100vh;margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}
button,input,select{color:inherit;font:inherit}
button{cursor:pointer;transition:transform 140ms var(--ease),background-color 160ms ease,border-color 160ms ease,color 160ms ease}
button:active{transform:translateY(1px)}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-strong)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 68%,transparent);outline-offset:2px}
input,select{min-width:0;min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-raised);color:var(--text)}
input::placeholder{color:var(--muted);opacity:.86}
.nav{position:sticky;z-index:5;top:0;display:flex;min-height:68px;align-items:center;gap:26px;padding:0 max(28px,calc((100vw - 1480px)/2));border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);white-space:nowrap;font-size:18px;font-weight:700;letter-spacing:-.45px;line-height:1.1}
.brand:hover{color:var(--text)}.brand small{display:block;margin-top:4px;color:var(--muted);font-size:9px;font-weight:600;letter-spacing:1.65px}
.brand-mark{display:grid;width:36px;height:36px;flex:0 0 36px;place-items:center;border-radius:11px;background:var(--accent);color:var(--on-ink);font-size:19px;font-weight:700;letter-spacing:0}
.period{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a,.nav-user a{display:inline-flex;min-height:38px;align-items:center;padding:8px 12px;border-radius:10px;color:var(--muted);font-size:13px;white-space:nowrap;transition:background-color 180ms ease,color 180ms ease,transform 180ms var(--ease)}
.nav-links a:hover,.nav-links a.active{background:var(--soft);color:var(--text)}
.nav-links a.active{font-weight:650;box-shadow:inset 0 -2px var(--accent)}
.nav-user{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;white-space:nowrap}
.nav-user .online{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.nav-user a{padding-inline:9px}
.nav-user select{min-height:36px;padding:6px 26px 6px 10px;border-color:transparent;background:transparent;font-size:12px}
.nav-user select:hover{border-color:var(--line);background:var(--surface-raised)}
.shell{width:min(100%,1480px);margin:0 auto;padding:38px 42px 72px}
.hero{margin:0 0 26px}.eyebrow{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:1.55px;text-transform:uppercase}
h1{margin:7px 0 8px;font-size:clamp(30px,3vw,38px);font-weight:650;letter-spacing:-.8px;line-height:1.28}
h2{margin:4px 0 0;font-size:19px;font-weight:650;letter-spacing:-.25px;line-height:1.4}
.hero p,.muted{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.card{margin:18px 0;padding:22px 24px;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:0 5px 18px color-mix(in srgb,var(--text) 5%,transparent)}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}
.section-title h2 small{color:var(--muted);font-size:12px;font-weight:450;letter-spacing:0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 22px}
.stat{display:flex;min-height:128px;flex-direction:column;justify-content:center;gap:8px;margin:0}
.stat span{color:var(--muted);font-size:13px}.stat strong{color:var(--text);font-size:32px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.7px;line-height:1.2}
.table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:9px}
table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;background:var(--surface);font-size:13px}
th{position:sticky;top:0;z-index:1;background:var(--surface-raised);color:var(--muted);font-size:12px;font-weight:650;text-align:left;white-space:nowrap}
th,td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 44%,var(--surface))}
tbody tr:hover td{background:transparent}td{line-height:1.55}tbody td:first-child{color:var(--text);font-weight:550}
.table-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.table-wrap th:first-child{min-width:140px}
.table-wrap tbody td:first-child{min-width:150px;white-space:normal}
.table-wrap tbody td:not(:first-child){white-space:nowrap}
.table-wrap table{border:0;border-radius:0}
.pill{display:inline-flex;min-height:27px;align-items:center;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--text);font-size:12px;font-weight:600;white-space:nowrap}
.pill.ok{border-color:transparent;background:var(--ok-soft);color:var(--ok)}
.actions{display:flex;min-width:430px;flex-wrap:wrap;align-items:center;gap:7px}
.actions form,.inline-note{display:flex;align-items:center;gap:7px;margin:0}
.inline-note{flex:1 1 100%}.inline-note input{width:min(220px,45vw);min-height:36px;padding:7px 10px;font-size:13px}
.quiet,.danger,.primary{display:inline-flex;min-height:36px;align-items:center;justify-content:center;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;transition:transform 180ms var(--ease),background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.quiet:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:var(--accent-soft);color:var(--accent-strong)}
.danger{border-color:color-mix(in srgb,var(--danger) 35%,var(--line));color:var(--danger)}
.danger:hover{border-color:var(--danger);background:var(--danger-soft)}
.primary{min-height:42px;padding:10px 17px;border-color:var(--accent);background:var(--accent);color:var(--on-ink);font-size:13px;font-weight:700}
.primary:hover{border-color:var(--accent-strong);background:var(--accent-strong);color:var(--on-ink);transform:translateY(-1px)}
.form-row{display:flex;flex-wrap:wrap;align-items:end;gap:14px}
.form-row label,.login-card label{display:grid;gap:7px;color:var(--text);font-size:13px;font-weight:600}
.form-row input{width:190px}.form-row input[type="number"]{width:135px;font-variant-numeric:tabular-nums}
.form-row label:has(input[name="note"]) input{width:min(260px,30vw)}.form-row button{min-height:42px}
.telemetry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr));gap:16px}
.telemetry{margin:0}.telemetry .section-title{align-items:flex-start}
.telemetry-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 20px;margin:21px 0}
.telemetry-facts div{display:flex;min-width:0;flex-direction:column;gap:5px}
.telemetry-facts span{color:var(--muted);font-size:12px;font-weight:600}
.telemetry-facts strong{overflow-wrap:anywhere;color:var(--text);font-size:14px;font-weight:650}
.telemetry-facts small{color:var(--muted);font-size:12px;line-height:1.6}
details{padding-top:14px;border-top:1px solid var(--line);font-size:13px}
summary{color:var(--accent-strong);cursor:pointer;font-weight:600}
pre{max-height:440px;overflow:auto;padding:15px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);color:var(--text);font:12px/1.75 Consolas,"Microsoft YaHei UI",monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.empty{padding:42px 24px;color:var(--muted);text-align:center}
.login-wrap{display:grid;width:min(100%,1060px);min-height:calc(100vh - 68px);grid-template-columns:minmax(0,1fr) minmax(360px,440px);align-items:center;gap:clamp(38px,8vw,105px);margin:auto;padding:54px 42px}
.login-intro{position:relative;min-height:430px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.login-brand{margin-bottom:auto}.login-intro .eyebrow{margin-top:46px}
.login-intro h2{margin-top:15px;font-size:clamp(28px,4vw,42px);font-weight:650;letter-spacing:-.7px;line-height:1.38}
.login-intro p{max-width:40ch;margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.85}
.login-mark{display:flex;gap:9px;align-items:center;margin-top:35px;color:var(--muted);font-size:12px}
.login-mark span{display:block;width:26px;height:1px;background:var(--accent)}
.login-card{width:100%;padding:34px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:0 12px 34px color-mix(in srgb,var(--text) 8%,transparent)}
.login-card h1{margin-top:9px;font-size:27px}.login-card p{margin:5px 0 25px;color:var(--muted);font-size:14px}
.login-card form{display:grid;gap:17px}.login-card input{width:100%;min-height:46px}.login-card .primary{min-height:46px;margin-top:5px}
.issued{display:grid;justify-items:start;gap:12px}.issued code{padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface-raised);color:var(--text);font:600 16px/1.7 Consolas,monospace;letter-spacing:.7px}
.issued p{margin:0;color:var(--muted);font-size:14px}.issued a{display:inline-flex;min-height:40px;align-items:center;margin-top:4px}
.shell>.hero,.shell>.stats,.shell>.card,.shell>.telemetry-grid{animation:surface-enter 300ms var(--ease) both}
.shell>.stats{animation-delay:45ms}.shell>.card:nth-of-type(2){animation-delay:70ms}.shell>.card:nth-of-type(3){animation-delay:120ms}
.login-card{animation:surface-enter 320ms var(--ease) both}
.license-list{display:grid;gap:13px}
.license-card{min-width:0;padding:17px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface-raised);box-shadow:0 3px 10px color-mix(in srgb,var(--text) 4%,transparent);animation:surface-enter 280ms var(--ease) both;transition:transform 220ms var(--ease),border-color 220ms ease,box-shadow 220ms ease}
.license-card:nth-child(2){animation-delay:45ms}.license-card:nth-child(3){animation-delay:90ms}.license-card:nth-child(4){animation-delay:135ms}.license-card:nth-child(n+5){animation-delay:180ms}
.license-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:0 12px 26px color-mix(in srgb,var(--text) 9%,transparent)}
.license-card-head{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:13px;margin-bottom:15px}
.license-keyline,.license-actions{display:flex;min-width:0;flex-wrap:wrap;align-items:center;gap:8px}
.license-key{max-width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font:650 13px/1.35 Consolas,"Microsoft YaHei UI",monospace;letter-spacing:.25px;overflow-wrap:anywhere}
.copy-key{min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font-size:12px;font-weight:650;transition:transform 180ms var(--ease),background-color 180ms ease,border-color 180ms ease}
.copy-key:hover,.copy-key.copied{transform:translateY(-1px);border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}
.pill.warning{border-color:transparent;background:var(--warning-soft);color:var(--warning)}
.license-actions{justify-content:flex-end}.license-actions form{margin:0}
.license-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.license-fact{display:flex;min-width:0;min-height:72px;flex-direction:column;justify-content:center;gap:5px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:13px;background:var(--surface)}
.license-fact>span{color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.1px}
.license-fact>strong{color:var(--text);font-size:12px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.license-note{grid-column:span 1;justify-content:flex-start}
.note-form{display:flex;min-width:0;align-items:center;gap:7px;margin:0}
.note-form input{width:100%;min-height:36px;padding:6px 10px;font-size:12px}.note-form .quiet{min-height:36px;padding:6px 10px}
.copy-fallback{position:fixed!important;left:-10000px!important;top:0!important;opacity:0!important}
@keyframes surface-enter{from{opacity:0;filter:blur(4px);transform:translateY(6px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@media(max-width:1050px){.nav{gap:14px;padding-inline:20px}.nav-links a{padding-inline:9px;font-size:12px}.shell{padding:32px 26px 58px}.actions{min-width:390px}.login-wrap{gap:42px;padding-inline:30px}}
@media(max-width:1120px){.license-card-head{align-items:flex-start;flex-direction:column}.license-actions{justify-content:flex-start}.license-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 .nav{position:relative;min-height:66px;flex-wrap:wrap;gap:8px 12px;padding:12px 17px 0}
 .brand{font-size:17px}.brand-mark{width:33px;height:33px;flex-basis:33px}
 .nav-user{min-height:38px;gap:4px}.nav-user a{padding-inline:6px}.nav-user select{max-width:115px;padding-inline:5px}
 .nav-links{order:3;width:100%;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.nav-links a{min-height:35px;padding-inline:10px}
 .shell{padding:27px 19px 48px}.stats{gap:11px}.stat{min-height:108px;padding:17px}.card{padding:19px}.license-card{padding:15px;border-radius:16px}.license-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .login-wrap{min-height:calc(100vh - 110px);grid-template-columns:1fr;gap:20px;padding:30px 22px 45px}
 .login-intro{min-height:0}.login-brand{margin-bottom:0}.login-intro .eyebrow,.login-intro h2,.login-intro p,.login-mark{display:none}
 .login-card{max-width:500px;justify-self:center;padding:28px}
}
@media(max-width:560px){
 .nav{padding-inline:13px}.nav-user{font-size:12px}.nav-user .online{display:none}.nav-user select{max-width:94px;font-size:11px}
 .shell{padding:24px 13px 38px}.hero{margin-bottom:20px}h1{font-size:29px}.hero p,.muted{font-size:13px}
 .stats{grid-template-columns:1fr}.stat{min-height:92px}.card{margin:14px 0;padding:16px;border-radius:14px}.license-facts{grid-template-columns:1fr}.license-card-head{gap:11px}.license-keyline{gap:6px}.license-key{font-size:12px}.license-actions{justify-content:flex-start}.license-actions .quiet,.license-actions .danger{min-height:35px;padding:6px 9px}
 .section-title{align-items:flex-start}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
 .form-row label,.form-row input,.form-row input[type="number"],.form-row label:has(input[name="note"]) input{width:100%}
 .form-row label:has(input[name="note"]),.form-row .primary{grid-column:1/-1}
 .telemetry-grid{grid-template-columns:1fr}.telemetry-facts{grid-template-columns:1fr;gap:12px}
 .login-wrap{padding-inline:15px}.login-card{padding:23px}
}
@media(hover:none){.license-card:hover{transform:none;box-shadow:0 3px 10px color-mix(in srgb,var(--text) 4%,transparent)}}


/* Page transitions and interactive feedback */
@view-transition{navigation:auto}
::view-transition-old(root){animation:tp-page-out 160ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:tp-page-in 300ms var(--ease) both}
@keyframes tp-page-out{to{opacity:0;filter:blur(2px)}}
@keyframes tp-page-in{from{opacity:0;filter:blur(6px);transform:scale(.996)}to{opacity:1;filter:blur(0);transform:none}}
.card{transition:transform 200ms var(--ease),box-shadow 200ms ease,border-color 200ms ease}
.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:0 14px 32px color-mix(in srgb,var(--text) 9%,transparent)}
tbody tr{transition:background-color 170ms ease}
input,select{transition:border-color 170ms ease,box-shadow 170ms ease,background-color 170ms ease}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.primary,.quiet,.danger{transition:transform 150ms var(--ease),background-color 170ms ease,color 170ms ease,border-color 170ms ease,box-shadow 170ms ease,opacity 170ms ease}
.primary:hover{transform:translateY(-1px);box-shadow:0 9px 22px color-mix(in srgb,var(--accent) 26%,transparent)}
.quiet:hover,.danger:hover{transform:translateY(-1px)}
.pill{transition:background-color 170ms ease,color 170ms ease,border-color 170ms ease}
@media(hover:none){.card:hover{transform:none}}