:root {
  --bg:#090a0e;--panel:rgba(20,22,28,.92);--text:#f5f5f6;--muted:#9497a1;
  --border:rgba(255,255,255,.09);--orange:#f37021;--orange-light:#ff9a54;
  --orange-soft:rgba(243,112,33,.12);--green:#42d77d;--red:#fb7185;--blue:#1677ff;
}
*{box-sizing:border-box}[hidden]{display:none!important}html{min-height:100%;background:var(--bg)}
body{min-height:100vh;margin:0;overflow-x:hidden;color:var(--text);background:radial-gradient(circle at 68% -10%,rgba(243,112,33,.09),transparent 34%),linear-gradient(180deg,#0d0e13 0,var(--bg) 52%);font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif}
button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}
body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(110px);pointer-events:none}
body:before{width:400px;height:400px;right:-180px;top:18%;background:rgba(243,112,33,.08)}
body:after{width:340px;height:340px;left:-200px;bottom:4%;background:rgba(74,222,128,.035)}
.topbar{position:sticky;top:0;z-index:30;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 46px;border-bottom:1px solid var(--border);background:rgba(9,10,14,.82);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:17px;font-weight:700}.brand img{width:32px;height:32px;border-radius:8px}.brand strong{color:var(--orange-light);font-size:12px}
.topbar-actions{display:flex;align-items:center;gap:8px}.topbar-actions a,.text-button{padding:8px 12px;border:0;border-radius:8px;color:var(--muted);background:transparent;font-size:13px;text-decoration:none;cursor:pointer}
.topbar-actions a:hover,.text-button:hover{color:#fff;background:rgba(255,255,255,.05)}
main{width:min(1180px,calc(100% - 48px));margin:0 auto}.eyebrow{color:var(--orange-light);font-size:11px;font-weight:800;letter-spacing:1.8px}
.login-shell{min-height:calc(100vh - 67px);display:grid;grid-template-columns:minmax(0,1fr) 430px;align-items:center;gap:90px;padding:76px 4%}
.login-copy h1{margin:19px 0 22px;font-size:clamp(48px,6vw,76px);line-height:1.06;letter-spacing:-3px}.login-copy h1 em{color:var(--orange);font-style:normal}
.login-copy>p{max-width:590px;color:#aaadb6;font-size:16px;line-height:1.9}.login-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.login-points span{padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:#bfc1c8;font-size:12px;background:rgba(255,255,255,.025)}
.login-card{padding:34px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:rgba(20,22,28,.88);box-shadow:0 30px 80px rgba(0,0,0,.36);backdrop-filter:blur(22px)}
.card-heading{display:flex;align-items:center;gap:14px;margin-bottom:30px}.card-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;color:var(--orange-light);background:var(--orange-soft);font-size:18px;font-weight:800}
.card-heading h2{margin:0 0 5px;font-size:20px}.card-heading p{margin:0;color:var(--muted);font-size:12px}
.login-card label{display:block;margin:18px 0 8px;color:#c9cbd1;font-size:13px}.login-card input{width:100%;height:48px;padding:0 14px;border:1px solid var(--border);border-radius:11px;outline:none;color:#fff;background:rgba(4,5,8,.42);transition:.2s}
.login-card input:focus{border-color:rgba(243,112,33,.7);box-shadow:0 0 0 3px rgba(243,112,33,.09)}.form-error{min-height:20px;margin:10px 0 4px;color:var(--red);font-size:12px}
.primary-button{width:100%;height:50px;border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange-light));box-shadow:0 10px 28px rgba(243,112,33,.25);font-weight:700;cursor:pointer}
.primary-button:disabled{opacity:.6;cursor:wait}.login-help{margin:22px 0 0;color:var(--muted);text-align:center;font-size:12px}.login-help a{color:var(--orange-light);text-decoration:none}
.dashboard{padding:68px 0 90px}.dashboard-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px}.dashboard-heading h1{margin:10px 0 7px;font-size:clamp(30px,4vw,46px);letter-spacing:-1.5px}.dashboard-heading p{margin:0;color:var(--muted);font-size:14px}
.account-state{padding:9px 14px;border:1px solid rgba(66,215,125,.24);border-radius:999px;color:var(--green);background:rgba(66,215,125,.08);font-size:12px;font-weight:700}.account-state.expired{border-color:rgba(251,113,133,.24);color:var(--red);background:rgba(251,113,133,.08)}
.metric-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px}.metric-card,.panel{border:1px solid var(--border);background:var(--panel);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.metric-card{min-height:155px;padding:25px;border-radius:17px}.metric-primary{border-color:rgba(243,112,33,.2);background:linear-gradient(135deg,rgba(243,112,33,.12),rgba(20,22,28,.92) 58%)}
.metric-label{display:block;margin-bottom:20px;color:var(--muted);font-size:12px}.metric-card strong{display:block;margin-bottom:8px;font-size:26px;letter-spacing:-.5px}.metric-card strong i{color:#5e616b;font-style:normal;font-weight:400}.metric-card small{color:#777a84;font-size:11px}
.content-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:16px;margin-top:16px}.panel{border-radius:18px}.renewal-panel,.account-panel{min-height:370px;padding:28px}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.panel-kicker{color:var(--orange);font-size:10px;font-weight:800;letter-spacing:1.5px}.panel-heading h2{margin:7px 0 0;font-size:20px}
.soft-badge{padding:6px 10px;border-radius:999px;color:var(--orange-light);background:var(--orange-soft);font-size:11px}.soft-badge.off{color:var(--muted);background:rgba(255,255,255,.05)}
.renewal-price{margin-top:30px}.renewal-price span,.renewal-cycle span{display:block;color:var(--muted);font-size:12px}.renewal-price strong{display:block;margin-top:7px;font-size:40px;letter-spacing:-1.5px}
.renewal-cycle{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding:13px 15px;border-radius:11px;background:rgba(255,255,255,.035)}.renewal-cycle span{display:inline}.renewal-cycle strong{font-size:14px}
.renewal-message{min-height:20px;margin:15px 0;color:#7f828c;font-size:11px}.pay-buttons{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pay-button{height:47px;border:1px solid var(--border);border-radius:11px;color:#fff;background:rgba(255,255,255,.035);font-weight:700;cursor:pointer;transition:.2s}.pay-button:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(255,255,255,.2)}.pay-button:disabled{opacity:.35;cursor:not-allowed}
.pay-icon{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:7px;border-radius:7px;color:#fff;font-size:12px}.alipay .pay-icon{background:var(--blue)}.wechat .pay-icon{background:#07c160}
.account-list{margin:24px 0 0}.account-list div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.065)}.account-list dt{color:var(--muted);font-size:12px}.account-list dd{margin:0;color:#e8e8eb;font-size:13px;text-align:right}.account-tip{margin:19px 0 0;color:#737681;font-size:11px;line-height:1.7}
.orders-panel{margin-top:16px;padding:27px 28px 18px}.table-wrap{position:relative;min-height:120px;margin-top:24px;overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{padding:11px 12px;color:#72757f;font-size:11px;font-weight:600;text-align:left}td{padding:15px 12px;border-top:1px solid rgba(255,255,255,.06);color:#c8cad0;font-size:12px}
.order-number{color:#9598a2;font-family:Consolas,monospace}.order-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:10px}.order-status.paid{color:var(--green);background:rgba(66,215,125,.08)}.order-status.pending{color:var(--orange-light);background:var(--orange-soft)}.order-status.expired,.order-status.closed{color:#878a94;background:rgba(255,255,255,.05)}.empty-state{padding:34px;color:#777a84;text-align:center;font-size:12px}
.devices-panel{margin-top:16px;padding:27px 28px 18px}.device-id{display:block;margin-top:4px;color:#737681;font-size:10px;font-family:Consolas,monospace}.device-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:10px}.device-status.online{color:var(--green);background:rgba(66,215,125,.08)}.device-status.offline{color:#878a94;background:rgba(255,255,255,.05)}.device-peer{max-width:260px;overflow:hidden;text-overflow:ellipsis}.device-actions{display:flex;gap:7px}.device-actions button{padding:6px 9px;border:1px solid var(--border);border-radius:8px;color:#d8d9de;background:rgba(255,255,255,.035);font-size:11px;cursor:pointer}.device-actions button:hover:not(:disabled){border-color:rgba(243,112,33,.45);color:#fff}.device-actions button:disabled{opacity:.38;cursor:not-allowed}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:22px}.modal-backdrop{position:absolute;inset:0;background:rgba(2,3,5,.78);backdrop-filter:blur(6px)}
.modal-card{position:relative;z-index:1;width:min(420px,100%);padding:32px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:#181a21;box-shadow:0 35px 100px rgba(0,0,0,.6);text-align:center}
.modal-close{position:absolute;top:13px;right:13px;width:34px;height:34px;border:0;border-radius:9px;color:var(--muted);background:rgba(255,255,255,.04);font-size:21px;cursor:pointer}
.pay-modal-badge{display:inline-flex;padding:6px 10px;border-radius:999px;color:var(--orange-light);background:var(--orange-soft);font-size:10px;font-weight:700}.modal-card h2{margin:14px 0 7px;font-size:22px}.pay-modal-summary,.pay-modal-status{margin:0;color:var(--muted);font-size:12px}
.qr-code-box{width:220px;height:220px;display:grid;place-items:center;margin:22px auto 16px;padding:10px;border-radius:15px;color:#777a84;background:#fff;font-size:12px}.qr-code-box svg,.qr-code-box img{max-width:100%;max-height:100%}.pay-modal-amount{display:block;margin-bottom:8px;font-size:27px}.open-pay-link{display:inline-block;margin-top:14px;color:var(--orange-light);font-size:11px;text-decoration:none}
.toast{position:fixed;left:50%;bottom:34px;z-index:200;transform:translateX(-50%);padding:11px 17px;border:1px solid var(--border);border-radius:10px;color:#fff;background:rgba(24,26,33,.96);box-shadow:0 12px 40px rgba(0,0,0,.4);font-size:12px}
@media(max-width:900px){.topbar{padding:0 22px}.login-shell{grid-template-columns:1fr;gap:52px;padding:70px 2% 80px}.login-copy{text-align:center}.login-copy>p{margin-left:auto;margin-right:auto}.login-points{justify-content:center}.login-card{width:min(430px,100%);margin:auto}.metric-grid{grid-template-columns:1fr 1fr}.metric-primary{grid-column:1/3}.content-grid{grid-template-columns:1fr}}
@media(max-width:600px){.topbar{height:60px;padding:0 14px}.brand span{display:none}.topbar-actions a:first-child{display:none}main{width:min(100% - 26px,1180px)}.login-shell{min-height:calc(100vh - 61px);padding-top:48px}.login-copy h1{font-size:44px;letter-spacing:-2px}.login-card{padding:26px 21px}.dashboard{padding-top:45px}.dashboard-heading{align-items:flex-start;flex-direction:column}.metric-grid{grid-template-columns:1fr}.metric-primary{grid-column:auto}.renewal-panel,.account-panel,.orders-panel{padding:23px 19px}.pay-buttons{grid-template-columns:1fr}}