:root {
  --cream2:      #F5EFE6;
  --card:        #FFFFFF;
  --paper:       #FDF8F2;
  --ink:         #2C2C2A;
  --ink2:        #4A4845;
  --muted:       #A0906E;
  --hairline:    #EDE8DF;
  --pine:        #3A7D44;
  --pine-press:  #2E6337;
  --fresh:       #3A7D44;
  --fresh-tint:  #E8F5E9;
  --coral:       #C0392B;
  --coral-tint:  #FDECEA;
  --warn:        #C47D11;
  --warn-tint:   #FEF3C7;
  --sage:        #A8D5A2;
  --amber-tint:  #FFF8E8;
  --sage-tint:   #F0F9EE;
  --blue:        #3A7D44;
  --blue-dark:   #2E6337;
  --blue-press:  #235129;
  --blue-tint:   #E8F5E9;
  --blue-mid:    #D4EED6;
  --success:     #3A7D44;
  --success-tint:#E8F5E9;
  --money: ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --ui: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius: 18px;
  --shadow: 0 2px 8px rgba(44,44,42,.06), 0 1px 2px rgba(44,44,42,.04);
}

*{box-sizing:border-box;}

html,body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:560px; margin:0 auto;
  padding:calc(18px + env(safe-area-inset-top)) 16px 100px;
}

/* ── Header ──────────────────────────── */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);
  margin:-calc(18px + env(safe-area-inset-top)) -16px 18px;
  padding:calc(14px + env(safe-area-inset-top)) 18px 14px;
}
.brand{font-weight:800;letter-spacing:-.03em;font-size:22px;color:#fff;}
.brand span{opacity:.75;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.flag{background:none;border:none;font-size:18px;cursor:pointer;opacity:.8;padding:0;}
.flag:hover{opacity:1;}
.topbar a{color:rgba(255,255,255,.75);text-decoration:none;font-size:13px;font-weight:500;}
.topbar a:hover{color:#fff;}

/* ── Pulse ───────────────────────────── */
.pulse{
  background:var(--card); border:1px solid var(--hairline);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 18px; margin-bottom:14px;
}
.pulse .label{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px;}
.pulse .figure{
  font-family:var(--money); font-size:28px; font-weight:700;
  letter-spacing:-.02em; display:flex; align-items:center; gap:8px; color:var(--ink);
}
.pulse .chev{font-size:16px;}
.pulse.down .chev,.pulse.down .msg strong{color:var(--success);}
.pulse.up   .chev,.pulse.up   .msg strong{color:var(--coral);}
.pulse .msg{margin-top:6px;font-size:13px;color:var(--ink2);}
.pulse.down{border-top:3px solid var(--sage);}
.pulse.up{border-top:3px solid var(--coral);}

/* compare strip */
.compare-strip{
  background:var(--card); border:1px solid var(--hairline);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 16px; margin-bottom:14px;
  display:flex; gap:12px; align-items:center;
}
.cmp-block{flex:1; text-align:center;}
.cmp-label{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.cmp-val{font-family:var(--money);font-size:17px;font-weight:700;color:var(--ink);margin-top:2px;}
.cmp-div{width:1px;background:var(--hairline);align-self:stretch;}
.cmp-badge{font-size:12px;font-weight:700;padding:3px 8px;border-radius:8px;}
.cmp-badge.pos{background:var(--success-tint);color:var(--success);}
.cmp-badge.neg{background:var(--coral-tint);color:var(--coral);}
.cmp-badge.neu{background:var(--blue-tint);color:var(--blue);}

/* ── Section heads ───────────────────── */
.section-head{
  display:flex;justify-content:space-between;align-items:center;
  margin:20px 2px 10px;
}
.section-head h2{
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.grand-total{font-family:var(--money);font-size:13px;font-weight:700;color:var(--ink);}
.head-right{display:flex;align-items:center;gap:10px;}
.linkbtn{background:none;border:none;color:var(--pine);font-weight:700;font-size:13px;cursor:pointer;padding:0;}

/* ── Period selector ─────────────────── */
.period-bar{margin-bottom:12px;}
.period-seg{display:flex;gap:5px;background:var(--cream2);border-radius:11px;padding:4px;}
.pseg{flex:1;border:none;background:transparent;border-radius:8px;padding:8px 6px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;}
.pseg.active{background:var(--card);color:var(--pine);box-shadow:0 2px 6px rgba(44,44,42,.10);}
.custom-range{display:flex;align-items:center;gap:8px;margin-top:8px;}
.custom-range input{flex:1;border:1px solid var(--hairline);border-radius:10px;background:var(--card);padding:9px 10px;font-size:14px;color:var(--ink);}
.custom-range .dash{color:var(--muted);}

/* ── Category donut ──────────────────── */
.cat-chart{
  background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:14px 16px;
  margin-bottom:14px;box-shadow:var(--shadow);
}
.chart-title{font-weight:700;font-size:13px;margin-bottom:10px;color:var(--ink);letter-spacing:-.01em;}
.chart-body{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.donut-center{font-size:13px;font-weight:800;fill:var(--ink);}
.chart-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:5px;}
.leg{display:flex;align-items:center;gap:7px;font-size:12px;}
.leg .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}
.leg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2);}
.leg-val{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;}

/* ── Sort bar ────────────────────────── */
.sortbar{display:flex;gap:5px;margin:0 2px 10px;}
.sortbtn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:3px;
  background:var(--card);border:1px solid var(--hairline);border-radius:9px;
  padding:7px 5px;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;
  white-space:nowrap;letter-spacing:.02em;
}
.sortbtn.active{color:var(--pine);border-color:var(--sage);background:var(--sage-tint);}
.sortbtn .arr{font-size:10px;}

/* ── Transaction rows ────────────────── */
.tape{
  background:var(--card);border:1px solid var(--hairline);
  border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
}
.txn{display:block;padding:12px 14px;border-bottom:1px solid var(--hairline);}
.txn:last-child{border-bottom:none;}
.txn-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.txn .vendor{font-weight:700;flex:1;min-width:0;white-space:normal;overflow-wrap:break-word;word-break:break-word;font-size:14px;color:var(--ink);}
.txn .amt{font-family:var(--money);font-weight:800;font-size:15px;white-space:nowrap;flex:0 0 auto;color:var(--ink);}
.txn .meta{color:var(--muted);font-size:11.5px;margin-top:3px;overflow-wrap:break-word;}
.txn-cat{margin-top:6px;}
.pill{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;color:var(--blue);
  background:var(--blue-tint);padding:3px 9px;border-radius:999px;
  white-space:normal;line-height:1.35;
}
.empty{padding:32px 18px;text-align:center;color:var(--muted);font-size:14px;}
.txn.tap{cursor:pointer;}
.txn.tap:active{background:var(--blue-tint);}
.txn.sel{background:var(--sage-tint)!important;box-shadow:inset 0 0 0 2px var(--sage);}

/* ── Bottom action bar ───────────────── */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(244,247,251,0),var(--paper) 40%);
  max-width:560px;margin:0 auto;
}
.btn{
  flex:1;border:none;border-radius:12px;padding:15px 16px;
  font-family:var(--ui);font-size:15px;font-weight:700;cursor:pointer;
}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;}
.btn-primary:active{background:var(--blue-press);}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--hairline);flex:0 0 auto;}
.btn-danger{background:var(--coral-tint);color:var(--coral);border:none;width:100%;margin-top:8px;border-radius:12px;padding:14px;font-weight:700;cursor:pointer;font-size:15px;}

/* ── Sheet ───────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:opacity .18s;z-index:40;}
.scrim.open{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--card);border-radius:20px 20px 0 0;
  max-width:560px;margin:0 auto;padding:8px 18px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.7,.2,1);
  max-height:92vh;overflow-y:auto;
}
.sheet.open{transform:translateY(0);}
.grab{width:40px;height:4px;background:var(--hairline);border-radius:4px;margin:8px auto 14px;}
.sheet h3{margin:0 0 14px;font-size:17px;font-weight:800;letter-spacing:-.02em;}

/* ── Form ────────────────────────────── */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--hairline);border-radius:11px;background:var(--paper);
  padding:13px;font-size:15px;font-family:var(--ui);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--pine);outline-offset:0;border-color:transparent;background:var(--card);}
.amount-input{font-family:var(--money);font-size:26px!important;font-weight:800;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.hint{font-size:12px;color:var(--muted);margin-top:5px;}
.card-extra{display:none;gap:12px;margin-top:10px;}
.card-extra.show{display:grid;grid-template-columns:1fr 1fr;}
.sheet .btn-primary{width:100%;margin-top:8px;}
.scan-note{display:flex;align-items:center;gap:10px;background:var(--amber-tint);color:#8A6200;border-radius:11px;padding:10px 12px;font-size:13px;margin-bottom:12px;}

/* ── Login ───────────────────────────── */
.login-wrap{max-width:360px;margin:12vh auto 0;padding:0 20px;}
.login-wrap .brand{font-size:28px;margin-bottom:4px;}
.login-wrap .sub{color:var(--muted);margin-bottom:26px;}
.login-wrap .btn-primary{width:100%;margin-top:6px;}
.err{background:var(--coral-tint);color:var(--coral);padding:11px 13px;border-radius:11px;font-size:14px;margin-bottom:14px;}

@media(prefers-reduced-motion:reduce){.sheet,.scrim{transition:none;}}

/* ── Segmented control ───────────────── */
.seg{display:flex;background:var(--blue-mid);border:1px solid var(--hairline);border-radius:12px;padding:4px;margin-bottom:16px;box-shadow:var(--shadow);}
.seg-btn{flex:1;border:none;background:transparent;padding:9px 6px;border-radius:9px;font-family:var(--ui);font-size:13px;font-weight:700;color:var(--blue-dark);cursor:pointer;}
.seg-btn.active{background:var(--blue);color:#fff;box-shadow:0 1px 4px rgba(26,110,247,.3);}
.seg{overflow-x:auto;}
.seg-btn{white-space:nowrap;}

/* ── Budget ──────────────────────────── */
.budget-head{display:flex;gap:10px;align-items:center;margin-bottom:6px;}
.month-input{flex:1;border:1.5px solid var(--hairline);border-radius:11px;background:var(--card);padding:11px 12px;font-size:15px;font-family:var(--ui);color:var(--ink);}
.btn-sm{border:1.5px solid var(--pine);background:var(--card);color:var(--pine);border-radius:10px;padding:9px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}
.ghostbtn{border-color:var(--hairline);color:var(--muted);}
.readiness{background:var(--blue-tint);color:var(--blue);border-radius:var(--radius);padding:14px 16px;margin:12px 0;font-size:14px;}
.readiness .r-title{font-weight:800;margin-bottom:3px;}
.readiness .btn-sm{margin-top:10px;}
.totals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:14px 0 4px;}
.total-box{background:var(--card);border:1px solid var(--hairline);border-radius:12px;padding:12px;box-shadow:var(--shadow);}
.t-label{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px;}
.t-val{font-family:var(--money);font-size:17px;font-weight:800;}
.t-val.pos{color:var(--success);}
.t-val.neg{color:var(--coral);}
.budget-list{display:flex;flex-direction:column;gap:10px;}
.brow{background:var(--card);border:1px solid var(--hairline);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);}
.brow-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.brow-name{font-weight:700;font-size:14px;}
.brow-figs{font-family:var(--money);font-size:12px;color:var(--muted);}
.brow-figs b{color:var(--ink);}
.bar{height:7px;border-radius:6px;background:var(--hairline);overflow:hidden;}
.bar>span{display:block;height:100%;background:var(--success);border-radius:6px;transition:width .3s;}
.bar.warn>span{background:var(--warn);}
.bar.over>span{background:var(--coral);}
.plan-input{width:92px;text-align:right;border:1.5px solid var(--hairline);border-radius:9px;padding:7px 9px;font-family:var(--money);font-size:14px;}
.plan-input:focus{outline:2px solid var(--pine);border-color:transparent;}
.no-plan{color:var(--muted);font-size:12px;}

/* ── Fun Fund ────────────────────────── */
.funfund{
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff;border-radius:var(--radius);padding:16px 18px;margin:12px 0;box-shadow:var(--shadow);
}
.ff-top{display:flex;align-items:center;justify-content:space-between;}
.ff-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;opacity:.8;}
.ff-balance{font-family:var(--money);font-size:30px;font-weight:800;margin-top:2px;}
.ff-use{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);color:#fff;}
.ff-use:active{background:rgba(255,255,255,.3);}
.ff-projected{font-size:12px;opacity:.85;margin-top:8px;}
.ff-history{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.ff-item{display:flex;justify-content:space-between;font-size:13px;border-top:1px solid rgba(255,255,255,.18);padding-top:6px;}
.ff-item .ff-amt{font-family:var(--money);font-weight:700;}
.ff-item .ff-amt.plus{color:#BEF0DC;}

/* ── Merge banner ────────────────────── */
.merge-note{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--coral-tint);color:var(--coral);border-radius:11px;padding:10px 12px;font-size:13px;margin-bottom:12px;}
.merge-note .btn-sm{border-color:var(--coral);color:var(--coral);}
.merge-row{display:flex;gap:8px;}
.merge-row input{flex:1;border:1.5px solid var(--hairline);border-radius:11px;background:var(--paper);padding:12px;font-size:15px;color:var(--ink);}

/* ── Vendor color editor ─────────────── */
.vendorColorField,.color-row{display:flex;align-items:center;gap:12px;}
.color-row input[type="color"]{width:46px;height:40px;border:1.5px solid var(--hairline);border-radius:10px;background:var(--card);padding:3px;cursor:pointer;}
.color-hint{font-size:12px;color:var(--muted);}

/* ── Select mode ─────────────────────── */
.head-right{flex-wrap:wrap;}
.select-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sage-tint);border-radius:11px;padding:8px 12px;margin-bottom:10px;font-size:13px;color:var(--pine);}
.select-actions{display:flex;gap:8px;}

/* ── Diferido ────────────────────────── */
.check-row{display:flex;align-items:center;gap:9px;font-weight:700;cursor:pointer;}
.check-row input{width:18px;height:18px;accent-color:var(--blue);}
#difMonths{margin-top:8px;}
.cuota-badge{display:inline-block;background:var(--amber-tint);color:#8A6200;border-radius:8px;padding:5px 11px;font-size:12px;font-weight:700;margin-bottom:12px;}

/* ── Categories admin ────────────────── */
.crow{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--hairline);cursor:pointer;}
.crow:last-child{border-bottom:none;}
.crow.sub .cname{color:var(--muted);padding-left:14px;font-weight:600;}
.crow.sel{background:var(--sage-tint);box-shadow:inset 0 0 0 2px var(--sage);}
.cinfo{flex:1;min-width:0;}
.cname{font-weight:700;font-size:14px;}
.cmeta{color:var(--muted);font-size:12px;margin-top:2px;}

/* ── Vendors directory ───────────────── */
.vrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--hairline);}
.vrow:last-child{border-bottom:none;}
.vcolor{width:34px;height:34px;border:1.5px solid var(--hairline);border-radius:8px;padding:2px;background:var(--card);cursor:pointer;flex:0 0 auto;}
.vinfo{min-width:0;cursor:pointer;flex:1;}
.vname{font-weight:700;font-size:14px;}
.vmeta{color:var(--muted);font-size:12px;margin-top:2px;}
.vrow.sel{background:var(--sage-tint);box-shadow:inset 0 0 0 2px var(--sage);}

/* ── Vendor edit sheet ───────────────── */
#vendorDir.selecting .vcolor{pointer-events:none;opacity:.6;}

/* ── App version footer ──────────────── */
.appver{text-align:center;color:var(--muted);font-size:12px;margin-top:26px;font-family:var(--money);letter-spacing:.04em;}

/* ── Segmented nav (4 tabs) ──────────── */
.seg-btn{padding:9px 7px;font-size:12px;}

/* ── Income type toggle ───────────────── */
.type-toggle { display:flex; gap:6px; margin-bottom:14px; }
.ttype { flex:1; border:1.5px solid var(--hairline); border-radius:12px; background:var(--paper); padding:10px; font-size:14px; font-weight:700; cursor:pointer; color:var(--muted); transition:all .15s; }
.ttype.active[data-type="expense"] { background:var(--coral-tint); color:var(--coral); border-color:var(--coral); }
.ttype.active[data-type="income"]  { background:var(--fresh-tint); color:var(--fresh); border-color:var(--fresh); }

/* ── Income rows ──────────────────────── */
.txn.income-row { border-left:3px solid var(--fresh); }
.txn .amt.inc { color:var(--fresh); }
.pill.income-pill { background:var(--fresh-tint); color:var(--fresh); }

/* ── Balance strip ────────────────────── */
.balance-strip { display:flex; align-items:center; background:var(--card); border:1px solid var(--hairline); border-radius:14px; padding:10px 14px; margin-bottom:10px; box-shadow:var(--shadow); gap:0; }
.bs-item { flex:1; text-align:center; }
.bs-label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:2px; }
.bs-val { font-family:var(--money); font-size:15px; font-weight:800; color:var(--ink); }
.bs-val.expense { color:var(--coral); }
.bs-val.income  { color:var(--fresh); }
.bs-div { width:1px; background:var(--hairline); align-self:stretch; }

/* ── Gear button + menu ───────────────── */
.gear-btn { background:none; border:none; font-size:20px; cursor:pointer; padding:2px 4px; opacity:.85; position:relative; }
.gear-btn:hover { opacity:1; }
.gear-menu {
  position:absolute; top:calc(100% + 6px); right:16px; z-index:200;
  background:var(--card); border:1px solid var(--hairline); border-radius:14px;
  box-shadow:0 8px 32px rgba(44,44,42,.16); min-width:180px; overflow:hidden;
}
.gear-item {
  display:flex; align-items:center; gap:10px; width:100%; padding:13px 16px;
  font-size:14px; font-weight:600; color:var(--ink); background:none; border:none;
  cursor:pointer; text-decoration:none;
}
.gear-item:hover { background:var(--paper); }
.gear-div { height:1px; background:var(--hairline); margin:0 12px; }
.topbar { position:relative; }

/* ══ FINANCIAL FREEDOM MODULE ════════════════ */
.ff-headline { background:linear-gradient(135deg,var(--pine),var(--pine-press)); color:#fff; border-radius:18px; padding:16px 18px; margin-bottom:14px; }
.ff-hl-text { font-size:14px; line-height:1.5; margin-bottom:10px; }
.ff-hl-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; opacity:.9; flex-wrap:wrap; gap:4px; }
.ff-row-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:16px 2px 8px; }
.ff-kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px; }
.ff-kpi { background:var(--card); border:1px solid var(--hairline); border-radius:14px; padding:12px 10px; text-align:center; box-shadow:var(--shadow); }
.ff-kpi.gap { border-color:var(--coral); }
.ff-kpi.good { border-color:var(--fresh); }
.ff-kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:4px; }
.ff-kpi-val { font-family:var(--money); font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.ff-kpi-sub { font-size:10px; color:var(--muted); margin-top:3px; }
.ff-prog-wrap { background:var(--hairline); border-radius:99px; height:8px; overflow:hidden; margin-bottom:4px; }
.ff-prog { height:8px; border-radius:99px; background:linear-gradient(90deg,var(--pine),var(--sage)); transition:width .5s; }
.ff-prog-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:4px; }

/* cash flow */
.ff-cashflow { background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow); }
.ff-cf-item { font-size:13px; padding:6px 0; border-bottom:1px dashed var(--hairline); }
.ff-cf-item:last-child { border-bottom:none; }
.ff-cf-arrow { text-align:center; color:var(--muted); font-size:12px; padding:2px 0; }
.income-cf { color:var(--fresh); } .tax-cf { color:var(--warn); } .exp-cf { color:var(--coral); }
.inv-cf { color:var(--pine); } .surplus-cf { color:var(--fresh); font-weight:700; } .gap-cf { color:var(--coral); font-weight:700; }

/* chart */
.ff-chart-wrap { background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:12px; box-shadow:var(--shadow); }

/* card */
.ff-card { background:var(--card); border:1px solid var(--hairline); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.ff-card-row { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--hairline); }
.ff-card-row:last-child { border-bottom:none; }
.ff-coast-bar { background:var(--hairline); border-radius:99px; height:6px; overflow:hidden; margin:8px 0 4px; }
.ff-coast-pct { font-size:12px; color:var(--muted); }
.ff-coast-badge { text-align:center; padding:8px; border-radius:10px; font-weight:700; font-size:13px; }
.ff-coast-badge.good { background:var(--fresh-tint); color:var(--fresh); }

/* milestones */
.ff-miles { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ff-mile { background:var(--card); border:1.5px solid var(--hairline); border-radius:12px; padding:10px 6px; text-align:center; position:relative; }
.ff-mile.done { border-color:var(--pine); background:var(--fresh-tint); }
.ff-mile-pct { display:block; font-size:14px; font-weight:800; color:var(--ink); }
.ff-mile-amt { display:block; font-size:10px; color:var(--muted); margin-top:2px; }
.ff-mile-check { position:absolute; top:4px; right:6px; font-size:12px; color:var(--pine); }

/* compare */
.ff-compare { background:var(--card); border:1px solid var(--hairline); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.ff-cmp-head,.ff-cmp-row { display:grid; grid-template-columns:60px 1fr 1fr 1fr; gap:4px; padding:9px 12px; font-size:11px; }
.ff-cmp-head { background:var(--paper); color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.ff-cmp-row { border-top:1px solid var(--hairline); font-family:var(--money); }

/* settings */
.ff-auto-note { font-size:12px; color:var(--muted); background:var(--paper); border-radius:10px; padding:8px 12px; margin-bottom:10px; }
.ff-auto-note.override { background:var(--warn-tint); color:var(--warn); }
.ff-auto-note.warn { background:var(--coral-tint); color:var(--coral); }
.ff-link { background:none; border:none; color:inherit; text-decoration:underline; cursor:pointer; font-size:inherit; }
.ff-settings { background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:4px 0; box-shadow:var(--shadow); }
.ff-set-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--hairline); }
.ff-set-row:last-child { border-bottom:none; }
.ff-set-row label { font-size:13px; color:var(--ink2); flex:1; }
.ff-inp { width:130px; border:1.5px solid var(--hairline); border-radius:10px; background:var(--paper); padding:7px 10px; font-size:13px; font-family:var(--money); color:var(--ink); }
.ff-inp:focus { outline:2px solid var(--pine); border-color:transparent; }

/* ── Picker selects (Comercio / Categoría / Pagado con) ── */
.picker-wrap { display:flex; flex-direction:column; gap:8px; }
.picker-sel {
  width:100%; border:1.5px solid var(--hairline); border-radius:11px;
  background:var(--paper); padding:13px 14px; font-size:15px;
  font-family:var(--ui); color:var(--ink); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A0906E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:36px; cursor:pointer;
}
.picker-sel:focus { outline:2px solid var(--pine); border-color:transparent; background-color:var(--card); }
.picker-new {
  width:100%; border:1.5px solid var(--pine); border-radius:11px;
  background:var(--fresh-tint); padding:12px 14px; font-size:15px;
  font-family:var(--ui); color:var(--ink);
}
.picker-new:focus { outline:2px solid var(--pine); border-color:var(--pine); }

/* ── Wallet rows ─────────────────────── */
.wrow { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--hairline); cursor:pointer; }
.wrow:last-child { border-bottom:none; }
.wrow:active { background:var(--cream2); }
.wicon { font-size:22px; flex:0 0 auto; width:36px; text-align:center; }
.winfo { flex:1; min-width:0; }
.wlabel { font-weight:700; font-size:14px; color:var(--ink); }
.wmeta { font-size:12px; color:var(--muted); margin-top:2px; }

/* ── Recurrence controls ─────────────── */
#recFreq { width:100%; border:1.5px solid var(--hairline); border-radius:11px; background:var(--paper); padding:12px 14px; font-size:15px; font-family:var(--ui); color:var(--ink); }
.rec-end-row { display:flex; gap:16px; margin:10px 0 8px; }
#recCount, #recUntil { width:100%; border:1.5px solid var(--hairline); border-radius:11px; background:var(--paper); padding:12px 14px; font-size:15px; font-family:var(--ui); color:var(--ink); margin-top:4px; }

/* ── Recurring delete dialog ─────────── */
.rec-del-btn { display:block; width:100%; padding:14px 16px; margin-bottom:8px; border:1.5px solid var(--hairline); border-radius:13px; background:var(--card); font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; }
.rec-del-btn:last-child { margin-bottom:0; }
.rec-del-btn.danger { color:var(--coral); border-color:var(--coral); }
.rec-del-btn.muted  { color:var(--muted); }
.rec-del-btn:active { background:var(--paper); }

/* ── FF projected age hero ───────────── */
.ff-hl-proj { text-align:center; padding:14px 0 10px; border-bottom:1px solid rgba(255,255,255,.2); margin-bottom:12px; }
.ff-hl-proj-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.8; }
.ff-hl-proj-age { font-family:var(--money); font-size:56px; font-weight:800; line-height:1; margin:4px 0 2px; letter-spacing:-.04em; }
.ff-hl-proj-sub { font-size:13px; opacity:.9; }

/* ── FF Sliders ──────────────────────── */
.ff-sliders { background:var(--card); border:1px solid var(--hairline); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
.ff-sl-row { padding:14px 16px; border-bottom:1px solid var(--hairline); }
.ff-sl-row:last-child { border-bottom:none; }
.ff-sl-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-size:13px; color:var(--ink2); }
.ff-sl-head b { font-family:var(--money); font-size:15px; color:var(--ink); }
.ff-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:6px;
  background:var(--hairline); outline:none; cursor:pointer;
}
.ff-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%;
  background:var(--pine); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(44,44,42,.25); cursor:pointer;
}
.ff-slider::-moz-range-thumb {
  width:24px; height:24px; border-radius:50%;
  background:var(--pine); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(44,44,42,.25); cursor:pointer;
}
.ff-slider::-webkit-slider-runnable-track { border-radius:6px; }

/* ── FF projected age — gold hero number ── */
.ff-hl-proj-age {
  font-family: var(--money);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  margin: 4px 0 2px;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #FFD97D 0%, #FFA552 50%, #FFD97D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(255,165,80,.35));
}

/* ── FF Required Income Strip ────────── */
.ff-income-strip {
  display:flex; align-items:stretch; gap:0;
  background:var(--card); border:1px solid var(--hairline);
  border-radius:16px; box-shadow:var(--shadow);
  margin-bottom:14px; overflow:hidden;
}
.ff-inc-block { flex:1; padding:14px 14px; text-align:center; }
.ff-inc-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:4px; }
.ff-inc-val { font-family:var(--money); font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.ff-inc-period { font-size:13px; font-weight:600; color:var(--muted); }
.ff-inc-sub { font-size:11px; color:var(--muted); margin-top:3px; }
.ff-inc-div { width:1px; background:var(--hairline); align-self:stretch; }