/* ============================
   DESIGN TOKENS
   ============================ */

/* ══════════════════════════════════════════════════════
   SISTEMA DE TEMAS — Lumnis / White / Black
══════════════════════════════════════════════════════ */
:root, [data-theme="lumnis"] {
  --bg:              #000000;
  --bg2:             #13121c;
  --card:            #191923;
  --card2:           #1f1f2a;
  --card-hi:         #252531;
  --border:          rgba(72,71,81,0.18);
  --border2:         rgba(72,71,81,0.35);
  --purple:          #18181b;
  --purple-light:    #52525b;
  --purple-dim:      rgba(24,24,27,0.07);
  --purple-glow:     rgba(24,24,27,0.18);
  --cyan:            #53ddfc;
  --cyan-dim:        rgba(83,221,252,0.12);
  --green:           #9bffce;
  --green-dim:       rgba(155,255,206,0.12);
  --red:             #ff6e84;
  --red-dim:         rgba(255,110,132,0.15);
  --amber:           #fcd34d;
  --amber-dim:       rgba(252,211,77,0.12);
  --text:            #e7e4f0;
  --muted:           #acaab5;
  --muted2:          #484751;
  --radius:          18px;
  --radius-sm:       12px;
  --font-head:       'Space Grotesk', sans-serif;
  --font-body:       'Manrope', sans-serif;
  --card-lowest:     #000000;
}

[data-theme="white"] {
  --bg:              #f5f5f7;
  --bg2:             #ffffff;
  --card:            #ffffff;
  --card2:           #f0f0f5;
  --card-hi:         #e8e8f0;
  --border:          rgba(0,0,0,0.08);
  --border2:         rgba(0,0,0,0.15);
  --purple:          #18181b;
  --purple-light:    #3f3f46;
  --purple-dim:      rgba(24,24,27,0.05);
  --purple-glow:     rgba(24,24,27,0.12);
  --cyan:            #0891b2;
  --cyan-dim:        rgba(8,145,178,0.1);
  --green:           #059669;
  --green-dim:       rgba(5,150,105,0.1);
  --red:             #dc2626;
  --red-dim:         rgba(220,38,38,0.1);
  --amber:           #d97706;
  --amber-dim:       rgba(217,119,6,0.1);
  --text:            #1a1a2e;
  --muted:           #6b7280;
  --muted2:          #9ca3af;
  --card-lowest:     #e5e5ea;
}

[data-theme="black"] {
  --bg:              #000000;
  --bg2:             #0a0a0a;
  --card:            #111111;
  --card2:           #1a1a1a;
  --card-hi:         #222222;
  --border:          rgba(255,255,255,0.06);
  --border2:         rgba(255,255,255,0.12);
  --purple:          #e4e4e7;
  --purple-light:    #f4f4f5;
  --purple-dim:      rgba(228,228,231,0.07);
  --purple-glow:     rgba(228,228,231,0.15);
  --cyan:            #22d3ee;
  --cyan-dim:        rgba(34,211,238,0.1);
  --green:           #4ade80;
  --green-dim:       rgba(74,222,128,0.1);
  --red:             #f87171;
  --red-dim:         rgba(248,113,113,0.12);
  --amber:           #fbbf24;
  --amber-dim:       rgba(251,191,36,0.1);
  --text:            #f9fafb;
  --muted:           #9ca3af;
  --muted2:          #4b5563;
  --card-lowest:     #000000;
}

[data-theme="white"] .streak-dot.inactive { background: #e5e7eb; }
[data-theme="white"] .streak-dot.active { background: linear-gradient(135deg,#18181b,#0891b2); }
[data-theme="white"] body::before { opacity: 0.015; }
[data-theme="black"] .streak-dot.inactive { background: #1a1a1a; }
[data-theme="black"] body::before { opacity: 0.04; }

.theme-selector { display:flex; gap:8px; margin-top:4px; }
.theme-btn { width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all 0.2s; }
.theme-btn.active { border-color:var(--purple);transform:scale(1.1); }
.theme-btn:hover { transform:scale(1.08); }
.theme-btn-lumnis { background:linear-gradient(135deg,#0d0d16 50%,#18181b 50%); }
.theme-btn-white  { background:linear-gradient(135deg,#f5f5f7 50%,#18181b 50%);border:3px solid #e5e7eb; }
.theme-btn-black  { background:#000;border:3px solid #333; }


* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100dvh;
  padding-bottom: 80px;
  overflow-x: hidden;
  position: relative;
  overscroll-behavior-y: contain;
}

/* Grain overlay */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:0.35;
}

/* Ambient glow orbs */
.amb { position:fixed; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0; opacity:0.1; }
.amb-1 { width:600px;height:600px; background:var(--purple); top:-200px; right:-150px; }
.amb-2 { width:500px;height:500px; background:var(--cyan); bottom:-200px; left:-100px; }

/* ============================
   TYPOGRAPHY
   ============================ */
.font-head { font-family: var(--font-head); }
.label {
  font-size:0.68rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted);
}
.section-title {
  font-family:var(--font-head); font-size:1.5rem; font-weight:800;
  letter-spacing:-0.035em; margin-bottom:16px;
}

/* ============================
   GLASS CARDS
   ============================ */
.glass {
  background: rgba(19,18,28,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position:relative; overflow:hidden;
}
.card::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, transparent 60%);
  pointer-events:none;
}
.card-sm { padding:14px; }
.card-lg { padding:26px; }

/* Ghost border */
.ghost { border: 1px solid rgba(72,71,81,0.15); }

/* Glow text */
.glow-primary { text-shadow: 0 0 22px rgba(189,157,255,0.5); }
.glow-cyan    { text-shadow: 0 0 20px rgba(83,221,252,0.4); }

/* ============================
   HEADER
   ============================ */
header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(13,13,22,0.75);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom: 1px solid var(--border);
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px;
}
.logo {
  font-family:var(--font-head); font-size:1.4rem; font-weight:800;
  letter-spacing:-0.04em;
  color: #ffffff;
}
.header-right { display:flex; align-items:center; gap:10px; }
.streak-badge {
  display:flex; align-items:center; gap:5px;
  background:var(--amber-dim); border:1px solid rgba(252,211,77,0.25);
  border-radius:20px; padding:4px 12px;
  font-size:0.75rem; font-weight:700; color:var(--amber);
  font-family:var(--font-head);
}
.score-badge {
  display:flex; align-items:center; gap:5px;
  background:var(--purple-dim); border:1px solid rgba(24,24,27,0.25);
  border-radius:20px; padding:4px 12px;
  font-size:0.75rem; font-weight:700; color:var(--purple-light);
  font-family:var(--font-head);
}
.fire-anim { animation: pulse-fire 1.5s ease-in-out infinite; display:inline-block; }

/* ── IA ROBOT BUTTON GLOW ─────────────────── */
@keyframes ia-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(139,92,246,0.6)); transform: scale(1); }
  50%       { filter: drop-shadow(0 0 10px rgba(139,92,246,0.9)); transform: scale(1.15); }
}
.ia-glow-emoji {
  font-size: 1.25rem;
  animation: ia-pulse 2.5s ease-in-out infinite;
  display: inline-block;
}
#ia-header-btn:hover .ia-glow-emoji {
  animation-duration: 0.8s;
}

/* ============================
   MAIN
   ============================ */
main {
  padding: 80px 16px 16px;
  max-width: 520px;
  margin: 0 auto;
  position:relative; z-index:1;
}

.tab-view { display:none; }
.tab-view.active { display:block; }

/* ============================
   STREAK HERO (file 1 style)
   ============================ */
.streak-hero-card {
  border-radius: 24px;
  padding: 32px 24px;
  text-align:center;
  position:relative; overflow:hidden;
  margin-bottom:16px;
  border: 1px solid rgba(124,58,237,0.28);
  background: rgba(19,18,28,0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.streak-hero-card::before {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(at 10% 20%, rgba(189,157,255,0.13) 0, transparent 55%),
                    radial-gradient(at 90% 80%, rgba(83,221,252,0.08) 0, transparent 50%);
  pointer-events:none;
}
.streak-hero-inner { position:relative; z-index:1; }
.streak-hero-num {
  font-family:var(--font-head); font-size:5.5rem; font-weight:800;
  letter-spacing:-0.07em; line-height:1;
  background:linear-gradient(135deg, #e7e4f0 30%, #bd9dff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(189,157,255,0.4));
}
.streak-hero-unit {
  font-family:var(--font-head); font-size:1.4rem; font-weight:600;
  color:var(--purple-light); margin-left:6px;
}
.streak-hero-msg {
  font-size:0.83rem; color:var(--muted); line-height:1.6;
  max-width:290px; margin:10px auto 0;
}

/* ============================
   KPI GRID
   ============================ */
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.kpi-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:16px;
  position:relative; overflow:hidden;
}
.kpi-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.02) 0%,transparent 60%);
  pointer-events:none;
}
.kpi-label { font-size:0.68rem; color:var(--muted); margin-bottom:6px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.kpi-value { font-family:var(--font-head); font-size:1.25rem; font-weight:800; letter-spacing:-0.025em; }
.kpi-value.purple { color:var(--purple-light); }
.kpi-value.cyan   { color:var(--cyan); }
.kpi-value.green  { color:var(--green); }
.kpi-value.red    { color:var(--red); }
.kpi-sub { font-size:0.68rem; margin-top:4px; color:var(--muted); }
.kpi-card.wide { grid-column:1/-1; }

/* ============================
   PROGRESS BAR
   ============================ */
.progress-wrap { margin-top:8px; }
.progress-track { height:4px; background:var(--card2); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; border-radius:99px; transition:width 1.2s cubic-bezier(.4,0,.2,1); }
.progress-fill.purple { background:linear-gradient(90deg,#18181b,#bd9dff); box-shadow:0 0 8px rgba(24,24,27,0.35); }
.progress-fill.cyan   { background:linear-gradient(90deg,#06b6d4,#53ddfc); box-shadow:0 0 8px rgba(83,221,252,0.3); }
.progress-fill.green  { background:linear-gradient(90deg,#10b981,#9bffce); box-shadow:0 0 8px rgba(155,255,206,0.3); }
.progress-fill.red    { background:linear-gradient(90deg,#ef4444,#ff6e84); box-shadow:0 0 8px rgba(255,110,132,0.3); }
.progress-fill.amber  { background:linear-gradient(90deg,#f59e0b,#fcd34d); box-shadow:0 0 8px rgba(252,211,77,0.3); }

/* ============================
   GAUGE / SCORE
   ============================ */
.gauge-wrap { position:relative; width:160px; height:85px; margin:0 auto; }
.gauge-svg  { overflow:visible; }
.gauge-track { fill:none; stroke:var(--card2); stroke-width:12; stroke-linecap:round; }
.gauge-fill  { fill:none; stroke-width:12; stroke-linecap:round; transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1); }
.gauge-number { font-family:var(--font-head); font-size:1.6rem; font-weight:800; fill:var(--text); text-anchor:middle; }
.gauge-label  { font-size:0.65rem; fill:var(--muted); text-anchor:middle; }

/* ============================
   TRANSACTIONS
   ============================ */
.tx-list { display:flex; flex-direction:column; gap:8px; }
.tx-item {
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px;
  transition:all 0.15s; cursor:pointer;
}
.tx-item:hover { background:var(--card2); border-color:var(--border2); transform:translateX(2px); }
.tx-item:active { transform:scale(0.98); }
.tx-icon {
  width:40px; height:40px; border-radius:12px;
  background:var(--card2); display:flex; align-items:center;
  justify-content:center; font-size:1.1rem; flex-shrink:0;
  border:1px solid var(--border);
}
.tx-info { flex:1; min-width:0; }
.tx-name { font-size:0.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-date { font-size:0.68rem; color:var(--muted); margin-top:2px; }
.tx-amount { font-family:var(--font-head); font-size:0.9rem; font-weight:800; white-space:nowrap; flex-shrink:0; }
.tx-amount.desp { color:var(--red); }
.tx-amount.rece { color:var(--green); }

/* ============================
   FATURAS TIMELINE
   ============================ */
.timeline-group { margin-bottom:20px; }
.timeline-month-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.timeline-month-name { font-family:var(--font-head);font-size:0.9rem;font-weight:700;color:var(--muted); }
.timeline-month-total { font-size:0.8rem;font-weight:700;color:var(--amber); }
.fatura-item {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px; margin-bottom:8px;
}
.fatura-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.fatura-name { font-size:0.85rem;font-weight:600;flex:1; }
.fatura-value { font-family:var(--font-head);font-size:0.9rem;font-weight:800;color:var(--amber); }
.fatura-meta { display:flex;align-items:center;justify-content:space-between; }
.fatura-parcela { font-size:0.68rem;color:var(--muted); }
.fatura-date { font-size:0.68rem;color:var(--muted); }

/* ============================
   DESAFIOS
   ============================ */
.desafio-item { background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px; }
.desafio-top { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px; }
.desafio-titulo { font-size:0.88rem;font-weight:600;flex:1; }
.desafio-xp {
  font-size:0.7rem;font-weight:700;color:var(--purple-light);
  background:var(--purple-dim);border:1px solid rgba(24,24,27,0.2);
  border-radius:99px;padding:2px 8px;flex-shrink:0;margin-left:8px;
}
.desafio-progress-label { display:flex;justify-content:space-between;font-size:0.7rem;color:var(--muted);margin-bottom:6px; }

/* ============================
   STREAK CALENDAR
   ============================ */
.streak-dot { display: none; } /* legado — removido */
.streak-dot:hover { transform:scale(1.2); }
.streak-dot.active { background:linear-gradient(135deg,#18181b,#53ddfc); box-shadow:0 0 6px rgba(24,24,27,0.35); }
.streak-dot.inactive { background:var(--card2); }
.streak-dot.today { background:linear-gradient(135deg,#f59e0b,#fcd34d); }

/* ============================
   SONHOS
   ============================ */
.sonho-card-i {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px;
  display:flex; align-items:flex-start; gap:10px; margin-bottom:8px;
}
.sonho-nome { font-size:0.85rem; font-weight:600; color:var(--text); }
.sonho-motivo { font-size:0.72rem;color:var(--muted);margin-top:3px;font-style:italic;line-height:1.4; }
.sonho-del { background:none;border:none;color:var(--muted2);cursor:pointer;font-size:1rem;padding:0 2px;flex-shrink:0;transition:color 0.2s; }
.sonho-del:hover { color:var(--red); }
.sonho-add-form { display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap; }
.sonho-input {
  flex:1;min-width:150px;background:var(--card2);border:1px solid var(--border2);
  color:var(--text);border-radius:10px;padding:10px 12px;
  font-size:0.85rem;font-family:var(--font-body);outline:none;transition:border 0.2s;
}
.sonho-input:focus { border-color:var(--purple); }
.sonho-add-btn {
  background:var(--purple-dim);border:1px solid rgba(24,24,27,0.3);
  color:var(--purple-light);border-radius:10px;padding:10px 14px;
  font-size:0.82rem;font-weight:700;cursor:pointer;font-family:var(--font-body);
  white-space:nowrap;transition:all 0.2s;
}
.sonho-add-btn:hover { background:rgba(124,58,237,0.28); }
.sonho-why-wrap { margin-top:8px;display:none; }
.sonho-why-input {
  width:100%;background:var(--card2);border:1px solid var(--border2);color:var(--text);
  border-radius:8px;padding:8px 10px;font-size:0.8rem;font-family:var(--font-body);
  outline:none;resize:none;transition:border 0.2s;
}
.sonho-why-input:focus { border-color:var(--purple); }

/* ============================
   BOTTOM NAV
   ============================ */
nav#app-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:rgba(13,13,22,0.88);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-evenly;
  height:62px; padding-bottom:env(safe-area-inset-bottom);
}
.nav-btn {
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;
  color:var(--muted2);padding:6px 12px;border-radius:12px;
  transition:color 0.2s;-webkit-tap-highlight-color:transparent;
  font-family:var(--font-body);
}
.nav-btn.active { color:var(--text); }
.nav-btn svg { width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.nav-btn span { font-size:0.6rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase; }
.nav-btn.active .nav-icon-wrap {
  background:linear-gradient(135deg,#18181b,#3f3f46);
  border-radius:10px;padding:4px 12px;color:white;
}

/* ============================
   SKELETON
   ============================ */
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.skeleton {
  border-radius:8px;
  background:linear-gradient(90deg,var(--card2) 25%,rgba(255,255,255,0.04) 50%,var(--card2) 75%);
  background-size:800px 100%;animation:shimmer 1.5s infinite;
}
.sk-h { height:16px;margin-bottom:8px; }
.sk-h.tall { height:28px; }
.sk-h.short { width:60%; }
.sk-card { height:90px;border-radius:var(--radius);margin-bottom:10px; }

/* ============================
   FULLSCREEN OVERLAYS
   ============================ */
.fullscreen {
  position:fixed;inset:0;z-index:200;
  background:#000000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:32px;
}
.fullscreen-icon { font-size:3.5rem;margin-bottom:8px; }
.fullscreen h2 { font-family:var(--font-head);font-size:1.6rem;font-weight:800;letter-spacing:-0.03em;color:#fff; }
.fullscreen p { color:rgba(255,255,255,0.5);font-size:0.9rem;line-height:1.6;max-width:280px; }

/* Login specific */
.login-wrap { width:100%;max-width:400px;padding:0 1.5rem; }
.login-glass {
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;padding:2rem;
}
.login-input {
  width:100%;padding:0.85rem 1rem;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;color:#ffffff;font-size:0.95rem;
  outline:none;box-sizing:border-box;transition:border 0.2s;font-family:var(--font-body);
}
.login-input::placeholder { color:rgba(255,255,255,0.3); }
.login-input:focus { border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.08); }
.login-label { display:block;font-size:0.72rem;color:rgba(255,255,255,0.5);margin-bottom:0.5rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase; }
#login-btn { background:#ffffff !important;color:#000000 !important;box-shadow:none !important; }
#login-btn:hover { background:rgba(255,255,255,0.88) !important;transform:translateY(-1px); }

/* ============================
   BUTTONS
   ============================ */
.btn-primary {
  background:linear-gradient(135deg,#7c3aed,#5b21b6);
  color:#ffffff !important;border:none;cursor:pointer;
  border-radius:14px;padding:14px 28px;
  font-family:var(--font-head);font-size:0.95rem;font-weight:700;
  transition:all 0.15s;
  box-shadow:0 4px 20px var(--purple-glow);
  text-decoration:none;display:inline-block;
}
.btn-primary:hover { transform:translateY(-1px);box-shadow:0 8px 28px var(--purple-glow); }
.btn-primary:active { transform:scale(0.97); }

/* ============================
   FILTER BAR
   ============================ */
.filter-bar { display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px; }
.filter-bar::-webkit-scrollbar { display:none; }
.chip {
  flex-shrink:0;padding:7px 16px;border-radius:99px;
  font-size:0.75rem;font-weight:700;cursor:pointer;border:none;
  font-family:var(--font-body);
  background:var(--card);color:var(--muted);
  border:1px solid var(--border);transition:all 0.2s;
}
.chip.active { background:var(--purple-dim);color:var(--purple-light);border-color:rgba(24,24,27,0.35); }

/* Período filter buttons */
.tx-periodo-btn {
  flex-shrink:0;padding:5px 12px;border-radius:99px;
  font-size:0.72rem;font-weight:700;cursor:pointer;
  font-family:var(--font-body);
  background:var(--card2);color:var(--muted);
  border:1px solid var(--border);transition:all 0.15s;white-space:nowrap;
}
.tx-periodo-btn.active { background:var(--purple-dim);color:var(--purple-light);border-color:rgba(24,24,27,0.35); }
.tx-periodo-btn:hover { border-color:var(--purple); color:var(--text); }

/* Circ cards com "Ver detalhes" */
.circ-card-inner { display:flex;flex-direction:column;align-items:center;gap:4px; }
.circ-ver-btn {
  font-size:0.6rem;font-weight:700;cursor:pointer;
  background:transparent;border:1px solid rgba(24,24,27,0.25);
  color:var(--purple-light);border-radius:10px;padding:2px 8px;
  font-family:var(--font-body);margin-top:2px;transition:all 0.15s;
}
.circ-ver-btn:hover { background:var(--purple-dim); }

/* Category limit circles */
.cat-circ-item { display:flex;flex-direction:column;align-items:center; }

.divider { height:1px;background:var(--border);margin:16px 0; }
.chart-wrap { position:relative; }
.chart-wrap canvas { display:block; }
.section { margin-bottom:18px; }

/* ============================
   GREETING
   ============================ */
.greeting-line { font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:4px; }
.greeting-name { font-family:var(--font-head);font-size:2rem;font-weight:800;letter-spacing:-0.04em;line-height:1.1;margin-bottom:4px; }
.greeting-sub { font-size:0.82rem;color:var(--muted); }

/* ============================
   PROFILE
   ============================ */
.profile-row { display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border); }
.profile-row:last-child { border-bottom:none; }
.profile-row-label { font-size:0.8rem;color:var(--muted); }
.profile-row-value { font-size:0.85rem;font-weight:600; }
.edit-input {
  background:var(--card2);border:1px solid var(--border2);color:var(--text);
  border-radius:8px;padding:7px 10px;font-size:0.85rem;font-family:var(--font-body);
  width:120px;text-align:right;outline:none;transition:border 0.2s;
}
.edit-input:focus { border-color:var(--purple); }
.save-btn {
  background:var(--purple-dim);border:1px solid rgba(24,24,27,0.25);
  color:var(--purple-light);border-radius:8px;padding:6px 12px;
  font-size:0.75rem;font-weight:700;cursor:pointer;font-family:var(--font-body);margin-left:8px;
}

/* ============================
   MODO BADGE
   ============================ */
.modo-badge {
  display:inline-flex;align-items:center;gap:5px;
  font-size:0.68rem;font-weight:700;letter-spacing:0.06em;
  padding:3px 10px;border-radius:99px;text-transform:uppercase;
}
.modo-badge.completo { background:var(--green-dim);color:var(--green);border:1px solid rgba(155,255,206,0.25); }
.modo-badge.basico   { background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(83,221,252,0.25); }

/* ============================
   WA FLOAT BUTTON
   ============================ */

.wa-btn:hover { transform:scale(1.1); }
.wa-btn:active { transform:scale(0.95); }
.wa-btn svg { width:24px;height:24px;fill:white; }

/* ============================
   ANIMATIONS
   ============================ */
@keyframes slideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes pulse-fire { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.fade-in { /* content always visible - animation is cosmetic only */ }

/* ============================
   DESKTOP NAV
   ============================ */
#desktop-nav {
  display:none;
  position:fixed;left:0;top:0;bottom:0;width:230px;
  background:rgba(10,10,18,0.9);backdrop-filter:blur(24px);
  border-right:1px solid var(--border);
  flex-direction:column;padding:0 14px 24px;gap:3px;z-index:99;
}
.desk-nav-logo {
  font-family:var(--font-head);font-size:1.25rem;font-weight:800;
  letter-spacing:-0.04em;padding:24px 12px 20px;
  background:linear-gradient(135deg,#bd9dff,#53ddfc);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.desk-nav-btn {
  display:flex;align-items:center;gap:10px;background:none;border:none;
  cursor:pointer;color:var(--muted);padding:11px 12px;border-radius:12px;
  font-family:var(--font-body);font-size:0.85rem;font-weight:600;
  transition:all 0.2s;width:100%;text-align:left;
}
.desk-nav-btn svg { width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; }
.desk-nav-btn:hover { background:var(--card);color:var(--text); }
.desk-nav-btn.active { background:var(--purple-dim);color:var(--purple-light);border:1px solid rgba(24,24,27,0.2); }

@media (min-width:900px) {
  body { padding-bottom:0; }
  header { padding:0 40px;left:230px; }
  main { max-width:1200px;padding:88px 36px 40px;margin-left:230px; }
  nav#app-nav { display:none !important; }
  
  #add-tx-btn { bottom:24px;right:80px; }
  #desktop-nav { display:flex !important; }
  .desktop-grid { display:block; }
  .chart-wrap { max-height:none !important; }
  #chart-donut, #chart-line { max-height:none; }
  .desktop-col-full { grid-column:1/-1; }
  .kpi-grid { grid-template-columns:repeat(4,1fr); }
  .kpi-card.wide { grid-column:span 2; }
  .home-bento { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
  .home-bento-hero { grid-column:1/-1; }
}
@media (max-width:899px) {
  #desktop-nav { display:none !important; }
  .desktop-grid { display:block; }
  .home-bento { display:block; }
}

/* ============================
   LOGIN SCREEN
   ============================ */


/* ══════════════════════════════════════
   EMPRÉSTIMOS
══════════════════════════════════════ */
.emp-section { margin-top: 20px; }
.emp-section-title { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.emp-card { background: var(--card); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; border-left: 3px solid var(--green); }
.emp-card.peguei { border-left-color: var(--red); }
.emp-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.emp-pessoa { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.emp-valor { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }
.emp-card.emprestei .emp-valor { color: var(--green); }
.emp-card.peguei .emp-valor { color: var(--red); }
.emp-detail { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
.emp-btn-pago { margin-top: 10px; background: transparent; border: 1px solid var(--muted); color: var(--muted); border-radius: 20px; padding: 4px 12px; font-size: 0.72rem; cursor: pointer; transition: all 0.2s; }
.emp-btn-pago:hover { border-color: var(--green); color: var(--green); }
.emp-totais { display: flex; gap: 12px; margin-bottom: 16px; }
.emp-total-card { flex: 1; background: var(--card2); border-radius: 12px; padding: 12px; text-align: center; }
.emp-total-label { font-size: 0.68rem; color: var(--muted); margin-bottom: 4px; }
.emp-total-val { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; }

/* ══════════════════════════════════════
   RESERVA DE EMERGÊNCIA
══════════════════════════════════════ */
.reserva-card { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; border: 1px solid rgba(var(--cyan-rgb, 34,211,238), 0.2); }
.reserva-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.reserva-title { font-weight: 700; color: var(--text); font-size: 0.9rem; }
.reserva-pct { font-family: var(--font-head); font-weight: 800; color: var(--cyan); font-size: 1rem; }
.reserva-valores { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; }
.reserva-atual { font-family: var(--font-head); font-weight: 700; color: var(--text); font-size: 1rem; }
.reserva-bar-bg { height: 8px; background: var(--card2); border-radius: 4px; overflow: hidden; }
.reserva-bar-fill { height: 100%; background: linear-gradient(90deg, var(--cyan, #22d3ee), var(--purple)); border-radius: 4px; transition: width 1s ease; }
.escudos-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,200,50,0.15); border: 1px solid rgba(255,200,50,0.3); color: #f5c518; border-radius: 20px; padding: 3px 10px; font-size: 0.72rem; font-weight: 700; margin-top: 6px; }


/* ══ MODAL EMPRÉSTIMO ══ */
.emp-modal-overlay {
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);
  align-items:flex-end;justify-content:center;
}
.emp-modal-overlay.open { display:flex; }
.emp-modal-box {
  background:var(--bg2);border-radius:24px 24px 0 0;
  padding:24px 20px 32px;width:100%;max-width:560px;
  border-top:1px solid var(--border2);
  max-height:90vh;overflow-y:auto;
}
.emp-modal-title {
  font-family:var(--font-head);font-size:1.1rem;font-weight:800;
  color:var(--text);margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.emp-tipo-toggle {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;
}
.emp-tipo-btn {
  padding:12px;border-radius:12px;border:2px solid var(--border2);
  background:var(--card);color:var(--muted);font-family:var(--font-body);
  font-size:0.82rem;font-weight:700;cursor:pointer;text-align:center;
  transition:all 0.2s;
}
.emp-tipo-btn.active-emprestei {
  border-color:var(--green);background:var(--green-dim);color:var(--green);
}
.emp-tipo-btn.active-peguei {
  border-color:var(--red);background:var(--red-dim);color:var(--red);
}
.emp-field { margin-bottom:14px; }
.emp-field label {
  display:block;font-size:0.72rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.emp-field input, .emp-field select {
  width:100%;padding:12px 14px;background:var(--card);
  border:1px solid var(--border2);border-radius:12px;
  color:var(--text);font-family:var(--font-body);font-size:0.9rem;
  outline:none;transition:border-color 0.2s;
}
.emp-field input:focus, .emp-field select:focus { border-color:var(--purple); }
.emp-juros-toggle {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;
}
.emp-juros-btn {
  padding:10px;border-radius:10px;border:1px solid var(--border2);
  background:var(--card);color:var(--muted);font-family:var(--font-body);
  font-size:0.78rem;font-weight:700;cursor:pointer;text-align:center;
  transition:all 0.2s;
}
.emp-juros-btn.active { border-color:var(--purple);background:var(--purple-dim);color:var(--purple-light); }
.emp-preview {
  background:var(--card);border-radius:12px;padding:14px;
  margin-bottom:16px;font-size:0.82rem;line-height:1.7;border:1px solid var(--border2);
}
.emp-preview-row { display:flex;justify-content:space-between;align-items:center; }
.emp-preview-val { font-family:var(--font-head);font-weight:800; }
.btn-emp-salvar {
  width:100%;padding:15px;border:none;border-radius:14px;
  font-family:var(--font-body);font-size:0.95rem;font-weight:800;
  cursor:pointer;transition:all 0.2s;color:#fff;
  background:linear-gradient(135deg,#18181b,var(--cyan));
}
.btn-emp-salvar:hover { opacity:0.9;transform:translateY(-1px); }
.btn-emp-cancel {
  width:100%;padding:12px;border:1px solid var(--border2);border-radius:14px;
  background:transparent;color:var(--muted);font-family:var(--font-body);
  font-size:0.88rem;font-weight:600;cursor:pointer;margin-top:8px;
}

/* ══ CARD AÇÕES EXTRATO ══ */
.extrato-action-cards {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;
}
.extrato-action-card {
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--radius-sm);padding:14px;cursor:pointer;
  transition:all 0.2s;text-align:center;
}
.extrato-action-card:hover { border-color:var(--purple);transform:translateY(-2px); }
.extrato-action-icon { font-size:1.5rem;margin-bottom:6px; }
.extrato-action-label { font-size:0.78rem;font-weight:700;color:var(--text);margin-bottom:2px; }
.extrato-action-sub { font-size:0.68rem;color:var(--muted);line-height:1.4; }


/* ══ CALENDÁRIO DE OFENSIVAS ══ */
.cal-grid-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.cal-months-row {
  display: flex;
  gap: 12px;
  min-width: max-content;
}
.cal-month {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-month-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
  text-align: center;
}
.cal-week-headers {
  display: grid;
  grid-template-columns: repeat(7, 14px);
  gap: 3px;
  margin-bottom: 3px;
}
.cal-week-header {
  font-size: 0.58rem;
  color: var(--muted2);
  text-align: center;
  font-weight: 600;
}
.cal-weeks {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-week-row {
  display: grid;
  grid-template-columns: repeat(7, 14px);
  gap: 3px;
}
.cal-day {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  transition: transform 0.15s;
  cursor: default;
}
.cal-day:hover { transform: scale(1.3); }
.cal-day.empty  { background: transparent; }
.cal-day.inactive { background: var(--card2); }
.cal-day.active { background: linear-gradient(135deg, var(--purple), var(--cyan)); box-shadow: 0 0 4px var(--purple-glow); }
.cal-day.today  { background: var(--amber); box-shadow: 0 0 6px rgba(252,211,77,0.4); }
.cal-day.future { background: var(--card2); opacity: 0.3; }

/* ══ MODAL CSV ══ */
.csv-preview-overlay {
  display: none; position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(6px);
  align-items: flex-end; justify-content: center;
}
.csv-preview-overlay.open { display: flex; }
.csv-preview-box {
  background: var(--bg2); border-radius: 24px 24px 0 0;
  padding: 24px 20px 32px; width: 100%; max-width: 600px;
  border-top: 1px solid var(--border2); max-height: 85vh; overflow-y: auto;
}
.csv-preview-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: 16px; }
.csv-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.csv-stat { background: var(--card); border-radius: 12px; padding: 12px; text-align: center; }
.csv-stat-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.csv-stat-val { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; }
.csv-tx-list { max-height: 220px; overflow-y: auto; margin-bottom: 16px; }
.csv-tx-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.8rem; }
.csv-tx-desc { color: var(--text); font-weight: 500; flex: 1; margin-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csv-tx-val  { color: var(--red); font-family: var(--font-head); font-weight: 700; white-space: nowrap; }
.csv-tx-cat  { font-size: 0.65rem; color: var(--muted); display: block; }
.btn-csv-confirm { width: 100%; padding: 15px; border: none; border-radius: 14px; background: linear-gradient(135deg, var(--purple), var(--cyan)); color: #fff; font-family: var(--font-body); font-size: 0.95rem; font-weight: 800; cursor: pointer; margin-bottom: 8px; }
.btn-csv-cancel  { width: 100%; padding: 12px; border: 1px solid var(--border2); border-radius: 14px; background: transparent; color: var(--muted); font-family: var(--font-body); font-size: 0.88rem; cursor: pointer; }


/* ══ LOGO ══ */
.lumnis-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  /* Logo is white on black - shows naturally on dark bg */
  transition: filter 0.3s;
}
[data-theme="white"] .lumnis-logo-img {
  filter: invert(1); /* invert to black on light theme */
}
.lumnis-logo-top {
  height: 22px;
  width: auto;
  object-fit: contain;
}
[data-theme="white"] .lumnis-logo-top {
  filter: invert(1);
}


/* ══ FATURAS POR CARTÃO ══ */
.cartao-tab-bar {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 4px; margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}
.cartao-tab-btn {
  white-space: nowrap; padding: 7px 14px;
  border-radius: 20px; font-size: 0.78rem; font-weight: 700;
  border: 1px solid var(--border2); background: var(--card);
  color: var(--muted); cursor: pointer; font-family: var(--font-body);
  transition: all 0.2s;
}
.cartao-tab-btn.active {
  background: var(--purple-dim); border-color: var(--purple);
  color: var(--purple-light);
}
.fat-chart-wrap {
  background: var(--card); border-radius: var(--radius-sm);
  padding: 14px; margin-bottom: 16px; overflow-x: auto;
}
.fat-chart-title {
  font-size: 0.72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px;
}
.fat-bar-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; min-width: 0;
}
.fat-bar-label {
  font-size: 0.72rem; color: var(--muted); width: 52px;
  flex-shrink: 0; text-align: right;
}
.fat-bar-track {
  flex: 1; height: 8px; background: var(--card2);
  border-radius: 4px; overflow: hidden; position: relative;
}
.fat-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #18181b, var(--cyan));
  transition: width 1s cubic-bezier(.2,.8,.2,1);
  min-width: 4px;
}
.fat-bar-fill.current {
  background: linear-gradient(90deg, var(--amber), #f97316);
}
.fat-bar-val {
  font-size: 0.72rem; font-family: var(--font-head); font-weight: 700;
  color: var(--text); width: 72px; flex-shrink: 0; text-align: right;
}
.fat-bar-val.current { color: var(--amber); }


/* ══ CIRCULAR PROGRESS (faturas + categorias) ══ */
.circ-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.circ-card {
  background: var(--card);
  border-radius: 16px;
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}
.circ-card:hover { transform: translateY(-2px); border-color: var(--border2); }
.circ-card.current-month { border-color: var(--amber); background: var(--amber-dim); }
.circ-svg { width: 72px; height: 72px; }
.circ-label { font-size: 0.72rem; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.circ-val { font-family: var(--font-head); font-weight: 800; font-size: 0.88rem;
  color: var(--text); text-align: center; }
.circ-sub { font-size: 0.65rem; color: var(--muted2); text-align: center; }

/* ══ CARD CARTÃO (bento) ══ */
.cartao-bento {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.cartao-card {
  background: linear-gradient(135deg, var(--card) 0%, var(--card2) 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.cartao-card:hover { transform: translateY(-3px); border-color: var(--border2); }
.cartao-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  opacity: 0.06;
}
.cartao-card.danger::before { background: var(--red); }
.cartao-card.ok::before { background: var(--purple); }
.cartao-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.cartao-card-bank { font-family: var(--font-head); font-weight: 800; font-size: 0.95rem; color: var(--text); }
.cartao-card-digits { font-size: 0.68rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.cartao-card-badge {
  padding: 3px 10px; border-radius: 20px; font-size: 0.68rem; font-weight: 700;
}
.badge-paga { background: var(--green-dim); color: var(--green); border: 1px solid rgba(155,255,206,0.2); }
.badge-aberta { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(252,211,77,0.2); }
.badge-danger { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,110,132,0.2); }
.cartao-card-valor { font-family: var(--font-head); font-weight: 900; font-size: 1.6rem; color: var(--text); margin-bottom: 12px; }
.cartao-card-bar-track { height: 6px; background: var(--card2); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.cartao-card-bar-fill { height: 100%; border-radius: 3px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.cartao-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border); }
.cartao-card-venc { font-size: 0.72rem; color: var(--muted); }
.cartao-card-venc strong { color: var(--text); display: block; font-size: 0.82rem; }

/* ══ TABS DE FATURAS ══ */
.fat-tabs { display: flex; gap: 4px; background: var(--card2); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.fat-tab-btn { flex: 1; padding: 8px 12px; border-radius: 8px; border: none; background: transparent;
  color: var(--muted); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; cursor: pointer;
  transition: all 0.2s; white-space: nowrap; }
.fat-tab-btn.active { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }

/* ══ CAT CIRCULAR (home + perfil) ══ */
.cat-circ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.cat-circ-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; background: var(--card); border-radius: 14px;
  border: 1px solid var(--border); transition: all 0.2s; cursor: default;
}
.cat-circ-item:hover { border-color: var(--border2); transform: translateY(-2px); }
.cat-circ-item svg { width: 56px; height: 56px; }
.cat-circ-nome { font-size: 0.7rem; font-weight: 700; color: var(--text); text-align: center; }
.cat-circ-valores { font-size: 0.62rem; color: var(--muted); text-align: center; }


/* ═══════════════════════════════════════
   PATRIMÔNIO & INVESTIMENTOS
═══════════════════════════════════════ */
.inv-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.inv-card:hover { border-color: rgba(24,24,27,0.3); }
.inv-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.inv-info { flex: 1; min-width: 0; }
.inv-nome { font-size: 0.9rem; font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-meta { font-size: 0.7rem; color: var(--muted); }
.inv-valores { text-align: right; flex-shrink: 0; }
.inv-atual { font-family: var(--font-head); font-size: 0.95rem; font-weight: 800; }
.inv-rent { font-size: 0.68rem; margin-top: 2px; }
.inv-rent.pos { color: var(--green); }
.inv-rent.neg { color: var(--red); }
.inv-rent.neu { color: var(--muted); }

/* Modal investimento */
.inv-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 460;
  background: rgba(0,0,0,0.82);
  align-items: flex-end; justify-content: center;
}
.inv-modal-box {
  background: var(--card);
  border-radius: 22px 22px 0 0;
  padding: 24px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
}
.inv-form-group { margin-bottom: 16px; }
.inv-form-label { font-size: 0.75rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.04em; }
.inv-form-input {
  width: 100%; background: var(--card2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 10px 12px; color: var(--text);
  font-family: var(--font-body); font-size: 0.88rem; box-sizing: border-box;
}
.inv-form-input:focus { outline: none; border-color: var(--purple); }
.inv-tipo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.inv-tipo-btn {
  background: var(--card2); border: 1.5px solid var(--border2);
  border-radius: 10px; padding: 8px 4px; text-align: center;
  cursor: pointer; font-size: 0.68rem; font-weight: 700; color: var(--muted);
  transition: all 0.15s; font-family: var(--font-body);
}
.inv-tipo-btn.selected { background: rgba(24,24,27,0.14); border-color: var(--purple); color: var(--purple-light); }
.inv-tipo-icon { font-size: 1.2rem; display: block; margin-bottom: 2px; }

/* ═══════════════════════════════════════
   PERÍODO PICKER MODAL
═══════════════════════════════════════ */
.periodo-picker-overlay {
  display: none; position: fixed; inset: 0; z-index: 460;
  background: rgba(0,0,0,0.82);
  align-items: flex-end; justify-content: center;
}
.periodo-picker-box {
  background: var(--card);
  border-radius: 22px 22px 0 0;
  padding: 24px;
  width: 100%; max-width: 640px;
  max-height: 82vh; overflow-y: auto;
}
.periodo-mes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.periodo-mes-btn {
  background: var(--card2); border: 1.5px solid var(--border2);
  border-radius: 10px; padding: 8px 4px; text-align: center;
  cursor: pointer; font-size: 0.72rem; font-weight: 700; color: var(--muted);
  font-family: var(--font-body); transition: all 0.15s;
}
.periodo-mes-btn:hover { border-color: var(--purple); color: var(--text); }
.periodo-mes-btn.active { background: var(--purple-dim); border-color: var(--purple); color: var(--purple-light); }
.periodo-custom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.periodo-section-label { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }

/* ============================================================== */

.summary-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;transition:transform 0.2s}.summary-val{font-family:var(--font-head);font-size:1.25rem;font-weight:800;letter-spacing:-0.03em;margin-top:4px}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Lumnis (max-width: 700px)
   Desktop (≥900px) permanece intocado.
══════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── LAYOUT GERAL ── */
  main { padding: 76px 14px 90px !important; }
  .section-title { font-size: 1.25rem !important; margin-bottom: 12px !important; }
  .label { font-size: 0.65rem !important; }

  /* ── HEADER ── */
  header { padding: 0 16px !important; height: 58px !important; }

  /* ── NAV BAR ── */
  nav#app-nav { height: 62px !important; }
  .nav-btn { padding: 4px 8px !important; gap: 2px !important; }
  .nav-btn svg { width: 20px !important; height: 20px !important; }
  .nav-btn span { font-size: 0.6rem !important; letter-spacing: 0.02em !important; }

  /* ── KPI CARDS ── */
  .kpi-grid { gap: 8px !important; }
  .kpi-card { padding: 12px !important; }
  .kpi-label { font-size: 0.62rem !important; margin-bottom: 4px !important; }
  .kpi-value { font-size: 1.15rem !important; }
  .kpi-sub { font-size: 0.62rem !important; }

  /* ── CARDS GERAIS ── */
  .card { padding: 14px !important; border-radius: 14px !important; }
  .card-lg { padding: 16px !important; }
  .card-sm { padding: 10px !important; }

  /* ── FILTER BAR / CHIPS ── */
  .filter-bar { gap: 6px !important; margin-bottom: 10px !important; }
  .chip { padding: 6px 13px !important; font-size: 0.72rem !important; }
  .tx-periodo-btn { padding: 5px 10px !important; font-size: 0.68rem !important; }

  /* ── DESKTOP GRID → STACK ── */
  .desktop-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── HOME: DONUT / PIE LEGEND ── */
  .home-pie-legend { font-size: 0.65rem !important; max-width: 100% !important; }
  .home-pie-legend-item {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
  }
  .pie-legend-row { font-size: 0.63rem !important; gap: 4px !important; }

  /* Distribuição do mês: empilha canvas + legenda verticalmente */
  #home-pie-card > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #home-pie-card canvas {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  #home-pie-card > div:last-child > div:first-child {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
  }
  /* Legenda: mostra nome + % sem o valor BRL (economiza espaço) */
  #home-pie-legend { font-size: 0.75rem !important; gap: 5px !important; }
  #home-pie-legend > div .pie-val-col { display: none !important; }
  #home-pie-legend > div span:last-child { display: none !important; }
  #home-pie-legend > div span[style*="min-width"] { display: none !important; }
  /* Esconde valor BRL da legenda do pie — só mostra % */
  .pie-val-col { display: none !important; }
  /* Nome da categoria ocupa toda a linha sem truncar */
  #home-pie-legend > div span[style*="flex:1"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* ── FATURAS: 3 cards destaque ──
     Scrollável horizontalmente em vez de 3 colunas apertadas */
  #fat-meses-destaque {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #fat-meses-destaque > div {
    min-width: 160px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }
  #fat-meses-destaque::-webkit-scrollbar { display: none !important; }

  /* Valor nos cards de destaque: tamanho responsivo */
  #fat-meses-destaque [style*="font-size:1.6rem"],
  #fat-meses-destaque [style*="font-size:1.4rem"] {
    font-size: 1.15rem !important;
    word-break: break-word !important;
  }

  /* ── FATURAS: circ-card grid ── */
  .circ-wrap { gap: 10px !important; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; }
  .circ-card { padding: 10px 6px !important; min-width: 0 !important; }
  .circ-svg, .circ-card svg { width: 58px !important; height: 58px !important; }
  .circ-label { font-size: 0.65rem !important; }
  .circ-val { font-size: 0.8rem !important; }
  .circ-ver-btn { font-size: 0.57rem !important; padding: 2px 6px !important; }

  /* ── FATURAS: cartao bento (lista de cartões) ── */
  .cartao-bento { grid-template-columns: 1fr !important; gap: 10px !important; }
  .cartao-card { padding: 16px !important; border-radius: 16px !important; }
  .cartao-card-valor { font-size: 1.35rem !important; }
  .cartao-card-bank { font-size: 0.88rem !important; }

  /* ── FATURAS: tab buttons (Por Mês / Lista / Comparar) ── */
  .fat-tab-btn { font-size: 0.73rem !important; padding: 9px 8px !important; }

  /* ── TRANSAÇÕES: item de lista ── */
  .tx-item { padding: 11px 12px !important; border-radius: 12px !important; }
  .tx-nome { font-size: 0.85rem !important; }
  .tx-cat { font-size: 0.65rem !important; }
  .tx-valor { font-size: 0.92rem !important; }
  .tx-data { font-size: 0.62rem !important; }

  /* ── EXTRATO: stats do período ── */
  #extrato-stats { font-size: 0.82rem !important; }

  /* ── HOME: bento / summary cards ── */
  .home-bento-hero { border-radius: 14px !important; }
  #summary-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .summary-card { padding: 11px !important; border-radius: 12px !important; }
  .summary-val { font-size: 1.1rem !important; }

  /* ── HOME: streak hero ── */
  .streak-hero-card { padding: 20px 16px !important; border-radius: 16px !important; }
  .streak-hero-num { font-size: 3rem !important; }

  /* ── HOME: cat-circ-grid ── */
  .cat-circ-grid { gap: 8px !important; }

  /* ── METAS ── */
  .meta-card { padding: 14px !important; border-radius: 14px !important; }

  /* ── RESERVA ── */
  .reserva-card { padding: 14px !important; }

  /* ── EMPRÉSTIMOS ── */
  .emp-card { padding: 12px !important; }
  .emp-totais { gap: 8px !important; }
  .emp-total-card { padding: 10px !important; }
  .emp-total-val { font-size: 0.95rem !important; }

  /* ── MODAL BOTTOM SHEET ── */
  .emp-modal-box { padding: 20px 16px 28px !important; border-radius: 20px 20px 0 0 !important; }
  .emp-modal-title { font-size: 1rem !important; }

  /* ── PERFIL ── */
  .perfil-section { padding: 14px !important; }

  /* ── BOTÃO FAB (+) ── */
  #add-tx-btn { bottom: 70px !important; right: 16px !important; width: 50px !important; height: 50px !important; font-size: 1.3rem !important; }

  /* ── TOASTS ── */
  #toast-container { bottom: 74px !important; left: 12px !important; right: 12px !important; }
}

/* ═══════════════════════════════════════
   COTAÇÕES BTC/USD com sparklines
═══════════════════════════════════════ */
.pat-cot-strip {
  display: flex; gap: 10px; margin-bottom: 14px;
}
.pat-cot-card {
  flex: 1; background: var(--card2); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px; cursor: pointer;
  transition: border-color 0.2s; display: flex; flex-direction: column; gap: 6px;
}
.pat-cot-card:hover { border-color: rgba(24,24,27,0.35); }
.pat-cot-lbl { font-size: 0.6rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pat-cot-price { font-family: var(--font-head); font-size: 1rem; font-weight: 800; }
.pat-cot-chg { font-size: 0.65rem; font-weight: 700; }
.pat-cot-bottom { display: flex; justify-content: space-between; align-items: center; }

/* ═══════════════════════════════════════
   MODAL COTAÇÃO CHART
═══════════════════════════════════════ */
.cot-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 480;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(12px);
  align-items: flex-end; justify-content: center;
}
.cot-modal-overlay.open { display: flex; }
.cot-modal-box {
  background: var(--card); border-radius: 22px 22px 0 0;
  width: 100%; max-width: 640px; padding-bottom: 28px;
  transform: translateY(0);
}
.cot-modal-box::before {
  content: ''; display: block; width: 36px; height: 4px;
  background: var(--border2); border-radius: 2px; margin: 12px auto 0;
}
.cot-modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px 12px; }
.cot-modal-name { font-family: var(--font-head); font-size: 1.5rem; font-weight: 900; letter-spacing: 1px; }
.cot-modal-price { font-family: var(--font-head); font-size: 1.8rem; font-weight: 900; text-align: right; line-height: 1; }
.cot-modal-chg { font-size: 0.7rem; font-weight: 700; margin-top: 2px; }
.cot-tab-row { display: flex; gap: 6px; padding: 0 20px 12px; }
.cot-tab-btn {
  background: none; border: 1px solid var(--border2); color: var(--muted);
  padding: 5px 14px; border-radius: 8px; font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.cot-tab-btn.on { background: rgba(124,58,237,0.15); border-color: var(--purple); color: var(--purple-light); }
.cot-svg-wrap { padding: 0 12px 4px; min-height: 130px; }
.cot-footer { display: flex; justify-content: space-between; padding: 4px 20px; font-size: 0.6rem; color: var(--muted); }
.cot-stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 10px 20px 0; }
.cot-stat { background: var(--card2); border-radius: 10px; padding: 10px; text-align: center; }
.cot-stat-lbl { font-size: 0.6rem; color: var(--muted); margin-bottom: 4px; }
.cot-stat-val { font-family: var(--font-head); font-size: 0.9rem; font-weight: 800; }

/* ═══════════════════════════════════════
   METAS DE PATRIMÔNIO
═══════════════════════════════════════ */
.meta-pat-card {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px;
  margin-bottom: 10px; transition: border-color 0.2s;
}
.meta-pat-card.atingida { border-color: rgba(5,150,105,0.4); background: rgba(5,150,105,0.05); }
.meta-pat-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.meta-pat-nome { font-size: 0.88rem; font-weight: 700; }
.meta-pat-prazo { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }
.meta-pat-pct { font-family: var(--font-head); font-size: 1.1rem; font-weight: 900; }
.meta-pat-bar-track { height: 6px; background: var(--card); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.meta-pat-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.meta-pat-vals { display: flex; justify-content: space-between; font-size: 0.7rem; }
.meta-pat-curr { color: var(--text); font-weight: 700; }
.meta-pat-targ { color: var(--muted); }
.meta-pat-falta { font-size: 0.65rem; color: var(--muted); margin-top: 4px; }
.meta-pat-btns { display: flex; gap: 6px; margin-top: 8px; }
.meta-pat-btn {
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 4px 10px; font-size: 0.65rem; cursor: pointer;
  font-family: var(--font-body);
}
.meta-pat-btn:hover { border-color: var(--purple); color: var(--text); }
.meta-pat-btn.del { color: var(--red); }

/* P&L inline nos cards de investimento */
.inv-pl-badge {
  font-size: 0.6rem; font-weight: 700; padding: 2px 6px;
  border-radius: 5px; margin-top: 3px; display: inline-block;
}
.inv-pl-badge.pos { background: rgba(5,150,105,0.15); color: var(--green); }
.inv-pl-badge.neg { background: rgba(255,110,132,0.12); color: var(--red); }

/* CDI picker buttons */
.cdi-opt-btn {
  background: var(--card2); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 7px 4px; cursor: pointer;
  font-size: 0.62rem; color: var(--muted); text-align: center;
  line-height: 1.4; font-family: var(--font-body); transition: all 0.15s;
}
.cdi-opt-btn:hover { border-color: var(--purple); color: var(--text); }
.cdi-opt-btn.selected { background: rgba(5,150,105,0.12); border-color: var(--green); color: var(--green); }
.cdi-opt-btn div:first-child { color: var(--text); }
.cdi-opt-btn.selected div:first-child { color: var(--green); }

/* ═══════════════════════════════════════════════════════
   PERFORMANCE MOBILE — scroll suave, GPU layers, sem zoom
   ═══════════════════════════════════════════════════════ */

/* Força GPU layer em elementos principais */
main, #app-nav, header {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: scroll-position;
}

/* Scroll suave e momentum no iOS */
main {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

/* Previne zoom no iOS ao focar inputs (mín 16px) */
input, select, textarea {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
}
/* Exceção: inputs decorativos (badges, valores) */
input[type="number"],
input[type="date"] {
  font-size: 16px !important;
}

/* Remove delay de 300ms em todos os toques */
* {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Modais: scroll interno suave */
[id^="modal-"], .modal-box, .emp-modal-box, #trocas-modal-box {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Evita bounce indesejado no iOS */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* ── MOBILE-ONLY MELHORIAS ──────────────────────────── */
@media (max-width: 700px) {

  /* Scroll principal sem travamento */
  main {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  /* Inputs: sem zoom, tamanho mínimo de toque 44px */
  input, select, textarea {
    min-height: 44px;
    font-size: 16px !important;
  }
  /* Botões menores não precisam de 44px de altura */
  .chip, .tx-periodo-btn, .circ-ver-btn, .fat-tab-btn,
  .nav-btn, .fat-row-badge {
    min-height: unset;
  }

  /* ── MODAIS BOTTOM-SHEET: altura máxima real ── */
  #modal-mes-fatura > div,
  [id^="modal-"] > div,
  .modal-box, .emp-modal-box {
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  /* ── IA LUMNIS: input fixo no rodapé ── */
  #ia-input-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  #ia-input {
    font-size: 16px !important;
  }
  /* ── IA CHAT: layout flex-column para input fixo no fundo ── */
    /* substituido pelo bloco autoritativo no fim do arquivo */
  main#app-main.ia-active {
    overflow: hidden !important;
    padding: 0 !important;
  }
  #ia-chat-box {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 68px 16px 12px !important;
    min-height: 0 !important;
  }
  #ia-input-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0 !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  /* Enviar button: alto contraste */
  #ia-input-bar button {
    background: #ffffff !important;
    color: #18181b !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    min-width: 76px !important;
  }

  /* ── FATURAS: círculos com melhor tap area ── */
  .circ-card {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(124,58,237,0.15) !important;
  }
  .circ-ver-btn {
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── MAPA DOS SONHOS: grid 1 coluna ── */
  #sonhos-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── EXTRATO: filtros com scroll horizontal ── */
  .filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
    scroll-snap-type: x mandatory !important;
  }
  .filter-bar::-webkit-scrollbar { display: none !important; }
  .chip { scroll-snap-align: start !important; white-space: nowrap !important; }

  /* ── SUPORTE: formulário full-width ── */
  #tab-suporte .perfil-section input,
  #tab-suporte .perfil-section select,
  #tab-suporte .perfil-section textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── PERFIL: campos full-width ── */
  .perfil-section input, .perfil-section select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── COMPARAR: scroll horizontal suave ── */
  #fat-comparar-chart > div {
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }

  /* ── PATRIMÔNIO: charts menores ── */
  #pat-donut-canvas {
    max-width: 180px !important;
    max-height: 180px !important;
    margin: 0 auto !important;
  }

  /* ── TRANSAÇÕES: swipe para deletar (visual hint) ── */
  .tx-item {
    position: relative;
    overflow: hidden;
  }

  /* ── CARTÕES BANCÁRIOS: botões em coluna no mobile ── */
  .cartao-card-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .cartao-card-footer > div {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .cartao-card-footer button {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
  }

  /* ── FAB com safe area ── */
  #add-tx-btn {
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }

  /* ── TOAST com safe area ── */
  #toast-container {
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }

  /* ── NAV BAR com safe area ── */
  nav#app-nav {
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: calc(62px + env(safe-area-inset-bottom)) !important;
  }

  /* ── HEADER logo + ícones ── */
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* ── SCROLL HORIZONTAL: esconde scrollbar mas mantém scroll ── */
  .circ-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  /* ── EMPRÉSTIMOS: cards full-width ── */
  .emp-card { border-radius: 14px !important; }
  .emp-totais {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── INPUT DATE: altura correta no iOS ── */
  input[type="date"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    line-height: normal !important;
  }

  /* ── SELECT NATIVO: aparência iOS ── */
  select {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
  }

  /* ── TEXTO LEGÍVEL ── */
  .circ-val { font-size: 0.82rem !important; }
  .circ-label { font-size: 0.64rem !important; }

  /* ── SEÇÕES COLAPSÁVEIS: padding menor ── */
  .section { padding-bottom: 8px !important; }

  /* ── BENTO HOME: saldo total legível ── */
  .home-bento-hero .big-val {
    font-size: clamp(1.4rem, 7vw, 2rem) !important;
  }
}

/* ── TABLET (701px – 899px) ── */
@media (min-width: 701px) and (max-width: 899px) {
  main { padding: 80px 24px 40px !important; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .circ-wrap { grid-template-columns: repeat(4, 1fr) !important; }
  .cartao-bento { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ── RENDIMENTOS / DIVIDENDOS ──────────────────────────────────── */
.rend-tabs { display:flex; gap:8px; margin-bottom:16px; }
.rend-tab  { flex:1; text-align:center; padding:9px 0; border-radius:10px;
             font-size:0.78rem; font-weight:600; cursor:pointer;
             border:1px solid var(--border2); color:var(--muted);
             background:var(--card2); transition:all 0.2s; }
.rend-tab.active { background:var(--text); color:var(--bg); border-color:transparent; }
.rend-bar-wrap  { display:flex; gap:6px; align-items:flex-end; height:80px; margin:16px 0; }
.rend-bar-col   { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.rend-bar       { width:100%; border-radius:4px 4px 0 0; min-height:4px;
                  background:var(--green); transition:height 0.6s cubic-bezier(.2,.8,.2,1); }
.rend-bar-label { font-size:0.55rem; color:var(--muted); white-space:nowrap; }
.rend-bar-val   { font-size:0.6rem; font-weight:700; color:var(--green); }
.rend-ticker-row { display:flex; justify-content:space-between; align-items:center;
                   padding:10px 0; border-bottom:1px solid var(--border); }
.rend-ticker-row:last-child { border:none; }
.rend-ticker-emoji { font-size:1.2rem; flex-shrink:0; }
.rend-ticker-info  { flex:1; min-width:0; margin:0 10px; }
.rend-ticker-name  { font-size:0.82rem; font-weight:600; color:var(--text); }
.rend-ticker-sub   { font-size:0.65rem; color:var(--muted); margin-top:1px; }
.rend-ticker-val   { font-size:0.9rem; font-weight:800; color:var(--green);
                     font-family:var(--font-head); }
.rend-total-card   { background:var(--card2); border-radius:14px; padding:16px;
                     text-align:center; margin-bottom:16px; }
.rend-total-label  { font-size:0.65rem; color:var(--muted); text-transform:uppercase;
                     letter-spacing:.08em; margin-bottom:4px; }
.rend-total-val    { font-family:var(--font-head); font-size:2rem; font-weight:900;
                     color:var(--green); }
.rend-total-sub    { font-size:0.72rem; color:var(--muted); margin-top:4px; }
.rend-proj-bar { height:8px; background:var(--border); border-radius:4px; margin:8px 0; overflow:hidden; }
.rend-proj-fill { height:100%; background:var(--green); border-radius:4px;
                  transition:width 1s cubic-bezier(.2,.8,.2,1); }


/* Período pills do Rendimentos */
.rend-period-pill {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--muted);
  letter-spacing: .04em;
  transition: all 0.15s;
  user-select: none;
}
.rend-period-pill.active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}


/* ── Rendimentos pills ─────────────────────────────────── */
.rend-type-pill, .rend-period-pill {
  padding: 5px 14px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); background: var(--card2);
  color: var(--muted); transition: all .15s; user-select: none; white-space: nowrap;
}
.rend-type-pill.active, .rend-period-pill.active {
  background: var(--text); color: var(--bg); border-color: transparent;
}
.rend-ativo-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.rend-ativo-row:last-child { border: none; }
.rend-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.7rem; padding: 3px 10px; border-radius: 20px;
  background: var(--card2); border: 1px solid var(--border);
}


/* Rendimentos V3 */
.rend-ftab {
  font-size: 0.65rem; font-weight: 600; padding: 4px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--card2); color: var(--muted);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.rend-ftab.active { background: var(--text); color: var(--bg); border-color: transparent; }
.rend-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rend-row:last-child { border: none; }
.rend-bar-inv { height: 3px; border-radius: 2px; margin-top: 3px; transition: width .6s ease; }
.rend-bar-inv.g { background: var(--green); }
.rend-bar-inv.r { background: var(--red); }
/* Meta investimento */
.meta-inv-card { background: var(--card2); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.meta-inv-bar-track { height: 6px; background: var(--border); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.meta-inv-bar-fill { height: 100%; border-radius: 3px; background: var(--green); transition: width 1s cubic-bezier(.4,0,.2,1); }


/* ── Mobile: inputs nunca menores que 16px (evita zoom iOS) ── */
@media (max-width: 640px) {
  input, select, textarea { font-size: 1rem !important; }
  .inv-form-input { font-size: 1rem !important; }
  /* Projeção: grid single column no mobile */
  #pj-results { grid-template-columns: 1fr 1fr !important; }
  /* Rendimentos: summary row 2x2 no mobile */
  #rend-filter-tabs { gap: 4px !important; }
  .rend-ftab { font-size: 0.6rem !important; padding: 3px 8px !important; }
}

/* ============================================================== */

@keyframes slideUp { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes tabSlideInRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes tabSlideInLeft  { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
.tab-slide-right { animation: tabSlideInRight 0.22s ease forwards; }
.tab-slide-left  { animation: tabSlideInLeft  0.22s ease forwards; }

/* ── MOBILE SCROLL FIX ──────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  overscroll-behavior-y: contain;
}
/* Elementos interativos */
button, a, .card, .kpi-card, .inv-row {
  touch-action: manipulation;
}
/* Modal: trava scroll do main */
.modal-open main#app-main { overflow-y: hidden !important; }

/* Tabela análise empréstimos — scroll horizontal no mobile */
#emp-periodo-section, .emp-analise-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
#emp-periodo-section table {
  min-width: 300px;
  width: 100%;
}
/* Faturas do mês no extrato — visível e sem vazar */
#faturas-extrato-section {
  margin-right: 0 !important;
  margin-bottom: 8px;
  overflow: hidden;
}
#faturas-extrato-list > div {
  background: var(--card);
  border-radius: 0;
}
/* Comparar faturas — gráfico visível no mobile */
#fat-view-comparar {
  overflow-x: visible !important;
}
#fat-comparar-chart {
  min-height: 260px;
  padding-bottom: 24px;
}
/* IA tab — o layout flex ja controla o espaco; padding fixo aqui
   empurrava o input para baixo do nav. */


/* ═══════════════════════════════════════════════════════
   MOBILE SCROLL — CONTAINER APPROACH
   Navegação header(64px) + nav(62px) ficam fixos.
   main#app-main é o único scroll container no mobile.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  html {
    height: 100%;
    overflow: hidden;
  }
  body {
    height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    overscroll-behavior: none !important;
  }
  main#app-main {
    /* Sem header: o main vai do topo ate o nav. --nav-h e medido em
       runtime por medirChrome() porque o nav declara 62px mas mede
       mais (safe-area por dentro + conteudo que nao encolhe). */
    height: calc(100dvh - var(--nav-h, 74px)) !important;
    min-height: unset !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    /* header removido: sobra apenas a safe-area do topo do aparelho */
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 80px !important;
    box-sizing: border-box !important;
    /* Garante que o elemento é o scroll root para gestos touch */
    touch-action: pan-y !important;
  }
  /* Tabs dentro do main devem ser block puro, sem overflow próprio */
  .tab-view.active {
    min-height: unset !important;
    overflow-y: visible !important;
    height: auto !important;
  }
  /* Inputs: sem zoom */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Swipe suave nos cards */
  .section, .card {
    -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════════════════════
   LUMNIS v3 — Tema Vermelho + componentes de Contas/Assinaturas
   ══════════════════════════════════════════════════════════════ */

/* ── Gradiente do mapa de calor por tema ── */
:root {
  --heat-1: rgba(251,191,36,0.55);
  --heat-2: rgba(249,115,22,0.75);
  --heat-3: rgba(239,68,68,0.85);
  --heat-4: rgba(236,72,153,0.9);
}
[data-theme="white"] {
  --heat-1: rgba(254,215,170,0.9);
  --heat-2: rgba(253,164,90,0.9);
  --heat-3: rgba(248,113,113,0.9);
  --heat-4: rgba(236,72,153,0.85);
}

/* ── TEMA VERMELHO ── */
[data-theme="red"] {
  --bg:              #0a0708;
  --bg2:            #120c0e;
  --card:            #171012;
  --card2:           #1f1518;
  --card-hi:         #291b1f;
  --border:          rgba(239,68,68,0.10);
  --border2:         rgba(239,68,68,0.24);
  --purple:          #ef4444;
  --purple-light:    #f87171;
  --purple-dim:      rgba(239,68,68,0.08);
  --purple-glow:     rgba(239,68,68,0.22);
  --cyan:            #fb923c;
  --cyan-dim:        rgba(251,146,60,0.12);
  --green:           #4ade80;
  --green-dim:       rgba(74,222,128,0.10);
  --red:             #ef4444;
  --red-dim:         rgba(239,68,68,0.15);
  --amber:           #fbbf24;
  --amber-dim:       rgba(251,191,36,0.12);
  --text:            #fdf2f2;
  --muted:           #b89a9e;
  --muted2:          #6b4a4f;
  --card-lowest:     #000000;
  --heat-1: rgba(251,191,36,0.55);
  --heat-2: rgba(249,115,22,0.8);
  --heat-3: rgba(239,68,68,0.9);
  --heat-4: rgba(236,72,153,0.95);
}
[data-theme="red"] .streak-dot.inactive { background: #1f1518; }
[data-theme="red"] .streak-dot.active { background: linear-gradient(135deg,#ef4444,#fb923c); }
[data-theme="red"] body::before { opacity: 0.05; }

/* ── Container de seção genérico ── */
.card-sec {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.sec-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sec-ico {
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background: var(--purple-dim); font-size:0.95rem; flex-shrink:0;
}
.sec-title { font-family:var(--font-head); font-weight:800; font-size:0.92rem; letter-spacing:-0.02em; }
.sec-sub { font-size:0.68rem; color:var(--muted); margin-top:1px; }
.sec-link { margin-left:auto; font-size:0.72rem; color:var(--purple-light); cursor:pointer; font-weight:700; white-space:nowrap; }
.sec-link:hover { text-decoration:underline; }

/* ── MAPA DE CALOR ── */
.heat-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.heat-icon {
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--heat-2), var(--heat-3)); font-size:0.95rem;
}
.heat-title { font-family:var(--font-head); font-weight:800; font-size:0.92rem; letter-spacing:-0.02em; }
.heat-sub { font-size:0.68rem; color:var(--muted); }
.heat-weekdays {
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px;
}
.heat-weekdays span {
  text-align:center; font-size:0.6rem; color:var(--muted2); font-weight:800; letter-spacing:0.05em;
}
.heat-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.heat-cell {
  aspect-ratio:1; border-radius:10px; position:relative; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; padding:4px 5px;
  transition: transform .12s ease, box-shadow .12s ease;
  background: var(--card2);
}
.heat-cell:active { transform: scale(0.93); }
.heat-cell:hover { box-shadow: 0 0 0 2px var(--border2); }
.heat-futuro { border:1px dashed var(--border); cursor:default; }
.heat-futuro:hover { box-shadow:none; }
.heat-hoje { box-shadow: 0 0 0 2px var(--text); }
.heat-dia { font-size:0.58rem; font-weight:800; color:var(--text); opacity:0.75; line-height:1; }
.heat-val { font-size:0.62rem; font-weight:900; color:#fff; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,0.5); }
[data-theme="white"] .heat-val { color:#1f2937; text-shadow:none; }
.heat-foot {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; flex-wrap:wrap;
}
.heat-legend { display:flex; align-items:center; gap:4px; font-size:0.62rem; color:var(--muted); }
.heat-legend i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.heat-pico {
  font-size:0.62rem; color:var(--red); font-weight:700;
  border:1px solid var(--red-dim); border-radius:999px; padding:3px 9px;
}
.heat-total { margin-top:10px; font-size:0.72rem; color:var(--muted); text-align:center; }
.heat-total strong { color:var(--text); }

/* ── LIMITE DO MÊS ── */
.lim-wrap { display:flex; align-items:center; gap:16px; }
.lim-donut { position:relative; width:96px; height:96px; flex-shrink:0; }
.lim-donut svg { width:100%; height:100%; }
.lim-pct {
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:900; font-size:1.15rem; letter-spacing:-0.03em;
}
.lim-info { flex:1; min-width:0; }
.lim-title { font-family:var(--font-head); font-weight:800; font-size:0.9rem; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lim-badge {
  font-size:0.58rem; font-weight:900; color:var(--red); background:var(--red-dim);
  border:1px solid var(--red-dim); border-radius:6px; padding:2px 6px; letter-spacing:0.04em;
}
.lim-vals { font-size:0.82rem; color:var(--text); margin-top:5px; }
.lim-vals strong { font-family:var(--font-head); font-weight:900; }
.lim-diff { font-size:0.74rem; font-weight:700; margin-top:3px; }
.lim-link { font-size:0.7rem; color:var(--amber); cursor:pointer; margin-top:6px; font-weight:700; }
.lim-empty { display:flex; align-items:center; gap:12px; cursor:pointer; }
.lim-empty-ico { width:38px; height:38px; border-radius:11px; background:var(--card2); display:grid; place-items:center; font-size:1.1rem; }
.lim-empty-t { font-weight:800; font-size:0.85rem; }
.lim-empty-s { font-size:0.7rem; color:var(--muted); margin-top:2px; }

/* ── ONDE FOI SEU DINHEIRO ── */
.ofd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.ofd-card { background:var(--card2); border-radius:12px; padding:11px 12px; }
.ofd-top { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.ofd-emoji { font-size:0.9rem; }
.ofd-nome { font-size:0.76rem; font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ofd-val { font-family:var(--font-head); font-weight:900; font-size:0.8rem; letter-spacing:-0.02em; }
.ofd-bar { height:4px; border-radius:999px; background:var(--card-hi); overflow:hidden; }
.ofd-bar div { height:100%; border-radius:999px; transition:width .4s ease; }
.ofd-nota { font-size:0.62rem; margin-top:6px; font-weight:600; }

/* ── PRÓXIMOS 7 DIAS ── */
.p7-list { display:flex; flex-direction:column; gap:2px; }
.p7-row { display:flex; align-items:center; gap:9px; padding:8px 4px; border-bottom:1px solid var(--border); }
.p7-row:last-child { border-bottom:none; }
.p7-emoji { font-size:0.95rem; width:20px; text-align:center; }
.p7-nome { flex:1; font-size:0.78rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p7-quando { font-size:0.66rem; font-weight:800; white-space:nowrap; }
.p7-val { font-family:var(--font-head); font-weight:800; font-size:0.78rem; white-space:nowrap; }
.p7-empty { font-size:0.78rem; color:var(--muted); text-align:center; padding:14px 0; }
.p7-mais { font-size:0.66rem; color:var(--muted); text-align:center; padding-top:6px; }
.p7-all { margin-left:0; margin-top:10px; display:block; text-align:center; }

/* ── CARROSSEL DE MESES ── */
.meses-scroll {
  display:flex; gap:9px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.meses-scroll::-webkit-scrollbar { display:none; }
.mes-card {
  flex:0 0 auto; min-width:104px; background:var(--card2);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; cursor:pointer;
  transition:border-color .15s ease, transform .12s ease;
}
.mes-card:active { transform:scale(0.96); }
.mes-ativo { border-color:var(--purple); background:var(--purple-dim); }
.mes-lbl { font-size:0.6rem; color:var(--muted); font-weight:800; letter-spacing:0.06em; }
.mes-saldo { font-family:var(--font-head); font-weight:900; font-size:0.92rem; letter-spacing:-0.03em; margin:3px 0; }
.mes-mini { display:flex; gap:7px; font-size:0.58rem; font-weight:700; }

/* ── ABA CONTAS ── */
.ct-tabs {
  display:flex; gap:6px; margin-bottom:14px; background:var(--card2);
  border-radius:12px; padding:4px;
}
.ct-tab {
  flex:1; background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:0.76rem; font-weight:700; padding:8px 4px; border-radius:9px;
  font-family:var(--font-body); transition:all .15s ease;
}
.ct-tab.active { background:var(--card); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.ct-hint {
  font-size:0.7rem; color:var(--muted); background:var(--amber-dim);
  border:1px solid var(--amber-dim); border-radius:10px; padding:9px 12px; margin-bottom:14px;
  line-height:1.45;
}
.ct-sec-title { font-family:var(--font-head); font-weight:800; font-size:0.95rem; margin-bottom:12px; }
.ct-empty { font-size:0.78rem; color:var(--muted); text-align:center; padding:22px 0; }
.ct-add {
  width:100%; margin-top:14px; background:var(--purple-dim); border:1px dashed var(--border2);
  color:var(--purple-light); border-radius:12px; padding:12px; cursor:pointer;
  font-size:0.8rem; font-weight:800; font-family:var(--font-body);
}
.ct-add:hover { background:var(--purple-glow); }

/* ── ASSINATURAS ── */
.assin-meses-lbl { font-size:0.6rem; color:var(--muted); letter-spacing:0.08em; margin-bottom:8px; font-weight:800; }
.assin-meses {
  display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px;
  scrollbar-width:none;
}
.assin-meses::-webkit-scrollbar { display:none; }
.assin-mes {
  flex:0 0 auto; min-width:96px; background:var(--card2); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px;
}
.assin-mes-on { border-color:var(--purple); background:var(--purple-dim); }
.assin-mes-lbl { font-size:0.6rem; color:var(--muted); font-weight:800; letter-spacing:0.06em; }
.assin-mes-lbl .dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--purple); margin-left:3px; vertical-align:middle; }
.assin-mes-val { font-family:var(--font-head); font-weight:900; font-size:0.95rem; letter-spacing:-0.03em; margin:3px 0; }
.assin-mes-qtd { font-size:0.58rem; color:var(--muted); }
.assin-estimado {
  background:var(--card2); border-radius:12px; padding:12px 14px; margin-bottom:14px;
}
.assin-estimado-lbl { font-size:0.68rem; color:var(--muted); }
.assin-estimado-val { font-family:var(--font-head); font-weight:900; font-size:1.2rem; letter-spacing:-0.03em; margin-top:2px; }
.assin-list { display:flex; flex-direction:column; gap:8px; }
.assin-row {
  display:flex; align-items:center; gap:11px; background:var(--card2);
  border-radius:12px; padding:11px 13px;
}
.assin-off { opacity:0.45; }
.assin-toggle {
  width:42px; height:24px; border-radius:999px; background:var(--card-hi);
  border:none; cursor:pointer; padding:3px; flex-shrink:0; transition:background .18s ease;
}
.assin-toggle span {
  display:block; width:18px; height:18px; border-radius:50%; background:var(--muted2);
  transition:transform .18s ease, background .18s ease;
}
.assin-toggle.on { background:var(--purple-glow); }
.assin-toggle.on span { transform:translateX(18px); background:var(--purple); }
.assin-info { flex:1; min-width:0; cursor:pointer; }
.assin-nome { font-size:0.82rem; font-weight:700; }
.assin-meta { font-size:0.68rem; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.assin-chip { background:var(--card-hi); border-radius:6px; padding:2px 7px; font-size:0.62rem; }
.assin-del {
  background:none; border:none; color:var(--muted2); cursor:pointer;
  font-size:0.95rem; padding:4px 6px; flex-shrink:0;
}
.assin-del:hover { color:var(--red); }

/* ── CONTAS ── */
.conta-row {
  display:flex; align-items:center; gap:11px; background:var(--card2);
  border-radius:12px; padding:11px 13px;
}
.conta-paga { opacity:0.5; }
.conta-paga .conta-nome { text-decoration:line-through; }
.conta-check {
  width:24px; height:24px; border-radius:8px; border:2px solid var(--border2);
  background:none; cursor:pointer; flex-shrink:0; color:var(--bg);
  font-size:0.72rem; font-weight:900; display:grid; place-items:center;
}
.conta-check.on { background:var(--green); border-color:var(--green); }
.conta-info { flex:1; min-width:0; cursor:pointer; }
.conta-nome { font-size:0.82rem; font-weight:700; }
.conta-meta { font-size:0.68rem; margin-top:3px; }
.conta-val { font-family:var(--font-head); font-weight:800; font-size:0.85rem; white-space:nowrap; }

/* ── MODAIS GENÉRICOS ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:18px;
  backdrop-filter:blur(3px);
}
.modal-box {
  background:var(--card); border:1px solid var(--border2); border-radius:18px;
  padding:20px; width:100%; max-width:400px; max-height:88vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.modal-title { font-family:var(--font-head); font-weight:900; font-size:1.05rem; margin-bottom:16px; letter-spacing:-0.02em; }
.fld-lbl { display:block; font-size:0.66rem; color:var(--muted); font-weight:800; letter-spacing:0.05em; margin:12px 0 5px; text-transform:uppercase; }
.fld {
  width:100%; background:var(--card2); border:1px solid var(--border);
  border-radius:10px; padding:11px 12px; color:var(--text); font-size:0.85rem;
  font-family:var(--font-body); box-sizing:border-box;
}
.fld:focus { outline:none; border-color:var(--purple); }
.modal-actions { display:flex; gap:9px; margin-top:20px; }
.btn-ghost, .btn-primary {
  flex:1; border-radius:11px; padding:12px; cursor:pointer;
  font-size:0.84rem; font-weight:800; font-family:var(--font-body); border:none;
}
.btn-ghost { background:var(--card2); color:var(--muted); border:1px solid var(--border); }
.btn-primary { background:var(--purple); color:#fff; }
[data-theme="black"] .btn-primary, [data-theme="white"] .btn-primary { color:var(--bg); }

.theme-btn-red { background: linear-gradient(135deg,#ef4444,#171012); }

/* ── Sugestões de assinatura detectadas ── */
.sug-box { margin-top:16px; background:var(--cyan-dim); border:1px solid var(--border2); border-radius:14px; padding:14px; }
.sug-head { font-family:var(--font-head); font-weight:800; font-size:0.85rem; }
.sug-sub { font-size:0.66rem; color:var(--muted); margin:3px 0 12px; line-height:1.4; }
.sug-row { display:flex; align-items:center; gap:9px; padding:8px 0; border-top:1px solid var(--border); }
.sug-info { flex:1; min-width:0; }
.sug-nome { font-size:0.78rem; font-weight:700; }
.sug-badge { font-size:0.55rem; background:var(--green-dim); color:var(--green); border-radius:5px; padding:1px 5px; font-weight:800; }
.sug-meta { font-size:0.64rem; color:var(--muted); margin-top:2px; }
.sug-add { background:var(--purple); color:#fff; border:none; border-radius:8px; padding:6px 11px; font-size:0.7rem; font-weight:800; cursor:pointer; white-space:nowrap; }
[data-theme="black"] .sug-add, [data-theme="white"] .sug-add { color:var(--bg); }
.sug-no { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:0.9rem; padding:2px 4px; }

/* ── Login: separador + botão Google ── */
.login-sep {
  display:flex; align-items:center; gap:12px;
  margin:16px 0; color:rgba(255,255,255,0.3); font-size:0.75rem;
}
.login-sep::before, .login-sep::after {
  content:''; flex:1; height:1px; background:rgba(255,255,255,0.12);
}
[data-theme="white"] .login-sep { color:rgba(0,0,0,0.35); }
[data-theme="white"] .login-sep::before, [data-theme="white"] .login-sep::after { background:rgba(0,0,0,0.12); }

.btn-google {
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1f1f1f; border:1px solid rgba(0,0,0,0.12);
  border-radius:12px; padding:13px; cursor:pointer;
  font-size:0.95rem; font-weight:600; font-family:var(--font-body);
  transition:filter .15s ease, transform .1s ease;
}
.btn-google:hover  { filter:brightness(0.96); }
.btn-google:active { transform:scale(0.985); }
.btn-google:disabled { opacity:0.6; cursor:default; }

/* ── Faixa de modo somente-leitura ── */
#faixa-leitura {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; gap:9px;
  padding:9px 14px; padding-top:calc(9px + env(safe-area-inset-top));
  background:linear-gradient(90deg,#7c2d12,#9a3412);
  color:#fff; font-size:0.76rem; font-weight:600;
  box-shadow:0 2px 12px rgba(0,0,0,0.35);
}
.fl-ico { font-size:0.9rem; flex-shrink:0; }
.fl-txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl-btn {
  background:#fff; color:#7c2d12; border:none; border-radius:8px;
  padding:5px 12px; font-size:0.72rem; font-weight:800; cursor:pointer;
  flex-shrink:0; font-family:var(--font-body);
}
body.tem-faixa header#app-header { margin-top:38px; }
body.tem-faixa #app-main { padding-top:38px; }

/* ══════════════════════════════════════════════════════════
   ONBOARDING + AVISO DE TRIAL
   ══════════════════════════════════════════════════════════ */
#onboarding-overlay {
  position:fixed; inset:0; z-index:4000;
  background:rgba(0,0,0,.86); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  animation:obFade .25s ease;
}
@keyframes obFade { from{opacity:0} to{opacity:1} }
.ob-card {
  background:var(--card); border:1px solid var(--border2); border-radius:22px;
  padding:26px 22px; width:100%; max-width:420px;
  max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  text-align:center; animation:obUp .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes obUp { from{transform:translateY(18px);opacity:0} to{transform:none;opacity:1} }
.ob-progress { display:flex; gap:5px; margin-bottom:22px; }
.ob-progress span {
  flex:1; height:3px; border-radius:999px; background:var(--card-hi);
  transition:background .3s ease;
}
.ob-progress span.on { background:var(--purple); }
.ob-emoji { font-size:2.6rem; margin-bottom:10px; }
.ob-card h2 {
  font-family:var(--font-head); font-size:1.35rem; font-weight:900;
  letter-spacing:-.03em; margin:0 0 8px;
}
.ob-card p { font-size:.86rem; color:var(--muted); line-height:1.6; margin:0 0 20px; }
.ob-campo {
  display:flex; align-items:center; gap:8px; background:var(--card2);
  border:1px solid var(--border2); border-radius:14px; padding:14px 16px; margin-bottom:6px;
}
.ob-campo span { font-size:1rem; color:var(--muted); font-weight:700; }
.ob-campo input {
  flex:1; background:none; border:none; outline:none; color:var(--text);
  font-family:var(--font-head); font-size:1.5rem; font-weight:900;
  letter-spacing:-.03em; width:100%; min-width:0;
}
.ob-erro { color:var(--red); font-size:.78rem; margin:8px 0 0; display:none; line-height:1.45; }
.ob-btn {
  width:100%; background:var(--purple); color:#fff; border:none;
  border-radius:14px; padding:15px; font-size:.95rem; font-weight:800;
  cursor:pointer; margin-top:18px; font-family:var(--font-body);
}
[data-theme="black"] .ob-btn, [data-theme="white"] .ob-btn { color:var(--bg); }
.ob-btn:disabled { opacity:.6; }
.ob-skip, .ob-voltar {
  width:100%; background:none; border:none; color:var(--muted);
  font-size:.8rem; cursor:pointer; margin-top:10px; padding:6px;
  font-family:var(--font-body);
}
.ob-sugestao {
  width:100%; background:var(--purple-dim); border:1px dashed var(--border2);
  color:var(--purple-light); border-radius:11px; padding:9px;
  font-size:.78rem; font-weight:700; cursor:pointer; margin-top:9px;
  font-family:var(--font-body);
}
.ob-cats { display:flex; flex-direction:column; gap:8px; text-align:left; }
.ob-cat { display:flex; align-items:center; gap:9px; }
.ob-cat-emoji { font-size:1rem; width:22px; text-align:center; }
.ob-cat-nome { flex:1; font-size:.82rem; font-weight:600; }
.ob-cat-campo {
  display:flex; align-items:center; gap:5px; background:var(--card2);
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; width:130px;
}
.ob-cat-campo span { font-size:.7rem; color:var(--muted); }
.ob-cat-campo input {
  width:100%; min-width:0; background:none; border:none; outline:none;
  color:var(--text); font-size:.85rem; font-weight:700; text-align:right;
  font-family:var(--font-body);
}
.ob-soma { font-size:.75rem; color:var(--muted); margin-top:14px; line-height:1.5; }
.ob-sonho {
  width:100%; background:var(--card2); border:1px solid var(--border);
  border-radius:11px; padding:12px 14px; color:var(--text);
  font-size:.85rem; margin-bottom:9px; font-family:var(--font-body);
  box-sizing:border-box;
}
.ob-sonho:focus { outline:none; border-color:var(--purple); }

/* ── Aviso de teste grátis ── */
.trial-aviso {
  background:linear-gradient(135deg, var(--purple-dim), transparent);
  border:1px solid var(--border2); border-radius:16px;
  padding:13px 15px; margin-bottom:12px;
}
.trial-aviso.urgente { border-color:rgba(251,191,36,.45); background:linear-gradient(135deg, var(--amber-dim), transparent); }
.ta-topo { display:flex; align-items:center; gap:11px; }
.ta-ico { font-size:1.3rem; flex-shrink:0; }
.ta-txt { flex:1; min-width:0; }
.ta-titulo { font-family:var(--font-head); font-weight:800; font-size:.9rem; letter-spacing:-.02em; }
.ta-sub { font-size:.7rem; color:var(--muted); margin-top:2px; }
.ta-btn {
  background:var(--purple); color:#fff; border:none; border-radius:9px;
  padding:8px 14px; font-size:.78rem; font-weight:800; cursor:pointer;
  text-decoration:none; white-space:nowrap; flex-shrink:0;
}
[data-theme="black"] .ta-btn, [data-theme="white"] .ta-btn { color:var(--bg); }
.ta-barra { height:3px; border-radius:999px; background:var(--card-hi); margin-top:11px; overflow:hidden; }
.ta-barra div { height:100%; border-radius:999px; background:var(--purple); transition:width .5s ease; }
.trial-aviso.urgente .ta-barra div { background:var(--amber); }

/* ══════════════════════════════════════════════════════════
   CHAT DA IA — layout e visual
   ══════════════════════════════════════════════════════════ */
.ia-header {
  display:flex; align-items:center; gap:12px;
  padding:14px 2px 16px; margin-bottom:4px;
}
.ia-avatar {
  width:44px; height:44px; border-radius:14px; flex-shrink:0;
  display:grid; place-items:center; font-size:1.3rem;
  background:linear-gradient(135deg, var(--purple-dim), var(--card2));
  border:1px solid var(--border2);
}
.ia-header-txt { flex:1; min-width:0; }
.ia-header-txt h1 {
  font-family:var(--font-head); font-size:1.15rem; font-weight:900;
  letter-spacing:-.03em; margin:0;
}
.ia-status { display:flex; align-items:center; gap:6px; font-size:.7rem; color:var(--muted); margin-top:2px; }
.ia-dot {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:iaPulse 2s ease-in-out infinite; flex-shrink:0;
}
@keyframes iaPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.ia-contador {
  font-size:.68rem; color:var(--muted); font-weight:700;
  background:var(--card2); border:1px solid var(--border);
  border-radius:999px; padding:5px 11px; flex-shrink:0;
}

.ia-aviso {
  max-width:860px; margin:7px auto 0; text-align:center;
  font-size:.62rem; color:var(--muted2);
}



/* PRECISA do .active: sem ele a especificidade de ID (100) vence o
   .tab-view{display:none} (10) e a aba da IA fica visivel em TODAS
   as telas, sobrepondo faturas, home, etc. */








/* ── Swatches de cor da categoria ── */
.cat-swatch {
  width:30px; height:30px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; padding:0; flex-shrink:0; transition:transform .12s ease, border-color .15s ease;
}
.cat-swatch:active { transform:scale(.88); }
.cat-swatch.on { border-color:var(--text); transform:scale(1.1); }

/* ══════════════════════════════════════════════════════════
   ABA "A PAGAR" — linha do tempo unificada
   ══════════════════════════════════════════════════════════ */
.ap-chips { display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; scrollbar-width:none; }
.ap-chips::-webkit-scrollbar { display:none; }
.ap-chip {
  flex:0 0 auto; background:var(--card2); border:1px solid var(--border);
  color:var(--muted); border-radius:999px; padding:7px 13px; cursor:pointer;
  font-size:.76rem; font-weight:700; font-family:var(--font-body);
  display:flex; align-items:center; gap:6px; transition:all .15s ease;
}
.ap-chip span { background:var(--card-hi); border-radius:999px; padding:1px 6px; font-size:.66rem; }
.ap-chip.on { background:var(--purple-dim); border-color:var(--purple); color:var(--text); }
.ap-chip.on span { background:var(--purple); color:#fff; }

.ap-resumo {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:9px; margin-bottom:16px;
}
.ap-resumo-item { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 13px; }
.ap-resumo-lbl { font-size:.63rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.ap-resumo-val { font-family:var(--font-head); font-weight:900; font-size:1.05rem; letter-spacing:-.03em; margin-top:3px; }

.ap-grupo { margin-bottom:18px; }
.ap-grupo-head {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.68rem; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:8px; padding:0 2px;
}
.ap-grupo-head strong { font-family:var(--font-head); color:var(--text); font-size:.85rem; letter-spacing:-.02em; }

.ap-item {
  display:flex; align-items:center; gap:11px; background:var(--card);
  border:1px solid var(--border); border-radius:13px; padding:12px 13px; margin-bottom:7px;
}
.ap-atrasado { border-color:rgba(239,68,68,.35); }
.ap-check {
  width:24px; height:24px; border-radius:50%; border:2px solid var(--border2);
  background:none; cursor:pointer; flex-shrink:0; transition:all .15s ease;
}
.ap-check:hover { border-color:var(--green); background:var(--green-dim); }
.ap-check:active { transform:scale(.86); }
.ap-emoji { font-size:1.05rem; width:24px; text-align:center; flex-shrink:0; }
.ap-info { flex:1; min-width:0; cursor:pointer; }
.ap-nome { font-size:.85rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-meta { display:flex; align-items:center; gap:7px; margin-top:4px; font-size:.66rem; flex-wrap:wrap; }
.ap-tag { border:1px solid; border-radius:5px; padding:1px 6px; font-size:.6rem; font-weight:800; }
.ap-data { color:var(--muted2); }
.ap-valor { font-family:var(--font-head); font-weight:800; font-size:.9rem; white-space:nowrap; flex-shrink:0; }
.ap-vazio { text-align:center; color:var(--muted); font-size:.85rem; padding:40px 0; }

.ap-acoes { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.ap-acoes button {
  flex:1; min-width:130px; background:var(--card2); border:1px dashed var(--border2);
  color:var(--muted); border-radius:12px; padding:12px; cursor:pointer;
  font-size:.78rem; font-weight:700; font-family:var(--font-body);
}
.ap-acoes button:hover { color:var(--text); border-color:var(--purple); }

/* ── Menu de atalhos no Perfil ── */
.perfil-menu { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.perfil-menu button {
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--card); border:1px solid var(--border); border-radius:13px;
  padding:13px 14px; cursor:pointer; text-align:left;
  font-family:var(--font-body); color:var(--text); transition:border-color .15s ease;
}
.perfil-menu button:hover { border-color:var(--purple); }
.perfil-menu button > span { font-size:1.15rem; width:26px; text-align:center; flex-shrink:0; }
.perfil-menu button > div { flex:1; min-width:0; }
.perfil-menu strong { display:block; font-size:.86rem; font-weight:700; }
.perfil-menu small { display:block; font-size:.7rem; color:var(--muted); margin-top:2px; }
.perfil-menu i { color:var(--muted2); font-style:normal; font-size:1.1rem; flex-shrink:0; }


/* ══════════════════════════════════════════════════════════════
   CHAT DA IA — bloco autoritativo (nao adicionar regras em outro
   lugar do arquivo, foi isso que quebrou 4 vezes)

   PROBLEMA ANTERIOR: #tab-ia.active usava height:100%, que depende
   da altura do #app-main. Como o app-main tem padding-top de 64px e
   altura calc(100dvh - 62px), os 100% terminavam ABAIXO do nav e o
   campo de texto ficava cortado.

   SOLUCAO: ancorar a aba na viewport. Nao depende de nenhum pai.
   Com box-sizing:border-box global, o nav mede exatos 62px (a
   safe-area ja esta dentro do height dele).
   ══════════════════════════════════════════════════════════════ */

/* A ALTURA e o DISPLAY desta aba sao definidos por _ajustarAlturaChatIA()
   no 02-ui.js, com estilo inline. Nao adicione display/height/position
   aqui: foi exatamente essa disputa de especificidade que fez a aba
   vazar por cima das outras telas e o campo de texto ficar cortado. */
.ia-header {
  flex: 0 0 auto;
  padding: 12px 16px 10px !important;
  border-bottom: 1px solid var(--border);
}

#tab-ia #ia-chat-box {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  padding: 14px 16px !important;
  display: flex; flex-direction: column; gap: 12px;
}

#tab-ia #ia-input-bar {
  flex: 0 0 auto !important;
  position: static !important;
  bottom: auto !important; left: auto !important; right: auto !important;
  padding: 10px 16px 12px !important;
  background: var(--bg);
  border-top: 1px solid var(--border2);
}

#tab-ia #ia-input-bar .ia-input-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--card2); border: 1px solid var(--border2);
  border-radius: 14px; padding: 4px 4px 4px 14px;
}
#tab-ia #ia-input-bar input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--font-body);
  font-size: 16px !important;   /* < 16px faz o iOS dar zoom no foco */
  padding: 10px 0 !important;
}
#tab-ia #ia-input-bar button.ia-send {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  padding: 0 !important; border-radius: 12px !important;
  background: var(--purple) !important; color: #fff !important;
  display: grid; place-items: center; flex-shrink: 0; border: none;
}
[data-theme="black"] #tab-ia .ia-send,
[data-theme="white"] #tab-ia .ia-send { color: var(--bg) !important; }

/* Desktop: header e nav tem outras alturas */


/* ── Popup de confirmação (substitui o confirm() do navegador) ── */
.cf-overlay {
  position:fixed; inset:0; z-index:5000;
  background:rgba(0,0,0,.75); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .18s ease;
}
.cf-overlay.on { opacity:1; }
.cf-card {
  background:var(--card); border:1px solid var(--border2); border-radius:20px;
  padding:24px 22px 18px; width:100%; max-width:380px; text-align:center;
  transform:scale(.94) translateY(10px); transition:transform .2s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.cf-overlay.on .cf-card { transform:none; }
.cf-emoji { font-size:2.1rem; margin-bottom:10px; }
.cf-titulo { font-family:var(--font-head); font-weight:900; font-size:1.05rem; letter-spacing:-.02em; line-height:1.35; }
.cf-texto { font-size:.85rem; color:var(--muted); line-height:1.55; margin-top:9px; }
.cf-texto strong { color:var(--text); }
.cf-detalhe {
  font-size:.74rem; color:var(--amber); margin-top:11px;
  background:var(--amber-dim); border-radius:9px; padding:8px 11px;
}
.cf-acoes { display:flex; gap:9px; margin-top:20px; }
.cf-acoes button {
  flex:1; border-radius:12px; padding:13px; cursor:pointer; border:none;
  font-size:.88rem; font-weight:800; font-family:var(--font-body);
}
.cf-nao { background:var(--card2); color:var(--muted); border:1px solid var(--border) !important; }
.cf-sim { background:var(--purple); color:#fff; }
[data-theme="black"] .cf-sim, [data-theme="white"] .cf-sim { color:var(--bg); }
.cf-sim.cf-perigo { background:var(--red); color:#fff; }
.cf-acoes button:active { transform:scale(.97); }


/* ── Topo da Home: saudacao + robo (o header global foi removido) ── */
.home-topo {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-top:4px;
}
.home-topo-txt { flex:1; min-width:0; }
.home-ia-btn {
  width:46px; height:46px; border-radius:15px; flex-shrink:0;
  background:linear-gradient(135deg, var(--purple-dim), var(--card2));
  border:1px solid var(--border2); cursor:pointer;
  display:grid; place-items:center; font-size:1.35rem;
  transition:transform .14s ease, border-color .2s ease;
}
.home-ia-btn:active { transform:scale(.92); }
.home-ia-btn:hover  { border-color:var(--purple); }

/* pulso continuo do robo */
.ia-glow-emoji { display:block; animation:iaGlow 2.4s ease-in-out infinite; }
@keyframes iaGlow {
  0%,100% { transform:scale(1);    filter:drop-shadow(0 0 0 var(--purple-glow)); }
  50%     { transform:scale(1.09); filter:drop-shadow(0 0 9px var(--purple-glow)); }
}

/* ══════════════════════════════════════════════════════════
   TOUR / TUTORIAL
   ══════════════════════════════════════════════════════════ */
#tour-overlay {
  position:fixed; inset:0; z-index:4500;
  background:rgba(0,0,0,.88); backdrop-filter:blur(7px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  opacity:0; transition:opacity .22s ease;
}
#tour-overlay.on { opacity:1; }
.tour-card {
  background:var(--card); border:1px solid var(--border2); border-radius:22px;
  padding:26px 22px 16px; width:100%; max-width:430px;
  max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(16px) scale(.97); transition:transform .28s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
#tour-overlay.on .tour-card { transform:none; }
.tour-prog { display:flex; gap:5px; margin-bottom:20px; }
.tour-prog span { flex:1; height:3px; border-radius:999px; background:var(--card-hi); transition:background .35s ease; }
.tour-prog span.on { background:var(--purple); }
.tour-emoji { font-size:2.4rem; text-align:center; margin-bottom:10px; }
.tour-card h2 {
  font-family:var(--font-head); font-size:1.28rem; font-weight:900;
  letter-spacing:-.03em; text-align:center; margin:0 0 14px;
}
.tour-corpo p { font-size:.87rem; color:var(--muted); line-height:1.62; margin:0 0 11px; }
.tour-corpo b { color:var(--text); }
.tour-lista { list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:9px; }
.tour-lista li {
  font-size:.83rem; color:var(--muted); line-height:1.5;
  background:var(--card2); border-radius:10px; padding:10px 12px;
  border-left:3px solid var(--green);
}
.tour-nota { font-size:.76rem !important; color:var(--muted2) !important; }
.tour-nota a { color:var(--purple-light); }
.tour-acoes { display:flex; gap:9px; margin-top:18px; }
.tour-btn {
  flex:1; background:var(--purple); color:#fff; border:none; border-radius:13px;
  padding:14px; font-size:.9rem; font-weight:800; cursor:pointer; font-family:var(--font-body);
}
[data-theme="black"] .tour-btn, [data-theme="white"] .tour-btn { color:var(--bg); }
.tour-voltar {
  background:var(--card2); color:var(--muted); border:1px solid var(--border);
  border-radius:13px; padding:14px 18px; cursor:pointer;
  font-size:.86rem; font-weight:700; font-family:var(--font-body);
}
.tour-pular {
  width:100%; background:none; border:none; color:var(--muted2);
  font-size:.78rem; cursor:pointer; padding:12px 0 4px; font-family:var(--font-body);
}
.tour-pular:hover { color:var(--muted); }

/* ══════════════════════════════════════════════════════════
   TELA DE ATUALIZAÇÃO DO PWA
   ══════════════════════════════════════════════════════════ */
#pwa-updating {
  position:fixed; inset:0; z-index:9000; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease;
}
#pwa-updating.on { opacity:1; }
.pu-box { text-align:center; }
.pu-logo {
  width:64px; height:64px; margin:0 auto 18px; border-radius:20px;
  background:var(--card); border:1px solid var(--border2);
  display:grid; place-items:center;
  font-family:Georgia, serif; font-size:2rem; font-weight:700; color:var(--text);
  animation:puPulse 1.5s ease-in-out infinite;
}
@keyframes puPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.06);opacity:.75} }
.pu-txt { font-family:var(--font-head); font-weight:800; font-size:1rem; letter-spacing:-.02em; }
.pu-sub { font-size:.75rem; color:var(--muted); margin-top:10px; }
.pu-barra {
  width:160px; height:3px; border-radius:999px; background:var(--card-hi);
  margin:16px auto 0; overflow:hidden;
}
.pu-barra div {
  height:100%; width:40%; border-radius:999px; background:var(--purple);
  animation:puSlide 1.1s ease-in-out infinite;
}
@keyframes puSlide { 0%{transform:translateX(-110%)} 100%{transform:translateX(310%)} }

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════════════════ */
.rv {
  opacity:0; transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.8,.3,1), transform .5s cubic-bezier(.2,.8,.3,1);
}
.rv.rv-on { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ══════════════════════════════════════════════════════════
   MAPA MENTAL DOS SONHOS
   Animações usam só transform/opacity (compostas na GPU) para
   não pesar no scroll.
   ══════════════════════════════════════════════════════════ */
.ms-frase {
  text-align:center; font-size:.82rem; line-height:1.6; color:var(--muted);
  font-style:italic; min-height:60px; padding:0 6px 4px;
  opacity:0; transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease;
}
.ms-frase.on { opacity:1; transform:none; }
.ms-aspas { color:var(--purple); font-size:1.3rem; font-style:normal; margin-right:3px; vertical-align:-3px; }
.ms-autor {
  display:block; margin-top:7px; font-style:normal; font-size:.66rem;
  color:var(--muted2); text-transform:uppercase; letter-spacing:.09em;
}

.ms-palco { position:relative; height:230px; margin:6px 0 4px; }
.ms-linhas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
@keyframes msFluxo { to { stroke-dashoffset:-14; } }

.ms-orbita {
  position:absolute; inset:0; display:grid; place-items:center;
  animation:msGira 44s linear infinite;
}
@keyframes msGira { to { transform:rotate(360deg); } }

.ms-centro { position:relative; display:grid; place-items:center; animation:msGira 44s linear infinite reverse; }
.ms-centro-anel {
  position:absolute; width:78px; height:78px; border-radius:50%;
  border:1px solid var(--purple); opacity:.35;
  animation:msPulso 3.4s ease-out infinite;
}
.ms-anel2 { animation-delay:1.7s; }
@keyframes msPulso {
  0%   { transform:scale(.72); opacity:.5; }
  100% { transform:scale(1.5); opacity:0; }
}
.ms-centro-txt {
  width:74px; height:74px; border-radius:50%;
  background:linear-gradient(135deg, var(--purple-dim), var(--card2));
  border:1px solid var(--border2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; z-index:2;
}
.ms-centro-nome { font-family:var(--font-head); font-weight:900; font-size:.82rem; letter-spacing:-.02em; }
.ms-centro-sub  { font-size:.55rem; color:var(--muted); margin-top:2px; }

.ms-no {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) translate(var(--x), var(--y));
  display:flex; flex-direction:column; align-items:center; gap:5px; width:82px;
  animation:msFlutua 5s ease-in-out infinite; animation-delay:var(--d);
}
@keyframes msFlutua { 0%,100%{margin-top:0} 50%{margin-top:-7px} }
.ms-no-bolha {
  width:38px; height:38px; border-radius:50%;
  background:var(--card); border:1px solid var(--border2);
  display:grid; place-items:center; font-size:1.05rem;
  box-shadow:0 3px 14px rgba(0,0,0,.35);
  animation:msGira 44s linear infinite reverse;
}
.ms-no-txt {
  font-size:.6rem; color:var(--muted); text-align:center; line-height:1.28;
  animation:msGira 44s linear infinite reverse;
}
.ms-ver {
  width:100%; margin-top:8px; background:var(--purple-dim);
  border:1px solid var(--border2); color:var(--purple-light);
  border-radius:12px; padding:11px; cursor:pointer;
  font-size:.8rem; font-weight:800; font-family:var(--font-body);
}
.ms-vazio { display:flex; align-items:center; gap:13px; cursor:pointer; padding:6px 2px; }
.ms-vazio-ico { font-size:1.7rem; }
.ms-vazio-t { font-weight:800; font-size:.88rem; }
.ms-vazio-s { font-size:.72rem; color:var(--muted); margin-top:3px; line-height:1.45; }

/* ── Mapa em tela cheia ── */
#mapa-full {
  position:fixed; inset:0; z-index:4800;
  background:radial-gradient(circle at 50% 42%, var(--card2) 0%, var(--bg) 62%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px; opacity:0; transition:opacity .26s ease; overflow:hidden;
}
#mapa-full.on { opacity:1; }
.mf-fechar {
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px; z-index:5;
  width:38px; height:38px; border-radius:50%; background:var(--card);
  border:1px solid var(--border2); color:var(--muted); cursor:pointer; font-size:1rem;
}
.mf-frase {
  text-align:center; font-size:.86rem; line-height:1.6; color:var(--muted);
  font-style:italic; max-width:400px; min-height:70px; margin-bottom:6px;
  opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease;
}
.mf-frase.on { opacity:1; transform:none; }
.mf-frase .ms-aspas { color:var(--purple); font-size:1.4rem; font-style:normal; }
.mf-frase .ms-autor { display:block; margin-top:8px; font-style:normal; font-size:.66rem; color:var(--muted2); text-transform:uppercase; letter-spacing:.09em; }

.mf-palco {
  position:relative; flex:1; width:100%; max-width:460px;
  display:grid; place-items:center; animation:msGira 60s linear infinite;
}
.mf-centro { position:relative; display:grid; place-items:center; animation:msGira 60s linear infinite reverse; }
.mf-anel {
  position:absolute; width:100px; height:100px; border-radius:50%;
  border:1px solid var(--purple); opacity:.3; animation:msPulso 4s ease-out infinite;
}
.mf-anel2 { animation-delay:1.33s; }
.mf-anel3 { animation-delay:2.66s; }
.mf-centro-txt {
  width:96px; height:96px; border-radius:50%;
  background:linear-gradient(135deg, var(--purple-dim), var(--card));
  border:1px solid var(--border2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2;
}
.mf-nome { font-family:var(--font-head); font-weight:900; font-size:1rem; letter-spacing:-.02em; }
.mf-sub  { font-size:.56rem; color:var(--muted); margin-top:3px; text-align:center; padding:0 8px; }

.mf-no {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) translate(var(--x), var(--y));
  display:flex; flex-direction:column; align-items:center; gap:6px; width:104px;
  animation:msFlutua 6s ease-in-out infinite; animation-delay:var(--d);
}
.mf-no-bolha {
  width:46px; height:46px; border-radius:50%; background:var(--card);
  border:1px solid var(--border2); display:grid; place-items:center; font-size:1.25rem;
  box-shadow:0 4px 18px rgba(0,0,0,.4); animation:msGira 60s linear infinite reverse;
}
.mf-no-txt {
  font-size:.66rem; color:var(--text); text-align:center; line-height:1.3;
  animation:msGira 60s linear infinite reverse;
}
.mf-rodape { text-align:center; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
.mf-rodape p { font-size:.76rem; color:var(--muted); margin-bottom:11px; max-width:320px; line-height:1.5; }
.mf-rodape button {
  background:var(--purple); color:#fff; border:none; border-radius:12px;
  padding:12px 26px; font-size:.85rem; font-weight:800; cursor:pointer; font-family:var(--font-body);
}
[data-theme="black"] .mf-rodape button, [data-theme="white"] .mf-rodape button { color:var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .ms-orbita, .ms-centro, .ms-no-bolha, .ms-no-txt,
  .mf-palco, .mf-centro, .mf-no-bolha, .mf-no-txt { animation:none !important; }
  .ms-no, .mf-no { animation:none !important; }
}

/* ── Resgate de código na tela de login ── */
.cod-wrap { margin-top:14px; }
.cod-wrap summary {
  cursor:pointer; font-size:.78rem; color:rgba(255,255,255,.45);
  text-align:center; list-style:none; padding:4px;
}
.cod-wrap summary::-webkit-details-marker { display:none; }
.cod-wrap summary:hover { color:rgba(255,255,255,.7); }
.cod-wrap p { font-size:.72rem; color:rgba(255,255,255,.4); line-height:1.5; margin:10px 0 8px; text-align:center; }
.cod-wrap input {
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:11px 13px; color:#fff; font-size:.88rem;
  text-align:center; letter-spacing:.06em; font-family:var(--font-body); box-sizing:border-box;
}
.cod-wrap input:focus { outline:none; border-color:var(--purple); }
.cod-wrap > button {
  width:100%; margin-top:8px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15); color:#fff; border-radius:10px;
  padding:11px; font-size:.82rem; font-weight:700; cursor:pointer; font-family:var(--font-body);
}
#codigo-msg { font-size:.75rem; text-align:center; margin-top:9px; line-height:1.45; }