/* ===========================================================================
   Painel Casa Santo Antônio — design system (mobile-first, tema claro/escuro)
   Paleta de gráficos validada (dataviz). Verde = cor de marca (chrome).
   =========================================================================== */
:root {
  color-scheme: light;
  --page:        #f4f6f2;
  --surface:     #ffffff;
  --surface-2:   #f7f9f4;
  --ink:         #14201a;
  --ink-2:       #5b6660;
  --muted:       #8a938d;
  --grid:        #e6eae4;
  --line:        #cdd4cd;
  --border:      rgba(16,24,20,0.10);
  --brand:       #008300;
  --brand-d:     #006300;
  --brand-ink:   #ffffff;
  --good:        #0ca30c;
  --warn:        #b26a00;
  --crit:        #d03b3b;
  --shadow:      0 1px 2px rgba(16,24,20,.06), 0 6px 18px rgba(16,24,20,.06);
  /* série categórica (light) */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:#0d0d0d; --surface:#1a1a19; --surface-2:#161615;
    --ink:#f4f5f0; --ink-2:#b7bcb2; --muted:#8a8f86;
    --grid:#262826; --line:#33362f; --border:rgba(255,255,255,.10);
    --brand:#12a012; --brand-d:#0d8a0d; --brand-ink:#ffffff;
    --good:#0ca30c; --warn:#e0a02a; --crit:#e66767;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#12a012; --s7:#9085e9; --s8:#e66767;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#0d0d0d; --surface:#1a1a19; --surface-2:#161615;
  --ink:#f4f5f0; --ink-2:#b7bcb2; --muted:#8a8f86;
  --grid:#262826; --line:#33362f; --border:rgba(255,255,255,.10);
  --brand:#12a012; --brand-d:#0d8a0d; --brand-ink:#ffffff;
  --good:#0ca30c; --warn:#e0a02a; --crit:#e66767;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#12a012; --s7:#9085e9; --s8:#e66767;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--page); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(68px + var(--safe-b));
  overscroll-behavior-y: contain;
}
h1,h2,h3 { margin:0; font-weight:700; }
small { color: var(--ink-2); }
button { font-family: inherit; cursor: pointer; }

/* ---------- Splash ---------- */
.splash {
  position: fixed; inset:0; z-index:50; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background: linear-gradient(160deg, var(--brand), var(--brand-d));
  color:#fff; transition: opacity .35s ease;
}
.splash.hide { opacity:0; pointer-events:none; }
.splash-mark {
  width:76px; height:76px; border-radius:20px; background:rgba(255,255,255,.16);
  position:relative; box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.splash-mark::after {
  content:""; position:absolute; inset:18px;
  background:#fff; border-radius:50% 8px 50% 8px; transform:rotate(-40deg);
}
.splash-name { font-size:20px; font-weight:800; letter-spacing:.2px; }
.splash-sub { font-size:13px; opacity:.85; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: calc(10px + var(--safe-t)) 16px 10px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark {
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  background: linear-gradient(150deg, var(--brand), var(--brand-d)); position:relative;
}
.brand-mark::after {
  content:""; position:absolute; inset:9px; background:var(--surface);
  border-radius:50% 4px 50% 4px; transform:rotate(-40deg); opacity:.92;
}
.brand-text { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.brand-text strong { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text small { font-size:11.5px; }
.icon-btn {
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--ink); font-size:17px; flex:0 0 auto;
}

/* ---------- Period selector ---------- */
.periods {
  position: sticky; top: calc(56px + var(--safe-t)); z-index:19;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:10px 16px; background:var(--page);
}
.periods::-webkit-scrollbar { display:none; }
.periods button {
  flex:0 0 auto; border:1px solid var(--border); background:var(--surface);
  color:var(--ink-2); padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  transition:.15s;
}
.periods button.active {
  background:var(--brand); color:var(--brand-ink); border-color:var(--brand);
  box-shadow:0 3px 10px color-mix(in srgb, var(--brand) 40%, transparent);
}

/* ---------- Layout ---------- */
main { padding: 4px 16px 20px; max-width:720px; margin:0 auto; }
.view { display:flex; flex-direction:column; gap:14px; animation:fade .25s ease; }
@keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.card {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px; box-shadow:var(--shadow);
}
.card-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
.card-head h2 { font-size:14.5px; }
.card-note { font-size:11.5px; color:var(--muted); font-weight:600; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ---------- KPI ---------- */
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kpi {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi.wide { grid-column:1 / -1; }
.kpi .lbl { font-size:12px; color:var(--ink-2); font-weight:600; display:flex; align-items:center; gap:6px; }
.kpi .val { font-size:24px; font-weight:800; margin-top:6px; letter-spacing:-.5px; }
.kpi .val.sm { font-size:20px; }
.kpi .sub { font-size:11.5px; color:var(--muted); margin-top:3px; font-weight:600; }
.kpi .dot { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.kpi.hero { grid-column:1 / -1; background:linear-gradient(150deg, var(--brand), var(--brand-d)); border:none; color:#fff; }
.kpi.hero .lbl, .kpi.hero .sub { color:rgba(255,255,255,.85); }
.kpi.hero .val { font-size:30px; }
.badge { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; }
.badge.up { background:color-mix(in srgb, var(--good) 18%, transparent); color:var(--good); }
.badge.down { background:color-mix(in srgb, var(--crit) 18%, transparent); color:var(--crit); }
.kpi.hero .badge.up { background:rgba(255,255,255,.22); color:#fff; }
.kpi.hero .badge.down { background:rgba(0,0,0,.18); color:#ffd9d9; }

/* ---------- Charts ---------- */
.chart { width:100%; }
.chart svg { width:100%; height:auto; display:block; overflow:visible; }
.chart-sm { min-height:120px; }
.ax-label { fill:var(--muted); font-size:10px; font-weight:600; }
.grid-line { stroke:var(--grid); stroke-width:1; }
.baseline { stroke:var(--line); stroke-width:1.2; }
.bar-val { fill:var(--ink); font-size:9.5px; font-weight:700; }

/* ---------- Legend ---------- */
.legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:12px; }
.legend .it { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); font-weight:600; }
.legend .sw { width:11px; height:11px; border-radius:3px; }

/* ---------- Vendas por canal ---------- */
.channel-revenue-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.channel-revenue-card { min-width:0; padding:13px 11px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.channel-revenue-card span { display:flex; align-items:center; gap:6px; color:var(--ink-2); font-size:11px; font-weight:700; }
.channel-revenue-card span i { display:block; width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.channel-revenue-card > b { display:block; margin-top:7px; font-size:20px; letter-spacing:-.4px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.channel-revenue-card small { display:block; margin-top:3px; color:var(--muted); font-size:10.5px; font-weight:600; }
.channel-report { display:flex; flex-direction:column; }
.channel-row {
  display:grid; grid-template-columns:minmax(82px,1fr) auto auto; align-items:center; gap:10px;
  padding:11px 2px; border-bottom:1px solid var(--border);
}
.channel-row:last-child { border-bottom:none; }
.channel-title { display:flex; align-items:center; gap:8px; min-width:0; }
.channel-title .sw { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.channel-title b, .channel-value b { font-size:13.5px; }
.channel-value { display:flex; flex-direction:column; text-align:right; }
.channel-value span { margin-top:2px; color:var(--muted); font-size:10.5px; font-weight:600; }
.channel-value.money b { font-variant-numeric:tabular-nums; }
.channel-details { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.channel-details span { padding:7px 8px; border-radius:8px; background:var(--surface-2); color:var(--muted); font-size:10.5px; font-weight:600; text-align:center; }
.channel-details b { display:block; margin-bottom:2px; color:var(--ink-2); font-size:12px; }
.channel-bar { grid-column:1 / -1; height:6px; overflow:hidden; border-radius:3px; background:var(--surface-2); }
.channel-bar i { display:block; height:100%; border-radius:3px; }
.mini-kpis { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.mini-kpi { display:flex; flex-direction:column; min-width:0; padding:11px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); }
.mini-kpi span { color:var(--ink-2); font-size:11px; font-weight:700; }
.mini-kpi b { margin-top:5px; font-size:18px; font-variant-numeric:tabular-nums; }
.mini-kpi small { margin-top:2px; color:var(--muted); font-size:10.5px; font-weight:600; }
.channel-legend { justify-content:center; margin-top:5px; }
.canal-delivery { background:var(--s1); }
.canal-loja { background:var(--s6); }
.no-delivery .mini-kpi { opacity:.72; }

@media (max-width:380px) {
  .channel-revenue-card { padding:11px 8px; }
  .channel-revenue-card > b { font-size:17px; }
  .channel-row { grid-template-columns:1fr auto; }
  .channel-value.money { grid-column:1 / -1; flex-direction:row; justify-content:space-between; }
  .channel-details { grid-template-columns:1fr; }
}

/* ---------- Ranking rows ---------- */
.rank { display:flex; flex-direction:column; }
.row {
  display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px;
  padding:10px 2px; border-bottom:1px solid var(--border);
}
.row:last-child { border-bottom:none; }
.row .pos { font-size:12px; font-weight:800; color:var(--muted); text-align:center; }
.row .nm { min-width:0; }
.row .nm b { font-size:13.5px; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .nm .meta { font-size:11.5px; color:var(--muted); font-weight:600; }
.row .rv { text-align:right; }
.row .rv b { font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
.row .rv .meta { font-size:11px; color:var(--muted); font-weight:600; }
.bar-mini { height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; margin-top:6px; grid-column:2 / -1; }
.bar-mini > i { display:block; height:100%; border-radius:3px; }
.progress-wrap { grid-column:1 / -1; margin-top:8px; }
.pill { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; }
.pill.crit { background:color-mix(in srgb, var(--crit) 16%, transparent); color:var(--crit); }
.pill.warn { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); }
.pill.ok   { background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good); }

/* ---------- Segmented ---------- */
.seg, .segd { display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--border);
  padding:4px; border-radius:12px; }
.seg button {
  flex:1; border:none; background:transparent; color:var(--ink-2); font-weight:700;
  padding:9px; border-radius:9px; font-size:13px;
}
.seg button.active { background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }

/* ---------- Tabbar ---------- */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(4,1fr);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-top:1px solid var(--border);
  padding-bottom: var(--safe-b);
}
.tabbar button {
  border:none; background:transparent; color:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 0 9px; font-size:11px; font-weight:700;
}
.tabbar button .ic { font-size:19px; line-height:1; }
.tabbar button.active { color:var(--brand); }

/* ---------- Tooltip ---------- */
.tip {
  position:fixed; z-index:60; pointer-events:none; transform:translate(-50%,-118%);
  background:var(--ink); color:var(--surface); font-size:11.5px; font-weight:600;
  padding:6px 9px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.3);
  white-space:nowrap; line-height:1.35;
}
.tip b { color:var(--surface); }

/* ---------- Erro / vazio ---------- */
.errbox {
  margin:20px 16px; padding:16px; border-radius:14px; text-align:center;
  background:var(--surface); border:1px solid var(--border); color:var(--ink-2); font-size:13.5px;
}
.empty { text-align:center; color:var(--muted); font-size:13px; padding:26px 0; font-weight:600; }

@media (min-width:560px){
  .kpi-grid { grid-template-columns:repeat(3,1fr); }
  .kpi.hero { grid-column:1 / -1; }
}
@media (prefers-reduced-motion: reduce){ .view{animation:none;} .splash{transition:none;} }

/* ===========================================================================
   v2 — componentes: ícones, busca, chips, listas, sheet, DRE, ABC, toast
   =========================================================================== */
.ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; display:block; }
.topbar-actions { display:flex; gap:8px; }
.icon-btn { display:flex; align-items:center; justify-content:center; }
.icon-btn .ic { width:19px; height:19px; }

/* tabbar 5 colunas + ícones svg */
.tabbar { grid-template-columns:repeat(5,1fr); }
.tabbar button .ic { width:22px; height:22px; }
.tabbar button { gap:2px; font-size:10.5px; }

/* busca */
.searchbar { display:flex; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--border); border-radius:13px; padding:0 13px; box-shadow:var(--shadow); }
.searchbar .ic { width:18px; height:18px; color:var(--muted); flex:0 0 auto; }
.searchbar input { flex:1; border:none; background:transparent; color:var(--ink);
  font-size:15px; padding:13px 0; outline:none; font-family:inherit; }
.searchbar input::placeholder { color:var(--muted); }

/* chips de filtro */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chips.scroll { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.chips.scroll::-webkit-scrollbar { display:none; }
.chips button { flex:0 0 auto; border:1px solid var(--border); background:var(--surface);
  color:var(--ink-2); padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600; }
.chips button.active { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }

/* toolbar (select + checkbox) */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.select { flex:1; min-width:150px; border:1px solid var(--border); background:var(--surface);
  color:var(--ink); font-size:13.5px; font-weight:600; padding:10px 12px; border-radius:11px;
  font-family:inherit; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) center,calc(100% - 11px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.check { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.check input { width:17px; height:17px; accent-color:var(--brand); }

.list-head { display:flex; justify-content:space-between; align-items:baseline;
  padding:2px 4px; font-size:12.5px; font-weight:700; color:var(--muted); }
.list-head span:last-child { color:var(--ink-2); }

/* listas de itens (vendas/produtos/clientes/estoque) */
.list { display:flex; flex-direction:column; gap:9px; }
.item {
  display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:14px; padding:12px 13px;
  box-shadow:var(--shadow); text-align:left; width:100%; cursor:pointer;
  transition:transform .08s; font-family:inherit; color:inherit;
}
.item:active { transform:scale(.985); }
.item .ib { min-width:0; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; }
.item .t1 { display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.item .t2 { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.item .ir { text-align:right; flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.item .ir b { font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.item .av { width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; }
.item.canc .t1 { text-decoration:line-through; color:var(--muted); }
.chev { color:var(--muted); }
.chev .ic { width:17px; height:17px; }

.tag { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px;
  background:var(--surface-2); color:var(--ink-2); white-space:nowrap; }
.tag.ok { background:color-mix(in srgb,var(--good) 15%,transparent); color:var(--good); }
.tag.baixo { background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn); }
.tag.zerado, .tag.negativo { background:color-mix(in srgb,var(--crit) 16%,transparent); color:var(--crit); }

.more-btn { margin:4px auto 0; border:1px solid var(--border); background:var(--surface);
  color:var(--ink-2); font-weight:700; font-size:13.5px; padding:11px 20px; border-radius:12px; }
.link-btn { border:none; background:transparent; color:var(--brand); font-weight:700; font-size:12.5px; }

/* delta badge (▲▼) — herda .badge, mas com seta */
.delta { font-size:11px; font-weight:800; display:inline-flex; align-items:center; gap:2px; }
.delta.up { color:var(--good); }
.delta.down { color:var(--crit); }
.delta.flat { color:var(--muted); }
.kpi.hero .delta.up { color:#d4ffd4; }
.kpi.hero .delta.down { color:#ffd9d9; }

/* sparkline dentro do kpi */
.spark { width:100%; height:26px; margin-top:8px; display:block; }

/* Curva ABC — barra empilhada */
.abc-track { display:flex; height:34px; border-radius:9px; overflow:hidden; gap:2px; background:var(--surface-2); }
.abc-track > span { display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:12px; font-weight:800; min-width:26px; }

/* DRE / resumo financeiro */
.dre { display:flex; flex-direction:column; gap:2px; }
.dre .l { display:flex; justify-content:space-between; align-items:center; padding:9px 2px;
  border-bottom:1px solid var(--border); font-size:13.5px; }
.dre .l:last-child { border-bottom:none; }
.dre .l span { color:var(--ink-2); font-weight:600; }
.dre .l b { font-weight:800; font-variant-numeric:tabular-nums; }
.dre .l.total b { font-size:16px; color:var(--brand); }
.dre .l.total { border-top:2px solid var(--border); margin-top:4px; padding-top:12px; }
.dre .l.neg b { color:var(--crit); }

/* progresso de meta */
.meta-row { padding:11px 2px; border-bottom:1px solid var(--border); }
.meta-row:last-child { border-bottom:none; }
.meta-top { display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.meta-top small { color:var(--muted); font-weight:600; }
.meta-bar { height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.meta-bar > i { display:block; height:100%; border-radius:4px; background:var(--brand); }

/* bottom sheet */
.sheet { position:fixed; inset:0; z-index:70; }
.sheet-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); animation:fade .2s; }
.sheet-panel { position:absolute; left:0; right:0; bottom:0; max-height:88vh; overflow-y:auto;
  background:var(--surface); border-radius:20px 20px 0 0; padding:8px 18px calc(24px + var(--safe-b));
  box-shadow:0 -8px 30px rgba(0,0,0,.25); animation:slideup .28s cubic-bezier(.2,.8,.2,1); }
@keyframes slideup { from{transform:translateY(100%);} to{transform:none;} }
.sheet-grab { width:40px; height:4px; border-radius:2px; background:var(--line); margin:6px auto 10px; }
.sheet-close { position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink); display:flex;
  align-items:center; justify-content:center; }
.sheet h3 { font-size:18px; margin-bottom:2px; padding-right:40px; }
.sheet .sub { color:var(--muted); font-size:13px; font-weight:600; margin-bottom:14px; }
.sheet-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.sheet-stats .s { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:11px; }
.sheet-stats .s .k { font-size:11.5px; color:var(--ink-2); font-weight:600; }
.sheet-stats .s .v { font-size:17px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums; }
.sheet-stats .s.full { grid-column:1 / -1; }
.sheet-items { display:flex; flex-direction:column; }
.sheet-items .si { display:grid; grid-template-columns:1fr auto; gap:8px; padding:9px 0;
  border-bottom:1px solid var(--border); font-size:13.5px; }
.sheet-items .si:last-child { border-bottom:none; }
.sheet-items .si .q { color:var(--muted); font-size:12px; font-weight:600; }
.sheet-items .si b { font-variant-numeric:tabular-nums; font-weight:800; }
.wa-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-top:6px; padding:13px; border-radius:12px; background:var(--brand); color:#fff;
  font-weight:800; font-size:14.5px; border:none; text-decoration:none; }
.sec-title { font-size:12.5px; font-weight:800; color:var(--muted); text-transform:uppercase;
  letter-spacing:.4px; margin:14px 0 6px; }

/* toast */
.toast { position:fixed; left:50%; bottom:calc(80px + var(--safe-b)); transform:translateX(-50%);
  z-index:80; background:var(--ink); color:var(--surface); font-size:13px; font-weight:700;
  padding:11px 18px; border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.3); max-width:88vw;
  animation:fade .2s; }
.toast.err { background:var(--crit); color:#fff; }

/* skeleton */
.skeleton { position:relative; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--border); border-radius:14px; height:64px; }
.skeleton::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(128,128,128,.14),transparent);
  animation:shimmer 1.3s infinite; }
@keyframes shimmer { from{transform:translateX(-100%);} to{transform:translateX(100%);} }

@media (prefers-reduced-motion: reduce){
  .sheet-panel,.sheet-backdrop,.toast{animation:none;} .skeleton::after{animation:none;}
}

/* Conferência de estoque */
.conf-resumo { display:flex; gap:10px; margin-bottom:12px; }
.conf-resumo .cbox { flex:1; background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:11px; text-align:center; }
.conf-resumo .cbox .n { font-size:20px; font-weight:800; }
.conf-resumo .cbox .k { font-size:11px; color:var(--ink-2); font-weight:600; margin-top:2px; }
.conf-resumo .cbox.warn .n { color:var(--warn); }
.conf-resumo .cbox.crit .n { color:var(--crit); }
.dif-pill { font-size:12px; font-weight:800; padding:3px 8px; border-radius:8px; font-variant-numeric:tabular-nums; }
.dif-pill.pos { background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn); }
.dif-pill.neg { background:color-mix(in srgb,var(--crit) 16%,transparent); color:var(--crit); }

/* ===========================================================================
   v3 — M2 Dashboard: login, drawer lateral, topbar nova, logo M2
   =========================================================================== */
:root { --brand:#0b7a3b; --brand-d:#075e2d; }
body { padding-bottom: calc(24px + var(--safe-b)); }   /* sem tabbar */
.tabbar { display:none !important; }

/* logo M2 */
.logo-m2 { width:44px; height:44px; border-radius:13px; flex:0 0 auto;
  background:linear-gradient(145deg,#20c96b,#057432); display:flex; align-items:center;
  justify-content:center; box-shadow:0 6px 18px rgba(6,120,52,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.logo-m2 span { color:#fff; font-weight:900; font-size:19px; letter-spacing:-1.5px; }
.logo-m2.big { width:82px; height:82px; border-radius:22px; }
.logo-m2.big span { font-size:35px; }

/* ---------- LOGIN ---------- */
.login { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:24px; background:radial-gradient(120% 80% at 50% 0%, #0f2e1c 0%, #0a0f0c 60%, #060807 100%); }
.login-card { width:100%; max-width:340px; text-align:center; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:6px; animation:fade .4s ease; }
.login-card .logo-m2 { margin-bottom:14px; }
.login-card h1 { font-size:23px; font-weight:900; letter-spacing:1px; }
.login-card .by { color:rgba(255,255,255,.55); font-size:12.5px; font-weight:600; margin-bottom:22px; letter-spacing:.3px; }
.login-field { display:flex; align-items:center; gap:10px; width:100%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:0 14px; margin-bottom:12px; }
.login-field .ic { width:18px; height:18px; color:rgba(255,255,255,.6); }
.login-field input { flex:1; background:transparent; border:none; outline:none; color:#fff;
  font-size:16px; padding:15px 0; font-family:inherit; letter-spacing:2px; }
.login-field input::placeholder { color:rgba(255,255,255,.4); letter-spacing:normal; }
.login-btn { width:100%; border:none; border-radius:14px; padding:15px; font-size:16px; font-weight:800;
  color:#fff; background:linear-gradient(145deg,#15b154,#0a6b31); box-shadow:0 8px 22px rgba(10,107,49,.45);
  font-family:inherit; transition:transform .08s; }
.login-btn:active { transform:scale(.98); }
.login-err { color:#ff8a8a; font-size:13px; font-weight:700; margin-top:12px; }
.login-foot { color:rgba(255,255,255,.4); font-size:12px; font-weight:600; margin-top:26px; }

/* ---------- SPLASH (M2) ---------- */
.splash { background:radial-gradient(120% 80% at 50% 0%, #0f2e1c 0%, #0a0f0c 70%); }
.splash .logo-m2.big { box-shadow:0 10px 34px rgba(0,0,0,.4); }
.splash-mark { display:none; }

/* ---------- TOPBAR nova ---------- */
.topbar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.topbar-title { min-width:0; line-height:1.15; }
.topbar-title strong { display:block; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-title small { display:block; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- DRAWER lateral ---------- */
.drawer { position:fixed; inset:0; z-index:75; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); animation:fade .2s; }
.drawer-panel { position:absolute; top:0; left:0; bottom:0; width:82%; max-width:320px;
  background:var(--surface); box-shadow:6px 0 30px rgba(0,0,0,.3); display:flex; flex-direction:column;
  padding:calc(18px + var(--safe-t)) 0 calc(14px + var(--safe-b));
  animation:slidein .26s cubic-bezier(.2,.8,.2,1); overflow-y:auto; }
@keyframes slidein { from{transform:translateX(-100%);} to{transform:none;} }
.drawer-head { display:flex; align-items:center; gap:13px; padding:6px 20px 14px; }
.drawer-head strong { display:block; font-size:16px; font-weight:900; letter-spacing:.5px; }
.drawer-head small { display:block; font-size:11.5px; color:var(--muted); font-weight:600; }
.drawer-store { margin:0 16px 12px; padding:11px 14px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--border); font-size:13.5px; font-weight:700; color:var(--ink-2); }
.drawer-nav { display:flex; flex-direction:column; gap:3px; padding:6px 12px; flex:1; }
.drawer-nav button { display:flex; align-items:center; gap:14px; width:100%; border:none; background:transparent;
  color:var(--ink); font-size:15.5px; font-weight:700; padding:14px 14px; border-radius:12px; font-family:inherit; text-align:left; }
.drawer-nav button .ic { width:21px; height:21px; color:var(--muted); flex:0 0 auto; }
.drawer-nav button .chev { width:16px; height:16px; margin-left:auto; opacity:.4; }
.drawer-nav button.active { background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); }
.drawer-nav button.active .ic { color:var(--brand); }
.drawer-foot { padding:10px 12px 0; border-top:1px solid var(--border); margin:6px 12px 0; display:flex; flex-direction:column; gap:2px; }
.drawer-foot button { display:flex; align-items:center; gap:13px; width:100%; border:none; background:transparent;
  color:var(--ink-2); font-size:14px; font-weight:600; padding:12px 14px; border-radius:11px; font-family:inherit; text-align:left; }
.drawer-foot button .ic { width:19px; height:19px; }
.drawer-foot button.danger { color:var(--crit); }
.drawer-ver { padding:10px 14px 2px; font-size:11px; color:var(--muted); font-weight:600; }

/* botão instalar (destaque) + instruções */
.drawer-foot button.install { background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand); font-weight:800; margin-bottom:4px; }
.drawer-foot button.install .ic { color:var(--brand); }
.steps { margin:6px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:12px; }
.steps li { font-size:14.5px; line-height:1.5; color:var(--ink); }
.steps li b { font-weight:800; }
.ic.inl { display:inline-block; width:16px; height:16px; vertical-align:-3px; color:var(--brand); }

/* botão instalar na tela de login + premium */
.login-install { width:100%; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:14px;
  padding:14px; font-size:14.5px; font-weight:700; font-family:inherit; transition:.15s; }
.login-install:active { transform:scale(.98); }
.login-install .ic { width:18px; height:18px; }
/* glow premium atrás do logo no login/splash */
.login-card .logo-m2, .splash .logo-m2 { position:relative; }
.login-card .logo-m2::before, .splash .logo-m2::before {
  content:""; position:absolute; inset:-40%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(21,177,84,.45), transparent 70%); filter:blur(14px); }
.login-card h1 { background:linear-gradient(180deg,#fff,#cfe9d9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* sheet/toast acima do login */
.sheet { z-index:100; }
.toast { z-index:110; }
/* dois selects na toolbar lado a lado */
.toolbar .select { min-width:0; }

/* fornecedores: formulário do relatório em PDF */
.forn-form { display:flex; flex-direction:column; gap:14px; }
.forn-datas { display:flex; gap:10px; }
.forn-datas label, .forn-sel { flex:1; display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--muted); }
.forn-datas .select.date { background-image:none; min-width:0; width:100%; }
.forn-sel .select { width:100%; min-width:0; font-size:14.5px; }
.pdf-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:12px; padding:14px;
  background:var(--brand); color:var(--brand-ink, #fff); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.pdf-btn:disabled { opacity:.6; cursor:wait; }
.pdf-btn .ic { width:20px; height:20px; }
.forn-msg { margin:0; font-size:12px; color:var(--muted); text-align:center; }
.forn-busca { position:relative; }
.forn-busca .select { background-image:none; }
.forn-opcoes { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; max-height:260px; overflow:auto;
  background:var(--surface); border:1px solid var(--border); border-radius:11px; box-shadow:0 8px 24px rgba(0,0,0,.14); }
.forn-opcoes button { display:block; width:100%; text-align:left; border:0; background:none; color:var(--ink); font:inherit;
  font-size:14px; font-weight:600; padding:11px 12px; border-bottom:1px solid var(--border); cursor:pointer; }
.forn-opcoes button:last-child { border-bottom:0; }
.forn-opcoes button.todos { color:var(--brand); }
.forn-opcoes .vazio { padding:11px 12px; font-size:13px; color:var(--muted); }