/* Clearleaf's compact, readable interface. Shared by the existing app pages. */
:root {
  --color-bg: #f5f7f6;
  --color-text-primary: #203630;
  --color-text-secondary: #51655e;
  --color-text-muted: #64756e;
  --color-border-light: #e1e8e4;
  --shadow-sm: 0 2px 8px rgba(28,43,42,.035);
  --radius-md: 14px;
}
[data-theme="dark"] {
  --color-bg: #131c19;
  --color-text-primary: #edf4f0;
  --color-text-secondary: #b8cbc1;
  --color-text-muted: #9ab2a5;
  --color-border-light: #34443c;
}
html, body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size:15px; }
h1 { font-size:28px; font-weight:700; letter-spacing:-.035em; }
h2, h3, h4 { letter-spacing:-.015em; }
.sidebar { width:220px; padding:22px 14px 16px; overflow-y:auto; }
.logo { padding-bottom:18px; margin-bottom:10px; }
.nav { flex-grow:0; }
.nav-group-label { font-size:11px; font-weight:700; color:var(--color-text-muted); letter-spacing:.07em; text-transform:uppercase; margin:18px 12px 6px; }
.nav-item { min-height:40px; height:40px; gap:10px; font-size:14px; }
.nav-item svg { width:18px; height:18px; stroke-width:1.8; }
.nav-item.active { font-weight:650; }
.sidebar-footer { padding-top:18px; }
.main { margin-left:220px; width:calc(100% - 220px); max-width:1300px; padding:28px clamp(20px,3vw,44px); }
.page-header { margin-bottom:20px; }
.page-description { color:var(--color-text-secondary); margin-top:7px; font-size:14px; font-weight:400; line-height:1.5; }
.card { padding:18px 20px; }
.card-title, .top-spending-title { font-size:17px; font-weight:650; margin-bottom:16px; }
.section, .two-col, .kpi-grid { margin-bottom:18px; }
.kpi-grid { gap:12px; }
.kpi-card { position:relative; padding:14px 16px 14px 62px; min-width:0; background:var(--color-surface)!important; border-color:var(--color-border-light); }
.kpi-card .label { padding-left:0; margin-bottom:4px; font-size:11px; letter-spacing:.04em; font-weight:700; }
.kpi-card .label::before { display:none; }
.kpi-card .value { font-size:25px; line-height:1.25; overflow-wrap:anywhere; }
.kpi-card .sub { font-size:12px; margin-top:3px; color:var(--color-text-secondary); }
.summary-icon { position:absolute; left:14px; top:17px; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--color-primary); background:var(--color-primary-light); }
.summary-icon svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.8; }
.kpi-card.expenses .summary-icon { color:var(--color-expenses); background:var(--color-expenses-light); }
.kpi-card.biggest .summary-icon { color:var(--color-bills); background:var(--color-bills-light); }
.kpi-card .health-mini { display:none; }
.safe-hero { background:linear-gradient(120deg,#3f7567,#2e5c52); padding:24px 28px; margin-bottom:18px; box-shadow:var(--shadow-sm); gap:18px; }
.safe-hero-value { font-size:48px; letter-spacing:-.035em; }
.safe-hero-label { font-size:11px; letter-spacing:.08em; }
.safe-hero-sub, .safe-hero-info-item { color:#e5f0eb; font-size:14px; }
.safe-hero-breakdown-btn { color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.1); }
.top-spending-list { gap:0; }
.top-spending-row { padding:12px 0; border-bottom:1px solid var(--color-border-light); gap:14px; }
.top-spending-row:last-child { border-bottom:0; }
.top-spending-meta, .top-spending-percent { color:var(--color-text-secondary); }
.filter-bar { gap:12px; border:1px solid var(--color-border-light); box-shadow:none; }
.input, select.input, .filter-bar input, .filter-bar select { min-height:42px; }
.btn-primary, .btn-secondary { min-height:40px; }
.settings-section { padding:20px; margin-bottom:18px; }
.fund-card, .debt-card { padding:20px; }
button:focus-visible, a:focus-visible { outline:3px solid var(--color-primary); outline-offset:3px; }
@media(min-width:1500px) { .main { margin-left:calc(220px + (100vw - 1500px)/2); } }
@media(max-width:1100px) and (min-width:769px) { .kpi-card { padding-left:52px; padding-right:10px; }.summary-icon { left:10px; width:30px; height:30px; }.kpi-card .value { font-size:22px; } }
@media(max-width:768px) {
  .main { margin-left:0; width:100%; max-width:none; padding:20px 16px 100px; }
  h1, .month-nav h1 { font-size:24px; }
  .page-header { gap:12px; margin-bottom:16px; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .kpi-card { padding:12px; }
  .summary-icon { position:static; width:28px; height:28px; margin-bottom:8px; border-radius:8px; }
  .summary-icon svg { width:17px; height:17px; }
  .kpi-card .value { font-size:23px; }
  .kpi-card .label { font-size:11px; }
  .safe-hero { padding:22px; gap:16px; }
  .safe-hero-value { font-size:40px; }
  .card { padding:16px; }
  input, select, textarea { font-size:16px; }
  .icon-btn, .bottom-nav button { min-width:44px; min-height:44px; }
  .filter-bar { grid-template-columns:1fr; }
  .top-spending-row { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
.log-filters { grid-template-columns:minmax(180px,2fr) minmax(160px,1fr) minmax(150px,1fr) auto; align-items:center; }
.log-filters input, .log-filters select { width:100%; min-width:0; }
.log-filter-details { grid-column:1 / -2; }
.log-filter-details summary { cursor:pointer; color:var(--color-primary); padding:10px 0; font-size:14px; font-weight:600; }
.log-filter-extra { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:8px 0; }
.nav-group-label { margin-top:12px; }
@media(max-width:768px) {
  .log-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .log-filters > input:first-child { grid-column:1 / -1; }
  .log-filters > .btn-primary { grid-column:1 / -1; }
  .log-filter-details { grid-column:1 / -1; }
  .bottom-nav button span { font-size:10px; }
}

/* Financial Guide: compact, actionable comparisons. */
.financial-guide-page { max-width: 1120px; margin: 0 auto; }
.guide-next-step { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px; margin-bottom:18px; border:1px solid var(--color-primary-muted); border-radius:var(--radius-md); background:var(--color-primary-light); }
.guide-next-step h2 { font-size:21px; margin:6px 0 8px; }
.guide-next-step p { max-width:650px; margin:0; font-size:15px; line-height:1.5; }
.guide-next-step button { flex-shrink:0; }
.financial-guide-page .guide-income-card { padding:16px 20px; margin-bottom:12px; }
.guide-overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; align-items:start; }
.financial-guide-page .guide-metric-card { padding:20px; min-width:0; }
.financial-guide-page .guide-card-head { margin-bottom:12px; flex-wrap:wrap; }
.financial-guide-page h2 { font-size:18px; }
.financial-guide-page .guide-number { font-size:28px; margin-bottom:6px; }
.financial-guide-page .guide-number small { font-size:14px; font-weight:400; }
.financial-guide-page p { font-size:14px; line-height:1.55; }
.financial-guide-page .btn-secondary { margin-top:14px; min-height:42px; }
.guide-comparison { margin:18px 0; }
.guide-comparison-track { position:relative; height:12px; border-radius:8px; background:var(--color-surface-2); }
.guide-comparison-track > div { height:100%; border-radius:8px; }
.guide-comparison-track .met { background:var(--color-primary); }
.guide-comparison-track .progress { background:#8876ae; }
.guide-comparison-track .over { background:var(--color-warning, #ad7b40); }
.guide-comparison-track i { position:absolute; top:-4px; height:20px; border-left:2px solid var(--color-text-primary); }
.guide-comparison > div:last-child { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:10px; font-size:13px; color:var(--color-text-secondary); }
.guide-details { border-top:1px solid var(--color-border-light); padding:12px 0; font-size:14px; }
.guide-details summary { cursor:pointer; color:var(--color-primary); font-weight:600; padding:4px 0; }
.guide-details summary:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
.guide-counted { list-style:none; margin:10px 0 0; padding:0; }
.guide-counted li, .guide-cost-row > div:first-child { display:flex; justify-content:space-between; align-items:start; gap:14px; padding:8px 0; }
.guide-counted small, .guide-essential-choice small { display:block; color:var(--color-text-secondary); font-size:12px; }
.guide-counted strong { white-space:nowrap; }
.guide-cost-row { border-top:1px solid var(--color-border-light); margin-top:12px; padding-top:8px; }
.guide-cost-row .guide-comparison { margin:8px 0 12px; }
.guide-essential-choice { display:flex; align-items:center; gap:10px; padding:8px 0; min-height:44px; }
.guide-essential-choice input { width:18px; height:18px; accent-color:var(--color-primary); }
.guide-target-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.guide-target-inputs label { display:grid; gap:6px; font-size:13px; }
@media(max-width:760px) {
  .guide-overview-grid { grid-template-columns:1fr; }
  .guide-next-step { display:block; padding:18px; }
  .financial-guide-page .guide-metric-card { padding:18px; }
  .guide-target-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .financial-guide-page .guide-income-card { flex-wrap:wrap; }
}

/* Keep all Help topics visible without a hidden horizontal menu. */
.help-tab-strip { flex-wrap:wrap; overflow:visible; gap:4px; }
.help-tab { min-height:44px; padding:10px 14px; }
.help-content p, .help-content li, .faq-answer { font-size:15px; line-height:1.65; }
@media(max-width:600px) {
  .help-tab-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .help-tab { white-space:normal; text-align:left; }
}

/* Bills & income: compact groups, clear amounts, and accessible actions. */
.bills-month { background:var(--color-surface); border:1px solid var(--color-border-light); padding:20px; box-shadow:var(--shadow-sm); }
.bills-month h3 { color:var(--color-text-primary); font-size:18px; }
.bills-month .upcoming-row { padding:12px 0; gap:12px; }
.bills-month .check { width:32px; height:32px; background:var(--color-surface); }
.bills-month .info { min-width:0; overflow-wrap:anywhere; }
.bill-row-amount { font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bill-status { font-size:12px; color:var(--color-text-secondary); min-width:60px; text-align:right; }
.bill-status.done { color:var(--color-primary); }
.bills-month .btn-link { min-height:40px; }
.saved-schedules-heading { margin:28px 0 16px; }
.saved-schedules-heading h2 { font-size:20px; margin-bottom:6px; }
.saved-schedules-heading p { font-size:14px; color:var(--color-text-secondary); }
.recurring-group { background:var(--color-surface); border:1px solid var(--color-border-light); border-radius:var(--radius-md); margin-bottom:16px; overflow:hidden; }
.recurring-group h3 { display:flex; align-items:center; gap:10px; margin:0; padding:14px 18px; font-size:15px; font-weight:650; text-transform:none; letter-spacing:0; color:var(--color-text-primary); border-bottom:1px solid var(--color-border-light); }
.rec-group-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--color-primary-light); color:var(--color-primary); }
.rec-group-icon svg { width:17px; height:17px; }
.rec-count { margin-left:auto; color:var(--color-text-secondary); font-size:12px; font-weight:400; }
.recurring-list { gap:0; }
.recurring-item { border:0; border-bottom:1px solid var(--color-border-light); border-radius:0; padding:12px 18px; gap:16px; }
.recurring-item:last-child { border-bottom:0; }
.rec-name { font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.rec-meta { flex-wrap:wrap; gap:5px 12px; font-size:13px; margin-top:5px; }
.rec-meta > span:empty { display:none; }
.freq-pill { padding:0; background:none; font-size:13px; }
.rec-amount { font-size:16px; white-space:nowrap; }
.rec-actions .icon-btn { min-width:40px; min-height:40px; }
@media(max-width:600px) {
 .bills-month { padding:16px; }
 .bills-month .upcoming-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:8px 10px; }
 .bill-status { grid-column:2; text-align:left; }
 .bills-month .btn-link { grid-column:3; }
 .recurring-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:12px 16px; }
 .rec-actions { grid-column:2; justify-content:flex-end; }
 .rec-actions .icon-btn { min-width:44px; min-height:44px; }
 .rec-meta { font-size:12px; }
}

/* Safe to Spend explanation: aligned edges and compact calculation rows. */
.modal.safe-explainer-modal { max-width:520px; border-radius:18px; height:auto; max-height:calc(100dvh - 32px); }
.safe-explainer { padding:24px; }
.safe-explainer-head { display:flex; align-items:flex-start; gap:12px; justify-content:space-between; }
.safe-explainer-head h2 { font-size:22px; line-height:1.25; margin:4px 0 0; }
.safe-explainer-head .icon-btn { flex-shrink:0; min-width:36px; min-height:36px; font-size:24px; }
.safe-explainer-intro { font-size:14px; line-height:1.55; color:var(--color-text-secondary); margin:12px 0 16px; }
.safe-explainer .safe-breakdown { gap:0; padding:0; margin-bottom:16px; }
.safe-explainer .safe-breakdown-row { padding:13px 0; gap:16px; background:none; border-radius:0; border-bottom:1px solid var(--color-border-light); }
.safe-explainer .blabel { font-size:14px; font-weight:400; line-height:1.4; }
.safe-explainer .bval { font-size:15px; white-space:nowrap; }
.safe-explainer .safe-breakdown-total { padding:16px; gap:12px; border:1px solid var(--color-primary-muted); border-radius:12px; }
.safe-explainer .tlabel { font-size:14px; }
.safe-explainer .tval { font-size:24px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.safe-explainer .safe-breakdown-note { padding:0; margin-top:14px; font-size:13px; line-height:1.55; }
.safe-explainer-done { width:100%; margin-top:20px; min-height:44px; }
@media(max-width:768px) {
 .modal.safe-explainer-modal { width:calc(100% - 24px); margin:12px auto; }
 .safe-explainer { padding:20px; }
 .safe-explainer-head h2 { font-size:20px; }
 .safe-explainer-head .icon-btn { min-width:44px; min-height:44px; }
 .safe-explainer .tval { font-size:22px; }
}

.undo-toast { gap:16px; pointer-events:auto; }
.undo-toast button { min-height:44px; padding:8px 14px; border:0; border-radius:8px; background:var(--color-primary-light); color:var(--color-primary); font-weight:700; cursor:pointer; }
.recovery-list { max-width:760px; }
.recovery-list h2 { font-size:19px; margin:0 0 10px; }
.recovery-list p { font-size:14px; color:var(--color-text-secondary); line-height:1.5; margin:10px 0; }
.recovery-list summary { cursor:pointer; font-weight:600; min-height:32px; }
.recovery-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--color-border-light); }
.recovery-row > div { min-width:0; overflow-wrap:anywhere; }
.recovery-row strong { font-size:14px; }
.recovery-row small { display:block; margin-top:4px; font-size:12px; color:var(--color-text-secondary); }
.recovery-row button { flex-shrink:0; min-height:44px; }

/* Small screens: let tables shrink and reserve space for the add-entry bar. */
.two-col > *, .card, .section { min-width:0; }
[role="button"]:focus-visible { outline:3px solid var(--color-primary); outline-offset:3px; }
@media(max-width:768px) {
 .two-col { grid-template-columns:minmax(0,1fr); }
 .budget-table { width:100%; table-layout:fixed; }
 .budget-table th,.budget-table td { padding:10px 5px; font-size:12px; overflow-wrap:anywhere; white-space:normal; }
 .budget-table th:first-child,.budget-table td:first-child { width:30%; }
 .fab { display:none; }
 .bottom-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding-top:0; }
 .bottom-nav .mobile-add-entry { grid-column:1/-1; flex-direction:row; border-bottom:1px solid var(--color-border-light); min-height:44px; color:var(--color-primary); background:var(--color-primary-light); font-size:14px; font-weight:650; }
 .main { padding-bottom:160px; }
 .clearleaf-sync-status { bottom:124px !important; }
 .toast-container { bottom:130px; }
}

/* Part payments keep their remaining amount on a separate, readable line. */
.bills-month .upcoming-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto auto; }
.payment-remainder { grid-column:2 / -1; font-size:13px; color:var(--color-text-secondary); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media(max-width:640px){.bills-month .upcoming-row{grid-template-columns:32px minmax(0,1fr) auto}.payment-remainder{grid-column:2 / -1}}

/* Longer Help explanations keep a comfortable reading width. */
.help-content { max-width:760px; }
.help-content h3 { margin-top:28px; }
.help-content blockquote { margin:20px 0; padding:16px 20px; border-left:3px solid var(--color-primary); border-radius:8px; background:var(--color-primary-light); }
.help-content blockquote p:last-child { margin-bottom:0; }