/* ============ Cruzz — app-specific patterns on top of Mel ============ */
  /* the brand lockup + its honey live in brand.css (shared with the admin) */

  /* 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; }

  /* chart caption row (the plots themselves are Chart.js canvases) */
  .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; justify-content:center; gap:10px; flex-wrap:wrap; margin:var(--spacing-md) 0 0; padding:var(--spacing-md) 0 0; background:transparent; border:0; border-top:1px solid var(--slate-200); box-shadow:none; }
  [data-theme="dark"] .period-summary { border-top-color:var(--slate-800); }
  .period-summary .ps-head { font-weight:800; font-size:13px; color:var(--slate-500); display:inline-flex; align-items:center; gap:7px; margin-right:2px; }
  .period-summary .ps-head svg { width:15px; height:15px; color:var(--slate-400); }
  .period-summary .ps-pill { display:inline-flex; align-items:baseline; gap:8px; padding:7px 13px; border-radius:var(--radius-pill); }
  .period-summary .ps-pill .k { font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:800; }
  .period-summary .ps-pill .v { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:800; font-size:15px; }
  .period-summary .ps-in  { background:color-mix(in srgb,var(--color-success),white 88%); }
  .period-summary .ps-in .k { color:color-mix(in srgb,var(--color-success),black 4%); } .period-summary .ps-in .v { color:color-mix(in srgb,var(--color-success),black 12%); }
  .period-summary .ps-out { background:color-mix(in srgb,var(--color-error),white 90%); }
  .period-summary .ps-out .k { color:color-mix(in srgb,var(--color-error),black 2%); } .period-summary .ps-out .v { color:color-mix(in srgb,var(--color-error),black 8%); }
  .period-summary .ps-net { background:var(--slate-100); }
  .period-summary .ps-net .k { color:var(--slate-500); } .period-summary .ps-net .v { color:var(--text-main); }
  .period-summary .ps-foot { flex-basis:100%; text-align:center; font-size:12px; color:var(--slate-400); font-weight:600; }
  [data-theme="dark"] .period-summary .ps-net { background:var(--slate-800); }
  .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); }
  /* extra card finishes — each keeps a dark end so the white face text holds up */
  .cc-teal { background:linear-gradient(135deg,#14b8a6,#0f766e); }
  .cc-cyan { background:linear-gradient(135deg,#0891b2,#075985); }
  .cc-navy { background:linear-gradient(135deg,#1e40af,#14235e); }
  .cc-indigo { background:linear-gradient(135deg,#4f46e5,#322b9c); }
  .cc-pink { background:linear-gradient(135deg,#ec4899,#a21c6b); }
  .cc-wine { background:linear-gradient(135deg,#9f1239,#611022); }
  .cc-orange { background:linear-gradient(135deg,#f97316,#c2410c); }
  .cc-amber { background:linear-gradient(135deg,#f59e0b,#b45309); }
  .cc-lime { background:linear-gradient(135deg,#65a30d,#3f6212); }
  .cc-graphite { background:linear-gradient(135deg,#64748b,#334155); }
  .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-text { color:var(--honey-800); }
  [data-theme="dark"] .lock-text { color:var(--honey-200); }
  .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; } }

/* The glass-theme field treatment used to live here; it moved to
   glass-fields.css, which the calculator pages load too. */

/* ---- transactions list: keep every day-card's columns in lockstep ----
   Each day renders its own <table>, so the amount + actions columns get pinned
   to a fixed width; the description column absorbs the slack and the values
   line up across every card no matter how long the description or tags are. */
#transacoes .table td.ta-r { width:168px; }
#transacoes .table td.actions { width:112px; }

/* Day summary lives inside its card, as a header band above the rows. */
#transacoes .data-card { margin-bottom:var(--spacing-md); }
#transacoes .data-card .day-head { margin:0; padding:0.75rem 1.25rem; border-bottom:1px solid var(--slate-100); }
[data-theme="glass"] #transacoes .data-card .day-head { border-bottom-color:rgba(255,255,255,0.45); }

/* Filter bar: a lighter frosted glass than the transaction cards (those use
   --bg-surface at .72) so it reads as a distinct, airier panel. Trim the
   padding — with the selects collapsed into "Filtros" it needs far less room. */
[data-theme="glass"] .filter-bar { background-color:rgba(255,255,255,.45); }
#transacoes .filter-bar { padding:var(--spacing-md); }

/* Description cell: name on top, category + tags stacked below it. */
#transacoes .tx-desc { align-items:flex-start; }
#transacoes .tx-desc .catdot { margin-top:6px; }
.tx-desc-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
#transacoes .table td.ta-r, #transacoes .table td.actions { vertical-align:middle; }

/* Category badge carries its own category colour (set inline as --cat),
   instead of the flat black-and-white neutral badge. */
.tag-cat { background:color-mix(in srgb, var(--cat, var(--slate-300)), white 84%); color:color-mix(in srgb, var(--cat, var(--slate-300)), black 34%); }
[data-theme="dark"] .tag-cat { background:color-mix(in srgb, var(--cat, var(--slate-300)), transparent 80%); color:color-mix(in srgb, var(--cat, var(--slate-300)), white 62%); }

/* New/edit transaction form: spotlight the two fields that matter most
   (value, then description) with a near-white band. It bleeds to the card's
   edges via negative margins that cancel the card padding, so the inputs
   inside stay left-aligned with every field below the band. */
.tx-primary {
  background:var(--slate-50);
  border-top:1px solid var(--slate-200);
  border-bottom:1px solid var(--slate-200);
  margin:0 calc(var(--spacing-lg) * -1) var(--spacing-lg);
  padding:var(--spacing-md) var(--spacing-lg);
}
[data-theme="glass"] .tx-primary { background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.65); }
[data-theme="dark"] .tx-primary { background:var(--slate-800); border-color:var(--slate-700); }
.tx-primary .field { margin-bottom:var(--spacing-md); }
.tx-primary .field:last-child { margin-bottom:0; }
.tx-primary #amount { font-size:var(--text-lg); font-weight:700; }

/* Month stepper and the "Filtros" toggle share one line — the row now leads
   the filter bar, so it drops the divider that separated it from the fields.
   Three columns keep the stepper optically centred (the empty first column
   balances the toggle) instead of letting the toggle shove it off-centre. */
#transacoes .month-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--spacing-md); margin-top:0; padding-top:0; border-top:0; }
#transacoes .month-row .monthnav { grid-column:2; justify-content:center; }
#transacoes .month-row .adv-toggle { grid-column:3; justify-self:end; margin-top:0; }
#transacoes .month-row .month-override { grid-column:1 / -1; justify-content:center; }
@media (max-width:760px){
  #transacoes .month-row { grid-template-columns:1fr; }
  #transacoes .month-row .monthnav,
  #transacoes .month-row .adv-toggle { grid-column:1; justify-self:center; }
}
/* The collapsible fields sit below that row now, so the divider moves here. */
#transacoes .adv-fields { margin-top:var(--spacing-md); padding-top:var(--spacing-md); border-top:1px solid var(--slate-200); }
[data-theme="dark"] #transacoes .adv-fields { border-top-color:var(--slate-800); }
/* Free-text search holds the longest value — give it two columns. */
.filter-grid .field-wide { grid-column:span 2; }
@media (max-width:760px){ .filter-grid .field-wide { grid-column:auto; } }

/* Description line: name and its parcela badge share the first row; the
   remaining badges wrap on the row below, flush with the category pill. */
.txd-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
#transacoes .tx-tags { margin:0; padding:0; }

/* ---- transaction-type tabs: each type carries its own soft tint ----
   Saída/entrada/estorno/transferência read at a glance instead of four
   identical gray chips; the selected one deepens rather than changing hue. */
.segmented button[data-tipo] { background:var(--bg-surface); }
.segmented button[data-tipo="saida"] { background:color-mix(in srgb,var(--color-error),white 90%); color:color-mix(in srgb,var(--color-error),black 18%); }
.segmented button[data-tipo="entrada"] { background:color-mix(in srgb,var(--color-success),white 90%); color:color-mix(in srgb,var(--color-success),black 22%); }
.segmented button[data-tipo="estorno"] { background:color-mix(in srgb,var(--color-info),white 90%); color:color-mix(in srgb,var(--color-info),black 20%); }
.segmented button[data-tipo="transf"] { background:var(--slate-100); color:var(--slate-600); }
.segmented button[data-tipo].on { box-shadow:inset 0 0 0 2px currentColor, var(--shadow-xs); font-weight:800; }
.segmented button[data-tipo="saida"].on { background:color-mix(in srgb,var(--color-error),white 78%); }
.segmented button[data-tipo="entrada"].on { background:color-mix(in srgb,var(--color-success),white 78%); }
.segmented button[data-tipo="estorno"].on { background:color-mix(in srgb,var(--color-info),white 78%); }
.segmented button[data-tipo="transf"].on { background:var(--slate-200); color:var(--slate-700); }
[data-theme="dark"] .segmented button[data-tipo] { background:transparent; }
[data-theme="dark"] .segmented button[data-tipo="saida"] { background:color-mix(in srgb,var(--color-error),transparent 82%); color:color-mix(in srgb,var(--color-error),white 45%); }
[data-theme="dark"] .segmented button[data-tipo="entrada"] { background:color-mix(in srgb,var(--color-success),transparent 82%); color:color-mix(in srgb,var(--color-success),white 45%); }
[data-theme="dark"] .segmented button[data-tipo="estorno"] { background:color-mix(in srgb,var(--color-info),transparent 82%); color:color-mix(in srgb,var(--color-info),white 45%); }

/* ---- rail tooltips must clear the page content ----
   The rail is position:sticky, which makes it a stacking context; with z-index
   auto it paints before .app-content, so its hover tooltips slid underneath
   cards. Lifting the rail lifts the tooltips with it (modals/toasts stay above). */
.mel-rail { z-index:40; }

/* ---- Relatórios: real charts (Chart.js) ---- */
.chart-donut { position:relative; width:200px; height:200px; flex-shrink:0; }
/* flex column, not grid: two grid rows would spread the value and its label to
   opposite ends of the box instead of stacking them in the hole */
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.donut-center .dh-val { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:800; font-size:15px; letter-spacing:-.02em; }
.donut-center .dh-lab { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-400); font-weight:700; margin-top:2px; }
/* the height covers plot + x-axis band + legend, so the card never grows an
   inner scrollbar that clips the axis labels */
.chart-box { position:relative; height:250px; }
.cat-legend .cl-val { margin-left:auto; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; }
.cat-legend .cl-pct { margin-left:10px; min-width:48px; text-align:right; }
/* table-view twin: every charted value is also readable as text */
/* .chart-table lives in mel/mel-app.css — the app and the admin share it */
/* Reports: the month stepper leads its filter card too — drop the divider and
   top margin that assumed fields sat above it, otherwise the card opens with
   an empty band. */
#relatorios .month-row { margin-top:0; padding-top:0; border-top:0; }

/* ---- dashboard: the chart card matches its neighbour's height ----
   .split pins items to the top (align-items:start), so the two cards ended up
   at different heights. Stretch them to the row and let the canvas grow into
   the leftover space instead of leaving a gap under the plot. */
#dashboard .split { align-items:stretch; }
#dashboard .split > .card { display:flex; flex-direction:column; }
#dashboard .split > .card > .card-body { flex:1; display:flex; flex-direction:column; }
#dashboard .split .chart-box { flex:1; min-height:220px; }

/* ---- Configurações → Aparência: theme picker ---- */
.theme-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:var(--spacing-md); }
.theme-opt { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px; cursor:pointer;
  background:var(--bg-surface); border:2px solid var(--slate-200); border-radius:var(--radius-lg);
  font:inherit; text-align:left; transition:border-color var(--transition-fast), transform var(--transition-fast); }
.theme-opt:hover { border-color:var(--slate-400); transform:translateY(-1px); }
.theme-opt.on { border-color:var(--honey-500); box-shadow:0 0 0 3px color-mix(in srgb,var(--honey-500),transparent 82%); }
.theme-opt .theme-name { font-weight:800; font-size:var(--text-sm); }
.theme-opt .theme-sub { font-size:12px; color:var(--text-muted); font-weight:600; }
/* a 3-swatch strip standing in for each theme's surface + accent */
.theme-swatch { display:flex; gap:4px; width:100%; height:42px; margin-bottom:6px; border-radius:var(--radius-md); padding:6px; overflow:hidden; }
.theme-swatch i { flex:1; border-radius:4px; }
.tsw-glass { background:linear-gradient(135deg,#e8eef7,#f4e9d8); }
.tsw-glass i:nth-child(1) { background:rgba(255,255,255,.85); }
.tsw-glass i:nth-child(2) { background:#f59e0b; }
.tsw-glass i:nth-child(3) { background:rgba(255,255,255,.55); }
.tsw-glass-dark { background:linear-gradient(135deg,#141d29,#241a12); }
.tsw-glass-dark i:nth-child(1) { background:rgba(255,255,255,.16); }
.tsw-glass-dark i:nth-child(2) { background:#f59e0b; }
.tsw-glass-dark i:nth-child(3) { background:rgba(255,255,255,.08); }
[data-theme="dark"] .theme-opt { background:var(--slate-800); border-color:var(--slate-700); }

/* ---- dark: soften the hairlines that come from the light slate ramp ----
   --slate-100/200 are light inks; the dark theme keeps the ramp as-is, so any
   border still pointing at them draws a near-white line on the dark glass.
   These are the ones that read as hard edges; they go to a faint specular
   white instead (matching --d-line). */
[data-theme="dark"] .kpi-card { border-color: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .lrow { border-top-color: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] #transacoes .data-card .day-head { border-bottom-color: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .ctx { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .set-menu { border-color: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .top { border-bottom-color: rgba(255, 255, 255, 0.08); }
/* pricing cards stretch to the tallest one, but the framework leaves the footer
   sitting right under the feature list — so each CTA landed at whatever height
   its own card's content ended, and the row of buttons never lined up. */
.pricing-footer { margin-top: auto; }

/* .btn-loading hides its label behind the spinner with color:transparent, but
   mel-refinements re-colours .btn-primary after elements.css declared it, at
   the same specificity — so the label showed through the spinner. */
.btn.btn-loading { color: transparent; }

/* buttons: .btn carries a slate-200 border from mel-refinements, and the two
   solid action buttons (nova entrada / nova despesa) aren't in the list that
   clears it — so they wore a bright ring over their own fill. */
[data-theme="dark"] .btn { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-expense { border-color: transparent; }

/* ---- dark: tinted chips and summary pills ----
   Both are built as "colour mixed into white", which is right on the light
   glass and a glaring light block on the dark one. In dark the hue is mixed
   into transparency instead, so the chip reads as a tinted pane of the glass,
   and the ink lightens to stay legible on it. */
[data-theme="dark"] .chip-success { background:color-mix(in srgb,var(--color-success),transparent 82%); color:color-mix(in srgb,var(--color-success),white 42%); }
[data-theme="dark"] .chip-error   { background:color-mix(in srgb,var(--color-error),transparent 82%);   color:color-mix(in srgb,var(--color-error),white 40%); }
[data-theme="dark"] .chip-info    { background:color-mix(in srgb,var(--color-info),transparent 82%);    color:color-mix(in srgb,var(--color-info),white 45%); }
[data-theme="dark"] .chip-honey   { background:color-mix(in srgb,var(--honey-500),transparent 82%);     color:var(--honey-200); }
[data-theme="dark"] .chip-slate   { background:rgba(255,255,255,0.08); color:#a9b6c6; }

[data-theme="dark"] .period-summary .ps-in  { background:color-mix(in srgb,var(--color-success),transparent 84%); }
[data-theme="dark"] .period-summary .ps-in .k,
[data-theme="dark"] .period-summary .ps-in .v { color:color-mix(in srgb,var(--color-success),white 46%); }
[data-theme="dark"] .period-summary .ps-out { background:color-mix(in srgb,var(--color-error),transparent 84%); }
[data-theme="dark"] .period-summary .ps-out .k,
[data-theme="dark"] .period-summary .ps-out .v { color:color-mix(in srgb,var(--color-error),white 44%); }
[data-theme="dark"] .period-summary .ps-net { background:rgba(255,255,255,0.08); }
[data-theme="dark"] .period-summary .ps-net .k { color:#a9b6c6; }

/* Reports: the forecast window lives inside the Saldo projetado card, right
   above its chart, so what it controls is never in question */
.fc-range { margin:0 0 var(--spacing-md); padding:var(--spacing-md); border:1px solid var(--slate-200); border-radius:var(--radius-md); background:var(--slate-50); }
[data-theme="dark"] .fc-range { border-color:rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); }

/* the metas month bar carries a single row, so it doesn't need card padding */
#metas .filter-bar { padding-top:var(--spacing-sm); padding-bottom:var(--spacing-sm); }

/* ---------- Metas / orçamentos ----------
   One card per budget. The state (ok / alerta / estourada) drives the bar and
   the badge, so the card reads at a glance without parsing the numbers. */
.meta-card .card-body { display:flex; flex-direction:column; gap:6px; }
.meta-top { display:flex; align-items:center; gap:11px; margin-bottom:6px; }
.meta-top .meta-scope { font-weight:800; font-size:var(--text-base); letter-spacing:-.01em; overflow-wrap:anywhere; }
.meta-top .meta-state { margin-left:auto; flex-shrink:0; }
.meta-figures { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.meta-figures .kpi-value { font-size:26px; }
.meta-bar { margin-top:4px; }
/* expense ceilings: green while there is room, honey near it, red past it */
.meta-card.is-ok .progress-bar { background:var(--color-success); }
.meta-card.is-alerta .progress-bar { background:var(--honey-500); }
.meta-card.is-estourada .progress-bar { background:var(--color-error); }
.meta-card.is-estourada { border-color:color-mix(in srgb,var(--color-error),transparent 62%); }
[data-theme="dark"] .meta-card.is-estourada { border-color:color-mix(in srgb,var(--color-error),transparent 55%); }
/* income goals fill up instead: neutral, then honey, then green once reached —
   being short of an income target mid-month is normal, not an error */
.meta-card.is-abaixo .progress-bar { background:var(--slate-400); }
.meta-card.is-quase .progress-bar { background:var(--honey-500); }
.meta-card.is-atingida .progress-bar { background:var(--color-success); }
.meta-card.is-atingida { border-color:color-mix(in srgb,var(--color-success),transparent 62%); }
[data-theme="dark"] .meta-card.is-atingida { border-color:color-mix(in srgb,var(--color-success),transparent 55%); }

/* the per-kind headline strip */
.meta-head { margin-bottom:var(--spacing-md); }
.meta-head .card-body { display:flex; justify-content:space-between; align-items:center; gap:var(--spacing-md); flex-wrap:wrap; }
.meta-head-tags { display:flex; gap:8px; flex-wrap:wrap; }

/* the advisory warning on the transaction form */
.meta-alert { display:flex; gap:11px; align-items:flex-start; margin-top:var(--spacing-md); }
.meta-alert .ma-ico { flex-shrink:0; margin-top:1px; display:inline-flex; }
.meta-alert .ma-ico svg { width:18px; height:18px; }
.meta-alert .ma-line { font-size:var(--text-sm); line-height:1.6; }
.meta-alert .ma-line + .ma-line { margin-top:3px; }

/* ---------- Central de ajuda: accordion of questions ----------
   These were inline styles, which left the classless `summary` rules to supply
   a header background and a caret with no room — a square filled slab that the
   dark theme made obvious. A FAQ reads better as plain rows, so the header is
   transparent and only the separators and the caret carry the structure. */
.faq-item { border-top:1px solid var(--slate-200); }
.faq-item:first-of-type { border-top:0; }
.faq-item > summary {
  display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-sm);
  padding:13px 2px;
  background:transparent;
  border-radius:var(--radius-md);
  cursor:pointer;
  font-weight:700;
  color:var(--text-main);
  list-style:none;
  transition:color var(--transition-fast);
}
.faq-item > summary:hover { color:var(--honey-700); }
.faq-item[open] > summary { color:var(--honey-700); }
.faq-item > summary:focus-visible { outline:var(--outline-focus); outline-offset:2px; }
.faq-answer { padding:0 2px 14px; color:var(--text-muted); font-size:var(--text-sm); line-height:1.65; }
.faq-answer p { margin:0 0 8px; }
.faq-answer p:last-child { margin-bottom:0; }

[data-theme="dark"] .faq-item { border-top-color:rgba(255,255,255,0.08); }
[data-theme="dark"] .faq-item > summary:hover,
[data-theme="dark"] .faq-item[open] > summary { color:var(--honey-300); }