/* =================================================================
   LEI CRISTIANINSK — Design System
   Papel/creme · Azul-marinho · Fraunces + Public Sans · Mobile-first
   ================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Cores base */
  --paper:        #FAF7F0;
  --paper-2:      #F3EEE3;
  --ink:          #21283A;
  --ink-soft:     #5A6072;
  --ink-faint:    #6B7080;
  --line:         #E7E0D2;
  --line-strong:  #D8CFBC;
  --surface:      #FFFFFF;

  /* Marca */
  --navy:         #1F3864;
  --navy-700:     #182C50;
  --navy-300:     #3C5891;
  --gold:         #B07A22;
  --gold-soft:    #F3E6CA;
  --red:          #A8392C;
  --red-soft:     #F6E1DC;
  --green:        #2E7D5B;
  --green-soft:   #DCEFE5;
  --blue:         #2C5A8A;
  --blue-soft:    #DCE8F4;

  /* Tipografia */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Espaçamento */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px;

  /* Raio */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px;

  /* Sombra */
  --sh-1: 0 1px 2px rgba(33,40,58,.06), 0 1px 3px rgba(33,40,58,.05);
  --sh-2: 0 4px 14px rgba(33,40,58,.08), 0 2px 6px rgba(33,40,58,.05);
  --sh-3: 0 12px 34px rgba(31,56,100,.16);
  --sh-nav: 0 -2px 18px rgba(33,40,58,.08);

  --header-h: 60px;
  --nav-h: 68px;

  /* Gradiente de marca (login, recap) — navy com toque dourado e profundidade */
  --grad-brand:
    radial-gradient(120% 85% at 12% 8%, rgba(176,122,34,.16), transparent 46%),
    radial-gradient(115% 78% at 88% 2%, rgba(74,108,170,.42), transparent 56%),
    linear-gradient(158deg, #28457A 0%, #1B2F57 48%, #0E1B37 100%);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -200px, #FFFDF8 0%, transparent 70%),
    var(--paper);
  background-attachment:fixed;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  overscroll-behavior-y:none;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:16px; }
::selection{ background:var(--gold-soft); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-.01em; color:var(--ink); }

/* ---------- App shell ---------- */
.app{ max-width:520px; margin:0 auto; min-height:100dvh; position:relative; display:flex; flex-direction:column; }

.app-header{
  position:sticky; top:0; z-index:40;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-4);
  background:rgba(250,247,240,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.app-header .brand{ display:flex; align-items:center; gap:10px; }
.app-header .seal{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(145deg, var(--navy), var(--navy-700));
  color:#F4E9C8; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:17px;
  box-shadow:var(--sh-1); flex:none;
}
.app-header .brand b{ font-family:var(--serif); font-size:16px; font-weight:600; letter-spacing:-.01em; }
.app-header .brand small{ display:block; font-size:11px; color:var(--ink-faint); margin-top:-2px; letter-spacing:.02em; }
.app-header .h-act{
  width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface); display:grid; place-items:center; color:var(--ink-soft);
  font-size:17px; box-shadow:var(--sh-1);
}
.app-header .h-back{
  width:34px; height:34px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface); display:grid; place-items:center; color:var(--ink-soft);
  box-shadow:var(--sh-1); cursor:pointer; flex:none; padding:0; transition:transform .1s;
}
.app-header .h-back:active{ transform:scale(.9); }
.brand-logo{ display:flex; align-items:center; }
.brand-logo img{ height:34px; width:auto; display:block; }

.app-main{ flex:1 0 auto; padding:var(--sp-4) var(--sp-4) calc(var(--nav-h) + 22px); }

.app-footer{
  text-align:center; padding:6px 12px calc(8px + env(safe-area-inset-bottom));
  color:var(--ink-faint); font-size:10px; line-height:1.3; letter-spacing:.01em;
}
.app-footer b{ color:var(--navy); font-weight:700; }

/* ---------- Bottom nav (mobile · navy escura + dourado, glass) ---------- */
.tabbar{
  position:fixed; left:14px; right:14px; z-index:45;
  bottom:calc(26px + env(safe-area-inset-bottom));
  max-width:494px; margin:0 auto;
  display:flex; align-items:stretch; gap:2px;
  height:64px; padding:9px 8px 7px;
  background:linear-gradient(180deg, rgba(34,54,96,.94), rgba(20,34,66,.96));
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px;
  box-shadow:0 16px 40px rgba(12,22,46,.5), inset 0 1px 0 rgba(255,255,255,.14);
}
/* linha dourada indicadora que desliza pro item ativo */
.tab-indicator{
  position:absolute; top:0; left:0; width:30px; height:3px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#C98E2E,#F0CE86);
  box-shadow:0 1px 12px rgba(201,142,46,.8);
  opacity:0; transition:transform .36s cubic-bezier(.34,1.45,.5,1), opacity .25s; pointer-events:none;
}
.tabbar a:not(.side-brand){
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:rgba(238,231,214,.52); font-size:10px; font-weight:700; letter-spacing:.01em;
  position:relative; transition:color .22s, transform .16s;
}
.tabbar a svg{ transition:transform .26s cubic-bezier(.34,1.56,.64,1); }
.tabbar a:active{ transform:scale(.9); }
.tabbar a.active{ color:#F4E9C8; }
.tabbar a.active svg{ transform:translateY(-2px) scale(1.1); filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.tabbar a .dot{
  position:absolute; top:2px; right:50%; margin-right:-18px;
  min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--red); color:#fff; font-size:9.5px; font-weight:800;
  display:grid; place-items:center; box-shadow:0 0 0 2px rgba(20,34,66,1);
}

/* ---------- Ícones ---------- */
svg.ic{ display:inline-block; vertical-align:-0.18em; flex:none; }
.femoji{ display:inline-block; vertical-align:-0.22em; flex:none; }
.femoji-inline{ height:1.15em; width:auto; vertical-align:-0.18em; margin:0 .04em; }
.btn svg{ vertical-align:-0.18em; }
.pill svg{ width:13px; height:13px; vertical-align:-0.15em; }
.pill.has-ic::before{ display:none; }
.has-ic{ display:inline-flex; align-items:center; gap:4px; }
.has-ic svg{ flex:none; }
.section-title svg{ flex:none; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:var(--sp-5);
}
.card + .card{ margin-top:var(--sp-4); }
.card-tight{ padding:var(--sp-4); }

.section-title{
  display:flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin:var(--sp-6) var(--sp-1) var(--sp-3);
}
.section-title:first-child{ margin-top:0; }

/* ---------- Barra de gamificação (Progresso) ---------- */
.game-bar{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:11px 13px; margin-bottom:14px; box-shadow:var(--sh-1); transition:transform .1s; }
.game-bar:active{ transform:scale(.995); }
.gb-mascote{ width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(176,122,34,.16), transparent 70%); }
.gb-mascote img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.gb-body{ flex:1; min-width:0; }
.gb-line{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gb-patente{ font-family:var(--serif); font-size:15.5px; font-weight:600; color:var(--ink); }
.gb-chips{ display:flex; gap:6px; flex:none; }
.gb-chip{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; color:var(--ink-soft);
  background:var(--paper-2); padding:3px 8px; border-radius:999px; }
.gb-xpbar{ height:7px; border-radius:4px; background:var(--paper-2); overflow:hidden; margin:6px 0 5px; }
.gb-xpbar span{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#C98E2E,#B07A22); }
.gb-foot{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--ink-faint); }
.gb-go{ color:var(--ink-faint); flex:none; }

/* ---------- Hero do período (resumo do mês) ---------- */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 70%);
  color:#EDE7D6; padding:var(--sp-6); box-shadow:var(--sh-3);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(420px 200px at 110% -40%, rgba(176,122,34,.35), transparent 60%),
    radial-gradient(300px 160px at -10% 120%, rgba(60,88,145,.5), transparent 60%);
  pointer-events:none;
}
.hero .hero-top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; }
.hero .ref{ font-family:var(--serif); font-size:13px; opacity:.85; letter-spacing:.04em; }
.hero .status-chip{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-pill); background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}
.hero .total-label{ font-size:12px; opacity:.8; margin-top:var(--sp-4); letter-spacing:.03em; }
.hero .total{ font-family:var(--serif); font-size:42px; font-weight:600; line-height:1; margin-top:4px; color:#FFF; letter-spacing:-.02em; }
.hero .total .cents{ font-size:24px; opacity:.85; }
.hero .breakdown{ display:flex; gap:var(--sp-5); margin-top:var(--sp-4); position:relative; }
.hero .breakdown div{ font-size:12.5px; }
.hero .breakdown b{ display:block; font-size:15px; font-weight:700; color:#FFF; margin-top:1px; }
.hero .due{
  margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; gap:8px; font-size:13px; position:relative;
}

/* ---------- Stat grid ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-3); text-align:center; box-shadow:var(--sh-1);
}
.stat .n{ font-family:var(--serif); font-size:26px; font-weight:600; line-height:1; }
.stat .l{ font-size:11px; color:var(--ink-faint); margin-top:5px; font-weight:600; letter-spacing:.02em; }
.stat.ok .n{ color:var(--green); }
.stat.warn .n{ color:var(--gold); }
.stat.bad .n{ color:var(--red); }

/* ---------- Task / occurrence rows ---------- */
.task{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); box-shadow:var(--sh-1);
  border-left:4px solid var(--line-strong);
  transition:transform .12s, box-shadow .12s;
}
.task + .task{ margin-top:var(--sp-3); }
.task:active{ transform:scale(.99); }
.task.s-aguardando{ border-left-color:var(--ink-faint); }
.task.s-em_validacao{ border-left-color:var(--blue); }
.task.s-atraso,.task.s-em_validacao_atraso{ border-left-color:var(--gold); }
.task.s-feito{ border-left-color:var(--green); }
.task.s-multado,.task.s-nao_fez,.task.s-nao_fez_pendente{ border-left-color:var(--red); }
.task.s-anulado{ border-left-color:var(--ink-faint); opacity:.7; }
.task .t-ico{ width:40px; height:40px; border-radius:12px; background:var(--paper-2); color:var(--navy); display:grid; place-items:center; flex:none; }
.task.s-multado .t-ico,.task.s-nao_fez .t-ico,.task.s-nao_fez_pendente .t-ico{ background:var(--red-soft); color:var(--red); }
.task.s-feito .t-ico{ background:var(--green-soft); color:var(--green); }
.task.s-em_validacao .t-ico{ background:var(--blue-soft); color:var(--blue); }
.task.s-atraso .t-ico,.task.s-em_validacao_atraso .t-ico{ background:var(--gold-soft); color:var(--gold); }

/* ---------- Cores por pilar (grupo) — vencem o status no card ---------- */
.task.g-lixo{ border-left-color:#2E7D5B; background:#F4F8F6; }
.task.g-lixo .t-ico{ background:#E2F0E9; color:#2E7D5B; }
.task.g-banheiro{ border-left-color:#2C6FB0; background:#F2F7FC; }
.task.g-banheiro .t-ico{ background:#E1EDF8; color:#2C6FB0; }
.task.g-quarto{ border-left-color:#6B4E8A; background:#F6F3FA; }
.task.g-quarto .t-ico{ background:#ECE5F4; color:#6B4E8A; }
.task.g-louca{ border-left-color:#B07A22; background:#FAF6EC; }
.task.g-louca .t-ico{ background:#F5EBD5; color:#B07A22; }
.task.g-condominio{ border-left-color:#1F3864; background:#F2F4F9; }
.task.g-condominio .t-ico{ background:#E4E9F3; color:#1F3864; }
.task.g-comida{ border-left-color:#C2683A; background:#FBF5F0; }
.task.g-comida .t-ico{ background:#F6E6DA; color:#C2683A; }
.task.g-taxas{ border-left-color:#6B7080; background:#F5F5F7; }
.task.g-taxas .t-ico{ background:#EAEAEE; color:#6B7080; }
.task.g-avulsa{ border-left-color:#2F8E84; background:#EFF8F6; }
.task.g-avulsa .t-ico{ background:#DBEFEB; color:#2F8E84; }
.task .t-body{ flex:1; min-width:0; }
.task .t-name{ font-weight:700; font-size:15px; overflow-wrap:anywhere; }
.task .t-meta{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.task .t-right{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; position:relative; z-index:2; }
/* card inteiro clicável (stretched link) — botões de ação ficam por cima */
.task .stretch{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.task .t-ico, .task .t-body{ position:relative; z-index:0; }

/* Countdown */
.count{ font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; }
.count.urgent{ color:var(--gold); }
.count.over{ color:var(--red); }

/* ---------- Badges / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap;
}
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.pill.gray{ background:#EEECE6; color:#6B7080; }
.pill.blue{ background:var(--blue-soft); color:var(--blue); }
.pill.gold{ background:var(--gold-soft); color:#8A5E18; }
html[data-theme="dark"] .pill.gold{ color:var(--gold); }
.pill.green{ background:var(--green-soft); color:var(--green); }
.pill.red{ background:var(--red-soft); color:var(--red); }
.pill.navy{ background:#E1E7F2; color:var(--navy); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:13px 18px; border-radius:var(--r-md); border:1px solid transparent;
  background:var(--surface); color:var(--ink); box-shadow:var(--sh-1);
  transition:transform .1s, box-shadow .15s, background .15s; width:100%;
}
.btn:active{ transform:translateY(1px) scale(.995); }
.btn-primary{ background:linear-gradient(160deg, var(--navy), var(--navy-700)); color:#F4E9C8; border-color:var(--navy-700); box-shadow:var(--sh-2); }
.btn-gold{ background:linear-gradient(160deg, #C98E2E, var(--gold)); color:#fff; }
.btn-red{ background:linear-gradient(160deg, #BF4537, var(--red)); color:#fff; }
.btn-green{ background:linear-gradient(160deg, #379069, var(--green)); color:#fff; }
.btn-ghost{ background:var(--surface); border-color:var(--line-strong); color:var(--ink); box-shadow:none; }
.btn-sm{ padding:9px 13px; font-size:13px; width:auto; border-radius:var(--r-sm); }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn-row{ display:flex; gap:var(--sp-3); }
.btn-row .btn{ flex:1; }

/* Big action tiles (pegou-pagou) */
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-4); text-align:center; box-shadow:var(--sh-1);
  transition:transform .1s, box-shadow .15s, border-color .15s;
}
.tile:active{ transform:scale(.97); }
.tile .ico{ font-size:34px; }
.tile .nm{ font-weight:700; font-size:14px; margin-top:6px; }
.tile .vl{ font-size:12px; color:var(--red); font-weight:700; margin-top:2px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:var(--sp-4); }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.input,.select,.textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--navy-300); box-shadow:0 0 0 3px rgba(60,88,145,.15); }
.textarea{ min-height:84px; resize:vertical; }
.hint{ font-size:12px; color:var(--ink-faint); margin-top:5px; }

.stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden; width:fit-content; }
.stepper button{ width:46px; height:46px; background:var(--paper-2); border:none; font-size:22px; color:var(--navy); }
.stepper input{ width:58px; height:46px; text-align:center; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); font-weight:700; font-size:17px; }

/* ---------- Flash / alerts ---------- */
.flash{
  border-radius:var(--r-md); padding:12px 14px; font-size:13.5px; font-weight:600;
  margin-bottom:var(--sp-4); border:1px solid; display:flex; gap:8px; align-items:flex-start;
}
.flash.ok{ background:var(--green-soft); border-color:#BBE0CD; color:#1E5C41; }
.flash.err{ background:var(--red-soft); border-color:#E9C4BC; color:#8A2A1F; }
.flash.info{ background:var(--blue-soft); border-color:#C3D6EA; color:#234B73; }

/* ---------- Calendar ---------- */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.cal-head h3{ font-size:19px; }
.cal-nav{ display:flex; gap:8px; }
.cal-nav a,.cal-nav-off{ width:36px; height:36px; border-radius:11px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--ink-soft); box-shadow:var(--sh-1); transition:transform .1s; }
.cal-nav a:active{ transform:scale(.92); }
.cal-nav-off{ opacity:.32; box-shadow:none; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.cal-dow{ text-align:center; font-size:11px; font-weight:700; color:var(--ink-faint); padding:4px 0; }
.cal-cell{
  width:100%; aspect-ratio:1; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:default; transition:transform .1s, box-shadow .12s;
}
.cal-cell.out{ background:transparent; border-color:transparent; }
.cal-cell.out .d{ color:var(--ink-faint); opacity:.5; }
.cal-cell.clickable{ cursor:pointer; }
.cal-cell.clickable:hover{ box-shadow:var(--sh-1); }
.cal-cell.clickable:active{ transform:scale(.93); }
.cal-cell .d{ font-size:13px; font-weight:600; color:var(--ink-soft); line-height:1; }
.cal-cell.today{ border-color:var(--navy); box-shadow:0 0 0 1.5px var(--navy) inset; background:#F2F6FC; }
.cal-cell.today .d{ color:var(--navy); font-weight:800; }
.cal-dots{ display:flex; gap:3px; align-items:center; justify-content:center; margin-top:3px; }
.cal-dots i{ width:6px; height:6px; border-radius:50%; display:block; }
.cal-more{ font-size:9px; font-weight:800; line-height:6px; color:var(--ink-faint); margin-left:1px; }
.cal-dots{ height:6px; }

/* seta “ver ›” com mais presença (item 9) */
.chip-go{ display:inline-flex; align-items:center; gap:1px; font-size:12.5px; font-weight:700; color:var(--navy); }
.chip-go svg{ stroke-width:2.5; }

/* ---------- Contador regressivo lúdico ---------- */
.cd-wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.cd-num{ font-variant-numeric:tabular-nums; font-weight:800; font-size:13px; color:var(--ink-soft); }
.cd-num.urgent{ font-size:15px; }
.cd-num.over{ color:var(--red); }
.cd-bar{ width:66px; height:5px; border-radius:3px; background:var(--paper-2); overflow:hidden; }
.cd-bar i{ display:block; height:100%; border-radius:3px; transition:width 1s linear, background 1s linear; }

/* ---------- Ícones-herói animados ---------- */
@keyframes flamePulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.13) translateY(-1px) } }
.flame-pulse svg{ animation:flamePulse 1.9s ease-in-out infinite; filter:drop-shadow(0 1px 3px rgba(176,122,34,.45)); }
@keyframes navyGlow{ 0%,100%{ box-shadow:var(--sh-2) } 50%{ box-shadow:0 4px 18px rgba(31,56,100,.45) } }
.btn.pulse-navy{ animation:navyGlow 2.4s ease-in-out infinite; }
@keyframes badgePop{ 0%,90%,100%{ transform:scale(1) } 95%{ transform:scale(1.25) } }
.tabbar a .dot{ animation:badgePop 2.5s ease-in-out infinite; }
.dot-green{ background:var(--green); } .dot-gray{ background:var(--ink-faint); }
.dot-blue{ background:var(--blue); } .dot-gold{ background:var(--gold); } .dot-red{ background:var(--red); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--sp-4); font-size:11.5px; color:var(--ink-soft); }
.cal-legend span{ display:flex; align-items:center; gap:5px; }
.cal-legend i{ width:8px; height:8px; border-radius:50%; }

/* ---------- Sheet (folha inferior) ---------- */
.sheet-backdrop{ position:fixed; inset:0; background:rgba(20,24,34,.45); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s; }
.sheet-backdrop.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61; max-width:520px; margin:0 auto;
  background:var(--paper); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -10px 40px rgba(20,24,34,.25); padding:var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1); max-height:86dvh; overflow-y:auto;
}
.sheet.open{ transform:translateY(0); }
.sheet .grip{ width:42px; height:5px; border-radius:3px; background:var(--line-strong); margin:0 auto var(--sp-4); }

/* ---------- Misc ---------- */
.empty{ text-align:center; padding:var(--sp-7) var(--sp-4); color:var(--ink-faint); }
.empty .em{ font-size:42px; }
.empty p{ margin-top:8px; font-size:14px; }
.muted{ color:var(--ink-faint); }
.row-split{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.divider{ height:1px; background:var(--line); margin:var(--sp-4) 0; }
.ckline{ display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14px; border-bottom:1px solid var(--line); }
.ckline:last-child{ border-bottom:none; }
.ckline .bx{ width:22px; height:22px; border:2px solid var(--line-strong); border-radius:7px; flex:none; display:grid; place-items:center; color:#fff; transition:all .12s; }
.ckline .bx svg{ opacity:0; transition:opacity .12s; }
.ckline.on .bx{ background:var(--green); border-color:var(--green); }
.ckline.on .bx svg{ opacity:1; }
.ckline.off span:last-child{ color:var(--ink-faint); }
/* checklist editável (validação do fiscal) */
.ck-edit{ cursor:pointer; user-select:none; }
.ck-edit input{ position:absolute; opacity:0; pointer-events:none; }
.ck-edit input:checked + .bx{ background:var(--green); border-color:var(--green); }
.ck-edit input:checked + .bx svg{ opacity:1; }
.ck-edit input:not(:checked) ~ span:last-child{ color:var(--ink-faint); text-decoration:line-through; }
.fab-streak{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--gold); }

@keyframes pop{ 0%{ transform:scale(.96); opacity:0 } 100%{ transform:scale(1); opacity:1 } }
.card,.task,.hero,.stat,.tile{ animation:pop .28s ease both; }

/* ---------- Skeleton / shimmer ---------- */
.sk{ position:relative; overflow:hidden; background:#ECE5D6; border-radius:8px; }
.sk::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:shimmer 1.25s infinite;
}
@keyframes shimmer{ 100%{ transform:translateX(100%); } }
.sk-wrap{ animation:fadein .2s ease both; }
.sk-hero{ height:196px; border-radius:var(--r-xl); margin-bottom:16px; }
.sk-line{ height:13px; margin:8px 0; }
.sk-line.w40{ width:40%; } .sk-line.w60{ width:60%; } .sk-line.w80{ width:80%; } .sk-line.w30{ width:30%; }
.sk-stat{ height:84px; border-radius:var(--r-md); }
.sk-stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-bottom:16px; }
.sk-row{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px 16px; margin-bottom:12px; box-shadow:var(--sh-1); }
.sk-av{ width:34px; height:34px; border-radius:9px; flex:none; }
.sk-row .grow{ flex:1; }
.sk-pill{ width:74px; height:22px; border-radius:var(--r-pill); }
.sk-title{ width:160px; height:11px; border-radius:6px; margin:22px 4px 12px; }

/* fade da troca de conteúdo (pjax) */
@keyframes fadein{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
.app-main.swapping{ opacity:.0; }
.app-main.swapped{ animation:fadein .22s ease both; }

/* barra de progresso topo (navegação) */
#nprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:100;
  background:linear-gradient(90deg, var(--navy-300), var(--gold)); transition:width .2s ease, opacity .3s;
  box-shadow:0 0 8px rgba(176,122,34,.5); }

/* ---------- Tooltips “?” (explicações) ---------- */
.info-q{
  display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%;
  font-size:10px; font-weight:800; cursor:pointer; vertical-align:middle; margin-left:5px;
  background:rgba(255,255,255,.18); color:inherit; border:1px solid rgba(255,255,255,.3); opacity:.85;
  line-height:1; user-select:none;
}
.card .info-q,.section-title .info-q,.field .info-q{ background:var(--paper-2); color:var(--ink-faint); border-color:var(--line); }
.info-q:active{ transform:scale(.9); }
.tip-bubble{
  position:fixed; z-index:80; max-width:260px; background:#262C3B; color:#F4F1E8;
  font-size:12.5px; line-height:1.45; font-weight:500; padding:10px 12px; border-radius:12px;
  box-shadow:0 12px 34px rgba(20,24,34,.4); opacity:0; transform:translateY(4px);
  transition:opacity .15s, transform .15s; pointer-events:none;
}
.tip-bubble.show{ opacity:1; transform:none; }
.tip-bubble::after{ content:""; position:absolute; bottom:-5px; left:var(--ax,20px); width:10px; height:10px; background:#262C3B; transform:rotate(45deg); }
.tip-bubble.below::after{ bottom:auto; top:-5px; }

/* ícone em empty-state */
.em-ic{ color:var(--ink-faint); display:flex; justify-content:center; margin-bottom:4px; }
.empty .em-ic svg{ width:40px; height:40px; }

/* stat clicável */
a.stat{ text-decoration:none; transition:transform .12s, box-shadow .15s; }
a.stat:active{ transform:scale(.97); }
a.stat:hover{ box-shadow:var(--sh-2); }

/* glass sutil no hero */
.glass-hero{ border:1px solid rgba(255,255,255,.10); }
/* hero da fatura por status (vibe app de banco) */
.hero.fat-vencida{ background:linear-gradient(150deg, #8A3326 0%, #5A1E16 75%); }
.hero.fat-paga{ background:linear-gradient(150deg, #2A6B4D 0%, #173F2D 75%); }
.hero.hero-eco{ background:linear-gradient(150deg, #2A6B4D 0%, #1A4A35 70%); }

/* ---------- PIX (QR + copia-e-cola) ---------- */
#pixQr{ display:flex; justify-content:center; margin:16px 0 6px; }
#pixQr svg{ width:188px; height:188px; border-radius:10px; }
.pix-cc{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10px; line-height:1.5; word-break:break-all;
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  margin:6px 0 12px; color:var(--ink-soft); max-height:70px; overflow:auto; text-align:left;
}

/* ---------- Recap mensal (virada de temporada) ---------- */
.recap-modal{
  position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden;
  background:var(--grad-brand);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.recap-modal.open{ opacity:1; pointer-events:auto; }
.recap-card{
  position:relative; z-index:2; width:100%; max-width:360px; text-align:center;
  background:rgba(255,255,255,.98); border-radius:26px; padding:30px 24px 24px; box-shadow:0 24px 70px rgba(0,0,0,.5);
  transform:translateY(16px) scale(.95); transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.recap-modal.open .recap-card{ transform:none; }
.recap-badge{ width:64px;height:64px;border-radius:20px;margin:0 auto 10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#C98E2E,#B07A22); box-shadow:0 10px 24px rgba(176,122,34,.5); }
.recap-mascote{ width:118px;height:118px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(176,122,34,.16), transparent 70%);
  box-shadow:0 12px 30px rgba(31,56,100,.22); }
.recap-mascote img{ width:112px;height:112px;border-radius:50%;object-fit:cover; }
.recap-kicker{ font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold); }
.recap-title{ font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);margin-top:2px; }
.recap-index{ font-family:var(--serif);font-size:54px;font-weight:700;line-height:1;margin-top:14px; }
.recap-delta{ font-size:18px;font-weight:800;margin-left:6px;vertical-align:middle; }
.recap-sub{ font-size:12px;color:var(--ink-faint);letter-spacing:.03em; }
.recap-clean{ display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;font-weight:800;color:var(--green);
  background:var(--green-soft);padding:5px 12px;border-radius:999px; }
.recap-stats{ display:flex;justify-content:space-around;gap:8px;margin:18px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.recap-stats div{ display:flex;flex-direction:column; }
.recap-stats b{ font-family:var(--serif);font-size:18px;font-weight:700; }
.recap-stats span{ font-size:11px;color:var(--ink-faint);margin-top:2px; }
.recap-msg{ font-size:14px;font-weight:600;color:var(--ink-soft);margin-bottom:18px; }
.confetti{ position:absolute; top:-20px; width:9px;height:14px;border-radius:2px;opacity:.9;animation:fall linear infinite; }
.confetti.c1{ left:12%; background:#C98E2E; animation-duration:3.2s; }
.confetti.c2{ left:28%; background:#7BE0AE; animation-duration:3.8s; animation-delay:.3s; }
.confetti.c3{ left:45%; background:#F2A99B; animation-duration:3.0s; animation-delay:.6s; }
.confetti.c4{ left:62%; background:#9BB8E8; animation-duration:4.0s; animation-delay:.2s; }
.confetti.c5{ left:78%; background:#C98E2E; animation-duration:3.5s; animation-delay:.5s; }
.confetti.c6{ left:90%; background:#7BE0AE; animation-duration:3.3s; animation-delay:.1s; }
@keyframes fall{ 0%{ transform:translateY(-20px) rotate(0); } 100%{ transform:translateY(105vh) rotate(540deg); } }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(86px + env(safe-area-inset-bottom)); transform:translate(-50%, 12px);
  z-index:90; background:#262C3B; color:#F4F1E8; font-size:13.5px; font-weight:600;
  padding:11px 18px; border-radius:14px; box-shadow:0 12px 34px rgba(20,24,34,.4);
  opacity:0; transition:opacity .2s, transform .2s cubic-bezier(.34,1.56,.64,1); pointer-events:none; max-width:88%;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---------- Avatar + menu da conta ---------- */
.user-menu-wrap{ position:relative; }
.avatar-btn{
  width:38px; height:38px; border-radius:50%; border:2px solid #fff;
  display:grid; place-items:center; color:#fff; font-family:var(--serif); font-weight:700; font-size:16px;
  box-shadow:var(--sh-1); cursor:pointer; transition:transform .12s;
}
.avatar-btn:active{ transform:scale(.92); }
.user-menu{
  position:absolute; top:48px; right:0; z-index:50; width:224px;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-3); padding:8px;
  opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none; transform-origin:top right;
  transition:opacity .16s, transform .16s cubic-bezier(.34,1.56,.64,1);
}
.user-menu.open{ opacity:1; transform:none; pointer-events:auto; }
.user-menu .um-head{ display:flex; align-items:center; gap:10px; padding:6px 8px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.user-menu .um-head .av{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--serif); font-weight:700; font-size:17px; flex:none; }
.user-menu a{ display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:11px; font-size:14px; font-weight:600; color:var(--ink); }
.user-menu a:active{ background:var(--paper-2); }
.user-menu a svg{ color:var(--ink-faint); }
.user-menu a.danger{ color:var(--red); } .user-menu a.danger svg{ color:var(--red); }
.um-toggle{ display:flex; align-items:center; gap:11px; width:100%; padding:11px 10px; border-radius:11px; font-size:14px; font-weight:600; color:var(--ink); background:none; border:none; text-align:left; border-bottom:1px solid var(--line); margin-bottom:6px; padding-bottom:13px; }
.um-toggle:active{ background:var(--paper-2); }
.um-toggle svg{ color:var(--ink-faint); }
.um-toggle .tt-on,.um-toggle .tt-off{ display:inline-flex; align-items:center; gap:11px; }
.um-toggle .tt-off{ display:none; }
html[data-theme="dark"] .um-toggle .tt-on{ display:none; }
html[data-theme="dark"] .um-toggle .tt-off{ display:inline-flex; }

/* ---- Sino de notificações (header) ---- */
.header-actions{ display:flex; align-items:center; gap:10px; }
.bell-btn{
  position:relative; width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface); display:grid; place-items:center; color:var(--ink-soft);
  box-shadow:var(--sh-1); flex:none; transition:transform .12s, color .12s;
}
.bell-btn:active{ transform:scale(.92); }
.bell-dot{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--red); color:#fff; font-size:10.5px; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--surface); line-height:1;
}

/* ---- Central de notificações ---- */
.notif{
  display:flex; align-items:flex-start; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:13px 14px; margin-bottom:10px;
  box-shadow:var(--sh-1); position:relative;
}
a.notif:active{ transform:scale(.995); }
.notif-novo{ background:#FCFAF4; border-color:#EADFC4; box-shadow:0 1px 0 rgba(176,122,34,.08), var(--sh-1); }
.notif-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--paper-2); color:var(--navy); }
.notif.nc-gold .notif-ic{ background:var(--gold-soft); color:var(--gold); }
.notif.nc-green .notif-ic{ background:var(--green-soft); color:var(--green); }
.notif.nc-red .notif-ic{ background:var(--red-soft); color:var(--red); }
.notif.nc-navy .notif-ic{ background:#E1E7F2; color:var(--navy); }
.notif.nc-gray .notif-ic{ background:var(--paper-2); color:var(--ink-soft); }
.notif-body{ flex:1; min-width:0; }
.notif-top{ display:flex; align-items:center; gap:8px; }
.notif-titulo{ font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.25; }
.notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; }
.notif-corpo{ font-size:13px; color:var(--ink-soft); margin-top:3px; line-height:1.4; }
.notif-quando{ font-size:11.5px; color:var(--ink-faint); margin-top:5px; letter-spacing:.01em; }
.notif-go{ align-self:center; color:var(--ink-faint); flex:none; }

/* =================================================================
   MODO ESCURO (H2) — redefine tokens; a marca (navy/gold) permanece.
   ================================================================= */
html[data-theme="dark"]{
  --paper:        #13151B;
  --paper-2:      #1C1F28;
  --ink:          #E9EAF0;
  --ink-soft:     #A6ABBC;
  --ink-faint:    #7A8093;
  --line:         #282C38;
  --line-strong:  #383D4B;
  --surface:      #191C24;

  --gold:         #DCAD5E;
  --gold-soft:    #352B17;
  --red:          #E48A7C;
  --red-soft:     #3A211D;
  --green:        #5BC393;
  --green-soft:   #15281F;
  --blue:         #74A8DF;
  --blue-soft:    #18293A;

  --sh-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.32);
  --sh-2: 0 4px 14px rgba(0,0,0,.44), 0 2px 6px rgba(0,0,0,.34);
  --sh-3: 0 14px 36px rgba(0,0,0,.55);
  --sh-nav: 0 -2px 18px rgba(0,0,0,.45);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 520px at 50% -200px, #1F2433 0%, transparent 70%),
    var(--paper);
}
html[data-theme="dark"] ::selection{ background:var(--gold-soft); color:var(--gold); }

/* Cards de grupo: fundo volta a surface escuro, mantém borda/chip coloridos */
html[data-theme="dark"] .task.g-lixo,
html[data-theme="dark"] .task.g-banheiro,
html[data-theme="dark"] .task.g-quarto,
html[data-theme="dark"] .task.g-louca,
html[data-theme="dark"] .task.g-condominio,
html[data-theme="dark"] .task.g-comida,
html[data-theme="dark"] .task.g-taxas{ background:var(--surface); }
html[data-theme="dark"] .task.g-avulsa{ background:var(--surface); }
html[data-theme="dark"] .task.g-avulsa .t-ico{ background:#14322D; color:#5FBDB0; }
html[data-theme="dark"] .task.g-lixo .t-ico{ background:#15281F; color:#5BC393; }
html[data-theme="dark"] .task.g-banheiro .t-ico{ background:#18293A; color:#74A8DF; }
html[data-theme="dark"] .task.g-quarto .t-ico{ background:#251C36; color:#B79AD8; }
html[data-theme="dark"] .task.g-louca .t-ico{ background:#352B17; color:#DCAD5E; }
html[data-theme="dark"] .task.g-condominio .t-ico{ background:#1E2A40; color:#9FB6DD; }
html[data-theme="dark"] .task.g-comida .t-ico{ background:#33231A; color:#D98F63; }
html[data-theme="dark"] .task.g-taxas .t-ico{ background:#262A35; color:#A6ABBC; }

/* Pílulas e chips com cor cravada */
html[data-theme="dark"] .pill.gray{ background:#262A35; color:#A6ABBC; }
html[data-theme="dark"] .pill.navy{ background:#1E2A40; color:#9FB6DD; }
html[data-theme="dark"] .notif.nc-navy .notif-ic{ background:#1E2A40; color:#9FB6DD; }

/* Flash (texto escuro -> claro) */
html[data-theme="dark"] .flash.ok{ border-color:#1F4A37; color:#7FD7AC; }
html[data-theme="dark"] .flash.err{ border-color:#5A2A22; color:#EC9A8D; }
html[data-theme="dark"] .flash.info{ border-color:#244660; color:#8FBDE8; }

/* Superfícies translúcidas claras -> escuras */
html[data-theme="dark"] .user-menu{ background:rgba(22,25,33,.92); }
html[data-theme="dark"] .recap-card{ background:rgba(22,25,33,.98); }
html[data-theme="dark"] .cal-cell.today{ background:rgba(116,168,223,.12); }
html[data-theme="dark"] .sk{ background:#262A35; }
html[data-theme="dark"] .notif-novo{ background:#1E222C; border-color:#33384A; }
html[data-theme="dark"] .app-header{ background:rgba(19,21,27,.82); }
html[data-theme="dark"] .app-footer{ background:transparent; }
html[data-theme="dark"] .app-header .seal{ box-shadow:0 0 0 1px rgba(255,255,255,.06); }

/* =================================================================
   DESKTOP = SISTEMA (H4) — sidebar lateral + conteúdo espaçoso.
   Mobile permanece como app (bottom nav). Breakpoint 980px.
   ================================================================= */
.side-brand{ display:none; }
.page-title{ display:none; }

@media (min-width:980px){
  .app{
    max-width:1200px; min-height:100dvh;
    display:grid;
    grid-template-columns:244px minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"nav header" "nav main" "nav footer";
    box-shadow:0 0 0 1px var(--line);
  }
  .app-header{ grid-area:header; height:64px; padding:0 32px; }
  .app-main{ grid-area:main; padding:26px 32px 40px; }
  .app-footer{ grid-area:footer; text-align:right; padding:12px 32px 18px; }
  .tabbar{ grid-area:nav; }

  /* Header vira top bar: logo migra pra sidebar, sobra o título da página */
  .app-header .seal,.app-header .brand-name,.brand-logo{ display:none; }
  .page-title{ display:block; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }

  /* Sidebar de navegação */
  .tabbar{
    position:sticky; top:0; align-self:start; height:100dvh;
    left:auto; right:auto; bottom:auto; max-width:none; margin:0;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:3px;
    padding:18px 14px; border:none; border-radius:0;
    background:linear-gradient(180deg, rgba(31,56,100,.99), rgba(18,31,61,1));
    box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
  }
  .tab-indicator{ display:none; }
  .side-brand{ display:flex; align-items:center; gap:11px; padding:8px 8px 16px; margin-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.10); }
  .side-brand .sb-logo{ width:172px; max-width:100%; height:auto; display:block; }
  .side-brand .sb-seal{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
    background:linear-gradient(145deg,#2A4476,#1A2E55); color:#F4E9C8; font-family:var(--serif); font-weight:700; font-size:19px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
  .side-brand .sb-text b{ display:block; color:#F4EEDE; font-family:var(--serif); font-size:16px; font-weight:600; letter-spacing:-.01em; }
  .side-brand .sb-text small{ display:block; color:#9FB0D0; font-size:11px; margin-top:-1px; }

  .tabbar a:not(.side-brand){
    flex:none; flex-direction:row; justify-content:flex-start; gap:12px;
    height:46px; padding:0 14px; border-radius:12px;
    font-size:14px; font-weight:600; letter-spacing:0; color:rgba(238,231,214,.64);
  }
  .tabbar a:not(.side-brand) svg{ width:20px; height:20px; }
  .tabbar a:not(.side-brand):hover{ color:#F6EFDC; background:rgba(255,255,255,.06); }
  .tabbar a:not(.side-brand).active{ color:#F6EFDC; background:rgba(255,255,255,.11); }
  .tabbar a:not(.side-brand).active svg{ transform:none; filter:none; }
  .tabbar a:not(.side-brand):active{ transform:none; }
  .tabbar a:not(.side-brand) .dot{ position:static; margin:0 0 0 auto; box-shadow:none; }
}

/* Modo escuro no desktop: moldura da app mais sutil */
html[data-theme="dark"] .app{ box-shadow:none; }
@media (min-width:980px){
  html[data-theme="dark"] .app{ box-shadow:0 0 0 1px var(--line); }
}

/* =================================================================
   PROGRESSO / GAMIFICAÇÃO (G1)
   ================================================================= */
.prog-hero{ text-align:center; background:var(--grad-brand); color:#F2ECDD; border-radius:var(--r-xl);
  padding:24px 20px 22px; margin-bottom:14px; box-shadow:var(--sh-2); }
.ph-mascote{ width:96px; height:96px; border-radius:50%; margin:0 auto 10px; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(176,122,34,.28), transparent 70%); }
.ph-mascote img{ width:92px; height:92px; border-radius:50%; object-fit:cover; }
.ph-patente{ font-family:var(--serif); font-size:24px; font-weight:600; }
.ph-nivel{ font-size:12.5px; color:#BCC8E0; margin-top:2px; letter-spacing:.02em; }
.ph-xpbar{ height:10px; border-radius:6px; background:rgba(255,255,255,.16); overflow:hidden; margin:14px 0 8px; }
.ph-xpbar span{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#E8C988,#C98E2E); }
.ph-xpinfo{ font-size:12.5px; color:#D7DEEC; }
.ph-xpinfo b{ color:#F4E9C8; }

.prog-wallet{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:6px; }
.pw-item{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 10px;
  display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:var(--sh-1); }
.pw-item > div{ display:flex; flex-direction:column; align-items:center; }
.pw-item b{ font-family:var(--serif); font-size:20px; font-weight:700; color:var(--ink); line-height:1; }
.pw-item span{ font-size:11px; color:var(--ink-faint); margin-top:3px; }

.pat-row{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); }
.pat-row:last-child{ border-bottom:none; }
.pat-dot{ width:11px; height:11px; border-radius:50%; background:var(--paper-2); border:2px solid var(--line-strong); flex:none; }
.pat-dot.on{ background:var(--gold); border-color:var(--gold); }
.pat-nome{ flex:1; font-weight:600; font-size:14px; color:var(--ink); }
.pat-atual .pat-nome{ color:var(--gold); font-weight:800; }
.pat-voce{ font-size:10px; font-weight:800; background:var(--gold-soft); color:var(--gold); padding:2px 7px; border-radius:999px; margin-left:6px; vertical-align:middle; }
.pat-xp{ font-size:12px; color:var(--ink-faint); font-weight:700; }

.glog-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 4px; border-bottom:1px solid var(--line); font-size:13px; }
.glog-row:last-child{ border-bottom:none; }
.glog-det{ color:var(--ink-soft); }
.glog-delta{ display:flex; gap:8px; flex:none; }
.gd-xp{ color:var(--navy); font-weight:800; font-size:12px; }
.gd-cr{ color:var(--gold); font-weight:800; font-size:12px; display:inline-flex; align-items:center; gap:3px; }
html[data-theme="dark"] .gd-xp{ color:#9FB6DD; }

/* ---------- Roleta (estilo cassino) ---------- */
.roleta-card{ text-align:center; }
.roleta-stage{ position:relative; width:300px; max-width:100%; aspect-ratio:1; margin:4px auto 8px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #22324F 0%, #16243f 56%, #0b1325 100%);
  box-shadow:inset 0 0 34px rgba(0,0,0,.55), 0 16px 38px rgba(8,15,33,.5); }
.roleta-bulbs{ position:absolute; inset:0; pointer-events:none; }
.bulb{ position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px; border-radius:50%;
  background:radial-gradient(circle, #FCECC0, #C98E2E); box-shadow:0 0 7px 1px rgba(240,206,134,.85);
  animation:bulbTwinkle 1.5s ease-in-out infinite; }
@keyframes bulbTwinkle{ 0%,100%{ opacity:1; } 50%{ opacity:.3; box-shadow:0 0 3px rgba(240,206,134,.35); } }
.roleta-wrap{ position:relative; width:250px; height:250px; }
.roleta{ width:100%; height:100%; border-radius:50%; position:relative; overflow:hidden;
  border:7px solid #C98E2E; box-shadow:0 0 0 2px #875b15, inset 0 0 22px rgba(0,0,0,.38);
  transition:transform 5.6s cubic-bezier(.08,.62,.1,1); will-change:transform; }
.roleta::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 28%, rgba(255,255,255,.34), rgba(255,255,255,0) 54%); }
.rl-seg{ position:absolute; inset:0; transform-origin:center; pointer-events:none; z-index:1; }
.rl-emoji{ position:absolute; top:9px; left:50%; transform:translateX(-50%); opacity:.34; z-index:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.rl-nome{ position:absolute; top:40px; left:50%; transform:translate(-50%,-50%); z-index:2; }
.rl-nome.rl-far{ top:46px; }
.rl-nome-in{ display:inline-block; white-space:nowrap; font-size:14px; font-weight:800; color:#fff; line-height:1;
  letter-spacing:0; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7); transform-origin:center; }
.roleta-hub svg{ color:#5a3d0e; }
.roleta-pointer{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:4;
  width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:27px solid #F2D58A;
  filter:drop-shadow(0 0 5px rgba(240,206,134,.95)) drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.roleta-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 34%, #FCEBBC, #C98E2E 76%);
  box-shadow:0 0 0 3px #fff, 0 0 15px rgba(240,206,134,.75), 0 4px 10px rgba(0,0,0,.4); }

/* Botões da roleta */
.roleta-giros{ font-size:13px; color:var(--ink-soft); margin:2px 0 10px; }
.roleta-giros b{ color:var(--gold); font-weight:800; }
.btn-spin{ display:block; width:100%; max-width:240px; margin:0 auto; border:none; cursor:pointer;
  border-radius:16px; padding:15px 16px; font-family:var(--serif); font-size:21px; font-weight:700; letter-spacing:.06em; color:#4A2E08;
  background:linear-gradient(180deg,#FBE3A0,#E0A93C 52%,#C98E2E);
  box-shadow:0 0 18px rgba(201,142,46,.55), inset 0 1px 0 rgba(255,255,255,.6), 0 7px 16px rgba(176,122,34,.4);
  transition:transform .1s, box-shadow .2s; animation:spinGlow 2.2s ease-in-out infinite; }
@keyframes spinGlow{ 50%{ box-shadow:0 0 28px rgba(201,142,46,.85), inset 0 1px 0 rgba(255,255,255,.6), 0 7px 16px rgba(176,122,34,.5); } }
.btn-spin:active{ transform:scale(.96); }
.btn-spin:disabled{ background:var(--paper-2); color:var(--ink-faint); box-shadow:none; animation:none; cursor:default; }
.btn-buy-sm{ display:inline-flex; align-items:center; gap:6px; margin:11px auto 0; background:none; border:none; cursor:pointer;
  color:var(--ink-soft); font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.btn-buy-sm:disabled{ opacity:.5; cursor:default; text-decoration:none; }

.roleta-odds{ margin-top:14px; text-align:left; }
.roleta-odds summary{ cursor:pointer; color:var(--ink-soft); font-weight:700; font-size:12.5px; padding:4px 0; }
.ro-row{ display:flex; justify-content:space-between; align-items:center; padding:5px 2px; border-bottom:1px solid var(--line); font-size:13px; }
.ro-row:last-child{ border-bottom:none; }

/* Reveal do prêmio (AAA cassino) */
.reveal-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; overflow:hidden;
  background:rgba(8,14,30,.74); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:0; pointer-events:none; transition:opacity .25s; }
.reveal-modal.open{ opacity:1; pointer-events:auto; }
.reveal-card{ --acc:#C98E2E; position:relative; z-index:2; width:100%; max-width:320px; text-align:center; overflow:hidden;
  background:radial-gradient(circle at 50% 0%, #243557 0%, #15203a 58%, #0b1325 100%);
  border:2px solid var(--acc); border-radius:26px; padding:28px 24px 22px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 38px -6px var(--acc), 0 22px 60px rgba(0,0,0,.6);
  transform:scale(.85) translateY(12px); transition:transform .42s cubic-bezier(.34,1.56,.64,1); }
.reveal-modal.open .reveal-card{ transform:none; }
.reveal-card.rar-consolacao,.reveal-card.rar-comum{ --acc:#3FAE7B; }
.reveal-card.rar-raro{ --acc:#4F93D6; }
.reveal-card.rar-epico{ --acc:#A07FCB; }
.reveal-card.rar-lendario{ --acc:#E9B85A; }
.reveal-card.rar-mitico{ --acc:#EC5B4F; animation:revPulse 1.2s ease-in-out infinite; }
@keyframes revPulse{ 50%{ box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 54px 0 var(--acc), 0 22px 60px rgba(0,0,0,.6); } }
.reveal-card > *{ position:relative; z-index:1; }
.reveal-top{ font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:#C9B27A; margin-bottom:2px; }
.reveal-emoji-wrap{ position:relative; display:flex; justify-content:center; align-items:center; margin:10px 0 12px; }
.reveal-rays{ position:absolute; top:50%; left:50%; width:300px; height:300px; transform:translate(-50%,-50%); pointer-events:none; z-index:0; opacity:.5;
  background:conic-gradient(from 0deg, transparent 0 12deg, rgba(255,255,255,.13) 12deg 24deg);
  -webkit-mask:radial-gradient(circle, #000 0 38%, transparent 60%); mask:radial-gradient(circle, #000 0 38%, transparent 60%);
  animation:rayspin 16s linear infinite; }
@keyframes rayspin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.reveal-emoji-wrap::before{ content:""; position:absolute; top:50%; left:50%; width:128px; height:128px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, var(--acc), transparent 64%); opacity:.55; filter:blur(3px); z-index:0; }
.reveal-emoji{ position:relative; z-index:1; display:inline-flex; }
.reveal-emoji img{ width:94px; height:94px; animation:revPop .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes revPop{ 0%{ transform:scale(.3) rotate(-20deg); opacity:0; } 100%{ transform:none; opacity:1; } }
.reveal-badge{ display:inline-block; padding:4px 14px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; background:var(--acc); box-shadow:0 0 16px -2px var(--acc); }
.reveal-nome{ font-family:var(--serif); font-size:24px; font-weight:600; color:#F4EEDE; line-height:1.12; margin-top:11px; }
.reveal-det{ font-size:13.5px; color:#BCC8E0; margin:6px 0 20px; }
.reveal-ok{ width:100%; border:none; cursor:pointer; border-radius:14px; padding:14px; font-family:var(--serif); font-size:18px; font-weight:700; letter-spacing:.06em; color:#4A2E08;
  background:linear-gradient(180deg,#FBE3A0,#E0A93C 52%,#C98E2E); box-shadow:0 6px 16px rgba(176,122,34,.4), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .1s; }
.reveal-ok:active{ transform:scale(.97); }
.rl-conf{ position:absolute; top:-12px; width:9px; height:15px; border-radius:2px; opacity:.95; z-index:3; pointer-events:none; animation:rlFall 2.8s ease-in forwards; }
@keyframes rlFall{ to{ transform:translateY(115vh) rotate(540deg); opacity:.6; } }

/* ---------- Usar item do inventário (fatura) ---------- */
.usar-item-row{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
.usar-item-row form{ flex:1 1 46%; display:flex; }
.usar-item-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--green-soft); color:#1E5C41;
  border:1px solid #BBE0CD; border-radius:13px; padding:11px 12px; font-size:13px; font-weight:800; cursor:pointer; transition:transform .1s; line-height:1.1; }
.usar-item-btn:active{ transform:scale(.97); }
html[data-theme="dark"] .usar-item-btn{ background:#15281F; border-color:#1F4A37; color:#7FD7AC; }
/* nota de anulação (qual item/motivo) no extrato */
.lanc-motivo{ display:flex; align-items:center; gap:5px; margin-top:4px; font-size:11.5px; font-weight:700; color:var(--green); }
.lanc-motivo svg{ flex:none; color:var(--green); }
html[data-theme="dark"] .lanc-motivo{ color:#7FD7AC; }

/* ---------- Inventário (Progresso) ---------- */
.inv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.inv-card{ display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line);
  border-radius:15px; padding:11px 12px; box-shadow:var(--sh-1); position:relative; }
.inv-ic{ width:42px; height:42px; flex:none; display:grid; place-items:center; background:var(--paper-2); border-radius:12px; }
.inv-info b{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.15; }
.inv-info span{ font-size:11px; color:var(--ink-faint); }
.inv-qtd{ position:absolute; top:-7px; right:-7px; min-width:22px; height:22px; padding:0 5px; border-radius:11px;
  background:var(--gold); color:#3a2606; font-size:12px; font-weight:800; display:grid; place-items:center; border:2px solid var(--surface); }
.inv-janta-btn{ grid-column:1/-1; margin-top:2px; }

/* ---------- Conquistas (vitrine) ---------- */
.conq-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.conq-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:14px 10px 12px; box-shadow:var(--sh-1); }
.conq-card.locked{ opacity:.6; }
.conq-card.locked .conq-ic img{ filter:grayscale(1); opacity:.5; }
.conq-nome{ font-size:13px; font-weight:800; color:var(--ink); line-height:1.12; }
.conq-desc{ font-size:10.5px; color:var(--ink-faint); line-height:1.25; }

/* ---------- Recap: XP e conquistas do mês ---------- */
.recap-xp{ display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--ink-soft); margin-bottom:8px; }
.recap-xp b{ color:var(--gold); }
.recap-conq{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; }
.recap-conq-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; color:#1E5C41; background:var(--green-soft); border-radius:999px; padding:4px 9px; }
html[data-theme="dark"] .recap-conq-badge{ background:#15281F; color:#7FD7AC; }

/* ---------- Inventário (lista + usar) ---------- */
.inv-list{ display:flex; flex-direction:column; gap:9px; }
.inv-row{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:11px 13px; box-shadow:var(--sh-1); }
.inv-ic{ position:relative; width:46px; height:46px; flex:none; display:grid; place-items:center; background:var(--paper-2); border-radius:13px; }
.inv-qtd{ position:absolute; top:-7px; right:-7px; min-width:21px; height:21px; padding:0 5px; border-radius:11px; background:var(--gold); color:#3a2606; font-size:11.5px; font-weight:800; display:grid; place-items:center; border:2px solid var(--surface); }
.inv-info{ flex:1; min-width:0; }
.inv-info b{ display:block; font-size:14px; font-weight:800; color:var(--ink); line-height:1.15; }
.inv-info span{ font-size:11.5px; color:var(--ink-faint); }
.inv-use{ flex:none; background:linear-gradient(160deg,var(--navy),var(--navy-700)); color:#F4E9C8; border:none; border-radius:11px; padding:9px 17px; font-size:13.5px; font-weight:800; cursor:pointer; transition:transform .1s; box-shadow:var(--sh-1); }
.inv-use:active{ transform:scale(.95); }

/* Modal seletor de multas (bottom sheet) */
.usar-modal{ position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(10,18,38,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .25s; }
.usar-modal.open{ opacity:1; pointer-events:auto; }
.usar-sheet{ width:100%; max-width:520px; background:var(--surface); border-radius:22px 22px 0 0; padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.3); transform:translateY(100%); transition:transform .3s cubic-bezier(.34,1.3,.64,1); max-height:80dvh; overflow:auto; }
.usar-modal.open .usar-sheet{ transform:none; }
.usar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.usar-head b{ font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); }
.usar-close{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--ink-soft); cursor:pointer; }
.usar-list{ display:flex; flex-direction:column; gap:9px; }
.usar-mrow{ display:flex; align-items:center; gap:10px; width:100%; background:var(--paper-2); border:1px solid var(--line); border-radius:13px; padding:13px 14px; cursor:pointer; text-align:left; transition:transform .1s, border-color .15s; }
.usar-mrow:active{ transform:scale(.99); }
.usar-mrow .um-nome{ flex:1; font-weight:700; font-size:13.5px; color:var(--ink); }
.usar-mrow .um-val{ font-weight:800; color:var(--red); font-size:14px; }
.usar-empty{ text-align:center; color:var(--ink-faint); font-size:13.5px; padding:20px 8px; }

/* ---------- Lista de pagamentos (estorno) ---------- */
.pay-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.pay-row:last-child{ border-bottom:none; }
.pay-info{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.pay-val{ font-weight:800; color:var(--ink); }
.pay-row.pay-anul{ opacity:.65; }
.pay-row.pay-anul .pay-val{ text-decoration:line-through; color:var(--ink-faint); }
.pay-estornar{ flex:none; display:inline-flex; align-items:center; gap:4px; background:var(--red-soft); color:var(--red);
  border:1px solid #E9C4BC; border-radius:10px; padding:6px 11px; font-size:12px; font-weight:800; cursor:pointer; transition:transform .1s; }
.pay-estornar:active{ transform:scale(.96); }
html[data-theme="dark"] .pay-estornar{ background:#3A211D; border-color:#5A2A22; color:#EC9A8D; }

/* ===================== Acessibilidade (a11y) ===================== */
/* <h1> do cabeçalho herda o estilo de .page-title — zera defaults do UA. */
h1.page-title{ margin:0; }

/* Foco visível por teclado em TODOS os interativos (sem afetar clique do mouse). */
:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; border-radius:6px; }
.btn:focus-visible, .btn-primary:focus-visible, .btn-spin:focus-visible,
.tabbar a:focus-visible, .avatar-btn:focus-visible, .h-back:focus-visible,
.bell-btn:focus-visible, a.brand-logo:focus-visible{ outline-color:#F0CE86; outline-offset:3px; }
html[data-theme="dark"] :focus-visible{ outline-color:#F0CE86; }

/* Alvo de toque do "?" (tooltip): visualmente 18px, área de toque 44px. */
.info-q{ position:relative; }
.info-q::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; }

/* Respeita quem pediu menos movimento (vestibular/enxaqueca). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .confete, .rl-conf, .reveal-rays{ display:none !important; }
}

/* Botão em submissão (trava anti duplo-clique) */
.btn.is-submitting, button.is-submitting{ opacity:.6; pointer-events:none; cursor:progress; }