/* 管理后台保持紧凑的信息层级，低频详情按需展开。 */
:root { color-scheme: dark; --bg:#10151e; --sidebar:#141b26; --surface:#19212e; --surface-raised:#222d3d; --border:#2c3748; --text:#e9eef7; --muted:#95a3b8; --primary:#a393ff; --green:#74d8b1; --red:#ff9ca9; --yellow:#f0ca83; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; color:var(--text); background:var(--bg); line-height:1.6; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; border:1px solid transparent; border-radius:8px; padding:9px 15px; color:var(--text); background:var(--surface-raised); line-height:1.5; transition:background .15s; }
button:hover { background:#303d51; }
button:disabled { cursor:not-allowed; opacity:.45; }
button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
input,textarea,select { width:100%; border:1px solid var(--border); border-radius:8px; background:#121a26; color:var(--text); padding:10px 12px; }
input::placeholder { color:#728096; }
textarea { resize:vertical; min-height:86px; }
label { display:block; margin:17px 0 7px; font-weight:600; }
h1,h2,p { margin-top:0; }
h1 { font-size:26px; letter-spacing:-.4px; margin-bottom:0; font-weight:650; }
h2 { font-size:17px; margin-bottom:10px; font-weight:600; }
p { margin-bottom:12px; }
.muted,.small-text { color:var(--muted); }
.small-text { font-size:12px; }
.eyebrow { color:var(--muted); font-size:10px; font-weight:650; letter-spacing:1.5px; margin-bottom:8px; }
.primary { background:var(--primary); color:#17142b; font-weight:650; }
.primary:hover { background:#b6a9ff; }
.secondary { border-color:var(--border); background:transparent; }
.quiet { background:transparent; color:var(--muted); padding:5px 0; text-align:left; }
.quiet:hover { background:transparent; color:var(--text); }
.danger { color:#250d16; background:#e78997; font-weight:650; }
.wide { width:100%; margin-top:24px; }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--primary); color:#181329; font-size:27px; line-height:1; font-weight:800; margin-bottom:25px; }
.brand-mark.small { width:36px; height:36px; font-size:20px; border-radius:10px; margin:0; flex-shrink:0; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(100%,430px); background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:38px; box-shadow:0 24px 80px #0003; }
.login-card h1 { margin-bottom:14px; }
.fine-print { color:var(--muted); font-size:12px; margin:20px 0 0; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:224px minmax(0,1fr); }
.sidebar { position:fixed; inset:0 auto 0 0; width:224px; height:100vh; background:var(--sidebar); border-right:1px solid var(--border); padding:26px 16px 20px; display:flex; flex-direction:column; }
.sidebar-brand { display:flex; gap:11px; align-items:center; padding:0 8px 24px; }
.sidebar-brand strong { display:block; font-size:17px; }
.sidebar-brand .muted { display:block; font-size:11px; }
.sidebar nav { overflow-y:auto; }
.nav-caption { font-size:10px; letter-spacing:1px; color:#6f8097; margin:18px 12px 8px; }
.nav-button { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 13px; margin:3px 0; color:#b6c1d3; background:transparent; border-radius:8px; }
.nav-button span { min-width:20px; font-size:18px; text-align:center; }
.nav-button.selected { background:#a393ff17; color:#c4b8ff; font-weight:600; }
.nav-group summary { cursor:pointer; padding:11px 13px; color:var(--muted); display:flex; justify-content:space-between; }
.nav-group .nav-button { padding-left:25px; font-size:13px; }
.sidebar-footer { margin-top:auto; border-top:1px solid var(--border); padding:18px 10px 0; display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:12px; }
#session-username { max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.workspace { grid-column:2; min-width:0; width:100%; max-width:1660px; margin:0 auto; padding:30px 36px 48px; }
.page-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
.header-actions { display:flex; align-items:center; gap:14px; }
.intro-card { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:24px 26px; background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:20px; }
.intro-card h2 { font-size:23px; margin-bottom:7px; }
.intro-card p:last-child { color:var(--muted); margin:0; }
.intro-card button { flex-shrink:0; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.metric-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:19px 22px; min-width:0; }
.metric-label { color:var(--muted); font-size:12px; }
.metric-value { display:block; font-size:28px; letter-spacing:-.6px; margin:9px 0 7px; font-weight:650; line-height:1.3; overflow-wrap:anywhere; }
.metric-note { font-size:11px; color:#73839a; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:20px; margin-bottom:20px; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; min-width:0; }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
.panel-heading p { font-size:12px; margin-bottom:0; }
.panel-heading .nav-button { width:auto; margin:0; font-size:12px; padding:7px 10px; white-space:nowrap; }
.quick-links .nav-button { display:block; border:1px solid var(--border); padding:13px 15px; margin:10px 0; }
.quick-links strong { display:block; font-size:13px; color:var(--text); }
.quick-links span { display:block; text-align:left; color:var(--muted); font-size:11px; margin-top:4px; }
.retention-note { border-top:1px solid var(--border); margin-top:20px; padding-top:16px; font-size:12px; color:var(--green); }
.retention-note small { color:var(--muted); display:block; margin-top:5px; }
.secondary-panel summary { cursor:pointer; color:var(--muted); font-size:13px; font-weight:600; }
.secondary-panel[open] summary { margin-bottom:20px; }
.usage-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.usage-grid .metric-card { background:transparent; }
.usage-grid .metric-value { font-size:23px; }
.attention-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; border-top:1px solid var(--border); }
.attention-item>div { flex:1; min-width:0; }
.attention-item strong { font-size:13px; }
.attention-item .quiet { white-space:nowrap; font-size:12px; }
.empty-state { text-align:center; padding:55px 18px; color:var(--muted); font-size:13px; }
.section-toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px; }
.section-toolbar p { margin:0; font-size:13px; }
.section-toolbar>button { flex-shrink:0; }
.search-form { display:flex; align-items:center; gap:9px; flex:1; max-width:740px; }
.search-form input { max-width:370px; min-width:120px; }
.search-form select { width:auto; min-width:118px; }
.search-form button { flex-shrink:0; }
.retention-chip,.live-label { color:var(--muted); font-size:12px; white-space:nowrap; }
.retention-chip { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:6px 12px; }
.table-panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; }
.table-scroll { overflow:auto; border-radius:12px 12px 0 0; }
table { width:100%; border-collapse:collapse; text-align:left; min-width:760px; }
th { padding:13px 17px; font-size:11px; color:var(--muted); white-space:nowrap; background:#1e2837; font-weight:600; }
td { padding:16px 17px; border-top:1px solid var(--border); vertical-align:middle; font-size:12px; max-width:300px; overflow-wrap:anywhere; }
tbody tr:hover { background:#1e2837; }
.subline { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.identifier { font-family:ui-monospace,Menlo,monospace; font-size:10px; color:#718098; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-name { font-size:13px; font-weight:600; }
.table-empty { text-align:center; color:var(--muted); padding:55px 20px; }
.row-actions { display:flex; align-items:flex-start; flex-wrap:wrap; gap:7px; min-width:150px; }
.row-actions button,.action-menu summary { font-size:11px; padding:6px 10px; background:transparent; border:1px solid var(--border); border-radius:6px; white-space:nowrap; }
.row-actions button:hover { background:var(--surface-raised); }
.accent-text { color:#c0b4ff; }
.danger-text { color:var(--red); }
.action-menu { min-width:72px; }
.action-menu summary { list-style:none; cursor:pointer; color:var(--muted); }
.action-menu summary::-webkit-details-marker { display:none; }
.action-menu-content { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding-top:7px; }
.action-menu-content button { text-align:left; white-space:normal; }
.badge { display:inline-block; padding:3px 8px; font-size:11px; border-radius:5px; white-space:nowrap; color:var(--muted); background:#95a3b818; }
.badge.active { color:var(--green); background:#74d8b114; }
.badge.suspended,.badge.expired,.badge.expiring { color:var(--yellow); background:#f0ca8314; }
.badge.refunded,.badge.unbound,.badge.revoked { color:var(--red); background:#ff9ca912; }
.online-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:6px; }
.online-dot.offline { background:#7a8799; }
.warning-text { color:var(--yellow)!important; }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 17px; border-top:1px solid var(--border); color:var(--muted); font-size:11px; }
.pagination-controls { display:flex; gap:7px; }
.pagination-controls button { font-size:11px; padding:5px 10px; }
.customer-hero { display:flex; justify-content:space-between; align-items:center; margin:22px 0; gap:15px; }
.customer-hero h2 { font-size:27px; margin-bottom:3px; }
.customer-hero p { margin-bottom:0; font-size:12px; }
.tabs { display:flex; gap:22px; border-bottom:1px solid var(--border); margin:0 0 22px; overflow:auto; }
.tabs button { padding:11px 2px 13px; border-radius:0; background:transparent; white-space:nowrap; color:var(--muted); border-bottom:2px solid transparent; font-size:13px; }
.tabs button[aria-selected="true"] { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.detail-list { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px 20px; margin:18px 0; }
.detail-list dt { color:var(--muted); font-size:12px; }
.detail-list dd { margin:0; overflow-wrap:anywhere; font-size:13px; }
.form-error { color:#ffb5bf; background:#b3334618; border:1px solid #ad4b5e55; border-radius:8px; padding:11px 13px; margin:15px 0 0; font-size:13px; }
.page-error { margin-bottom:20px; }
.notice { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:100; max-width:min(650px,calc(100vw - 36px)); background:#2c2845; border:1px solid #615689; padding:12px 20px; border-radius:10px; color:var(--text); box-shadow:0 12px 40px #0005; overflow-wrap:anywhere; }
dialog { width:min(540px,calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; background:var(--surface); color:var(--text); border:1px solid #3e4a5e; border-radius:15px; box-shadow:0 24px 90px #0007; }
dialog::backdrop { background:#050911b5; }
.wide-dialog { width:min(920px,calc(100vw - 32px)); }
.dialog-form { padding:26px; }
.dialog-header { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:18px; }
.dialog-header h2 { margin:0; font-size:20px; }
.icon-button { width:32px; height:32px; padding:0; background:transparent; color:var(--muted); font-size:26px; line-height:1; }
.dialog-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }
.input-hint { font-size:12px; color:var(--muted); margin:8px 0 0; }
.callout { background:#a393ff12; border-left:3px solid var(--primary); padding:12px 14px; border-radius:4px; margin:18px 0; font-size:13px; }
.callout.warning { color:var(--yellow); border-color:var(--yellow); }
.code-output { background:#111925; font-family:ui-monospace,Menlo,monospace; font-size:12px; }
.activation-code { font-size:19px; color:#c6b8ff; }
.configuration-password { font-size:20px; color:var(--green); letter-spacing:1px; }
.credential-row { display:flex; align-items:center; gap:10px; }
.credential-row input { flex:1; min-width:0; }
.credential-row button { flex-shrink:0; }
#code-expiry { font-size:13px; color:var(--yellow); margin-top:14px; }
.config-panel { max-width:940px; }
.button-row { display:flex; gap:10px; margin:16px 0; }
.audit-details { font:11px ui-monospace,Menlo,monospace; white-space:pre-wrap; max-width:360px; max-height:100px; overflow:auto; margin:0; }
.operation-entry { padding:14px 0; border-bottom:1px solid var(--border); font-size:13px; }
@media(max-width:1180px) { .workspace { padding:26px 24px 40px; } .metric-grid { gap:12px; } .metric-card { padding:17px; } .metric-value { font-size:24px; } .dashboard-grid { grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr); } .search-form { flex-wrap:wrap; } }
@media(max-width:900px) { .app-shell { grid-template-columns:190px minmax(0,1fr); } .sidebar { width:190px; padding-inline:12px; } .sidebar-brand { gap:8px; } .sidebar-brand strong { font-size:15px; } .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid { grid-template-columns:1fr; } .section-toolbar { align-items:flex-start; } .search-form input { max-width:none; } }
@media(max-width:680px) { .app-shell { display:block; } .sidebar { position:static; width:100%; height:auto; padding:18px; border-right:0; border-bottom:1px solid var(--border); } .sidebar-brand { padding:0 0 12px; } .sidebar nav { display:flex; flex-wrap:wrap; gap:4px; overflow:visible; } .sidebar .nav-button { width:auto; padding:8px 10px; font-size:12px; gap:5px; } .sidebar .nav-button span { font-size:15px; } .nav-caption { display:none; } .nav-group { flex-basis:100%; } .nav-group summary { padding:8px 10px; font-size:12px; } .nav-group .nav-button { display:inline-flex; } .sidebar-footer { position:absolute; top:22px; right:18px; margin:0; border:0; padding:0; font-size:11px; } #session-username { max-width:70px; } .workspace { padding:22px 16px 35px; } .page-header { gap:10px; } .header-actions { gap:7px; } .header-actions .small-text { display:none; } h1 { font-size:23px; } .intro-card { padding:19px; align-items:flex-start; flex-direction:column; } .intro-card h2 { font-size:21px; } .intro-card p { font-size:12px; } .panel { padding:19px; } .section-toolbar { flex-wrap:wrap; } .search-form { flex-basis:100%; } .search-form input { flex:1; } .metric-card { padding:16px; } .metric-value { font-size:23px; } .metric-note { font-size:10px; } .pagination { flex-wrap:wrap; } .attention-item { flex-wrap:wrap; } .attention-item>div { min-width:55%; } .detail-list { grid-template-columns:105px minmax(0,1fr); gap:12px; } .credential-row { flex-direction:column; align-items:stretch; } .dialog-form { padding:20px; } .tabs { gap:16px; } .tabs button { font-size:12px; } .login-card { padding:28px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }

.customer-device-inline { margin-top:8px; }
.customer-device-inline .quiet { font-size:11px; color:var(--primary); }
.order-device-row > td { padding:12px 17px 20px; background:#141d29; border-top:1px dashed var(--border); }
.order-device-card { display:grid; grid-template-columns:minmax(150px,1fr) minmax(160px,1fr) minmax(190px,1.2fr) auto; align-items:center; gap:16px; border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:8px; padding:15px 17px; margin:0 0 8px; }
.order-device-card:last-child { margin-bottom:0; }
.bound-device-identity .eyebrow { display:block; margin-bottom:4px; }
.order-device-card strong { font-size:12px; overflow-wrap:anywhere; }
.device-empty { color:var(--muted); margin:0; font-size:12px; padding:4px 0; }
.retired-devices summary { cursor:pointer; color:var(--muted); font-size:11px; margin:8px 0; }
@media(max-width:1250px) { .order-device-card { grid-template-columns:minmax(150px,1fr) minmax(160px,1fr); } .order-device-card .row-actions { justify-content:flex-start; } }