/* Oinknote UI — sistema visual oficial compartilhado pelo site, PWA e app Capacitor. */
:root{
  --o2-pink:#ed5d91;
  --o2-pink-strong:#d94279;
  --o2-pink-soft:#fff0f5;
  --o2-plum:#45263a;
  --o2-green:#16a878;
  --o2-yellow:#f5b941;
  --o2-radius-xs:10px;
  --o2-radius-sm:14px;
  --o2-radius-md:20px;
  --o2-radius-lg:28px;
  --o2-ease:cubic-bezier(.22,.8,.24,1);
}

body.oink-v2{
  --bg:#f8f4f6;
  --bg-grad:linear-gradient(180deg,#fcf9fa 0,#f8f4f6 100%);
  --panel:#fff;
  --card:#fff;
  --card2:#fff;
  --raise:#f7f0f3;
  --txt:#36242f;
  --muted:#806d78;
  --faint:#b5a5ae;
  --line:rgba(69,38,58,.075);
  --line2:rgba(69,38,58,.13);
  --accent:var(--o2-pink);
  --accent2:#fa82aa;
  --accent-glow:rgba(237,93,145,.18);
  --green:#16a878;
  --green-d:#10885f;
  --red:#df526b;
  --red-d:#c53f58;
  --amber:#eaa92c;
  --cyan:#1ca8bb;
  --shadow:0 10px 30px rgba(79,42,62,.06);
  --shadow-sm:0 4px 16px rgba(79,42,62,.045);
  background:var(--bg-grad);
  letter-spacing:-.005em;
}

body.oink-v2:not(.light){
  --bg:#151015;
  --bg-grad:linear-gradient(180deg,#171116 0,#120e12 100%);
  --panel:#1b151a;
  --card:#211a20;
  --card2:#211a20;
  --raise:#2a2228;
  --txt:#fbf7f9;
  --muted:#b9aab2;
  --faint:#756872;
  --line:rgba(255,255,255,.065);
  --line2:rgba(255,255,255,.12);
  --shadow:0 12px 34px rgba(0,0,0,.2);
  --shadow-sm:0 5px 18px rgba(0,0,0,.14);
}

body.oink-v2 *{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
/* A faixa de categorias do Comparativo rola para o lado e a barra nao faz sentido ali: ela cortaria
   a linha de etiquetas ao meio. A regra geral acima vale para todo o resto, entao a excecao precisa
   vir depois dela - o estilo do index.html carrega antes deste arquivo e perdia a disputa. */
body.oink-v2 .cmpcats{scrollbar-width:none}
body.oink-v2 .cmpcats::-webkit-scrollbar{width:0;height:0;display:none}
body.oink-v2 ::selection{background:rgba(237,93,145,.22);color:var(--txt)}
body.oink-v2 button,
body.oink-v2 a,
body.oink-v2 input,
body.oink-v2 select,
body.oink-v2 textarea{touch-action:manipulation}
body.oink-v2 button:focus-visible,
body.oink-v2 a:focus-visible,
body.oink-v2 input:focus-visible,
body.oink-v2 select:focus-visible,
body.oink-v2 textarea:focus-visible{outline:3px solid rgba(237,93,145,.22);outline-offset:2px}

/* Estrutura desktop com presença de aplicativo */
body.oink-v2 .app{align-items:stretch}
body.oink-v2 .side{
  width:276px;
  padding:22px 16px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  border-right:1px solid var(--line);
  box-shadow:8px 0 36px rgba(73,40,58,.025);
  backdrop-filter:blur(22px) saturate(1.15);
}
body.oink-v2 .side .brand{
  min-height:58px;
  padding:5px 8px 20px;
  font-family:Sora,Inter,sans-serif;
  font-size:18px;
}
body.oink-v2 .side .brand .logo{
  width:44px;
  height:44px;
  border-radius:16px;
  background:var(--o2-pink);
  box-shadow:none;
}
body.oink-v2 .nav{gap:5px}
body.oink-v2 .navgroup-label{
  padding:20px 12px 7px;
  color:var(--faint);
  font-size:9px;
  letter-spacing:.11em;
}
body.oink-v2 .nav button{
  min-height:46px;
  padding:11px 13px;
  border-radius:14px;
  font-size:13.5px;
  transition:transform .18s var(--o2-ease),background .18s,color .18s;
}
body.oink-v2 .nav button:hover{background:var(--raise);transform:translateX(2px)}
body.oink-v2 .nav button.active{
  background:var(--o2-pink-soft);
  color:var(--o2-pink-strong);
  box-shadow:none;
}
body.oink-v2:not(.light) .nav button.active{background:rgba(237,93,145,.14);color:#ff94b8}
body.oink-v2 .nav button.active::before{
  content:'';
  position:absolute;
  left:0;
  top:11px;
  bottom:11px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:var(--o2-pink);
}
body.oink-v2 .nav button.active .ic,
body.oink-v2 .nav button.active .ic svg{color:inherit!important;stroke:currentColor!important}
body.oink-v2 .nav button.active .ic{color:inherit!important;opacity:1!important}
body.oink-v2 .savechip{border:0;background:var(--raise);box-shadow:none;border-radius:14px}
body.oink-v2 .themebtn{border:0;background:transparent;box-shadow:none}
body.oink-v2 .profcard{background:transparent!important;border:0!important;border-radius:0!important;padding:10px 0 0!important;box-shadow:none!important}
body.oink-v2 .prof-top{padding:0 4px 11px;margin:0!important}
body.oink-v2 .prof-av{border-radius:13px!important;background:var(--o2-pink)!important;box-shadow:none!important}
body.oink-v2 .prof-days{background:var(--o2-pink-soft)!important;border:0!important;border-radius:13px!important;margin:0 0 9px!important}
body.oink-v2:not(.light) .prof-days{background:rgba(237,93,145,.12)!important}
body.oink-v2 .prof-actions{gap:5px!important}
body.oink-v2 .profbtn{
  min-height:42px;
  padding:10px 11px!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:12px!important;
  box-shadow:none!important;
}
body.oink-v2 .profbtn:hover{background:var(--raise)!important;color:var(--txt)!important;transform:none!important}
body.oink-v2 .profbtn[data-o2-action="account"]{background:var(--raise)!important;color:var(--txt)!important;font-weight:750!important}
body.oink-v2 .profbtn[data-o2-action="subscribe"]{
  background:var(--o2-pink)!important;
  color:#fff!important;
  font-weight:800!important;
  box-shadow:0 8px 18px rgba(216,66,121,.18)!important;
}
body.oink-v2 .profbtn[data-o2-action="subscribe"]:hover{background:var(--o2-pink-strong)!important;color:#fff!important}
body.oink-v2 .profbtn[data-o2-action="admin"]{margin-top:7px;box-shadow:0 -8px 0 -7px var(--line2)!important}
body.oink-v2 .profbtn[data-o2-action="logout"]{color:var(--red)!important;margin-top:1px}

body.oink-v2 .main{
  max-width:1500px;
  padding:34px clamp(24px,3.2vw,52px) 64px;
}
body.oink-v2 .topbar{
  position:sticky;
  top:0;
  z-index:30;
  align-items:center;
  min-height:78px;
  margin:-18px -12px 26px;
  padding:18px 12px 12px;
  background:linear-gradient(180deg,var(--bg) 74%,transparent);
}
body.oink-v2 .topbar h1{font-size:clamp(24px,2vw,31px);line-height:1.1;letter-spacing:-.045em}
body.oink-v2 .topbar .sub{font-size:13px;color:var(--muted);margin-top:7px}
body.oink-v2 .controls{gap:8px}
body.oink-v2 .o2-top-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:min(100%,430px)}
body.oink-v2 .o2-top-actions .controls{justify-content:flex-end}
body.oink-v2 .dash-period-slot{width:100%}
body.oink-v2 .dash-period-slot:empty{display:none!important}
body.oink-v2 .dash-period-slot .periodbar.o2-period{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px}
body.oink-v2 .dash-period-slot .periodbar.o2-period.on{border-color:rgba(237,93,145,.3);background:var(--o2-pink-soft)}
body.oink-v2 .dash-period-slot .perhead{min-height:40px;padding:9px 13px}
body.oink-v2 .dash-period-slot .perbody{padding:12px 13px 13px;gap:8px}
body.oink-v2 .dash-period-slot .perfield input[type=date]{min-height:40px;padding:8px 10px}

/* Componentes essenciais: planos, inputs e cartões */
body.oink-v2 .btn,
body.oink-v2 .sel{
  min-height:44px;
  padding:10px 15px;
  border:1px solid var(--line2);
  border-radius:14px;
  background:var(--card);
  box-shadow:none;
  font-size:13px;
  transition:transform .16s var(--o2-ease),border-color .16s,background .16s,color .16s,box-shadow .16s;
}
body.oink-v2 .btn:hover{transform:translateY(-1px);border-color:rgba(237,93,145,.36);box-shadow:0 8px 18px rgba(69,38,58,.07)}
body.oink-v2 .btn.primary{
  background:var(--o2-pink);
  border-color:var(--o2-pink);
  color:#fff;
  box-shadow:0 9px 20px rgba(216,66,121,.18);
}
body.oink-v2 .btn.primary:hover{background:var(--o2-pink-strong);filter:none;box-shadow:0 11px 24px rgba(216,66,121,.25)}
body.oink-v2 .btn.danger{color:var(--red);background:color-mix(in srgb,var(--red) 6%,var(--card))}
body.oink-v2 .o2-delete-action{border-color:color-mix(in srgb,var(--red) 20%,var(--line2));border-radius:13px;background:transparent;font-size:12px;font-weight:800;box-shadow:none}
body.oink-v2 .o2-delete-action:hover{border-color:color-mix(in srgb,var(--red) 38%,var(--line2));background:color-mix(in srgb,var(--red) 7%,var(--card));color:var(--red);box-shadow:none}
body.oink-v2 button.o2-pressed,
body.oink-v2 .btn.o2-pressed,
body.oink-v2 a.o2-pressed{transform:scale(.965)!important;transition-duration:.06s!important}

body.oink-v2 .card,
body.oink-v2 .kpi,
body.oink-v2 .fincard,
body.oink-v2 .ccard,
body.oink-v2 .ctile,
body.oink-v2 .objcard,
body.oink-v2 .receber-card,
body.oink-v2 .rateio-card,
body.oink-v2 .daygroup,
body.oink-v2 .xbox,
body.oink-v2 .invhead{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
body.oink-v2 .card{border-radius:var(--o2-radius-md);padding:22px}
body.oink-v2 .kpis{gap:14px;margin-bottom:18px}
body.oink-v2 .kpi{
  min-height:142px;
  border-radius:var(--o2-radius-md);
  padding:19px 20px;
  transition:transform .2s var(--o2-ease),border-color .2s,box-shadow .2s;
}
body.oink-v2 .kpi:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:var(--shadow)}
body.oink-v2 .kpi::after{display:none}
body.oink-v2 .kpi .khead{margin-bottom:16px}
body.oink-v2 .kpi .lbl{font-size:10px;letter-spacing:.08em}
body.oink-v2 .kpi .kic{width:40px;height:40px;border-radius:14px}
body.oink-v2 .kpi .val{font-size:clamp(21px,2vw,27px);letter-spacing:-.045em}
body.oink-v2 .grid{gap:14px}
body.oink-v2 .card h3{font-size:16px;letter-spacing:-.025em}
body.oink-v2 .viewintro{
  background:var(--o2-pink-soft);
  border:0;
  border-radius:16px;
  color:#7e5267;
}
body.oink-v2:not(.light) .viewintro{background:rgba(237,93,145,.1);color:var(--muted)}
body.oink-v2 .periodbar.o2-period{margin:-3px 0 18px;background:transparent;border:1px dashed var(--line2);box-shadow:none}
body.oink-v2 .periodbar.o2-period.on{background:var(--o2-pink-soft);border-style:solid;border-color:rgba(237,93,145,.22)}
body.oink-v2:not(.light) .periodbar.o2-period.on{background:rgba(237,93,145,.08)}

body.oink-v2 input:not([type=checkbox]):not([type=radio]),
body.oink-v2 textarea,
body.oink-v2 .modal select{
  min-height:48px;
  border:1px solid var(--line2);
  border-radius:14px;
  background:var(--raise);
  color:var(--txt);
  padding:12px 14px;
  box-shadow:none;
  transition:border-color .16s,background .16s,box-shadow .16s;
}
body.oink-v2 input:not([type=checkbox]):not([type=radio]):focus,
body.oink-v2 textarea:focus,
body.oink-v2 .modal select:focus{
  outline:none;
  border-color:rgba(237,93,145,.58);
  background:var(--card);
  box-shadow:0 0 0 4px rgba(237,93,145,.1);
}
body.oink-v2 .field label{font-size:10px;letter-spacing:.075em;color:var(--muted);margin-bottom:8px}
body.oink-v2 .seg{padding:4px;background:var(--raise);border:0;border-radius:16px;gap:4px}
body.oink-v2 .seg label span{min-height:43px;border:0!important;border-radius:12px!important;background:transparent;box-shadow:none}
body.oink-v2 .seg label input:checked+span{background:var(--card);color:var(--o2-pink-strong);box-shadow:0 3px 10px rgba(69,38,58,.07)}

/* Seletores de criação: marcação discreta, firme e fácil de reconhecer. */
body.oink-v2 .colorrow{gap:11px;padding:3px 2px 5px}
body.oink-v2 .swatch{
  position:relative;
  display:grid;
  place-items:center;
  box-sizing:border-box!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  flex:0 0 38px!important;
  margin:0!important;
  padding:0!important;
  border:2px solid transparent;
  border-radius:12px;
  background:linear-gradient(135deg,var(--sw),var(--sw2));
  box-shadow:none!important;
  outline:0!important;
  transform:none!important;
  animation:none!important;
  transition:border-color .12s ease!important;
  -webkit-tap-highlight-color:transparent;
}
body.oink-v2 .swatch>span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;transform:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));transition:opacity .12s ease}
body.oink-v2 .swatch:hover,
body.oink-v2 .swatch:active,
body.oink-v2 .swatch:focus,
body.oink-v2 .swatch:focus-visible,
body.oink-v2 .swatch.sel,
body.oink-v2 .swatch.o2-pressed{transform:none!important;box-shadow:none!important;outline:0!important}
body.oink-v2 .swatch.sel{border-color:rgba(255,255,255,.96)}
body.oink-v2 .swatch.sel>span{opacity:.94;transform:none}
body.oink-v2 .emojirow{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
body.oink-v2 .emojibtn{width:44px;height:44px;border-radius:15px;border:1px solid var(--line);background:var(--raise);color:var(--muted);transition:transform .18s var(--o2-ease),background .18s,color .18s,border-color .18s,box-shadow .18s}
body.oink-v2 .emojibtn:hover{transform:translateY(-2px);border-color:rgba(237,93,145,.28);color:var(--o2-pink-strong)}
body.oink-v2 .emojibtn.sel{border-color:rgba(237,93,145,.28);background:var(--o2-pink-soft);color:var(--o2-pink-strong);box-shadow:0 7px 16px rgba(216,66,121,.12);animation:o2-picker-pop .28s var(--o2-ease)}
body.oink-v2 .objicpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
body.oink-v2 .objicpick button{width:44px;height:44px;border:1px solid var(--line);border-radius:15px;background:var(--raise);color:var(--muted);transition:transform .18s var(--o2-ease),background .18s,color .18s,border-color .18s,box-shadow .18s}
body.oink-v2 .objicpick button:hover{transform:translateY(-2px);border-color:rgba(237,93,145,.28);color:var(--o2-pink-strong)}
body.oink-v2 .objicpick button.sel{transform:none;border-color:rgba(237,93,145,.28);background:var(--o2-pink-soft);color:var(--o2-pink-strong);box-shadow:0 7px 16px rgba(216,66,121,.12);animation:o2-picker-pop .28s var(--o2-ease)}

/* Listas e conteúdo denso continuam completos, mas mais legíveis */
body.oink-v2 .tbl{border-collapse:separate;border-spacing:0 7px}
body.oink-v2 .tbl th{border:0;padding:8px 13px;font-size:9.5px}
body.oink-v2 .tbl td{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px}
body.oink-v2 .tbl td:first-child{border-left:1px solid var(--line);border-radius:13px 0 0 13px}
body.oink-v2 .tbl td:last-child{border-right:1px solid var(--line);border-radius:0 13px 13px 0}
body.oink-v2 .catrow,
body.oink-v2 .recitem,
body.oink-v2 .invitem,
body.oink-v2 .srow,
body.oink-v2 .drow,
body.oink-v2 .ditem2{border-color:var(--line);transition:background .15s,transform .15s}
body.oink-v2 .recitem:hover,
body.oink-v2 .invitem:hover{background:var(--raise);transform:translateX(2px)}
body.oink-v2 .statuspill,
body.oink-v2 .pill,
body.oink-v2 .bdg,
body.oink-v2 .pbadge{border-radius:999px}
body.oink-v2 .catbubble{background:var(--card);box-shadow:0 5px 15px rgba(62,34,50,.08);border-width:1px}
body.oink-v2 .cardsgrid,
body.oink-v2 .objgrid,
body.oink-v2 .ctiles,
body.oink-v2 .receber-grid,
body.oink-v2 .rateio-grid{gap:13px}
body.oink-v2 .ccard,
body.oink-v2 .objcard,
body.oink-v2 .ctile,
body.oink-v2 .receber-card,
body.oink-v2 .rateio-card{border-radius:20px;transition:transform .18s var(--o2-ease),box-shadow .18s}
body.oink-v2 .ccard:hover,
body.oink-v2 .objcard:hover,
body.oink-v2 .ctile:hover,
body.oink-v2 .receber-card:hover,
body.oink-v2 .rateio-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* Resumos de categoria fechados por padrão; a expansão mostra contexto sem poluir a visão geral */
body.oink-v2 .o2-cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
body.oink-v2 .o2-cat-tile{overflow:hidden;padding:0;background:var(--card);border-radius:18px;cursor:default}
body.oink-v2 .o2-cat-tile:hover{transform:none;border-color:color-mix(in srgb,var(--cc) 28%,var(--line));box-shadow:var(--shadow-sm)}
body.oink-v2 .ctile-summary{display:grid;grid-template-columns:40px minmax(0,1fr) auto 24px;align-items:center;gap:10px;width:100%;min-height:76px;padding:13px 14px;border:0;background:transparent;color:var(--txt);font-family:inherit;text-align:left;cursor:pointer}
body.oink-v2 .ctile-summary .ctile-ic{width:40px;height:40px;border-radius:14px;background:color-mix(in srgb,var(--cc) 12%,var(--card));color:var(--cc)}
body.oink-v2 .ctile-summary-copy{display:flex;min-width:0;flex-direction:column;gap:3px}
body.oink-v2 .ctile-summary-copy b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
body.oink-v2 .ctile-summary-copy small{color:var(--muted);font-size:9.5px;font-weight:650}
body.oink-v2 .ctile-summary-value{display:flex;align-items:flex-end;flex-direction:column;gap:3px;white-space:nowrap}
body.oink-v2 .ctile-summary-value b{font:800 14px/1.15 Sora,Inter,sans-serif;letter-spacing:-.025em}
body.oink-v2 .ctile-summary-value small{color:var(--cc);font-size:10px;font-weight:850}
body.oink-v2 .ctile-toggle{width:24px;height:24px;display:grid;place-items:center;border-radius:9px;background:var(--raise);color:var(--muted);transition:transform .22s var(--o2-ease),background .18s,color .18s}
body.oink-v2 .o2-cat-tile.open .ctile-toggle{transform:rotate(90deg);background:color-mix(in srgb,var(--cc) 12%,var(--card));color:var(--cc)}
body.oink-v2 .ctile-details{max-height:0;padding:0 14px;overflow:hidden;opacity:0;border-top:1px solid transparent;transition:max-height .34s var(--o2-ease),padding .28s,opacity .2s,border-color .2s}
body.oink-v2 .o2-cat-tile.open .ctile-details{max-height:260px;padding:12px 14px 14px;opacity:1;border-color:var(--line)}
body.oink-v2 .ctile-detail-top{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px;font-weight:750}
body.oink-v2 .o2-cat-tile .ctile-bar{height:5px;margin:9px 0 11px;background:var(--raise)}
body.oink-v2 .o2-cat-tile .ctile-maior{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;margin:0;padding:10px 0;border:0;color:var(--muted);font-size:9.5px}
body.oink-v2 .o2-cat-tile .ctile-maior>b{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt);font-size:11px}
body.oink-v2 .o2-cat-tile .ctile-maior>strong{grid-column:2;grid-row:1/3;align-self:center;color:var(--txt);font-size:11px}
body.oink-v2 .ctile-analysis{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:36px;margin-top:2px;padding:8px 10px;border:0;border-radius:11px;background:color-mix(in srgb,var(--cc) 10%,var(--raise));color:var(--cc);font:800 10.5px/1 Inter,sans-serif;cursor:pointer}

/* Cartões e contas: preserva a identidade do cartão real e transforma a criação em uma ação clara */
body.oink-v2 .o2-fin-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px;gap:13px}
body.oink-v2 .o2-fin-card,
body.oink-v2 .o2-fin-add{padding:16px}
body.oink-v2 .ccard:not(.add){
  min-height:170px;
  border:0;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  box-shadow:0 16px 34px color-mix(in srgb,var(--g2) 24%,transparent);
}
body.oink-v2 .ccard:not(.add)::before{background:linear-gradient(135deg,var(--g1),var(--g2))}
body.oink-v2 .ccard:not(.add)::after{
  width:78%;
  height:180%;
  top:-54%;
  right:-27%;
  opacity:.75;
}
body.oink-v2 .ccard .ccbank{max-width:calc(100% - 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;letter-spacing:-.025em}
body.oink-v2 .ccard .cctag{width:max-content;display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.15);letter-spacing:.075em}
body.oink-v2 .ccard .ccidentity{display:flex;align-items:center;margin-right:30px}
body.oink-v2 .ccard .ccoink{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.92);
  color:var(--g1);
  box-shadow:0 5px 14px rgba(33,15,27,.1);
}
body.oink-v2 .ccard .ccoink svg{width:25px;height:25px;display:block}
body.oink-v2 .ccard .ccnum{
  width:max-content;
  max-width:100%;
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:1px 8px;
  margin-top:7px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;
  background:rgba(255,255,255,.1);
  font-family:Inter,sans-serif;
  letter-spacing:normal;
  opacity:1;
}
body.oink-v2 .ccard .ccnum>span{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
body.oink-v2 .ccard .ccnum>b{font:800 13px/1 Sora,Inter,sans-serif;letter-spacing:.11em}
body.oink-v2 .ccard .ccnum>small{grid-column:1/-1;font-size:8.5px;letter-spacing:.025em;opacity:.68}
body.oink-v2 .ccard .ccedit{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:11px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
}
body.oink-v2 .ccard:not(.add):hover .ccedit,
body.oink-v2 .ccard:not(.add):focus-within .ccedit{opacity:1}
body.oink-v2 .ccard:not(.add) .ccbot{padding-top:13px;margin-top:11px;border-top:1px solid rgba(255,255,255,.14)}
body.oink-v2 .ccard:not(.add) .cclbl{font-size:9px;letter-spacing:.09em}
body.oink-v2 .ccard:not(.add) .ccval{font-size:21px}
body.oink-v2 .ccard:not(.add) .ccbotR{padding-left:12px;font-size:10px;opacity:.76}
body.oink-v2 .ccard.add{
  min-height:170px;
  border:1.5px dashed rgba(237,93,145,.34);
  background:color-mix(in srgb,var(--o2-pink-soft) 40%,var(--card))!important;
  color:var(--txt);
  box-shadow:none;
}
body.oink-v2 .ccard.add .addcircle{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:18px;
  background:var(--o2-pink-soft);
  color:var(--o2-pink-strong);
  transition:transform .18s var(--o2-ease),background .18s;
}
body.oink-v2:not(.light) .ccard.add,
body.oink-v2:not(.light) .ccard.add .addcircle{background:rgba(237,93,145,.09)!important}
body.oink-v2 .ccard.add:hover{border-color:var(--o2-pink);background:var(--o2-pink-soft)!important;color:var(--o2-pink-strong)}
body.oink-v2 .ccard.add .addsub{max-width:240px;color:var(--muted);font-size:11px;line-height:1.45;text-align:center;font-weight:550}

/* A receber: duas entradas visualmente distintas e acompanhamento com hierarquia forte */
body.oink-v2 .receber-choice{
  position:relative;
  min-height:94px;
  overflow:hidden;
  border:1px solid rgba(237,93,145,.18);
  border-radius:20px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
}
body.oink-v2 .receber-choice::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--o2-pink);
}
body.oink-v2 .receber-choice.rateio{border-color:rgba(28,168,187,.18)}
body.oink-v2 .receber-choice.rateio::before{background:var(--cyan)}
body.oink-v2 .receber-choice-ic{width:48px;height:48px;border-radius:16px;background:var(--o2-pink-soft);color:var(--o2-pink-strong)}
body.oink-v2 .receber-choice.rateio .receber-choice-ic{background:color-mix(in srgb,var(--cyan) 11%,var(--card));color:var(--cyan)}
body.oink-v2 .receber-choice-copy b{font-size:14px;letter-spacing:-.015em}
body.oink-v2 .receber-choice-copy span{margin-top:4px;color:var(--muted);line-height:1.4}
body.oink-v2 .receber-choice-go{width:34px;height:34px;border-radius:12px;background:var(--raise);color:var(--o2-pink-strong)}
body.oink-v2 .receber-choice.rateio .receber-choice-go{color:var(--cyan)}
body.oink-v2 .receber-card,
body.oink-v2 .rateio-card{padding:18px;border-radius:19px;background:var(--card)}
body.oink-v2 .receber-card.atrasado{border-color:color-mix(in srgb,var(--red) 26%,var(--line));box-shadow:inset 3px 0 var(--red),var(--shadow-sm)}
body.oink-v2 .receber-card.recebido{box-shadow:inset 3px 0 var(--green),var(--shadow-sm)}
body.oink-v2 .receber-value{font-size:23px;letter-spacing:-.04em}
body.oink-v2 .receber-actions{padding-top:13px;margin-top:14px;border-top:1px solid var(--line)}
body.oink-v2 .rateio-card{border-top:3px solid color-mix(in srgb,var(--cyan) 58%,transparent)}
body.oink-v2 .rateio-person{min-height:44px;padding:9px 0}
body.oink-v2 .receber-parc-bar{height:7px;border-radius:999px;background:var(--raise);overflow:hidden}

/* Metas: o progresso é o protagonista, e não apenas mais um cartão de dados */
body.oink-v2 .objcard{
  position:relative;
  overflow:hidden;
  padding:20px;
  background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--raise) 38%,var(--card)));
}
body.oink-v2 .objcard::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--obj-color,var(--o2-pink))}
body.oink-v2 .objcard .objname{font-size:16px;letter-spacing:-.025em}
body.oink-v2 .objcard .objval{font-size:24px;letter-spacing:-.045em}
body.oink-v2 .objprog{height:9px;border-radius:999px;background:var(--raise);overflow:hidden}
body.oink-v2 .objprog span{border-radius:inherit;box-shadow:0 0 12px color-mix(in srgb,currentColor 25%,transparent)}
body.oink-v2 .objacts{padding-top:13px;margin-top:14px;border-top:1px solid var(--line);gap:7px}
body.oink-v2 .objacts .btn:first-child{background:var(--o2-pink-soft);border-color:transparent;color:var(--o2-pink-strong);font-weight:800}

/* Investimentos, financiamentos e parcelas: densidade organizada sem aparência de planilha */
body.oink-v2 .invhead{
  border-radius:24px;
  padding:22px;
  background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--o2-pink-soft) 44%,var(--card)));
}
body.oink-v2 .invsec{border-radius:20px;border:1px solid var(--line);background:var(--card);overflow:hidden}
body.oink-v2 .invitem{padding:14px 15px;border:0;border-top:1px solid var(--line);background:transparent}
body.oink-v2 .invitem:first-child{border-top:0}
body.oink-v2 .invic{flex:none;border-radius:14px}
body.oink-v2 .fincard{
  position:relative;
  margin-bottom:14px;
  padding:22px;
  overflow:hidden;
  border-radius:22px;
  box-shadow:var(--shadow-sm);
}
body.oink-v2 .fincard::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--red)}
body.oink-v2 .fingrid{padding:16px;border-radius:16px;background:var(--raise);gap:0}
body.oink-v2 .fincol{padding:4px 14px;border-left:1px solid var(--line2)}
body.oink-v2 .fincol:first-child{border-left:0;padding-left:0}
body.oink-v2 .finprog{height:8px;border-radius:999px;background:var(--raise);overflow:hidden}
body.oink-v2 .finprog span{border-radius:inherit}
body.oink-v2 .finfoot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
body.oink-v2 .parcrow{
  min-height:70px;
  margin-top:8px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--card);
  transition:transform .16s var(--o2-ease),border-color .16s,background .16s;
}
body.oink-v2 .parcrow:hover{transform:translateX(3px);border-color:rgba(237,93,145,.24);background:var(--raise)}
body.oink-v2 .parcrow:first-of-type{border-top:1px solid var(--line)}
body.oink-v2 .parcic{width:42px;height:42px;border-radius:14px}

/* Ações menores, filtros e estados vazios seguem o mesmo idioma visual */
body.oink-v2 .iconbtn{min-width:38px;min-height:38px;border:1px solid var(--line);border-radius:12px;background:var(--raise);color:var(--muted)}
body.oink-v2 .iconbtn:hover{border-color:rgba(237,93,145,.28);color:var(--o2-pink-strong);background:var(--o2-pink-soft)}
body.oink-v2 .filters{gap:8px;padding:10px;border:1px solid var(--line);border-radius:17px;background:var(--card)}
body.oink-v2 #txnAdvFilters{margin-top:10px;padding:13px;border:1px solid var(--line);border-radius:17px;background:var(--raise)}
body.oink-v2 .empty{
  min-height:138px;
  padding:28px 20px!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
}
body.oink-v2 .empty b{color:var(--txt);font-size:14px}
body.oink-v2 .empty>span:last-child{max-width:470px;font-size:12.5px}
body.oink-v2 .o2-empty-icon{width:42px;height:42px;display:grid;place-items:center;margin-bottom:4px;border-radius:15px;background:var(--o2-pink-soft);color:var(--o2-pink-strong);font-size:19px;font-weight:850}

/* Detalhe de categoria: indicadores curtos e escaneáveis substituem a frase corrida */
body.oink-v2 .cat-insights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:0 0 14px;
}
body.oink-v2 .cat-insights.no-trend{grid-template-columns:repeat(2,minmax(0,1fr))}
body.oink-v2 .cat-insight{
  min-width:0;
  min-height:92px;
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--raise);
}
body.oink-v2 .cat-insight>span{
  color:var(--muted);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
}
body.oink-v2 .cat-insight>b{
  margin-top:7px;
  overflow:hidden;
  color:var(--txt);
  font:800 16px/1.2 Sora,Inter,sans-serif;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.oink-v2 .cat-insight>small{margin-top:4px;color:var(--muted);font-size:10.5px}
body.oink-v2 .cat-insight.share{background:var(--o2-pink-soft);border-color:rgba(237,93,145,.14)}
body.oink-v2 .cat-insight.trend.up b{color:var(--red)}
body.oink-v2 .cat-insight.trend.down b{color:var(--green)}
body.oink-v2 .cat-insight.biggest b{font-size:12.5px}
body.oink-v2:not(.light) .cat-insight.share{background:rgba(237,93,145,.1)}
body.oink-v2 .cat-evolution{
  margin-bottom:16px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:19px;
  background:var(--card);
}
body.oink-v2 .cat-evolution-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
body.oink-v2 .cat-evolution-head>div{display:flex;flex-direction:column;gap:2px}
body.oink-v2 .cat-evolution-head b{font-size:13px;color:var(--txt)}
body.oink-v2 .cat-evolution-head small{font-size:10.5px;color:var(--muted)}
body.oink-v2 .cat-evolution-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:var(--o2-pink-soft);color:var(--o2-pink-strong)}
body.oink-v2:not(.light) .cat-evolution-ic{background:rgba(237,93,145,.12);color:#ff94b8}
body.oink-v2 .cat-evolution .chart-wrap{height:190px}
body.oink-v2 .cdrow{min-height:46px;padding:8px 0}
body.oink-v2 .cdbar{height:6px;border-radius:99px;overflow:hidden;background:var(--raise)}
body.oink-v2 .cdbar i{border-radius:inherit}

/* Movimento contínuo concentrado nos elementos vivos, sem animar valores ou cartões inteiros */
body.oink-v2 .o2-dashboard-kpis .kpi .kic{
  position:relative;
  animation:o2-kpi-float 4.2s ease-in-out infinite;
  will-change:transform;
}
body.oink-v2 .o2-dashboard-kpis .kpi:nth-child(2) .kic{animation-delay:-1.05s}
body.oink-v2 .o2-dashboard-kpis .kpi:nth-child(3) .kic{animation-delay:-2.1s}
body.oink-v2 .o2-dashboard-kpis .kpi:nth-child(4) .kic{animation-delay:-3.15s}
body.oink-v2 .o2-dashboard-kpis .kpi .kic::after{
  content:'';
  position:absolute;
  inset:-4px;
  border:1px solid currentColor;
  border-radius:inherit;
  opacity:0;
  animation:o2-icon-ring 4.2s ease-out infinite;
}
body.oink-v2 .o2-dashboard-kpis .kpi:nth-child(2) .kic::after{animation-delay:-1.05s}
body.oink-v2 .o2-dashboard-kpis .kpi:nth-child(3) .kic::after{animation-delay:-2.1s}
body.oink-v2 .o2-dashboard-kpis .kpi:nth-child(4) .kic::after{animation-delay:-3.15s}
body.oink-v2 .donutwrap{isolation:isolate}
body.oink-v2 .donutwrap::before{display:none}
body.oink-v2 .donutwrap .chart-wrap,
body.oink-v2 .donutwrap .donutcenter{z-index:1}
body.oink-v2 .donutwrap .catbubble{z-index:2;cursor:pointer;animation:o2-cat-drift 4.8s ease-in-out infinite;will-change:transform;box-shadow:0 7px 18px color-mix(in srgb,var(--cc) 13%,rgba(62,34,50,.08))}
body.oink-v2 .donutwrap .catbubble:nth-of-type(2n){animation-delay:-2.4s}
body.oink-v2 .donutwrap .catbubble:nth-of-type(3n){animation-delay:-1.2s}
body.oink-v2 .donutwrap .catbubble:hover,
body.oink-v2 .donutwrap .catbubble:focus-visible{animation-play-state:paused;transform:translate(-50%,-50%) scale(1.08)}
body.oink-v2 .objprog>span,
body.oink-v2 .finprog>span,
body.oink-v2 .receber-parc-bar>span{position:relative;overflow:hidden}
body.oink-v2 .objprog>span::after,
body.oink-v2 .finprog>span::after,
body.oink-v2 .receber-parc-bar>span::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.36) 48%,transparent 66%);
  transform:translateX(-130%);
  animation:o2-progress-shine 4.8s ease-in-out infinite;
}

/* Modais com linguagem de folha de aplicativo */
body.oink-v2 .o2-sheet-handle{display:none}
body.oink-v2 .overlay{background:rgba(37,21,31,.42);backdrop-filter:blur(8px)}
body.oink-v2 .modal{
  max-width:520px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--panel);
  box-shadow:0 28px 80px rgba(43,23,35,.2);
  animation:o2-modal-in .28s var(--o2-ease);
}
body.oink-v2 .modal h2{font-size:21px;letter-spacing:-.035em;margin-bottom:23px}
body.oink-v2 .modal-foot{position:sticky;bottom:-28px;margin:24px -28px -28px;padding:15px 28px 20px;background:linear-gradient(180deg,transparent 0,var(--panel) 28%);z-index:2}
body.oink-v2 .toast{bottom:32px;background:var(--o2-plum);color:#fff;border-radius:999px;padding:13px 21px;box-shadow:0 15px 35px rgba(48,25,39,.22)}
body.oink-v2 .empty{border:1px dashed var(--line2);border-radius:20px;background:color-mix(in srgb,var(--card) 70%,transparent)}

/* FAB mais claro e tátil */
body.oink-v2 .fab{
  display:none!important;
  min-width:138px;
  height:54px;
  right:24px;
  bottom:24px;
  border-radius:18px;
  background:var(--o2-pink);
  box-shadow:0 14px 28px rgba(216,66,121,.26);
  transition:transform .18s var(--o2-ease),box-shadow .18s,background .18s;
}
body.oink-v2 .fab:hover{transform:translateY(-2px);background:var(--o2-pink-strong);box-shadow:0 18px 34px rgba(216,66,121,.31)}
body.oink-v2 .fab-label{font-size:12.5px;letter-spacing:.01em}
body.oink-v2 .kpi .value-eye,
body.oink-v2 .ccard .value-eye,
body.oink-v2 .receber-card .value-eye,
body.oink-v2 .rateio-card .value-eye{display:none!important}

/* Login e onboarding no mesmo sistema visual */
body.oink-v2 #authGate{background:linear-gradient(145deg,#fff7fa 0,#f8edf2 100%)!important}
body.oink-v2 .ag-shell{max-width:1020px;border-radius:32px;overflow:hidden;box-shadow:0 30px 90px rgba(111,49,79,.16)}
body.oink-v2 .ag-brand{background:var(--o2-pink);padding:52px 44px}
body.oink-v2 .ag-card{padding:42px;border-radius:0;background:#fff}
body.oink-v2 .ag-card-headline{font-size:25px;letter-spacing:-.04em}
body.oink-v2 .ag-input{min-height:50px!important;border:1px solid #eadde3!important;background:#faf6f8!important;border-radius:14px!important}
body.oink-v2 .ag-submit{min-height:50px;background:var(--o2-pink);border-radius:14px;box-shadow:0 10px 22px rgba(216,66,121,.2)}
body.oink-v2 .tp-shell{border-radius:28px;box-shadow:0 26px 70px rgba(45,23,37,.2)}

/* Navegação inferior oficial do aplicativo */
.o2-bottom-nav{display:none}
.o2-lab-note{
  position:fixed;
  right:18px;
  top:14px;
  z-index:151;
  display:none;
  padding:5px 8px;
  border-radius:999px;
  background:var(--o2-pink-soft);
  color:var(--o2-pink-strong);
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
}

@keyframes o2-modal-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes o2-view-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes o2-kpi-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(1.5deg)}}
@keyframes o2-icon-ring{0%,58%{opacity:0;transform:scale(.88)}72%{opacity:.2}88%,100%{opacity:0;transform:scale(1.18)}}
@keyframes o2-cat-drift{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-4px)}}
@keyframes o2-picker-pop{0%{transform:scale(.84)}70%{transform:scale(1.13)}100%{transform:scale(1.09)}}
@keyframes o2-nav-arrive{0%{transform:translateY(2px) scale(.9)}70%{transform:translateY(-1px) scale(1.05)}100%{transform:none}}
@keyframes o2-progress-shine{0%,62%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}
body.oink-v2 #view.o2-route-enter>*>*{animation:o2-view-in .3s var(--o2-ease) both}
body.oink-v2 #view.o2-route-enter>*>*:nth-child(2){animation-delay:.025s}
body.oink-v2 #view.o2-route-enter>*>*:nth-child(3){animation-delay:.05s}
@media(prefers-reduced-motion:reduce){body.oink-v2 *,body.oink-v2 *::before,body.oink-v2 *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media(max-width:960px){
  body.oink-v2 .side{width:82px;padding-inline:10px}
  body.oink-v2 .side .brand{padding-inline:9px}
  body.oink-v2 .side .brand .logo{width:44px}
  body.oink-v2 .main{padding-inline:22px}
}

@media(max-width:760px){
  body.oink-v2{background:var(--bg)}
  body.oink-v2 .main,
  body.oink-v2 #view,
  body.oink-v2 #view>*{min-width:0;max-width:100%}
  body.oink-v2 #view .grid,
  body.oink-v2 #view .g2,
  body.oink-v2 #view .g3,
  body.oink-v2 #view .kpis,
  body.oink-v2 #view .cardsgrid,
  body.oink-v2 #view .ctiles,
  body.oink-v2 #view .objgrid,
  body.oink-v2 #view .receber-grid,
  body.oink-v2 #view .rateio-grid,
  body.oink-v2 #view .filters,
  body.oink-v2 #view .perrow,
  body.oink-v2 #view .perrow2,
  body.oink-v2 #view .dkpis,
  body.oink-v2 #view .fingrid{min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr)}
  body.oink-v2 #view input:not([type=checkbox]):not([type=radio]),
  body.oink-v2 #view select,
  body.oink-v2 #view textarea{width:100%;min-width:0!important;max-width:100%;box-sizing:border-box}
  body.oink-v2 #view .card,
  body.oink-v2 #view .ccard,
  body.oink-v2 #view .ctile,
  body.oink-v2 #view .objcard,
  body.oink-v2 #view .receber-card,
  body.oink-v2 #view .rateio-card{min-width:0;max-width:100%;box-sizing:border-box}
  body.oink-v2 .mtop{
    height:64px;
    padding:calc(8px + env(safe-area-inset-top)) 15px 8px;
    background:color-mix(in srgb,var(--panel) 91%,transparent);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(22px) saturate(1.2);
  }
  /* O menu principal já mora em “Mais” na barra inferior. Retirar o hambúrguer duplicado
     deixa o topo calmo e cria um único padrão de navegação no celular. */
  body.oink-v2 .mtop .mhamb{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
  body.oink-v2 .mtop .mbrand{gap:10px}
  body.oink-v2 .mtop .mbrand{font-family:Sora,Inter,sans-serif;font-size:15px}
  body.oink-v2 .mtop .mlogo{width:34px;height:34px;border-radius:12px;background:var(--o2-pink)}
  body.oink-v2 #eyeToggle{top:calc(11px + env(safe-area-inset-top))!important;right:14px!important;width:40px!important;height:40px!important;border:0!important;background:var(--raise)!important;box-shadow:none!important}
  body.oink-v2 .o2-lab-note{display:none}
  body.oink-v2 .main{padding:calc(76px + env(safe-area-inset-top)) 14px calc(112px + env(safe-area-inset-bottom))!important}
  body.oink-v2 .topbar{position:relative;top:auto;min-height:auto;margin:0 0 14px;padding:0;background:none}
  body.oink-v2 .topbar>div:first-child{display:none}
  body.oink-v2 .o2-top-actions{width:100%;min-width:0;gap:9px}
  body.oink-v2 .topbar .controls{gap:7px!important}
  body.oink-v2 .topbar .controls .sel{min-height:42px!important;border-radius:13px!important;background:var(--card)!important}
  body.oink-v2 .topbar .controls .btn{min-height:42px!important;border-radius:13px!important}
  body.oink-v2 .sechead{min-width:0;flex-wrap:wrap;gap:10px}
  body.oink-v2 .sechead>div:first-child{min-width:0;flex:1}
  body.oink-v2 .sechead-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.oink-v2 .sechead-actions .btn{width:100%;min-width:0;padding-inline:10px;justify-content:center;white-space:nowrap}
  body.oink-v2 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;margin-bottom:12px}
  body.oink-v2 .kpi{min-height:126px;padding:15px;border-radius:18px}
  body.oink-v2 .kpi .khead{margin-bottom:13px}
  body.oink-v2 .kpi .kic{width:34px;height:34px;border-radius:12px}
  body.oink-v2 .kpi .val{font-size:18px;line-height:1.2}
  body.oink-v2 .kpi .meta{font-size:10.5px;margin-top:6px}
  body.oink-v2 .dash-period-slot .periodbar.o2-period{margin:0}
  body.oink-v2 .dash-period-slot .perhead{min-height:42px}
  body.oink-v2 .card{padding:17px;border-radius:18px}
  body.oink-v2 .g2{gap:11px}
  body.oink-v2 .viewintro{padding:12px;margin-bottom:12px;border-radius:15px}
  body.oink-v2 .sechead{margin-bottom:10px!important}
  body.oink-v2 .sechead>button,
  body.oink-v2 .sechead .btn{min-height:45px!important}
  body.oink-v2 .fab{display:flex!important;right:15px!important;bottom:calc(84px + env(safe-area-inset-bottom))!important;min-width:110px;height:46px;border-radius:16px;z-index:145;padding-inline:13px!important}
  body.oink-v2 .fab-label{font-size:11.5px}
  body.oink-v2.o2-filters-open .fab{opacity:0!important;pointer-events:none!important;transform:translateY(16px)!important}

  body.oink-v2 .side{
    width:min(328px,88vw)!important;
    max-width:none;
    padding:calc(18px + env(safe-area-inset-top)) 15px calc(22px + env(safe-area-inset-bottom))!important;
    border-radius:0 28px 28px 0;
    background:var(--panel);
    box-shadow:24px 0 70px rgba(40,21,33,.22);
  }
  body.oink-v2 .side .brand{padding:4px 8px 14px}
  body.oink-v2 .side .nav{padding-bottom:12px}
  body.oink-v2 .side .nav button{min-height:47px!important;border-radius:14px!important}
  body.oink-v2 .side .nav button.active{background:var(--o2-pink-soft)!important;color:var(--o2-pink-strong)!important}
  body.oink-v2:not(.light) .side .nav button.active{background:rgba(237,93,145,.14)!important;color:#ff94b8!important}
  body.oink-v2 .side .nav button.active .ic,
  body.oink-v2 .side .nav button.active .ic svg{color:inherit!important;stroke:currentColor!important;opacity:1!important}
  body.oink-v2 .profcard{padding-top:13px!important}
  body.oink-v2 .prof-actions{gap:6px!important}
  body.oink-v2 .profbtn{min-height:45px;font-size:13px!important;padding-inline:13px!important}

  body.oink-v2 #view .o2-fin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  body.oink-v2 .ccard:not(.add),
  body.oink-v2 .ccard.add{min-height:158px}
  body.oink-v2 .ccard{padding:13px}
  body.oink-v2 .ccard .cctop{gap:6px}
  body.oink-v2 .ccard .ccbank{max-width:100%;font-size:12.5px}
  body.oink-v2 .ccard .cctag{max-width:100%;padding:4px 6px;font-size:7px;letter-spacing:.055em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.oink-v2 .ccard .ccidentity{margin-right:26px}
  body.oink-v2 .ccard .ccoink{width:28px;height:28px;border-radius:10px}
  body.oink-v2 .ccard .ccoink svg{width:21px;height:21px}
  body.oink-v2 .ccard .ccnum{padding:5px 7px;gap:1px 5px;border-radius:10px}
  body.oink-v2 .ccard .ccnum>span{font-size:7px}
  body.oink-v2 .ccard .ccnum>b{font-size:10px}
  body.oink-v2 .ccard .ccnum>small{font-size:6.7px}
  body.oink-v2 .ccard:not(.add) .ccbot{align-items:flex-start;flex-direction:column;gap:3px;padding-top:8px;margin-top:7px}
  body.oink-v2 .ccard:not(.add) .cclbl{font-size:7px}
  body.oink-v2 .ccard:not(.add) .ccval{font-size:14px}
  body.oink-v2 .ccard:not(.add) .ccbotR{padding-left:0;font-size:7.5px;text-align:left;line-height:1.3}
  body.oink-v2 .ccard.add .addcircle{width:40px;height:40px;border-radius:14px}
  body.oink-v2 .ccard.add>div:nth-child(2){font-size:11px;text-align:center}
  body.oink-v2 .ccard.add .addsub{font-size:8.5px}
  body.oink-v2 .ccard .ccedit{opacity:1}
  body.oink-v2 .receber-choice{min-height:84px;padding:13px}
  body.oink-v2 .receber-choice-ic{width:42px;height:42px;border-radius:14px}
  body.oink-v2 .receber-card,
  body.oink-v2 .rateio-card{padding:15px}
  body.oink-v2 .fincard{padding:17px}
  body.oink-v2 .fingrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
  body.oink-v2 .fincol:nth-child(3){border-left:0;padding-left:0}
  body.oink-v2 .finfoot{align-items:stretch;flex-direction:column}
  body.oink-v2 .parcrow{padding:11px;gap:10px}
  body.oink-v2 .empty{min-height:128px;padding:24px 17px!important}
  body.oink-v2 .cat-insights{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.oink-v2 .cat-insight{min-height:84px;padding:12px}
  body.oink-v2 .cat-insight.biggest{grid-column:1/-1}
  body.oink-v2 .cat-insights.no-trend .cat-insight.biggest{grid-column:auto}
  body.oink-v2 .cat-evolution{padding:14px;border-radius:17px}
  body.oink-v2 .cat-evolution .chart-wrap{height:174px}
  body.oink-v2 .cdrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:10px 0}
  body.oink-v2 .cdname{min-width:0;max-width:100%;width:auto;flex:none}
  body.oink-v2 .cdrow b{min-width:0;font-size:12px}
  body.oink-v2 .cdbar{grid-column:1/-1;grid-row:2}
  body.oink-v2 .dkpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  body.oink-v2 .dkpi{min-width:0;padding:12px;border-radius:14px}
  body.oink-v2 .dkpi:first-child{grid-column:1/-1}
  body.oink-v2 .dkpi b{font-size:14px;overflow-wrap:anywhere}
  /* O controle global do topo já protege todos os valores. Repetir olhos em cada cartão
     pesa visualmente na tela estreita, portanto eles ficam concentrados em um só lugar. */
  body.oink-v2 .overlay{
    padding:0!important;
    align-items:flex-end!important;
    justify-content:center!important;
    background:rgba(37,21,31,.56)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.oink-v2 .overlay>div,
  body.oink-v2 .modal{
    width:100%!important;
    max-width:none!important;
    max-height:91dvh!important;
    margin:0!important;
    border-radius:28px 28px 0 0!important;
    border-bottom:0!important;
    padding:22px 17px calc(17px + env(safe-area-inset-bottom))!important;
    animation:o2-sheet-in .3s var(--o2-ease);
  }
  body.oink-v2 .modal::before{display:none}
  body.oink-v2 .o2-sheet-handle{display:block;height:25px;margin:-13px -17px 7px;position:relative;touch-action:none;cursor:grab;flex:none}
  body.oink-v2 .o2-sheet-handle::after{content:'';position:absolute;left:50%;top:5px;width:34px;height:4px;border-radius:999px;background:var(--line2);transform:translateX(-50%)}
  body.oink-v2 .o2-sheet-handle:active{cursor:grabbing}
  body.oink-v2 .modal h2{font-size:20px;margin-bottom:18px}
  body.oink-v2 .modal-foot{bottom:calc(-17px - env(safe-area-inset-bottom));margin:22px -17px calc(-17px - env(safe-area-inset-bottom));padding:14px 17px calc(17px + env(safe-area-inset-bottom))}
  body.oink-v2 .modal-foot .btn{min-height:48px}
  /* O indicador do topo funciona como a alça das folhas nativas do Android. */
  body.oink-v2 .overlay .modal.o2-sheet-dragging{animation:none!important;transform:translate3d(0,var(--o2-sheet-drag,0px),0)!important;transition:none!important;will-change:transform}
  body.oink-v2 .overlay .modal.o2-sheet-settling{animation:none!important;transform:translate3d(0,0,0)!important;transition:transform .22s var(--o2-ease)!important}
  body.oink-v2 .overlay .modal.o2-sheet-dismiss{animation:none!important;transform:translate3d(0,105%,0)!important;transition:transform .22s cubic-bezier(.32,.72,0,1)!important}
  body.oink-v2 .overlay.o2-sheet-dismissing{opacity:1!important;transition:none!important;pointer-events:none}

  .o2-bottom-nav{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(9px + env(safe-area-inset-bottom));
    z-index:140;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    min-height:70px;
    padding:5px 7px 6px;
    border:1px solid var(--line);
    border-radius:24px;
    background:color-mix(in srgb,var(--panel) 92%,transparent);
    box-shadow:0 14px 38px rgba(55,29,45,.16);
    backdrop-filter:blur(24px) saturate(1.2);
  }
  .o2-bottom-nav button{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:0;
    border:0;
    border-radius:16px;
    background:transparent;
    color:var(--muted);
    font:700 9px/1 Inter,sans-serif;
    cursor:pointer;
  }
  .o2-bottom-nav .o2-nav-icon{width:38px;height:36px;display:grid;place-items:center;border-radius:14px;color:inherit;transition:transform .2s var(--o2-ease),background .2s,color .2s,box-shadow .2s}
  .o2-bottom-nav .o2-nav-label{display:block;transition:color .18s,transform .18s}
  .o2-bottom-nav button svg{width:21px;height:21px;stroke-width:1.8}
  .o2-bottom-nav button.active{background:transparent;color:var(--o2-pink-strong);font-weight:850}
  .o2-bottom-nav button.active .o2-nav-icon{background:var(--o2-pink-soft);box-shadow:inset 0 0 0 1px rgba(237,93,145,.08);animation:o2-nav-arrive .3s var(--o2-ease)}
  .o2-bottom-nav button:active .o2-nav-icon{transform:scale(.9)}
  .o2-bottom-nav button.active svg{color:inherit!important;stroke:currentColor!important;opacity:1!important}
  body.oink-v2:not(.light) .o2-bottom-nav button.active{background:transparent;color:#ff94b8}
  body.oink-v2:not(.light) .o2-bottom-nav button.active .o2-nav-icon{background:rgba(237,93,145,.14)}
  body.oink-v2 .toast{bottom:calc(88px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 30px);text-align:center}
}

@keyframes o2-sheet-in{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@media(max-width:350px){
  body.oink-v2 .kpis{grid-template-columns:1fr!important}
  body.oink-v2 .sechead-actions{grid-template-columns:1fr}
  body.oink-v2 .cat-insights{grid-template-columns:1fr}
  body.oink-v2 .cat-insight.biggest{grid-column:auto}
  body.oink-v2 .cat-insights.no-trend{grid-template-columns:1fr}
  body.oink-v2 .dkpis{grid-template-columns:1fr!important}
  body.oink-v2 .dkpi:first-child{grid-column:auto}
  .o2-bottom-nav button .o2-nav-label{font-size:8px}
  body.oink-v2 .ccard{padding:11px}
  body.oink-v2 .ccard .ccbank{font-size:11.5px}
}

/* Login mobile: imersivo no app nativo e adaptável às barras dos navegadores móveis. */
@media(max-width:600px){
  body.oink-v2 #authGate{
    align-items:stretch!important;
    justify-content:stretch!important;
    padding:0!important;
    overflow-x:hidden;
    overflow-y:auto;
    background:#fff!important;
    height:100dvh;
    min-height:0;
    box-sizing:border-box;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.oink-v2 .ag-shell{
    width:100%;
    max-width:none;
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:#fff;
  }
  body.oink-v2 .ag-card{
    position:relative;
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    justify-content:center;
    overflow:hidden;
    padding:calc(38px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
    border-radius:0;
    background:
      radial-gradient(circle at 92% 5%,rgba(255,124,163,.18),transparent 31%),
      radial-gradient(circle at 4% 96%,rgba(122,46,78,.08),transparent 28%),
      linear-gradient(180deg,#fff 0,#fff9fb 100%);
  }
  body.oink-v2 .ag-card::before{
    content:'';
    position:absolute;
    top:-72px;
    right:-62px;
    width:190px;
    height:190px;
    border:34px solid rgba(255,124,163,.08);
    border-radius:50%;
    pointer-events:none;
  }
  body.oink-v2 .ag-card-logo,
  body.oink-v2 #normalAuthView,
  body.oink-v2 #forgotView,
  body.oink-v2 #resetView{position:relative;z-index:1;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
  body.oink-v2 .ag-card-logo{display:flex;gap:6px;margin-bottom:27px}
  body.oink-v2 .ag-card-logo svg{width:62px;height:62px;filter:drop-shadow(0 12px 20px rgba(216,66,121,.18))}
  body.oink-v2 .ag-card-logo>div{font-size:25px!important}
  body.oink-v2 .ag-card-logo::after{content:'Seu dinheiro, mais leve todos os dias.';max-width:250px;margin-top:3px;color:#9a7787;font-size:11.5px;font-weight:650;line-height:1.45}
  body.oink-v2 .ag-card-headline{font-size:24px;line-height:1.2;margin-bottom:7px}
  body.oink-v2 .ag-formsub{margin-bottom:24px;color:#765668;font-size:14px;font-weight:600;line-height:1.5}
  body.oink-v2 .ag-input{min-height:54px!important;margin-bottom:13px;border-radius:16px!important;background:rgba(255,255,255,.84)!important;font-size:15px!important;box-shadow:0 6px 18px rgba(93,47,69,.04)!important}
  body.oink-v2 .ag-input:focus{background:#fff!important;box-shadow:0 0 0 4px rgba(237,93,145,.1),0 9px 20px rgba(93,47,69,.06)!important}
  body.oink-v2 .ag-eye{top:9px;right:8px;width:36px;height:36px;border-radius:12px}
  body.oink-v2 .ag-submit{min-height:54px;border-radius:16px;font-size:15px;box-shadow:0 13px 28px rgba(216,66,121,.24)}
  body.oink-v2 .ag-switch{min-height:46px;margin-top:5px;border-radius:14px}
  body.oink-v2 .ag-row2{gap:9px}
  body.oink-v2 #forgotLinkWrap{margin-top:-6px!important;margin-bottom:16px!important}
}
/* No navegador, 100vh pode incluir a área escondida atrás das barras do Safari/Chrome/Brave.
   A variável é atualizada pelo JS com visualViewport.height. O conteúdo pode crescer e rolar;
   no Capacitor estas regras não se aplicam, preservando a tela de app em fullscreen. */
@media(max-width:600px){
  html.oink-web body.oink-v2 #authGate{
    height:var(--o2-web-vh,100dvh);
    max-height:var(--o2-web-vh,100dvh);
    padding-top:env(safe-area-inset-top)!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    scroll-padding-top:calc(14px + env(safe-area-inset-top));
    scroll-padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
  html.oink-web body.oink-v2 .ag-shell{
    min-height:100%;
    height:auto;
    overflow:visible;
  }
  html.oink-web body.oink-v2 .ag-card{
    min-height:100%;
    height:auto;
    overflow:visible;
    padding-top:clamp(20px,5vh,38px);
    padding-bottom:clamp(22px,5vh,34px);
  }
  html.oink-web body.oink-v2.o2-auth-register .ag-card,
  html.oink-web body.oink-v2.o2-auth-reset .ag-card{
    justify-content:flex-start;
  }
}
@media(max-width:600px) and (max-height:700px){
  body.oink-v2 .ag-card{justify-content:flex-start;padding-top:calc(22px + env(safe-area-inset-top))}
  body.oink-v2 .ag-card-logo{margin-bottom:18px}
  body.oink-v2 .ag-card-logo svg{width:48px;height:48px}
  body.oink-v2 .ag-card-logo::after{display:none}
}

/* Telas de entrada (login, cadastro guiado, confirmação de acesso) no navegador móvel.
   Elas são fixas na tela, então precisam acompanhar o pedaço realmente visível da página: sem isso,
   o teclado empurra o visível pra baixo, a tela fixa fica menor que a página e o aplicativo aparece
   atrás dela. No Capacitor nada disso se aplica - lá a tela já é do próprio app. */
/* Enquanto uma tela de entrada está aberta, a página atrás dela não rola e o menu do aplicativo não
   existe - em qualquer largura. Era por aí que dava pra empurrar o cadastro e encontrar o app atrás. */
html.o2-gate-open:not(.o2-auth-page),html.o2-gate-open:not(.o2-auth-page) body.oink-v2{overflow:hidden!important;overscroll-behavior:none}
body.oink-v2.o2-gate-open .o2-bottom-nav,body.oink-v2.o2-gate-open .fab,body.oink-v2.o2-gate-open .mtop{display:none!important}
@media(max-width:860px){
  html.oink-web:not(.o2-auth-page) body.oink-v2 #authGate,
  html.oink-web body.oink-v2 #accessGate,
  html.oink-web body.oink-v2 #verifyGate{
    top:var(--o2-web-vtop,0px)!important;
    bottom:auto!important;
    height:var(--o2-web-vh,100dvh)!important;
    max-height:var(--o2-web-vh,100dvh)!important;
    overscroll-behavior:contain;
  }
  /* Teclado aberto: em vez de espremer o conteúdo pra caber no que sobrou, o cartão vira uma coluna
     rolável comum. Assim todo texto continua legível no tamanho normal e nenhum campo fica cortado. */
  html.oink-web.o2-keyboard:not(.o2-auth-page) body.oink-v2 #authGate.wizard-active .ag-shell{min-height:0!important}
  html.oink-web.o2-keyboard:not(.o2-auth-page) body.oink-v2 #authGate.wizard-active .ag-card{display:block!important;min-height:0!important}
  html.oink-web.o2-keyboard:not(.o2-auth-page) body.oink-v2 .sw-view{height:auto!important;min-height:0!important}
  html.oink-web.o2-keyboard:not(.o2-auth-page) body.oink-v2 .sw-stage{align-items:flex-start;min-height:0}
  html.oink-web.o2-keyboard:not(.o2-auth-page) body.oink-v2 .sw-actions{margin-top:18px}
}

/* ===== Tela de entrada como PÁGINA (deslogado) =====
   Enquanto não existe app por baixo, o login e o cadastro deixam de ser uma camada fixa e voltam a
   ser uma página comum. Isso resolve o teclado na raiz: em fluxo normal o navegador rola o campo em
   foco sozinho, do jeito dele, em qualquer navegador - não há viewport pra medir a cada quadro da
   animação, não há altura a corrigir e não existe um "atrás" que possa aparecer entre dois quadros.
   O fundo repetido no html cobre o efeito de elástico da rolagem: esticando, aparece a mesma cor. */
html.o2-auth-page,html.o2-auth-page body.oink-v2{
  background:#fff6f3;
  overflow-y:visible!important;
  overflow-x:hidden!important;
  /* A barra de rolagem some: aqui a tela é cheia e curta, e o indicador do navegador aparecendo por
     cima do conteúdo a cada rolagem parecia defeito. A rolagem continua funcionando normalmente. */
  scrollbar-width:none;
}
html.o2-auth-page::-webkit-scrollbar,html.o2-auth-page body.oink-v2::-webkit-scrollbar{width:0;height:0;display:none}
/* Altura ESTÁVEL, não dinâmica. 100dvh encolhe e cresce quando a barra do navegador se esconde - e
   ela se esconde justamente quando o teclado sobe e a página rola pro campo. O layout inteiro se
   recalculava no meio desse movimento, e era isso que fazia a tela balançar. O 100svh é a altura
   menor e fixa: nunca muda, então nada se recalcula enquanto o teclado abre. A sobra eventual no
   rodapé mostra o mesmo fundo do html, e por isso não aparece. */
html.o2-auth-page body.oink-v2 #authGate{
  position:static!important;
  inset:auto!important;
  height:auto!important;
  max-height:none!important;
  min-height:100vh;
  min-height:100svh;
  overflow:visible!important;
}
/* No cadastro em tela cheia quem rola é a página, não o cartão. */
html.o2-auth-page body.oink-v2 #authGate.wizard-active{overflow:visible!important}
html.o2-auth-page body.oink-v2 #authGate.wizard-active .ag-shell{min-height:100vh;min-height:100svh}
html.o2-auth-page body.oink-v2 #authGate.wizard-active .ag-card{min-height:100vh;min-height:100svh;overflow:visible!important}
/* O conteúdo ocupa a tela quando sobra espaço, mas nunca encolhe abaixo do próprio tamanho: com o
   teclado aberto ele mantém a leitura inteira e a página rola. */
html.o2-auth-page body.oink-v2 .sw-view{height:auto!important;min-height:0!important;flex:1 0 auto}
html.o2-auth-page body.oink-v2 .sw-stage{min-height:auto!important}