:root{
  --bg:#ECEEE4; --panel:#F8F9F2; --ink:#16212B; --muted:#56636D; --line:#D3D8CA;
  --accent:#2841D8; --accent-ink:#FFFFFF; --accent-soft:#DCE1F7;
  --warn:#F2B33D; --warn-ink:#3A2700; --good:#BFE4CF; --good-ink:#0F3B29;
  --c1:#2841D8; --c2:#F2B33D; --c3:#2F9E77; --c4:#9A55C7; --c5:#16212B; --c6:#C4694A; --cu:#9AA5AD;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1720; --panel:#182430; --ink:#E9EEE6; --muted:#9FADB7; --line:#2B3A47;
    --accent:#8C9BFF; --accent-ink:#0F1720; --accent-soft:#26315F;
    --warn:#F2B33D; --warn-ink:#2B1D00; --good:#1F5A44; --good-ink:#D3F2E2;
    --c1:#8C9BFF; --c2:#F2B33D; --c3:#4FC79C; --c4:#C08BE6; --c5:#E9EEE6; --c6:#E58F6E; --cu:#6E7D88;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1720; --panel:#182430; --ink:#E9EEE6; --muted:#9FADB7; --line:#2B3A47;
  --accent:#8C9BFF; --accent-ink:#0F1720; --accent-soft:#26315F;
  --warn:#F2B33D; --warn-ink:#2B1D00; --good:#1F5A44; --good-ink:#D3F2E2;
  --c1:#8C9BFF; --c2:#F2B33D; --c3:#4FC79C; --c4:#C08BE6; --c5:#E9EEE6; --c6:#E58F6E; --cu:#6E7D88;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);min-height:100%;
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.5;font-optical-sizing:auto;font-variant-numeric:tabular-nums}
.wrap{max-width:960px;margin:0 auto;padding:18px 18px 56px}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,5.4vw,3.2rem);font-weight:600;max-width:20ch;outline:none}
h2{font-size:1.35rem;font-weight:650}
h3{font-size:1.05rem;font-weight:650;letter-spacing:-.01em}
p{margin:0}
.lede{color:var(--muted);font-size:1.08rem;max-width:54ch;margin-top:14px}
.sub{display:block;color:var(--muted);font-size:.88rem}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* header */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 0 30px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1.4rem;letter-spacing:-.04em}
.brand svg{width:26px;height:26px;color:var(--accent)}
.tabs{display:flex;gap:4px;background:var(--panel);padding:4px;border-radius:999px;flex-wrap:wrap}
.tab{font:inherit;font-weight:600;font-size:.95rem;border:0;background:transparent;color:var(--ink);padding:8px 16px;border-radius:999px;cursor:pointer;min-height:40px}
.tab[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.tab small{font-size:.72rem;font-weight:600;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--warn);color:var(--warn-ink)}
.chip{font:inherit;font-size:.85rem;font-weight:600;border:0;border-radius:999px;padding:6px 12px;background:var(--warn);color:var(--warn-ink);cursor:pointer}

/* buttons, tags */
.btn{font:inherit;font-weight:600;border:0;border-radius:12px;padding:11px 18px;background:var(--accent);color:var(--accent-ink);cursor:pointer;min-height:44px;transition:transform .12s ease}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.sm{padding:8px 14px;min-height:38px;font-size:.92rem}
.tag{display:inline-block;font-size:.8rem;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--ink);margin:6px 6px 0 0}
.tag.warn{background:var(--warn);color:var(--warn-ink)}
.tag.good{background:var(--good);color:var(--good-ink)}

/* panels */
.panel{background:var(--panel);border-radius:22px;padding:22px}
.panel + .panel,.gap{margin-top:22px}
.tight{border-radius:14px}

/* start */
.opts{margin-top:34px;padding:8px 22px}
.opt{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center;padding:18px 0}
.opt + .opt{border-top:1px solid var(--line)}
.opt p{color:var(--muted);max-width:52ch;font-size:.95rem;margin-top:2px}
.err{margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--warn);color:var(--warn-ink);font-weight:500}
@media (max-width:600px){.opt{grid-template-columns:1fr}.opt .btn{justify-self:start}}

/* timeline */
.tl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tl-head p{color:var(--muted)}
.tl-grid{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;height:132px;margin-top:16px}
.tl-col{display:flex;flex-direction:column-reverse;gap:2px;height:100%}
.tl-col .tick{display:block;height:3px;border-radius:2px;background:var(--line);flex:none}
.tl-col.today .tick{background:var(--accent)}
.blk{border:0;padding:0;margin:0;border-radius:4px;background:var(--accent);width:100%;flex:none;cursor:pointer;transform-origin:bottom}
.blk.up{background:var(--warn)}
.blk:hover{opacity:.82}
.play .blk{animation:rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 18ms)}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.tl-axis{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;margin-top:8px;font-size:.78rem;color:var(--muted)}
.tl-axis span{white-space:nowrap}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:.85rem;color:var(--muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--accent);margin-right:6px;vertical-align:baseline}
.dot.up{background:var(--warn)}

/* list */
.list-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.seg{display:inline-flex;background:var(--bg);border-radius:999px;padding:3px}
.seg button{font:inherit;font-size:.88rem;font-weight:600;border:0;background:transparent;color:var(--ink);padding:6px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
ul.rows{list-style:none;margin:0;padding:0}
.row{padding:16px 2px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.9fr) 132px;gap:6px 16px;align-items:center}
.row-main .go .btn{width:100%}
.row-main strong{font-weight:650}
.amt{text-align:right}
.struck strong{text-decoration:line-through;text-decoration-thickness:2px}
.detail{margin-top:14px;background:var(--bg);border-radius:14px;padding:18px}
.detail ol{margin:12px 0 0;padding-left:22px;display:grid;gap:8px;max-width:64ch}
.detail .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.note{color:var(--muted);font-size:.88rem;margin-top:12px;max-width:64ch}
@media (max-width:480px){.tab{padding:8px 12px}.tab small{font-size:0;padding:0;width:8px;height:8px;margin-left:6px;display:inline-block;vertical-align:middle}}
@media (max-width:640px){
  .row-main{grid-template-columns:minmax(0,1fr) auto}
  .row-main .when{grid-column:1 / -1;order:3}
  .row-main .go{grid-column:1 / -1;order:4}
  .row-main .go .btn{width:100%}
}
details.hid{margin-top:18px}
details.hid summary{cursor:pointer;font-weight:600;color:var(--muted)}

/* family */
.stack{display:flex;height:24px;border-radius:999px;overflow:hidden;background:var(--line);margin-top:18px}
.stack i{display:block;height:100%}
.key{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px}
.key li{display:flex;justify-content:space-between;gap:10px}
.sw{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:8px}
.addm{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
input[type=text]{font:inherit;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);min-height:44px;min-width:0;flex:1 1 180px}
select{font:inherit;padding:9px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);min-height:40px;max-width:100%}
.own{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.own:first-child{border-top:0}
@media (max-width:560px){.own{grid-template-columns:minmax(0,1fr) auto}.own select{grid-column:1 / -1}}

/* savings */
.cancelled-section{border-left:4px solid var(--good, #2f855a)}
.cancelled-section .list-head{align-items:flex-start}
.cancelled-section h2{margin-bottom:4px}
.big{font-size:clamp(1.6rem,4.6vw,2.4rem);font-weight:650;letter-spacing:-.02em;line-height:1.1}
.wi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.wi:first-child{border-top:0}
.wi input{width:22px;height:22px;accent-color:var(--accent)}
.wi label{cursor:pointer}
.out{margin-top:16px;padding:16px;border-radius:14px;background:var(--good);color:var(--good-ink);font-weight:600}
.ins{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.ins li{padding-top:18px;border-top:1px solid var(--line)}
.ins li:first-child{padding-top:0;border-top:0}
.ins p{color:var(--muted);margin-top:4px;max-width:66ch}
input[type=range]{width:100%;accent-color:var(--accent);margin:14px 0 4px}

/* paywall */
.pay ul{margin:16px 0 0;padding-left:20px;display:grid;gap:6px;max-width:60ch}
.pay .btn{margin-top:22px}

dialog{background:var(--panel);color:var(--ink);border:0;border-radius:22px;padding:26px;max-width:min(520px,92vw)}
dialog::backdrop{background:rgba(10,16,22,.55)}
dialog ol{padding-left:22px;display:grid;gap:8px;margin:14px 0}
footer{margin-top:40px;color:var(--muted);font-size:.86rem;max-width:66ch}
.support{margin-bottom:22px;padding:22px;border-radius:22px;background:var(--panel);color:var(--ink)}
.support p{margin-top:8px;color:var(--muted);font-size:.95rem}
.support-btn{display:inline-block;margin-top:16px;text-decoration:none}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* CSV confirmation: readable on small screens and keyboard accessible. */
.csv-preview{margin-top:24px;display:grid;gap:16px}
.csv-preview fieldset{border:1px solid var(--line);border-radius:12px;display:grid;gap:10px;padding:16px}
.csv-preview legend{font-weight:650;padding:0 6px}
.csv-preview label{display:flex;align-items:center;gap:10px;cursor:pointer}
.csv-preview input[type=radio]{width:20px;height:20px;accent-color:var(--accent)}
.csv-preview .btns{display:flex;flex-wrap:wrap;gap:10px}
.csv-scroll{overflow-x:auto}
.csv-preview table{width:100%;border-collapse:collapse;text-align:left;font-size:.93rem}
.csv-preview th,.csv-preview td{padding:10px 8px;border-bottom:1px solid var(--line)}
.csv-preview td:last-child,.csv-preview th:last-child{text-align:right;white-space:nowrap}