/* ══════════════════════════════════════════════════════════════
   METRIZAP v6.0 — Premium Design System
   Neurodesign / Emerald Accent / Glass Effects / Depth System
   ══════════════════════════════════════════════════════════════ */

/* ── Design Tokens (v7.1 Apple System — macOS Sequoia / iOS 17+) ── */
:root{
  /* Sidebar Dark (legacy alias — usado por componentes antigos) */
  --bg-dark:#1C1C1E;--bg-dark2:#2C2C2E;--bg-dark3:#3A3A3C;
  /* Content base (light default — Apple groupedBackground) */
  --bg-light:#F2F2F7;--bg-white:#FFFFFF;
  /* Mesh background — separado em color + image (Apple uses neutral + accent blue gradient subtleties) */
  --bg-base:#F2F2F7;
  --bg-mesh:radial-gradient(1200px 800px at 20% 0%,rgba(0,122,255,.04),transparent 60%),radial-gradient(900px 700px at 90% 30%,rgba(94,92,230,.03),transparent 60%);
  --bg-mesh-strong:radial-gradient(1200px 800px at 20% 0%,rgba(10,132,255,.07),transparent 60%),radial-gradient(900px 700px at 90% 30%,rgba(191,90,242,.04),transparent 60%),radial-gradient(700px 600px at 50% 100%,rgba(94,92,230,.05),transparent 60%);
  /* Glass surfaces (NSVisualEffectMaterial-inspired) */
  --surf-1:rgba(248,248,250,.72);  /* sidebar/header light (vibrant material) */
  --surf-2:rgba(255,255,255,.82);  /* cards/modais light */
  --surf-3:rgba(255,255,255,.6);   /* glass leve light */
  /* Borders (Apple separators) */
  --border-light:rgba(60,60,67,.12);--border-dark:rgba(255,255,255,.1);
  --border:var(--border-light);--border-strong:rgba(60,60,67,.18);
  /* Accent — Apple System Blue (default macOS/iOS) */
  --acc:#007AFF;--acc-hover:#0066D6;--acc-light:#D6EBFF;
  --acc-soft:rgba(0,122,255,.12);
  --acc2:rgba(0,122,255,.08);--acc3:rgba(0,122,255,.15);
  --acc-glow:0 0 0 1px rgba(0,122,255,.18),0 0 28px rgba(0,122,255,.16);
  --acc-glow-strong:0 0 0 1px rgba(0,122,255,.3),0 0 40px rgba(0,122,255,.26);
  /* Text — Apple labels */
  --txt:#000000;--txt2:rgba(60,60,67,.7);--txt3:rgba(60,60,67,.45);--txt-w:#FFFFFF;
  /* Status — Apple System semantic colors (light) */
  --red:#FF3B30;--red-soft:rgba(255,59,48,.1);--red2:rgba(255,59,48,.08);
  --yel:#FF9500;--yel-soft:rgba(255,149,0,.1);--yel2:rgba(255,149,0,.08);
  --blue:#5E5CE6;--blue-soft:rgba(94,92,230,.1);--blu2:rgba(94,92,230,.08);
  --green:#34C759;--green-soft:rgba(52,199,89,.1);
  --orange:#FF9500;--purple:#AF52DE;--pink:#FF2D55;--indigo:#5856D6;--teal:#5AC8FA;
  --ml:#FFE600;
  /* Shadows (escala curta, sutis para premium) */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 2px 4px rgba(15,23,42,.05),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 6px 12px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:0 12px 24px rgba(15,23,42,.08),0 4px 8px rgba(15,23,42,.04);
  --shadow-xl:0 24px 48px rgba(15,23,42,.12),0 8px 16px rgba(15,23,42,.06);
  --shadow:var(--shadow-sm);
  /* Gradients (Apple-style) */
  --grad-acc:linear-gradient(135deg,#007AFF,#0066D6);
  --grad-hero:linear-gradient(135deg,rgba(0,122,255,.05),rgba(94,92,230,.03));
  /* Radius (escala curta) */
  --radius:14px;--radius-sm:10px;--radius-xs:6px;--radius-md:14px;--radius-lg:20px;--radius-pill:9999px;
  /* Typography (8pt grid: 11/12/13/14/16/18/22/28/36) */
  --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;--fs-3xl:36px;
  --lh-tight:1.25;--lh-normal:1.5;
  /* Spacing (8pt grid) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:56px;--sp-10:80px;
  /* Glass blur/saturation */
  --blur-1:12px;--blur-2:20px;--blur-3:28px;
  --sat:saturate(180%);
  /* Apple cubic-bezier easings (iOS/macOS curves) */
  --ease:cubic-bezier(0.25,0.1,0.25,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.86,0,0.07,1);
  --ease-spring:cubic-bezier(0.32,0.72,0,1);
  /* Transitions */
  --tr-fast:.15s;--tr-normal:.25s;--tr-slow:.4s
}

/* Smooth scroll só em âncoras. Antes era em html,body,* — a troca de página
   (content.scrollTop=0) virava rolagem animada de baixo pra cima em vez de corte limpo. */
html{scroll-behavior:smooth}

/* Custos & Impostos — cards com foto + alerta sem custo */
.custo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
.custo-card{display:flex;gap:12px;padding:14px;background:rgba(255,255,255,.7);backdrop-filter:blur(var(--blur-1));-webkit-backdrop-filter:blur(var(--blur-1));border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--tr-fast) var(--ease-out),box-shadow var(--tr-fast) var(--ease-out)}
.custo-card:hover{border-color:rgba(0,122,255,.22);box-shadow:0 4px 12px rgba(0,122,255,.08)}
.custo-card--alert{border-color:rgba(255,59,48,.4);background:linear-gradient(135deg,rgba(255,59,48,.03),rgba(255,255,255,.7))}
body.theme-dark .custo-card--alert{background:linear-gradient(135deg,rgba(255,69,58,.06),rgba(58,58,60,.4))}
.custo-thumb{flex-shrink:0;width:64px;height:64px;border-radius:10px;background:rgba(120,120,128,.08);display:flex;align-items:center;justify-content:center;overflow:hidden}
.custo-thumb img{width:100%;height:100%;object-fit:cover}
.custo-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.custo-title{font-size:13px;font-weight:600;color:var(--txt);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.custo-meta{font-size:11px;color:var(--txt2);font-variant-numeric:tabular-nums}
.custo-inputs{display:grid;grid-template-columns:1fr 90px;gap:8px;margin-top:4px}
.custo-inputs .fl{font-size:10px;color:var(--txt2);margin-bottom:3px}
body.theme-dark .custo-card{background:rgba(58,58,60,.4)}

/* Curvas (rank de produtos) — cards com foto */
.curva-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:8px} /* TOP 10 fixo: 5 em cima + 5 embaixo */
@media(max-width:1280px){.curva-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.curva-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.curva-grid{grid-template-columns:1fr}}
@media(max-width:900px){.fc-ciclos{grid-template-columns:1fr!important}}
.curva-card{position:relative;display:flex;gap:12px;padding:12px;background:rgba(255,255,255,.55);backdrop-filter:blur(var(--blur-1));-webkit-backdrop-filter:blur(var(--blur-1));border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:transform var(--tr-fast) var(--ease-spring),box-shadow var(--tr-fast) var(--ease-out),border-color var(--tr-fast) var(--ease-out);overflow:hidden}
.curva-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,122,255,.12);border-color:rgba(0,122,255,.25)}
.curva-thumb{flex-shrink:0;width:56px;height:56px;border-radius:10px;background:rgba(120,120,128,.08);display:flex;align-items:center;justify-content:center;overflow:hidden}
.curva-thumb img{width:100%;height:100%;object-fit:cover}
.curva-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.curva-title{font-size:12px;font-weight:600;color:var(--txt);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.curva-sku{font-size:10px;color:var(--txt3);font-variant-numeric:tabular-nums}
.curva-val{font-size:14px;font-weight:700;color:var(--txt);letter-spacing:-.014em;font-variant-numeric:tabular-nums;margin-top:4px}
.curva-sub{font-size:10px;color:var(--txt2);font-weight:500}
.curva-rank{position:absolute;top:8px;right:10px;font-size:10px;font-weight:800;color:var(--txt3);letter-spacing:.5px}
body.theme-dark .curva-card{background:rgba(58,58,60,.4);border-color:rgba(255,255,255,.08)}
body.theme-dark .curva-card:hover{background:rgba(72,72,74,.5);border-color:rgba(10,132,255,.32);box-shadow:0 8px 18px rgba(10,132,255,.2)}

/* ADS source badges (real vs estimated) */
.ads-badge{display:inline-block;font-size:8px;font-weight:800;padding:1.5px 5px;border-radius:4px;letter-spacing:.5px;margin-left:6px;vertical-align:1px;line-height:1.2}
.ads-badge.ads-real{background:rgba(52,199,89,.15);color:#1B7A33;border:1px solid rgba(52,199,89,.3)}
.ads-badge.ads-est{background:rgba(255,149,0,.15);color:#9C5500;border:1px solid rgba(255,149,0,.3)}
body.theme-dark .ads-badge.ads-real{background:rgba(48,209,88,.18);color:#7AF299;border-color:rgba(48,209,88,.35)}
body.theme-dark .ads-badge.ads-est{background:rgba(255,159,10,.18);color:#FFC061;border-color:rgba(255,159,10,.35)}

/* Banner premium reconexão (escopo advertising_read faltando) */
.ads-reconnect-banner{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(135deg,rgba(0,122,255,.08),rgba(94,92,230,.06));backdrop-filter:blur(var(--blur-1));border:1px solid rgba(0,122,255,.22);border-radius:var(--radius-md);margin-bottom:16px;animation:fadeUp .4s var(--ease-spring);cursor:pointer;transition:all var(--tr-fast) var(--ease-out)}
.ads-reconnect-banner:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,122,255,.18);border-color:rgba(0,122,255,.4)}
.ads-reconnect-banner .icon{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#0A84FF,#5E5CE6);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(0,122,255,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.ads-reconnect-banner .icon svg{color:#fff;width:18px;height:18px}
.ads-reconnect-banner .txt{flex:1;min-width:0}
.ads-reconnect-banner .ttl{font-size:13px;font-weight:700;color:var(--txt);margin-bottom:2px}
.ads-reconnect-banner .sub{font-size:11px;color:var(--txt2);line-height:1.4}
.ads-reconnect-banner .arrow{color:var(--acc);font-weight:700;font-size:18px;flex-shrink:0}

/* Loading bar top — Vercel/YouTube style */
.loading-bar{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:10000;background:transparent;pointer-events:none;display:none;overflow:hidden}
.loading-bar.on{display:block}
.loading-bar::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--acc) 30%,var(--acc) 70%,transparent);animation:loadingBar 1.4s var(--ease-out) infinite;box-shadow:0 0 12px rgba(0,122,255,.45)}

/* Sidebar item active - slide indicator (linha lateral animada) */
.sb-item{position:relative}
.sb-item::before{content:'';position:absolute;left:0;top:50%;width:3px;height:0;background:var(--acc);border-radius:0 2px 2px 0;transform:translateY(-50%);transition:height var(--tr-normal) var(--ease-spring),opacity var(--tr-fast) var(--ease-out);opacity:0;box-shadow:0 0 8px rgba(0,122,255,.4)}
.sb-item.active::before{height:60%;opacity:1}

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Segoe UI Variable','Segoe UI',system-ui,'Inter',Roboto,'Helvetica Neue',sans-serif;background-color:var(--bg-base);background-image:var(--bg-mesh);color:var(--txt);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv11','ss01','ss03';letter-spacing:-.011em;text-rendering:optimizeLegibility}

/* Tabular numerals em qualquer número financeiro/métrica */
.kpi-val,.h-val,.ms-val,.tid,.roas-num,#prodDetailContent,td,th,.pinfo,.psku,.pval,input[type="number"],input[type="tel"],input[type="date"]{font-variant-numeric:tabular-nums}

/* Finesse global em SVGs (Apple SF Symbols feel) */
svg{stroke-linecap:round;stroke-linejoin:round}
.ic-btn svg,.theme-toggle svg{stroke-width:1.7}
.hdr-ml-on svg,.hdr-ml-off svg{stroke-width:1.7}
/* SVGs inline em labels e cards (Painel ADS, KPIs) */
.kpi-lbl svg,.kpi-val svg,.card svg:not(.sb-icon svg):not(.ic-btn svg):not(.theme-toggle svg){stroke-width:1.7}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Scrollbar — subtle rounded */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:var(--radius-pill)}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}

/* Selection — emerald */
::selection{background:rgba(0,122,255,.2);color:var(--txt)}

/* ── Theme Transition (premium cross-fade) ── */
body,html,#hdr,#content,.card,.kpi,.dre-section,#sidebar,.mbox,.sb-item,.sb-icon,th,td,.pill,.pb,.fb,.eb,.tb{
  transition:background-color .45s var(--ease-out),border-color .45s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
/* Ao trocar tema, animação de fade-overlay sobre tudo */
.theme-switching::after{content:'';position:fixed;inset:0;background:radial-gradient(circle at center,rgba(0,122,255,.06),transparent 70%);z-index:9999;pointer-events:none;animation:fadeIn .45s var(--ease-out) reverse forwards}

/* ── Page Transition (premium fade + slide-up) ── */
#content{transition:opacity .22s var(--ease-out),transform .35s var(--ease-spring),background-color var(--tr-slow) var(--ease-out);transform:translateY(0)}
#content.transitioning{opacity:0;transform:translateY(8px)}
/* Cada card filho do content faz stagger fade-in spring quando entra */
#content > *{animation:pageEnter .5s var(--ease-spring) both}
#content > *:nth-child(1){animation-delay:.02s}
#content > *:nth-child(2){animation-delay:.07s}
#content > *:nth-child(3){animation-delay:.13s}
#content > *:nth-child(4){animation-delay:.2s}
#content > *:nth-child(5){animation-delay:.27s}
#content > *:nth-child(6){animation-delay:.34s}


/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes countUp{from{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.96)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Premium animations Apple-style */
@keyframes pageEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalEnter{0%{opacity:0;transform:scale(.94) translateY(8px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ripple{from{transform:scale(0);opacity:.5}to{transform:scale(4);opacity:0}}
@keyframes loadingBar{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,122,255,.4)}50%{box-shadow:0 0 0 8px rgba(0,122,255,0)}}
@keyframes tilePop{0%{transform:scale(.85);opacity:0}55%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
@keyframes sidebarSlide{from{transform:translateX(-4px);opacity:0}to{transform:translateX(0);opacity:1}}
/* SVG drawing on entry (stroke dasharray trick) */
@keyframes svgDraw{from{stroke-dasharray:200;stroke-dashoffset:200}to{stroke-dasharray:200;stroke-dashoffset:0}}
@keyframes iconWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes iconSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes barFill{from{width:0}to{width:var(--bar-target,100%)}}
@keyframes glowSweep{0%{transform:translateX(-100%) skewX(-20deg)}100%{transform:translateX(200%) skewX(-20deg)}}


/* ══════════════════════════════════════════════════════════════
   SKELETON LOADERS
   ══════════════════════════════════════════════════════════════ */
.skel{background:linear-gradient(90deg,rgba(120,120,128,.08) 25%,rgba(120,120,128,.16) 50%,rgba(120,120,128,.08) 75%);background-size:600px 100%;animation:shimmer 2.2s var(--ease-out) infinite;border-radius:var(--radius-sm)}
.skel-line{height:14px;margin-bottom:10px;border-radius:6px}
.skel-line:nth-child(2n){width:88%}
.skel-line:nth-child(3n){width:74%}
.skel-card{height:100px;border-radius:var(--radius);margin-bottom:10px}
.skel-kpi{height:96px;border-radius:var(--radius)}


/* ══════════════════════════════════════════════════════════════
   TOAST SYSTEM
   ══════════════════════════════════════════════════════════════ */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;min-width:280px;max-width:400px;animation:slideUp .42s var(--ease-spring);box-shadow:var(--shadow-lg);transform-origin:bottom right}
.toast.out{animation:slideOut .26s var(--ease-out) forwards}
.toast{backdrop-filter:blur(var(--blur-2)) var(--sat);-webkit-backdrop-filter:blur(var(--blur-2)) var(--sat)}
.toast.success{background:rgba(255,255,255,.82);border:1px solid rgba(52,199,89,.35);color:#1B7A33}
.toast.error{background:rgba(255,255,255,.82);border:1px solid rgba(255,59,48,.35);color:#B81D17}
.toast.info{background:rgba(255,255,255,.82);border:1px solid rgba(0,122,255,.35);color:#0066D6}
.toast.warning{background:rgba(255,255,255,.82);border:1px solid rgba(255,149,0,.35);color:#9C5500}
.toast-icon{font-size:16px;flex-shrink:0}
.toast-msg{flex:1}
.toast-close{background:none;border:none;color:inherit;cursor:pointer;opacity:.6;font-size:14px;padding:0;transition:opacity var(--tr-fast)}
.toast-close:hover{opacity:1}


/* ══════════════════════════════════════════════════════════════
   AUTH SCREENS — HARDCODED DARK (no CSS vars)
   ══════════════════════════════════════════════════════════════ */
.auth-shell{position:fixed;inset:0;background:#07090F;display:flex;align-items:stretch}
.auth-left{width:420px;flex-shrink:0;background:#0C0F1A;border-right:1px solid #1E2440;display:flex;flex-direction:column;padding:40px;position:relative;overflow:hidden}
.auth-left::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,122,255,.08) 0%,transparent 70%);pointer-events:none}
.auth-brand{display:flex;align-items:center;gap:9px}
.auth-brand-name{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.5px;color:#E8EDF8}
.auth-tagline{margin-top:auto;padding-top:28px}
.auth-tagline h1{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;line-height:1.25;color:#E8EDF8;margin-bottom:10px}
.auth-tagline p{font-size:13px;color:#6B7899;line-height:1.65}
.auth-features{margin-top:28px;display:flex;flex-direction:column;gap:11px}
.feat{display:flex;align-items:center;gap:10px;font-size:13px;color:#6B7899}
.feat-icon{width:28px;height:28px;border-radius:7px;background:rgba(0,122,255,.08);border:1px solid rgba(0,122,255,.15);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.auth-right{flex:1;display:flex;align-items:center;justify-content:center;background:#07090F;padding:40px}
.auth-box{width:100%;max-width:400px;animation:fadeUp .4s ease}
.auth-box h2{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;margin-bottom:5px;color:#E8EDF8}
.auth-box .sub{font-size:13px;color:#6B7899;margin-bottom:26px}
.auth-box .sub a{color:#007AFF;cursor:pointer;font-weight:600}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:var(--fs-2xs);font-weight:700;color:#6B7899;letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px}
.inp{width:100%;background:#111520;border:1.5px solid #1E2440;border-radius:var(--radius-sm);padding:12px 14px;color:#E8EDF8;font-size:var(--fs-base);outline:none;font-family:inherit;transition:border var(--tr-fast),box-shadow var(--tr-fast)}
.inp:focus{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.08)}
.inp::placeholder{color:#2E3554}
.inp.err{border-color:rgba(255,59,48,.5);animation:shake .3s ease}
.inp-wrap{position:relative}
.inp-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#6B7899;cursor:pointer;font-size:15px;user-select:none;background:none;border:none;padding:0}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Auth buttons — gradient + depth */
.btn-auth{width:100%;background:linear-gradient(135deg,#0A84FF,#0066D6);border:none;border-radius:var(--radius-sm);padding:13px;font-size:var(--fs-base);font-weight:700;color:#FFFFFF;cursor:pointer;font-family:inherit;transition:transform var(--tr-normal) var(--ease-spring),box-shadow var(--tr-normal) var(--ease-out),background var(--tr-normal) var(--ease-out);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;box-shadow:0 4px 14px rgba(0,122,255,.35),inset 0 1px 0 rgba(255,255,255,.22);position:relative;overflow:hidden}
.btn-auth::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 50%);opacity:0;transition:opacity var(--tr-fast) var(--ease-out);pointer-events:none}
.btn-auth:hover{background:linear-gradient(135deg,#3D9BFF,#0A84FF);transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,122,255,.45),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-auth:hover::before{opacity:1}
.btn-auth:active{transform:translateY(0) scale(.98);box-shadow:0 2px 8px rgba(0,122,255,.25)}
.btn-auth:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-outline{width:100%;background:transparent;border:1.5px solid #1E2440;border-radius:var(--radius-sm);padding:12px;font-size:var(--fs-sm);font-weight:600;color:#6B7899;cursor:pointer;font-family:inherit;transition:all var(--tr-fast);margin-top:8px}
.btn-outline:hover{border-color:#2A3158;color:#E8EDF8}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:#2E3554;font-size:var(--fs-xs)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:#1E2440}
.err-msg{background:rgba(255,59,48,.1);border:1px solid rgba(255,59,48,.2);border-radius:var(--radius-xs);padding:10px 13px;font-size:var(--fs-xs);color:#FF3B30;margin-bottom:12px;display:none}
.ok-msg{background:rgba(0,122,255,.08);border:1px solid rgba(0,122,255,.2);border-radius:var(--radius-xs);padding:10px 13px;font-size:var(--fs-xs);color:#007AFF;margin-bottom:12px;display:none}
.terms{font-size:var(--fs-2xs);color:#2E3554;text-align:center;margin-top:14px;line-height:1.6}
.strength-bar{display:flex;gap:3px;margin-top:5px;height:3px}
.sb-s{flex:1;border-radius:2px;background:#1E2440;transition:background .2s}


/* ══════════════════════════════════════════════════════════════
   ML CONNECT MODAL — HARDCODED DARK (no CSS vars)
   ══════════════════════════════════════════════════════════════ */
.ml-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}
.ml-overlay.on{display:flex}
.ml-modal{background:#0C0F1A;border:1px solid #2A3158;border-radius:22px;width:500px;max-height:92vh;overflow-y:auto;animation:fadeUp .3s ease}
.ml-top{background:linear-gradient(135deg,#120f00 0%,#0C0F1A 100%);border-bottom:1px solid #1E2440;border-radius:22px 22px 0 0;padding:32px;text-align:center;position:relative;overflow:hidden}
.ml-top::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% -10%,rgba(255,230,0,.13) 0%,transparent 60%)}
.ml-logo{width:80px;height:80px;border-radius:20px;background:#FFE600;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;position:relative;z-index:1;box-shadow:0 8px 32px rgba(255,230,0,.35)}
.ml-top h2{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;position:relative;z-index:1;margin-bottom:6px;color:#E8EDF8}
.ml-top p{font-size:13px;color:#6B7899;position:relative;z-index:1;line-height:1.6;max-width:360px;margin:0 auto}
.ml-body{padding:28px}
.ml-how{background:#111520;border:1px solid #1E2440;border-radius:12px;padding:18px;margin-bottom:22px}
.ml-how-title{font-size:12px;font-weight:700;color:#6B7899;letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px}
.ml-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.ml-step:last-child{margin-bottom:0}
.ml-step-n{width:26px;height:26px;border-radius:50%;background:rgba(0,122,255,.08);border:1px solid rgba(0,122,255,.2);color:#007AFF;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ml-step-txt{font-size:13px;color:#6B7899;line-height:1.55}
.ml-step-txt strong{color:#E8EDF8}
.ml-btn{width:100%;background:#FFE600;border:none;border-radius:13px;padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;font-weight:700;color:#1A1A00;transition:all .18s;font-family:inherit;margin-bottom:10px}
.ml-btn:hover{background:#fff068;transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,230,0,.28)}
.ml-btn:active{transform:translateY(0)}
.ml-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ml-btn-skip{width:100%;background:transparent;border:1.5px solid #1E2440;border-radius:12px;padding:13px;font-size:13px;font-weight:600;color:#6B7899;cursor:pointer;font-family:inherit;transition:all .15s}
.ml-btn-skip:hover{border-color:#2A3158;color:#E8EDF8}
.ml-note{margin-top:16px;padding:12px 14px;background:rgba(0,122,255,.08);border-radius:var(--radius-sm);border:1px solid rgba(0,122,255,.15);font-size:12px;color:#007AFF;line-height:1.6}
.ml-not-configured{background:rgba(255,149,0,.08);border:1px solid rgba(255,149,0,.2);border-radius:11px;padding:16px;margin-bottom:16px;font-size:13px;color:#FF9500;line-height:1.6}
.ml-not-configured code{background:rgba(255,149,0,.12);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:12px}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT
   ══════════════════════════════════════════════════════════════ */
#screen-dash{position:fixed;inset:0;display:none;flex-direction:row}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR — PREMIUM DARK
   ══════════════════════════════════════════════════════════════ */
#sidebar{width:240px;background:rgba(248,248,250,.72);backdrop-filter:blur(var(--blur-3)) var(--sat);-webkit-backdrop-filter:blur(var(--blur-3)) var(--sat);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;flex-shrink:0;transition:width .2s;position:relative;z-index:5}
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){#sidebar{background:#F5F5F7}}
.sb-head{padding:var(--sp-4) var(--sp-3) var(--sp-3);border-bottom:1px solid var(--border)}
.sb-logo{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sb-logo-txt{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--txt)}
.sb-ml{display:flex;align-items:center;gap:7px;padding:6px 10px;background:rgba(255,159,10,.08);border-radius:var(--radius-xs);border:1px solid rgba(255,159,10,.2);cursor:pointer;transition:all var(--tr-fast);margin-bottom:6px}
.sb-ml:hover{background:rgba(255,159,10,.14)}
.sb-ml-name{font-size:var(--fs-2xs);color:#9C5500;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-ml-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 2.5s infinite}
.sb-user{display:flex;align-items:center;gap:8px;padding:7px 10px;background:rgba(120,120,128,.08);border-radius:var(--radius-xs);border:1px solid var(--border);cursor:pointer;transition:all var(--tr-fast);position:relative}
.sb-user:hover{border-color:var(--border-strong);background:rgba(120,120,128,.14)}
.sb-avatar{width:26px;height:26px;border-radius:var(--radius-xs);background:var(--acc2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--acc);flex-shrink:0}
.sb-uname{font-size:var(--fs-xs);font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* Profile dropdown */
/* Abre PRA BAIXO (top), sobreposto ao menu — antes usava bottom:100% e abria pra cima, cortando no topo da sidebar */
.pdrop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-dark2);border:1px solid #4B5563;border-radius:var(--radius-sm);padding:5px;z-index:200;display:none;animation:fadeIn .15s;box-shadow:var(--shadow-lg)}
.pdrop.on{display:block}
.pd-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-xs);font-size:var(--fs-xs);font-weight:500;cursor:pointer;color:#9CA3AF;transition:all .1s}
.pd-item:hover{background:var(--bg-dark3);color:var(--txt-w)}
.pd-item.danger{color:var(--red)}

/* Sidebar nav */
.sb-nav{padding:var(--sp-3) var(--sp-2);flex:1;overflow-y:auto}
.sb-sec{font-size:var(--fs-2xs);font-weight:700;color:var(--txt3);letter-spacing:1.5px;text-transform:uppercase;padding:var(--sp-2) var(--sp-2) var(--sp-1)}
.sb-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:500;margin-bottom:1px;cursor:pointer;color:var(--txt2);border-left:3px solid transparent;transition:all var(--tr-fast);user-select:none;animation:slideIn var(--tr-normal) ease both}
.sb-item:hover{background:rgba(120,120,128,.1);color:var(--txt)}
.sb-item.active{background:rgba(120,120,128,.14);color:var(--txt);border-left-color:transparent;font-weight:600}
.sb-item.active .sb-icon{transform:scale(1.06);box-shadow:0 0 0 3px rgba(0,122,255,.12),0 6px 14px rgba(0,122,255,.3),inset 0 1.5px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.18)}
.sb-item.active .sb-icon svg{stroke-width:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.22))}
.sb-item.danger{color:var(--red)}
/* App-tile icons (estilo macOS System Settings / iOS Settings) */
.sb-icon{font-size:14px;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#8E8E93,#6D6D71);box-shadow:0 1px 1.5px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12);transition:transform var(--tr-fast) var(--ease-spring),box-shadow var(--tr-fast) var(--ease-out)}
.sb-icon svg{color:#FFFFFF;width:15px;height:15px;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .5px 0 rgba(0,0,0,.18));transition:transform .35s var(--ease-spring)}
/* Hover anima ícone (cada categoria com motion diferente) */
.sb-item[onclick*="dashboard"]:hover .sb-icon svg{animation:iconPulse .6s var(--ease-spring)}
.sb-item[onclick*="anuncios"]:hover .sb-icon svg{animation:iconBounce .55s var(--ease-spring)}
.sb-item[onclick*="ads"]:hover .sb-icon svg{animation:iconWiggle .55s var(--ease-spring)}
.sb-item[onclick*="perguntas"]:hover .sb-icon svg{animation:iconWiggle .5s var(--ease-spring)}
.sb-item[onclick*="dre"]:hover .sb-icon svg{animation:iconBounce .5s var(--ease-spring)}
.sb-item[onclick*="custos"]:hover .sb-icon svg{animation:iconPulse .55s var(--ease-spring)}
.sb-item[onclick*="m-roas"]:hover .sb-icon svg{animation:iconSpin .8s var(--ease-spring)}
.sb-item[onclick*="fluxocaixa"]:hover .sb-icon svg{animation:iconBounce .55s var(--ease-spring)}
.sb-item[onclick*="estoque"]:hover .sb-icon svg{animation:iconPulse .5s var(--ease-spring)}
.sb-item[onclick*="m-alerts"]:hover .sb-icon svg{animation:iconWiggle .45s var(--ease-spring)}
.sb-item[onclick*="m-wa"]:hover .sb-icon svg{animation:iconBounce .5s var(--ease-spring)}
.sb-item[onclick*="m-mkt"]:hover .sb-icon svg{animation:iconPulse .5s var(--ease-spring)}
.sb-item[onclick*="m-suporte"]:hover .sb-icon svg{animation:iconWiggle .55s var(--ease-spring)}
.sb-item[onclick*="m-conta"]:hover .sb-icon svg{animation:iconPulse .5s var(--ease-spring)}
.sb-item[onclick*="doLogout"]:hover .sb-icon svg{animation:iconBounce .45s var(--ease-spring)}
/* Refresh button spin while loading */
.ic-btn#rfBtn:active svg,.ic-btn#rfBtn.loading svg{animation:iconSpin .8s linear infinite}
.sb-item:hover .sb-icon{transform:translateY(-1px) scale(1.06);box-shadow:0 4px 8px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.16)}
.sb-item:active .sb-icon{transform:translateY(0) scale(.92);transition:transform .12s var(--ease-out)}
/* Tile pop-in animation no carregamento */
.sb-item .sb-icon{animation:tilePop .55s var(--ease-spring) both}
.sb-item:nth-child(1) .sb-icon{animation-delay:.05s}
.sb-item:nth-child(2) .sb-icon{animation-delay:.08s}
.sb-item:nth-child(3) .sb-icon{animation-delay:.11s}
.sb-item:nth-child(4) .sb-icon{animation-delay:.14s}
.sb-item:nth-child(5) .sb-icon{animation-delay:.17s}
.sb-item:nth-child(6) .sb-icon{animation-delay:.2s}
.sb-item:nth-child(7) .sb-icon{animation-delay:.23s}
.sb-item:nth-child(8) .sb-icon{animation-delay:.26s}
.sb-item:nth-child(9) .sb-icon{animation-delay:.29s}

/* App-tile cores por categoria (Apple System Settings style) */
.sb-item[onclick*="dashboard"] .sb-icon{background:linear-gradient(135deg,#5E5CE6,#3634A3)}
.sb-item[onclick*="anuncios"] .sb-icon{background:linear-gradient(135deg,#FF9500,#C97000)}
.sb-item[onclick*="ads"] .sb-icon{background:linear-gradient(135deg,#BF5AF2,#7B2CBF)}
.sb-item[onclick*="perguntas"] .sb-icon{background:linear-gradient(135deg,#0A84FF,#0040DD)}
.sb-item[onclick*="dre"] .sb-icon{background:linear-gradient(135deg,#34C759,#1F8A3C)}
.sb-item[onclick*="custos"] .sb-icon{background:linear-gradient(135deg,#FF2D55,#B8002C)}
.sb-item[onclick*="m-roas"] .sb-icon{background:linear-gradient(135deg,#5AC8FA,#0A84FF)}
.sb-item[onclick*="fluxocaixa"] .sb-icon{background:linear-gradient(135deg,#00C7BE,#008A85)}
.sb-item[onclick*="estoque"] .sb-icon{background:linear-gradient(135deg,#FFCC00,#C99B00)}
.sb-item[onclick*="m-alerts"] .sb-icon{background:linear-gradient(135deg,#FF9F0A,#C76A00)}
.sb-item[onclick*="m-wa"] .sb-icon{background:linear-gradient(135deg,#25D366,#128C7E)}
.sb-item[onclick*="m-mkt"] .sb-icon{background:linear-gradient(135deg,#AF52DE,#6E1F94)}
.sb-item[onclick*="m-suporte"] .sb-icon{background:linear-gradient(135deg,#5AC8FA,#1A90B8)}
.sb-item[onclick*="m-conta"] .sb-icon{background:linear-gradient(135deg,#8E8E93,#48484A)}
.sb-item[onclick*="doLogout"] .sb-icon{background:linear-gradient(135deg,#FF3B30,#A61719)}
.sb-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:var(--radius-pill);padding:1px 7px;font-size:10px;font-weight:700}
.sb-badge.warn{background:var(--yel);color:#1A1A00}
.sb-bottom{border-top:1px solid var(--border);padding:6px;background:transparent}
.sb-ver{padding:6px 10px 2px;font-size:10px;color:var(--txt3)}


/* ══════════════════════════════════════════════════════════════
   MAIN AREA
   ══════════════════════════════════════════════════════════════ */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}


/* ══════════════════════════════════════════════════════════════
   HEADER — GLASS EFFECT
   ══════════════════════════════════════════════════════════════ */
#hdr{height:60px;background:rgba(255,255,255,.7);backdrop-filter:blur(var(--blur-3)) var(--sat);-webkit-backdrop-filter:blur(var(--blur-3)) var(--sat);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 var(--sp-5);gap:10px;flex-shrink:0;z-index:10}
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){#hdr{background:#FFFFFF}}
.hdr-ml-on{display:flex;align-items:center;gap:7px;padding:5px 12px;background:var(--green-soft);border-radius:var(--radius-pill);border:1px solid rgba(52,199,89,.25);font-size:var(--fs-2xs);font-weight:700;color:#1B7A33;cursor:pointer;transition:all var(--tr-fast)}
.hdr-ml-on:hover{background:rgba(52,199,89,.18)}
.hdr-ml-off{display:flex;align-items:center;gap:7px;padding:5px 14px;background:rgba(120,120,128,.1);border-radius:var(--radius-pill);border:1px solid var(--border);font-size:var(--fs-2xs);font-weight:700;color:var(--txt2);cursor:pointer;transition:all var(--tr-fast)}
.hdr-ml-off:hover{background:rgba(120,120,128,.16);color:var(--txt)}
.hdr-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2.5s infinite}
.hdr-sp{flex:1}
.sync-wrap{font-size:var(--fs-2xs);color:var(--txt3);display:flex;align-items:center;gap:5px}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse 2s infinite}
.ic-btn{background:rgba(120,120,128,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:9px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt2);font-size:14px;transition:background var(--tr-fast) var(--ease-out),transform var(--tr-fast) var(--ease-spring),box-shadow var(--tr-fast) var(--ease-out),color var(--tr-fast) var(--ease-out);position:relative;box-shadow:0 1px 2px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.4)}
.ic-btn:hover{background:rgba(120,120,128,.14);color:var(--txt);transform:translateY(-0.5px);box-shadow:0 2px 6px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.5)}
.ic-btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ic-btn.nb::after{content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--red);border:1.5px solid var(--bg-white)}


/* ══════════════════════════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════════════════════════ */
#content{flex:1;overflow-y:auto;padding:var(--sp-5) var(--sp-6);background:var(--bg-light)}
.pg-head{margin-bottom:var(--sp-4)}
.pg-title{font-size:28px;font-weight:700;color:var(--txt);letter-spacing:-.022em}
.pg-sub{font-size:var(--fs-xs);color:var(--txt2);margin-top:2px}


/* ══════════════════════════════════════════════════════════════
   PERIOD & FILTER BUTTONS
   ══════════════════════════════════════════════════════════════ */
.pb-bar{display:flex;gap:var(--sp-1);margin-bottom:18px;flex-wrap:wrap}
.pb{padding:6px 16px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;cursor:pointer;border:1px solid var(--border-light);background:var(--bg-white);color:var(--txt2);transition:all var(--tr-normal);font-family:inherit}
.pb:hover{background:var(--bg-light);border-color:#CBD5E1;color:var(--txt)}
.pb.active{background:var(--grad-acc);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(0,122,255,.25)}
.fb{padding:5px 12px;border-radius:var(--radius-pill);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;border:1px solid var(--border-light);background:transparent;color:var(--txt2);transition:all var(--tr-normal);font-family:inherit}
.fb:hover{border-color:#CBD5E1;color:var(--txt)}
.fb.active{background:var(--acc2);color:#0066D6;border-color:rgba(0,122,255,.3)}
.eb{padding:5px 10px;border-radius:var(--radius-sm);font-size:var(--fs-2xs);font-weight:700;cursor:pointer;background:transparent;color:var(--txt2);border:1px solid var(--border-light);display:flex;align-items:center;gap:3px;font-family:inherit;transition:all var(--tr-fast)}
.eb:hover{border-color:#CBD5E1;color:var(--txt)}


/* ══════════════════════════════════════════════════════════════
   CARDS — PREMIUM
   ══════════════════════════════════════════════════════════════ */
.card{background:rgba(255,255,255,.7);backdrop-filter:blur(var(--blur-1));-webkit-backdrop-filter:blur(var(--blur-1));border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-6);box-shadow:var(--shadow-sm);transition:transform var(--tr-normal) var(--ease-out),box-shadow var(--tr-normal) var(--ease-out),border-color var(--tr-normal) var(--ease-out),background var(--tr-normal) var(--ease-out)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:rgba(0,122,255,.18)}
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){.card{background:#FFFFFF}}


/* ══════════════════════════════════════════════════════════════
   KPI CARDS — PREMIUM WITH STAGGER
   ══════════════════════════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.kpi{background:rgba(255,255,255,.7);backdrop-filter:blur(var(--blur-1));-webkit-backdrop-filter:blur(var(--blur-1));border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5) var(--sp-6);transition:transform var(--tr-normal) var(--ease-out),box-shadow var(--tr-normal) var(--ease-out),border-color var(--tr-normal) var(--ease-out);box-shadow:var(--shadow-xs);animation:fadeInUp var(--tr-slow) var(--ease-spring) both;position:relative}
.kpi{transform-style:preserve-3d;perspective:1000px}
.kpi:hover{box-shadow:0 12px 28px rgba(0,122,255,.16),0 4px 8px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.55);transform:translateY(-3px) scale(1.01);border-color:rgba(0,122,255,.32)}
.kpi.tilt{transform:perspective(1000px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateZ(0);transition:transform .12s var(--ease-out),box-shadow var(--tr-fast) var(--ease-out)}
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){.kpi{background:#FFFFFF}}

/* Halo azul Apple no card que envolve o hero (Faturamento + Lucro) */
.card:has(.hero){box-shadow:var(--acc-glow),var(--shadow-md);border-color:rgba(0,122,255,.22);background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.65))}
body.theme-dark .card:has(.hero){box-shadow:var(--acc-glow),var(--shadow-lg);border-color:rgba(10,132,255,.3);background:linear-gradient(135deg,rgba(58,58,60,.6),rgba(44,44,46,.45))}

/* KPI stagger delays */
.kpi-grid .kpi:nth-child(1){animation-delay:0s}
.kpi-grid .kpi:nth-child(2){animation-delay:.05s}
.kpi-grid .kpi:nth-child(3){animation-delay:.1s}
.kpi-grid .kpi:nth-child(4){animation-delay:.15s}
.kpi-grid .kpi:nth-child(5){animation-delay:.2s}
.kpi-grid .kpi:nth-child(6){animation-delay:.25s}
.kpi-grid .kpi:nth-child(7){animation-delay:.3s}
.kpi-grid .kpi:nth-child(8){animation-delay:.35s}

.kpi-hdr{display:flex;justify-content:space-between;margin-bottom:var(--sp-2)}
.kpi-lbl{font-size:10px;color:var(--txt2);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.kpi-ico{font-size:12px}
.kpi-val{font-size:24px;font-weight:700;letter-spacing:-.018em;margin-bottom:3px;color:var(--txt);animation:countUp var(--tr-slow) var(--ease-spring) both;font-variant-numeric:tabular-nums}
.kpi-ft{display:flex;justify-content:space-between;align-items:center}
.kpi-sub{font-size:10px;color:var(--txt2)}


/* ══════════════════════════════════════════════════════════════
   HERO & METRICS
   ══════════════════════════════════════════════════════════════ */
.hero{background:var(--grad-hero);border-radius:var(--radius);padding:var(--sp-8) var(--sp-6);display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.h-lbl{font-size:10px;color:var(--txt2);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}
.h-val{font-size:34px;font-weight:700;letter-spacing:-.022em;color:var(--txt);font-variant-numeric:tabular-nums}
.h-val.green{color:var(--green)}
.h-desc{font-size:var(--fs-2xs);color:var(--txt2);margin-top:3px}
.h-div{width:1px;height:50px;background:var(--border-light);flex-shrink:0}
.ms{text-align:center}
.ms-lbl{font-size:10px;color:var(--txt2);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.ms-val{font-size:18px;font-weight:700;color:var(--txt);letter-spacing:-.014em;font-variant-numeric:tabular-nums}


/* ══════════════════════════════════════════════════════════════
   CHARTS
   ══════════════════════════════════════════════════════════════ */
.row2{display:grid;grid-template-columns:1fr 310px;gap:var(--sp-4)}
.chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-4)}
.ct{font-size:var(--fs-sm);font-weight:700;color:var(--txt)}
.cd{font-size:var(--fs-2xs);color:var(--txt2);margin-top:2px}
.leg{display:flex;align-items:center;gap:5px;font-size:var(--fs-2xs);color:var(--txt2)}
.leg-dot{width:8px;height:3px;border-radius:2px}
.tabs{display:flex;gap:3px;margin-bottom:10px}
.tb{padding:4px 10px;border-radius:var(--radius-pill);font-size:var(--fs-2xs);font-weight:700;cursor:pointer;border:1px solid var(--border-light);background:transparent;color:var(--txt2);transition:all var(--tr-fast);font-family:inherit}
.tb:hover{color:var(--txt)}
.tb.active{background:var(--grad-acc);color:#fff;border-color:transparent}


/* ══════════════════════════════════════════════════════════════
   TOP PRODUCTS
   ══════════════════════════════════════════════════════════════ */
.prow{display:flex;align-items:center;gap:8px;padding:var(--sp-2) var(--sp-1);border-radius:var(--radius-xs);margin-bottom:1px;transition:background var(--tr-fast) var(--ease-out),transform .35s var(--ease-spring),box-shadow var(--tr-normal) var(--ease-out);transform-style:preserve-3d;perspective:600px}
.prow:hover{background:rgba(0,122,255,.06);transform:perspective(600px) translateZ(8px) translateY(-1px);box-shadow:0 8px 18px rgba(0,122,255,.12)}
.prnk{width:20px;height:20px;border-radius:5px;background:var(--acc2);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--acc);flex-shrink:0}
.pinfo{flex:1;min-width:0}
.pname{font-size:var(--fs-2xs);color:var(--txt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psku{font-size:9px;color:var(--txt3)}
.pval{text-align:right;flex-shrink:0;font-size:var(--fs-2xs);font-weight:700;color:var(--acc)}
.log-bg{height:4px;background:var(--border-light);border-radius:2px;margin:4px 0}
.log-fill{height:100%;border-radius:2px;transition:width .5s ease}


/* ══════════════════════════════════════════════════════════════
   PILL BADGES — SOFTER
   ══════════════════════════════════════════════════════════════ */
.pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--radius-pill);font-size:var(--fs-2xs);font-weight:600}
.p-g{background:var(--green-soft);color:#1B7A33}
.p-r{background:var(--red-soft);color:var(--red)}
.p-b{background:var(--acc-soft);color:var(--acc)}
.p-y{background:var(--yel-soft);color:#9C5500}
.p-gr{background:rgba(120,120,128,.12);color:var(--txt2)}


/* ══════════════════════════════════════════════════════════════
   TABLES — REFINED
   ══════════════════════════════════════════════════════════════ */
.oh{display:flex;justify-content:space-between;align-items:center;padding:0 0 var(--sp-3);margin-bottom:var(--sp-3);border-bottom:1px solid var(--border-light);flex-wrap:wrap;gap:8px}
.oh h3{font-size:var(--fs-base);font-weight:700;color:var(--txt)}
.oh p{font-size:var(--fs-xs);color:var(--txt2);margin-top:1px}
.tctrl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tbl-wrap{overflow-x:auto;overflow-y:auto;max-height:600px;border-radius:var(--radius-sm);scrollbar-width:thin}

table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
th{padding:var(--sp-3) var(--sp-4);text-align:left;font-size:var(--fs-2xs);font-weight:600;color:var(--txt2);letter-spacing:.6px;text-transform:uppercase;background:rgba(248,248,250,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:3}
td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);color:var(--txt)}
.trow{transition:background var(--tr-fast) var(--ease-out)}
.trow:nth-child(even) td{background:rgba(0,0,0,.012)}
.trow:hover td{background:var(--acc-soft)}
.trow:hover td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.tid{color:var(--acc);font-weight:700}


/* ══════════════════════════════════════════════════════════════
   PRODUCT & AD CARDS
   ══════════════════════════════════════════════════════════════ */
.ads-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-3)}
.ad-card{background:var(--bg-white);border:1px solid rgba(0,0,0,.04);border-radius:var(--radius);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-xs);transform-style:preserve-3d;perspective:1000px;transition:transform .42s var(--ease-spring),box-shadow var(--tr-normal) var(--ease-out),border-color var(--tr-normal) var(--ease-out)}
.ad-card:hover{border-color:rgba(0,122,255,.25);transform:perspective(1000px) translateZ(20px) translateY(-6px) rotateX(2deg);box-shadow:0 22px 45px rgba(0,122,255,.18),0 8px 16px rgba(0,0,0,.08)}
.ad-card .ad-img{transition:transform .5s var(--ease-spring)}
.ad-card:hover .ad-img{transform:scale(1.06)}
.ad-img{width:100%;height:120px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:26px;overflow:hidden}
.ad-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.ad-body{padding:10px 12px}
.ad-title{font-size:var(--fs-2xs);font-weight:600;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;margin-bottom:6px;height:31px}
.ad-ft{padding:7px 12px;border-top:1px solid rgba(0,0,0,.04);display:flex;justify-content:space-between;align-items:center;font-size:10px}


/* ══════════════════════════════════════════════════════════════
   Q&A CARDS
   ══════════════════════════════════════════════════════════════ */
.q-card{background:var(--bg-white);border:1px solid rgba(0,0,0,.04);border-radius:var(--radius);padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--shadow-xs);transition:all var(--tr-normal)}
.q-card:hover{box-shadow:var(--shadow-sm)}
.q-card.ua{border-color:rgba(255,149,0,.4)}
.q-meta{display:flex;justify-content:space-between;margin-bottom:6px;font-size:var(--fs-2xs);color:var(--txt2)}
.q-item{font-size:var(--fs-2xs);color:var(--acc);margin-bottom:5px}
.q-text{font-size:var(--fs-sm);color:var(--txt);line-height:1.5;margin-bottom:10px}
.q-inp{width:100%;background:var(--bg-light);border:1px solid var(--border-light);border-radius:var(--radius-xs);padding:10px 14px;color:var(--txt);font-size:var(--fs-xs);outline:none;font-family:inherit;margin-bottom:7px;transition:border var(--tr-fast),box-shadow var(--tr-fast)}
.q-inp:focus{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.06)}
.q-inp::placeholder{color:var(--txt3)}
.q-answered{background:rgba(0,122,255,.04);border:1px solid rgba(0,122,255,.12);border-radius:var(--radius-xs);padding:9px 12px}
.q-a-txt{font-size:var(--fs-xs);color:var(--txt2);margin-top:4px;line-height:1.5}


/* ══════════════════════════════════════════════════════════════
   BUTTONS — GRADIENT + DEPTH
   ══════════════════════════════════════════════════════════════ */
.btn-sg{background:var(--grad-acc);border:none;border-radius:var(--radius-sm);padding:9px 18px;color:#fff;font-size:var(--fs-xs);font-weight:700;cursor:pointer;font-family:inherit;transition:transform var(--tr-fast) var(--ease-spring),box-shadow var(--tr-fast) var(--ease-out);white-space:nowrap;box-shadow:0 2px 8px rgba(0,122,255,.25),inset 0 1px 0 rgba(255,255,255,.2);position:relative;overflow:hidden}
.btn-sg::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 50%);opacity:0;transition:opacity var(--tr-fast) var(--ease-out);pointer-events:none}
/* Ripple wrapper (preenchido via JS) */
.ripple-host{position:relative;overflow:hidden;isolation:isolate}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);pointer-events:none;animation:ripple .6s var(--ease-out) forwards}
.ripple-dark{background:rgba(0,122,255,.3)}
.btn-sg:hover{box-shadow:0 6px 18px rgba(0,122,255,.35),inset 0 1px 0 rgba(255,255,255,.28);transform:translateY(-1px)}
.btn-sg:hover::before{opacity:1}
.btn-sg:active{transform:translateY(0) scale(.97);transition:transform .08s ease-out}
.btn-sg:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-g{width:100%;padding:11px;background:var(--acc2);border:1px solid rgba(0,122,255,.25);border-radius:var(--radius-sm);color:#0066D6;font-size:var(--fs-sm);font-weight:700;cursor:pointer;font-family:inherit;transition:all var(--tr-fast);margin-bottom:8px}
.btn-g:hover{background:var(--acc3)}

.btn-rdanger{background:transparent;color:var(--red);border:1px solid rgba(255,59,48,.25);border-radius:var(--radius-sm);padding:11px;font-size:var(--fs-sm);font-weight:700;cursor:pointer;width:100%;font-family:inherit;transition:all var(--tr-fast)}
.btn-rdanger:hover{background:var(--red2)}

.btn-r{background:var(--red2);color:var(--red);border:1px solid rgba(255,59,48,.3);border-radius:var(--radius-xs);padding:6px 12px;font-size:var(--fs-xs);cursor:pointer;font-weight:700;font-family:inherit;transition:all var(--tr-fast)}


/* ══════════════════════════════════════════════════════════════
   ONBOARDING & WARNINGS
   ══════════════════════════════════════════════════════════════ */
.onboard{background:linear-gradient(90deg,rgba(255,230,0,.06) 0%,transparent 100%);border:1px solid rgba(255,230,0,.2);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);display:flex;align-items:center;gap:12px}
.onboard-txt{flex:1;font-size:var(--fs-sm);color:var(--txt2);line-height:1.5}
.onboard-txt strong{color:var(--txt);display:block;margin-bottom:2px;font-size:var(--fs-base)}
.expired-warn{background:rgba(255,149,0,.06);border:1px solid rgba(255,149,0,.2);border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;font-size:var(--fs-sm);color:#9C5500;display:none}


/* ══════════════════════════════════════════════════════════════
   FORM INPUTS — REFINED
   ══════════════════════════════════════════════════════════════ */
.si{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-xs);padding:8px 12px;color:var(--txt);font-size:var(--fs-xs);outline:none;font-family:inherit;transition:border var(--tr-fast),box-shadow var(--tr-fast)}
.si:focus{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.06)}
.si::placeholder{color:#CBD5E1}

.fi{width:100%;background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:10px 14px;color:var(--txt);font-size:var(--fs-sm);outline:none;font-family:inherit;transition:border var(--tr-fast),box-shadow var(--tr-fast)}
.fi:focus{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.06)}
.fi::placeholder{color:#CBD5E1}

.fi-row{display:flex;align-items:center;background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:0 10px;transition:border var(--tr-fast),box-shadow var(--tr-fast)}
.fi-row:focus-within{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.06)}
.fi-pre{color:var(--txt2);font-size:var(--fs-xs);margin-right:4px}
.fi-suf{color:var(--txt2);font-size:var(--fs-xs)}
.fi-inner{background:transparent;border:none;color:var(--txt);font-size:var(--fs-sm);outline:none;flex:1;padding:10px 0;font-family:inherit;width:100%}
.fi-inner::placeholder{color:#CBD5E1}
.fl{font-size:10px;color:var(--txt2);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}


/* ══════════════════════════════════════════════════════════════
   SKU CARDS
   ══════════════════════════════════════════════════════════════ */
.sku-card{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px}
.sku-hdr{font-weight:700;color:var(--acc);font-size:var(--fs-xs)}
.sku-nm{color:var(--txt2);font-size:var(--fs-2xs);margin:2px 0 9px}
.sku-flds{display:flex;gap:8px;align-items:flex-end}
.sku-f{flex:1}


/* ══════════════════════════════════════════════════════════════
   MODALS — PREMIUM
   ══════════════════════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(5,8,16,.5);z-index:200;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(var(--blur-2));-webkit-backdrop-filter:blur(var(--blur-2))}
.overlay.on{display:flex}
.mbox{background:rgba(255,255,255,.92);backdrop-filter:blur(var(--blur-2)) var(--sat);-webkit-backdrop-filter:blur(var(--blur-2)) var(--sat);border:1px solid var(--border);border-radius:var(--radius-lg);width:480px;max-height:88vh;overflow-y:auto;padding:22px 26px;animation:modalEnter .42s var(--ease-spring);box-shadow:var(--shadow-xl);color:var(--txt);transform-origin:center center;will-change:transform,opacity}
/* Sistema de tamanhos por classe (eliminando inline width) */
.mbox-sm{width:380px}
.mbox-md{width:560px}
.mbox-lg{width:760px}
.mbox.w{width:560px}/* alias legacy */
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){.mbox{background:#FFFFFF}}
.mhdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid rgba(0,0,0,.04)}
.mtitle{font-size:18px;font-weight:700;color:var(--txt);letter-spacing:-.016em}
.mclose{background:transparent;border:1px solid var(--border-light);border-radius:var(--radius-xs);width:30px;height:30px;cursor:pointer;color:var(--txt2);font-size:15px;display:flex;align-items:center;justify-content:center;transition:all var(--tr-normal)}
.mclose:hover{background:var(--bg-light);color:var(--txt);transform:rotate(90deg)}
.mdesc{color:var(--txt2);font-size:var(--fs-sm);margin-bottom:14px;line-height:1.6}
.ml-fld{margin-bottom:12px}


/* ══════════════════════════════════════════════════════════════
   ROAS CALCULATOR
   ══════════════════════════════════════════════════════════════ */
.roas-res{border-radius:var(--radius-sm);padding:16px;text-align:center;margin-bottom:16px;transition:all .3s}
.roas-res.empty{background:var(--red2);border:1px solid rgba(255,59,48,.15)}
.roas-res.ok{background:rgba(0,122,255,.05);border:1px solid rgba(0,122,255,.18)}
.roas-lbl{font-size:10px;color:var(--txt2);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.roas-num{font-family:'Syne',sans-serif;font-size:34px;font-weight:800;transition:color .3s}
.roas-num.empty{color:var(--red)}
.roas-num.ok{color:var(--acc)}

/* Blocos da precificação — separados, letras grandes, ZOOM ao passar o mouse */
/* Promoções: cards com breakdown de margem na frente (1 por promoção elegível) */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
@media(max-width:600px){.promo-grid{grid-template-columns:1fr}}
.promo-card{background:var(--surf-1);border:1px solid var(--border);border-radius:14px;padding:14px 16px;cursor:pointer;transition:box-shadow .18s var(--ease-out),border-color .18s var(--ease-out),transform .18s var(--ease-out)}
.promo-card:hover{box-shadow:var(--shadow-md,0 4px 14px rgba(0,0,0,.08));border-color:var(--acc-soft);transform:translateY(-1px)}
.promo-brk{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:12px}
.promo-brk .k{color:var(--txt2)}.promo-brk .v{font-weight:600;font-variant-numeric:tabular-nums}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.calc-block{background:var(--surf-1);border:1px solid var(--border);border-radius:14px;padding:14px 16px;transition:box-shadow .18s var(--ease-out),border-color .18s var(--ease-out),transform .18s var(--ease-out);cursor:default;position:relative}
/* hover sóbrio (sistema bancário): elevação sutil, sem "pulo" de escala */
.calc-block:hover{transform:translateY(-1px);box-shadow:var(--shadow-md,0 4px 14px rgba(0,0,0,.08));z-index:3;border-color:var(--acc-soft)}
.calc-block.cb-main{grid-column:1/-1;background:rgba(0,122,255,.06);border-color:rgba(0,122,255,.2);text-align:center;padding:18px}
.calc-block.cb-bad{background:var(--red2);border-color:rgba(255,59,48,.2)}
.cb-lbl{font-size:10px;color:var(--txt2);font-weight:600;text-transform:uppercase;letter-spacing:.9px}
/* Números em IBM Plex Sans (grotesk de autoridade corporativa): dígitos tabulares firmes,
   peso 600/700 — substitui a Syne display (geométrica "bolha", certa pro logo, errada pra dinheiro) */
.cb-val{font-family:'IBM Plex Sans','SF Pro Display','Segoe UI',sans-serif;font-size:22px;font-weight:600;letter-spacing:-.012em;margin-top:6px;line-height:1.05;font-variant-numeric:tabular-nums lining-nums}
.calc-block.cb-main .cb-val{font-size:34px;font-weight:700;margin-top:8px;letter-spacing:-.018em}
.cb-sub{font-size:11px;color:var(--txt2);margin-top:5px;font-weight:500}
.cb-val.pos{color:var(--acc)}.cb-val.neg{color:var(--red)}.cb-val.cost{color:var(--red)}


/* ══════════════════════════════════════════════════════════════
   CHAT & WHATSAPP
   ══════════════════════════════════════════════════════════════ */
.chat-area{background:var(--bg-light);border-radius:var(--radius-sm);padding:12px;min-height:170px;max-height:230px;overflow-y:auto;margin-bottom:10px;display:flex;flex-direction:column;gap:7px}
.cm{display:flex;flex-direction:column}
.cm.user{align-items:flex-end}
.cm.bot{align-items:flex-start}
.cb{padding:7px 11px;border-radius:var(--radius-sm);font-size:var(--fs-xs);max-width:82%;line-height:1.5}
.cm.user .cb{background:var(--acc2);color:#0066D6}
.cm.bot .cb{background:var(--border-light);color:var(--txt)}
.wa-num{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--bg-light);border-radius:var(--radius-xs);border:1px solid var(--border-light);margin-bottom:6px}
.wa-num span{flex:1;font-size:var(--fs-sm);color:var(--txt)}
.wa-rm{background:transparent;border:none;color:var(--txt2);cursor:pointer;font-size:15px;padding:0;transition:color var(--tr-fast)}
.wa-rm:hover{color:var(--red)}


/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════ */
.empty-st{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-10);color:var(--txt2);gap:7px}
.empty-st .eico{font-size:32px;animation:float 3s ease-in-out infinite}
.empty-st .etxt{font-size:var(--fs-base);font-weight:600;color:var(--txt)}
.empty-st .esub{font-size:var(--fs-xs);color:var(--txt3)}


/* ══════════════════════════════════════════════════════════════
   LOAD MORE
   ══════════════════════════════════════════════════════════════ */
.load-more{width:100%;padding:10px;background:var(--acc2);border:1px solid rgba(0,122,255,.2);border-radius:var(--radius-sm);color:#0066D6;font-size:var(--fs-xs);font-weight:700;cursor:pointer;font-family:inherit;transition:all var(--tr-fast);margin-top:10px;text-align:center}
.load-more:hover{background:var(--acc3)}
.load-more:disabled{opacity:.5;cursor:not-allowed}


/* ══════════════════════════════════════════════════════════════
   REPUTATION BAR
   ══════════════════════════════════════════════════════════════ */
.rep-bar{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;margin-top:4px}
.rep-seg{flex:1;transition:background .3s}


/* ══════════════════════════════════════════════════════════════
   DRE (Demonstracao do Resultado)
   ══════════════════════════════════════════════════════════════ */
.dre-section{background:var(--bg-white);border-radius:var(--radius);padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-4);box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.04);transition:all var(--tr-normal)}
.dre-section:hover{box-shadow:var(--shadow-md)}
.dre-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.04);color:var(--txt);font-size:var(--fs-base)}
.dre-row:last-child{border-bottom:none}
.dre-total{font-weight:800;font-size:var(--fs-lg)}
.dre-bar{height:6px;border-radius:3px;background:var(--border-light);margin-top:6px}
.dre-bar-fill{height:100%;border-radius:3px;background:var(--acc);transition:width .5s ease}


/* ══════════════════════════════════════════════════════════════
   CASH FLOW CALENDAR
   ══════════════════════════════════════════════════════════════ */
.cashflow-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{padding:8px;border-radius:var(--radius-sm);background:var(--bg-white);border:1px solid rgba(0,0,0,.04);text-align:center;min-height:70px;transition:all var(--tr-fast)}
.cal-day:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.cal-day.income{border-left:3px solid var(--acc)}
.cal-day.expense{border-left:3px solid var(--red)}


/* ══════════════════════════════════════════════════════════════
   STOCK HEALTH & PRODUCT ROWS
   ══════════════════════════════════════════════════════════════ */
.prod-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.04);transition:background var(--tr-fast)}
.prod-row:last-child{border-bottom:none}
.prod-row:hover{background:rgba(0,122,255,.02)}
.prod-photo{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--bg-light);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden}
.stock-bar{height:8px;border-radius:4px;background:var(--border-light);overflow:hidden;position:relative}
.stock-bar-fill{height:100%;border-radius:4px;transition:width 1.4s var(--ease-out);position:relative;overflow:hidden}
/* glowSweep roda 2x e para (era infinite: ~120 barras no Estoque = GPU fritando pra sempre) */
.stock-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:glowSweep 2.2s var(--ease-out) 2}
/* Score circular animado (SVG circle stroke-dasharray) */
svg circle[data-progress]{transition:stroke-dashoffset 1.4s var(--ease-out)}
/* DRE bars com fill animation */
.dre-bar{position:relative;overflow:hidden}
.dre-bar > *{transition:width 1.2s var(--ease-out)}


/* ══════════════════════════════════════════════════════════════
   ONBOARDING TOUR
   ══════════════════════════════════════════════════════════════ */
.tour-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:900;display:none;backdrop-filter:blur(4px)}
.tour-overlay.on{display:block}
.tour-tooltip{position:absolute;background:var(--bg-white);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow-xl);max-width:300px;z-index:901;animation:fadeInUp var(--tr-normal) ease}
.tour-tooltip::before{content:'';position:absolute;width:12px;height:12px;background:var(--bg-white);transform:rotate(45deg)}


/* ══════════════════════════════════════════════════════════════
   DARK MODE — WARMER SLATE PALETTE
   body.theme-dark overrides. Sidebar stays dark in both modes.
   ══════════════════════════════════════════════════════════════ */
html.theme-dark{background-color:#1C1C1E;background-image:var(--bg-mesh-strong)}
body.theme-dark{
  background-color:#1C1C1E;background-image:var(--bg-mesh-strong);color:#FFFFFF;
  --bg-base:#1C1C1E;--bg-light:#1C1C1E;--bg-white:#2C2C2E;
  --border-light:rgba(255,255,255,.1);--border:rgba(255,255,255,.1);--border-strong:rgba(255,255,255,.16);
  --txt:#FFFFFF;--txt2:rgba(235,235,245,.6);--txt3:rgba(235,235,245,.3);
  --surf-1:rgba(40,40,42,.62);--surf-2:rgba(58,58,60,.55);--surf-3:rgba(28,28,30,.5);
  /* Apple Dark accents (slightly more saturated than light counterparts) */
  --acc:#0A84FF;--acc-hover:#409CFF;--acc-soft:rgba(10,132,255,.18);
  --acc-glow:0 0 0 1px rgba(10,132,255,.22),0 0 28px rgba(10,132,255,.22);
  --acc-glow-strong:0 0 0 1px rgba(10,132,255,.32),0 0 40px rgba(10,132,255,.32);
  --red:#FF453A;--red-soft:rgba(255,69,58,.18);
  --yel:#FFD60A;--yel-soft:rgba(255,214,10,.18);
  --blue:#5E5CE6;--blue-soft:rgba(94,92,230,.2);
  --green:#30D158;--green-soft:rgba(48,209,88,.18);
  --orange:#FF9F0A;--purple:#BF5AF2;--pink:#FF375F;--indigo:#7D7AFF;--teal:#64D2FF;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 2px 6px rgba(0,0,0,.4);
  --shadow-md:0 8px 16px rgba(0,0,0,.45);
  --shadow-lg:0 16px 32px rgba(0,0,0,.5);
  --shadow-xl:0 32px 64px rgba(0,0,0,.6);
  --shadow:var(--shadow-sm);
  --red2:rgba(255,69,58,.1);--yel2:rgba(255,214,10,.1);--blu2:rgba(94,92,230,.1)
}
/* color em dark já é setado acima, mas precisa cobrir o color de elementos filhos com texto preto residual */
body.theme-dark .card,
body.theme-dark .kpi,
body.theme-dark .ad-card,
body.theme-dark .q-card,
body.theme-dark .dre-section{color:#FFFFFF}

body.theme-dark ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)}
body.theme-dark ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}
body.theme-dark ::selection{background:rgba(0,122,255,.3)}

/* Header glass — dark (Apple-style) */
body.theme-dark #hdr{background:rgba(28,28,30,.62);backdrop-filter:blur(var(--blur-3)) var(--sat);-webkit-backdrop-filter:blur(var(--blur-3)) var(--sat);border-bottom-color:rgba(255,255,255,.08)}
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){body.theme-dark #hdr{background:#1C1C1E}}
body.theme-dark #content{background:transparent}

/* Sidebar dark glass — Apple sidebar */
body.theme-dark #sidebar{background:rgba(28,28,30,.62);border-right-color:rgba(255,255,255,.08)}
body.theme-dark .sb-head{border-bottom-color:rgba(255,255,255,.08)}
body.theme-dark .sb-bottom{border-top-color:rgba(255,255,255,.08)}
body.theme-dark .sb-item:hover{background:rgba(255,255,255,.05)}
body.theme-dark .sb-item.active{background:rgba(255,255,255,.08)}
body.theme-dark .sb-user{background:rgba(255,255,255,.04)}
body.theme-dark .sb-user:hover{background:rgba(255,255,255,.07)}

/* Cards (glass leve, Apple secondary background) */
body.theme-dark .card,
body.theme-dark .kpi,
body.theme-dark .dre-section,
body.theme-dark .ad-card,
body.theme-dark .q-card{background:rgba(58,58,60,.5);backdrop-filter:blur(var(--blur-1));-webkit-backdrop-filter:blur(var(--blur-1));border-color:rgba(255,255,255,.08)}
body.theme-dark .card:hover,
body.theme-dark .kpi:hover,
body.theme-dark .ad-card:hover{border-color:rgba(10,132,255,.28);background:rgba(72,72,74,.55)}
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){body.theme-dark .card,body.theme-dark .kpi,body.theme-dark .dre-section,body.theme-dark .ad-card,body.theme-dark .q-card{background:#2C2C2E}}

/* Modal — glass forte */
body.theme-dark .mbox{background:rgba(44,44,46,.78);backdrop-filter:blur(var(--blur-3)) var(--sat);-webkit-backdrop-filter:blur(var(--blur-3)) var(--sat);border-color:rgba(255,255,255,.1);color:#FFFFFF}
@supports not ((backdrop-filter:blur(0)) or (-webkit-backdrop-filter:blur(0))){body.theme-dark .mbox{background:#2C2C2E}}
/* Dark mode remapeado pros tokens Apple (antes: slate legado #0F172A/#334155/#94A3B8
   colado nos cinzas quentes = dois apps sobrepostos. Auditoria 2026-07-11). */
body.theme-dark .mhdr{border-bottom-color:var(--border)}
body.theme-dark .mtitle{color:#FFFFFF}
body.theme-dark .mclose{border-color:var(--border);color:var(--txt2)}
body.theme-dark .mclose:hover{background:var(--surf-2);color:#FFFFFF}
body.theme-dark .mdesc{color:var(--txt2)}

/* Tables */
body.theme-dark th{background:rgba(44,44,46,.92);color:var(--txt2);border-color:var(--border)}
body.theme-dark td{border-color:rgba(255,255,255,.06);color:#FFFFFF}
body.theme-dark .trow:nth-child(even) td{background:rgba(255,255,255,.02)}
body.theme-dark .trow:hover td{background:var(--acc-soft)}

/* Period/Filter */
body.theme-dark .pb{background:#2C2C2E;border-color:var(--border);color:var(--txt2)}
body.theme-dark .pb:hover{background:#3A3A3C;color:#FFFFFF}
body.theme-dark .pb.active{background:var(--grad-acc);color:#fff;border-color:transparent}
body.theme-dark .fb{border-color:var(--border);color:var(--txt2)}
body.theme-dark .eb{border-color:var(--border);color:var(--txt2)}
body.theme-dark .tb{border-color:var(--border);color:var(--txt2)}

/* Inputs (recessed: 1 degrau mais escuro que o card #2C2C2E) */
body.theme-dark .si,
body.theme-dark .fi{background:#1C1C1E;border-color:var(--border);color:#FFFFFF}
body.theme-dark .fi-row{background:#1C1C1E;border-color:var(--border)}
body.theme-dark .fi-inner{color:#FFFFFF}
body.theme-dark .q-inp{background:#1C1C1E;border-color:var(--border);color:#FFFFFF}
body.theme-dark input[type="checkbox"]{accent-color:var(--acc)}
body.theme-dark input[type="date"]{background:#1C1C1E;border-color:var(--border);color:#FFFFFF}
body.theme-dark select{background:#1C1C1E;border-color:var(--border);color:#FFFFFF}

/* Chat */
body.theme-dark .chat-area{background:#1C1C1E}
body.theme-dark .wa-num{background:#1C1C1E;border-color:var(--border)}
body.theme-dark .wa-num span{color:#FFFFFF}

/* Icon buttons */
body.theme-dark .ic-btn{border-color:var(--border);color:var(--txt2)}
body.theme-dark .ic-btn:hover{background:var(--surf-2);color:#FFFFFF}

/* Header ML — mantém verde semântico "conectado" (era sobrescrito pra amarelo sem motivo) */
body.theme-dark .hdr-ml-off{background:rgba(255,59,48,.1)}
body.theme-dark .sync-wrap{color:var(--txt2)}

/* Onboard & warnings */
body.theme-dark .onboard{background:linear-gradient(90deg,rgba(255,230,0,.07) 0%,transparent 100%)}
body.theme-dark .expired-warn{color:var(--yel)}

/* Skeleton */
body.theme-dark .skel{background:linear-gradient(90deg,#334155 25%,#475569 50%,#334155 75%)}

/* Pills */
body.theme-dark .p-g{background:rgba(48,209,88,.18);color:#7AF299}
body.theme-dark .p-r{background:rgba(255,69,58,.18);color:#FF7873}
body.theme-dark .p-b{background:rgba(10,132,255,.18);color:var(--acc)}
body.theme-dark .p-y{background:rgba(255,214,10,.18);color:#FFE066}
body.theme-dark .p-gr{background:rgba(120,120,128,.2);color:rgba(235,235,245,.6)}

/* Calendar */
body.theme-dark .cal-day{background:#1E293B;border-color:#334155}

/* Product rows */
body.theme-dark .prod-row{border-color:#334155}
body.theme-dark .prod-photo{background:#0F172A}
body.theme-dark .stock-bar{background:#334155}
body.theme-dark .dre-bar{background:#334155}
body.theme-dark .dre-row{color:#FFFFFF;border-color:#334155}

/* Load more / buttons */
body.theme-dark .load-more{color:var(--acc)}
body.theme-dark .btn-g{color:var(--acc)}
body.theme-dark .sku-card{background:#1E293B;border-color:#334155}
body.theme-dark .log-bg{background:#334155}
body.theme-dark .prow:hover{background:rgba(255,255,255,.03)}
body.theme-dark .ad-img{background:#0F172A}

/* Toasts dark */
body.theme-dark .toast.success{background:rgba(44,44,46,.78);border-color:rgba(48,209,88,.35);color:#7AF299}
body.theme-dark .toast.error{background:rgba(44,44,46,.78);border-color:rgba(255,69,58,.35);color:#FF7873}
body.theme-dark .toast.info{background:rgba(44,44,46,.78);border-color:rgba(10,132,255,.35);color:#5BB0FF}
body.theme-dark .toast.warning{background:rgba(44,44,46,.78);border-color:rgba(255,159,10,.35);color:#FFC061}

/* Text overrides */
body.theme-dark .fl{color:#94A3B8}
body.theme-dark .empty-st{color:#94A3B8}
body.theme-dark .empty-st .etxt{color:#FFFFFF}
body.theme-dark .oh h3{color:#FFFFFF}
body.theme-dark .pg-title{color:#FFFFFF}
body.theme-dark .pg-sub{color:#94A3B8}
body.theme-dark .h-val{color:#FFFFFF}
body.theme-dark .ms-val{color:#FFFFFF}
body.theme-dark .ct{color:#FFFFFF}
body.theme-dark .kpi-val{color:#FFFFFF}
body.theme-dark .ad-title{color:#FFFFFF}
body.theme-dark .q-text{color:#FFFFFF}
body.theme-dark .q-answered{background:rgba(0,122,255,.05);border-color:rgba(0,122,255,.15)}

/* Tour dark */
body.theme-dark .tour-tooltip{background:#1E293B;color:#FFFFFF;border:1px solid #334155}
body.theme-dark .tour-tooltip::before{background:#1E293B}

/* Hero dark */
body.theme-dark .hero{background:linear-gradient(135deg,rgba(0,122,255,.06),rgba(0,122,255,.02))}


/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */
.theme-toggle{background:rgba(120,120,128,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:9px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt2);font-size:16px;transition:all var(--tr-normal);box-shadow:0 1px 2px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.4)}
.theme-toggle:hover{background:rgba(120,120,128,.14);color:var(--txt);transform:translateY(-0.5px)}
body.theme-dark .theme-toggle{border-color:#334155;color:#94A3B8}
body.theme-dark .theme-toggle:hover{background:#334155;color:#FFFFFF}


/* ══════════════════════════════════════════════════════════════
   DISABLED & ACTIVE STATES
   ══════════════════════════════════════════════════════════════ */
.btn-g:disabled,.btn-rdanger:disabled,.btn-r:disabled,.tb:disabled{opacity:.5;cursor:not-allowed}
.pb:active,.fb:active,.eb:active,.ic-btn:active,.theme-toggle:active{transform:scale(.98)}
.btn-sg:active,.btn-g:active,.btn-rdanger:active,.btn-auth:active{transform:scale(.98)}


/* ══════════════════════════════════════════════════════════════
   FOCUS-VISIBLE — KEYBOARD NAV
   ══════════════════════════════════════════════════════════════ */
/* Apple-style focus ring (3px translucent + 1px solid) */
.sb-item:focus-visible,.pb:focus-visible,.fb:focus-visible,.eb:focus-visible,.ic-btn:focus-visible,.theme-toggle:focus-visible,.btn-sg:focus-visible,.btn-g:focus-visible,.btn-auth:focus-visible,.mclose:focus-visible,.btn-r:focus-visible,.btn-rdanger:focus-visible,.tb:focus-visible,.load-more:focus-visible,a:focus-visible,button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,122,255,.22),0 0 0 1px var(--acc)}
.fi:focus-visible,.si:focus-visible,.inp:focus-visible,.fi-inner:focus-visible,.q-inp:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--acc)!important;box-shadow:0 0 0 4px rgba(0,122,255,.18)}
/* Remove outline padrão browser */
*:focus{outline:none}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .skel{animation:none;background:var(--border-light)}
  .card:hover,.kpi:hover,.ad-card:hover,.cal-day:hover{transform:none!important}
}


/* ── Tooltip custom on hover (data-tip, não title: senão o tooltip NATIVO do browser
      aparecia por cima do custom depois de ~1s = texto duplicado). Migração title→data-tip
      em _migrateTips() no JS. ── */
[data-tip]{position:relative;cursor:help}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg-dark);color:var(--txt-w);padding:10px 14px;border-radius:var(--radius-sm);font-size:11px;line-height:1.5;font-weight:400;white-space:normal;width:260px;box-shadow:var(--shadow-lg);z-index:100;pointer-events:none;animation:fadeIn .15s ease}
[data-tip]:hover::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--bg-dark);z-index:101}

/* ══════════════════════════════════════════════════════════════
   PRINT CSS
   ══════════════════════════════════════════════════════════════ */
@media print{
  body{background:#fff!important;color:#0F172A!important;overflow:visible!important}
  #sidebar,#hdr,.toast-container,.ml-overlay,.overlay,.onboard,.pb-bar,.tctrl,.ic-btn,.theme-toggle,.sb-bottom,.load-more,button{display:none!important}
  #screen-dash{position:static!important;display:block!important}
  #main{display:block!important}
  #content{overflow:visible!important;padding:0!important;background:#fff!important}
  .card,.kpi,.dre-section{box-shadow:none!important;border:1px solid #ddd!important;break-inside:avoid;page-break-inside:avoid}
  .kpi-grid{grid-template-columns:repeat(4,1fr)!important}
  .row2{grid-template-columns:1fr!important}
  .pg-title{font-size:18px!important}
  canvas{max-height:200px!important}
  a{text-decoration:none!important;color:inherit!important}
  .hero{gap:16px!important}
  @page{margin:1.5cm}
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET LANDSCAPE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  #sidebar{width:56px}
  .sb-head .sb-logo-txt,.sb-head .sb-ml-name,.sb-head .sb-uname,.sb-nav .sb-sec,
  .sb-item span:not(.sb-icon),.sb-bottom .sb-item span:not(.sb-icon),.sb-ver,.pdrop{display:none!important}
  .sb-item{justify-content:center;padding:10px 0;border-left:none!important}
  .sb-icon{width:auto}
  .sb-head{padding:12px 8px}
  .sb-ml,.sb-user{justify-content:center;padding:6px}
  .sb-avatar{margin:0}
  .sb-badge{position:absolute;top:-2px;right:-2px;margin:0}
  .sb-item{position:relative}
  .row2{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .mbox,.mbox.w{width:90vw;max-width:480px}
  .ml-modal{width:90vw;max-width:500px}
  .ads-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .cashflow-cal{grid-template-columns:repeat(7,1fr);font-size:10px}
  .cal-day{padding:4px;min-height:50px}
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET PORTRAIT
   ══════════════════════════════════════════════════════════════ */
/* Hamburguer e backdrop: ocultos no desktop, viram nav no mobile */
#hamb{display:none}
#sb-backdrop{display:none}
@media(max-width:768px){
  /* Sidebar vira DRAWER: escondido fora da tela, desliza ao abrir (antes sumia sem substituto) */
  #sidebar{position:fixed;top:0;left:0;bottom:0;z-index:60;width:260px;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:2px 0 24px rgba(0,0,0,.28)}
  body.sb-open #sidebar{transform:translateX(0)}
  #sidebar .sb-logo-txt,#sidebar .sb-item{white-space:nowrap}
  #sb-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .26s}
  body.sb-open #sb-backdrop{opacity:1;pointer-events:auto}
  #hamb{display:inline-flex;align-items:center;justify-content:center;margin-right:8px}
  #hdr{padding:0 var(--sp-3)}
  #content{padding:var(--sp-3) var(--sp-4)}
  .hero{flex-direction:column;gap:12px;align-items:flex-start}
  .h-div{display:none}
  .h-val{font-size:24px}
  .ms{text-align:left}
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:var(--sp-2)}
  .kpi-val{font-size:16px}
  .pg-title{font-size:18px}
  .h-val{letter-spacing:-.018em}
  .row2{grid-template-columns:1fr!important}
  .pb-bar{gap:3px}
  .pb{padding:4px 10px;font-size:var(--fs-2xs)}
  .auth-shell{flex-direction:column}
  .auth-left{width:100%;padding:20px;min-height:auto}
  .auth-left .auth-tagline h1{font-size:20px}
  .auth-right{padding:20px}
  .prod-row{flex-wrap:wrap;gap:8px}
  .dre-section{padding:14px 16px}
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:480px){
  #hdr{height:48px;gap:4px}
  .hdr-ml-on,.hdr-ml-off{font-size:10px;padding:3px 8px}
  .sync-wrap{display:none}
  #content{padding:var(--sp-3)}
  .kpi-grid{grid-template-columns:1fr!important}
  .h-val{font-size:22px}
  .pg-title{font-size:18px}
  .hero{padding:var(--sp-4) var(--sp-3)}
  .pb{padding:4px 8px;font-size:10px}
  .pb-bar{flex-wrap:wrap}
  .card{padding:var(--sp-4)}
  .kpi{padding:var(--sp-3) var(--sp-4)}
  .ms{flex:1 1 100%;text-align:left}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:var(--sp-1)}
  .kpi{padding:var(--sp-2) var(--sp-3)}
  .kpi-lbl{font-size:8px}
  .kpi-val{font-size:14px}
  .card{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm)}
  .oh{flex-direction:column;align-items:flex-start}
  .tctrl{width:100%;flex-wrap:wrap}
  .si{width:100%!important}
  .hero{gap:8px;padding:var(--sp-5) var(--sp-4)}
  .h-val{font-size:20px}
  .h-lbl{font-size:9px}
  .ms-val{font-size:14px}
  .pb{padding:4px 8px;font-size:10px}
  table{font-size:10px}
  th,td{padding:6px 8px}
  .mbox,.mbox.w,.ml-modal{width:95vw;padding:16px;border-radius:var(--radius)}
  .ads-grid{grid-template-columns:1fr}
  .cashflow-cal{font-size:9px}
  .cal-day{padding:3px;min-height:40px}
  .row2{grid-template-columns:1fr}
  .auth-left{display:none}
  .auth-right{padding:16px}
  .auth-box h2{font-size:18px}
}

/* ── Fase 3: transicao de pagina instantanea (substitui o setTimeout de 150ms) ── */
.pg-enter{animation:pgEnter .22s cubic-bezier(.25,.46,.45,.94)}
@keyframes pgEnter{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── Fase 3: feedback na troca de periodo — numeros esmaecem enquanto carrega ── */
.data-stale .h-val,.data-stale .kpi-val,.data-stale .ms-val{opacity:.35;transition:opacity .2s ease;filter:saturate(.6)}

@media (prefers-reduced-motion:reduce){
  .pg-enter{animation:none}
}