:root{
  --green:#006a3b;
  --green-2:#00864b;
  --green-soft:#e7f3ed;
  --red:#c64242;
  --red-soft:#f9eaea;
  --bg:#eef2f0;
  --panel:#ffffff;
  --panel-2:#f7f9f8;
  --text:#1f2d33;
  --muted:#6f7c82;
  --line:#dce3e0;
  --shadow:0 10px 30px rgba(28,48,57,.08);
  --sidebar:#0b2f23;
}
html[data-theme="dark"]{
  --bg:#111916;
  --panel:#18231f;
  --panel-2:#202c28;
  --text:#eef5f1;
  --muted:#9fb0a8;
  --line:#2c3b35;
  --shadow:0 12px 34px rgba(0,0,0,.26);
  --sidebar:#071d16;
  --green-soft:#173529;
  --red-soft:#3b2424;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:var(--bg);color:var(--text);
  transition:background .25s ease,color .25s ease;
}
button,select,input{font:inherit}
.app-shell{min-height:100vh;display:grid;grid-template-columns:245px 1fr}
.sidebar{
  background:
    radial-gradient(circle at 15% 12%,rgba(255,255,255,.07),transparent 28%),
    linear-gradient(180deg,var(--sidebar),#0a261d);
  color:#fff;padding:24px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh
}
.brand-block{padding:6px 10px 24px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand-block img{width:175px;max-height:58px;object-fit:contain;object-position:left center}
.brand-subtitle{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-top:10px}
.side-nav{padding:20px 0 8px}
.nav-item,.warehouse-btn{
  width:100%;border:0;background:transparent;color:rgba(255,255,255,.78);
  border-radius:10px;padding:11px 12px;text-align:left;cursor:pointer;
  display:flex;gap:10px;align-items:center;font-weight:600
}
.nav-item.active,.warehouse-btn.active,.warehouse-btn:hover{
  background:rgba(255,255,255,.1);color:#fff
}
.nav-icon{font-size:18px}
.side-section{margin-top:18px;min-height:0}
.side-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.13em;opacity:.55;
  padding:0 12px 8px
}
.warehouse-nav{display:flex;flex-direction:column;gap:3px;overflow:auto;max-height:50vh}
.sidebar-footer{margin-top:auto;padding:16px 10px 0;border-top:1px solid rgba(255,255,255,.12)}
.version{font-size:12px;font-weight:700}.version-sub{font-size:10px;opacity:.55;margin-top:4px}
.main-area{min-width:0}
.topbar{
  height:104px;background:var(--panel);border-bottom:1px solid var(--line);
  padding:20px 30px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:4
}
.eyebrow,.panel-kicker{
  color:var(--green-2);font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:800
}
.topbar h1{margin:5px 0 3px;font-size:27px}
.topbar p{margin:0;color:var(--muted);font-size:13px}
.top-actions{display:flex;gap:10px;align-items:center}
.icon-btn,.action-btn{
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  background:var(--green);color:white;cursor:pointer;font-weight:750
}
.icon-btn{width:42px;padding:10px;background:var(--panel);color:var(--text)}
.action-btn.secondary{background:var(--panel);color:var(--green)}
.action-btn.ghost{background:transparent;color:var(--muted)}
.content{padding:24px 28px 34px;max-width:1650px;margin:auto}
.filter-bar{
  display:flex;gap:14px;align-items:end;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:15px;padding:15px 17px;box-shadow:var(--shadow);
  margin-bottom:18px
}
.filter-group{display:flex;flex-direction:column;gap:6px}
.filter-group label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}
select,input[type=file]{
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px
}
.filter-summary{margin-left:auto;text-align:right;color:var(--muted);font-size:11px}
.filter-summary strong{display:block;color:var(--text);font-size:14px;margin-top:3px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:16px;margin-bottom:18px}
.kpi-card{
  background:var(--panel);border:1px solid var(--line);border-radius:15px;
  padding:18px 19px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  min-height:154px
}
.kpi-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#8c9993
}
.kpi-card.accent-green:before{background:var(--green)}
.kpi-card.accent-red:before{background:var(--red)}
.kpi-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;font-weight:700}
.kpi-chip{
  font-size:9px;letter-spacing:.08em;border-radius:999px;padding:5px 8px;
  background:var(--green-soft);color:var(--green)
}
.accent-red .kpi-chip{background:var(--red-soft);color:var(--red)}
.kpi-chip.neutral{background:var(--panel-2);color:var(--muted)}
.kpi-value{font-size:34px;font-weight:850;margin:15px 0 4px;letter-spacing:-.03em}
.kpi-caption{color:var(--muted);font-size:11px}
.sparkline{height:26px;margin-top:11px;display:flex;align-items:flex-end;gap:4px}
.sparkline span{flex:1;border-radius:3px 3px 0 0;min-height:3px;animation:grow .65s ease both}
#sparkIn span{background:linear-gradient(180deg,var(--green-2),var(--green))}
#sparkOut span{background:linear-gradient(180deg,#e16767,var(--red))}
@keyframes grow{from{height:0!important}}
.mini-progress{height:7px;background:var(--panel-2);border-radius:999px;margin-top:17px;overflow:hidden}
.mini-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green-2));width:0;transition:width .7s ease}
.net-indicator{height:7px;background:var(--panel-2);border-radius:999px;margin-top:17px;overflow:hidden;position:relative}
.net-indicator span{display:block;height:100%;width:50%;transition:width .7s ease;background:var(--green)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(320px,.95fr);gap:18px}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:15px;
  padding:19px 20px;box-shadow:var(--shadow)
}
.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:14px}
.panel h2{margin:4px 0 0;font-size:18px}
.legend{display:flex;gap:15px;color:var(--muted);font-size:11px;padding-top:4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend-in{background:var(--green)}.legend-out{background:var(--red)}
canvas{display:block;width:100%;height:390px}
.table-wrap{overflow:auto;max-height:420px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:right}
th:first-child,td:first-child{text-align:left}
th{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.total-row td{font-weight:850;border-top:2px solid var(--green)}
.pos{color:var(--green);font-weight:750}.neg{color:var(--red);font-weight:750}
.upload-panel{margin-top:18px}
.help{color:var(--muted);font-size:12px;line-height:1.55;max-width:1050px}
.upload-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.status-pill{background:var(--green-soft);color:var(--green);font-size:10px;font-weight:800;border-radius:999px;padding:7px 10px}
@media(max-width:1200px){
  .app-shell{grid-template-columns:210px 1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
  .app-shell{display:block}
  .sidebar{position:relative;height:auto;padding:14px 16px}
  .side-nav,.side-section,.sidebar-footer{display:none}
  .brand-block{border:0;padding:0}.brand-block img{width:145px}
  .topbar{position:relative;height:auto;padding:18px}
  .topbar h1{font-size:22px}
  .content{padding:16px}
}
@media(max-width:580px){
  .kpi-grid{grid-template-columns:1fr}
  .filter-summary{width:100%;text-align:left;margin-left:0}
  .top-actions{flex-direction:column}
  canvas{height:320px}
}
@media print{
  .sidebar,.filter-bar,.upload-panel,.top-actions{display:none!important}
  .app-shell{display:block}
  .topbar{position:relative;border:0}
  .content{padding:0 18px}
  .panel,.kpi-card{box-shadow:none;break-inside:avoid}
  body{background:#fff}
}