:root { --bg:#f4f6f8; --panel:#fff; --ink:#18202a; --muted:#697386; --line:#dfe4ea; --nav:#20262e; --accent:#0b7a64; --accent-dark:#075e4e; --danger:#c2413b; --warning:#a56105; --blue:#2e63b6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:14px/1.5 "Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:0; }
[hidden] { display:none !important; }
button,input,select,textarea { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
.sidebar { position:fixed; inset:0 auto 0 0; width:224px; padding:22px 14px; background:var(--nav); color:#d8dee7; display:flex; flex-direction:column; }
.brand { height:48px; display:flex; align-items:center; gap:12px; padding:0 10px; color:#fff; font-size:17px; font-weight:650; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; background:var(--accent); border-radius:5px; font-size:11px; }
nav { margin-top:26px; display:grid; gap:5px; }
.nav-item { height:42px; border:0; border-radius:5px; padding:0 13px; background:transparent; color:#b9c2ce; text-align:left; display:flex; align-items:center; gap:12px; }
.nav-item span { width:18px; text-align:center; font-size:17px; }
.nav-item:hover,.nav-item.active { color:#fff; background:#343c47; }
.sidebar-foot { margin-top:auto; padding:12px; display:flex; gap:9px; align-items:center; color:#9faab7; font-size:12px; border-top:1px solid #39414c; }
.dot { width:7px; height:7px; border-radius:50%; background:#48b98b; }
main { margin-left:224px; min-height:100vh; }
header { height:84px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }
.header-actions { display:flex; align-items:center; gap:10px; }.account-name { color:var(--muted); font-size:13px; padding-right:4px; }
h1,h2,p { margin:0; } h1 { font-size:21px; font-weight:650; } h2 { font-size:16px; } header p,.section-head p,.login-copy p { margin-top:3px; color:var(--muted); font-size:13px; }
#app { padding:26px 32px 44px; max-width:1500px; margin:auto; }
.page { display:none; } .page.active { display:block; }
.icon-button { width:36px; height:36px; border:1px solid var(--line); background:#fff; border-radius:5px; font-size:20px; color:#536071; }
.logged-out main { margin-left:0; }
.login-screen { min-height:100vh; padding:32px; display:grid; place-items:center; background:#eef2f5; }
.login-box { width:min(400px,100%); padding:30px; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 16px 44px #22304414; }
.login-brand { display:flex; align-items:center; gap:13px; padding-bottom:24px; margin-bottom:22px; border-bottom:1px solid var(--line); }.login-brand .brand-mark { width:38px; height:38px; color:#fff; }.login-brand h1 { font-size:19px; }.login-brand p { margin-top:2px; color:var(--muted); font-size:13px; }
.login-box form { display:grid; gap:16px; }.login-submit { width:100%; min-height:42px; margin-top:4px; }.login-submit:disabled { opacity:.65; cursor:wait; }
input,select,textarea { width:100%; border:1px solid #cfd6df; background:#fff; color:var(--ink); border-radius:5px; padding:9px 11px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px #0b7a6418; }
.primary,.secondary,.text-button { border:0; border-radius:5px; padding:9px 15px; white-space:nowrap; }
.primary { background:var(--accent); color:#fff; } .primary:hover { background:var(--accent-dark); }
.secondary { border:1px solid var(--line); background:#fff; color:var(--ink); }
.text-button { color:var(--accent); background:transparent; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(160px,1fr)); gap:14px; margin-bottom:28px; }
.metric { min-height:116px; padding:19px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.metric-label { color:var(--muted); font-size:13px; } .metric-value { margin-top:10px; font-size:27px; font-weight:680; font-variant-numeric:tabular-nums; }
.metric-sub { margin-top:4px; color:var(--muted); font-size:12px; }
.section-head { min-height:52px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.table-wrap { overflow:auto; border:1px solid var(--line); background:#fff; border-radius:6px; }
table { width:100%; border-collapse:collapse; min-width:780px; }
th,td { padding:12px 14px; border-bottom:1px solid #e9edf1; text-align:left; vertical-align:middle; }
th { background:#f8f9fb; color:#566273; font-size:12px; font-weight:650; }
tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:#fafbfc; }
.muted,.subline { color:var(--muted); font-size:12px; } .subline { margin-top:3px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge { display:inline-flex; align-items:center; min-width:55px; justify-content:center; border-radius:4px; padding:3px 7px; font-size:12px; font-weight:600; }
.badge.pending { color:var(--warning); background:#fff3df; }.badge.processing { color:var(--blue); background:#eaf1fc; }.badge.done { color:var(--accent-dark); background:#e5f4ef; }.badge.error { color:var(--danger); background:#faeaea; }.badge.disabled { color:#616b77; background:#e9edf1; }
.carrier { display:flex; align-items:center; gap:7px; }.carrier::before { content:""; width:8px; height:8px; border-radius:2px; background:#738090; }.carrier.移动::before { background:#1686c8; }.carrier.联通::before { background:#d13c3c; }.carrier.电信::before { background:#2361b5; }.carrier.广电::before { background:#20a064; }
.toolbar { display:grid; grid-template-columns:minmax(260px,1fr) 150px 150px auto; gap:9px; margin-bottom:15px; }
.inline-control { display:flex; gap:6px; align-items:center; }.inline-control select { min-width:90px; padding:6px; }.inline-control input { min-width:130px; padding:6px; }
.small-button { border:1px solid var(--line); border-radius:4px; background:#fff; color:#435063; padding:6px 9px; }
.settings-grid { display:grid; grid-template-columns:repeat(2, minmax(240px, 1fr)); gap:14px; max-width:820px; }
.rate-card,.group-card,.settings-block { padding:20px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.rate-card { display:grid; grid-template-columns:1fr 145px; align-items:center; gap:16px; }.rate-card h3,.group-card h3 { margin:0 0 4px; font-size:15px; }.rate-card p,.group-card p { color:var(--muted); margin:0; font-size:12px; }
.settings-grid .form-actions { grid-column:1/-1; }.settings-block { margin-bottom:16px; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }.form-grid .wide { grid-column:1/-1; }.field-help { margin:-7px 0 0; color:#6a7584; font-size:12px; }.checkbox-row { display:flex; align-items:center; gap:8px; width:max-content; }.checkbox-row input { width:16px; height:16px; margin:0; }
label { display:grid; gap:6px; color:#485466; font-size:13px; }.groups-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.group-card { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:12px; }.group-summary,.group-actions { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; }.group-counts { display:flex; gap:14px; color:var(--muted); font-size:12px; }.group-counts strong { color:var(--ink); font-size:17px; font-variant-numeric:tabular-nums; }.group-actions { padding-top:10px; border-top:1px solid #e9edf1; color:var(--muted); font-size:12px; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.switch input { display:none; }.switch span { width:42px; height:24px; border-radius:12px; background:#abb4c0; display:block; position:relative; transition:.2s; }.switch span::after { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; border-radius:50%; background:#fff; transition:.2s; }.switch input:checked + span { background:var(--accent); }.switch input:checked + span::after { transform:translateX(18px); }
dialog { border:0; border-radius:6px; padding:0; width:min(440px,calc(100vw - 32px)); box-shadow:0 20px 60px #17202c44; } dialog::backdrop { background:#1e273488; }.dialog-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } dialog form { padding:22px; display:grid; gap:14px; }
#toast { position:fixed; right:24px; bottom:24px; max-width:360px; padding:11px 16px; color:#fff; background:#27313d; border-radius:5px; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s; } #toast.show { opacity:1; transform:none; } #toast.error { background:var(--danger); }
.empty { padding:35px; text-align:center; color:var(--muted); }
.docs-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }.docs-intro p { color:var(--muted); margin-top:4px; }.docs-version { border:1px solid #bcd8d1; background:#edf7f4; color:var(--accent-dark); border-radius:4px; padding:3px 9px; font-weight:650; }
.docs-layout { display:grid; grid-template-columns:180px minmax(0,820px); gap:34px; align-items:start; padding-top:24px; }.docs-toc { position:sticky; top:20px; display:grid; border-left:1px solid var(--line); }.docs-toc a { padding:8px 12px; color:#536071; text-decoration:none; }.docs-toc a:hover { color:var(--accent); border-left:2px solid var(--accent); margin-left:-1px; }.docs-content { min-width:0; }.doc-section { scroll-margin-top:20px; padding:0 0 32px; margin-bottom:28px; border-bottom:1px solid var(--line); }.doc-section:last-child { border:0; }.doc-section h3 { margin:0 0 10px; font-size:18px; }.doc-section h4 { margin:18px 0 8px; font-size:13px; }.doc-section p { color:#485466; margin:0 0 12px; }.doc-section code { font:13px/1.6 Consolas,"Courier New",monospace; color:#1d4b43; }.code-block,pre { overflow:auto; margin:12px 0; padding:15px 17px; border:1px solid #d8e0e6; border-radius:5px; background:#f7f9fa; }.code-block code { color:#314052; }.doc-note { padding:11px 13px; border-left:3px solid var(--accent); background:#edf7f4; color:#36534d; }.api-table { overflow:auto; border:1px solid var(--line); border-radius:5px; }.api-table table { min-width:620px; }.api-table th,.api-table td { padding:10px 12px; }.api-table tbody th { width:130px; background:#f8f9fb; color:#566273; }.endpoint { display:flex; align-items:center; gap:10px; padding:10px 13px; background:#f3f6f8; border-radius:5px; }.endpoint span { color:var(--accent-dark); font-weight:700; }
@media(max-width:900px){.sidebar{width:72px}.brand span:last-child,.nav-item:not(.active){font-size:0}.nav-item{justify-content:center;padding:0}.nav-item.active{font-size:0}.nav-item span{font-size:18px}.sidebar-foot span:last-child{display:none}main{margin-left:72px}.logged-out main{margin-left:0}header{padding:0 18px}#app{padding:18px}.metrics{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr 1fr}.toolbar input{grid-column:1/-1}.form-grid,.groups-grid{grid-template-columns:1fr}.group-card{grid-template-columns:1fr}.docs-layout{grid-template-columns:1fr}.docs-toc{position:static;display:flex;overflow:auto;border-left:0;border-bottom:1px solid var(--line)}.docs-toc a{white-space:nowrap}}
@media(max-width:560px){.metrics,.settings-grid{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr}.toolbar input{grid-column:auto}.rate-card{grid-template-columns:1fr}header p{display:none}}