:root{
  --bg:#07111f;--bg2:#0b1625;--panel:#0d1b2d;--panel2:#10243b;--line:#203957;
  --text:#f4f7fb;--muted:#8fa7c2;--blue:#4aa3ff;--cyan:#1bd6e8;--yellow:#f5b942;
  --red:#ff5a66;--green:#32d296;--purple:#9d8cff;--shadow:0 16px 40px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 20% 0,#102b4b 0,#07111f 42%,#050b14 100%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #71c8ff;outline-offset:2px}
.app-shell{width:min(98vw,1760px);margin:auto;padding:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid var(--line);background:rgba(9,24,42,.94);border-radius:18px;box-shadow:var(--shadow);position:sticky;top:8px;z-index:30;backdrop-filter:blur(10px)}
h1,h2,h3,p{margin-top:0}h1{font-size:22px;margin-bottom:4px}h2{font-size:20px;margin-bottom:0}h3{font-size:13px;margin-bottom:0}.muted,.microcopy{color:var(--muted)}.muted{font-size:11px;margin-bottom:0}.microcopy{font-size:10px;margin:-3px 0 10px}
.eyebrow{font-size:9px;font-weight:900;letter-spacing:.14em;color:#83b9ee;margin-bottom:5px}
.top-actions,.inline-fields,.filter-bar,.workspace-bar,.section-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top-actions{justify-content:flex-end}.section-head{justify-content:space-between;margin:16px 0 10px}.workspace-bar{justify-content:space-between;margin:12px 0 0}
.status{font-size:10px;color:#b9cee2;padding:7px 10px;border:1px solid #315578;background:#0a1d31;border-radius:999px}.status.busy::before{content:"● ";color:var(--cyan)}
.btn,.view-tab,.period-tabs button,.segmented button{border:1px solid #294969;background:#0a1a2d;color:#c4d5e6;border-radius:9px;padding:8px 11px;font-weight:800;font-size:10px}
.btn:hover,.view-tab:hover,.period-tabs button:hover,.segmented button:hover{filter:brightness(1.16)}
.btn.ghost{background:transparent}.view-tabs,.period-tabs,.segmented{display:flex;gap:5px;flex-wrap:wrap}
.view-tab.active,.period-tabs button.active,.segmented button.active{background:linear-gradient(135deg,#155ca8,#178ea0);border-color:#29a9bb;color:#fff}
.period-tabs{margin:14px 0 8px}.period-tabs button{min-width:48px}
.filter-bar{padding:7px;border:1px solid var(--line);background:rgba(8,20,35,.68);border-radius:12px}.filter-bar label,.inline-fields label{display:grid;gap:4px;font-size:9px;font-weight:900;color:var(--muted)}
.filter-bar input,.inline-fields select{min-height:34px;border:1px solid #294969;background:#07182a;color:#fff;border-radius:8px;padding:7px 9px}
.filter-bar input[type=search]{width:220px}.filter-bar input[type=number]{width:120px}.filter-status{font-size:9px;color:var(--muted);text-align:right;margin:5px 2px 0}
.view{display:none}.view.active{display:block}
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:10px}
.kpi{min-width:0;min-height:122px;padding:12px;background:linear-gradient(155deg,#0c1d32,#091524);border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;justify-content:space-between}
.kpi.sales{border-color:rgba(50,210,150,.32)}.kpi.bonus{border-color:rgba(157,140,255,.34)}.kpi.exchange{border-color:rgba(245,185,66,.34)}.kpi.return{border-color:rgba(255,90,102,.34)}
.kpi-top{display:flex;justify-content:space-between;gap:6px;align-items:flex-start}.label{font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#bfd0e0}.kpi .value{font-size:21px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:8px 0}.kpi.sales .value{color:var(--green)}.kpi.bonus .value{color:var(--purple)}.kpi.exchange .value{color:var(--yellow)}.kpi.return .value{color:var(--red)}.kpi .sub{font-size:9px;color:var(--muted)}
.delta{font-size:8px;font-weight:900;white-space:nowrap}.delta.up,.up{color:var(--green)}.delta.down,.down{color:var(--red)}.delta.neutral{color:var(--muted)}
.grid-2,.grid-3,.insight-grid{display:grid;gap:10px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.insight-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:10px}
.insight{border:1px solid var(--line);background:linear-gradient(155deg,#0c1d32,#091524);border-radius:12px;padding:11px}.insight span{display:block;font-size:9px;color:var(--muted);font-weight:900;text-transform:uppercase}.insight strong{display:block;font-size:19px;margin:7px 0 4px}.insight small{font-size:9px;color:var(--muted)}
.panel{min-width:0;border:1px solid var(--line);background:rgba(9,23,39,.96);border-radius:14px;overflow:hidden;margin-bottom:10px}.panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#0b1c31;border-bottom:1px solid var(--line)}.panel>header span{font-size:9px;color:var(--muted)}
.rank-list{padding:10px 12px}.rank-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(70px,1.3fr) 105px;align-items:center;gap:8px;font-size:10px;margin-bottom:8px}.rank-name{min-width:0;display:flex;align-items:center;gap:7px;font-weight:800}.rank-name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-pos{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid #345371;border-radius:6px;color:var(--muted);font-size:8px}.track{height:8px;background:#122a43;border-radius:999px;overflow:hidden}.fill{height:100%;border-radius:999px}.fill.sales{background:linear-gradient(90deg,#1f8f4c,#67d98a)}.fill.bonus{background:linear-gradient(90deg,#6954d9,#ae9fff)}.fill.exchange{background:linear-gradient(90deg,#b56b10,#ffd266)}.fill.return{background:linear-gradient(90deg,#a62838,#ff7581)}.rank-value{text-align:right;font-weight:900;font-variant-numeric:tabular-nums}
.trend{height:190px;padding:12px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;align-items:end}.trend-col{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0}.trend-col.partial{opacity:.48}.trend-value{font-size:7px;color:#c5d6e6;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trend-bar{width:68%;min-height:2px;border-radius:6px 6px 2px 2px}.trend-bar.sales{background:linear-gradient(#67d98a,#1f8f4c)}.trend-bar.bonus{background:linear-gradient(#ae9fff,#6954d9)}.trend-bar.exchange{background:linear-gradient(#ffd266,#b56b10)}.trend-bar.return{background:linear-gradient(#ff7581,#a62838)}.trend-month{font-size:8px;color:var(--muted);font-weight:900}
.alerts{padding:10px 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.alert{display:grid;gap:3px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#0a1929}.alert b{font-size:10px}.alert span{font-size:9px;color:var(--muted);line-height:1.35}.alert.high{border-left:3px solid var(--red)}.alert.med{border-left:3px solid var(--yellow)}.alert.ok{border-left:3px solid var(--green)}
.table-wrap{overflow:auto;max-height:460px}table{width:100%;border-collapse:collapse;font-size:10px}th{position:sticky;top:0;background:#10243b;color:#b9cee2;text-align:left;z-index:1}th,td{padding:8px 9px;border-bottom:1px solid #152b43}th.num,td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.empty{text-align:center;color:var(--muted);padding:20px}
.inline-fields{justify-content:flex-end}.field-label{display:block;font-size:9px;font-weight:900;color:var(--muted);margin-bottom:4px}
footer{text-align:center;color:#607c99;font-size:9px;padding:15px}

body.light{background:linear-gradient(180deg,#eef4fb,#e3edf8);color:#15263a}
body.light .topbar,body.light .panel,body.light .kpi,body.light .insight{background:#fff;border-color:#d5e2f0;box-shadow:none}
body.light .panel>header{background:#edf4fb;border-color:#d5e2f0}
body.light .filter-bar,body.light .alert{background:#f5f9fd;border-color:#d5e2f0}
body.light .btn,body.light .view-tab,body.light .period-tabs button,body.light .segmented button,body.light input,body.light select{background:#fff;color:#29445f;border-color:#c8d8eb}
body.light .view-tab.active,body.light .period-tabs button.active,body.light .segmented button.active{background:linear-gradient(135deg,#3d8cff,#58c3d5);color:#fff}
body.light .track{background:#d8e6f3}body.light th{background:#edf4fb;color:#36506b}body.light td{border-color:#e7eef7}body.light .trend-value{color:#36506b}
body.light .muted,body.light .microcopy,body.light .filter-status,body.light .label,body.light .kpi .sub,body.light .panel>header span,body.light .alert span,body.light .insight span,body.light .insight small{color:#597089}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.grid-3{grid-template-columns:1fr}.insight-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.app-shell{width:100%;padding:10px}.topbar{position:static;align-items:flex-start}.workspace-bar,.section-head,.topbar{flex-direction:column;align-items:stretch}.filter-bar{display:grid;grid-template-columns:1fr 1fr}.filter-bar label:first-child{grid-column:1/-1}.filter-bar input[type=search],.filter-bar input[type=number]{width:100%}.kpi-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.insight-grid,.alerts{grid-template-columns:1fr}.view-tabs,.period-tabs{overflow-x:auto;flex-wrap:nowrap}.rank-row{grid-template-columns:minmax(100px,1fr) minmax(60px,.9fr) 88px;font-size:9px}.trend{height:170px;gap:2px;padding:10px 6px}.trend-value{font-size:6px}.inline-fields{justify-content:stretch}.inline-fields label{flex:1 1 180px}}
@media(max-width:520px){h1{font-size:18px}.kpi-grid{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr}.filter-bar label:first-child{grid-column:auto}.rank-row{grid-template-columns:minmax(90px,1fr) 55px 80px;gap:5px}.rank-value{font-size:8px}.trend-value{display:none}}