/* Base - CSS variables, themes, reset, nav rail, left panel, shell, topbar, KPI strip
   Extracted from the original single-file index.html - rules and order unchanged. */

:root{
  --bg:#f0f2f7;--surface:#fff;--card:#fff;--border:#e5e8ef;
  --accent:#4f8ef7;--green:#22c55e;--amber:#f59e0b;--red:#ef4444;--purple:#8b5cf6;
  --seg-s:#22c55e;--seg-o:#f59e0b;--seg-g:#4f8ef7;--seg-r:#ef4444;
  --text:#1a1f2e;--muted:#191f29;--dim:#94a3b8;
  --hdr-bg:#1a2035;--nav-bg:#1e2644;
  --font-mono:'SF Mono','Fira Code',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;}body{height:100%;overflow:hidden;margin:0;padding:0;display:flex;flex-direction:column;}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);display:flex;height:100vh;font-size:16px;}
/* LEFT COLUMN — the brand mark sits above the rail and the panel and spans only their
   combined width, so the topbar begins at the panel's right edge. #appRoot stays a flex
   row: .app-side is the column, .app-side-body the row inside it holding rail + panel. */
.app-side{display:flex;flex-direction:column;flex-shrink:0;min-height:0;}
.app-side-body{flex:1;display:flex;min-height:0;overflow:hidden;}
.app-brand{background: var(--nav-bg);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  padding:9px 14px;border-bottom:1px solid rgba(0,0,0,.08);}
.app-brand img{max-width:100%;height:42px;width:auto;display:block;}

/* LEFT RAIL */
.nav-rail{width:56px;background:var(--nav-bg);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;flex-shrink:0;z-index:20;}
.nav-rail-logo{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex-shrink:0;border-radius:10px;overflow:hidden;}
.nav-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:21px;cursor:pointer;transition:all .15s;color:rgb(255 255 255);position:relative;}
.nav-icon:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-icon.active{background:rgba(79,142,247,.25);color:var(--accent);}
.nav-icon-tip{position:absolute;left:52px;background:#1a2035;color:#fff;font-size:13px;font-weight:600;padding:4px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:100;border:1px solid rgba(255,255,255,.1);}
.nav-icon:hover .nav-icon-tip{opacity:1;}
.nav-sep{width:28px;height:1px;background:rgba(255,255,255,.1);margin:6px 0;}
.nav-bottom{margin-top:auto;}
/* LEFT PANEL */
.left-panel{width:220px;background:var(--nav-bg);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;overflow-x:hidden;position:relative;transition:width .22s cubic-bezier(.4,0,.2,1);}
.lp-header{padding:16px 14px 10px;border-bottom:1px solid rgba(255,255,255,.08);}
.lp-title{font-size:14px;font-weight:700;color:rgba(255,255,255,.7);}
.lp-group{display:flex;flex-direction:column;padding:8px 8px 0;}
.lp-group-label{font-size:12px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.3);text-transform:uppercase;padding:6px 8px 4px;}
.lp-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;color:rgba(255,255,255,.55);font-size:14px;font-weight:500;transition:all .15s;margin-bottom:1px;}
.lp-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.lp-item.active{background:rgba(79,142,247,.2);color:#fff;font-weight:600;}
.lp-item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
/* PERIOD FILTER */
.lp-filter{padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);margin-top:auto;}
.lp-filter-title{font-size:12px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.35);text-transform:uppercase;margin-bottom:8px;}
.period-row{display:flex;align-items:center;gap:5px;margin-bottom:6px;}
.period-badge{font-size:12px;font-weight:700;padding:2px 7px;border-radius:4px;flex-shrink:0;}
.period-a{background:#4f8ef7;color:#fff;}
.period-b{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);}
.period-input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:3px 6px;font-size:13px;color:rgba(255,255,255,.8);cursor:pointer;}
.period-sep{font-size:13px;color:rgba(255,255,255,.3);}
.lp-takeaway{margin:10px 14px 14px;padding:10px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:7px;}
.lp-takeaway-ttl{font-size:12px;font-weight:700;color:#f59e0b;margin-bottom:5px;}
.lp-takeaway-txt{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;}
/* SHELL */
.shell{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
/* TOPBAR */
.topbar{background:var(--hdr-bg);padding:0 20px;display:flex;align-items:center;gap:12px;height:56px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06);}
/* One line each, ellipsised — the topbar is a fixed 56px and centres its content, so a title that
   wraps to two lines spills past both edges and its top half is clipped away. It only showed up
   at the larger text sizes, where the same bar has less room to lay out in. responsive.css
   already did this below lg; there was no reason for it to be phone-only. */
#tbTitleWrap{min-width:0;overflow:hidden;}
.topbar-title{font-size:16px;font-weight:800;letter-spacing:.04em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-sub{font-size:13px;color:rgba(255,255,255,.4);
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.export-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;border:1px solid rgba(79,142,247,.5);background:rgba(79,142,247,.15);color:#7ab3ff;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;}
.export-btn:hover{background:rgba(79,142,247,.25);}
/* THEME */
.theme-wrap{position:relative;}
.theme-trigger{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:5px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);font-size:14px;font-weight:600;cursor:pointer;}
.theme-swatch{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.theme-drop{display:none;position:fixed;background:#1a2035;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px;z-index:999;width:230px;box-shadow:0 8px 28px rgba(0,0,0,.5);}
.theme-drop.open{display:block;}
.theme-drop-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:8px;}
.theme-grid2{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.theme-card{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:6px;border:1.5px solid transparent;cursor:pointer;transition:all .15s;}
.theme-card:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.05);}
.theme-card.active-theme{border-color:var(--accent);}
.theme-palette{display:flex;gap:2px;}
.theme-dot{width:9px;height:9px;border-radius:50%;}
.theme-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.5);}
/* KPI STRIP */
.kpi-strip{
  background:linear-gradient(180deg,#1e2644 0%,#1a2035 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:stretch;padding:0 20px;
  flex-shrink:0;overflow-x:auto;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.kpi-item{
  display:flex;flex-direction:column;justify-content:center;
  padding:14px 22px;border-right:1px solid rgba(255,255,255,.06);
  cursor:pointer;min-width:140px;position:relative;
  transition:background .15s;gap:2px;color: #dedede;
}
.kpi-item:first-child{padding-left:0;}
.kpi-item:hover{background:rgba(255,255,255,.05);}
.kpi-item.sel{background:rgba(255,255,255,.06);}
.kpi-item.sel::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:3px;border-radius:3px 3px 0 0;
  background:var(--accent);
}
.kpi-item::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;border-radius:0 0 2px 2px;
  background:transparent;transition:background .15s;
}
.kpi-item:nth-child(1)::before{background:rgba(79,142,247,.7);}
.kpi-item:nth-child(2)::before{background:rgba(34,197,94,.7);}
.kpi-item:nth-child(3)::before{background:rgba(245,158,11,.6);}
.kpi-item:nth-child(4)::before{background:rgba(139,92,246,.6);}
.kpi-item:nth-child(5)::before{background:rgba(79,142,247,.5);}
.kpi-item:nth-child(6)::before{background:rgba(34,197,94,.5);}
.kpi-item:nth-child(7)::before{background:rgba(245,158,11,.5);}
.kpi-item:nth-child(8)::before{background:rgba(248,113,113,.6);}
.kpi-lbl{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:3px;white-space:nowrap;
}
.kpi-val{
  font-size:26px;font-weight:800;color:#fff;line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.kpi-unit{font-size:15px;color:rgba(255,255,255,.45);margin-left:3px;font-weight:600;}
.kpi-chg{font-size:13px;font-weight:600;margin-top:3px;display:flex;align-items:center;gap:3px;white-space:nowrap;}
.kpi-chg.up{color:#34d399;}.kpi-chg.dn{color:#f87171;}
/* CONTENT */
.content-area{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;}
.tab-panel{display:none;flex-direction:column;gap:14px;}
.tab-panel.active{display:flex;}