/* ══════════════════════════════════════════
   TOKENS & RESET
══════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#080B12; --s1:#0E1220; --s2:#131829; --s3:#1A2035;
  --bord:#1E2640; --bord2:#252E4A;
  --v:#7C6DFA; --v2:#9D91FB; --v3:#C4BEFE;
  --b:#3B9EFF; --b2:#60B4FF;
  --g:#00D9A3; --g2:#34EAB9;
  --p:#F471B5; --p2:#F9A8D4;
  --y:#F5A623; --y2:#FCC05C;
  --r:#FF4D6A; --r2:#FF7B91;
  --c:#22D3EE;
  --txt:#E8EDF8; --txt2:#9BA8C5; --txt3:#5C6B8A;
  --w:#FFFFFF;
  --font-head:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

/* ── LIGHT MODE ────────────────────────────────────────────── */
html[data-theme='light']{
  --bg:#F5F7FB; --s1:#FFFFFF; --s2:#F0F3F9; --s3:#E6EBF3;
  --bord:#E2E8F0; --bord2:#CBD5E1;
  --v:#6D5BFA; --b:#2D7DD9; --g:#00B488; --p:#E0578D;
  --y:#D88800; --r:#E13B58; --c:#0DA8C7;
  --txt:#0F172A; --txt2:#475569; --txt3:#94A3B8;
}
html[data-theme='light'] body{background:#F5F7FB}
html[data-theme='light'] .kpi-glow{opacity:.35}
html[data-theme='light'] aside{box-shadow:1px 0 0 var(--bord)}
html[data-theme='light'] .score-hero{box-shadow:0 1px 3px rgba(15,23,42,.06)}
html[data-theme='light'] #fab-entry{box-shadow:0 4px 20px rgba(0,180,136,.35)}

/* ── THEME TOGGLE (sol/lua) ────────────────────────────────── */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;border:1px solid var(--bord);
  background:var(--s2);cursor:pointer;color:var(--txt2);
  transition:all .2s ease;flex-shrink:0;
}
.theme-toggle:hover{background:var(--s3);color:var(--txt);border-color:var(--bord2)}
.theme-toggle:active{transform:scale(.95)}
.theme-toggle svg{width:16px;height:16px;transition:transform .3s ease}
.theme-toggle:hover svg{transform:rotate(15deg)}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
html[data-theme='light'] .theme-toggle{border-color:var(--bord);color:var(--y)}
html[data-theme='light'] .theme-toggle .icon-sun{display:block}
html[data-theme='light'] .theme-toggle .icon-moon{display:none}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-body);background:var(--bg);color:var(--txt);font-size:13px}

/* ══════════════════════════════════════════
   TELA DE UPLOAD (LANDING)
══════════════════════════════════════════ */
#screen-upload{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124,109,250,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(59,158,255,.1) 0%, transparent 60%);
}
/* animated grid bg */
#screen-upload::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(124,109,250,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,109,250,.04) 1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;
}
/* blurred dashboard preview behind */
#dash-preview-blur{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;filter:blur(8px);opacity:.35;
  transform:scale(1.05);
}
.upload-logo{font-family:var(--font-head);font-size:42px;font-weight:800;
  background:linear-gradient(135deg,#00D9A3,#22D3EE);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  display:flex;align-items:center;gap:16px;margin-bottom:8px;
  animation:fadeUp .6s ease both}
.fluxa-icon{flex-shrink:0;width:52px;height:52px;border-radius:14px;
  background:linear-gradient(145deg,#0D1B2A,#142233);
  border:1px solid rgba(0,217,163,.25);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 24px rgba(0,217,163,.15)}
.upload-sub{color:var(--txt2);font-size:16px;margin-bottom:40px;
  animation:fadeUp .6s .1s ease both}
.drop-zone{
  width:560px;max-width:90vw;
  background:rgba(19,24,41,.7);
  border:2px dashed var(--v);border-radius:20px;
  padding:48px 40px;text-align:center;cursor:pointer;
  transition:all .25s;position:relative;
  backdrop-filter:blur(20px);
  animation:fadeUp .6s .2s ease both;
}
.drop-zone:hover,.drop-zone.drag{
  border-color:var(--v2);background:rgba(124,109,250,.1);
  box-shadow:0 0 40px rgba(124,109,250,.2);
}
.drop-icon{font-size:56px;margin-bottom:16px;display:block;
  filter:drop-shadow(0 0 20px rgba(59,158,255,.6))}
.drop-title{font-family:var(--font-head);font-size:20px;font-weight:700;margin-bottom:8px}
.drop-hint{color:var(--txt2);font-size:13px}
.drop-input{position:absolute;inset:0;opacity:0;cursor:pointer}
.demo-btn{
  margin-top:20px;padding:13px 32px;
  background:transparent;border:1px solid var(--bord2);
  color:var(--txt2);border-radius:12px;cursor:pointer;
  font-family:var(--font-body);font-size:13px;
  transition:all .2s;
  animation:fadeUp .6s .3s ease both;
}
.demo-btn:hover{border-color:var(--v);color:var(--v2);background:rgba(124,109,250,.08)}
.upload-note{margin-top:16px;font-size:11px;color:var(--txt3);
  animation:fadeUp .6s .4s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* progress bar */
.upload-progress{margin-top:20px;display:none;width:100%;animation:fadeUp .3s ease both}
.prog-bar{height:4px;background:var(--bord2);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--v),var(--b));width:0;
  border-radius:2px;transition:width .3s ease}

/* ══════════════════════════════════════════
   LAYOUT PRINCIPAL
══════════════════════════════════════════ */
#app{display:none;height:100vh;flex-direction:row}
#app.show{display:flex}

/* SIDEBAR */
aside{
  width:220px;min-height:100vh;background:var(--s1);
  border-right:1px solid var(--bord);
  display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;
}
.logo{padding:20px 18px 18px;border-bottom:1px solid var(--bord);
  display:flex;align-items:center;gap:10px}
.logo-mark{width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--v),var(--b));
  display:flex;align-items:center;justify-content:center;font-size:16px}
.logo-text{font-family:var(--font-head);font-size:13px;font-weight:700;line-height:1.3}
.logo-ver{font-size:9px;color:var(--txt3);margin-top:1px}
/* upload new file btn */
.new-file-btn{
  margin:12px 14px;padding:8px 14px;
  background:rgba(124,109,250,.12);border:1px solid rgba(124,109,250,.3);
  border-radius:10px;color:var(--v2);cursor:pointer;font-size:11px;font-weight:600;
  text-align:center;transition:all .2s;
}
.new-file-btn:hover{background:rgba(124,109,250,.2)}

.nav-section{padding:10px 12px 4px}
.nav-lbl{font-size:9px;font-weight:700;color:var(--txt3);letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:4px;padding-left:8px}
.nav-btn{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:transparent;border:none;border-left:2px solid transparent;
  color:var(--txt2);padding:7px 10px;border-radius:0 9px 9px 0;cursor:pointer;
  font-family:var(--font-body);font-size:12px;font-weight:500;
  margin-bottom:1px;transition:all .15s;
}
.nav-btn:hover{color:var(--txt);background:rgba(124,109,250,.07)}
.nav-btn.on{background:linear-gradient(90deg,rgba(124,109,250,.18),transparent);
  border-left-color:var(--v);color:var(--w);font-weight:700}
.nav-icon{font-size:13px;width:16px;text-align:center;flex-shrink:0}
.ai-badge{font-size:8px;background:linear-gradient(90deg,var(--v),var(--b));
  color:#fff;padding:1px 5px;border-radius:4px;margin-left:auto;font-weight:700}
/* Phase 6 — Alert notification badge */
.alert-badge{font-size:8px;background:#FF4D6A;color:#fff;padding:1px 5px;
  border-radius:10px;font-weight:700;min-width:16px;text-align:center;line-height:1.5}
.nav-btn .alert-badge{margin-left:auto}
.bnav-btn{position:relative}
.bnav-btn .alert-badge{position:absolute;top:1px;right:1px;font-size:7px;padding:1px 4px}

/* Filtros mês/ano */
.filter-box{padding:10px 14px;border-top:1px solid var(--bord);margin-top:auto}
.filter-lbl{font-size:9px;font-weight:700;color:var(--txt3);letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:6px}
.mo-btn,.yr-btn{
  display:block;width:100%;text-align:left;background:transparent;
  border:none;color:var(--txt2);padding:5px 10px;border-radius:8px;
  cursor:pointer;font-family:var(--font-body);font-size:11px;
  margin-bottom:1px;transition:all .15s;
}
.mo-btn:hover{color:var(--txt)}
.mo-btn.on{background:linear-gradient(90deg,var(--v),var(--b));color:#fff;font-weight:700;font-size:11px}
.yr-btn.on{color:var(--v2);font-weight:800}

/* ── MAIN ── */
main{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.page{display:none;padding:22px 24px 32px;flex:1}
.page.on{display:block}

/* Header */
.pg-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.pg-hdr h1{font-family:var(--font-head);font-size:22px;font-weight:700;letter-spacing:-.3px}
.pg-hdr p{font-size:11px;color:var(--txt2);margin-top:3px}
.saldo-pill{padding:7px 14px;border-radius:10px;font-weight:700;font-size:13px;white-space:nowrap}

/* ── KPI ── */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.kpi{background:var(--s2);border:1px solid var(--bord);border-radius:13px;
  padding:14px 15px;position:relative;overflow:hidden;transition:border-color .2s}
.kpi:hover{border-color:var(--bord2)}
.kpi-glow{position:absolute;top:0;right:0;width:50px;height:50px;border-radius:0 13px 0 0;opacity:.6}
.kpi-ico{margin-bottom:8px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.03)}
.kpi-ico svg{width:18px;height:18px}
html[data-theme='light'] .kpi-ico{background:rgba(15,23,42,.04)}
.kpi-lbl{color:var(--txt2);font-size:8px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;margin-bottom:2px}
.kpi-val{font-size:17px;font-weight:700;letter-spacing:-.5px;font-family:var(--font-head)}
.kpi-trend{font-size:10px;margin-top:3px;font-weight:600}

/* ── METAS ── */
.metas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.meta-card{background:var(--s2);border:1px solid var(--bord);border-radius:13px;
  padding:16px;display:flex;justify-content:space-between;align-items:center;transition:all .3s}
.meta-card.over{border-color:rgba(255,77,106,.4);box-shadow:0 0 20px rgba(255,77,106,.1)}
.meta-lbl{font-size:9px;color:var(--txt2);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.meta-val{font-size:19px;font-weight:700;margin-top:3px;font-family:var(--font-head)}
.meta-sub{font-size:10px;color:var(--txt2);margin-top:2px}
.meta-alert{margin-top:7px;padding:3px 9px;border-radius:20px;font-size:9px;
  font-weight:700;text-align:center;display:none;background:rgba(255,77,106,.15);color:var(--r)}
.meta-card.over .meta-alert{display:block}

/* ── CHARTS ── */
.c2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.c3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px}
.cc{background:var(--s2);border:1px solid var(--bord);border-radius:13px;padding:18px;position:relative}
.cc-title{font-family:var(--font-head);font-size:13px;font-weight:700;margin-bottom:2px}
.cc-sub{font-size:10px;color:var(--txt2);margin-bottom:12px}
.full-cc{grid-column:1/-1}

/* ── BAR ROWS ── */
.br{margin-bottom:10px}
.br-head{display:flex;justify-content:space-between;margin-bottom:4px}
.br-name{font-size:11px;color:var(--txt2)}
.br-val{font-size:11px;font-weight:700}
.br-track{background:var(--bord);border-radius:4px;height:5px;overflow:hidden}
.br-fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1)}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:11px}
th{padding:7px 10px;font-size:8px;font-weight:700;color:var(--txt3);letter-spacing:.8px;
  text-transform:uppercase;border-bottom:1px solid var(--bord);text-align:right}
th:first-child{text-align:left}
td{padding:7px 10px;border-bottom:1px solid rgba(30,38,64,.5);text-align:right;transition:background .15s}
td:first-child{text-align:left;font-weight:600}
tr:hover td{background:rgba(124,109,250,.06);cursor:pointer}
tr.sel td{background:rgba(124,109,250,.12)}
.badge{display:inline-block;padding:2px 7px;border-radius:8px;font-size:9px;font-weight:700}
.b-ok{background:rgba(0,217,163,.15);color:var(--g)}
.b-ov{background:rgba(255,77,106,.15);color:var(--r)}

/* ── CARTÕES ── */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.crd{background:var(--s2);border:1px solid var(--bord);border-radius:13px;padding:15px;transition:all .25s}
.crd.crit{border-color:rgba(255,77,106,.4);box-shadow:0 0 16px rgba(255,77,106,.12)}
.crd.warn{border-color:rgba(245,166,35,.35)}
.crd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.crd-nm{font-size:13px;font-weight:700;font-family:var(--font-head)}
.crd-st{font-size:10px;font-weight:700}
.crd-fat{font-size:20px;font-weight:700;font-family:var(--font-head)}
.crd-lim{font-size:10px;color:var(--txt2)}
.crd-track{background:var(--bord);border-radius:6px;height:6px;margin:8px 0 4px;overflow:hidden}
.crd-fill{height:100%;border-radius:6px;transition:width .8s ease}
.crd-foot{display:flex;justify-content:space-between;font-size:10px}

/* ══════════════════════════════════════════
   IA DIAGNÓSTICO
══════════════════════════════════════════ */
#p-ia{padding:22px 24px 32px}

.ia-header{margin-bottom:24px}
.ia-header h1{font-family:var(--font-head);font-size:22px;font-weight:700}
.ia-header p{font-size:12px;color:var(--txt2);margin-top:4px}

.ia-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;height:calc(100vh - 140px)}

/* Chat */
.chat-panel{background:var(--s1);border:1px solid var(--bord);border-radius:16px;
  display:flex;flex-direction:column;overflow:hidden}
.chat-top{padding:16px 20px;border-bottom:1px solid var(--bord);
  display:flex;align-items:center;gap:10px}
.ai-avatar{width:40px;height:40px;border-radius:12px;flex-shrink:0;overflow:hidden;
  animation:mascot-idle 4s ease-in-out infinite}
@keyframes mascot-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ai-name{font-family:var(--font-head);font-size:13px;font-weight:700}
.ai-status{font-size:10px;color:var(--g);display:flex;align-items:center;gap:4px}
.ai-dot{width:6px;height:6px;border-radius:50%;background:var(--g);
  animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* Mascote typing bounce */
.ai-avatar.thinking{animation:mascot-think .5s ease-in-out infinite alternate}
@keyframes mascot-think{0%{transform:rotate(-5deg)}100%{transform:rotate(5deg)}}

.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:12px;line-height:1.6;animation:fadeUp .25s ease}
.msg.ai{background:var(--s3);border:1px solid var(--bord2);border-radius:4px 14px 14px 14px;align-self:flex-start}
.msg.user{background:linear-gradient(135deg,rgba(124,109,250,.25),rgba(59,158,255,.2));
  border:1px solid rgba(124,109,250,.3);border-radius:14px 14px 4px 14px;align-self:flex-end}
.msg.ai strong{color:var(--v2)}
.msg.ai .highlight{background:rgba(0,217,163,.12);border-left:2px solid var(--g);
  padding:6px 10px;border-radius:0 8px 8px 0;margin:6px 0;font-size:11px}
.msg.ai .warn-block{background:rgba(255,77,106,.1);border-left:2px solid var(--r);
  padding:6px 10px;border-radius:0 8px 8px 0;margin:6px 0;font-size:11px}
.msg-time{font-size:9px;color:var(--txt3);margin-top:4px}
.typing{display:flex;gap:4px;padding:6px 0;align-items:center}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--txt3);
  animation:bounce .8s infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.chat-bottom{padding:12px 14px;border-top:1px solid var(--bord);display:flex;gap:8px}
.chat-input{flex:1;background:var(--s3);border:1px solid var(--bord2);
  color:var(--txt);padding:9px 14px;border-radius:10px;
  font-family:var(--font-body);font-size:12px;outline:none;resize:none;height:42px;
  transition:border-color .2s}
.chat-input:focus{border-color:var(--v)}
.chat-send{width:42px;height:42px;background:linear-gradient(135deg,var(--v),var(--b));
  border:none;border-radius:10px;cursor:pointer;font-size:16px;
  transition:opacity .2s;flex-shrink:0}
.chat-send:hover{opacity:.85}
.chat-send:disabled{opacity:.4;cursor:not-allowed}

/* Quick prompts */
.quick-btns{padding:0 14px 10px;display:flex;flex-wrap:wrap;gap:6px}
.qb{background:var(--s3);border:1px solid var(--bord2);color:var(--txt2);
  padding:4px 10px;border-radius:20px;font-size:10px;cursor:pointer;
  transition:all .15s;font-family:var(--font-body)}
.qb:hover{border-color:var(--v);color:var(--v2)}

/* Diagnóstico panel */
.diag-panel{display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.diag-card{background:var(--s2);border:1px solid var(--bord);border-radius:13px;padding:16px}
.diag-title{font-family:var(--font-head);font-size:12px;font-weight:700;
  margin-bottom:10px;display:flex;align-items:center;gap:6px}
.score-ring{display:flex;flex-direction:column;align-items:center;margin:4px 0 8px}
.score-val{font-family:var(--font-head);font-size:36px;font-weight:800;
  background:linear-gradient(135deg,var(--v2),var(--g));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.score-lbl{font-size:10px;color:var(--txt2);margin-top:2px}
.diag-item{display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--bord)}
.diag-item:last-child{border:none}
.diag-item-lbl{font-size:11px;color:var(--txt2)}
.diag-item-val{font-size:11px;font-weight:700}

/* Consórcio */
.consorcio-card{background:linear-gradient(135deg,rgba(124,109,250,.12),rgba(59,158,255,.1));
  border:1px solid rgba(124,109,250,.25);border-radius:13px;padding:16px}
.cons-highlight{font-size:28px;font-weight:800;font-family:var(--font-head);
  background:linear-gradient(90deg,var(--v2),var(--b));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Consórcio Tracker */
.cons-tracker{background:linear-gradient(135deg,rgba(0,217,163,.08),rgba(34,211,238,.06));
  border:1px solid rgba(0,217,163,.2);border-radius:13px;padding:16px}
.cons-tracker-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cons-tracker-kpi{flex:1;min-width:120px}
.cons-tracker-kpi-lbl{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--txt3);margin-bottom:4px}
.cons-tracker-kpi-val{font-size:22px;font-weight:800;font-family:var(--font-head)}
.cons-prog-wrap{margin-top:12px}
.cons-prog-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:4px}
.cons-prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#00D9A3,#22D3EE);transition:width .5s}
.cons-edit-btn{font-size:10px;padding:4px 10px;border-radius:20px;border:1px solid rgba(0,217,163,.4);
  background:transparent;color:#00D9A3;cursor:pointer;font-family:var(--font-sans);white-space:nowrap;margin-top:4px}
.cons-edit-btn:hover{background:rgba(0,217,163,.1)}
.cons-edit-input{background:rgba(255,255,255,.06);border:1px solid rgba(0,217,163,.4);border-radius:8px;
  color:var(--txt);font-size:14px;font-family:var(--font-head);font-weight:700;padding:4px 10px;width:140px}
.cons-edit-input:focus{outline:none;border-color:#00D9A3}

/* ── Quick Entry Form ─────────────────────────────────────────────────── */
.entry-lbl{font-size:9px;font-weight:700;color:var(--txt3);letter-spacing:1px;
  text-transform:uppercase;margin-bottom:5px}
.entry-input{width:100%;background:var(--s3);border:1px solid var(--bord2);
  border-radius:9px;color:var(--txt);font-size:13px;font-family:var(--font-body);
  padding:9px 12px;outline:none;transition:.2s;-webkit-appearance:none}
.entry-input:focus{border-color:var(--g)}
.entry-input option{background:var(--s2)}
.qv-chip{background:var(--s3);border:1px solid var(--bord2);border-radius:20px;
  padding:3px 9px;font-size:10px;color:var(--txt2);cursor:pointer;
  transition:all .15s;white-space:nowrap;-webkit-user-select:none;user-select:none}
.qv-chip:hover,.qv-chip:active{background:var(--g);color:#080B12;border-color:var(--g);font-weight:700}

/* ── Onboarding ───────────────────────────────────────────────────────── */
#screen-onboarding{position:fixed;inset:0;z-index:400;background:rgba(8,11,18,.95);
  backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;display:none}
.onb-box{background:var(--s2);border:1px solid var(--bord2);border-radius:24px;
  padding:40px 36px;width:500px;max-width:90vw;text-align:center;position:relative}
.onb-step{display:none;animation:fadeUp .35s ease}
.onb-step.on{display:block}
.onb-icon{font-size:52px;margin-bottom:16px;line-height:1}
.onb-title{font-family:var(--font-head);font-size:24px;font-weight:800;margin-bottom:8px}
.onb-sub{font-size:13px;color:var(--txt2);line-height:1.6;margin-bottom:24px}
.onb-btns{display:flex;flex-direction:column;gap:10px}
.onb-btn-main{padding:14px;border:none;border-radius:12px;cursor:pointer;
  font-size:14px;font-weight:700;font-family:var(--font-head);transition:.2s}
.onb-btn-main.primary{background:linear-gradient(135deg,#00D9A3,#22D3EE);color:#080B12}
.onb-btn-main.secondary{background:var(--s3);color:var(--txt);border:1px solid var(--bord2)}
.onb-btn-main:hover{opacity:.88;transform:translateY(-1px)}
.onb-skip{position:absolute;top:16px;right:18px;background:transparent;border:none;
  color:var(--txt3);font-size:11px;cursor:pointer;font-family:var(--font-body)}
.onb-skip:hover{color:var(--txt2)}
.onb-dots{display:flex;justify-content:center;gap:6px;margin-top:20px}
.onb-dot{width:6px;height:6px;border-radius:50%;background:var(--bord2);transition:.3s}
.onb-dot.on{background:var(--g);width:18px;border-radius:3px}

/* ── Login Screen ─────────────────────────────────────────────────────── */
#screen-login{position:fixed;inset:0;background:var(--bg);z-index:500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.login-box{background:var(--s2);border:1px solid var(--bord2);border-radius:20px;
  padding:40px 36px;width:380px;max-width:90vw}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;justify-content:center}
.login-logo-text{font-size:26px;font-weight:800;font-family:var(--font-head);
  background:linear-gradient(135deg,#00D9A3,#22D3EE);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-sub{font-size:12px;color:var(--txt3);text-align:center;margin-bottom:24px}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:11px;font-weight:700;color:var(--txt2);
  letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px}
.login-input{width:100%;background:var(--s3);border:1px solid var(--bord2);border-radius:10px;
  color:var(--txt);font-size:14px;font-family:var(--font-body);padding:11px 14px;outline:none;transition:.2s}
.login-input:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(0,217,163,.12)}
.login-btn{width:100%;padding:13px;border:none;border-radius:10px;cursor:pointer;
  font-size:14px;font-weight:700;font-family:var(--font-head);margin-top:6px;transition:.2s}
.login-btn-primary{background:linear-gradient(135deg,#00D9A3,#22D3EE);color:#080B12}
.login-btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.login-btn-secondary{background:transparent;color:var(--txt2);font-size:12px;
  border:1px solid var(--bord2)!important;margin-top:8px}
.login-btn-secondary:hover{border-color:var(--g)!important;color:var(--g)}
.login-err{font-size:11px;color:var(--r);margin-top:8px;text-align:center;min-height:16px}
.login-toggle{font-size:11px;color:var(--txt3);text-align:center;margin-top:16px}
.login-toggle a{color:var(--g);cursor:pointer;text-decoration:none}
.login-toggle a:hover{text-decoration:underline}
.login-user-badge{display:flex;align-items:center;gap:8px;padding:6px 12px;
  background:rgba(0,217,163,.08);border:1px solid rgba(0,217,163,.2);border-radius:20px;
  font-size:11px;color:var(--g);cursor:pointer}
/* ── Score Card ───────────────────────────────────────────────────────── */
.score-hero{border-radius:16px;padding:20px 24px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(0,217,163,.08),rgba(34,211,238,.06));
  border:1px solid rgba(0,217,163,.2)}
.score-hero-left{display:flex;align-items:center;gap:16px}
.score-ring-big{width:72px;height:72px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;border:3px solid;flex-shrink:0}
.score-big-val{font-size:22px;font-weight:800;font-family:var(--font-head);line-height:1}
.score-big-max{font-size:9px;color:var(--txt3);font-weight:600}
.score-hero-info{flex:1}
.score-hero-grade{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}
.score-hero-label{font-size:22px;font-weight:800;font-family:var(--font-head);line-height:1.2}
.score-hero-sub{font-size:11px;color:var(--txt2);margin-top:4px}
.score-hero-bars{flex:1;min-width:200px}
.score-bar-item{margin-bottom:6px}
.score-bar-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--txt2);margin-bottom:2px}
.score-bar-bg{height:4px;border-radius:2px;background:var(--bord);overflow:hidden}
.score-bar-fill{height:100%;border-radius:2px;transition:width .8s}
/* ── Game Mode Banner ─────────────────────────────────────────────────── */
.gamemode-banner{border-radius:13px;padding:14px 18px;margin-bottom:14px;
  display:flex;align-items:center;gap:14px;border:1px solid}
.gm-icon{font-size:28px;line-height:1}
.gm-title{font-size:13px;font-weight:700;font-family:var(--font-head)}
.gm-desc{font-size:11px;margin-top:2px;opacity:.8}
/* ── Badges ───────────────────────────────────────────────────────────── */
.badges-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 14px;border-radius:12px;border:1px solid;min-width:80px;text-align:center}
.badge-item.earned{background:rgba(0,217,163,.08);border-color:rgba(0,217,163,.3)}
.badge-item.locked{background:rgba(255,255,255,.03);border-color:var(--bord);opacity:.5;filter:grayscale(1)}
.badge-icon{font-size:22px;line-height:1}
.badge-name{font-size:9px;font-weight:700;color:var(--txt2);line-height:1.3}
/* ── Consórcio Recommendation ─────────────────────────────────────────── */
.cons-rec-card{border-radius:13px;padding:16px 18px;margin-top:12px;
  background:linear-gradient(135deg,rgba(124,109,250,.1),rgba(59,158,255,.08));
  border:1px solid rgba(124,109,250,.25)}
.cons-rec-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:10px}
.cons-rec-opt{border-radius:10px;padding:12px;border:1px solid var(--bord2);
  background:var(--s3);cursor:pointer;transition:.2s;text-align:center}
.cons-rec-opt:hover,.cons-rec-opt.selected{border-color:var(--g);background:rgba(0,217,163,.08)}
.cons-rec-tipo{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--txt3);margin-bottom:4px}
.cons-rec-cred{font-size:15px;font-weight:800;font-family:var(--font-head);color:var(--g)}
.cons-rec-parc{font-size:10px;color:var(--txt2);margin-top:2px}
/* ── Consórcio Tabs ───────────────────────────────────────────────────── */
.cons-tabs{display:flex;gap:0;margin-bottom:12px;border-radius:10px;overflow:hidden;border:1px solid var(--bord2)}
.cons-tab{flex:1;padding:9px 8px;text-align:center;font-size:12px;font-weight:700;
  cursor:pointer;background:var(--s3);color:var(--txt2);transition:.2s;border:none;
  font-family:var(--font-body)}
.cons-tab.active{background:var(--g);color:#000}
.cons-parcela-info{background:rgba(0,217,163,.07);border:1px solid rgba(0,217,163,.25);
  border-radius:10px;padding:10px 14px;margin-bottom:10px;text-align:center}
.cons-parcela-info b{color:var(--g);font-size:15px}
.cons-wa-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:14px;padding:12px;border-radius:12px;background:#25D366;color:#fff;
  font-weight:700;font-size:13px;text-decoration:none;transition:.2s;cursor:pointer}
.cons-wa-btn:hover{background:#1ebe59;transform:scale(1.02)}
/* legacy pill buttons (kept for investimento if needed) */
.obj-selector{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.obj-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--bord2);
  background:transparent;color:var(--txt2);font-size:11px;font-family:var(--font-body);
  cursor:pointer;transition:.2s}
.obj-btn.active,.obj-btn:hover{border-color:var(--g);color:var(--g);background:rgba(0,217,163,.08)}

/* ── Metas Anuais ─────────────────────────────────────────────────────── */
.metas-anuais-intro{background:linear-gradient(135deg,rgba(0,217,163,.07),rgba(34,211,238,.04));
  border:1px solid rgba(0,217,163,.2);border-radius:16px;padding:20px 24px;margin-bottom:24px;
  display:flex;align-items:center;gap:16px}
.ma-intro-icon{width:48px;height:48px;background:rgba(0,217,163,.12);border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ma-intro-text strong{display:block;font-size:14px;font-weight:700;margin-bottom:3px}
.ma-intro-text span{font-size:12px;color:var(--txt2)}
.goals-summary-bar{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.gsb-item{flex:1;min-width:120px;background:var(--s2);border:1px solid var(--bord);
  border-radius:12px;padding:14px 16px;text-align:center}
.gsb-num{font-size:1.6rem;font-weight:800;font-family:var(--font-head)}
.gsb-lbl{font-size:11px;color:var(--txt2);margin-top:2px}
.goals-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.goal-card{background:var(--s2);border:1px solid var(--bord);border-radius:16px;
  padding:18px 20px;transition:.2s;position:relative}
.goal-card:hover{border-color:rgba(0,217,163,.25)}
.goal-card.done{border-color:rgba(0,217,163,.4);background:rgba(0,217,163,.03)}
.goal-num{position:absolute;top:14px;right:16px;font-size:2rem;font-weight:800;
  font-family:var(--font-head);color:rgba(255,255,255,.04);line-height:1}
.goal-title-inp{width:100%;background:transparent;border:none;color:var(--txt);
  font-size:14px;font-weight:700;font-family:var(--font-head);outline:none;margin-bottom:12px;
  border-bottom:1px solid var(--bord);padding-bottom:6px;transition:border-color .2s}
.goal-title-inp:focus{border-color:rgba(0,217,163,.4)}
.goal-title-inp::placeholder{color:var(--txt3);font-weight:400}
.goal-amounts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.goal-inp{width:100%;background:var(--s3);border:1px solid var(--bord);color:var(--txt);
  font-size:12px;padding:7px 10px;border-radius:8px;outline:none;font-family:var(--font-body);
  transition:border-color .2s}
.goal-inp:focus{border-color:rgba(0,217,163,.4)}
.goal-inp::placeholder{color:var(--txt3)}
.goal-inp-lbl{font-size:10px;color:var(--txt3);margin-bottom:3px}
.goal-progress-track{background:rgba(255,255,255,.06);border-radius:10px;height:6px;
  overflow:hidden;margin:10px 0 8px}
.goal-progress-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--v),var(--b));
  transition:width .5s ease}
.goal-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.goal-cat-sel{flex:1;background:var(--s3);border:1px solid var(--bord);color:var(--txt2);
  font-size:11px;padding:5px 8px;border-radius:7px;outline:none;font-family:var(--font-body)}
.goal-pct{font-size:12px;font-weight:700;color:var(--g);min-width:32px;text-align:right}
.goal-done-btn{padding:4px 10px;border-radius:6px;font-size:10px;font-weight:700;
  border:1px solid var(--bord);background:transparent;color:var(--txt3);cursor:pointer;transition:.2s}
.goal-done-btn.done{border-color:rgba(0,217,163,.4);color:var(--g);background:rgba(0,217,163,.08)}
.save-goals-btn{background:linear-gradient(135deg,var(--v),var(--b));color:#000;border:none;
  padding:9px 20px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:var(--font-body);display:flex;align-items:center;gap:6px;transition:opacity .2s}
.save-goals-btn:hover{opacity:.88}
@media(max-width:600px){.goals-grid{grid-template-columns:1fr}}

/* scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bord2);border-radius:2px}

/* loading overlay */
#loading{position:fixed;inset:0;background:var(--bg);z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;display:none}
/* badge toast animation */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* upload/app hidden on start — JS decides based on auth mode */
#screen-upload{display:none}
#app{display:none}
/* initial loader shown while Firebase resolves */
#screen-init{position:fixed;inset:0;background:var(--bg);z-index:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#screen-init .init-logo{font-family:var(--font-head);font-size:32px;font-weight:800;
  background:linear-gradient(135deg,#00D9A3,#22D3EE);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#screen-init .init-spinner{width:28px;height:28px;border:3px solid rgba(0,217,163,.2);
  border-top-color:#00D9A3;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════
   MOBILE HEADER + BOTTOM NAV
══════════════════════════════════════════ */
#mob-header{
  display:none;position:fixed;top:0;left:0;right:0;z-index:300;height:52px;
  background:var(--s1);border-bottom:1px solid var(--bord);
  padding:0 16px;align-items:center;justify-content:space-between;gap:10px;
}
.mob-hamburger{background:transparent;border:none;color:var(--txt2);font-size:22px;
  cursor:pointer;padding:4px;line-height:1}
.mob-logo-text{font-family:var(--font-head);font-size:18px;font-weight:800;
  background:linear-gradient(135deg,#00D9A3,#22D3EE);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.mob-month{font-size:11px;color:var(--txt2);background:var(--s3);
  border:1px solid var(--bord2);border-radius:8px;padding:4px 10px;cursor:pointer}

#mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299}
#mob-overlay.on{display:block}

#bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--s1);border-top:1px solid var(--bord);
  padding:6px 0 max(6px,env(safe-area-inset-bottom));
  grid-template-columns:repeat(6,1fr);
}
.bnav-btn{
  background:transparent;border:none;color:var(--txt3);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:9px;font-family:var(--font-body);font-weight:600;padding:4px 2px;transition:.15s;
}
.bnav-btn .bnav-icon{font-size:18px;line-height:1}
.bnav-btn.on{color:var(--g)}
.bnav-btn.on .bnav-icon{filter:drop-shadow(0 0 6px rgba(0,217,163,.6))}

/* ── Quick Entry FAB ── */
#fab-entry{
  display:none;position:fixed;bottom:80px;right:18px;z-index:299;
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#00D9A3,#22D3EE);
  font-size:24px;box-shadow:0 4px 20px rgba(0,217,163,.4);
  transition:transform .2s,box-shadow .2s;
}
#fab-entry:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,217,163,.5)}

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════ */
@media(max-width:768px){
  html,body{overflow:auto}
  #app.show{flex-direction:column}

  /* sidebar: slide-in drawer */
  aside{
    position:fixed;top:0;left:0;bottom:0;z-index:300;
    width:260px;transform:translateX(-100%);transition:transform .25s ease;
    overflow-y:auto;padding-bottom:80px;
  }
  aside.open{transform:translateX(0)}

  /* main fills full width, leaves room for top+bottom bars */
  main{width:100%;padding-top:52px;padding-bottom:68px}
  .page{padding:14px 14px 20px}

  /* header & bottom nav visible on mobile */
  #mob-header{display:flex}
  #bottom-nav{display:grid}
  #fab-entry{display:flex;align-items:center;justify-content:center}

  /* grids collapse */
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important}
  .metas-grid{grid-template-columns:1fr!important}
  .c2{grid-template-columns:1fr!important}
  .c3{grid-template-columns:1fr 1fr!important}
  .card-grid{grid-template-columns:1fr!important}
  .cons-rec-grid{grid-template-columns:1fr 1fr!important}

  /* score hero stacks */
  .score-hero{flex-direction:column;align-items:flex-start}
  .score-hero-bars{min-width:unset;width:100%}

  /* IA page: single column */
  .ia-grid{grid-template-columns:1fr!important;height:auto}
  .diag-panel{overflow-y:visible}

  /* login box */
  .login-box{padding:28px 20px}

  /* hide desktop filters (use month in header) */
  .filter-box{display:none}
  .new-file-btn{margin:10px 12px 4px}

  /* page header smaller */
  .pg-hdr h1{font-size:18px}
  .pg-hdr{margin-bottom:14px}

  /* charts shorter on mobile */
  canvas{max-height:200px}

  /* upload drop zone */
  .drop-zone{padding:28px 20px}
  .upload-logo{font-size:28px}
}
.loading-spinner{width:48px;height:48px;border:3px solid var(--bord2);
  border-top-color:var(--v);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Phase 6 — Calendário Financeiro ───────────────────────────── */
.cal-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:14px}
.cal-nav-btn{background:transparent;border:1px solid var(--bord);color:var(--txt2);
  border-radius:8px;padding:4px 14px;cursor:pointer;font-family:var(--font-body);font-size:13px;
  transition:.15s}
.cal-nav-btn:hover{border-color:var(--v);color:var(--txt)}
.cal-month-label{font-size:16px;font-weight:700;color:var(--txt);font-family:var(--font-head);
  min-width:160px;text-align:center}
.cal-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;
  margin-bottom:16px}
.cal-sum-card{background:var(--s2);border:1px solid var(--bord);border-radius:10px;
  padding:10px 12px}
.cal-sum-lbl{font-size:9px;font-weight:700;color:var(--txt3);letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:4px}
.cal-sum-val{font-size:14px;font-weight:700;font-family:var(--font-head)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:12px}
.cal-dow{font-size:9px;font-weight:700;color:var(--txt3);text-align:center;padding:4px 0;
  letter-spacing:.5px;text-transform:uppercase}
.cal-cell{background:var(--s2);border:1px solid var(--bord);border-radius:8px;
  padding:5px 4px;min-height:56px;cursor:pointer;transition:.15s;position:relative}
.cal-cell:hover{border-color:var(--v);background:rgba(124,109,250,.07)}
.cal-cell.today{border-color:rgba(0,217,163,.4);background:rgba(0,217,163,.04)}
.cal-cell.selected{border-color:var(--v);background:rgba(124,109,250,.12)}
.cal-cell.other-month{opacity:.3;pointer-events:none}
.cal-day-num{font-size:11px;font-weight:700;color:var(--txt2);margin-bottom:3px;
  text-align:right;padding-right:2px}
.cal-dots{display:flex;flex-wrap:wrap;gap:2px;justify-content:flex-start}
.cal-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cal-more{font-size:8px;color:var(--txt3);line-height:7px}
.cal-day-panel{background:var(--s2);border:1px solid var(--bord);border-radius:12px;
  padding:14px;margin-top:4px}
.cal-day-panel-hdr{font-size:13px;font-weight:700;color:var(--txt);margin-bottom:10px}
.cal-ev-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:8px;background:var(--bg);margin-bottom:4px;flex-wrap:wrap}
.cal-ev-info{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.cal-ev-title{font-size:12px;font-weight:600;color:var(--txt);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cal-ev-badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:10px}
.cal-ev-amount{font-size:12px;font-weight:700;font-family:var(--font-head);flex-shrink:0}
.cal-ev-action{font-size:10px;padding:3px 9px;border-radius:6px;cursor:pointer;
  font-family:var(--font-body);flex-shrink:0}
@media(max-width:600px){
  .cal-cell{min-height:44px;padding:3px 2px}
  .cal-day-num{font-size:10px}
  .cal-dot{width:6px;height:6px}
  .cal-summary{grid-template-columns:repeat(2,1fr)}
}

/* ── FASE 10A.3 — Admin preset buttons ── */
.admin-preset-btn{
  background:var(--s3);
  border:1px solid var(--bord2);
  color:var(--txt2);
  padding:9px 10px;
  border-radius:8px;
  font-size:12px;
  font-family:var(--font-body);
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}
.admin-preset-btn:hover{background:rgba(124,109,250,.1);border-color:rgba(124,109,250,.3)}
.admin-preset-active{
  background:linear-gradient(135deg,rgba(124,109,250,.25),rgba(168,155,255,.25));
  border-color:#A89BFF;
  color:#fff;
}

/* ── FASE 8B — Badge de origem ── */
.origem-badge{display:inline-block;font-weight:700;border-radius:8px;
  padding:1px 6px;line-height:1.5;vertical-align:middle;cursor:help;
  border:1px solid transparent;letter-spacing:.2px}
.origem-sm{font-size:10px;padding:2px 7px}
.origem-xs{font-size:9px;padding:1px 5px}
.origem-manual{background:rgba(155,168,197,.12);color:#9BA8C5;border-color:rgba(155,168,197,.2)}
.origem-assist{background:rgba(124,109,250,.16);color:#A89BFF;border-color:rgba(124,109,250,.3)}
.origem-wpp{background:rgba(37,211,102,.16);color:#25d366;border-color:rgba(37,211,102,.3)}
.origem-tg{background:rgba(0,136,204,.18);color:#3aa8e0;border-color:rgba(0,136,204,.3)}

/* ── FASE 8A — Assistente ── */
.assist-badge{font-size:9px;padding:1px 6px;border-radius:10px;font-weight:700;
  vertical-align:middle;margin-right:4px}
.assist-badge.manual{background:rgba(155,168,197,.2);color:#9BA8C5}
.assist-badge.wpp{background:rgba(37,211,102,.18);color:#25d366}
.assist-badge.tg{background:rgba(0,136,204,.18);color:#08c}
.assist-preview-table{display:flex;flex-direction:column;gap:0}
.assist-preview-row{display:flex;justify-content:space-between;align-items:flex-start;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.assist-preview-row:last-child{border-bottom:none}
.assist-preview-key{color:var(--txt2);font-size:11px;text-transform:uppercase;
  letter-spacing:.4px;flex-shrink:0;width:140px;padding-top:2px}
.assist-preview-val{color:var(--txt1);font-weight:600;text-align:right}
.assist-hist-row{display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);gap:8px}
.assist-hist-row:last-child{border-bottom:none}
.assist-hist-text{font-size:12px;color:var(--txt2);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){
  .assist-preview-key{width:110px;font-size:10px}
  .assist-preview-val{font-size:12px}
}

/* ── FASE 7 — Export bar ── */
.cal-export-bar{display:flex;gap:10px;margin-top:16px;justify-content:flex-end;flex-wrap:wrap}
.cal-export-btn{padding:8px 16px;border-radius:9px;border:1px solid rgba(0,217,163,.35);
  background:rgba(0,217,163,.08);color:#00D9A3;font-family:var(--font-body);
  font-size:13px;cursor:pointer;transition:background .2s}
.cal-export-btn:hover{background:rgba(0,217,163,.18)}
.cal-export-btn--print{border-color:rgba(59,158,255,.35);background:rgba(59,158,255,.08);
  color:#3B9EFF}
.cal-export-btn--print:hover{background:rgba(59,158,255,.18)}

/* ── FASE 7 — Print area (hidden in screen, shown in print) ── */
#resumo-print-area{display:none}

/* ── FASE 7 — Resumo print styles ── */
.res-print-wrap{font-family:sans-serif;max-width:620px;margin:0 auto;padding:24px;
  color:#111;background:#fff}
.res-header{text-align:center;margin-bottom:20px;border-bottom:2px solid #00D9A3;padding-bottom:12px}
.res-logo{font-size:26px;font-weight:800;color:#00D9A3;letter-spacing:-1px}
.res-title{font-size:16px;font-weight:700;margin-top:4px}
.res-sub{font-size:11px;color:#666;margin-top:2px}
.res-section{margin-bottom:16px;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden}
.res-sec-title{background:#f7f7f7;padding:7px 12px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;color:#444}
.res-row{display:flex;justify-content:space-between;align-items:center;
  padding:7px 12px;border-top:1px solid #f0f0f0;font-size:13px}
.res-val{font-weight:700;font-size:14px}
.res-val.green{color:#007a5a}
.res-val.red{color:#c0392b}
.res-val.orange{color:#d35400}
.res-val.pink{color:#9b2c6e}
.res-sub-list{padding:4px 12px 8px 20px;font-size:11px;color:#555;background:#fafafa;
  border-top:1px solid #f0f0f0}
.res-meta50{margin-top:14px;padding:10px 14px;background:#f0fff8;border:1px solid #b2dfdb;
  border-radius:7px;font-size:12px;color:#2d6a4f}
.res-result{border-color:#00D9A3}

/* ── MEDIA PRINT ── */
@media print{
  /* Hide everything except the print area */
  body > *{display:none !important}
  #resumo-print-area{display:block !important}
  .res-print-wrap{padding:16px;max-width:100%}
  .res-logo{color:#00D9A3 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .res-val.green{color:#007a5a !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .res-val.red{color:#c0392b !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .res-meta50{background:#f0fff8 !important;border-color:#b2dfdb !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .no-print{display:none !important}
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 10B.5.1 — Responsividade mobile
═══════════════════════════════════════════════════════════════════════ */

/* Defesa universal contra overflow horizontal */
html, body { overflow-x: hidden; max-width: 100%; }

/* ════════════════════════════════════════════════════════════════════════
   PHASE 10D.1 — Admin sections collapsible
═══════════════════════════════════════════════════════════════════════ */
.collapsible-section[data-collapsed="true"] .collapsible-body { display: none !important; }
.collapsible-section[data-collapsed="true"] { padding-bottom: 12px !important; }
.collapsible-toggle {
  background: transparent;
  border: 1px solid var(--bord2);
  color: var(--txt2);
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  user-select: none;
  transition: .15s;
}
.collapsible-toggle:hover { background: var(--s2); border-color: var(--bord); }
.collapsible-toggle .chev { display: inline-block; transition: transform .2s ease; }
.collapsible-section[data-collapsed="true"] .collapsible-toggle .chev { transform: rotate(-90deg); }
.collapsible-section .collapsible-toggle .chev::before { content: '▾'; font-size: 10px; }

/* ════════════════════════════════════════════════════════════════════════
   PHASE 10B.5.4 — Overview containers adaptativos
═══════════════════════════════════════════════════════════════════════ */

/* Classe utilitária reusável: grid auto-fit responsivo */
.responsive-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

/* Overview painéis: força auto-fit em todos breakpoints intermediários */
#p-overview .kpi-grid,
.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

#p-overview .metas-grid,
.metas-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#p-overview .c2, .c2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#p-overview .c3, .c3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cons-rec-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* Score hero: flex sem min-width forçado em containers pequenos */
.score-hero { flex-wrap: wrap; gap: 14px; }
.score-hero-bars { min-width: 0 !important; flex: 1 1 220px; }

/* Faturas/alertas containers fluidos */
#cc-commit-alert, #alerts-section {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Valores financeiros longos: permite quebra suave */
.kpi-val, .score-hero-label {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Charts containers */
.chart-card, [id^="ch-"] {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Tablet 768-1023: painéis Overview prioritários */
@media (max-width: 1023px) {
  .metas-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
  .c3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
  .cons-rec-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
  .score-hero { flex-direction: column; align-items: stretch; }
  .score-hero-left, .score-hero-bars { width: 100%; }

  /* Charts em tablet: altura confortável */
  canvas { max-height: 280px !important; }
}

@media (max-width: 600px) {
  /* Charts mobile altura menor */
  canvas { max-height: 220px !important; }

  /* KPI mobile: 2 colunas confortáveis */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Metas: stack 1 coluna em mobile pequeno */
  .metas-grid { grid-template-columns: 1fr !important; }

  /* Valores grandes: clamp para nunca cortar */
  .kpi-val { font-size: clamp(14px, 4vw, 18px) !important; }
  .score-hero-label { font-size: clamp(16px, 4.5vw, 22px) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 10B.5.3 — Tablet/iPad responsivo (sidebar drawer até 1023px)
═══════════════════════════════════════════════════════════════════════ */

/* Main fluido sempre — defesa contra overflow */
main { min-width: 0; max-width: 100%; box-sizing: border-box; }
.page { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* KPI grid + grids gerais respeitam container */
.kpi-grid, .metas-grid, .card-grid, .ia-grid, .cons-rec-grid {
  min-width: 0; max-width: 100%;
}
.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

/* Charts: respeitam container */
canvas { max-width: 100% !important; height: auto; }
.cc, .card { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Tablet/iPad portrait: 768-1023px — sidebar vira drawer */
@media (max-width: 1023px) {
  #app.show { flex-direction: column; }
  html, body { overflow: auto; }

  aside {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
    width: 280px; transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto; padding-bottom: 80px;
  }
  aside.open { transform: translateX(0); }

  main { width: 100%; padding-top: 52px; padding-bottom: 80px; }
  .page { padding: 16px 18px 24px; }

  /* Mostrar header mobile + bottom nav em tablets também */
  #mob-header { display: flex; }
  #bottom-nav { display: grid; }
  #fab-entry { display: flex; align-items: center; justify-content: center; }

  /* Cards 2 colunas em tablet portrait */
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
  .c2 { grid-template-columns: 1fr 1fr !important; }
  .c3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
  .ia-grid { grid-template-columns: 1fr !important; height: auto; }

  /* Charts em tablet ficam um pouco mais altos */
  canvas { max-height: 320px; }

  /* Filter box (filtros desktop) escondido em tablet também */
  .filter-box { display: none; }
}

/* Tablet/iPad landscape específico: 1024-1199px — desktop com sidebar mais estreita */
@media (min-width: 1024px) and (max-width: 1199px) {
  aside { width: 200px !important; }
  main { width: calc(100% - 200px); }
  .page { padding: 18px 20px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
}

/* ── PHASE 10B.5.2 — Touch UX universal ── */
/* Active state: feedback tátil em qualquer botão */
button:active, .nav-btn:active, .bnav-btn:active, .nav-item:active {
  transform: scale(0.97);
  transition: transform .08s ease;
}
button { -webkit-tap-highlight-color: rgba(0,217,163,.15); }

/* Touch target mínimo nos botões críticos */
.nav-btn { min-height: 44px; }
.bnav-btn { min-height: 56px; touch-action: manipulation; }
button[onclick*="onClickQueroPremium"],
button[onclick*="onClickAtivarTrial"],
button[onclick*="onAdminSetPremium"],
button[onclick*="onAdminSetBasic"],
button[onclick*="onAdminSetTrial"],
button[onclick*="onAdminEditUntil"],
button[onclick*="confirmarLancamento"],
button[onclick*="cancelarInterpretacao"],
button[onclick*="confirmAdminSetPlan"],
button[onclick*="onClickAtualizarApp"] {
  min-height: 40px;
  touch-action: manipulation;
}

/* Banner Phase 10B.5 — não sobrepor header mobile */
#phase10-trial-banner { width: 100%; box-sizing: border-box; }

@media (max-width: 768px) {
  /* Banner: sai sticky, ocupa espaço inline abaixo do header */
  #phase10-trial-banner { position: relative !important; top: auto !important; }
  #phase10-trial-banner > div {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  #phase10-trial-banner > div > div:first-child { font-size: 12px !important; }
  #phase10-trial-banner button {
    font-size: 10px !important;
    padding: 6px 10px !important;
  }

  /* Cards/grid genéricos: 1 coluna em mobile */
  .pg-hdr { flex-wrap: wrap; gap: 8px; }
  .pg-hdr h1 { font-size: 17px !important; }

  /* Tabelas: garantir overflow-x sem quebrar layout */
  table { max-width: 100%; }
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Painel Admin / Auditoria: cards menores */
  #admin-users-content,
  #origin-audit-content,
  #telegram-sim-content { font-size: 12px; }
  #admin-users-content table,
  #origin-audit-content table { font-size: 11px; min-width: 480px; }

  /* Wrap forçado em containers que tinham flex 2-coluna largo */
  div[style*="display:flex"][style*="gap:14px"] { gap: 10px !important; }
}

@media (max-width: 600px) {
  /* Padding lateral menor */
  .page { padding: 12px 10px 24px !important; }

  /* KPIs em 2 colunas mas compactos */
  .kpi { padding: 10px 12px !important; }
  .kpi-val { font-size: 16px !important; }
  .kpi-lbl { font-size: 9px !important; }

  /* Cards Planos: full width, sem min-width forçado */
  #p-planos div[style*="flex:1"][style*="min-width:260px"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  #p-planos div[style*="display:flex"][style*="gap:14px"] {
    flex-direction: column !important;
  }

  /* Botões inline empilham se apertado */
  .pg-hdr div[style*="display:flex"] { flex-wrap: wrap !important; gap: 6px !important; }

  /* Inputs e selects ficam full width */
  input[type="text"], input[type="email"], input[type="date"], select, textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Banner trial: botões empilham */
  #phase10-trial-banner > div { flex-direction: column !important; align-items: stretch !important; }
  #phase10-trial-banner > div > div:last-child { justify-content: flex-end; }
  #phase10-trial-banner button { flex: 1; }

  /* Bottom nav: labels menores e comprimidos */
  .bnav-btn { font-size: 8px !important; padding: 4px 1px !important; }
  .bnav-btn .bnav-icon { font-size: 16px !important; }

  /* Main: padding-bottom maior pra não esconder atrás do bottom nav */
  main { padding-bottom: 80px !important; }

  /* Modal admin: largura full */
  #admin-plan-modal > div { width: 95vw !important; padding: 18px !important; }

  /* Calendário: dias compactos já existem em :600px section antiga, reforço */
  .cal-cell { min-height: 42px !important; padding: 3px 2px !important; }
  .cal-month-label { font-size: 14px !important; min-width: 110px !important; }
  .cal-summary { grid-template-columns: repeat(2, 1fr) !important; }
  .cal-sum-card { padding: 8px 10px !important; }
  .cal-sum-val { font-size: 13px !important; }

  /* Assistente: textarea ajustada */
  #assist-input { font-size: 13px !important; min-height: 80px !important; }

  /* Lançamentos / Faturas / receitas: tabelas com scroll */
  #lan-tbl, table { display: table; }
  .pg-hdr + div, table { overflow-x: auto; }

  /* CTAs grandes: largura total mobile */
  button[onclick*="onClickQueroPremium"],
  button[onclick*="onClickAtivarTrial"] {
    width: 100% !important;
    margin-top: 10px !important;
  }

  /* Origem badges menores */
  .origem-sm { font-size: 9px !important; padding: 1px 5px !important; }

  /* Ações admin row em coluna se apertado */
  #admin-users-content table td[style*="text-align:right"] {
    white-space: normal !important;
  }
  #admin-users-content table button {
    margin: 2px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 400px) {
  /* iPhone SE / telas muito pequenas */
  .pg-hdr h1 { font-size: 16px !important; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .kpi { padding: 8px 10px !important; }
  .bnav-btn { font-size: 7px !important; }
  .bnav-btn .bnav-icon { font-size: 14px !important; }

  /* Cards Planos status box compacto */
  #p-planos > div[style*="padding:20px"] { padding: 14px !important; }
  #p-planos > div[style*="padding:22px"] { padding: 14px !important; }
}