/* Layout: app web com menu lateral azul-noite no computador; no celular, barra de abas embaixo. Tons de private banking: azul-noite, porcelana e champanhe. */
:root {
  --bg: #F4F4F1;
  --surface: #FFFFFF;
  --surface-2: #EFEEE9;
  --line: #E3E1DA;
  --ink: #0E1726;
  --muted: #586174;
  --night: #0F1E36;
  --night-2: #1A2C4B;
  --on-night: #F4EFE4;
  --on-night-muted: #AFB8C9;
  --gold: #B8924F;
  --gold-soft: #F4ECDD;
  --gold-ink: #85662C;
  --gold-on-night: #D8BC86;
  --good: #2D7A57;
  --good-soft: #E3F1EA;
  --warn: #A8650A;
  --warn-soft: #FAEEDC;
  --bad: #A93F33;
  --chart-a: #0F1E36;
  --chart-grid: #E7E5DF;
  --track: #ECEBE6;
  --shadow: 0 1px 2px rgba(14, 23, 38, .05), 0 12px 32px -18px rgba(14, 23, 38, .18);
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #090E17; --surface: #111A29; --surface-2: #172236; --line: #243149; --ink: #E8ECF3; --muted: #9AA5BA;
    --night: #0C1626; --night-2: #18263F; --on-night: #F1ECE1; --on-night-muted: #A3AEC2;
    --gold: #D4B57D; --gold-soft: #2C2516; --gold-ink: #E3C891; --gold-on-night: #D8BC86;
    --good: #5FBF92; --good-soft: #16302A; --warn: #E4A54F; --warn-soft: #33261A; --bad: #E7867A;
    --chart-a: #A9C0E6; --chart-grid: #1F2B42; --track: #1D293F;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -18px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #090E17; --surface: #111A29; --surface-2: #172236; --line: #243149; --ink: #E8ECF3; --muted: #9AA5BA;
  --night: #0C1626; --night-2: #18263F; --on-night: #F1ECE1; --on-night-muted: #A3AEC2;
  --gold: #D4B57D; --gold-soft: #2C2516; --gold-ink: #E3C891; --gold-on-night: #D8BC86;
  --good: #5FBF92; --good-soft: #16302A; --warn: #E4A54F; --warn-soft: #33261A; --bad: #E7867A;
  --chart-a: #A9C0E6; --chart-grid: #1F2B42; --track: #1D293F;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -18px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 16px 24px;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Barra do protótipo */
.proto { max-width: 1280px; margin: 0 auto 14px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.proto p { font-size: 13px; color: var(--muted); }
.proto b { color: var(--ink); }
.device { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.device button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.device button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
@media (max-width: 700px) { .device { display: none; } }

.stage { max-width: 1280px; margin: 0 auto; }
.shell { container-type: inline-size; background: var(--bg); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 701px) { .shell { height: calc(100dvh - 92px); min-height: 620px; overflow-y: auto; } }
.stage.as-phone .shell { width: 390px; max-width: 100%; height: 844px; margin: 0 auto; border-radius: 34px; overflow-y: auto; }
@media (max-width: 700px) { .shell { border-radius: 24px; } }

.layout { display: block; }
.side { display: none; }
.main { min-width: 0; }
.mtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 16px 4px; }
.mtop .brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.dtop { display: none; }
.page { padding: 12px 16px 24px; }
.tabs { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: end; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
.tabs button { flex: 1 1 0; min-width: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 50px; justify-content: center; color: var(--muted); font-size: 11px; font-weight: 600; }
.tabs button[aria-current="page"] { color: var(--ink); font-weight: 800; }
.tabs button[aria-current="page"] svg { color: var(--gold-ink); }
.tabs svg { width: 22px; height: 22px; }
.tabs .fab { width: 50px; height: 50px; border-radius: 999px; background: var(--night); color: var(--gold-on-night); display: flex; align-items: center; justify-content: center; margin-top: -18px; box-shadow: var(--shadow); }

@container (min-width: 900px) {
  .layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100%; min-height: 0; }
  .main { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .side { overflow-y: auto; }
  .side { display: flex; flex-direction: column; gap: 4px; background: var(--night); color: var(--on-night); padding: 24px 14px; }
  .side .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 600; padding: 0 10px 22px; }
  .side .brand small { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--on-night-muted); letter-spacing: .04em; }
  .side .sec { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-muted); padding: 16px 12px 6px; }
  .side button { display: flex; align-items: center; gap: 12px; border: 0; background: none; color: var(--on-night-muted); text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
  .side button svg { width: 19px; height: 19px; flex: 0 0 auto; }
  .side button:hover { background: var(--night-2); color: var(--on-night); }
  .side button[aria-current="page"] { background: var(--night-2); color: var(--on-night); box-shadow: inset 0 0 0 1px rgba(216, 188, 134, .35); }
  .side button[aria-current="page"] svg { color: var(--gold-on-night); }
  .side .tag { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--night); background: var(--gold-on-night); border-radius: 999px; padding: 2px 7px; }
  .side .foot { margin-top: auto; border-top: 1px solid var(--night-2); padding: 16px 12px 0; font-size: 12px; color: var(--on-night-muted); display: flex; flex-direction: column; gap: 8px; }
  .mtop, .tabs { display: none; }
  .dtop { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 32px 6px; }
  .page { padding: 14px 32px 36px; flex: 1 1 auto; overflow-y: auto; min-height: 0; border-top: 1px solid var(--line); }
  .dtop { padding-bottom: 14px; }
  .page .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .s12 { grid-column: span 12; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; } .s6 { grid-column: span 6; } .s5 { grid-column: span 5; } .s4 { grid-column: span 4; }
  .page .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .narrow { max-width: 560px; }
  .page .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
}

/* Elementos */
.monogram { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.side .monogram { border-color: var(--gold-on-night); color: var(--gold-on-night); }
.who-chip { display: flex; align-items: center; gap: 10px; }
.avs { display: flex; }
.av { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 2px solid var(--bg); }
.av + .av { margin-left: -8px; }
.av.a { background: var(--night); color: var(--gold-on-night); }
.av.p { background: var(--gold-soft); color: var(--gold-ink); }
.period { display: flex; flex-direction: column; gap: 2px; }
.period .k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.period h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.chip { border: 1px solid var(--gold); color: var(--gold-ink); background: transparent; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 800; min-height: 36px; }
.btn { min-height: 46px; border-radius: 12px; border: 0; background: var(--night); color: var(--on-night); font-size: 14px; font-weight: 800; padding: 0 18px; }
.btn.gold { background: var(--gold); color: #1B1406; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-weight: 700; }
.btn.line { background: transparent; border: 1px solid var(--night); color: var(--ink); }
.btn.on-night { background: var(--on-night); color: var(--night); }
.btn:disabled { opacity: .45; cursor: default; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card-h h3, h3.t { font-size: 15px; font-weight: 800; }
.cap { font-size: 12px; color: var(--muted); }
.small { font-size: 13px; }
.muted { color: var(--muted); }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.serif { font-family: var(--font-display); }
.pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 4px 10px; background: var(--surface-2); color: var(--muted); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.gold { background: var(--gold-soft); color: var(--gold-ink); }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.hero { background: var(--night); color: var(--on-night); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(216, 188, 134, .28); pointer-events: none; }
.hero .k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-on-night); }
.hero .big { font-family: var(--font-display); font-size: 52px; font-weight: 600; letter-spacing: -.02em; line-height: 1; margin-top: 8px; }
.hero .sub { font-size: 13px; color: var(--on-night-muted); }
.hero .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--night-2); padding-top: 16px; }
.hero .row span { display: block; font-size: 11px; font-weight: 700; color: var(--on-night-muted); letter-spacing: .04em; text-transform: uppercase; }
.hero .row b { display: block; margin-top: 4px; font-size: 16px; font-weight: 800; }

.allow { background: var(--gold-soft); border: 1px solid transparent; }
.allow .v { font-family: var(--font-display); font-size: 38px; font-weight: 600; line-height: 1; color: var(--ink); }
.allow .v small { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--muted); }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi .l { font-size: 12px; font-weight: 700; color: var(--muted); }
.kpi .v { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.05; }
.kpi .v small { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--muted); }
.meter { height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 999px; background: var(--chart-a); }
.meter span.gold { background: var(--gold); }
.meter span.warn { background: var(--warn); }
.meter span.good { background: var(--good); }

.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
.chart text { font-family: var(--font-ui); font-size: 11px; fill: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); font-weight: 600; }
.legend i { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid var(--chart-a); vertical-align: middle; margin-right: 6px; }
.legend i.b { border-top: 2px dashed var(--muted); }
.legend i.f { border-top: 2.5px dotted var(--gold); }

.cats { display: flex; flex-direction: column; gap: 14px; }
.cat .r1 { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.cat .r1 b { font-weight: 700; }
.bar { position: relative; height: 8px; border-radius: 999px; background: var(--track); margin-top: 7px; }
.bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--chart-a); }
.bar span.warn { background: var(--warn); }
.bar .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; opacity: .55; }
.cat .st { font-size: 12px; font-weight: 700; margin-top: 6px; color: var(--muted); }
.cat .st.warn { color: var(--warn); }
.cat .st.good { color: var(--good); }

.ins { display: flex; flex-direction: column; gap: 12px; }
.ins .i { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; }
.ins .i span.ic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.ic.warn { background: var(--warn-soft); color: var(--warn); }
.ic.good { background: var(--good-soft); color: var(--good); }
.ic.gold { background: var(--gold-soft); color: var(--gold-ink); }

.alert { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 14px 16px; }
.alert .ic2 { width: 36px; height: 36px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 auto; }
.alert b { display: block; font-size: 14px; }
.alert .s { font-size: 13px; color: var(--warn); font-weight: 700; }

/* Ponte da renda */
.wf { display: flex; flex-direction: column; gap: 8px; }
.wf .row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 72px; gap: 10px; align-items: center; font-size: 13px; }
.wf .row .lab { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf .row .val { text-align: right; font-weight: 800; }
.wf .tr { position: relative; height: 18px; }
.wf .tr span { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--gold); opacity: .85; }
.wf .tr span.in { background: var(--chart-a); opacity: 1; }
.wf .tr span.out { background: var(--good); opacity: 1; }
.wf .row.total { border-top: 1px solid var(--line); padding-top: 8px; }

table.fpa { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablewrap { overflow-x: auto; }
table.fpa th { text-align: right; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.fpa th:first-child, table.fpa td:first-child { text-align: left; padding-left: 0; }
table.fpa td { text-align: right; padding: 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.fpa tr.tot td { font-weight: 800; border-bottom: 0; }
td.neg { color: var(--warn); font-weight: 800; }
td.pos { color: var(--good); font-weight: 800; }

/* Lançar e demais */
.seg { display: grid; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.seg button { border: 0; background: none; min-height: 40px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.scan { height: 200px; border-radius: 18px; background: var(--night); position: relative; display: flex; align-items: center; justify-content: center; }
.scan .fr { width: 132px; height: 132px; border-radius: 16px; border: 2px solid var(--gold-on-night); }
.scan p { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 13px; font-weight: 600; color: var(--on-night); }
.drop { height: 180px; border-radius: 18px; border: 1.5px dashed var(--gold); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; }
.amount { font-family: var(--font-display); font-size: 30px; font-weight: 600; }
.chat { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.chat .h { background: var(--night); color: var(--on-night); padding: 12px 16px; font-size: 14px; font-weight: 800; }
.chat .h span { display: block; font-size: 12px; font-weight: 600; color: var(--on-night-muted); }
.chat .b { background: var(--surface-2); padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.msg { max-width: 80%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface); align-self: flex-start; }
.msg.me { align-self: flex-end; background: var(--gold-soft); border-radius: 14px 14px 4px 14px; }
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
label.f input, label.f select { min-height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px; font-size: 15px; font-weight: 600; }
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.who button { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 700; }
.who button[aria-pressed="true"] { border: 1.5px solid var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.ok { font-size: 13px; font-weight: 800; color: var(--good); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.li { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 38px; border-bottom: 1px solid var(--line); font-size: 14px; }
.li b { white-space: nowrap; }
.li b.warn { color: var(--warn); } .li b.good { color: var(--good); }
.parc { display: grid; grid-template-columns: 56px minmax(0, 1fr) 72px; gap: 10px; align-items: center; font-size: 13px; }
.parc .bar { margin: 0; height: 10px; }
.parc .bar span { background: var(--gold); }
.stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; }
.lg { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 14px; }
.lg .sw { width: 12px; height: 12px; border-radius: 4px; margin-top: 4px; }
.tmini { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.tmini .r { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px; gap: 8px; }
.tmini .r > :not(:first-child) { text-align: right; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.steps span { height: 4px; border-radius: 999px; background: var(--track); }
.steps span.on { background: var(--gold); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold); flex: 0 0 auto; }
.check b { display: block; font-size: 14px; }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container (min-width: 900px) { .plans { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.plan { border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); }
.plan.main { background: var(--night); color: var(--on-night); border: 0; position: relative; }
.plan.main::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(216, 188, 134, .4); pointer-events: none; }
.plan .price { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -.02em; }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.plan.main ul li { display: flex; gap: 10px; }
.plan.main ul li::before { content: "◆"; color: var(--gold-on-night); font-size: 9px; margin-top: 5px; }
.plan.main .m { color: var(--on-night-muted); }
.title-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.title-row h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.back { align-self: flex-start; border: 0; background: none; padding: 0; min-height: 36px; font-size: 14px; font-weight: 700; color: var(--gold-ink); }
.lock { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: var(--gold-ink); }

/* Exportar, importar e avisos */
.only-web { display: none !important; }
@container (min-width: 900px) { .only-web { display: inline-flex !important; } .only-phone { display: none !important; } }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.menu button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.menu button span { font-size: 12px; font-weight: 600; color: var(--muted); }
.menu button:hover { background: var(--surface-2); }
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; max-width: min(460px, calc(100vw - 32px)); background: var(--night); color: var(--on-night); border-radius: 14px; padding: 12px 16px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: flex-start; }
.toast::before { content: "◆"; color: var(--gold-on-night); font-size: 10px; margin-top: 5px; }
.import-cta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1.5px solid var(--gold); background: var(--gold-soft); border-radius: 16px; padding: 14px 16px; }
.import-cta .ic3 { width: 40px; height: 40px; border-radius: 12px; background: var(--night); color: var(--gold-on-night); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.import-cta b { display: block; font-size: 15px; }
.import-cta span.s { font-size: 13px; color: var(--muted); }
.banks { display: flex; flex-wrap: wrap; gap: 8px; }
.banks button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; min-height: 36px; }
.banks button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.guide { font-size: 13px; color: var(--muted); line-height: 1.5; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.sumgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sumgrid div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: var(--muted); font-weight: 700; }
.sumgrid b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }
tr.rev td { background: var(--warn-soft); }
.catsel { min-height: 32px; border-radius: 8px; border: 1px solid var(--warn); background: var(--surface); font-size: 12px; font-weight: 700; padding: 0 6px; }
.kpi .why { font-size: 12px; color: var(--muted); line-height: 1.4; }
.how { font-size: 12px; color: var(--muted); line-height: 1.45; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.how b { color: var(--ink); }
.num-in { width: 104px; min-height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); text-align: right; padding: 0 10px; font-size: 13px; font-weight: 700; }
.num-in:focus { border-color: var(--gold); }
.typ { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.typ.fixa { background: var(--surface-2); color: var(--muted); }
.typ.var { background: var(--gold-soft); color: var(--gold-ink); }
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 900px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.strip div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 12px; font-weight: 700; color: var(--muted); }
.strip b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.strip div.hl { background: var(--night); border-color: var(--night); color: var(--on-night-muted); }
.strip div.hl b { color: var(--gold-on-night); }
.inc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.inc span.cap { display: block; }
.stepnum { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.step-h { display: flex; gap: 10px; align-items: center; }
.recent { display: flex; flex-direction: column; }
.recent .it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.recent .it:last-child { border-bottom: 0; }
.recent .it span.cap { display: block; margin-top: 2px; }
.bridge { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.bridge div { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.bridge b { color: var(--ink); }
.bridge .eq { border-top: 1px solid var(--gold); padding-top: 6px; color: var(--ink); font-weight: 700; }
.kpi-btn { text-align: left; cursor: pointer; font: inherit; color: inherit; }
.kpi-btn:hover { border-color: var(--gold); }
.legend i.sq { width: 12px; height: 12px; border: 0; border-radius: 3px; background: var(--chart-a); }
.legend i.sq.op { background: var(--gold); opacity: .55; }
.legend i.tk { width: 14px; border-top: 3px solid var(--ink); }
.goal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.goal .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.goal .g3 div { background: var(--surface-2); border-radius: 12px; padding: 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.goal .g3 b { display: block; margin-top: 3px; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.mtop .brand { min-width: 0; }
.faixas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.faixas span { font-size: 11px; font-weight: 700; color: var(--on-night-muted); border-top: 3px solid var(--night-2); padding-top: 6px; line-height: 1.3; }
.faixas span.on { color: var(--on-night); border-top-color: var(--gold-on-night); }
.score-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; height: 180px; align-items: end; }
.score-bars div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.score-bars span { display: block; width: 60%; max-width: 40px; background: var(--chart-a); border-radius: 6px 6px 0 0; opacity: .35; }
.score-bars div.on span { opacity: 1; background: var(--gold); }
.score-bars b { font-size: 13px; }
.score-bars i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 700; }
.method { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: m; }
@container (min-width: 900px) { .method { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.method li { counter-increment: m; background: var(--surface-2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.method li::before { content: counter(m); width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; margin-bottom: 4px; }
.method li b { color: var(--ink); font-size: 14px; }
.newcat { display: grid; grid-template-columns: minmax(0, 1fr) 120px 110px auto; gap: 8px; align-items: end; }
@container (max-width: 899px) { .newcat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.newcat input, .newcat select { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); padding: 0 10px; font-size: 14px; font-weight: 600; width: 100%; }
.newcat label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.period-sel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.period-sel select { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); padding: 0 12px; font-size: 14px; font-weight: 700; }
tr.cur td { background: var(--gold-soft); }

.nc-box { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--gold); background: var(--gold-soft); border-radius: 14px; padding: 14px; }
.nc-box label.f input, .nc-box label.f select { background: var(--surface); }
.shell { position: relative; }
.onb { min-height: 100%; background: var(--bg); display: flex; flex-direction: column; }
.onb-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.onb-top .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.onb-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 18px 28px; flex: 1 1 auto; }
@container (min-width: 900px) {
  .onb-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; padding: 36px 48px; align-items: start; }
  .onb-side { position: sticky; top: 0; }
}
.onb-main { display: flex; flex-direction: column; gap: 16px; max-width: 620px; min-width: 0; }
.onb-in.solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.onb-in.solo .onb-main { max-width: 760px; width: 100%; }
.ob-step { display: flex; flex-direction: column; gap: 16px; }
.ob-h { font-family: var(--font-display); font-size: clamp(26px, 4cqi, 36px); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
.ob-p { font-size: 15px; color: var(--muted); line-height: 1.55; }
.ob-list { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.ob-list > div { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.ob-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container (min-width: 900px) { .ob-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.money { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding-left: 14px; }
.money:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.money i { font-style: normal; font-weight: 700; color: var(--muted); }
label.f .money input { border: 0; min-height: 48px; width: 100%; font-size: 18px; font-weight: 800; background: transparent; padding: 0 12px 0 8px; outline: none; }
.ob-prog { display: flex; flex-direction: column; gap: 8px; }
.steps7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.steps7 span { height: 4px; border-radius: 999px; background: var(--track); }
.steps7 span.on { background: var(--gold); }
.ob-mini { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--gold-soft); border-radius: 10px; padding: 8px 12px; }
.onb-side { background: var(--night); color: var(--on-night); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.onb-side .k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-on-night); }
.onb-side .sub { font-size: 12px; color: var(--on-night-muted); }
.ob-tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ob-tot span { display: block; font-size: 11px; font-weight: 700; color: var(--on-night-muted); text-transform: uppercase; letter-spacing: .05em; }
.ob-tot b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.obs-cats { display: flex; flex-direction: column; gap: 10px; }
.obs-cats .r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; }
.obs-cats .r i { grid-column: 1 / -1; display: block; height: 5px; border-radius: 999px; background: var(--night-2); overflow: hidden; }
.obs-cats .r i span { display: block; height: 100%; background: var(--gold-on-night); border-radius: 999px; }
.obs-cats .vazio { font-size: 13px; color: var(--on-night-muted); }
.ob-addbox { display: flex; flex-direction: column; gap: 10px; }
.ob-addform { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--gold); background: var(--gold-soft); border-radius: 14px; padding: 14px; }
.ob-addform .money { background: var(--surface); }
.ob-addform label.f input:not(.ob-add-valor) { min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--surface); font-size: 15px; font-weight: 600; }
.ob-addrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container (min-width: 900px) { .ob-addrow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.ob-novo { position: relative; }
.ob-novo .nm { display: flex; gap: 8px; align-items: center; }
.ob-novo .rm { position: absolute; right: 0; top: 0; border: 0; background: none; font-size: 12px; font-weight: 700; color: var(--muted); padding: 0; }
.ob-opts { display: flex; flex-direction: column; gap: 10px; }
.ob-opt { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ob-opt.rec { border: 1.5px solid var(--gold); background: var(--gold-soft); }
.ob-opt b { font-size: 15px; }
.ob-opt:hover { border-color: var(--gold); }
.firststeps { display: flex; flex-direction: column; gap: 4px; }
.firststeps .fs { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.firststeps .fs:last-child { border-bottom: 0; }
.firststeps .ck { width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.firststeps .fs.done .ck { background: var(--good); border-color: var(--good); color: var(--surface); }
.firststeps .fs.done span.t { color: var(--muted); text-decoration: line-through; }
/* Planos */
body[data-plan="essencial"] [data-min="plus"], body[data-plan="essencial"] [data-min="premium"], body[data-plan="plus"] [data-min="premium"] { display: none !important; }
body:not([data-plan="essencial"]) [data-only="essencial"] { display: none !important; }
body:not([data-plan="plus"]) [data-only="plus"] { display: none !important; }
.planpick { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.planpick button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.planpick button[aria-pressed="true"] { background: var(--night); color: var(--gold-on-night); }
.proto .ctrls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.plans3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container (min-width: 900px) { .plans3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan .for { font-size: 13px; color: var(--muted); line-height: 1.45; }
.plan.main .for { color: var(--on-night-muted); }
.plan .cur { align-self: flex-start; }
.plan ul.feat li { display: flex; gap: 10px; }
.plan ul.feat li::before { content: "◆"; color: var(--gold); font-size: 9px; margin-top: 5px; }
.plan.main ul.feat li::before { color: var(--gold-on-night); }
.plan .inc-prev { font-size: 13px; font-weight: 800; color: var(--gold-ink); }
.plan.main .inc-prev { color: var(--gold-on-night); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.compare td.y { color: var(--good); font-weight: 800; }
.compare td.n { color: var(--muted); }
.upsell { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 18px; padding: 18px; }
.upsell p { font-size: 14px; max-width: 640px; line-height: 1.5; }
.share { display: flex; flex-direction: column; gap: 10px; }
.share .r { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 13px; }
.share .r .bar { margin: 0; }
.share .r b:last-child { text-align: right; }

/* Identidade do Essencial: verde-azulado, clara e acessível */
body[data-plan="essencial"], .plan[data-plano="essencial"] {
  --bg: #F3F7F6; --surface: #FFFFFF; --surface-2: #E9F1EF; --line: #D6E3E0; --ink: #10211F; --muted: #4D625E;
  --night: #0E5E57; --night-2: #17776E; --on-night: #FFFFFF; --on-night-muted: #CDE8E3;
  --gold: #12857A; --gold-soft: #E0F2EE; --gold-ink: #0B5F57; --gold-on-night: #A8EBDF;
  --chart-a: #0E5E57; --chart-grid: #E1EBE8; --track: #E3ECEA;
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --on-gold: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-plan="essencial"], :root:not([data-theme="light"]) .plan[data-plano="essencial"] {
    --bg: #0B1514; --surface: #11201E; --surface-2: #172B28; --line: #24403B; --ink: #E6F2EF; --muted: #9DB8B2;
    --night: #0F4A44; --night-2: #17605A; --on-night: #F2FBF9; --on-night-muted: #B5D8D1;
    --gold: #4FC3B2; --gold-soft: #15332F; --gold-ink: #7FD8CB; --gold-on-night: #9FE8DC;
    --chart-a: #7FD8CB; --chart-grid: #1C3330; --track: #1C3330; --on-gold: #062421;
  }
}
:root[data-theme="dark"] body[data-plan="essencial"], :root[data-theme="dark"] .plan[data-plano="essencial"] {
  --bg: #0B1514; --surface: #11201E; --surface-2: #172B28; --line: #24403B; --ink: #E6F2EF; --muted: #9DB8B2;
  --night: #0F4A44; --night-2: #17605A; --on-night: #F2FBF9; --on-night-muted: #B5D8D1;
  --gold: #4FC3B2; --gold-soft: #15332F; --gold-ink: #7FD8CB; --gold-on-night: #9FE8DC;
  --chart-a: #7FD8CB; --chart-grid: #1C3330; --track: #1C3330; --on-gold: #062421;
}
body[data-plan="essencial"] .btn.gold { color: var(--on-gold); }
body[data-plan="essencial"] .page { font-size: 15px; }
body[data-plan="essencial"] .small { font-size: 14px; }
body[data-plan="essencial"] .cap { font-size: 13px; }
body[data-plan="essencial"] .btn { min-height: 50px; font-size: 15px; border-radius: 14px; }
body[data-plan="essencial"] .card, body[data-plan="essencial"] .hero { border-radius: 22px; }
body[data-plan="essencial"] .hero::after { box-shadow: none; }
body[data-plan="essencial"] .hero .big { font-weight: 800; letter-spacing: -.03em; }
body[data-plan="essencial"] .period h1, body[data-plan="essencial"] .title-row h2 { font-weight: 800; letter-spacing: -.02em; }
body[data-plan="essencial"] .cat .r1 { font-size: 15px; }
body[data-plan="essencial"] .bar { height: 10px; }
body[data-plan="essencial"] .side button { font-size: 15px; padding: 12px; }
body[data-plan="essencial"] .monogram { border-radius: 999px; }
body[data-plan="essencial"] .plan-tag { display: inline-block; }
.plan-tag { display: none; font-family: var(--font-ui); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--night); background: var(--gold-on-night); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.plan[data-plano="essencial"] { background: var(--surface); border-color: var(--gold); }
.plan[data-plano="essencial"] .serif { font-family: var(--font-display); font-weight: 800 !important; color: var(--gold-ink); }
.plan[data-plano="essencial"] .btn.ghost { border-color: var(--gold); color: var(--gold-ink); }

/* Cards Plus e Premium mantêm a identidade azul-noite e champanhe em qualquer plano */
.plan[data-plano="plus"], .plan[data-plano="premium"] {
  --bg: #F4F4F1; --surface: #FFFFFF; --surface-2: #EFEEE9; --line: #E3E1DA; --ink: #0E1726; --muted: #586174;
  --night: #0F1E36; --night-2: #1A2C4B; --on-night: #F4EFE4; --on-night-muted: #AFB8C9;
  --gold: #B8924F; --gold-soft: #F4ECDD; --gold-ink: #85662C; --gold-on-night: #D8BC86; --chart-a: #0F1E36;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan[data-plano="plus"], :root:not([data-theme="light"]) .plan[data-plano="premium"] {
    --surface: #111A29; --surface-2: #172236; --line: #243149; --ink: #E8ECF3; --muted: #9AA5BA;
    --night: #0C1626; --night-2: #18263F; --on-night: #F1ECE1; --on-night-muted: #A3AEC2;
    --gold: #D4B57D; --gold-soft: #2C2516; --gold-ink: #E3C891; --gold-on-night: #D8BC86; --chart-a: #A9C0E6;
  }
}
:root[data-theme="dark"] .plan[data-plano="plus"], :root[data-theme="dark"] .plan[data-plano="premium"] {
  --surface: #111A29; --surface-2: #172236; --line: #243149; --ink: #E8ECF3; --muted: #9AA5BA;
  --night: #0C1626; --night-2: #18263F; --on-night: #F1ECE1; --on-night-muted: #A3AEC2;
  --gold: #D4B57D; --gold-soft: #2C2516; --gold-ink: #E3C891; --gold-on-night: #D8BC86; --chart-a: #A9C0E6;
}
.plan[data-plano="plus"], .plan[data-plano="premium"] { color: var(--ink); }
.plan.main[data-plano="premium"] { color: var(--on-night); }
.mtop .plan-tag { display: none !important; }
.mtop .brand { white-space: nowrap; }

.tag-c { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }