:root{--navy:#0a2945;--navy2:#123f65;--blue:#2468a9;--cyan:#19a5ad;--gold:#c7a25c;--ink:#14283b;--muted:#687a8c;--line:#dce6ee;--paper:#f2f6fa;--white:#fff;--good:#14796b;--warn:#ad731b;--bad:#bf4e50;--shadow:0 12px 34px rgba(19,52,82,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}body.modal-open{overflow:hidden}button,input,select{font:inherit}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:34px max(28px,calc((100vw - 1500px)/2));color:#fff;background:linear-gradient(120deg,#08243e,#174d76 68%,#17737a)}
.eyebrow{margin:0 0 8px;color:#87d9dc;font-size:11px;font-weight:800;letter-spacing:2px}.topbar h1{margin:0;font-size:32px;letter-spacing:1px}.topbar p:last-child{margin:10px 0 0;color:#d9e7f1;font-size:13px}.header-actions{display:flex;gap:9px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border:0;border-radius:8px;padding:0 16px;font-size:12px;font-weight:800;text-decoration:none;cursor:pointer}.button.primary{background:#fff;color:var(--navy)}.button.ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff}.button.control-primary{background:var(--blue);color:#fff}.button.control-secondary{background:#edf4f8;border:1px solid #cfdee9;color:var(--navy)}
main{max-width:1500px;margin:24px auto;padding:0 24px}.panel{margin-bottom:20px;padding:23px;background:#fff;border:1px solid #e3eaf1;border-radius:14px;box-shadow:var(--shadow)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}.section-heading>div{display:flex;align-items:center;gap:10px}.section-heading h2{margin:0;font-size:19px}.section-heading p{margin:0;color:var(--muted);font-size:12px}.chart-heading-tools{display:flex!important;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.chart-label-toggle{min-height:30px;border:1px solid #cbdce8!important;border-radius:7px!important;background:#f5f9fc!important;padding:0 10px!important;white-space:nowrap}.step{display:grid;place-items:center;width:32px;height:24px;border-radius:5px;background:#e7f4f4;color:#10727b;font-size:11px;font-weight:900}
.controls{display:grid;grid-template-columns:150px 150px 160px 160px minmax(200px,1fr) auto auto;align-items:end;gap:9px}.controls label,.import-date-row label{display:flex;min-width:0;flex-direction:column;gap:6px;color:var(--muted);font-size:11px;font-weight:700}.controls input,.controls select,.import-date-row input{width:100%;height:38px;border:1px solid #d1dee8;border-radius:7px;background:#fff;padding:0 9px;color:var(--ink)}.metric-note{display:flex;align-items:center;gap:6px;margin-top:13px;color:var(--muted);font-size:11px}.metric-note span{width:7px;height:7px;border-radius:50%;background:var(--cyan)}.metric-note strong{color:var(--navy)}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.kpi-card{position:relative;min-height:108px;padding:14px 13px;border-top:3px solid var(--cyan);border-radius:10px;background:linear-gradient(180deg,#fafcfd,#eef4f8)}.kpi-card:has(.kpi-delta){padding-right:78px}.kpi-card.primary-kpi{border-color:var(--blue);background:linear-gradient(180deg,#f9fbfd,#e9f2f8)}.kpi-card.warn{border-color:var(--warn)}.kpi-label{color:var(--muted);font-size:11px}.kpi-delta{position:absolute;right:10px;top:10px;max-width:68px;border:1px solid currentColor;border-radius:999px;background:#fff;padding:3px 7px;font-size:9px;font-weight:900;line-height:1;white-space:nowrap}.kpi-delta.good{background:#e9f6f2}.kpi-delta.bad{background:#fff0ee}.kpi-delta.neutral{background:#edf2f6}.kpi-value{margin-top:7px;color:var(--navy);font-size:22px;font-weight:900;white-space:nowrap}.kpi-sub{margin-top:7px;color:var(--muted);font-size:10px;line-height:1.5}.good{color:var(--good)!important}.warn{color:var(--warn)!important}.bad{color:var(--bad)!important}.neutral{color:var(--muted)!important}
.section-heading.compact{margin-bottom:10px}.chart-panel{min-width:0}.line-chart{height:330px;min-width:0;border-top:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfcfd)}.line-chart.large{height:365px}.line-chart>div,.line-chart canvas,.line-chart svg{max-width:100%}.chart-empty{display:grid;height:100%;place-items:center;color:var(--muted);font-size:12px;text-align:center;padding:24px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px;padding:5px;border-radius:10px;background:#edf3f7}.tab{min-height:40px;border:0;border-radius:7px;background:transparent;color:#617386;font-size:12px;font-weight:800;cursor:pointer}.tab.active{background:#fff;color:var(--blue);box-shadow:0 4px 12px rgba(22,55,89,.1)}
.dimension-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.dimension-chart-card,.dimension-table-card{min-width:0;border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}.chart-title-row,.table-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px}.chart-title-row h3{margin:0;font-size:15px}.chart-title-row p{margin:5px 0 0;color:var(--muted);font-size:10px}.chart-unit,.table-tools span{color:var(--muted);font-size:10px}.table-tools strong{font-size:13px}
.table-wrap{max-height:520px;overflow:auto;border-top:1px solid var(--line)}table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px;white-space:nowrap}th{position:sticky;top:0;z-index:2;padding:11px 9px;background:#2f69aa;color:#fff;text-align:center}th.sortable{cursor:pointer;user-select:none}th.sortable:hover{background:#275d98}th .sort-mark{margin-left:3px;color:#cde2f4;font-size:9px}td{padding:9px;border-bottom:1px solid #e7edf3;text-align:right}td.text{text-align:left}tbody tr:nth-child(even){background:#f5f9fc}tbody tr:hover{background:#eaf4f7}.dimension-button,.outlet-button{border:0;background:none;padding:0;color:#1167a5;font-weight:800;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.tag{display:inline-block;padding:3px 7px;border-radius:999px;background:#edf3f7;color:#607385;font-size:10px;font-weight:800}.tag.warn{background:#fff2dc;color:#9b6210!important}
.dimension-wrap th:nth-last-child(-n+2),.dimension-wrap td:nth-last-child(-n+2),.drilldown-wrap th:nth-last-child(-n+2),.drilldown-wrap td:nth-last-child(-n+2){min-width:230px}.delta-trend{display:grid;grid-template-columns:112px minmax(98px,1fr);align-items:center;justify-content:end;gap:8px;min-width:214px;text-align:left}.delta-trend svg{display:block;width:112px;height:38px;overflow:visible}.delta-zero{stroke:#9baab8;stroke-width:1;stroke-dasharray:2 2}.delta-bar.up{fill:#168476}.delta-bar.down{fill:#d0604f}.delta-bar.flat{fill:#9aa9b7}.delta-trend-text{display:flex;min-width:0;flex-direction:column;line-height:1.15}.delta-trend-text b{font-size:9px}.delta-trend-text small{margin-top:3px;color:var(--muted);font-size:8px;font-weight:700;white-space:normal}.delta-trend-range{color:#42596f!important}.mini-trend-empty{display:inline-block;min-width:150px;color:#81909e;text-align:center;font-size:10px}.empty-state{padding:54px;color:var(--muted);text-align:center}.dimension-panel.has-data .empty-state{display:none}
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px}.modal[hidden]{display:none}.modal-backdrop{position:absolute;inset:0;background:rgba(5,24,43,.68);backdrop-filter:blur(4px)}.modal-dialog{position:relative;width:min(1180px,100%);max-height:calc(100vh - 44px);overflow:auto;border-radius:16px;background:#fff;box-shadow:0 28px 90px rgba(4,19,35,.34)}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:23px 25px 18px;border-bottom:1px solid var(--line)}.modal-header p{margin:0 0 5px;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:1.8px}.modal-header h2{margin:0;font-size:22px}.modal-header span{display:block;margin-top:7px;color:var(--muted);font-size:12px}.modal-header button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:#f7f9fb;color:#536678;font-size:25px;cursor:pointer}
.import-date-row{display:flex;align-items:end;gap:16px;padding:16px 25px 0}.import-date-row label{width:180px}.import-date-row span{padding-bottom:8px;color:var(--muted);font-size:11px}.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 25px 20px}.import-card{position:relative;padding:18px;border:1px solid #d9e5ed;border-radius:11px;background:#f9fbfc}.import-card h3{margin:0 0 7px;font-size:15px}.import-card p{min-height:39px;margin:0 0 14px;color:var(--muted);font-size:11px;line-height:1.7}.import-no{position:absolute;right:13px;top:13px;padding:4px 7px;border-radius:12px;background:#e6f4f3;color:#13756f;font-size:10px;font-weight:800}.import-no.optional{background:#eef2f6;color:#697887}.file-button{display:inline-flex;align-items:center;min-height:36px;border-radius:7px;background:var(--blue);padding:0 12px;color:#fff;font-size:11px;font-weight:800;cursor:pointer}.file-button.secondary{background:#607f98}.file-button input{display:none}.import-card strong{display:block;margin-top:10px;color:#557080;font-size:11px}.history-section{padding:0 25px 20px}.history-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:10px}.history-heading h3{margin:0;font-size:14px}.history-heading span{color:var(--muted);font-size:10px}.history-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:220px;overflow:auto}.history-row{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:#fafcfd;overflow:hidden}.history-row span{flex:1;padding:9px 11px;color:var(--navy);font-size:11px;font-weight:800}.history-row small{display:block;margin-top:2px;color:var(--muted);font-weight:400}.history-row button{align-self:stretch;border:0;border-left:1px solid #ecd5d1;background:#fff6f5;color:#a94840;padding:0 10px;font-size:10px;font-weight:800;cursor:pointer}.history-empty{grid-column:1/-1;margin:0;padding:18px;border:1px dashed #cfdae3;border-radius:8px;color:var(--muted);font-size:11px;text-align:center}.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 25px;border-top:1px solid var(--line);background:#f8fafb}.modal-footer span{color:var(--muted);font-size:10px}.danger-button{min-height:34px;border:1px solid #e4b9b5;border-radius:7px;background:#fff6f5;color:#a74640;padding:0 11px;font-size:10px;font-weight:800;cursor:pointer}
.drilldown-dialog{width:min(1380px,100%)}.drilldown-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;padding:18px 22px}.drilldown-kpis .kpi-card{min-height:88px}.drilldown-chart-section,.drilldown-table-section{margin:0 22px 18px;border:1px solid var(--line);border-radius:11px;overflow:hidden}.drilldown-chart{height:290px}.drilldown-wrap{max-height:390px}.text-button{border:0;background:none;color:var(--blue);font-size:11px;font-weight:800;cursor:pointer}.text-button:hover{text-decoration:underline}
footer{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;padding:8px 20px 30px;color:#7b8997;font-size:11px}footer a{display:inline-flex;align-items:center;gap:6px;color:#6f808e;text-decoration:none}footer img{width:18px;height:18px}.toast{position:fixed;right:22px;bottom:22px;z-index:1100;max-width:440px;padding:12px 15px;border-radius:8px;background:#132d47;color:#fff;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.toast.error{background:#a53f3f}
@media(max-width:1250px){.controls{grid-template-columns:repeat(4,1fr)}.search-label{grid-column:span 2}.kpi-grid{grid-template-columns:repeat(3,1fr)}.dimension-wrap{max-height:440px}}
@media(max-width:850px){.topbar{align-items:flex-start;flex-direction:column}.history-list{grid-template-columns:1fr 1fr}.drilldown-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.topbar{padding:26px 20px}.topbar h1{font-size:25px;line-height:1.35}.header-actions{width:100%}.header-actions .button{flex:1}.controls{grid-template-columns:1fr 1fr}.search-label{grid-column:1/-1}.kpi-grid{grid-template-columns:1fr 1fr}.panel{padding:16px}.section-heading{align-items:flex-start;flex-direction:column}.chart-heading-tools{align-items:flex-start!important;justify-content:flex-start}.dimension-layout{display:block}.dimension-chart-card{margin-bottom:12px}.line-chart,.line-chart.large{height:300px}.import-date-row{align-items:stretch;flex-direction:column;padding:16px}.import-date-row label{width:100%}.import-date-row span{padding:0}.import-grid{grid-template-columns:1fr;padding:16px}.history-section{padding:0 16px 18px}.history-list{grid-template-columns:1fr}.modal{padding:8px}.modal-dialog{max-height:calc(100vh - 16px)}.modal-header{padding:18px 16px}.modal-footer{align-items:flex-start;flex-direction:column;padding:14px 16px}.drilldown-kpis{grid-template-columns:1fr 1fr;padding:14px}.drilldown-chart-section,.drilldown-table-section{margin:0 12px 14px}.detail-heading p{display:none}main{padding:0 11px}.delta-trend{grid-template-columns:104px minmax(92px,1fr);min-width:204px}.delta-trend svg{width:104px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}