/* ============ Carteira — app-specific patterns on top of Mel ============ */
  .brand-lockup { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text-main); }
  .brand-lockup .brand-mark { width:30px; height:30px; color:var(--honey-500); flex-shrink:0; }
  .brand-lockup .brand-name { font-weight:800; font-size:20px; letter-spacing:-.02em; }
  .brand-lockup .brand-name span { color:var(--honey-600); }

  /* nav section divider on the icon rail */
  .mel-rail .rail-divider { width:28px; height:1px; background:var(--slate-200); margin:6px auto; }
  [data-theme="dark"] .mel-rail .rail-divider { background:var(--slate-800); }

  /* money */
  .money { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
  .pos { color:var(--color-success); } .neg { color:var(--color-error); }
  .hold { color:var(--honey-700); } .flat { color:var(--text-muted); }

  /* layout helpers */
  .grid { display:grid; gap:var(--spacing-md); }
  .g-3 { grid-template-columns:repeat(3,1fr); }
  .g-2 { grid-template-columns:1fr 1fr; }
  .split { grid-template-columns:1.62fr 1fr; align-items:start; }
  @media (max-width:900px){ .g-3,.g-2,.split{ grid-template-columns:1fr; } }

  /* KPI card */
  .kpi-card { background:var(--bg-surface); border:1px solid var(--slate-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:18px 20px; display:flex; flex-direction:column; gap:7px; }
  .kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .kpi-label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--slate-400); }
  .kpi-value { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:29px; font-weight:800; letter-spacing:-.012em; line-height:1.05; }
  .kpi-sub { font-size:var(--text-sm); color:var(--text-muted); }
  .kpi-chip { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; }
  .kpi-chip svg { width:18px; height:18px; }
  .chip-success { background:color-mix(in srgb,var(--color-success),white 86%); color:color-mix(in srgb,var(--color-success),black 8%); }
  .chip-honey   { background:var(--honey-50); color:var(--honey-700); }
  .chip-error   { background:color-mix(in srgb,var(--color-error),white 88%); color:color-mix(in srgb,var(--color-error),black 4%); }
  .chip-info    { background:color-mix(in srgb,var(--color-info),white 88%); color:var(--color-info); }
  .chip-slate   { background:var(--slate-100); color:var(--slate-500); }

  /* card title bar */
  .card-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
  .card-h h3 { margin:0; font-size:var(--text-lg); font-weight:800; letter-spacing:-.01em; }
  .card-h .ch-meta { font-size:var(--text-sm); color:var(--text-muted); font-weight:600; }

  /* bar chart */
  .barchart { display:flex; align-items:stretch; gap:14px; height:188px; padding-top:6px; }
  .barcol { flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; }
  .barcol .bars { display:flex; align-items:flex-end; justify-content:center; gap:5px; flex:1; width:100%; }
  .bar { width:15px; border-radius:5px 5px 2px 2px; transition:height .5s var(--ease-enter); }
  .bar-in { background:var(--color-success); }
  .bar-out { background:var(--honey-400); }
  .barcol .bl { font-size:12px; color:var(--text-muted); font-weight:700; }
  .barcol.is-future .bl { color:var(--slate-400); }
  .barcol.is-future .bar { opacity:.42; }
  .legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:var(--text-sm); color:var(--text-muted); }
  .legend span { display:inline-flex; align-items:center; gap:7px; font-weight:600; }
  .dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }

  /* donut */
  .donut-wrap { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
  .donut { width:158px; height:158px; border-radius:50%; position:relative; flex-shrink:0; }
  .donut-hole { position:absolute; inset:27px; background:var(--bg-surface); border-radius:50%; display:grid; place-items:center; text-align:center; box-shadow:inset 0 1px 2px rgba(29,35,44,.04); }
  .donut-hole .dh-val { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:800; font-size:18px; }
  .donut-hole .dh-lab { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-400); font-weight:700; margin-top:2px; }
  .cat-legend { display:flex; flex-direction:column; gap:9px; font-size:var(--text-sm); flex:1; min-width:160px; }
  .cat-legend .cl-row { display:flex; align-items:center; gap:9px; }
  .cat-legend .cl-name { font-weight:600; }
  .cat-legend .cl-pct { margin-left:auto; font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-muted); font-weight:700; }

  /* simple two-col rows (upcoming, fatura summary list) */
  .lrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--slate-100); }
  .lrow:first-child { border-top:0; }
  .lrow .lr-main { display:flex; align-items:center; gap:11px; min-width:0; }
  .lr-date { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:13px; color:var(--text-muted); font-weight:700; width:42px; flex-shrink:0; }
  .lr-name { font-weight:600; }

  /* category dot in transaction tables */
  .catdot { width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
  .tx-desc { display:flex; align-items:center; gap:10px; }
  .tx-desc .txd-name { font-weight:600; }
  .tx-tags { display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center; }

  /* day header in extrato */
  .day-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:22px 2px 9px; }
  .day-head .d-date { font-weight:800; font-size:var(--text-sm); }
  .day-head .d-date b { color:var(--honey-700); }
  .day-head .d-sum { font-size:13px; color:var(--text-muted); font-variant-numeric:tabular-nums; }

  /* month stepper */
  .monthnav { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .filter-grid-3 { grid-template-columns:repeat(3,1fr); }
  @media (max-width:760px){ .filter-grid-3 { grid-template-columns:1fr; } }
  .adv-toggle { margin-top:var(--spacing-md); }
  .adv-caret { transition:transform var(--transition-fast); }
  .adv-toggle.open .adv-caret { transform:rotate(180deg); }
  .adv-fields { margin-top:var(--spacing-md); animation:mel-fade-in .18s var(--ease-enter) both; }
  .month-row { display:flex; justify-content:center; margin-top:var(--spacing-lg); padding-top:var(--spacing-md); border-top:1px solid var(--slate-200); }
  [data-theme="dark"] .month-row { border-top-color:var(--slate-800); }
  .month-row .monthnav { justify-content:center; }
  .daterange { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
  .daterange .field { flex:1; min-width:150px; margin-bottom:0; }
  .dr-sep { display:grid; place-items:center; height:42px; color:var(--slate-400); }
  .dr-sep svg { width:16px; height:16px; }
  .dr-clear { flex-shrink:0; }
  .month-row.is-overridden .monthnav { opacity:.4; pointer-events:none; filter:grayscale(.4); }
  .month-override { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }
  .month-override .badge-soft svg { width:14px; height:14px; vertical-align:-2px; margin-right:2px; }
  .dr-readout { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; font-size:var(--text-sm); color:var(--text-main); }
  .period-summary { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:0 2px var(--spacing-md); padding:14px 18px; background:var(--bg-surface); border:1px solid var(--slate-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); }
  .period-summary .ps-item { display:flex; flex-direction:column; gap:2px; }
  .period-summary .ps-lab { font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--slate-400); }
  .period-summary .ps-item .money { font-size:var(--text-lg); }
  .period-summary .ps-sep { width:1px; align-self:stretch; background:var(--slate-200); }
  .period-summary .ps-foot { margin-left:auto; font-size:13px; }
  @media (max-width:640px){ .period-summary .ps-foot { margin-left:0; flex-basis:100%; } }
  .mlabel { min-width:152px; text-align:center; font-weight:800; font-size:var(--text-lg); font-variant-numeric:tabular-nums; }
  .btn-step { padding:0; width:38px; height:38px; justify-content:center; }
  .btn-step svg { width:18px; height:18px; }

  /* segmented control (forms / view toggle) */
  .segmented { display:inline-flex; background:var(--slate-100); border-radius:var(--radius-md); padding:4px; gap:3px; flex-wrap:wrap; }
  .segmented button { border:0; background:transparent; padding:9px 15px; border-radius:var(--radius-sm); font:inherit; font-weight:700; font-size:var(--text-sm); color:var(--slate-500); cursor:pointer; transition:all var(--transition-fast); }
  .segmented button:hover:not(.on) { color:var(--slate-700); }
  .segmented button.on { background:var(--bg-surface); color:var(--honey-700); box-shadow:var(--shadow-xs); }
  .segmented.is-full { display:flex; } .segmented.is-full button { flex:1; text-align:center; white-space:nowrap; }
  [data-theme="dark"] .segmented { background:#11151b; }
  [data-theme="dark"] .segmented button.on { background:var(--slate-800); color:var(--honey-300); }

  /* context menu */
  .rel { position:relative; display:inline-block; }
  .ctx { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:226px; background:var(--bg-surface); border:1px solid var(--slate-200); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:5px; display:none; text-align:left; }
  .ctx.open { display:block; animation:mel-fade-in .14s var(--ease-enter) both; }
  .ctx button { display:flex; width:100%; align-items:center; gap:9px; border:0; background:transparent; padding:9px 10px; border-radius:var(--radius-sm); font:inherit; font-size:var(--text-sm); font-weight:600; color:var(--text-main); cursor:pointer; text-align:left; }
  .ctx button:hover { background:var(--slate-100); }
  .ctx button.is-danger { color:var(--color-error); }
  .ctx button.is-danger:hover { background:var(--color-error-bg); }
  .ctx button svg { width:15px; height:15px; flex-shrink:0; color:var(--slate-400); }
  .ctx button.is-danger svg { color:var(--color-error); }
  .ctx form { display:block; margin:0; }
  /* portalled to <body>, so make it solidly opaque (no card blur behind it) */
  [data-theme="glass"] .ctx { background-color:rgba(255,255,255,0.97); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border-color:var(--card-border); }
  .ctx .ctx-sep { height:1px; background:var(--slate-100); margin:5px 6px; }
  .ctx .ctx-lab { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-400); font-weight:700; padding:7px 10px 3px; }
  .btn-dots { padding:0; width:34px; height:34px; justify-content:center; }
  .btn-dots svg { width:18px; height:18px; }

  /* account / card tiles */
  .acct-card { position:relative; overflow:hidden; }
  .acct-top { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
  .acct-ico { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; }
  .acct-ico svg { width:20px; height:20px; }
  .acct-name { font-weight:800; font-size:var(--text-base); }

  /* credit card visual */
  .cc-visual { border-radius:var(--radius-lg); padding:20px 22px; color:#fff; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--shadow-md); position:relative; overflow:hidden; }
  .cc-visual::after { content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.08); }
  .cc-purple { background:linear-gradient(135deg,#8b3df5,#6a1fd0); }
  .cc-blue { background:linear-gradient(135deg,#3e7dc4,#27508c); }
  .cc-green { background:linear-gradient(135deg,#3e9b63,#1f6b40); }
  .cc-red { background:linear-gradient(135deg,#d6495b,#9c2535); }
  .cc-ink { background:linear-gradient(135deg,#3b4252,#1f242e); }
  .cc-tile { display:flex; flex-direction:column; gap:var(--spacing-md); }
  .cc-avail-lab { font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.8; font-weight:700; }
  .cc-swatch { width:30px; height:30px; border:0; cursor:pointer; border-radius:8px; }
  .cc-swatch.on { outline:2px solid var(--honey-500); outline-offset:2px; }
  .cc-top { display:flex; align-items:center; justify-content:space-between; }
  .cc-brand { font-weight:800; font-size:var(--text-lg); letter-spacing:-.01em; }
  .cc-chip-ic { width:34px; height:26px; border-radius:6px; background:linear-gradient(135deg,#f6d365,#fda085); opacity:.9; }
  .cc-meta { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:13px; opacity:.85; letter-spacing:.04em; }
  .cc-avail { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:800; font-size:23px; }

  /* limit / quota meter */
  .quota { display:flex; align-items:center; gap:10px; }

  /* feature list (planos) */
  .feat { display:flex; align-items:flex-start; gap:10px; padding:9px 0; font-size:var(--text-sm); }
  .feat svg { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
  .feat.ok svg { color:var(--color-success); }
  .feat.no { color:var(--text-muted); }
  .feat.no svg { color:var(--slate-300); }

  /* pro lock panel */
  .lockpanel { border:1px dashed var(--honey-300); background:var(--honey-50); border-radius:var(--radius-lg); padding:20px; }
  [data-theme="dark"] .lockpanel { background:color-mix(in srgb,var(--honey-600),#14181e 78%); border-color:var(--honey-700); }
  .lock-badge { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--honey-ink); background:var(--honey-400); padding:3px 9px; border-radius:var(--radius-pill); }

  /* category browser */
  .cat-list { display:flex; flex-direction:column; gap:2px; }
  .cat-item { display:flex; align-items:center; gap:11px; padding:10px 8px; border-radius:var(--radius-sm); }
  .cat-item:hover { background:var(--slate-50); }
  .cat-item .ci-name { font-weight:700; }
  .cat-item .ci-sub { color:var(--text-muted); font-size:13px; }
  .cat-swatches { display:flex; flex-wrap:wrap; gap:6px; }
  .cat-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--radius-pill); background:var(--slate-100); font-size:13px; font-weight:700; color:var(--slate-600); }

  /* auth */
  .auth-wrap { max-width:880px; margin:48px auto 0; }
  .auth-foot { text-align:center; margin-top:var(--spacing-md); font-size:var(--text-sm); color:var(--text-muted); }

  /* info note */
  .note { display:flex; gap:11px; align-items:flex-start; padding:12px 15px; border-radius:var(--radius-md); background:color-mix(in srgb,var(--color-info),white 90%); color:color-mix(in srgb,var(--color-info),black 26%); font-size:var(--text-sm); line-height:1.55; }
  [data-theme="dark"] .note { background:color-mix(in srgb,var(--color-info),#14181e 80%); color:color-mix(in srgb,var(--color-info),white 50%); }
  .note svg { width:17px; height:17px; flex-shrink:0; margin-top:2px; }
  .note.warn { background:var(--honey-50); color:var(--honey-800); }
  [data-theme="dark"] .note.warn { background:color-mix(in srgb,var(--honey-600),#14181e 76%); color:var(--honey-200); }

  /* screens */
  .screen { display:none; }
  .screen.active { display:block; animation:mel-fade-in .3s var(--ease-enter) both; }
  @media (prefers-reduced-motion:reduce){ .screen.active{ animation:none; } }

  .crumbs { margin-bottom:10px; }
  .stack { display:flex; flex-direction:column; gap:var(--spacing-md); }
  .form-card { max-width:600px; }
  .row-gap { display:flex; gap:var(--spacing-md); flex-wrap:wrap; }
  .row-gap > * { flex:1; min-width:140px; }
  .hide { display:none !important; }
  .field-mb { margin-bottom:var(--spacing-md); }
  .pager-btn svg { width:15px; height:15px; }
  .table .ta-r { text-align:right; }
  .table td.actions { text-align:right; white-space:nowrap; }
  .row-actions { display:inline-flex; gap:4px; align-items:center; justify-content:flex-end; }
  .row-actions > form { display:inline-flex; margin:0; }
  .help { font-size:13px; color:var(--text-muted); margin-top:5px; line-height:1.5; }
  .newtx-group { display:flex; gap:10px; flex-wrap:wrap; }
  .btn-success { background-color:var(--color-success); color:#fff; }
  .btn-success:hover:not(:disabled) { background-color:color-mix(in srgb,var(--color-success),black 10%); }
  .btn-expense { background-color:var(--color-error); color:#fff; }
  .btn-expense:hover:not(:disabled) { background-color:color-mix(in srgb,var(--color-error),black 10%); }
  /* custom confirm modal */
  .modal-backdrop { position:fixed; inset:0; z-index:200; background:rgba(29,35,44,.5); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:20px; }
  .modal-backdrop.open { display:flex; animation:mel-fade-in .16s var(--ease-enter) both; }
  .modal-backdrop .modal { background:var(--bg-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; overflow:hidden; animation:mel-pop .2s var(--ease-enter) both; }
  @keyframes mel-pop { from{ transform:translateY(10px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
  .modal-backdrop .modal-header { padding:var(--spacing-md) var(--spacing-md) 0; border:0; }
  .modal-backdrop .modal-footer { gap:10px; padding:0 var(--spacing-md) var(--spacing-md); border:0; }

/* ============ Settings / auth (non-shell) pages ============ */
.auth-page-shell { min-height:100vh; display:flex; flex-direction:column; }
.top { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:16px;
  padding:14px 24px; background:var(--bg-surface); border-bottom:1px solid var(--slate-200); }
.top nav { display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.top nav a { padding:8px 13px; border-radius:var(--radius-md); font-weight:700; font-size:var(--text-sm);
  color:var(--slate-600); text-decoration:none; }
.top nav a:hover { background:var(--slate-100); color:var(--slate-800); }
.top nav a.is-active { background:color-mix(in srgb,var(--color-primary),transparent 86%); color:var(--honey-700); }
.auth-main { flex:1; width:100%; max-width:960px; margin:0 auto; padding:var(--spacing-lg) var(--spacing-md); }
.auth-narrow { max-width:440px; margin:40px auto 0; }
.settings-grid { display:grid; grid-template-columns:240px 1fr; gap:var(--spacing-lg); align-items:start; }
@media (max-width:760px){ .settings-grid { grid-template-columns:1fr; } }
.set-menu { display:flex; flex-direction:column; gap:2px; padding:8px;
  background:var(--bg-surface); border:1px solid var(--slate-200);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.set-menu a { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:var(--radius-md);
  font-weight:700; color:var(--slate-600); text-decoration:none; font-size:var(--text-sm); }
.set-menu a:hover { background:var(--slate-100); color:var(--slate-800); }
.set-menu a.is-active { background:color-mix(in srgb,var(--color-primary),transparent 86%); color:var(--honey-700); }
.set-menu a.is-danger { color:var(--color-error); }
.set-menu a.is-danger.is-active { background:var(--color-error-bg); }

.top-logout { display:inline; margin:0; }
.top-logout button { background:none; border:0; padding:8px 13px; border-radius:var(--radius-md);
  font:inherit; font-weight:700; font-size:var(--text-sm); color:var(--slate-600); cursor:pointer; }
.top-logout button:hover { background:var(--slate-100); color:var(--slate-800); transform:none; box-shadow:none; }

.swatch-group { display:flex; gap:8px; flex-wrap:wrap; }
.swatch-group .sw { width:26px; height:26px; border:0; border-radius:50%; cursor:pointer; padding:0; }
.swatch-group .sw.on { outline:2px solid var(--honey-500); outline-offset:2px; }

/* ---- account icon picker (conta-form) ---- */
.icon-group { display:flex; gap:8px; flex-wrap:wrap; }
.icon-opt { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--card-border); border-radius:12px; background:transparent; color:var(--slate-500); cursor:pointer; padding:0; transition:border-color .15s, background .15s, color .15s; }
.icon-opt:hover { border-color:var(--honey-400); color:var(--honey-700); }
.icon-opt.on { border-color:var(--honey-500); background:var(--honey-50); color:var(--honey-700); }
.icon-opt svg { width:20px; height:20px; }

/* ---- onboarding: gentle staged entrance ---- */
@keyframes onbRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.onb-rise { animation:onbRise .5s cubic-bezier(.22,.61,.36,1) both; }
.onb-rise-2 { animation-delay:.09s; }
.onb-rise-3 { animation-delay:.18s; }
@media (prefers-reduced-motion: reduce) { .onb-rise { animation:none; } }