:root {
    color-scheme: light;
    --bg: #f3f7fb; --bg-end: #e7eef6; --surface: rgba(255, 255, 255, .94); --surface-strong: #edf4fa;
    --surface-hover: #e9f2f9; --subsurface: rgba(237, 244, 250, .78); --control-bg: #f8fbfe;
    --sticky-bg: rgba(248, 251, 254, .91); --drawer-bg: #f8fbfe; --border: rgba(40, 75, 108, .14);
    --border-strong: rgba(40, 75, 108, .25); --text: #142538; --heading: #0b1d30; --muted: #61758b;
    --label: #526b83; --cyan: #128f8b; --cyan-deep: #08726f; --cyan-soft: #d5f2ef; --orange: #de7b2d;
    --red: #d94d5c; --blue: #367ed6; --green: #18874b; --negative: #c83d49; --missing: #8192a4;
    --grid-line: rgba(46, 76, 104, .12); --axis-line: #aab9c7; --tooltip-bg: rgba(255, 255, 255, .98);
    --tooltip-border: rgba(40, 75, 108, .24); --chart-missing: #e3ebf2; --heat-low: #edf4f8;
    --heat-mid: #70b7be; --heat-high: #087f82; --commission-mid: #6ea1c0; --commission-high: #e58d46;
    --warning-bg: #fff3df; --warning-text: #8a5319; --sync-bg: rgba(255, 255, 255, .82); --sync-text: #526b83;
    --table-head: #e9f1f8; --metric-primary-bg: linear-gradient(145deg, rgba(189, 235, 231, .92), rgba(250, 254, 255, .96));
    --metric-primary-text: #08706d; --login-bg: linear-gradient(150deg, rgba(255,255,255,.99), rgba(235,245,250,.99));
    --backdrop: rgba(12, 27, 42, .45); --shadow: 0 18px 48px rgba(31, 63, 92, .12);
    --shadow-soft: 0 10px 35px rgba(31, 63, 92, .08); --focus: rgba(18, 143, 139, .28);
    --radius: 20px; --radius-sm: 12px;
    font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #07101d; --bg-end: #050b14; --surface: rgba(16, 31, 51, .92); --surface-strong: #13253b;
    --surface-hover: #18304c; --subsurface: rgba(7, 18, 32, .56); --control-bg: #0a1829;
    --sticky-bg: rgba(9, 23, 39, .9); --drawer-bg: #0b192a; --border: rgba(148, 177, 210, .16);
    --border-strong: rgba(148, 177, 210, .28); --text: #f2f7ff; --heading: #f4f8ff; --muted: #94a9c3;
    --label: #a9bbd1; --cyan: #58d9d2; --cyan-deep: #159e9b; --cyan-soft: #123b43; --orange: #ffae66;
    --red: #ff6f78; --blue: #68a6ff; --green: #79d89b; --negative: #ff9299; --missing: #6f8299;
    --grid-line: rgba(148, 177, 210, .1); --axis-line: #38506b; --tooltip-bg: #10243a;
    --tooltip-border: rgba(148, 177, 210, .25); --chart-missing: #182a3c; --heat-low: #14283b;
    --heat-mid: #248f97; --heat-high: #73e2d7; --commission-mid: #226a8c; --commission-high: #ffb36b;
    --warning-bg: rgba(93, 54, 17, .48); --warning-text: #ffd5a6; --sync-bg: rgba(12, 25, 42, .78); --sync-text: #b9cce3;
    --table-head: #0c1d31; --metric-primary-bg: linear-gradient(145deg, rgba(30, 130, 133, .3), rgba(14, 37, 57, .92));
    --metric-primary-text: #8ff4ed; --login-bg: linear-gradient(150deg, rgba(19,41,65,.98), rgba(10,24,41,.98));
    --backdrop: rgba(0, 6, 13, .62); --shadow: 0 18px 48px rgba(0,0,0,.24);
    --shadow-soft: 0 10px 35px rgba(0,0,0,.13); --focus: rgba(88, 217, 210, .32);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 32%), radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, var(--surface)) 0%, var(--bg) 42%, var(--bg-end) 100%); transition: color 180ms ease, background-color 180ms ease; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.app-shell { width: min(1540px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 72px; }
.topbar { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding: 8px 4px 26px; }
.eyebrow, .section-kicker { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 5px 0 7px; color: var(--heading); font-size: clamp(30px, 4vw, 50px); line-height: 1.08; letter-spacing: -.035em; }
h1 span { font-weight: 550; }
h2 { margin: 4px 0 0; color: var(--heading); font-size: 22px; letter-spacing: -.02em; }
h3 { margin: 0 0 4px; color: var(--label); font-size: 13px; font-weight: 650; }
.topbar-subtitle, .section-heading p, .login-card p, .muted { color: var(--muted); }
.topbar-subtitle { margin: 0; font-size: 14px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.sync-status { max-width: 320px; padding: 8px 12px; color: var(--sync-text); background: var(--sync-bg); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; text-align: right; }
.sync-status.stale { color: var(--warning-text); border-color: color-mix(in srgb, var(--orange) 42%, transparent); }
.button { min-height: 42px; padding: 0 18px; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 12px; font-weight: 700; }
.button-primary { color: #fff; background: linear-gradient(135deg, #1aafa9, #237f9c); box-shadow: 0 10px 28px rgba(20,137,142,.22); }
.button-ghost { background: var(--sync-bg); border-color: var(--border); }
.button:hover { filter: brightness(1.06); }
.theme-toggle { display: inline-flex; gap: 7px; align-items: center; min-width: 82px; justify-content: center; padding: 0 12px; }
.theme-toggle > span:first-child { font-size: 17px; line-height: 1; }
.login-screen { display: grid; min-height: 62vh; place-items: center; }
.login-card { display: grid; gap: 20px; width: min(430px, 100%); padding: 34px; background: var(--login-bg); border: 1px solid var(--border-strong); border-radius: 26px; box-shadow: var(--shadow); }
.login-icon { display: grid; width: 54px; height: 54px; place-items: center; color: #06343a; background: linear-gradient(135deg,#65ebe3,#78baff); border-radius: 18px; font-size: 24px; font-weight: 900; }
.login-card h2 { font-size: 28px; }
.login-card p { margin-bottom: 0; }
.login-card label, .filter-panel label { display: grid; gap: 7px; }
.login-card label span, .filter-panel label span { color: var(--label); font-size: 12px; font-weight: 700; }
.login-card input, .filter-panel select { width: 100%; height: 46px; padding: 0 14px; color: var(--text); background: var(--control-bg); border: 1px solid var(--border-strong); border-radius: 12px; }
.form-message { min-height: 20px; margin: 0; color: var(--negative) !important; font-size: 13px; }
.empty-panel { padding: 80px 32px; text-align: center; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.empty-panel p { margin-bottom: 0; color: var(--muted); }
.filter-panel { position: sticky; z-index: 20; top: 10px; display: grid; grid-template-columns: repeat(5,minmax(130px,1fr)); gap: 12px; margin-bottom: 18px; padding: 15px; background: var(--sticky-bg); border: 1px solid var(--border); border-radius: 17px; box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
.warning-banner { margin: 0 0 18px; padding: 12px 16px; color: var(--warning-text); background: var(--warning-bg); border: 1px solid color-mix(in srgb,var(--orange) 35%,transparent); border-radius: 13px; font-size: 13px; }
.metric-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { min-width: 0; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.metric-card > span { display: block; margin-bottom: 12px; color: var(--label); font-size: 13px; font-weight: 650; }
.metric-card strong { display: block; overflow: hidden; margin-bottom: 8px; font-size: clamp(24px,2.7vw,36px); letter-spacing: -.04em; text-overflow: ellipsis; }
.metric-card small { color: var(--muted); font-size: 12px; }
.metric-primary { background: var(--metric-primary-bg), var(--surface); border-color: color-mix(in srgb,var(--cyan) 40%,transparent); }
.metric-primary strong { color: var(--metric-primary-text); }
.decline-metric-card strong { color: var(--orange); }
.section-card { margin-bottom: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 22px; }
.section-heading p { max-width: 650px; margin: 0; font-size: 12px; text-align: right; }
.trend-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.trend-grid > div, .decline-chart-grid > div { min-width: 0; padding: 14px 12px 8px; background: var(--subsurface); border: 1px solid var(--border); border-radius: 14px; }
.chart { width: 100%; height: 300px; }
.chart-large { height: 520px; min-width: 760px; }
.cohort-card { overflow-x: auto; }
.analytics-toolbar { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin-bottom: 14px; padding: 14px; background: var(--subsurface); border: 1px solid var(--border); border-radius: 15px; }
.toolbar-group { display: grid; gap: 7px; }
.toolbar-group > span { color: var(--label); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.toolbar-batches { flex: 1 1 360px; grid-template-columns: 1fr auto; }
.toolbar-batches > span { grid-column: 1/-1; }
.batch-options { display: flex; flex-wrap: wrap; gap: 7px; }
.batch-option { min-height: 34px; padding: 0 12px; color: var(--muted); background: var(--control-bg); border: 1px solid var(--border); border-radius: 9px; font-size: 12px; font-weight: 750; }
.batch-option[aria-pressed="true"] { color: var(--metric-primary-text); background: var(--cyan-soft); border-color: color-mix(in srgb,var(--cyan) 42%,transparent); }
.toolbar-actions { display: flex; gap: 10px; align-items: center; }
.text-button { padding: 4px 0; color: var(--cyan); background: transparent; border: 0; font-size: 12px; font-weight: 800; }
.analysis-note { margin: 10px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.segmented { display: flex; padding: 3px; background: var(--control-bg); border: 1px solid var(--border); border-radius: 12px; }
.segment { min-height: 36px; padding: 0 14px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; font-size: 13px; font-weight: 700; }
.segment.active { color: #063b3c; background: var(--cyan); }
:root[data-theme="dark"] .segment.active { color: #04282c; }
.decline-summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 12px; }
.decline-summary { padding: 18px; background: var(--subsurface); border: 1px solid var(--border); border-top: 3px solid var(--cyan); border-radius: 14px; }
.decline-summary.xigua-accent { border-top-color: var(--red); }
.decline-summary.wencheng-accent { border-top-color: var(--blue); }
.decline-summary span { display: block; margin-bottom: 7px; color: var(--label); font-size: 12px; font-weight: 700; }
.decline-summary strong { display: block; margin-bottom: 5px; font-size: 29px; }
.decline-summary small { color: var(--muted); font-size: 11px; }
.decline-batch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.decline-batch-card { padding: 15px; background: var(--subsurface); border: 1px solid var(--border); border-radius: 13px; }
.decline-batch-card > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.decline-batch-card > strong { display: block; margin: 5px 0 8px; font-size: 24px; }
.decline-batch-card > small { display: block; margin: -2px 0 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.decline-team-split { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.decline-team-split b { color: var(--text); }
.decline-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.decline-chart-grid .chart { height: 360px; }
.module-empty { padding: 28px; color: var(--muted); text-align: center; background: var(--subsurface); border: 1px dashed var(--border-strong); border-radius: 14px; }
.matrix-heading { align-items: center; }
.matrix-actions { display: flex; gap: 8px; align-items: center; }
.matrix-fullscreen { min-height: 42px; padding: 0 13px; font-size: 12px; }
.matrix-scroll { max-height: 720px; overflow: auto; border: 1px solid var(--border); border-radius: 14px; }
.heatmap-chart { min-width: 700px; height: 460px; background: var(--subsurface); }
.matrix-card.matrix-expanded { position: fixed; z-index: 60; inset: 0; overflow: auto; margin: 0; padding: 24px; background: var(--bg); border: 0; border-radius: 0; }
.matrix-card.matrix-expanded .matrix-scroll { max-height: calc(100vh - 120px); }
.table-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
th,td { padding: 13px 15px; border-bottom: 1px solid var(--border); text-align: right; }
th { position: sticky; z-index: 2; top: 0; color: var(--label); background: var(--table-head); font-size: 11px; letter-spacing: .05em; }
th:nth-child(-n+4),td:nth-child(-n+4) { text-align: left; }
tbody tr { transition: background 140ms ease; }
tbody tr[data-group-id] { cursor: pointer; }
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: 0; }
.rank-number { color: var(--muted); font-variant-numeric: tabular-nums; }
.group-cell strong { display: block; color: var(--text); }
.group-cell small { color: var(--muted); }
.team-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; }
.team-dot.xigua { background: var(--red); } .team-dot.wencheng { background: var(--blue); }
.missing { color: var(--missing); } .positive { color: var(--green); } .negative { color: var(--negative); }
.special-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.special-item { padding: 15px; background: var(--subsurface); border: 1px solid var(--border); border-radius: 13px; }
.special-item span { display:block; margin-bottom:7px; color:var(--muted); font-size:12px; } .special-item strong { font-size:18px; }
.drawer-backdrop { position:fixed; z-index:49; inset:0; background:var(--backdrop); backdrop-filter:blur(4px); }
.group-drawer { position:fixed; z-index:50; top:0; right:0; width:min(680px,94vw); height:100vh; overflow:auto; padding:26px; background:var(--drawer-bg); border-left:1px solid var(--border-strong); box-shadow:-28px 0 70px rgba(0,0,0,.26); transform:translateX(102%); transition:transform 220ms ease; }
.group-drawer.open { transform:translateX(0); }
.drawer-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:22px; }
.drawer-head h2 { margin-top:9px; font-size:28px; } .drawer-head p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.team-badge { display:inline-flex; padding:5px 9px; color:var(--metric-primary-text); background:var(--cyan-soft); border-radius:999px; font-size:11px; font-weight:800; }
.icon-button { width:42px; height:42px; color:var(--text); background:var(--sync-bg); border:1px solid var(--border); border-radius:12px; font-size:25px; }
.drawer-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.drawer-metrics article { padding:15px; background:var(--surface-strong); border:1px solid var(--border); border-radius:14px; }
.drawer-metrics span { display:block; margin-bottom:7px; color:var(--muted); font-size:12px; } .drawer-metrics strong { font-size:24px; }
.detail-chart { height:320px; margin:16px 0; }
@media(max-width:1280px){.metric-grid{grid-template-columns:repeat(3,1fr)}.decline-batch-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1080px){.app-shell{width:min(100% - 28px,1200px)}.filter-panel{grid-template-columns:repeat(3,1fr)}.metric-grid{grid-template-columns:repeat(2,1fr)}.trend-grid,.decline-chart-grid{grid-template-columns:1fr}.trend-grid .chart{height:260px}.special-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.app-shell{width:calc(100% - 20px);padding:18px 0 48px}.topbar{display:grid;padding-bottom:18px}.topbar-actions{flex-wrap:wrap;justify-content:flex-start;padding-top:0}.sync-status{max-width:100%;text-align:left}.filter-panel{position:relative;top:0;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.filter-panel label:last-child{grid-column:1/-1}.metric-grid{gap:10px}.metric-card{padding:16px;border-radius:16px}.metric-card strong{font-size:25px}.section-card{padding:16px;border-radius:17px}.section-heading{display:grid;gap:10px;margin-bottom:16px}.section-heading p{text-align:left}.analytics-toolbar{display:grid;align-items:stretch}.segmented{overflow-x:auto}.segment{flex:0 0 auto}.toolbar-batches{grid-template-columns:1fr}.toolbar-actions{justify-content:flex-start}.chart-large{min-width:720px;height:430px}.decline-summary-grid{grid-template-columns:1fr}.decline-batch-grid{grid-template-columns:1fr 1fr}.matrix-heading{grid-template-columns:1fr}.matrix-actions{justify-self:start}.chart{height:250px}.decline-chart-grid .chart{height:310px}.heatmap-chart{min-width:650px}.special-grid{grid-template-columns:1fr 1fr}.group-drawer{width:100vw;padding:20px 14px}.drawer-metrics{grid-template-columns:1fr 1fr}th,td{padding:12px 11px}}
@media(max-width:430px){h1{font-size:31px}.metric-grid,.special-grid,.decline-batch-grid{grid-template-columns:1fr}.theme-toggle{min-width:72px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}