/* Nós — estilos do app. Fonte da verdade: docs/marca/identidade_visual_nos.md
   Cores só nos tokens abaixo; componentes usam apenas var(--…). */
:root{
  /* Paleta da marca */
  --coral:#D14B4B;--coral-press:#B83D3D;--rose:#F58B8B;--peach:#FFDAD5;--cream:#FFF6F2;--graphite:#2E2E2E;
  /* Papéis */
  --bg:var(--cream);--surface:#FFFFFF;--surface-2:#FFEDE8;--ink:var(--graphite);--mut:#6E605C;--line:#F0D9D3;
  --brand:var(--coral);--brand-press:var(--coral-press);--on-brand:#FFFFFF;--soft:var(--peach);--on-soft:#9E3434;
  --danger:#B3261E;--ok:#2F7D57;
  /* Forma */
  --r-s:10px;--r-m:16px;--r-l:24px;--r-pill:999px;
  --sh-s:0 2px 10px rgba(110,50,40,.07);--sh-m:0 14px 34px rgba(110,50,40,.14);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1B1716;--surface:#262020;--surface-2:#302826;--ink:#F6ECE8;--mut:#C4B2AD;--line:#453936;
  --brand:var(--rose);--brand-press:#F7A0A0;--on-brand:#2A1514;--soft:#45292A;--on-soft:#FFC9C2;
  --danger:#FF9B93;--ok:#8FD4AE;
  --sh-s:0 2px 10px rgba(0,0,0,.3);--sh-m:0 14px 34px rgba(0,0,0,.45);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#1B1716;--surface:#262020;--surface-2:#302826;--ink:#F6ECE8;--mut:#C4B2AD;--line:#453936;
  --brand:var(--rose);--brand-press:#F7A0A0;--on-brand:#2A1514;--soft:#45292A;--on-soft:#FFC9C2;
  --danger:#FF9B93;--ok:#8FD4AE;
  --sh-s:0 2px 10px rgba(0,0,0,.3);--sh-m:0 14px 34px rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1{font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:18px 0 6px}
h2{font-size:20px;font-weight:700;letter-spacing:-.01em}
h3{font-size:15px;font-weight:700;margin:18px 0 2px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.hide{display:none!important}
.lead,.meta{color:var(--mut)}
.error{color:var(--danger);font-size:13px;min-height:1em;margin-top:6px}
.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Logo */
.logo{display:inline-flex;align-items:flex-end;font-weight:800;font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--brand)}
.logo-o{width:.62em;height:.72em;margin:0 .01em .02em;fill:none;stroke:currentColor;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);border:1px solid transparent;font-weight:600;background:none;transition:background .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--brand);color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-press)}
.btn.ghost{border-color:var(--line)}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.btn.block{width:100%}
.btn.sm{min-height:36px;padding:6px 14px;font-size:13px}
.btn.on-brand{background:#fff;color:var(--coral)}
.btn.ghost-light{border-color:rgba(255,255,255,.6);color:#fff}
.icon-btn,.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.avatar{border:0;background:var(--brand);color:var(--on-brand);font-weight:700;font-size:14px}
.icon-btn .sun{display:none}
:root[data-theme="dark"] .icon-btn .sun{display:block}:root[data-theme="dark"] .icon-btn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .icon-btn .sun{display:block}:root:not([data-theme="light"]) .icon-btn .moon{display:none}}

/* Chips */
.chips{display:flex;gap:8px;margin:16px 0 0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-pill);padding:7px 14px;font-size:13px;font-weight:500}
.chip .i{width:16px;height:16px}
.chip.on{background:var(--soft);border-color:transparent;color:var(--on-soft);font-weight:700}

/* Campos */
.field{display:grid;gap:6px;margin:12px 0;font-size:13px;font-weight:600}
.field input,.field textarea,.field select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);font-size:15px;font-weight:400}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;gap:10px;align-items:center;margin:10px 0}
.check input{width:20px;height:20px;accent-color:var(--brand)}

/* Login / abertura */
.splash{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:28px;padding:32px 16px;background:linear-gradient(170deg,#3A2120 0%,#8E3A33 55%,#D9785F 100%)}
.splash-brand{text-align:center;color:#fff}
.splash .logo{color:#fff;font-size:76px}
.tagline{font-size:11px;letter-spacing:.32em;font-weight:500;margin-top:10px;opacity:.9}
.login{width:min(100%,400px);background:var(--surface);border-radius:var(--r-l);padding:24px;box-shadow:var(--sh-m)}
.login h1{font-size:22px;margin:0 0 4px}

/* Estrutura */
.app{max-width:560px;margin:auto;padding:max(18px,env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom))}
.top{display:flex;justify-content:space-between;align-items:center}
.top-actions{display:flex;gap:8px}

/* Próximo plano */
.next{margin-top:16px;display:flex;gap:14px;align-items:center;background:var(--surface);border-radius:var(--r-m);padding:12px 14px;box-shadow:var(--sh-s);border:0;width:100%;text-align:left}
.next .when{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--soft);color:var(--on-soft);flex:none;line-height:1}
.next .when b{font-size:19px}.next .when small{font-size:10px;font-weight:700;text-transform:uppercase}
.next .t{display:grid;flex:1;min-width:0}
.next .t span:first-child{font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.06em}
.next .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next .t span:last-child{font-size:13px;color:var(--mut)}

/* Baralho */
.deck{height:470px;position:relative;margin-top:16px;user-select:none}
.deck:before{content:"";position:absolute;inset:10px 10px 52px;border-radius:var(--r-l);background:var(--soft);transform:rotate(2.5deg)}
.card{position:absolute;z-index:2;inset:0 0 62px;background:var(--surface);border-radius:var(--r-l);box-shadow:var(--sh-m);overflow:hidden;touch-action:pan-y;transition:transform .25s ease;cursor:grab}
.card.dragging{transition:none;cursor:grabbing}
.card.out-yes{transform:translateX(130%) rotate(16deg)}
.card.out-no{transform:translateX(-130%) rotate(-16deg)}
.art{height:54%;display:grid;place-items:center;font-size:92px;line-height:1;background:linear-gradient(160deg,var(--peach),var(--rose))}
:root[data-theme="dark"] .art{background:linear-gradient(160deg,#4a2b2b,#7a3a3a)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .art{background:linear-gradient(160deg,#4a2b2b,#7a3a3a)}}
.card .chip{position:absolute;top:14px;left:14px;border:0;background:rgba(255,255,255,.9);color:var(--graphite);font-weight:600}
.counter{position:absolute;top:20px;right:18px;font-size:12px;font-weight:700;color:var(--graphite);opacity:.7}
.body{padding:20px 22px}
.body h2{font-size:24px;line-height:1.15}
.body p{margin-top:8px;color:var(--mut);font-size:14px}
.stamp{position:absolute;top:60px;padding:4px 10px;border:3px solid;border-radius:8px;font-weight:800;font-size:18px;letter-spacing:.06em;opacity:0;background:var(--surface)}
.stamp.no{right:18px;color:var(--mut);transform:rotate(12deg)}
.stamp.yes{left:18px;color:var(--brand);transform:rotate(-12deg)}
.actions{position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:20px}
.round{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:var(--sh-s)}
.round.yes{width:66px;height:66px;background:var(--brand);color:var(--on-brand);border:0}
.round .i{width:26px;height:26px}
.empty{margin-top:18px;background:var(--surface);border-radius:var(--r-l);padding:22px;box-shadow:var(--sh-s);display:grid;gap:10px;justify-items:start}
.empty b{font-size:18px}

/* Planos */
.rituals{margin-top:14px;background:var(--surface);border-radius:var(--r-m);padding:12px 16px;box-shadow:var(--sh-s)}
.rituals summary{font-weight:700;cursor:pointer}
.rgrid{display:grid;gap:10px;margin:12px 0}
.rgrid b{display:block;font-size:14px}.rgrid span{color:var(--mut);font-size:13px}
.rot{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.rot span{background:var(--soft);color:var(--on-soft);border-radius:var(--r-pill);padding:3px 11px;font-size:12px;font-weight:600}
.month{margin-top:26px}
.month-label{display:flex;align-items:center;gap:10px;margin:0 2px 8px;font-size:18px}
.month-label:after{content:"";height:1px;flex:1;background:var(--line)}
.month-label small{font-size:12px;font-weight:600;color:var(--mut)}
.plan{background:var(--surface);border-radius:var(--r-m);padding:13px 14px;margin-top:8px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;box-shadow:var(--sh-s)}
.plan.off{box-shadow:none;background:transparent;border:1px dashed var(--line)}
.plan .tog{width:22px;height:22px;margin-top:2px;accent-color:var(--brand)}
.plan .tag{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.plan .tag .i{width:14px;height:14px}
.plan .name{font-weight:700;letter-spacing:-.01em}
.plan .meta{font-size:13px}
.plan .side{text-align:right;display:grid;gap:2px;justify-items:end}
.plan .cost{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.plan .cost.none{font-weight:500;color:var(--mut);font-size:13px}
.plan .pending{font-size:11px;font-weight:700;color:var(--mut)}
.match-badge{display:inline-flex;align-items:center;gap:3px;color:var(--brand)}
.edit{border:0;background:none;color:var(--brand);font-weight:600;padding:6px 0;font-size:13px}
.add{margin-top:8px;width:100%;display:flex;justify-content:center;align-items:center;gap:6px;border:1px dashed var(--line);background:transparent;border-radius:var(--r-m);padding:9px;color:var(--mut);font-size:13px}
.add .i{width:16px;height:16px}

/* Caixinha */
.cash{margin-top:14px;background:linear-gradient(140deg,var(--coral),#E06A5E);color:#fff;border-radius:var(--r-l);padding:22px;box-shadow:var(--sh-m)}
.cash>span{font-size:13px;font-weight:500;opacity:.92}
.cash strong{display:block;font-size:40px;font-weight:800;letter-spacing:-.03em;margin:4px 0 12px;font-variant-numeric:tabular-nums}
.bal-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bal-form input{flex:1;min-width:120px;padding:8px 12px;border-radius:var(--r-pill);border:0;background:#fff;color:var(--graphite)}
.bar{height:8px;border-radius:var(--r-pill);background:var(--line);margin:16px 2px 0;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:inherit;transition:width .4s}
.bar.over i{background:var(--danger)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.metric{background:var(--surface);padding:14px 16px;border-radius:var(--r-m);box-shadow:var(--sh-s)}
.metric span{font-size:12px;color:var(--mut);font-weight:500}
.metric b{display:block;font-size:clamp(19px,5.6vw,24px);font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.metric b.neg{color:var(--danger)}
.note{margin-top:12px;font-size:13px}

/* Navegação inferior */
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,560px);display:grid;grid-template-columns:1fr auto 1fr 1fr;align-items:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:5}
.tabs button{border:0;background:none;color:var(--mut);padding:4px 0;font-size:11px;font-weight:500;display:grid;justify-items:center;gap:3px}
.tabs .active{color:var(--brand);font-weight:700}
.tabs .fab{width:52px;height:52px;border-radius:50%;background:var(--brand);color:var(--on-brand);place-items:center;margin:-22px 14px 0;box-shadow:var(--sh-m)}
.tabs .fab .i{width:26px;height:26px}

/* Folhas (dialog) */
.sheet{border:0;padding:22px 18px calc(20px + env(safe-area-inset-bottom));margin:auto auto 0;width:min(100%,560px);max-width:100%;max-height:92vh;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-m)}
.sheet::backdrop{background:rgba(46,30,28,.55);backdrop-filter:blur(3px)}
.sheet[open]{animation:up .2s ease-out}
.sheet-actions{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
.sheet-actions span{flex:1}
.menu{display:grid;margin:12px 0 4px;border-top:1px solid var(--line)}
.menu-item{display:flex;gap:12px;align-items:center;padding:13px 2px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;text-decoration:none;font-weight:500}
.menu-item .i{color:var(--brand)}
@keyframes up{from{transform:translateY(30px);opacity:.5}}

.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-s);font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.2s;z-index:20;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--danger);color:#fff}

.confetti{position:fixed;z-index:99;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;width:9px;height:14px;top:-20px;border-radius:2px;animation:fall 1.6s cubic-bezier(.2,.7,.35,1) forwards}
@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(760deg);opacity:0}}

@media (max-width:380px){.deck{height:440px}.art{font-size:76px}.row2{grid-template-columns:1fr}.splash .logo{font-size:60px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}