*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root{
  --font:'Inter',system-ui,sans-serif;
  --bg:#09090b; --surface:#18181b; --surf2:#27272a; --surf3:#3f3f46;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.13);
  --text:#fafafa; --muted:#71717a; --dim:#a1a1aa;
  --cyan:#22d3ee; --green:#4ade80; --red:#f87171; --yellow:#fbbf24;
  --orange:#fb923c; --blue:#60a5fa; --purple:#a78bfa;
}
html,body{ min-height:100%; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased; }
body{
  background:
    radial-gradient(900px 600px at 10% -8%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(1000px 760px at 102% 110%, rgba(37,99,235,.16), transparent 55%),
    radial-gradient(700px 500px at 92% -10%, rgba(34,211,238,.06), transparent 60%),
    linear-gradient(160deg,#0a0e16 0%,#09090b 55%,#0a0d14 100%);
  background-attachment:fixed; min-height:100vh;
}
body::before{ content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  background:linear-gradient(90deg,#22d3ee,#2563eb,#22d3ee); background-size:200% 100%;
  animation:brandBar 6s linear infinite; }
@keyframes brandBar{ to{ background-position:200% 0; } }
a{ color:inherit; }

/* ── Header ── */
.hdr{ height:56px; display:flex; align-items:center; padding:0 20px; gap:14px;
  background:linear-gradient(180deg,rgba(20,26,38,.82),rgba(13,15,20,.72));
  backdrop-filter:blur(10px); border-bottom:1px solid rgba(34,211,238,.16);
  position:sticky; top:0; z-index:100; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-icon{ width:38px; height:38px; filter:drop-shadow(0 2px 8px rgba(34,211,238,.35)); }
.brand-icon svg,.brand-icon img{ width:38px; height:38px; display:block; border-radius:9px; }
.brand-name{ font-size:15px; font-weight:600; }
.brand-sub{ font-size:11px; color:var(--muted); margin-top:1px; }
.hdr-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.user-chip{ display:flex; align-items:center; gap:8px; padding:5px 12px; border-radius:20px;
  background:var(--surf2); border:1px solid var(--border); font-size:12px; }
.user-chip b{ font-weight:600; }
.badge{ font-size:9px; text-transform:uppercase; letter-spacing:.08em; padding:2px 7px;
  border-radius:10px; background:rgba(34,211,238,.15); color:var(--cyan); }
.badge.op{ background:rgba(167,139,250,.15); color:var(--purple); }

/* ── Tabs ── */
.tabs{ display:flex; gap:4px; padding:12px 20px 0; flex-wrap:wrap; }
.tab{ padding:9px 16px; border-radius:10px 10px 0 0; cursor:pointer; font-size:13px;
  font-weight:500; color:var(--dim); border:1px solid transparent; border-bottom:none;
  background:transparent; transition:.15s; }
.tab:hover{ color:var(--text); background:rgba(255,255,255,.03); }
.tab.active{ color:var(--cyan); background:var(--surface); border-color:var(--border2);
  box-shadow:0 -2px 12px rgba(34,211,238,.08); }

.wrap{ padding:18px 20px 90px; max-width:1320px; margin:0 auto; }
.view{ display:none; animation:fade .25s ease; }
.view.active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ── Cards / panels ── */
.panel{ background:var(--surface); border:1px solid var(--border2); border-radius:14px;
  padding:18px; margin-bottom:16px; }
.panel h2{ font-size:14px; font-weight:600; margin-bottom:14px; display:flex;
  align-items:center; gap:8px; }
.panel h2 .ic{ color:var(--cyan); }
.muted{ color:var(--muted); }

/* ── KPI cards ── */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px;
  margin-bottom:16px; }
.kpi{ background:linear-gradient(160deg,var(--surf2),var(--surface)); border:1px solid var(--border2);
  border-radius:14px; padding:16px; position:relative; overflow:hidden; }
.kpi::after{ content:""; position:absolute; right:-20px; top:-20px; width:80px; height:80px;
  border-radius:50%; background:var(--accent,rgba(34,211,238,.10)); filter:blur(8px); }
.kpi .lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.kpi .val{ font-size:24px; font-weight:700; margin-top:6px; }
.kpi .sub{ font-size:11px; color:var(--dim); margin-top:3px; }
.pos{ color:var(--green); } .neg{ color:var(--red); }

/* ── Filtros ── */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
input,select,textarea{ font-family:var(--font); font-size:13px; color:var(--text);
  background:var(--surf2); border:1px solid var(--border2); border-radius:9px;
  padding:8px 10px; outline:none; transition:.15s; }
input:focus,select:focus,textarea:focus{ border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.12); }
input[type=date]{ color-scheme:dark; }
textarea{ resize:vertical; min-height:60px; }

/* ── Buttons ── */
.btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px;
  border:1px solid var(--border2); background:var(--surf2); color:var(--text);
  font-size:13px; font-weight:500; cursor:pointer; transition:.15s; }
.btn:hover{ background:var(--surf3); transform:translateY(-1px); }
.btn.primary{ background:linear-gradient(135deg,#22d3ee,#2563eb); border:none; color:#06121f;
  font-weight:600; }
.btn.primary:hover{ box-shadow:0 6px 20px rgba(34,211,238,.35); }
.btn.ghost{ background:transparent; }
.btn.danger{ color:var(--red); border-color:rgba(248,113,113,.3); }
.btn.danger:hover{ background:rgba(248,113,113,.12); }
.btn.sm{ padding:5px 10px; font-size:12px; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── Tables ── */
.tbl-wrap{ overflow-x:auto; border-radius:12px; border:1px solid var(--border); }
table{ width:100%; border-collapse:collapse; font-size:12.5px; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
th{ background:var(--surf2); color:var(--dim); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0; }
tbody tr:hover{ background:rgba(255,255,255,.025); }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.tag{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px;
  background:var(--surf3); }
.tag.on{ background:rgba(74,222,128,.15); color:var(--green); }
.tag.off{ background:rgba(248,113,113,.15); color:var(--red); }
.chips{ display:flex; gap:4px; flex-wrap:wrap; }
.chip{ font-size:10px; padding:2px 7px; border-radius:8px; background:var(--surf3); color:var(--dim); }

/* ── Grid layout helpers ── */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-map{ display:grid; grid-template-columns:1.1fr 1fr; gap:16px; }
@media(max-width:900px){ .grid2,.grid-map{ grid-template-columns:1fr; } }

/* ── Mapa de UFs (tile grid) ── */
.map-grid{ position:relative; width:100%; }
.uf-tile{ position:absolute; border-radius:9px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; border:1px solid var(--border2);
  background:var(--surf2); transition:.2s; cursor:default; }
.uf-tile .uf{ font-size:11px; font-weight:700; }
.uf-tile .qt{ font-size:10px; opacity:.85; }
.uf-tile:hover{ transform:scale(1.08); z-index:5; box-shadow:0 4px 16px rgba(0,0,0,.5); }
.map-legend{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted);
  margin-top:10px; }
.legend-bar{ height:10px; width:160px; border-radius:6px;
  background:linear-gradient(90deg,#1b2430,#0e7490,#22d3ee); }

/* ── Bars chart ── */
.bar-row{ display:grid; grid-template-columns:130px 1fr 90px; gap:10px; align-items:center;
  margin-bottom:8px; font-size:12px; }
.bar-track{ background:var(--surf2); border-radius:8px; height:22px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:8px;
  background:linear-gradient(90deg,#2563eb,#22d3ee); transition:width .5s; }

/* ── Modal ── */
.modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; z-index:500; padding:40px 16px;
  overflow-y:auto; }
.modal-bg.open{ display:flex; }
.modal{ background:var(--surface); border:1px solid var(--border2); border-radius:16px;
  width:100%; max-width:560px; padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:pop .2s ease; }
@keyframes pop{ from{ transform:scale(.96); opacity:0; } to{ transform:scale(1); opacity:1; } }
.modal h3{ font-size:16px; margin-bottom:16px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid .full{ grid-column:1/-1; }
.form-grid .field{ width:100%; }
.form-grid input,.form-grid select,.form-grid textarea{ width:100%; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.uf-pick{ display:flex; flex-wrap:wrap; gap:5px; max-height:160px; overflow-y:auto;
  padding:8px; background:var(--surf2); border-radius:10px; border:1px solid var(--border); }
.uf-pick label{ font-size:11px; padding:4px 8px; border-radius:8px; background:var(--surf3);
  cursor:pointer; user-select:none; display:flex; align-items:center; gap:4px; }
.uf-pick label.sel{ background:linear-gradient(135deg,#22d3ee,#2563eb); color:#06121f; font-weight:600; }
.uf-pick input{ display:none; }
.frete-result{ text-align:center; padding:10px; border-radius:10px; font-size:14px; font-weight:600;
  background:var(--surf2); border:1px solid var(--border); color:var(--muted); }
.frete-result.pos{ background:rgba(74,222,128,.13); border-color:rgba(74,222,128,.4); color:var(--green); }
.frete-result.neg{ background:rgba(248,113,113,.13); border-color:rgba(248,113,113,.4); color:var(--red); }

/* ── Notificação + Lucro x Prejuízo ── */
.notif{ border-radius:12px; padding:12px 16px; margin-bottom:16px; font-size:13px; border:1px solid; line-height:1.6; }
.notif.alert{ background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.4); color:#fecaca;
  animation:notifPulse 2.4s ease-in-out infinite; }
.notif.ok{ background:rgba(74,222,128,.10); border-color:rgba(74,222,128,.35); color:#bbf7d0; }
@keyframes notifPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(248,113,113,0); } 50%{ box-shadow:0 0 0 4px rgba(248,113,113,.10); } }
.lp-head{ font-weight:600; font-size:13px; padding:8px 11px; border-radius:9px; margin-bottom:10px; }
.lp-head.pos{ background:rgba(74,222,128,.13); color:var(--green); }
.lp-head.neg{ background:rgba(248,113,113,.13); color:var(--red); }
.lp-item{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:9px 11px; border-radius:9px; background:var(--surf2); margin-bottom:6px; border-left:3px solid transparent; }
.lp-item.pos{ border-left-color:var(--green); }
.lp-item.neg{ border-left-color:var(--red); }
.lp-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.lp-vol{ font-size:11px; color:var(--muted); }
.lp-val{ font-variant-numeric:tabular-nums; font-weight:700; }
.lp-item.pos .lp-val{ color:var(--green); }
.lp-item.neg .lp-val{ color:var(--red); }
.reg-pick{ display:flex; flex-wrap:wrap; gap:6px; }
.reg-pick label{ font-size:12px; padding:5px 10px; border-radius:8px; background:var(--surf3);
  cursor:pointer; }
.reg-pick label.sel{ background:linear-gradient(135deg,#22d3ee,#2563eb); color:#06121f; font-weight:600; }
.reg-pick input{ display:none; }

/* ── Nota fiscal / SKU ── */
.nf-atual{ margin-top:6px; }
.nf-chip{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--surf2); border:1px solid var(--border); border-radius:9px; padding:6px 10px; font-size:12px; }
.nf-chip a{ color:var(--cyan,#22d3ee); text-decoration:none; }
.nf-chip a:hover{ text-decoration:underline; }
.nf-hint{ font-size:11px; margin-top:4px; }
.nf-link{ color:#22d3ee; text-decoration:none; white-space:nowrap; }
.nf-link:hover{ text-decoration:underline; }

/* ── Região clicável (zoom) ── */
.reg-row{ cursor:pointer; transition:background .15s; }
.reg-row:hover{ background:var(--surf2); }
.reg-row .zoom-ic{ opacity:0; font-size:11px; transition:opacity .15s; }
.reg-row:hover .zoom-ic{ opacity:.85; }
.modal.wide{ max-width:760px; }
.kpis-mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:6px; }
@media(max-width:640px){ .kpis-mini{ grid-template-columns:repeat(2,1fr); } }
.det-sub{ font-size:13px; margin:16px 0 8px; color:var(--muted); }
.det-tbl{ width:100%; font-size:12.5px; }
.det-scroll{ max-height:300px; overflow-y:auto; }
.det-scroll-lg{ max-height:52vh; overflow-y:auto; }
.imp-ajustar{ background:rgba(251,191,36,.12); }
.imp-ajustar td:first-child{ border-left:3px solid #fbbf24; }
.imp-sem{ opacity:.6; }
#tbl-tabela .tab-inp{ width:120px; text-align:right; }
.det-filtros{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:2px 0 10px; }
.det-filtros select, .det-filtros input{ font-size:12px; padding:6px 9px; border-radius:8px;
  background:var(--surf2); border:1px solid var(--border); color:inherit; }
.det-filtros input{ flex:1; min-width:130px; }
.det-info{ font-size:11.5px; margin-top:8px; text-align:right; }

/* ── Toast ── */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--surf3); border:1px solid var(--border2); padding:11px 18px; border-radius:12px;
  font-size:13px; opacity:0; pointer-events:none; transition:.25s; z-index:1100; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.ok{ border-color:rgba(74,222,128,.4); } .toast.err{ border-color:rgba(248,113,113,.4); }
.empty{ text-align:center; padding:40px; color:var(--muted); }

/* ── Marca Gabriel Pedroso ── */
.gp-brand{ position:fixed; left:16px; bottom:14px; z-index:1000; display:flex; align-items:center;
  gap:10px; padding:7px 14px 7px 8px; border-radius:40px; background:rgba(24,24,27,.72);
  backdrop-filter:blur(8px); border:1px solid var(--border2); box-shadow:0 6px 24px rgba(0,0,0,.45);
  user-select:none; animation:gpFloat 5s ease-in-out infinite; transition:transform .2s,box-shadow .2s; }
.gp-brand:hover{ transform:scale(1.06) translateY(-2px); box-shadow:0 10px 30px rgba(34,211,238,.35); }
@keyframes gpFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.gp-face-wrap{ width:40px; height:40px; flex-shrink:0; border-radius:50%; overflow:hidden;
  position:relative; background:conic-gradient(from 0deg,#0891b2,#2563eb,#22d3ee,#0891b2);
  padding:2px; animation:gpSpin 6s linear infinite; }
@keyframes gpSpin{ to{ transform:rotate(360deg); } }
.gp-face-inner{ width:100%; height:100%; border-radius:50%; overflow:hidden; background:#0b0b0d;
  display:flex; align-items:center; justify-content:center; animation:gpSpin 6s linear infinite reverse; }
.gp-face-inner img{ width:100%; height:100%; object-fit:cover; display:block; }
.gp-text{ display:flex; flex-direction:column; line-height:1.15; }
.gp-text .gp-by{ font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.gp-text .gp-name{ font-size:12px; font-weight:700;
  background:linear-gradient(90deg,#22d3ee,#60a5fa,#22d3ee); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  color:transparent; animation:gpShine 3s linear infinite; }
@keyframes gpShine{ to{ background-position:200% center; } }
@keyframes gpBlink{ 0%,92%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(.1); } }
@keyframes gpEyes{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(2px); } 75%{ transform:translateX(-2px); } }
@keyframes gpMouth{ 0%,100%{ d:path('M16 30 Q24 37 32 30'); } 33%{ d:path('M16 31 Q24 23 32 31'); } 66%{ d:path('M16 30 Q24 30 32 30'); } }
.gp-eye{ transform-origin:center; animation:gpBlink 4s infinite,gpEyes 5s ease-in-out infinite; }
.gp-mouth{ animation:gpMouth 3.5s ease-in-out infinite; }
.gp-brow{ animation:gpEyes 5s ease-in-out infinite; }