/* HFinance — chat-first personal finance */
:root {
  color-scheme: light;
  --bg: #f4f5f1; --surface: #fcfcfb; --surface-2: #f2f3ee; --surface-3: #e9ebe4;
  --line: #e1e0d9; --line-2: #cfd0c6;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --brand: #0e2a22; --brand-2: #164437; --accent: #127a55; --accent-soft: #e3f3ec; --accent-ink: #0b5c3f;
  --user-bubble: #d9f1e6; --user-ink: #0b3a29;
  --good: #006300; --bad: #b42318; --warn-bg: #fff4dc; --warn-line: #f0cf8a; --warn-ink: #7a4b00;
  --grid: #e1e0d9; --axis: #c3c2b7; --in: #1a9a6c; --out: #5d6b66;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --shadow: 0 1px 2px rgba(16, 24, 20, .06), 0 2px 8px rgba(16, 24, 20, .05);
  --shadow-lg: 0 16px 40px rgba(10, 20, 16, .18);
  --r: 16px; --r-sm: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #0d0f0e; --surface: #1a1a19; --surface-2: #212220; --surface-3: #2a2b28; --line: #2c2c2a; --line-2: #383835;
    --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781; --brand: #0b1f19; --brand-2: #133a2e; --accent: #23b07c; --accent-soft: #15302a; --accent-ink: #7ce0b8;
    --user-bubble: #173a2f; --user-ink: #d8f5e9; --good: #0ca30c; --bad: #f07b72; --warn-bg: #2d2412; --warn-line: #5c4615; --warn-ink: #f5c35a;
    --grid: #2c2c2a; --axis: #383835; --in: #23b07c; --out: #a3aea9;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f0e; --surface: #1a1a19; --surface-2: #212220; --surface-3: #2a2b28; --line: #2c2c2a; --line-2: #383835;
  --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781; --brand: #0b1f19; --brand-2: #133a2e; --accent: #23b07c; --accent-soft: #15302a; --accent-ink: #7ce0b8;
  --user-bubble: #173a2f; --user-ink: #d8f5e9; --good: #0ca30c; --bad: #f07b72; --warn-bg: #2d2412; --warn-line: #5c4615; --warn-ink: #f5c35a;
  --grid: #2c2c2a; --axis: #383835; --in: #23b07c; --out: #a3aea9;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15.5px/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
.boot { height: 100vh; display: grid; place-items: center; color: var(--muted); font-weight: 700; letter-spacing: .1em; }
.ico { width: 20px; height: 20px; flex: none; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; height: 100dvh; }
.rail { background: var(--brand); color: #d9e6df; display: flex; flex-direction: column; padding: 18px 12px; gap: 4px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.logo-mark { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #1baf7a, #0e6b4b); display: grid; place-items: center; color: #fff; font-weight: 800; position: relative; }
.logo-mark::after { content: ""; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: #eda100; box-shadow: 0 0 0 2px var(--brand); }
.logo b { color: #fff; font-size: 17px; letter-spacing: .01em; }
.logo span { display: block; font-size: 11.5px; color: #8fb3a5; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { all: unset; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 550; color: #c4d6cd; }
.nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav button.on { background: rgba(35, 176, 124, .18); color: #fff; }
.rail-foot { margin-top: auto; font-size: 12px; color: #7fa596; padding: 8px 12px; }
.main { min-width: 0; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.page { flex: 1; overflow-y: auto; padding: 24px 28px 40px; }
.page-in { max-width: 1120px; margin: 0 auto; }
.tabbar { display: none; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.head h1 { margin: 0; font-size: 1.45rem; letter-spacing: -.01em; }
.head .sub { color: var(--muted); font-size: .9rem; }

/* ---------- controls ---------- */
a.btn { color: inherit; text-decoration: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(.95); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: .88rem; }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
input, select, textarea { width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
label.f { display: flex; flex-direction: column; gap: 5px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: .86rem; font-weight: 550; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.chip:hover { background: var(--surface-2); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { white-space: nowrap; border: 0; background: transparent; border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: .86rem; cursor: pointer; color: var(--ink-2); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; height: 100%; }
.chat-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.bot-av { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #7ce0b8; display: grid; place-items: center; flex: none; }
.chat-top b { display: block; }
.chat-top .st { font-size: .8rem; color: var(--accent); }
.chat-top .st.off { color: var(--muted); }
.chat-top .spacer { flex: 1; }
.mini-sum { display: flex; gap: 16px; font-size: .84rem; }
.mini-sum div { text-align: right; }
.mini-sum b { display: block; font-size: .98rem; }
.thread { flex: 1; overflow-y: auto; padding: 22px 20px 12px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
button, a, .li, .pitem, .chip, [data-v] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.thread-in { max-width: 760px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; flex-direction: column; max-width: 88%; gap: 8px; animation: pop .18s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.bot { align-self: flex-start; }
.bubble { padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; word-wrap: break-word; }
.msg.user .bubble { background: var(--user-bubble); color: var(--user-ink); border-bottom-right-radius: 6px; }
.msg.bot .bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; box-shadow: var(--shadow); }
.msg .when { font-size: .72rem; color: var(--muted); padding: 0 6px; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.welcome { text-align: center; padding: 30px 10px 10px; color: var(--ink-2); }
.welcome h2 { margin: 10px 0 6px; color: var(--ink); }
.suggest { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.pcard { width: min(520px, calc(100vw - 64px)); }
.pcard-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; font-weight: 700; }
.pcard-head .ok { color: var(--accent); }
.pitem { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.pitem:hover { background: var(--surface-2); }
.pitem .t { font-weight: 650; }
.pitem .m { font-size: .8rem; color: var(--muted); }
.pitem .v { font-weight: 700; text-align: right; white-space: nowrap; }
.pitem .v.in { color: var(--good); }
.pitem.unsure { background: var(--warn-bg); }
.pitem .note { grid-column: 2 / 4; font-size: .78rem; color: var(--warn-ink); }
.tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); margin-left: 6px; vertical-align: 1px; }
.tag.pend { background: var(--warn-bg); color: var(--warn-ink); }
.tag.chg { background: var(--accent-soft); color: var(--accent-ink); }
.tag.del { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.pcard-total { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--surface-2); border-top: 1px solid var(--line); font-weight: 650; }
.pcard-act { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pcard-act .btn { flex: 1; }
.pcard.done .pcard-act { justify-content: space-between; align-items: center; }
.done-msg { color: var(--accent); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.qcard { width: min(520px, calc(100vw - 64px)); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis div { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; }
.kpis span { font-size: .74rem; color: var(--muted); display: block; }
.kpis b { font-size: 1.02rem; }
.rows { display: flex; flex-direction: column; gap: 7px; }
.rowbar { display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto; gap: 10px; align-items: center; font-size: .86rem; }
.rowbar .track { height: 10px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.rowbar .fill { height: 100%; border-radius: 99px; background: var(--s1); }
.meter { height: 12px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 99px; background: var(--s3); }
.meter.over span { background: var(--s8); }

.composer { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.composer-in { max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 26px; padding: 6px 6px 6px 8px; box-shadow: var(--shadow-lg); }
.composer textarea { border: 0; box-shadow: none; resize: none; min-height: 40px; max-height: 140px; padding: 9px 6px; background: transparent; line-height: 22px; overflow-y: hidden; }
.composer textarea.scroll { overflow-y: auto; }
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer textarea:focus { box-shadow: none; }
.send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.send:disabled { background: var(--surface-3); color: var(--muted); }
.mic.rec { background: var(--bad); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--bad) 25%, transparent); } }
.quick { max-width: 760px; margin: 0 auto 8px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }

/* ---------- dashboard ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.tile { padding: 16px 18px; }
.tile span { color: var(--muted); font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.tile b { display: block; font-size: 1.65rem; letter-spacing: -.02em; margin: 2px 0; }
.tile small { font-size: .8rem; color: var(--muted); }
.delta-up { color: var(--good); } .delta-down { color: var(--bad); }
.panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.panel { padding: 16px 18px; }
.panel h3 { margin: 0 0 12px; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.panel h3 > .small { font-weight: 500; }
.panel h3 .legend { flex-wrap: nowrap; font-weight: 500; }
.legend { display: flex; gap: 14px; font-size: .8rem; color: var(--ink-2); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
svg.chart .grid { stroke: var(--grid); stroke-width: 1; }
svg.chart .axis { stroke: var(--axis); stroke-width: 1; }
svg.chart .hit { fill: transparent; cursor: pointer; }
svg.chart .hit:hover + .mark, svg.chart .mark:hover { filter: brightness(1.08); }
.tip { position: fixed; z-index: 90; pointer-events: none; background: var(--ink); color: var(--surface); border-radius: 10px; padding: 8px 10px; font-size: .82rem; box-shadow: var(--shadow-lg); max-width: 240px; }
.tip b { display: block; }
.list { display: flex; flex-direction: column; }
.li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.li:last-child { border-bottom: 0; }
.li:hover { background: var(--surface-2); }
.li .t { font-weight: 600; }
.li .m { font-size: .8rem; color: var(--muted); }
.li .v { font-weight: 700; white-space: nowrap; text-align: right; }
.li .v.in { color: var(--good); }
.day { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 14px 4px 4px; }
.empty { text-align: center; padding: 30px 10px; color: var(--muted); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input[type=search] { max-width: 280px; border-radius: 999px; }
.toolbar select { width: auto; border-radius: 999px; }
.sumline { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; margin-bottom: 8px; color: var(--ink-2); }

/* ---------- settings ---------- */
.set { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.set .panel { display: flex; flex-direction: column; gap: 10px; }
.set > *, .panels > *, .tiles > * { min-width: 0; }
.set .li .small { overflow-wrap: anywhere; }
.ref-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ref-row:last-child { border-bottom: 0; }
.ref-row .grow { flex: 1; min-width: 0; }
.ref-row .grow small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- sheet (modal) ---------- */
.back { position: fixed; inset: 0; background: rgba(5, 12, 9, .45); z-index: 80; display: grid; place-items: center; padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); }
.sheet header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.sheet header h2 { margin: 0; font-size: 1.1rem; }
.sheet .body > * { flex-shrink: 0; }
.sheet .body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.sheet footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); flex-wrap: wrap; border-top: 1px solid var(--line); background: var(--surface); }
.sheet .err { color: var(--bad); font-size: .88rem; margin-right: auto; align-self: center; }
.typesel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.typesel button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 12px; padding: 10px; font-weight: 650; cursor: pointer; }
.typesel button.on.despesa { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); border-color: var(--bad); color: var(--bad); }
.typesel button.on.receita { background: color-mix(in srgb, var(--good) 12%, var(--surface)); border-color: var(--good); color: var(--good); }
.typesel button.on.transferencia { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.amount-in { font-size: 1.8rem; font-weight: 750; text-align: center; letter-spacing: -.01em; min-height: 56px; }
.hist { font-size: .8rem; color: var(--muted); border-top: 1px dashed var(--line-2); padding-top: 8px; }
.hist div { padding: 2px 0; }
.fab { position: fixed; right: 18px; bottom: 90px; width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lg); display: none; place-items: center; cursor: pointer; z-index: 20; }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow-lg); animation: pop .2s; display: flex; gap: 10px; align-items: center; }
.toast button { background: transparent; border: 0; color: #7ce0b8; font-weight: 700; cursor: pointer; }
.toast.err { background: var(--bad); color: #fff; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 20px; background: radial-gradient(900px 500px at 10% -10%, #17553f 0, transparent 60%), var(--brand); }
.login form { width: 100%; max-width: 380px; background: var(--surface); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg); }
.login h1 { margin: 0; font-size: 1.5rem; }
.login .err { color: var(--bad); min-height: 1.2em; font-size: .9rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, 1fr); } .panels { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .rail { display: none; }
  .main { height: calc(100dvh - 64px - env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); z-index: 30; }
  .tabbar button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .7rem; font-weight: 600; color: var(--muted); cursor: pointer; }
  .tabbar button.on { color: var(--accent); }
  .page { padding: 16px 14px 90px; }
  .mini-sum { display: none; }
  .set, .grid2 { grid-template-columns: 1fr; }
  .msg { max-width: 94%; }
  input, select, textarea { font-size: 16px; } /* iPhone não dá zoom ao tocar no campo */
  .thread { padding: 16px 14px 10px; }
  .chat-top { padding-top: calc(12px + env(safe-area-inset-top)); }
  .page { padding-top: calc(16px + env(safe-area-inset-top)); }
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .toolbar input[type=search] { grid-column: 1 / -1; max-width: none; }
  .toolbar select { width: 100%; }
  .toolbar label.chip { justify-content: center; }
  .sumline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sumline span { display: flex; flex-direction: column; font-size: .76rem; }
  .sumline b { font-size: .95rem; }
  .composer { padding: 6px 10px 8px; }
  .fab { display: grid; }
  .back { place-items: end stretch; padding: 0; }
  .sheet { border-radius: 22px 22px 0 0; max-height: 92dvh; }
  .sheet footer { flex-wrap: nowrap; }
  .sheet footer .btn.ghost[data-x] { display: none; }   /* o X do topo já fecha */
  .sheet footer .btn.primary { flex: 1; }
  .sheet footer .err:empty { display: none; }
  .tile { padding: 12px 14px; }
  .tile b { font-size: clamp(.95rem, 4.8vw, 1.3rem); white-space: nowrap; }
  .tiles { gap: 10px; }
  .head .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg button { padding: 6px 10px; }
  .hscroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding: 2px 14px; }
  .hscroll::-webkit-scrollbar, .head .seg::-webkit-scrollbar { display: none; }
  #toasts { bottom: 150px; }
}