:root { color-scheme:light; --page:#f4f6fa; --surface:#fff; --ink:#202a40; --muted:#68758b; --line:#e5e9f1; --blue:#365be8; --blue-light:#eef2ff; --green:#197c61; --green-light:#edf8f2; --amber:#a46416; --amber-light:#fff7e8; --red:#c03d4a; --red-light:#fff1f2; --radius:16px; --body:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif; --number:"Bahnschrift","DIN Alternate","Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink); font:14px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; }
h1 { font-size:27px; line-height:1.3; letter-spacing:-.7px; font-weight:700; }
h2 { font-size:16px; font-weight:650; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:1px solid transparent; background:none; color:inherit; border-radius:9px; min-height:38px; padding:8px 14px; transition:background .15s,border-color .15s; }
button:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #91a7ff; outline-offset:3px; }
input:focus,select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px #365be81a; }
input,select { width:100%; min-height:42px; border:1px solid #dbe1eb; border-radius:9px; padding:10px 12px; background:white; color:var(--ink); }
input::placeholder { color:#929aab; }
input[type=checkbox] { width:16px; min-height:16px; height:16px; padding:0; accent-color:var(--blue); }
label { display:grid; gap:7px; font-size:13px; font-weight:500; }
.hidden,[hidden],.mobile-only { display:none!important; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:middle; }
.muted,.footnote { color:var(--muted); font-size:13px; }
.primary,.quiet { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; font-size:13px; font-weight:600; }
.primary { background:var(--blue); color:white; padding:10px 16px; border-radius:9px; border:1px solid var(--blue); min-height:40px; }
.primary:hover { background:#294bcc; }
.quiet { background:white; border-color:#dce2eb; }
.quiet:hover { background:#f8faff; border-color:#b7c5ee; }
.text-link,.text-button { color:var(--blue); font-size:13px; font-weight:600; }
.text-button { padding:5px 7px; min-height:32px; }
.text-link:hover,.text-button:hover { text-decoration:underline; }
.button-group { display:flex; align-items:center; gap:10px; }
.icon-button { font-size:26px; line-height:1; width:36px; min-height:36px; padding:2px; color:var(--muted); }
.icon-button:hover { background:var(--page); }
.error { color:var(--red); font-size:13px; overflow-wrap:anywhere; }
.error:empty { display:none; }
.error-banner { padding:12px 16px; border:1px solid #f4c6cb; border-radius:10px; background:var(--red-light); color:var(--red); margin-bottom:20px; overflow-wrap:anywhere; }
.warning-text { color:var(--amber)!important; }
.skip-link { position:fixed; top:-60px; left:240px; z-index:100; background:var(--blue); color:white; padding:12px; }
.skip-link:focus { top:10px; }
.startup-panel { min-height:100vh; display:flex; align-items:center; justify-content:center; gap:14px; flex-direction:column; color:var(--muted); }
.spinner { width:25px; height:25px; border:3px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.login-panel { width:min(430px,calc(100% - 36px)); margin:10vh auto 50px; background:white; padding:36px; border:1px solid var(--line); border-radius:22px; box-shadow:0 16px 60px #26385808; }
.brand-mark { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; background:var(--blue); color:white; flex-shrink:0; }
.brand-mark .icon { width:23px; height:23px; }
.login-brand { font-size:15px; font-weight:650; margin:18px 0 28px; }
.login-brand span { margin-left:8px; color:var(--muted); font-size:12px; font-weight:400; }
.login-panel>p { color:var(--muted); margin:10px 0 25px; font-size:13px; }
.stack-form { display:grid; gap:18px; }
.stack-form>.primary { margin-top:4px; }
.login-foot { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; display:flex; align-items:center; gap:6px; }
.login-foot .icon { width:15px; }
.sidebar { width:218px; position:fixed; inset:0 auto 0 0; background:white; border-right:1px solid var(--line); padding:30px 18px 18px; display:flex; flex-direction:column; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; padding:0 10px; font-size:18px; font-weight:700; line-height:1.3; }
.brand small { display:block; color:var(--muted); font-size:11px; letter-spacing:.6px; margin-top:4px; font-weight:400; }
.nav-label { font-size:11px; color:#9099a8; margin:42px 14px 12px; }
.side-nav { display:grid; gap:7px; }
.side-nav>a { display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:45px; border-radius:9px; color:#5d6980; font-size:14px; font-weight:500; }
.side-nav>a:hover { background:#f6f8fc; }
.side-nav>a[aria-current=page] { color:var(--blue); background:var(--blue-light); font-weight:650; }
.side-nav b { font:12px var(--number); margin-left:auto; background:#e9edf5; color:#67738a; padding:2px 7px; border-radius:5px; }
.side-nav>a[aria-current=page] b { background:#dfe6ff; color:var(--blue); }
.sidebar-bottom { margin-top:auto; }
.sidebar-tip { padding:18px 14px; background:#f8f9fc; border-radius:12px; color:var(--muted); font-size:12px; margin-bottom:20px; }
.sidebar-tip strong { margin-left:8px; font-size:12px; font-weight:500; color:#53627a; }
.sidebar-tip p { margin-top:9px; line-height:1.8; }
.logout-button { display:flex; align-items:center; width:100%; text-align:left; gap:10px; padding:12px 8px; border-top:1px solid var(--line); border-radius:0; font-size:13px; }
.logout-button:hover { background:var(--page); }
.logout-button small { display:block; color:var(--muted); font-size:11px; }
.logout-button>.icon { margin-left:auto; width:17px; }
.avatar { width:32px; height:32px; display:grid; place-items:center; color:#596985; background:#edf0f6; border-radius:50%; font-size:12px; }
.main-content { margin-left:218px; min-height:100vh; outline:none; }
.topbar { height:72px; border-bottom:1px solid var(--line); background:#ffffffd9; padding:0 34px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.breadcrumb { font-size:12px; color:#8490a2; }
.breadcrumb span { margin:0 12px; color:#c1c9d6; }
.breadcrumb b { font-weight:500; color:#4a5870; }
.top-actions { display:flex; align-items:center; gap:20px; }
.top-actions .quiet { font-weight:500; min-height:34px; padding:6px 11px; }
.status-pill { font-size:12px; color:var(--green); display:inline-flex; gap:7px; align-items:center; white-space:nowrap; }
.status-pill i,.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; color:var(--green); }
.status-pill.pending,.status-pill.pending i { color:var(--muted); }
.status-pill.failed,.status-pill.failed i { color:var(--red); }
.workspace { padding:28px 34px 18px; max-width:1530px; margin:auto; }
.page-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:26px; }
.page-heading p { margin-top:8px; color:var(--muted); font-size:13px; }
.sync-stamp { color:#7f8b9e; font-size:12px; white-space:nowrap; }
.page-view { min-width:0; }
.panel,.route-panel,.metric-card,.subscription-card,.history-stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 2px 4px #25385d02; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; }
.panel-heading h2 { display:flex; align-items:center; gap:9px; }
.panel-heading p { margin-top:5px; }
.panel-heading h2 .icon { color:var(--blue); }
.panel-foot { font-size:11px; color:var(--muted); padding:14px 24px; border-top:1px solid var(--line); background:#fbfcfe; border-radius:0 0 var(--radius) var(--radius); }
.route-panel { overflow:hidden; border-color:#dce3f5; }
.route-panel>.panel-heading { padding-bottom:0; }
.soft-badge { font-size:11px; color:var(--blue); background:var(--blue-light); padding:4px 10px; border-radius:6px; }
.route-main { display:flex; align-items:center; gap:24px; padding:26px 24px 30px; }
.route-origin { display:flex; gap:12px; align-items:center; flex-shrink:0; }
.route-origin strong { font-size:14px; font-weight:600; }
.route-origin span:not(.route-icon) { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.route-icon { display:grid; place-items:center; width:44px; height:44px; background:#f1f4fa; border-radius:12px; color:#7a89a6; }
.route-line { display:flex; align-items:center; gap:3px; flex:0 1 110px; min-width:35px; color:#a3b6f1; }
.route-line span { height:2px; width:100%; background:repeating-linear-gradient(90deg,#b8c7f5 0 5px,transparent 5px 10px); }
.route-line .icon { width:16px; }
.route-destination { flex:1; min-width:0; }
.current-node { font-size:24px; line-height:1.35; font-weight:650; letter-spacing:-.5px; overflow-wrap:anywhere; }
.current-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:8px; }
.current-meta>span+span { border-left:1px solid var(--line); padding-left:12px; }
.route-foot { display:flex; align-items:center; justify-content:space-between; gap:15px; background:#f9faff; border-top:1px solid #edf0f8; padding:11px 24px; font-size:12px; color:#64728f; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:20px 0; }
.metric-card { padding:22px; display:flex; gap:15px; align-items:flex-start; }
.metric-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; flex-shrink:0; }
.blue { color:var(--blue); background:var(--blue-light); }
.green { color:var(--green); background:var(--green-light); }
.amber { color:var(--amber); background:var(--amber-light); }
.card-label { font-size:12px; color:var(--muted); }
.metric { font:600 28px/1.2 var(--number); margin:8px 0; letter-spacing:-.6px; }
.metric-card p { font-size:11px; color:var(--muted); line-height:1.6; }
.overview-columns { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; }
.overview-subscriptions { padding:0 24px 8px; }
.overview-sub-row { display:grid; grid-template-columns:1fr auto; gap:10px 20px; padding:16px 0; border-top:1px solid #edf0f5; }
.overview-sub-name { font-weight:600; display:flex; align-items:center; gap:9px; overflow-wrap:anywhere; }
.source-avatar { width:31px; height:31px; display:inline-grid; place-items:center; background:var(--blue-light); color:var(--blue); border-radius:9px; font-size:13px; font-weight:600; flex-shrink:0; }
.source-avatar.tone-1 { color:var(--amber); background:var(--amber-light); }
.overview-sub-amount { text-align:right; font:600 18px var(--number); }
.overview-sub-amount small { display:block; font:11px var(--body); color:var(--muted); margin-top:2px; }
.overview-sub-row .bar { grid-column:1/-1; margin:0; }
.overview-sub-row .mini-facts { grid-column:1/-1; display:flex; justify-content:space-between; font-size:11px; color:var(--muted); gap:12px; }
.attention-list { padding:0 24px 15px; min-height:166px; }
.attention-item { display:flex; gap:10px; padding:13px 0; border-top:1px solid #edf0f5; font-size:12px; }
.attention-item>span { display:grid; place-items:center; background:var(--amber-light); color:var(--amber); width:26px; height:26px; border-radius:50%; flex-shrink:0; font-weight:700; }
.attention-item.healthy>span { background:var(--green-light); color:var(--green); }
.attention-item strong { font-size:13px; font-weight:550; }
.attention-item p { color:var(--muted); font-size:12px; margin-top:4px; line-height:1.7; overflow-wrap:anywhere; }
.count-badge { display:inline-block; border-radius:6px; padding:2px 8px; background:#f0f3f8; color:var(--muted); font:12px/1.5 var(--number); vertical-align:middle; margin-left:6px; }
.section-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.section-toolbar p { margin-top:5px; font-size:12px; }
.subscription-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.subscription-card { padding:24px; min-width:0; }
.subscription-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.subscription-identity { display:flex; align-items:center; gap:11px; min-width:0; }
.subscription-name { font-size:16px; font-weight:650; overflow-wrap:anywhere; }
.subscription-updated { color:var(--muted); font-size:11px; margin-top:3px; }
.subscription-status { display:flex; align-items:center; gap:5px; font-size:11px; white-space:nowrap; background:var(--green-light); color:var(--green); border-radius:5px; padding:3px 7px; }
.subscription-status i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.subscription-status.failed { color:var(--red); background:var(--red-light); }
.subscription-status.pending { color:var(--muted); background:#f1f3f7; }
.quota-line { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-top:26px; }
.quota-line strong { display:block; font:600 30px/1.3 var(--number); letter-spacing:-.6px; }
.quota-line span { display:block; color:var(--muted); font-size:12px; margin-bottom:4px; }
.quota-line b { font-size:12px; font-weight:500; color:var(--muted); }
.bar { height:6px; border-radius:5px; background:#edf0f6; overflow:hidden; margin:17px 0 10px; }
.bar>i { display:block; height:100%; border-radius:5px; background:var(--blue); }
.bar.tone-1>i { background:#d7a34c; }
.bar.low>i { background:var(--red); }
.quota-facts { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.subscription-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:17px; margin-top:22px; }
.subscription-foot>.expiry { font-size:12px; color:var(--muted); }
.subscription-foot .quiet { min-height:34px; font-size:12px; padding:6px 10px; }
.subscription-foot .text-button { font-size:12px; }
.subscription-error { margin-top:15px; font-size:12px; padding:10px; background:var(--red-light); color:var(--red); border-radius:8px; overflow-wrap:anywhere; }
.quota-missing { padding:35px 0 20px; color:var(--muted); }
.info-note { display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:12px; line-height:1.9; padding:17px 2px; }
.info-note .icon { margin-top:3px; color:#8c9ab1; width:17px; }
.info-note strong { font-weight:600; color:#50617c; }
.empty-card { padding:40px 24px; text-align:center; grid-column:1/-1; color:var(--muted); }
.empty-card h3 { color:var(--ink); font-size:16px; margin-bottom:8px; }
.empty-card .primary { margin-top:20px; }
.current-strip { display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--blue-light); border:1px solid #dfe6fb; border-radius:10px; margin-bottom:20px; font-size:12px; flex-wrap:wrap; }
.current-strip strong { color:#304dac; font-weight:600; font-size:13px; margin-left:7px; overflow-wrap:anywhere; }
.current-strip>.muted { margin-left:auto; font-size:11px; }
.node-panel { overflow:hidden; }
.node-toolbar { display:grid; grid-template-columns:minmax(190px,1.6fr) repeat(3,minmax(110px,1fr)); gap:14px; padding:22px 24px 14px; }
.node-toolbar label>span { font-size:11px; color:var(--muted); }
.search-input { position:relative; }
.search-input input { padding-left:36px; }
.search-input>.icon { position:absolute; left:12px; top:12px; width:16px; color:#8b96a8; }
.node-toolbar input,.node-toolbar select { font-size:12px; min-height:40px; }
.filter-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 24px 16px; }
.filter-summary>.muted { font-size:11px; }
.filter-summary>div { display:flex; align-items:center; gap:12px; }
.toggle-control { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); font-weight:400; }
.node-table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:left; }
th { font-weight:500; font-size:11px; color:#78859a; background:#f8f9fc; padding:12px 22px; border-block:1px solid var(--line); white-space:nowrap; }
td { padding:16px 22px; border-bottom:1px solid #edf0f5; font-size:12px; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fafbff; }
tr.current-row { background:#f4f7ff; }
tr.current-row>td:first-child { box-shadow:inset 3px 0 var(--blue); }
.node-name { font-size:13px; font-weight:600; overflow-wrap:anywhere; max-width:360px; }
.node-source { color:#8994a6; font-size:10px; margin-top:4px; }
.source-chip { font-size:11px; color:#61718d; padding:3px 7px; background:#f1f3f8; border-radius:5px; overflow-wrap:anywhere; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:5px; font-size:11px; white-space:nowrap; }
.badge.ok,.badge.fast { color:var(--green); background:var(--green-light); }
.badge.warn,.badge.slow { color:var(--red); background:var(--red-light); }
.badge.medium { color:var(--amber); background:var(--amber-light); }
.badge.unknown { color:#7e899d; background:#f0f2f6; }
.delay-badge { font-family:var(--number); }
.node-actions { display:flex; gap:8px; justify-content:flex-end; white-space:nowrap; }
.node-actions button { font-size:12px; min-height:32px; padding:5px 11px; border-color:#dfe5ef; background:white; }
.node-actions button:hover:not(:disabled) { color:var(--blue); border-color:#a8b9f8; }
.node-actions .select-node { color:var(--blue); background:var(--blue-light); border-color:transparent; }
.node-actions .selected { color:var(--green); background:var(--green-light); opacity:1; }
.actions-heading { text-align:right; }
.table-empty { padding:35px; text-align:center; color:var(--muted); }
.node-pager { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:16px 22px; border-top:1px solid var(--line); }
.node-pager:empty { display:none; }
.page-numbers { display:flex; gap:4px; align-items:center; }
.page-button { font-size:11px; min-height:30px; padding:5px 9px; border:1px solid var(--line); border-radius:6px; }
.page-button.active { background:var(--blue); color:white; border-color:var(--blue); }
.page-total { color:var(--muted); font-size:11px; margin:0 5px; }
.footnote { font-size:11px; margin:14px 2px; }
.range-switch { display:flex; gap:3px; background:#e9edf5; padding:4px; border-radius:10px; flex-shrink:0; }
.range-switch button { font-size:12px; color:#66748e; min-height:33px; padding:6px 14px; border-radius:7px; }
.range-switch button.active { background:white; color:var(--blue); box-shadow:0 1px 4px #1e305a10; font-weight:600; }
.history-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-bottom:20px; }
.history-stat { padding:21px 24px; position:relative; }
.history-name { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.history-name i,.chart-legend i { width:8px; height:8px; border-radius:3px; display:inline-block; flex-shrink:0; }
.history-value { font:600 28px/1.3 var(--number); margin-top:15px; letter-spacing:-.5px; }
.history-caption { font-size:11px; color:var(--muted); margin-top:4px; }
.history-detail { font-size:12px; color:#566683; margin-top:17px; padding-top:12px; border-top:1px solid var(--line); }
.history-remaining { font-size:11px; color:var(--muted); margin-top:5px; }
.trend-panel { padding:24px; }
.chart-explainer { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.chart-explainer>div:first-child { display:grid; gap:6px; }
.chart-explainer strong { font-size:15px; font-weight:600; }
.chart-explainer span { font-size:11px; color:var(--muted); }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px; }
.chart-legend span { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.chart-scroll { overflow-x:auto; margin-top:16px; }
.history-chart svg { display:block; width:100%; height:auto; min-width:560px; max-height:310px; }
.chart-grid line { stroke:#e9edf4; stroke-width:1; }
.chart-grid text,.chart-axis text { fill:#7b879b; font:11px var(--body); }
.consumption-bar { opacity:.87; }
.consumption-bar:hover { opacity:1; }
.chart-empty { text-align:center; padding:60px 25px; color:var(--muted); font-size:13px; }
.chart-empty.compact { padding:40px 25px; }
.history-details { margin-top:20px; overflow:hidden; }
.history-table { overflow:auto; max-height:420px; }
.history-table td { font-family:var(--number); white-space:nowrap; }
.history-table td:first-child { font:11px var(--body); color:var(--muted); }
.history-table .delta-total { font-weight:650; color:var(--blue); }
.process-details { border:1px solid var(--line); border-radius:10px; background:#fafbfe; font-size:12px; color:var(--muted); }
.process-details summary { padding:14px 18px; cursor:pointer; }
.process-details>div { padding:0 18px 15px; }
.process-details strong { font-family:var(--number); color:var(--ink); margin:0 25px 0 8px; }
.process-details p { font-size:11px; margin-top:8px; }
.workspace-footer { display:flex; justify-content:space-between; gap:14px; color:#929db0; font-size:10px; padding:28px 0 5px; }
dialog { padding:0; width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 36px); border:1px solid var(--line); border-radius:20px; background:white; color:var(--ink); box-shadow:0 24px 80px #1b285f24; }
dialog::backdrop { background:#202a4059; backdrop-filter:blur(3px); }
.dialog-card { padding:28px; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.dialog-card h2 { font-size:21px; }
.dialog-card>p { font-size:12px; margin-top:7px; }
.dialog-card>label { margin-top:20px; }
.dialog-card>.error { margin-top:16px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:26px; }
.field-hint { color:var(--muted); font-size:11px; line-height:1.8; }
.switch-preview { display:grid; gap:14px; background:#f6f8fc; border-radius:12px; padding:18px; margin:20px 0; }
.switch-preview>div { display:grid; gap:4px; }
.switch-preview span { font-size:11px; color:var(--muted); }
.switch-preview strong { font-size:15px; overflow-wrap:anywhere; }
.switch-preview>.icon { transform:rotate(90deg); color:var(--blue); width:16px; }
.toast { position:fixed; bottom:26px; left:calc(50% + 109px); transform:translate(-50%,15px); padding:13px 20px; background:#243348; color:white; font-size:13px; border-radius:11px; box-shadow:0 6px 30px #17264225; z-index:100; opacity:0; pointer-events:none; transition:opacity .16s,transform .16s; max-width:min(620px,calc(100vw - 40px)); text-align:center; overflow-wrap:anywhere; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error-toast { background:#a33240; }
@media(min-width:1650px) {
  .workspace { padding-top:36px; } .route-main { padding-block:32px; } .metric-card { padding:26px; }
}
@media(max-width:1150px) {
  .sidebar { width:188px; padding-inline:12px; } .main-content { margin-left:188px; }
  .workspace,.topbar { padding-inline:24px; } .brand { font-size:16px; }
  .route-main { gap:16px; } .route-line { flex-basis:55px; } .current-node { font-size:21px; }
  .metric-card { padding:18px; gap:11px; } .metric-icon { width:34px; height:34px; }
  .metric { font-size:25px; } .metric-card .metric-icon { display:none; }
  td,th { padding-inline:16px; } .toast { left:calc(50% + 94px); }
}
@media(max-width:900px) {
  .sidebar { width:76px; padding:24px 10px; } .brand { padding:0; justify-content:center; }
  .brand>span:last-child,.nav-label,.side-nav a>span,.side-nav b,.sidebar-tip,.logout-button>span,.logout-button small { display:none; }
  .side-nav { margin-top:35px; } .side-nav>a { justify-content:center; padding:13px 10px; }
  .side-nav>a:focus-visible { outline-offset:0; } .side-nav>a[aria-current=page] { box-shadow:inset 3px 0 var(--blue); }
  .logout-button { justify-content:center; } .logout-button>.icon { margin:0; }
  .main-content { margin-left:76px; } .overview-columns { grid-template-columns:1fr; }
  .overview-columns>.panel { min-width:0; } .attention-list { min-height:0; }
  .route-origin,.route-line { display:none; } .route-main { padding-top:22px; }
  .node-toolbar { grid-template-columns:repeat(3,minmax(0,1fr)); } .node-toolbar .search-control { grid-column:1/-1; }
  .filter-summary { align-items:flex-start; flex-direction:column; } .subscription-card { padding:20px; }
  .subscription-status { font-size:10px; } .subscription-identity { gap:8px; }
  .subscription-identity>.source-avatar { display:none; } .quota-line strong { font-size:26px; }
  .subscription-foot { flex-wrap:wrap; } .toast { left:calc(50% + 38px); } .skip-link { left:90px; }
}
@media(max-width:620px) {
  h1 { font-size:24px; } .mobile-only { display:inline-flex!important; }
  .sidebar { position:fixed; inset:auto 0 0; width:100%; height:67px; height:calc(67px + env(safe-area-inset-bottom)); padding:6px 10px calc(6px + env(safe-area-inset-bottom)); border-right:0; border-top:1px solid var(--line); box-shadow:0 -3px 15px #172a5105; }
  .sidebar>.brand,.sidebar-bottom { display:none; }
  .side-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:0; }
  .side-nav>a { display:flex; flex-direction:column; gap:3px; padding:6px 3px; min-height:51px; font-size:10px; line-height:1.2; }
  .side-nav a>span { display:block; } .side-nav>a[aria-current=page] { box-shadow:none; } .side-nav .icon { width:19px; height:19px; }
  .main-content { margin-left:0; padding-bottom:75px; } .topbar { height:58px; padding-inline:18px; }
  .top-actions { gap:8px; } .status-pill { font-size:10px; } .top-actions .quiet { font-size:11px; padding:6px 9px; }
  .breadcrumb { font-size:11px; } .breadcrumb span { margin:0 7px; }
  .workspace { padding:22px 16px 12px; } .page-heading { margin-bottom:20px; align-items:flex-start; gap:10px; }
  .page-heading p { font-size:12px; max-width:240px; } .sync-stamp { font-size:10px; white-space:normal; max-width:88px; text-align:right; margin-top:5px; }
  .route-panel>.panel-heading { padding:18px 18px 0; } .route-main { padding:20px 18px; gap:12px; flex-wrap:wrap; }
  .route-destination { flex-basis:100%; } .current-node { font-size:23px; }
  .route-main>.primary { margin-top:6px; width:100%; font-size:12px; min-height:38px; padding:8px; }
  .route-foot { padding:12px 18px; align-items:flex-start; font-size:11px; } .route-foot>span:first-child { max-width:240px; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; } .metric-card { padding:16px; }
  .metric-card:last-child { grid-column:1/-1; } .metric-card:last-child .metric-icon { display:inline-flex; }
  .metric-card:last-child>div { display:grid; grid-template-columns:1fr auto; column-gap:18px; width:100%; }
  .metric-card:last-child .metric { grid-column:2; grid-row:1/3; align-self:center; margin:0; } .metric-card:last-child p { grid-column:1; }
  .metric { font-size:24px; } .card-label { font-size:11px; } .metric-card p { font-size:10px; }
  .panel-heading { padding:18px; } .panel-heading h2 { font-size:15px; } .panel-foot { padding:12px 18px; font-size:10px; }
  .overview-columns { gap:14px; } .overview-subscriptions,.attention-list { padding-inline:18px; }
  .section-toolbar { align-items:flex-start; flex-direction:column; gap:16px; } .section-toolbar .button-group { width:100%; }
  .section-toolbar .button-group>button { flex:1; } .subscription-grid { grid-template-columns:1fr; gap:14px; }
  .subscription-card { padding:20px; } .subscription-identity>.source-avatar { display:inline-grid; } .subscription-status { font-size:11px; }
  .quota-line strong { font-size:30px; } .subscription-foot { flex-wrap:nowrap; }
  .current-strip { gap:7px; padding:12px; font-size:11px; } .current-strip>.muted { margin-left:14px; width:100%; } .current-strip strong { font-size:12px; }
  .node-toolbar { padding:16px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .node-toolbar .search-control,.node-toolbar>label:nth-of-type(4),#toggleNodeFilters { grid-column:1/-1; } .node-toolbar label>span { font-size:11px; }
  .node-toolbar>label:not(.search-control) { display:none; } .node-toolbar.filters-open>label { display:grid; }
  #toggleNodeFilters { min-height:34px; padding:5px; font-size:12px; background:#f8f9fc; }
  .node-toolbar input,.node-toolbar select { font-size:13px; } .filter-summary { padding:0 16px 14px; gap:9px; }
  .filter-summary>div { justify-content:space-between; width:100%; }
  .node-table-wrap table,.node-table-wrap tbody { display:block; } .node-table-wrap thead { display:none; }
  .node-table-wrap tr { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:15px 16px; border-top:1px solid var(--line); gap:11px 10px; }
  .node-table-wrap td { display:flex; padding:0; border:0; align-items:center; gap:8px; min-width:0; }
  .node-table-wrap td:first-child { display:block; grid-column:1/-1; box-shadow:none; } .node-name { font-size:14px; max-width:none; }
  .node-table-wrap td:nth-child(2) { grid-column:1/-1; } .node-table-wrap td:nth-child(2)::before { content:'订阅'; font-size:11px; color:var(--muted); }
  .node-table-wrap td:nth-child(5) { grid-column:1/-1; justify-content:flex-end; margin-top:2px; }
  .node-table-wrap .current-row { box-shadow:inset 3px 0 var(--blue); } .node-actions button { min-height:36px; padding:7px 18px; }
  .node-table-wrap tr.current-row>td:first-child { box-shadow:none; }
  .node-pager { justify-content:space-between; padding:15px 12px; gap:4px; } .page-total { display:none; } .page-numbers { gap:3px; }
  .page-button { font-size:11px; padding:5px 8px; min-height:34px; } .table-empty { font-size:12px; padding:20px 0; }
  .range-switch { width:100%; } .range-switch button { flex:1; } .history-summary { grid-template-columns:1fr; gap:12px; }
  .history-stat { padding:18px; display:grid; grid-template-columns:1fr auto; column-gap:12px; }
  .history-value { grid-row:1/3; grid-column:2; margin:0; align-self:center; font-size:25px; }
  .history-detail,.history-remaining { grid-column:1/-1; } .history-detail { margin-top:13px; } .trend-panel { padding:18px; }
  .chart-explainer { flex-direction:column; gap:12px; } .history-chart svg { min-width:480px; max-height:none; } .chart-scroll { margin-right:-6px; }
  .history-details .panel-heading { gap:8px; align-items:flex-start; } .history-details .panel-heading p { font-size:11px; }
  .history-details .text-button { font-size:11px; white-space:nowrap; } .history-table th,.history-table td { padding:12px; }
  .info-note { font-size:11px; } .workspace-footer { padding-top:22px; font-size:9px; } .workspace-footer>span:last-child { display:none; }
  .toast { left:50%; bottom:88px; font-size:12px; } .dialog-card { padding:24px; } .dialog-actions { gap:8px; }
  .dialog-actions button { font-size:12px; padding-inline:12px; } .skip-link { left:15px; } .login-panel { padding:28px; margin-top:6vh; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.business-panel { padding:22px 24px 18px; margin-bottom:18px; }
.business-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.business-heading h2 { font-size:17px; }
.business-heading p { font-size:12px; margin-top:5px; }
.business-heading button { flex-shrink:0; }
.business-controls { display:flex; align-items:center; gap:12px; margin:20px 0 14px; }
.business-controls label { font-weight:600; font-size:13px; }
.business-controls select { min-width:185px; width:auto; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.business-controls>span { color:var(--muted); font-size:12px; }
.business-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.business-filter { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--line); padding:12px 15px; background:#fafbfe; text-align:left; }
.business-filter span { color:var(--muted); font-size:12px; }
.business-filter strong { font:600 24px/1 var(--number); }
.business-filter.active { border-color:var(--blue); background:var(--blue-light); box-shadow:inset 0 0 0 1px var(--blue); }
.business-filter.active span,.business-filter.active strong { color:var(--blue); }
.business-filter[data-business="ready"]:not(.active) strong { color:var(--green); }
.business-filter[data-business="blocked"]:not(.active) strong { color:var(--red); }
.business-caution { color:var(--muted); font-size:12px; margin-top:14px; line-height:1.7; }
.check-progress { margin-top:14px; padding:10px 13px; border-radius:8px; color:var(--blue); background:var(--blue-light); font-size:12px; }
.business-table table { min-width:930px; }
.business-table th,.business-table td { padding:16px 14px; }
.business-table .node-name { max-width:190px; }
.business-table .node-source { font-size:10px; white-space:normal; }
.business-table .delay-badge { font-size:10px; padding:1px 4px; }
.business-table .check-cell { min-width:128px; }
.business-table .check-cell small { display:block; color:var(--muted); font:10px var(--body); margin-top:6px; }
.business-table .check-cell .badge { font-size:11px; white-space:nowrap; }
.business-table .target-cell { background:#f5f7ff; }
.badge.failed-check { color:var(--red); background:var(--red-light); }
.business-table .node-actions { white-space:nowrap; gap:6px; }
.business-table .node-actions button { min-height:32px; font-size:11px; padding:5px 10px; }
.business-table .measure-delay { color:var(--muted); font-size:10px; min-height:24px; padding:3px 4px; float:right; }
.check-detail-name { font-weight:600; overflow-wrap:anywhere; margin:8px 0 18px; }
.check-detail { border-top:1px solid var(--line); padding:16px 0; }
.check-detail>div { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.check-detail p { font-size:12px; color:var(--muted); margin:8px 0; }
.check-detail small { font-size:11px; color:var(--muted); }
.switch-risk { display:flex!important; align-items:flex-start; gap:10px; padding:12px; border:1px solid #ebd19f; border-radius:9px; background:var(--amber-light); font-size:12px; }
.switch-risk input { width:16px; height:16px; margin-top:3px; flex-shrink:0; }
.switch-risk.hidden { display:none!important; }
@media(max-width:900px) { .business-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .business-controls { flex-wrap:wrap; } .business-controls>span { flex-basis:100%; } }
@media(max-width:620px) {
  .business-panel { padding:17px; }
  .business-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .business-heading h2 { font-size:16px; }
  .business-heading button { width:100%; }
  .business-heading p,.business-caution { font-size:11px; }
  .business-controls { margin-top:14px; gap:8px; }
  .business-controls select { flex:1; min-width:0; font-size:13px; }
  .business-controls>span { font-size:11px; }
  .business-filter { padding:12px; gap:7px; }
  .business-filter span { font-size:11px; }
  .business-filter strong { font-size:23px; }
  .business-table table { min-width:0; }
  .business-table td { padding:0; }
  .business-table .node-name { max-width:none; }
  .business-table td.check-cell { grid-column:1/-1; min-width:0; justify-content:space-between; padding:8px 9px; border-radius:6px; }
  .business-table td.check-cell::before { content:attr(data-label); font-size:11px; color:var(--muted); }
  .business-table td.check-cell>div { display:flex; align-items:center; gap:8px; }
  .business-table td.check-cell small { margin:0; font-size:9px; }
  .business-table td:nth-child(5) { margin:0; }
  .business-table td:nth-child(6) { grid-column:1/-1; justify-content:space-between; flex-direction:row-reverse; }
  .business-table .node-actions button { min-height:36px; padding:7px 14px; }
  .business-table .measure-delay { font-size:11px; }
}