:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:rgba(17,24,39,.12);
  --card:#ffffff;
  --surface:#ffffff;
  --accent:#4f46e5;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --radius:16px;
  --radius-sm:12px;
  --pad:16px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

body[data-theme="dark"]{
  --bg:#0b0f17;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:rgba(148,163,184,.18);
  --card:#121826;
  --surface:#121826;
  --accent:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

body[data-theme="dark"] .tab{
  color:rgba(226,232,240,.7);
  border-color:transparent;
}
body[data-theme="dark"] .tab:hover{
  background:rgba(226,232,240,.06);
}
body[data-theme="dark"] .tab.active{
  border-color:rgba(226,232,240,.22);
  background:rgba(226,232,240,.08);
  color:#e5e7eb;
  box-shadow:0 0 0 1px rgba(148,163,184,.2), 0 6px 16px rgba(15,23,42,.45);
}
body[data-theme="dark"] .ghostBtn,
body[data-theme="dark"] .rangeBtn,
body[data-theme="dark"] .segBtn{
  background:#0f172a;
  border-color:rgba(226,232,240,.2);
  color:#e5e7eb;
}
body[data-theme="dark"] .ghostBtn:hover,
body[data-theme="dark"] .rangeBtn:hover,
body[data-theme="dark"] .segBtn:hover{
  background:rgba(226,232,240,.08);
}
body[data-theme="dark"] .solidBtn{
  background:#e5e7eb;
  color:#0b0f17;
  border-color:#e5e7eb;
}
body[data-theme="dark"] .solidBtn:hover{
  background:#cbd5f5;
}
body[data-theme="dark"] .ctrl select,
body[data-theme="dark"] .menuSelect,
body[data-theme="dark"] .rangeMenu,
body[data-theme="dark"] .rangeBtn,
body[data-theme="dark"] .rangePresetBtn,
body[data-theme="dark"] .calMonthBtn,
body[data-theme="dark"] .calNavBtn,
body[data-theme="dark"] .calDay,
body[data-theme="dark"] .catInput,
body[data-theme="dark"] .catSelect{
  background:#0f172a;
  border-color:rgba(226,232,240,.16);
  color:#e5e7eb;
}
body[data-theme="dark"] .rangePresetBtn.active{
  background:rgba(226,232,240,.12);
}
body[data-theme="dark"] .calDay.inRange{
  background:rgba(226,232,240,.14);
}
body[data-theme="dark"] .calDay.start,
body[data-theme="dark"] .calDay.end{
  background:#e5e7eb;
  color:#0b0f17;
}
body[data-theme="dark"] .calWeekdays{
  color:rgba(226,232,240,.6);
}
body[data-theme="dark"] .sparkWrap,
body[data-theme="dark"] .perfKpi,
body[data-theme="dark"] .metricMini,
body[data-theme="dark"] .driverItem,
body[data-theme="dark"] .barRow,
body[data-theme="dark"] .tbl{
  background:#0f172a;
  border-color:rgba(226,232,240,.16);
  box-shadow:0 10px 24px rgba(2,6,23,.55);
}
body[data-theme="dark"] .card,
body[data-theme="dark"] .catPanel,
body[data-theme="dark"] .catMapCol,
body[data-theme="dark"] .catGroupItem,
body[data-theme="dark"] .catMapRow,
body[data-theme="dark"] .catGroupItemRow,
body[data-theme="dark"] .catGroupEmpty,
body[data-theme="dark"] .catDropZone,
body[data-theme="dark"] .catInput,
body[data-theme="dark"] .catSelect,
body[data-theme="dark"] .menuSelect,
body[data-theme="dark"] .tbl th,
body[data-theme="dark"] .tbl td{
  background:#0f172a;
  border-color:rgba(226,232,240,.14);
  color:#e5e7eb;
}
body[data-theme="dark"] .catMapCol{
  background:rgba(15,23,42,.6);
}
body[data-theme="dark"] .catMapHeader{
  color:#a5b4fc;
}
body[data-theme="dark"] .catMapMeta,
body[data-theme="dark"] .muted,
body[data-theme="dark"] .catHelp,
body[data-theme="dark"] .catGroupItemRow .muted{
  color:rgba(226,232,240,.65);
}
body[data-theme="dark"] .catBadge{
  background:#e5e7eb;
  color:#0b0f17;
}
body[data-theme="dark"] .modalOverlay{
  background:rgba(2,6,23,.6);
}
body[data-theme="dark"] .modalCard{
  background:#0f172a;
  border-color:rgba(226,232,240,.16);
  color:#e5e7eb;
}
body[data-theme="dark"] .tutorialList{
  color:#e5e7eb;
}
body[data-theme="dark"] .tourBubble{
  background:#0f172a;
  border-color:rgba(226,232,240,.16);
  color:#e5e7eb;
}
body[data-theme="dark"] .tourText{
  color:rgba(226,232,240,.75);
}
body[data-theme="dark"] .tourBtn{
  background:#111827;
  border-color:rgba(226,232,240,.2);
  color:#e5e7eb;
}
body[data-theme="dark"] .tourBtn.primary{
  background:#e5e7eb;
  color:#0b0f17;
  border-color:#e5e7eb;
}
body[data-theme="dark"] .tourTarget{
  outline-color:rgba(226,232,240,.65);
  box-shadow:0 0 0 4px rgba(226,232,240,.12);
}
body[data-theme="dark"] .lsDialogOverlay{
  background:rgba(2,6,23,.65);
}
body[data-theme="dark"] .lsDialog{
  background:#0f172a;
  border-color:rgba(226,232,240,.16);
  color:#e5e7eb;
}
body[data-theme="dark"] .lsDialogText{
  color:rgba(226,232,240,.75);
}
body[data-theme="dark"] .lsDialogInput{
  background:#0b1220;
  border-color:rgba(226,232,240,.16);
  color:#e5e7eb;
}
body[data-theme="dark"] .locPanel,
body[data-theme="dark"] .acctMenu,
body[data-theme="dark"] .menuList,
body[data-theme="dark"] .intInput,
body[data-theme="dark"] .intMapItem{
  background:#0f172a;
  border-color:rgba(226,232,240,.16);
  color:#e5e7eb;
}
body[data-theme="dark"] .locModes,
body[data-theme="dark"] .locItem{
  color:rgba(226,232,240,.8);
}
body[data-theme="dark"] .locItem input{
  accent-color:#e5e7eb;
}
body[data-theme="dark"] .locLabel,
body[data-theme="dark"] .intHelp,
body[data-theme="dark"] .menuMeta{
  color:rgba(226,232,240,.6);
}
body[data-theme="dark"] .menuBtn{
  background:#0f172a;
  border-color:rgba(226,232,240,.16);
  color:#e5e7eb;
}
body[data-theme="dark"] .menuBtn:hover{
  background:rgba(226,232,240,.08);
}
body[data-theme="dark"] .acctBtn{
  background:#0f172a;
  border-color:rgba(226,232,240,.2);
  color:#e5e7eb;
}
body[data-theme="dark"] .acctName{ color:#e5e7eb; }
body[data-theme="dark"] .chev{ color:rgba(226,232,240,.7); }
body[data-theme="dark"] .userRow{ border-color:#334155; }
body[data-theme="dark"] .settingToggle{ background:#334155; border-color:#475569; }

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ max-width:1100px; margin:0 auto; padding:20px; }
.muted{ color:var(--muted); }
.h1{ font-size:28px; font-weight:800; letter-spacing:-.02em; }

.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex; gap:16px; align-items:center;
  padding:12px 20px;
}

.brand{ display:flex; align-items:center; gap:12px; min-width:220px; }
.brandMark{
  width:36px; height:36px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  font-weight:900;
}
.brandText{ display:flex; flex-direction:column; line-height:1.1; }
.brandTitle{ font-weight:800; }
.brandSub{ font-size:12px; color:var(--muted); margin-top:2px; }

.tabs{ display:flex; gap:8px; flex:1; }
.tab{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:rgba(17,24,39,.78);
}
.tab:hover{ background:rgba(17,24,39,.03); }
.tab.active{
  border-color:var(--accent);
  background:rgba(99,102,241,.07);
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}

.pill{
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  background:rgba(17,24,39,.02);
}

/* --- account pill --- */
.acct{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.locPicker{ position:relative; display:flex; align-items:center; }
.locPanel{
  position:absolute;
  right:0;
  top:42px;
  min-width:280px;
  max-width:360px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  box-shadow:0 12px 30px rgba(15,23,42,.12);
  display:none;
  z-index:30;
}
.locPanel.show{ display:block; }
.locRow{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.locLabel{ font-size:12px; font-weight:700; color:#64748b; }
.locModes{ display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:#334155; }
.locList{ max-height:220px; overflow:auto; display:grid; gap:6px; }
.locItem{ display:flex; align-items:center; gap:8px; font-size:13px; }
.locActions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.locCompareTable{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.locCompareTable th,
.locCompareTable td{
  text-align:left;
  padding:6px 8px;
  border-bottom:1px solid rgba(17,24,39,.08);
}
.locCompareTable th{ color:#64748b; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.acctBtn{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  cursor:pointer;
}
.acctBtn:hover{ background:rgba(17,24,39,.02); }
.avatar{
  width:28px; height:28px; border-radius:999px;
  background:#4f46e5; color:#fff;
  font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.acctName{ font-size:13px; font-weight:700; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chev{ font-size:12px; color:rgba(17,24,39,.6); }

.ghostBtn{
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  cursor:pointer;
}
.ghostBtn:hover{ background:rgba(17,24,39,.02); }

.acctMenu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:420px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  padding:12px;
  display:none;
}
.acctMenu.open{ display:block; }
.menuRow{ display:grid; gap:8px; }
.menuLabel{ font-size:12px; color:var(--muted); }
.menuSelect{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
}
.menuList{ display:grid; gap:8px; }
.menuBtn{
  width:100%;
  text-align:left;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
.menuBtn:hover{ background:rgba(17,24,39,.02); }
.menuMeta{ font-size:12px; color:var(--muted); }
.menuActions{
  display:flex; justify-content:flex-end;
  margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(17,24,39,.08);
}
.dangerBtn{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.dangerBtn:hover{ background:rgba(17,24,39,.02); }

/* --- home layout --- */
.hero{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  background:linear-gradient(to bottom, rgba(17,24,39,.02), transparent);
}
.aiNote{
  margin-top:12px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  font-size:14px;
}

.kpis{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){
  .kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .kpis{ grid-template-columns:1fr; }
}

.kpi{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  padding:18px;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
}
.kpiTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kpiLabel{ font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.kpiValue{ font-size:28px; font-weight:900; letter-spacing:-.02em; margin:8px 0 6px; }
.kpiDelta{ display:flex; gap:10px; flex-wrap:wrap; }
.delta{ font-size:12px; }

.why{
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.why:hover{ background:rgba(17,24,39,.02); }

.row{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:12px;
}
@media (max-width: 980px){
  .row{ grid-template-columns:1fr; }
}

.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  padding:20px;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
}
.cardTitle{ font-weight:900; margin-bottom:10px; }
.cardHint{ margin-top:10px; font-size:12px; }

.signals{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 520px){
  .signals{ grid-template-columns:1fr; }
}
.sig{ border:1px solid rgba(17,24,39,.10); border-radius:14px; padding:12px; }
.sigLabel{ font-size:12px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.sigVal{ font-size:20px; font-weight:900; margin-top:6px; }
.sigSub{ font-size:12px; margin-top:2px; }

.mix{ display:grid; gap:10px; }
.mixItem{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(17,24,39,.08);
  border-radius:14px;
  padding:10px 12px;
}
.mixName{ font-weight:900; }
.mixSub{ font-size:12px; color:var(--muted); margin-top:2px; }

/* --- clickable affordance (NEW) --- */
.kpiLink, .sigLink { cursor:pointer; }
.kpiLink:hover, .sigLink:hover { background: rgba(17,24,39,.02); }
.kpiLink:focus, .sigLink:focus { outline: none; box-shadow: 0 0 0 3px rgba(17,24,39,.10); }

/* --- performance page --- */
body[data-page="performance"]{
  background:linear-gradient(180deg, #f5f7fb 0%, #f8fafc 45%, #ffffff 100%);
  --perf-accent:#2563eb;
  --perf-accent-2:#0ea5e9;
  --perf-accent-soft:rgba(37,99,235,.12);
  --perf-card:#ffffff;
}
body[data-theme="dark"][data-page="performance"]{
  background:linear-gradient(180deg, #0b0f17 0%, #0d1422 60%, #0b0f17 100%);
  --perf-accent:#38bdf8;
  --perf-accent-2:#22d3ee;
  --perf-accent-soft:rgba(56,189,248,.14);
  --perf-card:#0f172a;
}
body[data-theme="dark"][data-page="performance"] .topbar{
  background:rgba(11,15,23,.9);
  border-bottom:1px solid rgba(148,163,184,.16);
}
body[data-page="performance"] .topbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
body[data-page="performance"] .wrap{ max-width:1180px; }
body[data-theme="dark"][data-page="performance"] .perfPills{
  background:#0f172a;
  border-color:rgba(148,163,184,.2);
  box-shadow:0 10px 26px rgba(2,6,23,.45);
}
body[data-theme="dark"][data-page="performance"] .perfPills .ghostBtn{
  color:#cbd5f5;
  background:transparent;
}
body[data-theme="dark"][data-page="performance"] .perfPills .ghostBtn:hover{
  background:rgba(226,232,240,.08);
}
body[data-theme="dark"][data-page="performance"] .perfPills .ghostBtn.active{
  color:#0b0f17;
}
body[data-theme="dark"][data-page="performance"] .metricHero{
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(34,211,238,.06), rgba(15,23,42,0));
}
body[data-theme="dark"][data-page="performance"] .sparkLegend .muted{
  background:rgba(226,232,240,.08);
  border-color:rgba(226,232,240,.18);
}
body[data-theme="dark"][data-page="performance"] .trendTooltip{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,24,39,.95));
  border-color:rgba(96,165,250,.22);
  box-shadow:0 18px 48px rgba(2,6,23,.42);
}
body[data-theme="dark"][data-page="performance"] .trendTooltipTitle,
body[data-theme="dark"][data-page="performance"] .trendTooltipValueRow,
body[data-theme="dark"][data-page="performance"] .trendTooltipCompare{
  color:#cbd5e1;
}
body[data-theme="dark"][data-page="performance"] .trendTooltipValueRow strong,
body[data-theme="dark"][data-page="performance"] .trendTooltipCompare strong{
  color:#f8fafc;
}
body[data-theme="dark"][data-page="performance"] .chartLegendItem{
  background:rgba(226,232,240,.08);
  border-color:rgba(226,232,240,.12);
  box-shadow:none;
}
body[data-theme="dark"][data-page="performance"] .tbl thead th{
  background:rgba(226,232,240,.08);
}
body[data-theme="dark"][data-page="performance"] .tbl tbody tr:nth-child(even){
  background:rgba(226,232,240,.03);
}
body[data-theme="dark"][data-page="performance"] .tbl tbody tr:hover{
  background:rgba(56,189,248,.08);
}
body[data-theme="dark"][data-page="performance"] .barRow{
  background:#0f172a;
  border-color:rgba(226,232,240,.16);
}
body[data-theme="dark"][data-page="performance"] .barLabel,
body[data-theme="dark"][data-page="performance"] .barVal{
  color:#e5e7eb;
}

/* --- home page --- */
body[data-page="home"]{
  background:linear-gradient(180deg, #f6f8fb 0%, #f9fafb 45%, #ffffff 100%);
  --home-accent:#2563eb;
  --home-accent-2:#22c55e;
  --home-card:#ffffff;
}
body[data-theme="dark"][data-page="home"]{
  background:linear-gradient(180deg, #0b0f17 0%, #0d1422 60%, #0b0f17 100%);
  --home-accent:#38bdf8;
  --home-accent-2:#22d3ee;
  --home-card:#0f172a;
}
body[data-page="home"] .topbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
body[data-theme="dark"][data-page="home"] .topbar{
  background:rgba(11,15,23,.9);
  border-bottom:1px solid rgba(148,163,184,.16);
}
body[data-page="home"] .wrap{ max-width:1180px; }
body[data-page="home"] .setupList{
  display:grid;
  gap:10px;
}
body[data-page="home"] .setupItem{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  background:#fff;
}
body[data-page="home"] .setupDot{
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
}
body[data-page="home"] .setupItem.done{
  border-color:rgba(34,197,94,.38);
  background:rgba(34,197,94,.08);
}
body[data-page="home"] .setupItem.done .setupDot{
  background:#16a34a;
  color:#fff;
  border-color:#16a34a;
}

body[data-page="home"] .hero{
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  padding:18px;
  background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(34,197,94,.05), rgba(255,255,255,0));
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
body[data-page="home"] .pill{
  background:rgba(37,99,235,.10);
  border-color:rgba(37,99,235,.22);
  color:#1e3a8a;
  font-weight:700;
}
body[data-page="home"] .aiNote{
  background:#fff;
  border-color:rgba(15,23,42,.12);
  box-shadow:0 8px 22px rgba(15,23,42,.08);
}

body[data-page="home"] .kpis{ gap:12px; }
body[data-page="home"] .kpi{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:var(--home-card);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  position:relative;
}
body[data-page="home"] .kpi::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--home-accent), var(--home-accent-2));
}
body[data-page="home"] .kpiValue{ font-size:30px; }
body[data-page="home"] .kpiDelta .delta{
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
  padding:4px 8px;
  border-radius:999px;
}

body[data-page="home"] .row .card{
  border-radius:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
body[data-page="home"] .signals{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
body[data-page="home"] .sig{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 16px rgba(15,23,42,.06);
  position:relative;
}
body[data-page="home"] .sig::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--home-accent), var(--home-accent-2));
}
body[data-page="home"] .mixItem{
  border-color:rgba(15,23,42,.08);
  background:#fff;
  box-shadow:0 6px 14px rgba(15,23,42,.05);
}

body[data-theme="dark"][data-page="home"] .hero{
  border-color:rgba(148,163,184,.18);
  background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(34,211,238,.06), rgba(15,23,42,0));
  box-shadow:0 12px 28px rgba(2,6,23,.5);
}
body[data-theme="dark"][data-page="home"] .setupItem{
  background:#0f172a;
  border-color:rgba(148,163,184,.22);
}
body[data-theme="dark"][data-page="home"] .setupDot{
  border-color:rgba(148,163,184,.35);
}
body[data-theme="dark"][data-page="home"] .setupItem.done{
  background:rgba(22,163,74,.22);
  border-color:rgba(74,222,128,.45);
}
body[data-theme="dark"][data-page="home"] .pill{
  background:rgba(56,189,248,.16);
  border-color:rgba(56,189,248,.28);
  color:#e0f2fe;
}
body[data-theme="dark"][data-page="home"] .aiNote{
  background:#0f172a;
  border-color:rgba(148,163,184,.18);
  box-shadow:0 10px 24px rgba(2,6,23,.55);
}
body[data-theme="dark"][data-page="home"] .kpi,
body[data-theme="dark"][data-page="home"] .row .card,
body[data-theme="dark"][data-page="home"] .sig,
body[data-theme="dark"][data-page="home"] .mixItem{
  background:#0f172a;
  border-color:rgba(148,163,184,.18);
  box-shadow:0 10px 24px rgba(2,6,23,.55);
}
body[data-theme="dark"][data-page="home"] .kpiDelta .delta{
  background:rgba(226,232,240,.08);
  border-color:rgba(226,232,240,.18);
  color:#e5e7eb;
}

/* --- integrations page --- */
body[data-page="integrations"]{
  background:linear-gradient(180deg, #f6f8fb 0%, #f9fafb 45%, #ffffff 100%);
}
body[data-theme="dark"][data-page="integrations"]{
  background:linear-gradient(180deg, #0b0f17 0%, #0d1422 60%, #0b0f17 100%);
}
body[data-page="integrations"] .topbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
body[data-theme="dark"][data-page="integrations"] .topbar{
  background:rgba(11,15,23,.9);
  border-bottom:1px solid rgba(148,163,184,.16);
}
body[data-page="integrations"] .wrap{ max-width:1180px; }
body[data-page="integrations"] .intCard{
  border-radius:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
body[data-page="integrations"] .statusPill{
  background:#111827;
  color:#fff;
}
body[data-page="integrations"] .statusPill.muted{
  background:rgba(15,23,42,.08);
  color:rgba(15,23,42,.7);
}
body[data-theme="dark"][data-page="integrations"] .intCard{
  background:#0f172a;
  border-color:rgba(148,163,184,.18);
  box-shadow:0 10px 24px rgba(2,6,23,.55);
}
body[data-theme="dark"][data-page="integrations"] .intMeta,
body[data-theme="dark"][data-page="integrations"] .intHelp,
body[data-theme="dark"][data-page="integrations"] .muted{
  color:rgba(226,232,240,.7);
}
body[data-theme="dark"][data-page="integrations"] .statusPill{
  background:#e5e7eb;
  color:#0b0f17;
}
body[data-theme="dark"][data-page="integrations"] .statusPill.muted{
  background:rgba(226,232,240,.12);
  color:rgba(226,232,240,.75);
}

.perfHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.perfControls{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.ctrl{ display:grid; gap:6px; position:relative; }
.ctrlLabel{ font-size:12px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.ctrl select{
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  min-width:180px;
}

.rangeBtn{
  min-width:220px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  text-align:left;
  font-weight:700;
}
.rangeBtn:after{
  content:"v";
  float:right;
  color:rgba(17,24,39,.6);
}

.rangeMenu{
  position:absolute;
  margin-top:6px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  display:none;
  z-index:30;
}
.rangeMenu.open{ display:block; }
.rangeMenuGrid{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:12px;
  padding:12px;
}
.rangePresets{
  display:grid;
  gap:6px;
}
.rangePresetBtn{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:#fff;
  text-align:left;
  cursor:pointer;
  font-weight:600;
}
.rangePresetBtn:hover{ background:rgba(17,24,39,.04); }
.rangePresetBtn.active{
  border-color:var(--border);
  background:rgba(17,24,39,.04);
}
.rangePresetCustom{ margin-top:8px; }

.rangeCalendar{
  min-width:300px;
}
.calHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.calNavBtn{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.calMonthBtn{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:700;
}
.calWeekdays{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
  font-size:11px;
  color:var(--muted);
  text-align:center;
  margin-bottom:6px;
}
.calGrid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}
.calDay{
  height:32px;
  border-radius:999px;
  border:1px solid transparent;
  background:#fff;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}
.calDay:hover{ background:rgba(17,24,39,.05); }
.calDay.muted{ color:rgba(17,24,39,.35); }
.calDay.inRange{
  background:rgba(17,24,39,.08);
}
.calDay.start,
.calDay.end{
  background:#111827;
  color:#fff;
}
.calFooter{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin-top:10px;
}

@media (max-width: 980px){
  .rangeMenuGrid{ grid-template-columns:1fr; }
  .rangeBtn{ width:100%; min-width:0; }
}

.perfGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 980px){
  .perfHeader{ flex-direction:column; align-items:stretch; }
  .perfControls{ width:100%; }
  .ctrl select{ width:100%; min-width:0; }
  .perfGrid{ grid-template-columns:1fr; }
}

.perfKpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 520px){
  .perfKpis{ grid-template-columns:1fr; }
}
.perfKpi{
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  padding:12px;
  background:#fff;
}

.perfNote{
  margin-top:12px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(17,24,39,.02);
  color:rgba(17,24,39,.85);
  font-size:13px;
}

.sparkWrap{
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
#spark{ width:100%; height:180px; display:block; }

.sparkLegend{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  flex-wrap:wrap;
  font-size:12px;
}

.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.tbl th, .tbl td{
  border-top:1px solid rgba(17,24,39,.08);
  padding:10px 8px;
}
.tbl th{
  text-align:left;
  color:rgba(17,24,39,.72);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.driverList{ display:grid; gap:10px; }
.driverItem{
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.driverTitle{ font-weight:900; margin-bottom:4px; }

/* --- shared segmented + solid buttons --- */
.segBtn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.segBtn.active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.solidBtn{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.solidBtn:hover{ background:#4338ca; border-color:#4338ca; }
.solidBtn:disabled{ background:#9ca3af; border-color:#9ca3af; cursor:not-allowed; opacity:.7; }

/* --- categories page --- */
.categories{ display:grid; gap:14px; }
.catPageHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
}
.catHeaderActions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  flex-shrink:0;
}
.catSyncMeta{ font-size:12px; }
.catMain{ display:grid; gap:0; }
.catMainHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--border);
}
.catSetupBtn{ white-space:nowrap; flex-shrink:0; font-size:13px; padding:8px 14px; }
.catUnassignedToggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  cursor:pointer;
}
.catAutoSave{ font-size:12px; white-space:nowrap; }

.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(9,13,23,0.35);
  backdrop-filter:blur(3px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:40;
}
.modalOverlay.show{ display:flex; }
.modalCard{
  width:min(720px,92vw);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 25px 50px rgba(15,23,42,0.12);
  padding:18px 20px;
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  flex-shrink:0;
}
.modalTitle{ font-size:18px; font-weight:700; }
.modalBody{ display:grid; gap:16px; overflow-y:auto; flex:1; padding-right:4px; }
.wizardChoice{ display:flex; gap:12px; flex-wrap:wrap; }
.wizardActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:8px;
  flex-wrap:wrap;
}
.wizardChips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; min-height:24px; }
.wizardChip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  border-radius:999px;
  padding:3px 10px 3px 10px;
  font-size:12px;
  font-weight:600;
}
.wizardChipX{
  background:none;
  border:none;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  color:#64748b;
  padding:0 0 0 2px;
}
.wizardChipX:hover{ color:#ef4444; }
.wizardChipUnassigned{ background:rgba(239,68,68,.07); border-color:rgba(239,68,68,.2); }
.wizardChipSelect{
  border:none;
  background:none;
  font-size:12px;
  cursor:pointer;
  color:#2563eb;
  padding:0;
}
.wizardUnassignedPool{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(15,23,42,.12);
}
.wizardUnassignedLabel{ font-size:12px; font-weight:700; color:#ef4444; margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
.wizardSubcat{ margin-top:8px; padding-left:12px; border-left:3px solid rgba(37,99,235,.25); }
.wizardSubcatName{ font-size:12px; font-weight:700; color:#2563eb; margin-bottom:4px; }
.wizardCoverage{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wizardCoverageBar{ flex:1; height:6px; background:rgba(15,23,42,.08); border-radius:999px; overflow:hidden; }
.wizardCoverageFill{ height:100%; border-radius:999px; transition:width .3s; }
.wizardCoverageLabel{ font-size:12px; color:var(--muted); white-space:nowrap; }
.wizardCoverageOk{ color:#16a34a; font-weight:700; }
.wizardQuestion{ display:grid; gap:6px; padding:12px 0; border-bottom:1px solid rgba(15,23,42,.07); }
.wizardQuestion:last-child{ border-bottom:none; }
.wizardQuestionText{ font-weight:600; font-size:14px; }
.wizardOptions{ display:flex; gap:8px; flex-wrap:wrap; }
.wizardOptionBtn{ padding:6px 14px; font-size:13px; transition:background .1s, color .1s, border-color .1s; }
.modalCard .wizardOptionBtn.active,
body[data-theme="dark"] .modalCard .wizardOptionBtn.active{
  background:#2563eb !important;
  color:#fff !important;
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.25);
}
.tutorialList{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
}

/* --- performance layout + tiles --- */
.perfPills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:999px;
  padding:6px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.perfPills .ghostBtn{
  border-radius:999px;
  border:1px solid transparent;
  padding:8px 14px;
  font-weight:700;
  color:#334155;
  background:transparent;
}
.perfPills .ghostBtn:hover{ background:rgba(15,23,42,.06); }
.perfPills .ghostBtn.active{
  background:var(--perf-accent);
  color:#fff;
  box-shadow:0 6px 16px rgba(37,99,235,.35);
}

.metricView{
  display:grid;
  gap:12px;
}
.metricHero{
  display:grid;
  grid-template-columns:1.15fr 1.85fr;
  gap:16px;
  align-items:stretch;
  background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(14,165,233,.05), rgba(255,255,255,0));
}
.metricBig{
  font-size:36px;
  font-weight:900;
  letter-spacing:-.02em;
  margin:6px 0 4px;
}
.metricMiniGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.metricMini{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  padding:12px;
  background:var(--perf-card);
  box-shadow:0 6px 16px rgba(15,23,42,.06);
  position:relative;
}
.metricMini::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--perf-accent), var(--perf-accent-2));
}
.kpiValueSm{
  font-size:20px;
  font-weight:800;
  margin:6px 0 4px;
}

.metricTwoCol{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:12px;
}
.metricRowControls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.seg{ display:flex; gap:8px; flex-wrap:wrap; }

.sparkWrap{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at top, rgba(59,130,246,.08), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding:14px 12px 10px;
  position:relative;
}
.sparkWrap svg{ width:100%; height:220px; display:block; }
.trendAxisLabel{
  font-weight:800;
  letter-spacing:.01em;
  opacity:.92;
}
.trendTooltip{
  position:absolute;
  top:12px;
  transform:translateX(-50%);
  min-width:132px;
  max-width:200px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  border:1px solid rgba(37,99,235,.18);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(15,23,42,.16);
  padding:11px 12px 10px;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s ease, transform .12s ease;
  backdrop-filter:blur(10px);
}
.trendTooltip.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.trendTooltipTitle{
  font-size:12px;
  color:#334155;
  margin-bottom:6px;
  font-weight:800;
}
.trendTooltipValueRow,
.trendTooltipCompare{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
  font-size:12px;
  color:#334155;
}
.trendTooltipValueRow{
  margin-top:4px;
  padding-top:4px;
}
.trendTooltipCompare{
  margin-top:6px;
}
.trendTooltipSeries{
  margin-right:auto;
}
.trendTooltipDot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex-shrink:0;
  background:#94a3b8;
}
.trendTooltipDot.current{
  background:linear-gradient(135deg, #2563eb, #0ea5e9);
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}
.trendTooltipValueRow strong,
.trendTooltipCompare strong{
  font-size:18px;
  font-weight:900;
  color:#0f172a;
  letter-spacing:-.02em;
}
.sparkLegend{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
}
.sparkLegend .muted{
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
  padding:4px 8px;
  border-radius:999px;
}

.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  border-radius:12px;
  overflow:hidden;
}
.tbl thead th{
  background:rgba(15,23,42,.04);
}
.tbl tbody tr:nth-child(even){
  background:rgba(15,23,42,.02);
}
.tbl tbody tr:hover{
  background:rgba(37,99,235,.06);
}

.barList{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.barRow{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:10px;
  align-items:center;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:8px 10px;
  background:#fff;
}
.barLabel{ font-weight:700; color:#334155; }
.barTrack{
  height:10px;
  border-radius:999px;
  background:rgba(37,99,235,.12);
  overflow:hidden;
}
.barFill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--perf-accent), var(--perf-accent-2));
}
.barVal{ font-weight:800; font-size:12px; color:#0f172a; }

@media (max-width: 980px){
  .metricHero{ grid-template-columns:1fr; }
  .metricTwoCol{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .metricMiniGrid{ grid-template-columns:1fr; }
  .barRow{ grid-template-columns:1fr; }
  .barTrack{ order:3; }
  .barVal{ order:2; text-align:right; }
}

/* --- delta indicators --- */
.deltaUp{ color:#16a34a; font-weight:700; }
.deltaDown{ color:#dc2626; font-weight:700; }
.deltaFlat{ color:var(--muted); font-weight:700; }
body[data-theme="dark"] .deltaUp{ color:#4ade80; }
body[data-theme="dark"] .deltaDown{ color:#f87171; }

/* --- chart legend --- */
.chartLegend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  margin-top:8px;
}
.chartLegendItem{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-weight:800;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.035);
  border:1px solid rgba(15,23,42,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.chartLegendSwatch{
  width:22px;
  height:3px;
  border-radius:2px;
  flex-shrink:0;
}
.chartLegendSwatch.dashed{
  background:repeating-linear-gradient(
    90deg,
    currentColor 0px, currentColor 4px,
    transparent 4px, transparent 8px
  );
  height:2px;
}

body[data-theme="dark"][data-page="performance"] .trendAxisLabel{
  fill:#cbd5e1;
}

/* --- loading overlay --- */
.loadingOverlay{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:80px;
  pointer-events:none;
}
.loadingPill{
  background:#111827;
  color:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .15s ease, transform .15s ease;
}
.loadingOverlay.show .loadingPill{
  opacity:1;
  transform:translateY(0);
}
body[data-theme="dark"] .loadingPill{
  background:#e5e7eb;
  color:#0b0f17;
}

/* --- page tours --- */
.tourOverlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
}
.tourBubble{
  position:fixed;
  max-width:320px;
  background:#fff;
  border:1px solid rgba(17,24,39,.12);
  border-radius:12px;
  padding:12px;
  box-shadow:0 18px 50px rgba(15,23,42,.18);
  z-index:61;
  pointer-events:auto;
}
.tourTitle{ font-weight:800; margin-bottom:6px; }
.tourText{ font-size:13px; color:#374151; margin-bottom:10px; }
.tourControls{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.tourBtn{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.tourBtn.primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.tourTarget{
  outline:2px solid rgba(17,24,39,.7);
  box-shadow:0 0 0 4px rgba(17,24,39,.12);
  border-radius:10px;
}
.wizardList{
  display:grid;
  gap:10px;
  max-height:320px;
  overflow:auto;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fafbff;
}
.wizardRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.wizardListItem{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  display:grid;
  gap:6px;
  cursor:grab;
}
.wizardToggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#334155;
}
.wizardToggle input{ transform:translateY(1px); }
.wizardInlineInput{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:6px 10px;
  font-size:14px;
  width:min(320px, 100%);
}
.wizardInlineActions{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
}
.wizardMiniBtn{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:10px;
  padding:4px 8px;
  font-size:12px;
  cursor:pointer;
}
.wizardMiniBtn:hover{ border-color:#cbd5f5; }
.wizardListTitle{
  font-weight:600;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.wizardTag{ font-size:12px; color:#64748b; }

.catGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){
  .catGrid{ grid-template-columns:1fr; }
}

.catPanel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  padding:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.catPanelWide{
  grid-column: span 2;
}
@media (max-width: 980px){
  .catPanelWide{ grid-column: auto; }
}

.catPanelHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.catTitle{ font-weight:900; font-size:18px; margin-bottom:4px; }

.catAdd{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}
.catInput{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
}

.catGroupList{ display:grid; gap:8px; }
.catGroupItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border:1px solid rgba(17,24,39,.08);
  border-radius:12px;
  padding:10px 12px;
}
.catGroupItem.clickable{ cursor:pointer; }
.catGroupItem.clickable:hover{
  border-color:#94a3b8;
  box-shadow:0 0 0 2px rgba(148,163,184,.25);
}
.catGroupActions{ display:flex; gap:8px; }
.catGroupActions .ghostBtn{ padding:6px 10px; font-size:12px; }
.catGroupItems{
  margin-top:8px;
  border-top:1px dashed rgba(17,24,39,.08);
  padding-top:8px;
  display:grid;
  gap:6px;
}
.catGroupItemRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(15,23,42,.03);
  font-size:13px;
}
.catGroupItemRow.selected{
  background:rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.35);
}
.catMapRow.selected{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.35);
}
.catGroupItemRow:hover{
  box-shadow:0 0 0 1px rgba(15,23,42,.08);
}
.catDropZone{
  margin-top:10px;
  border:1px dashed rgba(17,24,39,.2);
  border-radius:12px;
  padding:10px 12px;
  text-align:center;
  font-size:13px;
  color:#64748b;
}
.catDropZone.dropTarget{
  border-color:#111827;
  box-shadow:0 0 0 2px rgba(17,24,39,.10);
  color:#111827;
}
.catGroupItem.dropTarget{
  border-color:#111827;
  box-shadow:0 0 0 2px rgba(17,24,39,.10);
}
.catGroupItem.dragging{
  opacity:.7;
}
.catGroupName{ font-weight:800; }
.catGroupEmpty{
  border:1px dashed rgba(17,24,39,.18);
  border-radius:12px;
  padding:12px;
}

.catSeg{ display:flex; gap:8px; }
.catControls{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
@media (max-width: 980px){
  .catControls{ grid-template-columns:1fr; }
}
.catFilters{ display:flex; gap:8px; }

.catMapGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){
  .catMapGrid{ grid-template-columns:1fr; }
}

.catReportingView{
  display:grid;
  gap:12px;
}
.catCopyRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.catReportingGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){
  .catReportingGrid{ grid-template-columns:1fr; }
}
.catMapCol{
  border:1px solid rgba(17,24,39,.10);
  border-radius:12px;
  padding:14px;
  background:rgba(17,24,39,.01);
  min-height:320px;
}
.catMapHeader{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--muted);
  font-weight:800;
  margin-bottom:8px;
}
.catMapList{ display:grid; gap:8px; }
.catMapRow{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px;
  align-items:center;
  border:1px solid rgba(17,24,39,.08);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.catMapRow.dragging{ opacity:.6; }
.catMapName{ font-weight:700; }
.catMapMeta{ font-size:12px; color:var(--muted); }
.catBadge{
  background:#111827;
  color:#fff;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.catMapActions{
  display:flex;
  align-items:center;
  gap:8px;
}
.catSelect{
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
}

.catSteps{
  margin:8px 0 0;
  padding-left:18px;
  display:grid;
  gap:6px;
}

/* --- auth pages --- */
.authWrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.authCard{
  width:min(460px, 92vw);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:grid;
  gap:12px;
}
.authTitle{
  font-size:20px;
  font-weight:800;
}
.authField{
  display:grid;
  gap:6px;
  font-size:13px;
}
.authField input{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
}
.authActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.authMeta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
  font-size:12px;
}
.authMsg{
  min-height:18px;
  font-size:12px;
  color:#b91c1c;
}
.authMsg.ok{ color:#0f766e; }

.settingRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(17,24,39,.08);
}
.settingRow:first-child{ border-top:0; }
.settingText{ display:grid; gap:4px; }
.settingLabel{ font-weight:700; }
.settingHint{ font-size:12px; color:var(--muted); }
.settingToggle{
  width:46px;
  height:26px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(17,24,39,.08);
  position:relative;
  cursor:pointer;
}
.settingToggle::after{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  top:2px;
  left:2px;
  transition:transform .15s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.settingToggle.on{
  background:#111827;
  border-color:#111827;
}
.settingToggle.on::after{
  transform:translateX(20px);
}
.settingChip{
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  border:1px solid var(--border);
  background:rgba(17,24,39,.04);
}
.posList{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.posRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.posTitle{ font-weight:800; }
.posMeta{ font-size:12px; color:var(--muted); margin-top:2px; }
.posActions{ display:flex; align-items:center; gap:8px; }
.posBadge{
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#111827;
  color:#fff;
}

/* --- integrations page --- */
.intSection{ margin-top:18px; }
.intGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}
@media (max-width: 980px){
  .intGrid{ grid-template-columns:1fr; }
}
.intCard{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  display:grid;
  gap:10px;
}
.intHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.intTitle{ font-weight:900; font-size:16px; }
.intMeta{ font-size:12px; color:var(--muted); margin-top:2px; }
.statusPill{
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#111827;
  color:#fff;
}
.statusPill.muted{
  background:rgba(17,24,39,.08);
  color:rgba(17,24,39,.7);
}
.intActions{ display:flex; gap:8px; flex-wrap:wrap; }
.intManage{
  display:none;
  border-top:1px dashed rgba(17,24,39,.08);
  padding-top:10px;
  gap:8px;
}
.intManage.show{ display:grid; }
.intRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* --- app dialog (custom confirm/prompt) --- */
.lsDialogOverlay{
  position:fixed;
  inset:0;
  background:rgba(9,13,23,0.35);
  backdrop-filter:blur(2px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:1000;
}
.lsDialogOverlay.show{ display:flex; }
.lsDialog{
  width:min(420px, 92vw);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(15,23,42,0.18);
  padding:16px;
  display:grid;
  gap:10px;
}
.lsDialogTitle{ font-weight:800; font-size:16px; }
.lsDialogText{ font-size:13px; color:#475569; }
.lsDialogInput{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
}
.lsDialogActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

/* --- integrations extras --- */
.intManage{ display:none; gap:10px; border-top:1px dashed rgba(17,24,39,.12); padding-top:10px; }
.intManage.show{ display:grid; }
.intRow{ display:grid; gap:6px; }
.intLabel{ font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; }
.intInput{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  font-size:13px;
}
.intHelp{ font-size:12px; color:var(--muted); }
.intList{ display:grid; gap:6px; }
.intMapItem{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(17,24,39,.08);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  font-size:13px;
}
.intEmpty{ font-size:12px; color:var(--muted); }
.intMapRow{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap:8px;
  align-items:end;
}
@media (max-width: 640px){
  .intMapRow{ grid-template-columns:1fr; }
}

.intBullets, .intSteps{
  margin:6px 0 0;
  padding-left:18px;
  display:grid;
  gap:6px;
  font-size:13px;
  color:var(--text);
}
.intBullets li, .intSteps li{ line-height:1.4; }

.settingSeg{ display:flex; gap:8px; }
.settingSeg .segBtn{ padding:8px 12px; font-size:12px; }
.usersList{ display:grid; gap:8px; }
.userRow{ display:flex; justify-content:space-between; gap:10px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--card); color:var(--text); }
.userMeta{ font-size:12px; color:var(--muted); }

/* ── invoices page ──────────────────────────────────────────────────────────── */
body[data-page="invoices"]{
  background:linear-gradient(180deg, #f6f8fb 0%, #f9fafb 45%, #ffffff 100%);
}
body[data-theme="dark"][data-page="invoices"]{
  background:linear-gradient(180deg, #0b0f17 0%, #0d1422 60%, #0b0f17 100%);
}
body[data-page="invoices"] .topbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
body[data-theme="dark"][data-page="invoices"] .topbar{
  background:rgba(11,15,23,.9);
  border-bottom:1px solid rgba(148,163,184,.16);
}
body[data-page="invoices"] .wrap{ max-width:1180px; }

body[data-theme="dark"][data-page="inventory"]{
  background:linear-gradient(180deg, #0b0f17 0%, #0d1422 60%, #0b0f17 100%);
}
body[data-page="inventory"] .topbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
body[data-theme="dark"][data-page="inventory"] .topbar{
  background:rgba(11,15,23,.9);
  border-bottom:1px solid rgba(148,163,184,.16);
}
body[data-theme="dark"][data-page="inventory"] .invSummaryCard{
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.invPageHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.invPageActions{ display:flex; align-items:center; gap:8px; }
.invLocWrap{ display:flex; align-items:center; gap:6px; }
.invLocLabel{ font-size:12px; color:var(--muted); white-space:nowrap; }

/* Summary strip */
.invSummary{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.invSummaryCard{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  padding:10px 16px;
  min-width:90px;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.invSummaryNum{ font-size:22px; font-weight:900; letter-spacing:-.02em; }
.invSummaryLabel{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }

/* Filter bar */
.unmatchedBanner{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.35);
  border-radius:10px;padding:10px 16px;margin-bottom:12px;gap:12px;
}
body[data-theme="dark"] .unmatchedBanner{
  background:rgba(234,179,8,.1);border-color:rgba(234,179,8,.25);
}
.unmatchedBannerText{ display:flex;align-items:center;gap:10px;font-size:13px; }
.unmatchedBadge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;
  background:#dc2626;color:#fff;border-radius:999px;
  font-size:11px;font-weight:800;
}
.unmatchedGroup{
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;
}
.unmatchedGroupHeader{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;
}
.unmatchedChipRow{ display:flex;flex-wrap:wrap;gap:5px; }
.unmatchedChip{
  display:inline-block;font-size:12px;font-weight:600;
  background:var(--bg);border:1px solid var(--border);
  border-radius:6px;padding:2px 8px;
}
.unmatchedLocPickWrap{ display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0; }
.unmatchedAddLocForm{ display:flex;gap:6px;align-items:center; }
.unmatchedSampleInvoices{ display:flex;flex-direction:column;gap:4px; }
.unmatchedSampleRow{
  display:grid;grid-template-columns:1fr auto auto auto;gap:8px;
  font-size:12px;padding:4px 0;border-top:1px solid var(--border);
}

.invFilterBar{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:10px;
}
.invSearchInput{
  margin-left:auto;
  padding:7px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-size:13px;
  width:220px;
  outline:none;
  transition:border-color .15s;
}
.invSearchInput:focus{ border-color:#3b82f6; }
body[data-theme="dark"] .invSearchInput{ background:#1e293b; border-color:rgba(148,163,184,.25); }
.invSortable{ cursor:pointer; user-select:none; white-space:nowrap; }
.invSortable:hover{ color:var(--text); }
.invSortIcon{ font-size:10px; margin-left:3px; color:var(--muted); }

/* Table rows */
.invRow:hover{ background:rgba(17,24,39,.02); }
body[data-theme="dark"] .invRow:hover{ background:rgba(226,232,240,.04); }
.invRow.active{ background:rgba(37,99,235,.06); }
body[data-theme="dark"] .invRow.active{ background:rgba(56,189,248,.08); }
.invEmpty{ padding:20px; text-align:center; color:var(--muted); font-size:13px; }

/* Inventory sub-tabs */
.subTabs{ display:flex; gap:6px; flex-wrap:wrap; }
.subTab{
  padding:7px 16px; border-radius:8px; border:1px solid var(--border);
  background:transparent; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--muted); transition:background .15s, color .15s;
}
.subTab.active, .subTab:hover{
  background:var(--primary); color:#fff; border-color:var(--primary);
}
.invTab{ margin-top:10px; }

/* Weekly count inputs */
.wcInput{
  border:1px solid var(--border); border-radius:6px; padding:4px 6px;
  font-size:12px; background:var(--surface); color:var(--text);
}
.wcInput:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.wcCategoryRow td{
  background:var(--bg); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; padding:6px 12px; color:var(--muted);
}

/* Form labels in modals */
.formLabel{
  display:flex; flex-direction:column; gap:4px;
  font-size:12px; font-weight:600; color:var(--muted);
}
.formLabel .inputField{ margin-top:2px; }
.inputField{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg);
  color:var(--text); font-size:14px; font-family:inherit;
  box-sizing:border-box; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.inputField:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
body[data-theme="dark"] .inputField{ background:#0f172a; }

/* Onboarding wizard */
.onbOverlay{
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  z-index:600; display:flex; align-items:flex-end; justify-content:center;
}
.onbSheet{
  background:var(--surface); border-radius:24px 24px 0 0;
  width:100%; max-width:520px; padding:32px 28px 52px;
  box-shadow:0 -12px 60px rgba(0,0,0,.3);
  animation:onbSlideUp .3s cubic-bezier(.22,1,.36,1);
}
@keyframes onbSlideUp{
  from{transform:translateY(40px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
.onbTopBar{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;
}
.onbCloseBtn{
  background:none; border:none; cursor:pointer; font-size:18px; color:var(--muted);
  padding:4px 6px; border-radius:6px; line-height:1; flex-shrink:0;
  transition:color .15s, background .15s;
}
.onbCloseBtn:hover{ color:var(--text); background:var(--border); }
.onbDots{ display:flex; align-items:center; gap:6px; flex:1; }
.onbDot{
  width:6px; height:6px; border-radius:3px;
  background:var(--border); transition:width .25s, background .25s; flex-shrink:0;
}
.onbDotActive{ width:22px; background:var(--accent); }
.onbEmoji{ font-size:52px; text-align:center; margin-bottom:14px; line-height:1; }
.onbTitle{
  font-size:22px; font-weight:800; text-align:center;
  letter-spacing:-.02em; margin-bottom:12px; color:var(--text);
}
.onbBody{
  font-size:14px; color:var(--muted); line-height:1.7;
  text-align:center; margin-bottom:24px;
}
.onbBody strong{ color:var(--text); font-weight:700; }
.onbBody em{ font-style:normal; font-weight:600; color:var(--text); }
.onbCodeWrap{ margin-bottom:20px; }
.onbCodeDisplay{
  background:var(--bg); border:2px dashed var(--border); border-radius:12px;
  padding:16px 20px; text-align:center; font-family:monospace;
  font-size:28px; font-weight:800; letter-spacing:0.35em; color:var(--text);
}
.onbCodeLoading{ opacity:.4; }
.onbNextBtn{
  width:100%; padding:15px; font-size:15px; font-weight:700;
  border-radius:13px; margin-bottom:4px;
}
.onbSkipBtn{
  display:block; margin:12px auto 0;
  background:none; border:none; color:var(--muted);
  font-size:13px; cursor:pointer; padding:4px 8px;
  font-family:inherit;
}
.onbSkipBtn:hover{ color:var(--text); }
.onbTabsWrap{ margin-bottom:18px; }
.onbTabsLabel{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); text-align:center; margin-bottom:10px;
}
.onbTabsRow{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.onbTab{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:22px;
  border:1.5px solid var(--accent); color:var(--accent);
  font-size:13px; font-weight:600; text-decoration:none;
  transition:background .15s, transform .1s;
  background:transparent;
}
.onbTab:hover{ background:rgba(99,102,241,.08); transform:translateY(-1px); }
.onbTabEmoji{ font-size:15px; }
body[data-theme="dark"] .onbSheet{ background:var(--surface); }
body[data-theme="dark"] .onbTab{ border-color:rgba(229,231,235,.4); color:var(--accent); }

/* Notification bell */
.notifBell{ position:relative; display:flex; align-items:center; }
.notifBellBtn{ position:relative; padding:6px 10px; font-size:18px; line-height:1; }
.notifBadge{
  position:absolute; top:2px; right:2px;
  min-width:16px; height:16px; border-radius:8px;
  background:#dc2626; color:#fff;
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px; pointer-events:none;
}
.notifPanel{
  position:absolute; top:calc(100% + 8px); right:0;
  width:340px; max-height:420px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.14);
  z-index:200; overflow:hidden; display:flex; flex-direction:column;
}
.notifPanelHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.notifList{ overflow-y:auto; flex:1; }
.notifItem{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; cursor:pointer; transition:background .12s;
  border-bottom:1px solid var(--border);
}
.notifItem:last-child{ border-bottom:none; }
.notifItem:hover{ background:rgba(99,102,241,.05); }
.notifUnread{ background:rgba(99,102,241,.04); }
.notifItemIcon{ font-size:20px; flex-shrink:0; margin-top:1px; }
.notifDot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); flex-shrink:0; margin-top:5px;
}
body[data-theme="dark"] .notifPanel{ background:var(--surface); }

/* Recipe cards */
.recipeGrid{ display:flex; flex-direction:column; gap:2px; }
.recipeCatLabel{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:14px 4px 4px; border-bottom:1px solid var(--border); margin-bottom:4px;
}
.recipeCardRow{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.recipeCard{
  border:1px solid var(--border); border-radius:10px; padding:12px 14px;
  background:var(--surface); cursor:pointer; min-width:200px; flex:1; max-width:260px;
  transition:box-shadow .15s, border-color .15s; position:relative;
}
.recipeCard:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); border-color:var(--primary); }
.recipeCardName{ font-weight:700; font-size:14px; margin-bottom:4px; }
.recipeCardMeta{ font-size:11px; color:var(--muted); }
.recipePrepBadge{
  position:absolute; top:8px; right:8px;
  background:#7c3aed; color:#fff; border-radius:6px;
  font-size:9px; font-weight:800; padding:2px 6px; letter-spacing:.04em;
}

/* Clickable table rows */
tr[data-item-id]{ cursor:pointer; }
tr[data-item-id]:hover td{ background:rgba(37,99,235,.05); }

/* Delivery day checkboxes */
.dayChk{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;cursor:pointer;
  background:var(--bg);border:1px solid var(--border);
  border-radius:6px;padding:4px 10px;user-select:none;
}
.dayChk input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }

/* Vendor / Location cards */
.vendorCard{
  border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;margin-bottom:8px;
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;
}

/* Vendor modal */
.vendorModalCard{
  background:var(--surface,var(--card));
  border-radius:16px;
  width:520px;max-width:96vw;
  box-shadow:0 16px 60px rgba(0,0,0,.3);
  margin-bottom:40px;
  overflow:hidden;
}
.vendorModalHeader{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:20px 24px 0;
}
.vendorModalTitle{ font-size:18px;font-weight:800;line-height:1.2; }
.vendorModalMeta{ font-size:12px;color:var(--muted);margin-top:3px; }
.vendorModalClose{ font-size:16px;padding:4px 8px; }
.vendorModalBody{ padding:16px 24px;display:flex;flex-direction:column;gap:0; }
.vendorNameInput{ font-size:15px;font-weight:600; }
.vendorSection{
  border-top:1px solid var(--border);
  margin-top:16px;padding-top:14px;
}
.vendorSectionLabel{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:10px;
}
.vendorModalError{ color:#dc2626;font-size:12px;padding:0 24px;min-height:16px; }
.vendorModalFooter{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px 20px;
  border-top:1px solid var(--border);
  margin-top:14px;
}
.vendorModalFooterLeft{ display:flex;gap:8px; }
.vendorModalFooterRight{ display:flex;gap:8px; }
.vendorDeleteConfirm{
  padding:14px 24px 20px;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px;
}
.vendorDeleteWarning{
  font-size:13px;color:#dc2626;font-weight:600;
}

/* Delivery day checked state */
.dayChk:has(input:checked){
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

/* Status badges */
.invBadge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.inv-pending    { background:rgba(234,179,8,.15);   color:#92400e; }
.inv-approved   { background:rgba(34,197,94,.15);   color:#14532d; }
.inv-posted     { background:rgba(37,99,235,.15);   color:#1e3a8a; }
.inv-paid       { background:rgba(16,185,129,.15);  color:#064e3b; }
.inv-overdue    { background:rgba(239,68,68,.15);   color:#7f1d1d; }
.inv-rejected   { background:rgba(239,68,68,.15);   color:#7f1d1d; }
.inv-needsreview{ background:rgba(245,158,11,.15);  color:#78350f; }
.inv-reviewed   { background:rgba(100,116,139,.15); color:#334155; }
.inv-lowconf    { background:rgba(245,158,11,.15);  color:#78350f; }
.inv-auto       { background:rgba(139,92,246,.15);  color:#4c1d95; }
body[data-theme="dark"] .inv-pending    { background:rgba(234,179,8,.2);   color:#fde68a; }
body[data-theme="dark"] .inv-approved   { background:rgba(34,197,94,.2);   color:#86efac; }
body[data-theme="dark"] .inv-posted     { background:rgba(37,99,235,.2);   color:#93c5fd; }
body[data-theme="dark"] .inv-paid       { background:rgba(16,185,129,.2);  color:#6ee7b7; }
body[data-theme="dark"] .inv-overdue,
body[data-theme="dark"] .inv-rejected   { background:rgba(239,68,68,.2);   color:#fca5a5; }
body[data-theme="dark"] .inv-needsreview,
body[data-theme="dark"] .inv-lowconf    { background:rgba(245,158,11,.2);  color:#fcd34d; }
body[data-theme="dark"] .inv-reviewed   { background:rgba(100,116,139,.2); color:#94a3b8; }
body[data-theme="dark"] .inv-auto       { background:rgba(139,92,246,.2);  color:#c4b5fd; }

/* Detail drawer */
.invDrawerBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.25);
  z-index:299;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.invDrawerBackdrop.open{ opacity:1; pointer-events:auto; }

.invDrawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(560px, 92vw);
  background:var(--card);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 40px rgba(0,0,0,.12);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  z-index:300;
  padding:22px 20px 32px;
  display:flex;
  flex-direction:column;
}
.invDrawer.open{ transform:translateX(0); }
body[data-theme="dark"] .invDrawer{
  background:#0f172a;
  border-left-color:rgba(148,163,184,.18);
  box-shadow:-8px 0 40px rgba(0,0,0,.4);
}

/* Manage panel */
.managePanel{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(680px, 96vw);
  background:var(--card);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 40px rgba(0,0,0,.12);
  transform:translateX(100%);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  z-index:300;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.managePanel.open{ transform:translateX(0); }
body[data-theme="dark"] .managePanel{
  background:#0f172a;
  border-left-color:rgba(148,163,184,.18);
  box-shadow:-8px 0 40px rgba(0,0,0,.4);
}
.managePanelHeader{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 0;flex-shrink:0;
}
.managePanelTabs{ display:flex;gap:4px; }
.managePanelTab{
  background:none;border:none;cursor:pointer;
  font-size:14px;font-weight:700;padding:6px 12px;border-radius:8px;
  color:var(--muted);transition:background .15s,color .15s;
}
.managePanelTab.active{ background:var(--bg);color:var(--text); }
.managePanelTab:hover:not(.active){ background:var(--bg); }
.managePanelSection{
  display:flex;flex:1;overflow:hidden;gap:0;
}
.manageList{
  width:260px;flex-shrink:0;border-right:1px solid var(--border);
  overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:0;
}
.manageListItem{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 10px;border-radius:8px;gap:8px;cursor:default;
}
.manageListItem:hover{ background:var(--bg); }
.manageForm{
  flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;
}
.manageFormTitle{ font-size:15px;font-weight:800;margin-bottom:4px; }
.manageFormMore{
  border:1px solid var(--border);border-radius:8px;padding:8px 12px;
}
.manageFormMore summary{
  font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;user-select:none;
}
.manageFormMoreBody{ display:flex;flex-direction:column;gap:10px;margin-top:10px; }
.manageFormActions{ display:flex;gap:8px;justify-content:flex-end;margin-top:4px; }
.manageDeleteConfirm{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.2);
  border-radius:8px;padding:10px 12px;gap:8px;
}

/* Manage dropdown */
.manageDropWrap{ position:relative; }
.manageDropMenu{
  position:absolute;top:calc(100% + 6px);right:0;
  background:var(--card);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  min-width:140px;overflow:hidden;z-index:50;
}
.manageDropItem{
  display:block;width:100%;text-align:left;
  padding:9px 14px;font-size:13px;font-weight:600;
  background:none;border:none;cursor:pointer;color:var(--text);
}
.manageDropItem:hover{ background:var(--bg); }

.invDetailHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  flex-shrink:0;
}
.invDetailTitle{ font-size:18px; font-weight:900; }
.invDetailValue{ font-weight:700; font-size:14px; }
.invDetailGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:16px;
}
.invDetailField{ display:grid; gap:4px; }
.invDetailSection{ margin-top:14px; }
.invDetailActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(17,24,39,.08);
}
body[data-theme="dark"] .invDetailActions{ border-top-color:rgba(226,232,240,.1); }

/* Warning banner */
.invWarn{
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.35);
  color:#92400e;
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
  font-weight:600;
  margin-bottom:12px;
}
body[data-theme="dark"] .invWarn{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.4);
  color:#fcd34d;
}

/* Invoice fee line styling */
tr.invFeeLine td{
  opacity:0.65;
  font-style:italic;
}
.invFeeBadge{
  display:inline-block;
  font-size:10px;
  font-weight:600;
  font-style:normal;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(107,114,128,.12);
  color:#6b7280;
  border-radius:4px;
  padding:1px 5px;
  margin-left:5px;
  vertical-align:middle;
}
body[data-theme="dark"] .invFeeBadge{
  background:rgba(156,163,175,.15);
  color:#9ca3af;
}
.invLineSummary{
  display:flex;
  justify-content:flex-end;
  gap:20px;
  padding:8px 4px 0;
  font-size:13px;
  color:#6b7280;
  border-top:1px dashed rgba(17,24,39,.10);
  margin-top:4px;
}
.invLineSummary strong{ color:inherit; }
body[data-theme="dark"] .invLineSummary{ border-color:rgba(255,255,255,.08); }

/* Line type toggle button */
.lineTypeToggle{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid;
  cursor:pointer;
  white-space:nowrap;
}
.lineTypeToggleProd{
  background:rgba(16,185,129,.1);
  border-color:rgba(16,185,129,.35);
  color:#065f46;
}
.lineTypeToggleFee{
  background:rgba(107,114,128,.1);
  border-color:rgba(107,114,128,.3);
  color:#6b7280;
  font-style:italic;
}
body[data-theme="dark"] .lineTypeToggleProd{ color:#6ee7b7; }
body[data-theme="dark"] .lineTypeToggleFee{ color:#9ca3af; }

/* Inbox message list in integrations */
.intMsgList{
  border-top:1px dashed rgba(17,24,39,.10);
  padding-top:10px;
  margin-top:4px;
}
body[data-theme="dark"] .intMsgList{ border-top-color:rgba(226,232,240,.12); }