:root { --bg:#f3f7fc;--paper:#fff;--ink:#172b4d;--muted:#5d6d85;--line:#dce5f0;--accent:#1764dc;--soft:#edf4ff;--warn:#9a6209;--success:#187554;--danger:#b72a39;color-scheme:light;font-family:Inter,'SF Pro Display','PingFang SC','Microsoft YaHei',sans-serif;font-size:14px;line-height:1.55;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--bg)}
* { box-sizing:border-box}
body { margin:0}
button,input,select,textarea { font:inherit;color:inherit;max-width:100%;border:1px solid var(--line);background:white;border-radius:6px;min-height:38px;padding:8px 12px;line-height:1.4}
button,select { cursor:pointer}
button { font-weight:500}
button:hover:not(:disabled) { background:#f4f8ff;border-color:#84b1f2;color:#1459c3}
button:disabled,select:disabled,input:disabled { cursor:not-allowed;opacity:.55;background:#f1f4f8}
button.primary,.primary { background:var(--accent);border-color:var(--accent);color:white;font-weight:600}
button.primary:hover:not(:disabled) { background:#1255c1;color:white}
.danger { color:var(--danger)}
input[type=checkbox] { min-height:16px;width:16px;height:16px;padding:0;accent-color:var(--accent)}
textarea { resize:vertical}
a { color:var(--accent);text-decoration:none}
a:hover { text-decoration:underline}
h1,h2,h3,p { margin:0}
h1 { font-size:28px;line-height:1.35;letter-spacing:-.4px;font-weight:650}
h2 { font-size:16px;line-height:1.5;font-weight:650}
h3 { font-size:15px}
p { color:var(--muted)}
:focus-visible { outline:3px solid #a8ceff;outline-offset:3px}
small { font-size:12px;color:var(--muted)}
[hidden] { display:none!important}
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link { position:fixed;top:-100px;left:16px;background:white;z-index:1000;padding:10px}
.skip-link:focus { top:12px}
.boot { min-height:100vh;display:flex;gap:24px;align-items:center;justify-content:center;flex-direction:column}
.boot img { object-fit:contain}
.sidebar { width:232px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;gap:0;padding:24px 16px 16px;background:white;border-right:1px solid var(--line);z-index:30}
.brand { padding:0 8px;display:block;color:var(--ink)}
.brand:hover { text-decoration:none}
.brand img { display:block;width:170px;height:auto;margin-bottom:12px}
.brand strong { font-size:15px;font-weight:650}
.brand small { display:block;margin-top:3px}
.nav-search { margin:22px 0 14px}
.nav-search input { width:100%;font-size:13px;background:#f7f9fc}
.group-tabs { display:grid;grid-template-columns:repeat(3,1fr);background:#f0f4fa;padding:3px;gap:2px;border-radius:7px;margin-bottom:15px}
.group-tabs button { font-size:12px;border-color:transparent;min-height:36px;background:transparent;padding:6px 2px;color:var(--muted)}
.group-tabs button[aria-selected=true] { background:white;color:#1459c3;border-color:#d7e5f8;box-shadow:0 1px 3px #1838600b;font-weight:600}
#nav { overflow-y:auto;scrollbar-width:thin;flex:1;min-height:0;padding:0 2px 14px 0}
.nav-section { margin:16px 12px 7px;font-size:12px;color:#64758d}
.nav-section:first-child { margin-top:0}
.nav-link { display:flex;align-items:center;width:100%;padding:9px 11px;min-height:39px;border:1px solid transparent;border-radius:6px;color:#40536e;margin:3px 0;line-height:1.4}
.nav-link:hover { background:#f5f8fd;text-decoration:none}
.nav-link.active { background:#eaf2ff;border-color:#dceaff;box-shadow:inset 3px 0 #1764dc;color:#1459c3;font-weight:600}
.nav-icon { width:22px;margin-right:9px;color:#7a8ba2;font-size:15px}
.sidebar footer { padding:16px 8px 0;border-top:1px solid var(--line);font-size:12px;color:#64758d;line-height:1.8}
.main { margin-left:232px;min-width:0;padding:0 24px 32px}
.topbar { min-height:80px;margin:0 -24px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:white;border-bottom:1px solid var(--line)}
.breadcrumb { font-size:13px;color:var(--muted);line-height:1.8}
.breadcrumb strong { display:block;color:var(--ink);font-weight:600}
.identity-tools { display:flex;align-items:center;gap:8px}
.identity-tools button { font-size:12px;min-height:36px}
.identity { display:flex;align-items:center;gap:10px}
.avatar { display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#eaf2ff;color:#1764dc;font-weight:650}
.identity-name { font-size:13px}
.identity-name small { display:block}
.menu-button { display:none}
.heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:26px 0 22px}
.heading p { margin-top:9px;max-width:780px;font-size:13px;line-height:1.8}
.eyebrow { color:#3371c4;font-size:11px;letter-spacing:1.4px;font-weight:650;margin-bottom:7px}
.actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.actions button { font-size:13px}
.notice { padding:12px 15px;background:#edf5ff;border:1px solid #d4e6ff;border-left:3px solid #4389e8;border-radius:6px;color:#315f96;font-size:12px;line-height:1.8;margin-bottom:16px}
.notice.warning { background:#fff9ec;border-color:#f1ddb5;color:#8b5b12}
.notice.error { background:#fff2f3;border-color:#f0c6cb;color:#a62c3c}
.notice.success { background:#eef9f4;border-color:#c6e7d8;color:#187554}
.panel { background:white;border:1px solid var(--line);border-radius:8px;padding:22px;min-width:0;box-shadow:0 2px 5px #28466a03;margin-bottom:20px}
.panel-head { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.panel-head p { font-size:12px;margin-top:5px}
.panel p.caption,.caption { font-size:12px;color:var(--muted);line-height:1.8}
.grid { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px}
.grid.equal { grid-template-columns:repeat(2,minmax(0,1fr))}
.grid>* { min-width:0}
.kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}
.kpi { padding:18px 20px;background:white;border:1px solid var(--line);border-radius:8px;min-width:0}
.kpi .label { font-size:13px;color:#536680}
.kpi strong { display:block;font-size:29px;line-height:1.25;color:#173c6a;font-weight:650;letter-spacing:-.5px;margin:12px 0 9px;overflow-wrap:anywhere}
.kpi small { display:block;line-height:1.7}
.kpi .unit { font-size:12px;margin-left:5px;font-weight:400;color:var(--muted)}
.badge { display:inline-block;padding:3px 8px;background:#edf4ff;color:#225da7;font-size:12px;line-height:1.5;border-radius:4px;white-space:normal}
.status-complete,.status-ready,.status-succeeded,.status-completed,.status-committed,.status-delivered { background:#edf8f2;color:#187554}
.status-failed,.status-dead,.status-bounced,.status-forbidden { background:#fff0f1;color:#b72a39}
.status-partial,.status-stale,.status-unknown,.status-delivery_unknown,.status-paused { background:#fff7e8;color:#9a6209}
.status-empty,.status-not_configured,.status-unconfigured,.status-unavailable,.status-cancelled { background:#f0f3f7;color:#64758d}
.filters { display:flex;flex-wrap:wrap;align-items:end;gap:14px;padding:16px;margin-bottom:16px;background:white;border:1px solid var(--line);border-radius:8px}
.field { display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;color:#536680}
.field input,.field select,.field textarea { width:100%;color:var(--ink);font-size:13px}
.filters .field { flex:1;min-width:138px}
.filters .actions { margin-bottom:1px}
.required { color:var(--danger)}
.form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .full { grid-column:1/-1}
.form-stack { display:grid;gap:16px}
.form-footer { display:flex;gap:10px;justify-content:flex-end;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
.form-error { padding:10px 13px;border-radius:6px;color:#a62c3c;background:#fff0f1;font-size:13px;margin-top:12px}
.filter-chips { display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
.filter-chip { font-size:12px;background:#edf4ff;color:#225da7;border-color:#d7e5f8;min-height:30px;padding:4px 8px}
.platforms { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.platform-pill { display:flex;gap:8px;align-items:center;font-size:13px}
.platform-pill.selected { background:#f0f6ff;border-color:#8bb6f6;color:#1459c3}
.platform-pill img { width:18px;height:18px;object-fit:contain}
.tabs { display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tabs a { padding:11px 15px;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent}
.tabs a.active { color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tabs a:hover { text-decoration:none}
.table-wrap { max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #e4ebf4;border-radius:6px}
table { width:100%;border-collapse:collapse;font-size:13px;text-align:left;white-space:nowrap}
th,td { padding:13px 12px;border-bottom:1px solid #e7edf5;font-variant-numeric:tabular-nums;max-width:360px;overflow-wrap:anywhere}
th { background:#f6f8fc;color:#536780;font-weight:600}
td.long { white-space:normal;min-width:180px}
tbody tr:hover { background:#f2f7ff}
tbody tr:last-child td { border-bottom:0}
td button,td a.button { font-size:12px;min-height:32px;padding:5px 9px;display:inline-block;margin:0 3px}
td .wrap { white-space:normal;max-width:320px;display:block}
.pagination { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:12px;color:var(--muted)}
.pagination .actions button { font-size:12px}
.empty { padding:40px 20px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:10px;min-height:210px;justify-content:center}
.empty-symbol { display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#edf4ff;color:#739cd5;font-size:28px;margin-bottom:5px}
.empty h3 { color:#405570;font-size:15px}
.empty p { font-size:12px;max-width:460px}
.empty a,.empty button { margin-top:6px}
.loading { min-height:260px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted)}
.spinner { width:20px;height:20px;border:2px solid #d8e6fb;border-top-color:#1764dc;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin { to { transform:rotate(360deg)}
}
.error-panel { margin-top:24px;padding:26px;background:white;border:1px solid #f0c6cb;border-radius:8px}
.error-panel p { margin:10px 0 18px}
.chart { width:100%;height:240px;display:block}
.chart line { stroke:#e7edf5}
.chart text { font-family:inherit;font-size:11px;fill:#65758c}
.chart .trend-line { stroke:#1764dc;stroke-width:2.5;fill:none}
.chart .trend-point { fill:white;stroke:#1764dc;stroke-width:2;cursor:pointer}
.chart .trend-point:hover,.chart .trend-point:focus { r:5;fill:#1764dc}
.legend { display:flex;gap:16px;font-size:12px;color:var(--muted);margin:12px 0}
.legend span:before { content:'';display:inline-block;width:8px;height:8px;border-radius:2px;background:#1764dc;margin-right:6px}
.bar-list { display:grid;gap:12px}
.bar-row { display:grid;grid-template-columns:minmax(90px,1fr) minmax(60px,1.3fr) minmax(70px,.7fr);align-items:center;gap:12px;font-size:12px}
.bar-row button { padding:5px 2px;text-align:left;min-height:32px;border:0;background:transparent;color:var(--accent);overflow-wrap:anywhere}
.bar-meter { width:100%;height:12px}
.bar-meter::-webkit-meter-bar { background:#eff4fa;border:0;border-radius:3px}
.bar-meter::-webkit-meter-optimum-value { background:#1764dc;border-radius:3px}
.bar-row strong { text-align:right;font-weight:500}
.chart-details { margin-top:12px;font-size:12px;color:var(--muted)}
.chart-details summary { cursor:pointer;padding:8px 0}
.donut { width:180px;height:180px;flex:none}
.donut circle { fill:none;stroke-width:24}
.donut text { font-family:inherit;fill:var(--ink);font-size:14px;text-anchor:middle}
.donut-layout { display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.watermark { font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.checkbox-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.check { display:flex;align-items:center;gap:8px;font-size:13px;min-height:30px}
.check input { flex:none}
.checklist { display:grid;gap:7px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:6px;padding:12px}
.detail-list { display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;font-size:13px}
.detail-list dt { color:var(--muted)}
.detail-list dd { margin:0;overflow-wrap:anywhere}
.steps { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.step { font-size:13px;color:#71839a;display:flex;align-items:center;gap:7px}
.step span { display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e8eef6}
.step.active { color:var(--accent);font-weight:600}
.step.active span { background:var(--accent);color:white}
.file-zone { border:1px dashed #9bbce9;padding:24px;border-radius:7px;background:#f8fbff;margin-bottom:16px}
.file-zone input { background:white}
.mapping-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.task-card { border:1px solid var(--line);border-radius:7px;padding:16px;margin-bottom:12px}
.task-card h3 { font-size:14px;margin-bottom:8px}
.task-card p { font-size:12px;white-space:pre-wrap}
.task-meta { display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;color:var(--muted);font-size:12px}
.progress { width:100%;height:8px;border-radius:4px;overflow:hidden;accent-color:var(--accent)}
.progress::-webkit-progress-bar { background:#eaf1fa}
.progress::-webkit-progress-value { background:var(--accent)}
.divider { border:0;border-top:1px solid var(--line);margin:20px 0}
.auth-page { min-height:100vh;display:grid;grid-template-columns:minmax(350px,1.1fr) minmax(400px,1fr);background:white}
.auth-intro { padding:64px clamp(32px,6vw,100px);background:linear-gradient(145deg,#eef5ff,#f7faff 70%);display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line)}
.auth-intro img { width:220px;max-width:100%;height:auto}
.auth-intro h1 { font-size:38px;line-height:1.5;max-width:440px;letter-spacing:0}
.auth-intro p { font-size:15px;line-height:1.9;margin-top:18px;max-width:390px}
.auth-tags { display:flex;gap:9px;margin-top:24px;flex-wrap:wrap}
.auth-tags span { font-size:12px;padding:5px 9px;border:1px solid #d1e2f9;background:#f8fbff;color:#3d6da8;border-radius:4px}
.auth-footer { font-size:12px;color:#6c7d95;line-height:1.8;padding-top:40px}
.auth-main { display:flex;align-items:center;justify-content:center;padding:40px}
.auth-form { width:100%;max-width:360px}
.auth-form h2 { font-size:25px;margin-bottom:8px}
.auth-form>p { font-size:13px;margin-bottom:28px}
.auth-form form { display:grid;gap:18px}
.auth-form .primary { width:100%;margin-top:6px;min-height:42px}
.auth-bottom { margin-top:24px;border-top:1px solid var(--line);padding-top:20px;font-size:12px;color:var(--muted)}
.auth-link { font-size:13px;text-align:right}
.link-button { border:0;padding:0;min-height:24px;color:var(--accent);background:transparent}
.login-alert { margin-top:18px}
.account-box { padding:16px;border:1px solid var(--line);border-radius:6px;margin-top:16px}
.secret { overflow-wrap:anywhere;white-space:pre-wrap;padding:14px;background:#f4f7fb;border:1px solid var(--line);border-radius:6px;font-family:monospace;color:#173c6a;user-select:all}
.toast { position:fixed;right:24px;bottom:24px;max-width:min(440px,calc(100vw - 32px));padding:13px 18px;color:#174873;background:white;border:1px solid #b7d3f3;border-radius:8px;box-shadow:0 8px 30px #183b6321;z-index:120;font-size:13px}
dialog { border:1px solid var(--line);border-radius:10px;padding:0;width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 48px);color:var(--ink);box-shadow:0 18px 80px #183b6326}
dialog.wide { width:min(960px,calc(100vw - 32px))}
dialog::backdrop { background:#15375b55}
.dialog-head { display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);gap:18px}
.dialog-head h2 { font-size:18px}
.dialog-body { padding:22px}
.icon-button { min-width:32px;min-height:32px;font-size:21px;padding:0 7px;border-color:transparent}
.fullscreen .sidebar,.fullscreen .topbar { display:none}
.fullscreen .main { margin:0;padding:18px 28px}
.screen-toggle { position:absolute;right:24px;top:20px}
.split-title { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.muted { color:var(--muted)}
.right { text-align:right}
.spaced { margin-top:16px}
.inline-code { font-family:monospace;overflow-wrap:anywhere}
.list { padding-left:20px;font-size:13px;color:var(--muted);line-height:1.9}
.no-scroll { overflow:hidden}
@media(min-width:1700px) { .main { padding-left:32px;padding-right:32px}
.topbar { margin-left:-32px;margin-right:-32px;padding-left:32px;padding-right:32px}
.kpis { grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1100px) { .kpis { grid-template-columns:repeat(2,minmax(0,1fr))}
.grid { grid-template-columns:1fr}
.mapping-grid { grid-template-columns:repeat(2,minmax(0,1fr))}
.topbar { gap:10px}
.identity-name small { display:none}
.auth-intro { padding:40px}
.auth-intro h1 { font-size:30px}
}
@media(max-width:780px) { .sidebar { visibility:hidden;transform:translateX(-100%);transition:transform .15s}
.sidebar.open { visibility:visible;transform:translateX(0);box-shadow:8px 0 40px #183b6326}
.main { margin-left:0;padding:0 16px 24px}
.topbar { margin:0 -16px;padding:12px 16px;min-height:68px}
.menu-button { display:block}
.breadcrumb { flex:1}
.identity-name { display:none}
.identity-tools { gap:5px}
.identity-tools button { font-size:12px;padding:6px 8px}
.heading { margin:22px 0 18px;align-items:flex-start;flex-direction:column;gap:14px}
h1 { font-size:24px}
.panel { padding:17px}
.grid.equal { grid-template-columns:1fr}
.form-grid { grid-template-columns:1fr}
.auth-page { display:block;background:var(--bg)}
.auth-intro { padding:24px;border:0;background:var(--bg)}
.auth-intro img { width:180px}
.auth-intro>div:not(:first-child),.auth-footer { display:none}
.auth-main { padding:24px;align-items:flex-start}
.auth-form { background:white;padding:26px 22px;border:1px solid var(--line);border-radius:10px;max-width:440px}
.filters .field { min-width:125px}
.kpi { padding:16px}
.kpi strong { font-size:25px}
.mapping-grid { grid-template-columns:1fr}
.checkbox-grid { grid-template-columns:1fr}
.watermark { font-size:11px}
.toast { right:16px;bottom:16px}
.dialog-body { padding:18px}
.chart { height:220px}
}
@media(max-width:420px) { .kpis { gap:10px}
.kpi { padding:14px 12px}
.kpi strong { font-size:23px}
.kpi .label { font-size:12px}
.filters { gap:10px;padding:12px}
.form-footer { flex-wrap:wrap}
.auth-main { padding:14px}
.auth-form { padding:24px 20px}
.identity-tools .logout-label { display:none}
.tabs a { padding:10px 12px}
.detail-list { grid-template-columns:90px 1fr}
.bar-row { gap:8px;grid-template-columns:minmax(70px,1fr) minmax(40px,1fr) minmax(60px,.6fr)}
}
@media(prefers-reduced-motion:reduce) { * { animation:none!important;transition:none!important}
}
@media print { .sidebar,.topbar,.filters,.actions,.platforms,.filter-chips,.toast,.skip-link { display:none!important}
.main { margin:0;padding:0}
.panel,.kpi { break-inside:avoid;box-shadow:none}
body { background:white}
.grid { display:block}
.heading { margin-top:0}
table { font-size:11px}
.table-wrap { overflow:visible}
.chart { height:220px}
.pagination { display:none}
}


.nav-close { align-self:flex-end;margin-bottom:10px}
.nav-backdrop { position:fixed;inset:0;z-index:29;background:#183b6359;border:0;border-radius:0;margin:0;padding:0}
.nav-backdrop[hidden],.nav-close[hidden] { display:none}
@media print { .nav-backdrop,.nav-close { display:none!important} }