/* Sizes are written in px and served as rem (main.ts remify), so Settings → Text size scales everything. Write PX (uppercase) for a size that must not scale. */
/* Zoro v3 — playful pastel, but calm. Colour lives in small blobs and pale tints; surfaces stay white. */
:root{
  --bg:#fff7f3; --surface:#ffffff; --surface-2:#fbf2f5; --line:#f2e3e9; --edge:#f0dde5;
  --ink:#3a2840; --ink-2:#76627e; --ink-3:#a895ac;
  --accent:#ff6fa5; --accent-ink:#ffffff; --accent-soft:#ffe3ee;
  --warn:#e0612f; --warn-soft:#ffe6da; --danger:#d93a5b; --ok:#2a9d6e; --ok-soft:#d8f4e7;
  --pink:#ffdbe7;   --pink-i:#b8336a;
  --mint:#d2f3e5;   --mint-i:#17775a;
  --butter:#fff1b8; --butter-i:#8a6100;
  --lilac:#e7deff;  --lilac-i:#5b41b8;
  --sky:#d7ecff;    --sky-i:#235fa0;
  --peach:#ffe2cf;  --peach-i:#b4521c;
  --leaf:#def5d2;   --leaf-i:#3a7a26;
  --berry:#ffdff5;  --berry-i:#a3338a;
  --oat:#f3ebe2;    --oat-i:#7a5a40;
  --radius:1.5rem;
  --shadow:0 0.0625rem 0 var(--edge),0 0.375rem 1.125rem rgba(170,90,130,.06);
  --shadow-lg:0 1.125rem 3.125rem rgba(90,40,80,.22);
  --tab-h:4.125rem;
  --font:"Baloo Bhaijaan 2",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1522; --surface:#271e30; --surface-2:#30263a; --line:#3a2e45; --edge:#150f1a;
  --ink:#fbeff6; --ink-2:#c6b3cc; --ink-3:#8c7a93;
  --accent:#ff8ab8; --accent-ink:#2a0f1c; --accent-soft:#45233a;
  --warn:#ff9c72; --warn-soft:#45291f; --danger:#ff7a93; --ok:#6fe0b0; --ok-soft:#1c3a30;
  --pink:#4a2638; --pink-i:#ffb0cd; --mint:#1d3d33; --mint-i:#8ff0c8; --butter:#40361a; --butter-i:#ffe08a;
  --lilac:#332b55; --lilac-i:#c8b8ff; --sky:#1f3450; --sky-i:#9fd0ff; --peach:#47301f; --peach-i:#ffc19a;
  --leaf:#283d20; --leaf-i:#b6ec9c; --berry:#44233f; --berry-i:#ffaee9; --oat:#3a3029; --oat-i:#e9d3bd;
  --shadow:0 0.0625rem 0 var(--edge),0 0.375rem 1.125rem rgba(0,0,0,.25); --shadow-lg:0 1.125rem 3.125rem rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#1c1522; --surface:#271e30; --surface-2:#30263a; --line:#3a2e45; --edge:#150f1a;
  --ink:#fbeff6; --ink-2:#c6b3cc; --ink-3:#8c7a93;
  --accent:#ff8ab8; --accent-ink:#2a0f1c; --accent-soft:#45233a;
  --warn:#ff9c72; --warn-soft:#45291f; --danger:#ff7a93; --ok:#6fe0b0; --ok-soft:#1c3a30;
  --pink:#4a2638; --pink-i:#ffb0cd; --mint:#1d3d33; --mint-i:#8ff0c8; --butter:#40361a; --butter-i:#ffe08a;
  --lilac:#332b55; --lilac-i:#c8b8ff; --sky:#1f3450; --sky-i:#9fd0ff; --peach:#47301f; --peach-i:#ffc19a;
  --leaf:#283d20; --leaf-i:#b6ec9c; --berry:#44233f; --berry-i:#ffaee9; --oat:#3a3029; --oat-i:#e9d3bd;
  --shadow:0 0.0625rem 0 var(--edge),0 0.375rem 1.125rem rgba(0,0,0,.25); --shadow-lg:0 1.125rem 3.125rem rgba(0,0,0,.6);
  color-scheme:dark;
}
:root[data-font="clean"]{--font:system-ui,-apple-system,"Segoe UI",Roboto,"Baloo Bhaijaan 2",sans-serif}
:root[data-font="classic"]{--font:Georgia,"Times New Roman","Baloo Bhaijaan 2",serif}
:root[data-font="pixel"]{--font:"Jersey 10","Baloo Bhaijaan 2",ui-monospace,monospace}
.c-pink{--c:var(--pink);--ci:var(--pink-i)} .c-mint{--c:var(--mint);--ci:var(--mint-i)} .c-butter{--c:var(--butter);--ci:var(--butter-i)}
.c-lilac{--c:var(--lilac);--ci:var(--lilac-i)} .c-sky{--c:var(--sky);--ci:var(--sky-i)} .c-peach{--c:var(--peach);--ci:var(--peach-i)}
.c-leaf{--c:var(--leaf);--ci:var(--leaf-i)} .c-berry{--c:var(--berry);--ci:var(--berry-i)} .c-oat{--c:var(--oat);--ci:var(--oat-i)}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.4;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.muted{color:var(--ink-2)}
:focus-visible{outline:0.1875rem solid var(--accent);outline-offset:0.125rem;border-radius:0.75rem}
kbd{font:600 0.6875rem/1 var(--font);color:var(--ink-3);border:0.0938rem solid var(--line);border-radius:0.4375rem;padding:0.1875rem 0.375rem}
.bounce{transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.bounce:active{transform:scale(.96)}

/* ---------- Gate ---------- */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:1.5rem}
.gate-card{text-align:center;width:100%;max-width:20rem;position:relative}
.gate-mascot{width:5.75rem;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-0.3125rem) rotate(-3deg)}}
.gate-card h1{font-size:1.6875rem;margin:0.5rem 0 0;font-weight:800}
.gate-card p{margin:0.125rem 0 0}
.pin-dots{display:flex;gap:1rem;justify-content:center;margin:1.625rem 0 0.5rem}
.pin-dots span{width:1.125rem;height:1.125rem;border-radius:50%;border:0.1875rem solid var(--pink);background:var(--surface);transition:.15s}
.pin-dots span.on{background:var(--accent);border-color:var(--accent);transform:scale(1.15)}
.pin-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.gate-error{color:var(--danger);font-size:0.875rem;margin:0.625rem 0 0;font-weight:600}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-0.5rem)}40%,80%{transform:translateX(0.5rem)}}

/* ---------- Shell ---------- */
.main{padding-bottom:calc(var(--tab-h) + 2.5rem + env(safe-area-inset-bottom));outline:none}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:0.5rem;padding:calc(0.625rem + env(safe-area-inset-top)) 1rem 0.5rem;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1rem)}
.topbar-title{flex:1;font-weight:700;font-size:1.0625rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity .15s}
.topbar.scrolled .topbar-title,.topbar.has-back .topbar-title{opacity:1}
.topbar-actions{display:flex;gap:0.375rem;align-items:center}
.icon-btn{width:2.5rem;height:2.5rem;border-radius:0.875rem;display:grid;place-items:center;font-size:1.3125rem;font-weight:700;background:var(--surface);box-shadow:var(--shadow)}
.sync{display:flex;align-items:center;gap:0.4375rem;height:2rem;padding:0 0.75rem;border-radius:62.4375rem;font-size:0.8125rem;font-weight:600;color:var(--ink-2);background:var(--surface);box-shadow:var(--shadow)}
.sync-dot{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--ok)}
.sync-ico{font-size:1.0625rem;font-weight:800;line-height:1;color:var(--ok);display:inline-block}
.sync.busy .sync-ico{animation:spin .8s linear infinite;color:var(--ink-3)}
.sync.err .sync-ico{color:var(--danger)}
@keyframes spin{to{transform:rotate(360deg)}}
.ptr{position:fixed;left:50%;top:calc(0.5rem + env(safe-area-inset-top));z-index:40;width:2.5rem;height:2.5rem;margin-left:-1.25rem;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;font-weight:800;color:var(--accent);background:var(--surface);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .15s}
.ptr span{display:inline-block}
.ptr.go{opacity:1}
.ptr.go span{animation:spin .8s linear infinite}
.sync.busy .sync-dot{background:var(--ink-3);animation:pulse 1s infinite}
.sync.err .sync-dot{background:var(--danger)}
@keyframes pulse{50%{opacity:.3}}
.view{padding:0 1rem;max-width:73.75rem;margin:0 auto}
.rail{display:none}
.tabbar{position:fixed;left:0.75rem;right:0.75rem;bottom:calc(0.625rem + env(safe-area-inset-bottom));z-index:30;display:flex;justify-content:space-around;height:var(--tab-h);border-radius:1.5rem;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(1.125rem);-webkit-backdrop-filter:blur(1.125rem);box-shadow:0 0.125rem 0 var(--edge),0 0.75rem 1.875rem rgba(150,60,110,.14)}
.tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:min(0.6875rem,12PX);font-weight:600;color:var(--ink-3);position:relative;text-align:center}
.tab > span:not(.em):not(.badge){max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab .em{font-size:1.25rem;line-height:1.15;filter:grayscale(.9);opacity:.6;transition:.15s}
.tab[aria-current="page"]{color:var(--ink)}
.tab[aria-current="page"] .em{filter:none;opacity:1;transform:translateY(-0.0625rem) scale(1.1)}
.badge{min-width:1.1875rem;height:1.1875rem;padding:0 0.375rem;border-radius:62.4375rem;background:var(--warn);color:#fff;font-size:0.6875rem;font-weight:800;display:inline-grid;place-items:center;line-height:1}
.tab .badge{position:absolute;top:0.4375rem;left:calc(50% + 0.375rem)}
.fab{position:fixed;right:1.25rem;bottom:calc(var(--tab-h) + 1.5rem + env(safe-area-inset-bottom));z-index:31;width:3.5rem;height:3.5rem;border-radius:1.25rem;background:var(--accent);color:var(--accent-ink);font-size:1.875rem;font-weight:700;line-height:1;display:grid;place-items:center;box-shadow:0 0.1875rem 0 color-mix(in srgb,var(--accent) 60%,#000),0 0.625rem 1.5rem color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.fab:active{transform:scale(.92)}
@media (min-width:900px){
  .app{display:grid;grid-template-columns:14.5rem 1fr}
  .rail{display:flex;flex-direction:column;gap:0.5rem;position:sticky;top:0;height:100vh;padding:1.25rem 0.875rem}
  .rail-brand{display:flex;align-items:center;gap:0.625rem;font-weight:800;font-size:1.4375rem;padding:0.125rem 0.375rem 0.75rem}
  .rail-brand img{width:2.375rem}
  .rail-search{display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.75rem;border-radius:1rem;background:var(--surface);box-shadow:var(--shadow);color:var(--ink-3);font-size:0.9375rem;font-weight:600;margin-bottom:0.5rem}
  .rail-search span:nth-child(2){flex:1}
  .nav-items{display:flex;flex-direction:column;gap:0.25rem}
  .nav-item{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0.75rem;border-radius:1rem;color:var(--ink-2);font-weight:700}
  .nav-item .em{font-size:1.25rem}
  .nav-item:hover{background:color-mix(in srgb,var(--surface) 60%,transparent)}
  .nav-item[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
  .nav-item .badge{margin-left:auto}
  .tabbar,.only-mobile{display:none!important}
  .main{padding-bottom:3.5rem}
  .view{padding:0 2rem}
  .topbar{padding:1rem 2rem 0.625rem}
  .fab{bottom:1.875rem;right:1.875rem}
}

/* ---------- Page heads ---------- */
.hello{display:flex;align-items:center;gap:0.75rem;padding:0.125rem 0 1.125rem}
.hello-text{flex:1;min-width:0}
.eyebrow{font-size:0.8125rem;font-weight:700;color:var(--ink-3)}
.page-title{font-size:1.6875rem;line-height:1.1;font-weight:800;margin:0.125rem 0 0}
.page-sub{color:var(--ink-2);margin:0.1875rem 0 0;font-size:0.9375rem;font-weight:500}
.hello-mascot{width:3.5rem;flex-shrink:0;animation:bob 3.4s ease-in-out infinite;cursor:pointer}
.section{margin:0 0 1.625rem;break-inside:avoid}
.section-head{display:flex;align-items:center;gap:0.625rem;margin:0 0.25rem 0.625rem}
.section-title{font-size:1rem;font-weight:800;flex:1;margin:0;color:var(--ink)}
.link{font-size:0.875rem;color:var(--accent);font-weight:700;white-space:nowrap}
.count{color:var(--ink-3);font-weight:700}
@media (min-width:1100px){.home-cols{column-count:2;column-gap:1.625rem}}

/* ---------- Cards ---------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:1rem}
.empty{padding:1.375rem 1rem;text-align:center;color:var(--ink-3);font-size:0.9375rem;font-weight:600}
.empty.sm{padding:0.75rem}
.empty img{width:3.5rem;display:block;margin:0 auto 0.375rem}
.empty b{display:block;color:var(--ink-2);font-weight:800}

/* Today hero */
.today{padding:1rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;margin-bottom:0.75rem}
.stat{background:var(--surface-2);border-radius:1rem;padding:0.5625rem 0.75rem}
.stat b{display:block;font-size:1.375rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:0.7813rem;font-weight:700;color:var(--ink-2)}
.stat.warn b{color:var(--warn)}
.mini-goals{display:flex;align-items:center;gap:0.75rem;margin-top:0.75rem;padding-top:0.75rem;border-top:0.125rem dashed var(--line);flex-wrap:wrap}
.mini-goals .lbl{font-size:0.8125rem;font-weight:800;color:var(--ink-2);margin-right:auto}
.mg-row{display:flex;gap:0.375rem;overflow-x:auto;width:100%;padding:0.125rem 0 0.25rem;scrollbar-width:none}
.mg-row::-webkit-scrollbar{display:none}
.mg-item{flex:0 0 4.625rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem;text-align:center;min-width:0}
.mg-item span{font-size:0.75rem;font-weight:700;line-height:1.2;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}

/* Life-area tiles */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:0.625rem}
.area-tile{display:flex;flex-direction:column;gap:0.25rem;padding:0.75rem;border-radius:1.375rem;min-height:7rem;background:color-mix(in srgb,var(--c) 55%,var(--surface));box-shadow:0 0.0625rem 0 color-mix(in srgb,var(--c) 70%,var(--edge));position:relative;min-width:0}
.blob{width:2.5rem;height:2.5rem;border-radius:0.875rem;display:grid;place-items:center;font-size:1.375rem;background:var(--c);flex-shrink:0}
.area-tile .nm{font-size:0.875rem;font-weight:800;color:var(--ci);line-height:1.15;margin-top:auto;overflow-wrap:anywhere}
.area-tile .st{font-size:0.75rem;font-weight:700;color:var(--ink-2)}
.area-tile .st.late{color:var(--warn)}
.lock{position:absolute;top:0.625rem;right:0.6875rem;font-size:0.75rem}

/* Type chips */
.tchips{display:flex;flex-wrap:wrap;gap:0.5rem}
.tchip{display:inline-flex;align-items:center;gap:0.375rem;height:2.375rem;padding:0 0.8125rem;border-radius:62.4375rem;background:var(--surface);box-shadow:var(--shadow);font-size:0.875rem;font-weight:700}
.tchip i{font-style:normal;font-size:0.75rem;font-weight:800;color:var(--ink-3)}

/* Topic card (used on home pins, area pages, type pages) */
.tcard{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:0.875rem 0.875rem 0.625rem;margin-bottom:0.875rem;break-inside:avoid}
.tcard-head{display:flex;align-items:center;gap:0.625rem;margin-bottom:0.5rem}
.tcard-head .blob{width:2.25rem;height:2.25rem;font-size:1.1875rem;border-radius:0.75rem}
.tt{flex:1;min-width:0}
.tt h3{margin:0;font-size:1.0313rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.tt span{font-size:0.7813rem;font-weight:700;color:var(--ink-3)}
.subhead{font-size:0.8125rem;font-weight:800;color:var(--ink-3);margin:0.625rem 0.25rem 0.25rem;text-transform:uppercase;letter-spacing:.04em}
.more{display:block;width:100%;padding:0.5rem;font-size:0.875rem;font-weight:700;color:var(--accent);text-align:center}

/* Rows */
.rows{list-style:none;margin:0;padding:0}
.row-wrap{position:relative;overflow:hidden;border-radius:1rem}
.swipe-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;font-size:0.875rem;font-weight:800;color:#fff;opacity:0;border-radius:1rem}
.row{position:relative;display:flex;align-items:flex-start;gap:0.6875rem;padding:0.5625rem 0.375rem;background:var(--surface);border-radius:1rem;touch-action:pan-y;transition:transform .2s ease;width:100%}
.row.dragging{transition:none}
.row:hover{background:var(--surface-2)}
.row-main{flex:1;min-width:0}
.row-title{font-weight:700;font-size:0.9688rem;overflow-wrap:anywhere;line-height:1.3}
.row-title.done{text-decoration:line-through;text-decoration-thickness:0.125rem;color:var(--ink-3)}
.row-meta{display:flex;flex-wrap:wrap;gap:0.125rem 0.625rem;overflow-wrap:anywhere;min-width:0;margin-top:0.0625rem;font-size:0.8125rem;font-weight:600;color:var(--ink-2)}
.row-meta .late{color:var(--warn);font-weight:800}
.row-desc{font-size:0.8438rem;font-weight:500;color:var(--ink-2);margin-top:0.0625rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:0.25rem;font-size:0.875rem;flex-shrink:0;text-align:right}
.amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.amt small{font-size:0.6875rem;color:var(--ink-3);font-weight:700;margin-left:0.125rem}
.amt.in{color:var(--ok)}
.time{font-weight:800;font-variant-numeric:tabular-nums}
.emo{width:2rem;height:2rem;border-radius:0.6875rem;display:grid;place-items:center;font-size:1.0625rem;flex-shrink:0;background:var(--surface-2)}
.check{width:1.75rem;height:1.75rem;border-radius:0.625rem;border:0.1875rem solid var(--line);background:var(--surface);display:grid;place-items:center;flex-shrink:0;color:transparent;font-size:1rem;font-weight:900;transition:.15s cubic-bezier(.3,1.6,.5,1);margin-top:0.0625rem}
.check.on{background:var(--ok);border-color:var(--ok);color:#fff}
.check.ro{opacity:.55;border-style:dashed}
.check.ro.on{border-style:solid}
.check.mid{border-color:var(--ok);background:linear-gradient(135deg,var(--ok-soft) 50%,var(--surface) 50%)}
.chip-topic{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.7813rem;font-weight:700;color:var(--ci,var(--ink-2))}
.tag{font-size:0.75rem;font-weight:800;padding:0.125rem 0.5625rem;border-radius:62.4375rem;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.lil{background:var(--lilac);color:var(--lilac-i)}
.spill{font-size:0.75rem;font-weight:800;padding:0.1875rem 0.625rem;border-radius:62.4375rem;white-space:nowrap}
.spill.open{background:var(--surface-2);color:var(--ink-2)}
.spill.doing{background:var(--lilac);color:var(--lilac-i)}
.spill.done{background:var(--ok-soft);color:var(--ok)}
.dbadge{width:2.75rem;flex-shrink:0;border-radius:0.875rem;background:var(--c,var(--sky));text-align:center;padding:0.3125rem 0 0.375rem;line-height:1}
.dbadge small{display:block;font-size:0.6563rem;font-weight:800;text-transform:uppercase;color:var(--ci,var(--sky-i))}
.dbadge b{display:block;font-size:1.1875rem;font-weight:800;margin-top:0.125rem;color:var(--ci,var(--sky-i))}
.past{opacity:.55}

/* progress */
.pbar{height:0.625rem;border-radius:62.4375rem;background:var(--surface-2);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:62.4375rem;background:var(--ci,var(--accent))}
.pbar.ok i{background:var(--ok)}
.prog-line{display:flex;align-items:center;gap:0.625rem;margin:0.125rem 0.25rem 0.5rem;font-size:0.8125rem;font-weight:800;color:var(--ink-2)}
.prog-line .pbar{flex:1}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.75rem}
.prow{padding:0.25rem}
.prow-top{display:flex;gap:0.625rem;align-items:baseline;margin-bottom:0.3125rem}
.prow-top b{flex:1;font-size:0.9688rem;overflow-wrap:anywhere}
.prow-top span{font-weight:800;font-size:0.875rem;color:var(--ci,var(--ink-2))}
.prow .sub{font-size:0.7813rem;font-weight:700;color:var(--ink-3);margin-top:0.1875rem;display:block}
.ring{position:relative;flex-shrink:0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .v{position:absolute;inset:0;display:grid;place-items:center;font-size:0.75rem;font-weight:800;font-variant-numeric:tabular-nums}
.goal-card{display:flex;align-items:center;gap:0.875rem;padding:0.5rem 0.25rem;width:100%}
.goal-card + .goal-card{border-top:0.125rem solid var(--line)}
.goal-card b{display:block;font-size:0.9688rem}
.goal-card span{display:block;font-size:0.8125rem;font-weight:600;color:var(--ink-2)}

/* daily goals */
.dg{display:flex;gap:0.875rem;flex-wrap:wrap}
.dg-item{display:flex;flex-direction:column;align-items:center;gap:0.25rem;width:5.25rem;text-align:center}
.dg-item b{font-size:0.8125rem;line-height:1.15;overflow-wrap:anywhere}
.dg-item span{font-size:0.7188rem;font-weight:700;color:var(--ink-3)}
.week-dots{display:flex;align-items:center;gap:0.375rem;margin-top:0.75rem;font-size:0.7813rem;font-weight:700;color:var(--ink-3)}
.week-dots i{width:0.875rem;height:0.875rem;border-radius:50%;background:var(--surface-2);display:inline-block}
.week-dots i.on{background:var(--ok)}
.streak{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.8125rem;font-weight:800;color:var(--warn);background:var(--warn-soft);padding:0.1875rem 0.625rem;border-radius:62.4375rem;white-space:nowrap}

/* summaries, money */
.sumline{margin:0 0.25rem 0.5rem;font-size:0.875rem;font-weight:600;color:var(--ink-2)}
.sumline b{font-size:1.25rem;color:var(--ink);font-variant-numeric:tabular-nums}
.warnc{color:var(--warn);font-weight:800}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.625rem,1fr));gap:0.5rem;margin:0.25rem 0 0.375rem}
.kv div{background:var(--surface-2);border-radius:0.875rem;padding:0.4375rem 0.625rem}
.kv b{display:block;font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums}
.kv span{font-size:0.7188rem;font-weight:700;color:var(--ink-3)}
.kv .pos b{color:var(--ok)} .kv .neg b{color:var(--danger)}
.asset{padding:0.375rem 0.125rem 0.625rem}
.asset + .asset{border-top:0.125rem solid var(--line);padding-top:0.75rem}
.asset-head{display:flex;align-items:center;gap:0.5rem;margin:0 0.125rem 0.25rem}
.asset-head b{flex:1;font-size:1rem}
.big{font-size:1.875rem;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;margin:0 0.25rem}
.big small{font-size:0.875rem;color:var(--ink-3);margin-left:0.1875rem}
.spark{display:block;width:100%;height:3.5rem;margin:0.375rem 0 0.25rem}
.person-debt{padding:0.375rem 0.125rem}
.person-debt + .person-debt{border-top:0.125rem solid var(--line);padding-top:0.625rem}
.person-debt h4{margin:0 0.25rem 0.25rem;font-size:0.9375rem;font-weight:800}
.person-debt h4 span{font-weight:700;color:var(--ink-2)}
.chart{padding:0.875rem 1rem 0.5rem}
.chart svg{display:block;width:100%;height:auto}
.chart text{font:700 0.75rem var(--font);fill:var(--ink-3)}
.chart .lbl{fill:var(--ink-2)}

/* wishlist, contacts */
.wishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr));gap:0.625rem}
.wish{display:flex;flex-direction:column;gap:0.25rem;min-width:0;overflow:hidden;padding:0.75rem;border-radius:1.125rem;background:color-mix(in srgb,var(--berry) 45%,var(--surface));min-height:6rem}
.wish .we{font-size:1.375rem}
.wish b{font-size:0.9375rem;line-height:1.25;overflow-wrap:anywhere}
.wish span{font-size:0.7813rem;font-weight:700;color:var(--ink-2);overflow-wrap:anywhere;min-width:0}
.wish .price{color:var(--berry-i);font-size:0.875rem;font-weight:800;margin-top:auto}
.people{display:flex;flex-direction:column;gap:0.25rem}
.person{display:flex;gap:0.75rem;align-items:flex-start;padding:0.5rem 0.25rem;width:100%}
.avatar{width:2.625rem;height:2.625rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:0.9375rem;background:var(--peach);color:var(--peach-i);flex-shrink:0}
.person b{display:block;font-size:0.9688rem}
.person .d{display:block;font-size:0.8125rem;font-weight:500;color:var(--ink-2);overflow-wrap:anywhere}
.minis{display:flex;gap:0.375rem;flex-wrap:wrap;margin-top:0.25rem}
.mini{font-size:0.75rem;font-weight:800;padding:0.125rem 0.5625rem;border-radius:62.4375rem;background:var(--surface-2);color:var(--ink-2)}

/* grocery */
.gadd{display:flex;gap:0.5rem;margin:0 0 0.375rem}
.gadd input{flex:1;min-width:0;height:2.75rem;padding:0 0.875rem;border-radius:0.9375rem;border:0.125rem solid var(--line);background:var(--bg);font-weight:600}
.gadd-more{margin:0 0 0.5rem}
.gadd-more summary{font-size:0.8125rem;font-weight:700;color:var(--ink-3);cursor:pointer;padding:0.125rem 0.25rem;list-style:none}
.gadd-more summary::-webkit-details-marker{display:none}
.gadd-more .gfields{display:grid;grid-template-columns:1fr 1fr 5.625rem;gap:0.375rem;margin-top:0.375rem}
.gadd-more input{min-width:0;height:2.5rem;padding:0 0.625rem;border-radius:0.8125rem;border:0.125rem solid var(--line);background:var(--bg);font-weight:600;font-size:0.875rem}
.groc{list-style:none;margin:0;padding:0}
.gitem{display:flex;align-items:center;gap:0.625rem;padding:0.4375rem 0.25rem;border-radius:0.875rem;background:var(--surface)}
.gitem + .gitem{border-top:0.0938rem solid var(--line)}
.gitem .row-main{min-width:0}
.handle{width:1.875rem;height:2.125rem;display:grid;place-items:center;color:var(--ink-3);font-size:1.125rem;cursor:grab;touch-action:none;flex-shrink:0;letter-spacing:-0.125rem}
.xbtn{width:1.875rem;height:1.875rem;border-radius:0.625rem;display:grid;place-items:center;color:var(--ink-3);font-weight:800;flex-shrink:0}
.gitem.lifting{box-shadow:var(--shadow-lg);position:relative;z-index:5;transform:scale(1.02)}
.gitem.bought .row-title{text-decoration:line-through;color:var(--ink-3)}

/* diary */
.dentry{padding:0.625rem 0.25rem}
.dgroup{padding:0.375rem 0.125rem 0.625rem}
.dgroup + .dgroup{border-top:0.125rem solid var(--line);padding-top:0.75rem}
.dhead{display:flex;align-items:baseline;justify-content:space-between;gap:0.625rem;margin:0 0.25rem 0.25rem}
.dhead .dt{font-size:0.875rem;font-weight:700;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.dhead .dt b{color:var(--ink);font-weight:800}
.dcount{font-size:0.75rem;font-weight:800;color:var(--ink-3);white-space:nowrap}
.dline{display:block;width:100%;padding:0.4375rem 0.5rem;border-radius:0.875rem}
.dline:hover{background:var(--surface-2)}
.dline .row-desc{-webkit-line-clamp:4;white-space:pre-line}
.dentry + .dentry{border-top:0.125rem solid var(--line)}
.dentry .when{font-size:0.7813rem;font-weight:700;color:var(--ink-3)}

/* ---------- Area / topic pages ---------- */
.hero{border-radius:1.75rem;padding:1rem 1.125rem;margin:0 0 0.875rem;background:color-mix(in srgb,var(--c) 70%,var(--surface));position:relative}
.hero .page-title{color:var(--ci)}
.hero-row{display:flex;align-items:center;gap:0.75rem}
.hero .blob{width:3.25rem;height:3.25rem;font-size:1.875rem;border-radius:1.125rem;background:var(--surface)}
.hero-stats{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.75rem}
.hero-stats div{background:color-mix(in srgb,var(--surface) 75%,transparent);border-radius:0.875rem;padding:0.375rem 0.75rem}
.hero-stats b{display:block;font-size:1.125rem;font-weight:800;color:var(--ci);font-variant-numeric:tabular-nums;line-height:1.15}
.hero-stats span{font-size:0.75rem;font-weight:700;color:var(--ink-2)}
.hero-actions{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.75rem}
.toolbar{display:flex;gap:0.5rem;align-items:center;margin:0 0 0.875rem;flex-wrap:wrap}
.chips{display:flex;gap:0.4375rem;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:0.125rem 0.125rem 0.375rem}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;height:2.25rem;padding:0 0.875rem;border-radius:62.4375rem;background:var(--surface);box-shadow:var(--shadow);font-size:0.875rem;font-weight:700;color:var(--ink-2);display:inline-flex;align-items:center;gap:0.375rem;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg{display:inline-flex;background:var(--surface);border-radius:0.9375rem;padding:0.25rem;gap:0.1875rem;box-shadow:var(--shadow)}
.seg button{height:2rem;padding:0 0.6875rem;border-radius:0.6875rem;font-size:0.875rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--c,var(--accent-soft));color:var(--ci,var(--ink))}
.pill{height:2.375rem;padding:0 0.9375rem;border-radius:62.4375rem;background:var(--surface);box-shadow:var(--shadow);font-weight:700;font-size:0.875rem;display:inline-flex;align-items:center;gap:0.4375rem}
.pill.on{background:var(--accent);color:var(--accent-ink)}
.btn{height:2.875rem;padding:0 1.125rem;border-radius:1rem;background:var(--ink);color:var(--bg);font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:0.4375rem;white-space:nowrap;text-decoration:none;transition:transform .14s cubic-bezier(.3,1.6,.5,1)}
.btn:active{transform:scale(.95)}
.btn.secondary{background:var(--surface-2);color:var(--ink)}
.btn.pink{background:var(--accent);color:var(--accent-ink)}
.btn.danger{background:var(--surface-2);color:var(--danger)}
.btn.sm{height:2.375rem;padding:0 0.875rem;border-radius:0.8125rem;font-size:0.875rem}
.btn:disabled{opacity:.5}

/* calendar */
.month{padding:0.75rem}
.month-head{display:flex;align-items:center;justify-content:space-between;padding:0.125rem 0.25rem 0.625rem}
.month-head b{font-size:1.125rem;font-weight:800}
.month-head button{width:2.25rem;height:2.25rem;border-radius:0.75rem;background:var(--surface-2);font-size:1.25rem;font-weight:800;text-align:center}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0.25rem}
.mdow{font-size:0.75rem;font-weight:800;color:var(--ink-3);text-align:center;padding:0.125rem 0 0.25rem}
.mday{aspect-ratio:1;min-width:0;min-height:0;overflow:hidden;border-radius:0.8125rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.1875rem;font-size:0.9375rem;font-weight:700;background:var(--surface-2);text-align:center}
.mday.blank{background:transparent}
.mday.today{background:var(--accent-soft);color:var(--accent)}
.mday[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.mdots{display:flex;gap:0.125rem;height:0.375rem}
.mdots i{width:0.375rem;height:0.375rem;border-radius:50%;background:var(--ci,var(--accent))}
@media (min-width:900px){.cal-layout{display:grid;grid-template-columns:minmax(20rem,26.25rem) 1fr;gap:1.375rem;align-items:start}}

/* settings + customize */
.setting{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem}
.setting+.setting{border-top:0.125rem solid var(--line)}
.setting-label{flex:1;min-width:0;font-weight:700}
.setting-label small{display:block;font-weight:600;color:var(--ink-2);font-size:0.8125rem}
.setting select,.map-row select{height:2.5rem;border-radius:0.8125rem;border:0.125rem solid var(--line);background:var(--surface);padding:0 0.625rem;font-weight:700;max-width:52%}
.map-row{display:flex;align-items:center;gap:0.625rem;padding:0.5625rem 0.875rem}
.map-row+.map-row{border-top:0.125rem solid var(--line)}
.map-row .t{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.map-row .t small{display:block;font-size:0.75rem;color:var(--ink-3);font-weight:700}
.crow{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.25rem}
.crow + .crow{border-top:0.0938rem solid var(--line)}
.crow .t{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.crow.off .t{color:var(--ink-3);text-decoration:line-through}
.sbtn{width:2.25rem;height:2.25rem;border-radius:0.75rem;background:var(--surface-2);font-weight:800;display:grid;place-items:center;flex-shrink:0}
.sbtn:disabled{opacity:.3}
.toggle{width:3.125rem;height:1.875rem;border-radius:62.4375rem;background:var(--line);position:relative;flex-shrink:0;transition:.15s}
.toggle::after{content:"";position:absolute;top:0.1875rem;left:0.1875rem;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;box-shadow:0 0.0625rem 0.1875rem rgba(0,0,0,.2);transition:.15s}
.toggle[aria-checked="true"]{background:var(--ok)}
.toggle[aria-checked="true"]::after{left:1.4375rem}
.cust-h{font-size:0.8125rem;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin:1rem 0.25rem 0.25rem}

/* ---------- Sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(50,20,45,.36);z-index:60;animation:fade .18s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:90vh;overflow-y:auto;background:var(--surface);border-radius:1.75rem 1.75rem 0 0;box-shadow:var(--shadow-lg);padding:0.375rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));animation:up .28s cubic-bezier(.2,1.2,.3,1)}
@keyframes up{from{transform:translateY(100%)}}
.sheet-grip{width:2.75rem;height:0.375rem;border-radius:62.4375rem;background:var(--line);margin:0.375rem auto 0.875rem}
@media (min-width:900px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:33.75rem;border-radius:1.75rem;animation:pop .2s}
  .sheet-grip{display:none}
  @keyframes pop{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}}
}
.sheet h2{font-size:1.4375rem;line-height:1.2;margin:0.375rem 0 0.25rem;font-weight:800;overflow-wrap:anywhere}
.sheet .desc{color:var(--ink-2);margin:0.375rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-weight:500}
.sheet-badge{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.8125rem;font-weight:800;padding:0.25rem 0.75rem;border-radius:62.4375rem;background:var(--c);color:var(--ci)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:0.5625rem 1rem;margin:1rem 0;font-size:0.9375rem;background:var(--surface-2);border-radius:1.125rem;padding:0.875rem 1rem}
.facts dt{color:var(--ink-3);font-weight:700}
.facts dd{margin:0;overflow-wrap:anywhere;font-weight:600}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem;margin-top:0.5rem}
.sheet-actions .wide{grid-column:1/-1}
.notes-box{margin:0 0 0.75rem}
.notes-box textarea{width:100%;min-height:5rem;padding:0.625rem 0.875rem;border-radius:1rem;border:0.125rem solid var(--line);background:var(--bg);font-weight:500;resize:vertical}
.field{display:block;margin-top:0.75rem}
.field span{display:block;font-size:0.8125rem;color:var(--ink-2);margin-bottom:0.3125rem;font-weight:800}
.field input,.field select,.field textarea{width:100%;min-height:2.875rem;padding:0.625rem 0.875rem;border-radius:1rem;border:0.125rem solid var(--line);background:var(--bg);font-weight:600}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem}
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-top:0.625rem}
.type-opt{padding:0.625rem 0.25rem;border-radius:1rem;background:var(--surface-2);font-size:0.75rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:0.125rem;text-align:center}
.type-opt .e{font-size:1.3125rem}
.type-opt[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 0 0 0 0.1563rem var(--accent)}
.fix-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.625rem,1fr));gap:0.625rem;margin-top:0.75rem;padding-top:0.875rem;border-top:0.125rem dashed var(--line)}
.fix-row .btn{height:2.625rem;font-size:0.875rem;padding:0 0.625rem}
.field-row.three{grid-template-columns:1fr 1fr 1fr}
.btn.forever{margin-top:0.875rem;width:100%;height:2.5rem;background:transparent;color:var(--danger);font-size:0.875rem}
[data-style="rpg"] .btn.forever{box-shadow:none}
.form-error{color:var(--danger);font-size:0.875rem;margin:0.625rem 0 0;font-weight:700}

/* ---------- Palette ---------- */
.palette{position:fixed;inset:0;z-index:70;background:rgba(50,20,45,.36);display:flex;justify-content:center;align-items:flex-start;padding:calc(0.75rem + env(safe-area-inset-top)) 0.625rem 0.625rem;animation:fade .12s}
.palette-box{width:100%;max-width:40rem;background:var(--surface);border-radius:1.5rem;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:min(80vh,40rem)}
@media (min-width:900px){.palette{padding-top:12vh}}
.palette-input-wrap{display:flex;align-items:center;gap:0.625rem;padding:0.25rem 1rem;border-bottom:0.125rem solid var(--line)}
.palette-input-wrap input{flex:1;height:3.375rem;border:0;background:none;outline:none;font-size:1.0625rem;font-weight:600;color:var(--ink)}
.palette-results{overflow-y:auto;padding:0.5rem}
.p-group{font-size:0.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:0.625rem 0.625rem 0.25rem}
.p-item{display:flex;align-items:center;gap:0.6875rem;width:100%;padding:0.5rem 0.625rem;border-radius:0.9375rem}
.p-item[aria-selected="true"]{background:var(--accent-soft)}
.p-item .row-main{min-width:0}
.p-item .row-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.9375rem}
.p-hint{padding:0.5rem 0.75rem 0.75rem;font-size:0.7813rem;font-weight:600;color:var(--ink-3);display:flex;gap:0.875rem;flex-wrap:wrap}
mark{background:var(--butter);color:inherit;border-radius:0.3125rem;padding:0 0.0625rem}

/* ---------- Toast & delight ---------- */
.toast{white-space:nowrap;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + 6rem + env(safe-area-inset-bottom));z-index:80;background:var(--ink);color:var(--bg);padding:0.625rem 0.625rem 0.625rem 1.125rem;border-radius:1.125rem;display:flex;align-items:center;gap:0.875rem;font-size:0.9375rem;font-weight:700;box-shadow:var(--shadow-lg);max-width:calc(100% - 2rem);animation:toastIn .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,0.75rem) scale(.95)}}
.toast button{color:inherit;font-weight:800;padding:0.375rem 0.75rem;border-radius:0.75rem;background:color-mix(in srgb,var(--bg) 18%,transparent)}
@media (min-width:900px){.toast{bottom:2rem}}
.confetti{position:fixed;pointer-events:none;z-index:90;font-size:1.25rem;animation:pop-fly .9s ease-out forwards}
@keyframes pop-fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.sr-only{position:absolute;width:0.0625rem;height:0.0625rem;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================
   RPG style — cozy pixel adventure (html[data-style="rpg"]).
   Same layout and data; frames are notched pixel borders made of box-shadows.
   ===================================================================== */
:root[data-style="rpg"]{
  --bg:#f2e6c8; --surface:#fffaf0; --surface-2:#f5e8c8; --line:#e4d0a4; --edge:#c9a46b;
  --ink:#3b2617; --ink-2:#74533a; --ink-3:#a2805a;
  --accent:#e0682a; --accent-ink:#fffaf0; --accent-soft:#fbdcc0;
  --warn:#cc4a20; --warn-soft:#fad7c3; --danger:#bf3a2b; --ok:#3d8b32; --ok-soft:#d3eac3;
  --pink:#f7cfd3; --pink-i:#a3334a; --mint:#cbe8c0; --mint-i:#2b6c2e; --butter:#f6df9a; --butter-i:#7a5000;
  --lilac:#dcd3f0; --lilac-i:#52409a; --sky:#c6e0ef; --sky-i:#225a85; --peach:#f6d0b0; --peach-i:#984819;
  --leaf:#d3e9ad; --leaf-i:#436b18; --berry:#f0cde3; --berry-i:#85306d; --oat:#e8d9bd; --oat-i:#68492e;
  --px:#5b3a24; --shade:#c39a62; --gold:#e3a21d; --gold-2:#b87a08; --hp:#d93d55;
  --pattern:radial-gradient(color-mix(in srgb,#b08a50 30%,transparent) 0.0625rem,transparent 0.1rem) 0 0/1rem 1rem;
  --sprite-filter:none;
  --font-px:"Jersey 10","Baloo Bhaijaan 2",ui-monospace,monospace;
  --frame:0 -0.1875rem 0 0 var(--px),0 0.1875rem 0 0 var(--px),-0.1875rem 0 0 0 var(--px),0.1875rem 0 0 0 var(--px);
  --frame-sm:0 -0.125rem 0 0 var(--px),0 0.125rem 0 0 var(--px),-0.125rem 0 0 0 var(--px),0.125rem 0 0 0 var(--px);
  --frame-drop:var(--frame),0 0.4375rem 0 -0.0625rem var(--shade);
  --shadow:var(--frame-drop); --shadow-lg:var(--frame),0 0.625rem 0 -0.0625rem var(--shade),0 1.5rem 3.125rem rgba(60,30,10,.25);
  --radius:0rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root[data-style="rpg"]:not([data-theme="light"]){
  --bg:#1c1830; --surface:#2a2342; --surface-2:#352c52; --line:#433862; --edge:#110d20;
  --ink:#f6edd6; --ink-2:#c9bedf; --ink-3:#8e83b2;
  --accent:#ffb347; --accent-ink:#2a1804; --accent-soft:#4a3620;
  --warn:#ff8a5c; --warn-soft:#4a2a22; --danger:#ff6f6f; --ok:#8fdc6e; --ok-soft:#24402a;
  --pink:#4e2a3c; --pink-i:#ffb3c4; --mint:#22402f; --mint-i:#9fe7b4; --butter:#46391a; --butter-i:#ffd97a;
  --lilac:#362c5c; --lilac-i:#cbb9ff; --sky:#1f3752; --sky-i:#9fd1ff; --peach:#4a301f; --peach-i:#ffc39a;
  --leaf:#2b4220; --leaf-i:#bdeb8f; --berry:#462544; --berry-i:#ffb0e6; --oat:#3d3227; --oat-i:#ead3b6;
  --px:#6c5ca6; --shade:#0d0a1a; --gold:#ffd166; --gold-2:#c99a2e; --hp:#ff6b81;
  --pattern:radial-gradient(#ffffff70 0.0625rem,transparent 0.1rem) 0 0/6.0625rem 5.5625rem,radial-gradient(#ffffff45 0.0625rem,transparent 0.1rem) 2.5625rem 2.0625rem/3.8125rem 4.5625rem;
  --sprite-filter:drop-shadow(0.125rem 0 0 #9d8fd6) drop-shadow(-0.125rem 0 0 #9d8fd6) drop-shadow(0 0.125rem 0 #9d8fd6) drop-shadow(0 -0.125rem 0 #9d8fd6);
  color-scheme:dark;
}}
:root[data-style="rpg"][data-theme="dark"]{
  --bg:#1c1830; --surface:#2a2342; --surface-2:#352c52; --line:#433862; --edge:#110d20;
  --ink:#f6edd6; --ink-2:#c9bedf; --ink-3:#8e83b2;
  --accent:#ffb347; --accent-ink:#2a1804; --accent-soft:#4a3620;
  --warn:#ff8a5c; --warn-soft:#4a2a22; --danger:#ff6f6f; --ok:#8fdc6e; --ok-soft:#24402a;
  --pink:#4e2a3c; --pink-i:#ffb3c4; --mint:#22402f; --mint-i:#9fe7b4; --butter:#46391a; --butter-i:#ffd97a;
  --lilac:#362c5c; --lilac-i:#cbb9ff; --sky:#1f3752; --sky-i:#9fd1ff; --peach:#4a301f; --peach-i:#ffc39a;
  --leaf:#2b4220; --leaf-i:#bdeb8f; --berry:#462544; --berry-i:#ffb0e6; --oat:#3d3227; --oat-i:#ead3b6;
  --px:#6c5ca6; --shade:#0d0a1a; --gold:#ffd166; --gold-2:#c99a2e; --hp:#ff6b81;
  --pattern:radial-gradient(#ffffff70 0.0625rem,transparent 0.1rem) 0 0/6.0625rem 5.5625rem,radial-gradient(#ffffff45 0.0625rem,transparent 0.1rem) 2.5625rem 2.0625rem/3.8125rem 4.5625rem;
  --sprite-filter:drop-shadow(0.125rem 0 0 #9d8fd6) drop-shadow(-0.125rem 0 0 #9d8fd6) drop-shadow(0 0.125rem 0 #9d8fd6) drop-shadow(0 -0.125rem 0 #9d8fd6);
  color-scheme:dark;
}
[data-style="rpg"] *{border-radius:0!important}
[data-style="rpg"] body{background:var(--pattern),var(--bg)}
[data-style="rpg"] img{image-rendering:pixelated}
[data-style="rpg"] :is(.sprite,.hello-mascot,.gate-mascot,.empty img,.rail-brand img){filter:var(--sprite-filter)}
[data-style="rpg"] :focus-visible{outline:0.1875rem dashed var(--accent);outline-offset:0.25rem}

/* pixel type for titles, numbers and controls; Arabic falls back to Baloo glyph by glyph */
[data-style="rpg"] :is(.page-title,.section-title,.tt h3,.sheet h2,.stat b,.big,.kv b,.hero-stats b,.tab,.nav-item,.btn,.pill,.tchip,.chip,.area-tile .nm,.area-tile .st,.rail-brand,.topbar-title,.seg button,.month-head b,.cust-h,.subhead,.link,.more,.spill,.tag,.mini,.streak,.badge,.dbadge,.time,.amt,.sumline b,.gate-card h1,.char-name,.char-sub,.char-foot,.xp,.p-group,.eyebrow,.week-dots,.prog-line,.toast,.sync,.ring .v,.prow-top span,.wish .price,.sheet-badge,.facts dt,.setting-label,.qbanner){font-family:var(--font-px);font-weight:400;font-size-adjust:.5;letter-spacing:.02em}
[data-style="rpg"] :is(.page-title,.tt h3,.char-name,.gate-card h1,.sheet h2,.qbanner b,.section-title){font-weight:400;letter-spacing:.03em}

/* frames */
[data-style="rpg"] :is(.stat,.kv div,.hero-stats div,.dbadge,.mday.today,.toggle,.sbtn,.month-head button,.blob,.avatar,.tchip,.chip,.pill,.seg,.sync,.icon-btn,.type-opt){box-shadow:var(--frame-sm)}
[data-style="rpg"] :is(.card,.tcard,.hero,.area-tile,.wish,.char,.palette-box){box-shadow:var(--frame-drop)}
[data-style="rpg"] .tcard{margin-bottom:1.25rem}
[data-style="rpg"] .section{margin-bottom:1.875rem}
[data-style="rpg"] .areas{gap:1rem 0.875rem}
[data-style="rpg"] .tchips{gap:0.75rem}
[data-style="rpg"] .wishes{gap:0.875rem}
[data-style="rpg"] .stats{gap:0.75rem}
[data-style="rpg"] .hero-stats,[data-style="rpg"] .kv{gap:0.625rem}
[data-style="rpg"] .hero-actions,[data-style="rpg"] .toolbar{gap:0.75rem}

/* section titles = little banners */
[data-style="rpg"] .section-title{flex:0 1 auto;margin-right:auto;font-size:0.875rem;text-transform:uppercase;letter-spacing:.07em;background:var(--px);color:var(--surface);padding:0.1875rem 0.625rem 0.25rem;box-shadow:0 -0.125rem 0 var(--px),0 0.125rem 0 var(--px),-0.125rem 0 0 var(--px),0.125rem 0 0 var(--px),0.1875rem 0.3125rem 0 var(--shade)}
[data-style="rpg"] .section-head{margin:0 0.125rem 0.875rem}

/* shell */
[data-style="rpg"] .topbar{background:color-mix(in srgb,var(--bg) 92%,transparent)}
[data-style="rpg"] .tabbar{left:0.9375rem;right:0.9375rem;background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--frame),0 0.4375rem 0 -0.0625rem var(--shade)}
[data-style="rpg"] .tab{margin:0.4375rem 0.25rem}
[data-style="rpg"] .tab[aria-current="page"]{background:var(--accent-soft);box-shadow:var(--frame-sm)}
[data-style="rpg"] .tab .em{filter:grayscale(.6)}
[data-style="rpg"] .badge{background:var(--hp)}
[data-style="rpg"] .fab{box-shadow:var(--frame),0 0.4375rem 0 -0.0625rem color-mix(in srgb,var(--accent) 45%,#000);font-family:var(--font-px)}
[data-style="rpg"] .fab:active,[data-style="rpg"] .btn:active,[data-style="rpg"] .pill:active{transform:translateY(0.125rem)}
[data-style="rpg"] .rail-brand{font-size:1.5rem}
[data-style="rpg"] .nav-item[aria-current="page"]{box-shadow:var(--frame-sm);background:var(--accent-soft)}
[data-style="rpg"] .nav-item[aria-current="page"]::before{content:"▶";font-size:0.6875rem;color:var(--accent);margin-right:-0.375rem}

/* controls */
[data-style="rpg"] .btn{box-shadow:var(--frame-sm),0 0.3125rem 0 -0.0625rem var(--shade)}
[data-style="rpg"] .btn.pink{background:var(--accent);color:var(--accent-ink)}
[data-style="rpg"] .btn.secondary,[data-style="rpg"] .btn.danger{background:var(--surface-2)}
[data-style="rpg"] .pill.on{background:var(--accent);color:var(--accent-ink)}
[data-style="rpg"] .seg button[aria-pressed="true"]{box-shadow:inset 0 -0.1875rem 0 var(--ci,var(--accent))}
[data-style="rpg"] :is(.gadd input,.gadd-more input,.field input,.field select,.field textarea,.notes-box textarea,.setting select,.map-row select){border:0.125rem solid var(--px);background:var(--surface)}
[data-style="rpg"] .check{border:0.1875rem solid var(--px);background:var(--surface);font-family:var(--font-px)}
[data-style="rpg"] .check.on{background:var(--ok);border-color:var(--px);color:#fff}
[data-style="rpg"] .check.mid{background:linear-gradient(var(--surface) 50%,var(--ok-soft) 50%)}
[data-style="rpg"] .toggle::after{box-shadow:none;background:var(--surface);outline:0.125rem solid var(--px)}
[data-style="rpg"] .toggle[aria-checked="true"]{background:var(--ok)}
[data-style="rpg"] .row:hover{background:var(--surface-2)}
[data-style="rpg"] .gitem.lifting{box-shadow:var(--frame-sm),0 0.625rem 1.25rem rgba(0,0,0,.2)}

/* progress = segmented bars, rings get square caps */
[data-style="rpg"] .pbar{height:0.75rem;background:var(--surface-2);box-shadow:var(--frame-sm);margin:0.125rem}
[data-style="rpg"] .pbar i{background:repeating-linear-gradient(90deg,var(--ci,var(--accent)) 0 0.5rem,transparent 0.5rem 0.625rem)}
[data-style="rpg"] .pbar.ok i{background:repeating-linear-gradient(90deg,var(--ok) 0 0.5rem,transparent 0.5rem 0.625rem)}
[data-style="rpg"] .ring circle{stroke-linecap:butt}
[data-style="rpg"] .week-dots i{box-shadow:var(--frame-sm);margin:0 0.125rem}
[data-style="rpg"] .streak{background:var(--warn-soft);box-shadow:var(--frame-sm)}

/* world map tiles: a pixel ground strip at the bottom */
[data-style="rpg"] .area-tile{background:var(--c);padding-bottom:1.25rem;overflow:hidden}
[data-style="rpg"] .area-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0.625rem;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ci) 40%,var(--c)) 0 0.625rem,transparent 0.625rem 1.25rem) top/100% 0.25rem no-repeat,
             linear-gradient(color-mix(in srgb,var(--ci) 40%,var(--c)),color-mix(in srgb,var(--ci) 40%,var(--c))) bottom/100% 0.375rem no-repeat}
[data-style="rpg"] .area-tile .blob,[data-style="rpg"] .hero .blob{background:var(--surface)}
[data-style="rpg"] .area-tile .nm{font-size:0.9063rem}
[data-style="rpg"] .area-tile .st{font-size:0.7813rem}
[data-style="rpg"] .hero{background:var(--c)}
[data-style="rpg"] .wish{background:var(--berry)}
[data-style="rpg"] .avatar{background:var(--peach)}
[data-style="rpg"] .mday{background:var(--surface-2)}
[data-style="rpg"] .mday[aria-pressed="true"]{background:var(--px);color:var(--surface)}
[data-style="rpg"] mark{background:var(--gold);color:#2a1804}

/* sheet + palette = RPG dialog boxes */
[data-style="rpg"] .sheet{box-shadow:0 -0.1875rem 0 0 var(--px),0 -0.5625rem 0 0 var(--surface),0 -0.75rem 0 0 var(--px),0 -1.25rem 3.125rem rgba(0,0,0,.25)}
@media (min-width:900px){[data-style="rpg"] .sheet{box-shadow:var(--shadow-lg)}}
[data-style="rpg"] .sheet-grip{height:0.25rem;background:var(--px);width:2.25rem}
[data-style="rpg"] .facts{box-shadow:var(--frame-sm)}
[data-style="rpg"] .sheet-badge{box-shadow:var(--frame-sm)}
[data-style="rpg"] .scrim,[data-style="rpg"] .palette{background:rgba(20,12,30,.45)}
[data-style="rpg"] .p-item[aria-selected="true"]{background:var(--accent-soft);box-shadow:inset 0.1875rem 0 0 var(--accent)}

/* toast = classic dark text box with a white rim */
[data-style="rpg"] .toast{background:#1b1838;color:#fffaf0;box-shadow:0 -0.1875rem 0 #fffaf0,0 0.1875rem 0 #fffaf0,-0.1875rem 0 0 #fffaf0,0.1875rem 0 0 #fffaf0,0 0 0 0.375rem #1b1838,0 0.875rem 1.875rem rgba(0,0,0,.35)}
[data-style="rpg"] .toast button{background:#fffaf022;color:#ffd166}

/* gate */
[data-style="rpg"] .pin-dots span{border:0.1875rem solid var(--px);background:var(--surface)}
[data-style="rpg"] .pin-dots span.on{background:var(--gold);border-color:var(--px)}
[data-style="rpg"] .gate-mascot{width:6rem;animation:hop 1.1s steps(2) infinite}

/* character card */
.char-wrap{display:flex;gap:0.875rem;align-items:flex-start;margin:0 0 1.875rem}
.char{flex:1;display:flex;gap:0.875rem;align-items:center;padding:0.75rem 0.875rem;background:var(--surface);min-width:0}
.sprite{width:4rem;height:4rem;flex-shrink:0;animation:hop 1.1s steps(2) infinite}
@keyframes hop{50%{transform:translateY(-0.1875rem)}}
.char-main{flex:1;min-width:0}
.char-name{font-size:1.375rem;line-height:1.1;display:flex;align-items:baseline;gap:0.5rem;flex-wrap:wrap}
.char-name .lv{font-size:0.9375rem;color:var(--surface);background:var(--accent);padding:0.0625rem 0.375rem}
.char-sub{font-size:0.8438rem;color:var(--ink-2);margin-top:0.125rem}
.xpbar{height:0.875rem;background:var(--surface-2);box-shadow:var(--frame-sm);margin:0.5rem 0.125rem 0.4375rem}
.xpbar i{display:block;height:100%;min-width:0.25rem;background:repeating-linear-gradient(90deg,var(--gold) 0 0.5rem,var(--gold-2) 0.5rem 0.625rem)}
.char-foot{display:flex;align-items:center;gap:0.625rem;font-size:0.8125rem;color:var(--ink-2);flex-wrap:wrap}
.hearts{display:inline-flex;gap:0.0625rem;color:var(--hp);font-size:1.0625rem;line-height:1}
.hearts i{font-style:normal;opacity:.5}
.hearts i.on{opacity:1}
.xp{font-family:var(--font-px);font-size-adjust:.5;font-size:0.75rem;font-weight:400;color:var(--butter-i);background:var(--butter);padding:0.0625rem 0.375rem;white-space:nowrap;box-shadow:var(--frame-sm)}

/* quest-complete banner */
.qbanner{font-size-adjust:.5;position:fixed;left:50%;top:26%;transform:translateX(-50%);z-index:95;pointer-events:none;background:#1b1838;color:#fffaf0;padding:0.875rem 1.625rem 0.75rem;text-align:center;white-space:nowrap;
  box-shadow:0 -0.1875rem 0 #fffaf0,0 0.1875rem 0 #fffaf0,-0.1875rem 0 0 #fffaf0,0.1875rem 0 0 #fffaf0,0 0 0 0.4375rem #1b1838,0 1rem 2.5rem rgba(0,0,0,.4);animation:qb 1.6s ease-out forwards}
.qbanner b{display:block;font-size:1.5rem;letter-spacing:.07em;text-transform:uppercase;color:#ffd166;font-weight:700}
.qbanner span{display:block;font-size:1rem;margin-top:0.125rem}
@keyframes qb{0%{opacity:0;transform:translate(-50%,0.75rem) scale(.85)}12%{opacity:1;transform:translate(-50%,0) scale(1.06)}20%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-0.875rem)}}
.confetti.px{font-size:1.125rem;font-weight:400}
/* ---------- Stage 2: Today tab (progress, to-dos, 4 boxes) ---------- */
.today-prog{display:flex;align-items:center;gap:0.875rem;margin-bottom:1.125rem;background:var(--c);color:var(--ci)}
.tp-main{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.tp-main b{font-size:1.0625rem}
.tp-main>span{font-size:0.8125rem;font-weight:700;opacity:.85}
.tp-goals{display:flex;align-items:center;gap:0.5rem;margin-top:0.25rem;flex-wrap:wrap}
.subhead.late{color:var(--warn)}
.subhead .count{text-transform:none;letter-spacing:0}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem}
.box{padding:0.625rem 0.5rem 0.375rem;min-width:0;border-top:0.3125rem solid var(--c)}
.box-head{display:flex;justify-content:space-between;align-items:center;gap:0.375rem;padding:0 0.25rem 0.375rem;font-size:0.875rem}
.box-head b{font-weight:800}
.box-empty{margin:0.25rem 0.25rem 0.5rem;font-size:0.8125rem;font-weight:600;color:var(--ink-3)}
.box .rows .row{padding-left:0.375rem;padding-right:0.375rem;gap:0.5rem}
.box .row-title{font-size:0.875rem}
.prio-row{grid-column:1/-1;display:flex;gap:0.625rem;align-items:center;flex-wrap:wrap}
.prio-row .prio{flex:1;min-width:7.5rem}
.prio-row .prio[aria-pressed="true"]{background:var(--c,var(--accent-soft));color:var(--ci,var(--ink));box-shadow:inset 0 0 0 0.125rem var(--ci,var(--accent))}
.prio-box{width:100%;font-size:0.8125rem;font-weight:700;color:var(--ink-3);text-align:center}
@media (max-width:359px){.boxes{grid-template-columns:1fr}}
.box .xp,.box .spill{display:none}
/* ---------- Stage 3: Calendar tab ---------- */
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:0.625rem;flex-wrap:wrap;margin:0.125rem 0 0.75rem}
.cal-title{font-size:1.5rem;font-weight:800;color:var(--ink);padding:0 0.125rem;background:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cal-title span{font-size:1rem;color:var(--ink-3)}
.cal-tools{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.cal-filter{position:relative;width:2.5rem;height:2.5rem;border-radius:0.875rem;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;font-size:1.25rem;font-weight:800;overflow:hidden}
.cal-filter select{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;font-size:16PX}
.cal-card{padding:0.5rem 0.25rem}
.cal-head{display:flex;align-items:center;gap:0.125rem;min-width:0}
.cal-arrow{width:1.875rem;height:2.25rem;border-radius:0.625rem;font-size:1.5rem;font-weight:800;color:var(--ink-3);flex-shrink:0}
.cal-filter.on{background:var(--accent);color:#fff}
.cal-filtered{font-size:0.8125rem;font-weight:700;color:var(--ink-2);margin:-0.25rem 0.25rem 0.625rem}
.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0.25rem 0}
.cdow{text-align:center;font-size:0.75rem;font-weight:800;color:var(--ink-3);padding:0.25rem 0}
.cdow.now{color:var(--warn)}
.cday{display:flex;flex-direction:column;align-items:center;gap:0.0625rem;padding:0.25rem 0 0.125rem;min-width:0;background:none;border-radius:0.875rem}
.cday.blank{visibility:hidden}
.cday .cd{width:min(2.375rem,92%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:1.125rem;font-weight:800;font-variant-numeric:tabular-nums}
.cday .ch{font-size:0.6875rem;font-weight:700;color:var(--ink-3);line-height:1.2;min-height:0.8125rem}
.cday.today .cd{color:var(--warn)}
.cday[aria-pressed="true"] .cd{background:var(--ink);color:var(--bg)}
.cday .mdots{justify-content:center}
.cyear{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem;padding:0.125rem}
.cmini{position:relative;display:flex;flex-direction:column;gap:0.25rem;padding:0.5rem 0.25rem;border-radius:0.875rem;background:var(--surface-2);text-align:left;min-width:0;overflow:hidden}
.cmini.cur{box-shadow:inset 0 0 0 0.125rem var(--warn)}
.cmini.past{opacity:.55}
.cmini.past::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;font-size:3.5rem;font-weight:300;color:var(--ink-3);opacity:.6;pointer-events:none}
.cm-h{display:flex;justify-content:space-between;align-items:center;font-size:0.875rem}
.cm-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;font-size:min(0.5rem,9PX);letter-spacing:-.02em;font-weight:700;color:var(--ink-3);text-align:center}
.cm-g i{font-style:normal;line-height:1.5}
.cm-g i.h{color:var(--ink);font-weight:800}
.cm-g i.t{background:var(--warn);color:#fff;border-radius:0.25rem}
@media (min-width:900px){.cyear{grid-template-columns:repeat(4,minmax(0,1fr))}.cm-g{font-size:0.625rem}}
.cal-dayhead{display:flex;justify-content:space-between;align-items:flex-start;gap:0.625rem;margin:1.125rem 0.25rem 0.625rem;font-size:1.125rem;color:var(--ink-2)}
.cal-dayhead b{font-size:1.25rem;color:var(--ink)}
.cal-dayhead .hj{font-size:0.875rem;font-weight:700;color:var(--ink-3);margin-top:0.125rem}
.cal-list{padding:0.625rem}
.tline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}
.tl{display:grid;grid-template-columns:4rem 1fr;gap:0.5rem;align-items:stretch}
.tl-day{font-size:0.8125rem;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;margin:0.5rem 0.125rem 0}
.tl-day .count{text-transform:none;letter-spacing:0;font-weight:600}
.tl-time{display:flex;align-items:flex-start;gap:0.375rem;padding-top:0.875rem;font-size:0.75rem;font-weight:800;color:var(--ink-3);white-space:nowrap}
.tl-time i{width:0.5625rem;height:0.5625rem;border-radius:50%;border:0.125rem solid var(--ci,var(--accent));flex-shrink:0;margin-top:0.125rem}
.ccard{display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.75rem;border-radius:1rem;background:var(--surface-2);min-width:0;text-align:left;width:100%}
.ccard.pri{background:var(--c);color:var(--ci)}
.ccard.done .cc-title{text-decoration:line-through;opacity:.6}
.cc-main{flex:1;min-width:0}
.cc-title{font-size:1rem;font-weight:800;overflow-wrap:anywhere}
.cc-meta{margin-top:0.125rem;font-size:0.8125rem;font-weight:700;display:flex;gap:0.375rem;flex-wrap:wrap}
.cc-lab{opacity:.9}
.cal-more{text-align:center;margin:0.625rem 0 1.125rem}
[data-style="rpg"] :is(.cal-title,.cday .cd,.cm-h b,.tl-day,.cal-dayhead b){font-family:var(--font-px);font-weight:400;font-size-adjust:.5}
[data-style="rpg"] .cday[aria-pressed="true"] .cd{border-radius:0;background:var(--px);color:var(--surface)}
[data-style="rpg"] :is(.ccard,.cmini,.cal-filter){border-radius:0;box-shadow:var(--frame-sm)}
/* ---------- Stage 4: Finance tab ---------- */
.fin-hero .eyebrow{margin-bottom:0.25rem}
.fin-net{font-size:2.5rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ci)}
.fin-net small{font-size:1rem;opacity:.75}
.fin-change{font-size:0.875rem;font-weight:700;margin:0.25rem 0 0.125rem}
.fin-change.pos,.fin-note .pos{color:var(--ok)} .fin-change.neg,.fin-note .neg{color:var(--danger)}
.fin-month{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem}
.fm{padding:0.75rem 0.625rem;display:flex;flex-direction:column;gap:0.25rem;min-width:0}
.fm span{font-size:0.8125rem;font-weight:700;color:var(--ink-3);white-space:nowrap}
.fm b{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fm.pos b{color:var(--ok)} .fm.neg b{color:var(--danger)}
.fin-note{font-size:0.8125rem;font-weight:600;color:var(--ink-2);margin:0.5rem 0.25rem 0}
.faccts{display:grid;grid-template-columns:1fr;gap:0.5rem}
.facct{display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.875rem;text-align:left;width:100%}
.facct.unset{border-style:dashed;opacity:.85}
.fa-e{font-size:1.375rem}
.fa-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fa-main b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-main span{font-size:0.75rem;font-weight:600;color:var(--ink-3)}
.check-row{display:flex;align-items:center;gap:0.5rem;font-weight:600;margin:0.375rem 0.125rem 0}
.fa-amt{font-size:1.125rem;font-weight:800;font-variant-numeric:tabular-nums}
.fgoals{display:grid;grid-template-columns:1fr;gap:0.625rem}
@media (min-width:700px){.fgoals{grid-template-columns:1fr 1fr}}
.fgoal{display:flex;flex-direction:column;gap:0.5rem;padding:0.75rem 0.875rem;text-align:left;width:100%;border-left:0.375rem solid var(--line)}
.fgoal.st-ok{border-left-color:var(--ok)} .fgoal.st-warn{border-left-color:var(--warn)} .fgoal.st-over{border-left-color:var(--danger)}
.fg-top{display:flex;align-items:center;gap:0.625rem}
.fg-e{font-size:1.5rem}
.fg-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fg-main b{font-size:1rem;font-weight:800}
.fg-main span{font-size:0.75rem;font-weight:700;color:var(--ink-3)}
.fg-pct{font-size:1.125rem;font-weight:800;font-variant-numeric:tabular-nums}
.fg-bar{height:0.625rem;border-radius:62.4375rem;background:var(--surface-2);overflow:hidden}
.fg-bar i{display:block;height:100%;border-radius:62.4375rem;background:var(--accent)}
.st-ok .fg-bar i{background:var(--ok)} .st-warn .fg-bar i{background:var(--warn)} .st-over .fg-bar i{background:var(--danger)}
.fg-nums{display:flex;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;font-size:0.8125rem;font-weight:700;color:var(--ink-2)}
.fg-eta{font-size:0.8125rem;font-weight:700;color:var(--ink-3)}
.st-ok .fg-eta{color:var(--ok)} .st-warn .fg-eta{color:var(--warn)} .st-over .fg-eta{color:var(--danger)}
.fgoal-sum{background:var(--surface-2);border-radius:0.875rem;padding:0.625rem 0.75rem;margin:0.25rem 0 0.75rem;font-weight:700}
.fgoal-sum span{font-size:0.8125rem;color:var(--ink-3)}
.fin-assets{display:grid;grid-template-columns:1fr;gap:0.625rem}
@media (min-width:700px){.fin-assets{grid-template-columns:1fr 1fr}}
.fin-asset{padding:0.75rem 0.875rem}
.fin-asset .kv{grid-template-columns:repeat(3,minmax(0,1fr))}
.fin-asset + .fin-asset{border-top:0;padding-top:0.75rem}
.fin-src{font-size:0.75rem;font-weight:600;color:var(--ink-3);margin-top:0.5rem}
.fin-legend{display:flex;gap:0.875rem;justify-content:center;font-size:0.75rem;font-weight:700;color:var(--ink-2);padding-bottom:0.375rem}
.fin-legend i{display:inline-block;width:0.625rem;height:0.625rem;border-radius:0.1875rem;margin-right:0.25rem;vertical-align:-0.0625rem}
.fin-cats{display:flex;flex-direction:column;gap:0.5rem}
.fc{display:grid;grid-template-columns:minmax(0,9em) 1fr auto;gap:0.625rem;align-items:center;font-size:0.8125rem;font-weight:700}
.fc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-bar{height:0.625rem;border-radius:62.4375rem;background:var(--surface-2);overflow:hidden}
.fc-bar i{display:block;height:100%;background:var(--peach-i);border-radius:62.4375rem}
.fdebt{display:flex;justify-content:space-between;gap:0.625rem;padding:0.375rem 0.125rem;font-size:0.9375rem;font-weight:700}
.fdebt.pos b{color:var(--ok)} .fdebt.neg b{color:var(--danger)}
.fin-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem}
@media (min-width:700px){.fin-facts{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ff{padding:0.75rem;display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.ff .e{font-size:1.25rem}
.ff b{font-size:1.0625rem;font-weight:800;overflow-wrap:anywhere}
.ff span:last-child{font-size:0.75rem;font-weight:600;color:var(--ink-3)}
[data-style="rpg"] :is(.fin-net,.fm b,.fg-pct,.ff b){font-family:var(--font-px);font-weight:400;font-size-adjust:.5}
[data-style="rpg"] :is(.fgoal,.fm,.ff,.fg-bar,.fc-bar){border-radius:0}
[data-style="rpg"] .fg-bar i,[data-style="rpg"] .fc-bar i{border-radius:0}
.fin-add{margin:0.625rem 0 0.75rem;height:2.625rem;padding:0 1.125rem}
.fin-quick{display:inline-flex;gap:0.75rem}
.mkinds{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ================================================================ Pregnancy (#preg) — its own soft & warm palette; the page switches html[data-mode="preg"] */
:root[data-mode="preg"]{
  --bg:#fff5ef; --surface:#ffffff; --surface-2:#fff0ea; --line:#f6dfd6; --edge:#f3d7cc;
  --ink:#5b3b3f; --ink-2:#8b6a6c; --ink-3:#b39592;
  --accent:#e9748f; --accent-ink:#ffffff; --accent-soft:#ffe1e7;
  --pg-peach:#ffc9b0; --pg-peach-d:#f0956b; --pg-blush:#ffe0e6; --pg-rose:#e0607f; --pg-cream:#fff8f3;
  --pg-grad:linear-gradient(135deg,#ffe2d2 0%,#ffd5de 55%,#fde5f0 100%);
  --font:"Baloo Bhaijaan 2",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --shadow:0 0.0625rem 0 var(--edge),0 0.5rem 1.375rem rgba(224,96,127,.08);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root[data-mode="preg"]:not([data-theme="light"]){
  --bg:#231a1c; --surface:#302328; --surface-2:#3a2a30; --line:#4a363c; --edge:#170f12;
  --ink:#fdebe6; --ink-2:#d8b9b4; --ink-3:#a3857f;
  --accent:#f48fa6; --accent-ink:#2b1017; --accent-soft:#4a2a33;
  --pg-peach:#6d4535; --pg-peach-d:#f2a07c; --pg-blush:#4d2c36; --pg-rose:#f58fa7; --pg-cream:#2b2023;
  --pg-grad:linear-gradient(135deg,#4b302d 0%,#4c2b37 60%,#3f2b3d 100%);
  --shadow:0 0.0625rem 0 var(--edge),0 0.5rem 1.375rem rgba(0,0,0,.25); color-scheme:dark;
}}
:root[data-mode="preg"][data-theme="dark"]{
  --bg:#231a1c; --surface:#302328; --surface-2:#3a2a30; --line:#4a363c; --edge:#170f12;
  --ink:#fdebe6; --ink-2:#d8b9b4; --ink-3:#a3857f;
  --accent:#f48fa6; --accent-ink:#2b1017; --accent-soft:#4a2a33;
  --pg-peach:#6d4535; --pg-peach-d:#f2a07c; --pg-blush:#4d2c36; --pg-rose:#f58fa7; --pg-cream:#2b2023;
  --pg-grad:linear-gradient(135deg,#4b302d 0%,#4c2b37 60%,#3f2b3d 100%);
  --shadow:0 0.0625rem 0 var(--edge),0 0.5rem 1.375rem rgba(0,0,0,.25); color-scheme:dark;
}
.pg{display:flex;flex-direction:column;gap:0.875rem;padding:0.25rem 0 1.5rem;max-width:45rem;margin:0 auto}
.pg h2,.pg h3{font-family:var(--font)}
.pg-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0.3125rem;background:var(--surface);padding:0.3125rem;border-radius:1.375rem;box-shadow:var(--shadow)}
.pg-tabs button{display:flex;flex-direction:column;align-items:center;gap:0;padding:0.4375rem 0.125rem 0.375rem;border-radius:1.0625rem;font-weight:800;font-size:0.8125rem;color:var(--ink-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-tabs button span{font-size:1.25rem;line-height:1.2}
.pg-tabs button[aria-selected="true"]{background:var(--pg-grad);color:var(--ink);box-shadow:inset 0 0 0 0.125rem color-mix(in srgb,var(--pg-rose) 30%,transparent)}
.pg-mini{display:flex;align-items:center;justify-content:center;gap:0.375rem;font-weight:700;color:var(--ink-2);font-size:0.875rem;margin:-0.25rem 0}
.pg-mini b{color:var(--pg-rose)}
.pg-hero{position:relative;display:flex;gap:1rem;align-items:center;padding:1.25rem 1.125rem;border-radius:2rem;background:var(--pg-grad);box-shadow:var(--shadow)}
.pg-orb{--p:0;flex-shrink:0;width:6.75rem;height:6.75rem;border-radius:50%;padding:0.4375rem;background:conic-gradient(var(--pg-rose) calc(var(--p) * 1%),color-mix(in srgb,var(--surface) 65%,transparent) 0)}
.pg-orb>span{width:100%;height:100%;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:3.25rem;animation:pgfloat 4.5s ease-in-out infinite}
@keyframes pgfloat{50%{transform:translateY(-0.25rem) rotate(-5deg)}}
.pg-hero-t{flex:1;min-width:0;padding-right:1.75rem}
.pg-eyebrow{font-size:0.7813rem;font-weight:800;color:var(--pg-rose);text-transform:uppercase;letter-spacing:.07em}
.pg-week{font-size:1.9375rem;font-weight:800;line-height:1.08;color:var(--ink)}
.pg-week small{font-size:0.9375rem;font-weight:700;color:var(--ink-2)}
.pg-sub{font-size:0.9063rem;font-weight:600;color:var(--ink-2);margin-top:0.25rem;line-height:1.35;overflow-wrap:anywhere}
.pg-gear{position:absolute;top:0.625rem;right:0.625rem;width:2.375rem;height:2.375rem;border-radius:50%;background:color-mix(in srgb,var(--surface) 70%,transparent);font-size:1.0625rem}
.pg-track{display:grid;grid-template-columns:14fr 14fr 12fr;gap:0.3125rem}
.pg-seg{position:relative;height:1.625rem;border-radius:0.8125rem;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.pg-seg i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--pg-peach),var(--pg-rose));border-radius:0.8125rem}
.pg-seg span{position:relative;display:block;text-align:center;font-size:0.75rem;font-weight:800;line-height:1.625rem;color:var(--ink)}
.pg-count{font-size:0.875rem;font-weight:600;color:var(--ink-2);text-align:center;margin-top:-0.25rem;line-height:1.5}
.pg-count b{color:var(--pg-rose);font-size:1.125rem}
.pg-tag{display:inline-block;font-size:0.6875rem;font-weight:800;padding:0 0.4375rem;border-radius:0.5rem;background:var(--accent-soft);color:var(--pg-rose)}
.pg-strip{display:flex;gap:0.375rem;overflow-x:auto;padding:0.25rem 0.125rem 0.5rem;margin:-0.25rem 0;scrollbar-width:none;scroll-snap-type:x proximity}
.pg-strip::-webkit-scrollbar{display:none}
.pg-wk{flex:0 0 3rem;height:3.875rem;border-radius:1rem;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);scroll-snap-align:center}
.pg-wk small{font-size:0.6875rem;font-weight:800;color:var(--ink-3)}
.pg-wk span{font-size:1.375rem;line-height:1.1}
.pg-wk.past{opacity:.5}
.pg-wk.now{background:var(--pg-grad);box-shadow:inset 0 0 0 0.1563rem var(--pg-rose);opacity:1}
.pg-wk.now small{color:var(--pg-rose)}
.pg-card{background:var(--surface);border-radius:1.625rem;padding:1rem;box-shadow:var(--shadow)}
.pg-card-h{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:0.375rem}
.pg-card-h h2{margin:0;font-size:1.0625rem;font-weight:800;color:var(--ink)}
.pg-link{font-weight:800;color:var(--pg-rose);font-size:0.875rem;padding:0.25rem 0.375rem;flex-shrink:0}
.pg-p{margin:0.375rem 0;font-size:0.9063rem;line-height:1.5;color:var(--ink)}
.pg-p b{color:var(--pg-rose)}
.pg-muted{color:var(--ink-2);font-size:0.875rem;font-weight:600;margin:0.25rem 0}
.pg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}
.pg-list .pg-dayh{font-size:0.7813rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--pg-rose);padding:0.75rem 0.25rem 0.125rem;border-bottom:0.0625rem dashed var(--line)}
.pg-list .pg-dayh:first-child{padding-top:0}
.pg-later{margin-top:0.5rem}
.pg-later summary{list-style:none;cursor:pointer;font-weight:800;font-size:0.875rem;color:var(--ink-2);padding:0.625rem 0.75rem;border-radius:0.875rem;background:var(--surface-2,rgba(0,0,0,.03));text-align:center}
.pg-later summary::-webkit-details-marker{display:none}
.pg-later[open] summary{margin-bottom:0.375rem}
.pg-row{display:flex;align-items:center;gap:0.75rem;width:100%;text-align:start;padding:0.5rem 0.375rem;border-radius:1rem;min-height:3.125rem;min-width:0}
.pg-row:hover{background:var(--surface-2)}
.pg-e{font-size:1.375rem;width:1.875rem;text-align:center;flex-shrink:0}
.pg-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.0625rem}
.pg-rt b{font-size:0.9375rem;font-weight:700;overflow-wrap:anywhere;line-height:1.3}
.pg-rt small,.pg-rs small{font-size:0.7813rem;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.pg-rs{display:flex;flex-direction:column;align-items:flex-end;gap:0.125rem;flex-shrink:0;text-align:end;max-width:42%}
@media (min-width:360px){.pg-rs{max-width:58%}.pg-row>.pg-rs>small:last-child{white-space:nowrap}}
.pg-flag{font-size:0.7188rem;font-weight:800;padding:0.0625rem 0.5rem;border-radius:0.5625rem;background:var(--warn-soft);color:var(--warn)}
.pg-ok{font-size:0.75rem;font-weight:800;color:var(--ok)}
.pg-res{white-space:pre-line}
.pg-date{flex-shrink:0;width:2.875rem;height:3.125rem;border-radius:0.9375rem;background:var(--pg-blush);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.pg-date small{font-size:0.6875rem;font-weight:800;color:var(--pg-rose);text-transform:uppercase}
.pg-date b{font-size:1.25rem;font-weight:800;color:var(--ink)}
.pg-due{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.5rem}
.pg-pill{padding:0.4375rem 0.75rem;border-radius:0.875rem;background:var(--pg-blush);font-weight:700;font-size:0.8438rem;color:var(--ink);text-align:start}
.pg-pill small{color:var(--pg-rose);font-weight:800}
.pg-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem}
.pg-q{display:flex;flex-direction:column;align-items:center;gap:0.125rem;padding:0.625rem 0.125rem;border-radius:1.125rem;background:var(--pg-cream);font-size:0.7813rem;font-weight:800;color:var(--ink-2);box-shadow:inset 0 0 0 0.0938rem var(--line)}
.pg-q span{font-size:1.5625rem;line-height:1.15}
.pg-check.done{opacity:.6}
.pg-check.due .pg-rt b{color:var(--pg-rose)}
.pg-check.missed .pg-rt b{color:var(--ink-2)}
.pg-wide{width:100%}
.pg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}
.pg-tile{display:flex;flex-direction:column;align-items:flex-start;gap:0.0625rem;padding:0.75rem;border-radius:1.25rem;background:var(--surface);box-shadow:var(--shadow);text-align:start;min-width:0}
.pg-tile>span{font-size:0.7813rem;font-weight:800;color:var(--ink-2)}
.pg-tile b{font-size:1.3125rem;font-weight:800;color:var(--ink);line-height:1.2}
.pg-tile b small{font-size:0.8125rem;color:var(--ink-2)}
.pg-tile>small{font-size:0.7188rem;font-weight:600;color:var(--ink-3);overflow-wrap:anywhere}
.pg-chart svg{width:100%;max-width:28.75rem;height:auto;display:block;margin-inline:auto}
.pg-chart text{font:700 1.25rem var(--font);fill:var(--ink-3)}
.pg-legend{display:flex;align-items:center;gap:0.375rem;font-size:0.8125rem}
.pg-legend i{width:0.75rem;height:0.75rem;border-radius:0.25rem;display:inline-block}
.pg-legend i+i,.pg-legend i:not(:first-child){margin-left:0.625rem}
.pg-med{display:flex;align-items:center;gap:0.25rem}
.pg-tick{flex-shrink:0;width:2.125rem;height:2.125rem;border-radius:0.75rem;border:0.1563rem solid var(--pg-peach-d);color:transparent;font-weight:900;font-size:1rem;margin-left:0.25rem;display:grid;place-items:center}
.pg-tick.on{background:var(--pg-rose);border-color:var(--pg-rose);color:#fff}
.pg-strike{text-decoration:line-through;color:var(--ink-3)}
.pg-sub-h{font-size:0.8125rem;font-weight:800;color:var(--pg-rose);margin:0.625rem 0.25rem 0}
.pg-cnt{font-size:0.8125rem;color:var(--ink-2);font-weight:700}
.pg-total{text-align:end;font-weight:800;color:var(--ink-2);margin:0.5rem 0.25rem 0;font-size:0.875rem}
.pg-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.75rem,1fr));gap:0.625rem}
.pg-names h3{margin:0 0 0.375rem;font-size:0.875rem;font-weight:800;color:var(--ink-2)}
.pg-name{display:flex;align-items:center;gap:0.125rem;background:var(--pg-cream);border-radius:0.875rem;padding:0.125rem 0.125rem 0.125rem 0.625rem;margin-bottom:0.375rem;box-shadow:inset 0 0 0 0.0938rem var(--line);min-width:0}
.pg-nm{flex:1;min-width:0;text-align:start;font-weight:800;font-size:0.9375rem;display:flex;flex-direction:column;padding:0.375rem 0;overflow-wrap:anywhere;color:var(--ink)}
.pg-nm small{font-size:0.7188rem;font-weight:600;color:var(--ink-2)}
.pg-heart{flex-shrink:0;min-width:2.625rem;height:2.5rem;border-radius:0.75rem;font-size:1.125rem;display:flex;align-items:center;justify-content:center;gap:0.125rem}
.pg-heart small{font-size:0.6875rem;font-weight:800;color:var(--ink-2)}
.pg-jt{font-size:0.9063rem;font-weight:600;white-space:pre-line;overflow-wrap:anywhere;color:var(--ink)}
.pg-warn summary{font-weight:800;cursor:pointer;color:var(--danger);list-style:none}
.pg-warn summary::-webkit-details-marker{display:none}
.pg-warn ul{margin:0.625rem 0 0;padding-left:1.25rem;font-size:0.875rem;font-weight:600;line-height:1.6;color:var(--ink)}
.pg-chk{display:flex;align-items:center;gap:0.625rem;margin-top:0.875rem;font-weight:800}
.pg-chk input{width:1.375rem;height:1.375rem;accent-color:var(--pg-rose)}
.pg-by{margin:0;font-size:0.8125rem;font-weight:600}
.pg-kickbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:11.875rem;height:11.875rem;margin:1.125rem auto 0.375rem;border-radius:50%;background:var(--pg-grad);box-shadow:inset 0 0 0 0.25rem color-mix(in srgb,var(--pg-rose) 40%,transparent),var(--shadow);color:var(--ink)}
.pg-kickbtn b{font-size:4rem;line-height:1;font-weight:800;color:var(--pg-rose)}
.pg-kickbtn span{font-size:0.8125rem;font-weight:800;color:var(--ink-2)}
.pg-wkbig{display:flex;gap:0.875rem;align-items:center;padding:0.875rem;margin:0.75rem 0;border-radius:1.375rem;background:var(--pg-grad)}
.pg-wkbig>span{font-size:3.25rem}
.pg-wkbig b{font-size:1rem}
.pg-wkbig small{display:block;font-weight:700;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.pg-orb>span{animation:none}}
@media (max-width:359px){.pg-tiles{grid-template-columns:1fr 1fr}.pg-orb{width:5.5rem;height:5.5rem}.pg-orb>span{font-size:2.625rem}.pg-week{font-size:1.625rem}}
/* home card (shown in every style) */
.pg-home{display:flex;align-items:center;gap:0.875rem;width:100%;padding:1rem;border-radius:1.5rem;background:linear-gradient(135deg,#ffe2d2 0%,#ffd5de 55%,#fde5f0 100%);color:#5b3b3f;text-align:start;box-shadow:var(--shadow)}
.pg-home-e{width:3.625rem;height:3.625rem;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:2rem;flex-shrink:0}
.pg-home-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.125rem}
.pg-home-t b{font-size:1.0313rem;font-weight:800;overflow-wrap:anywhere}
.pg-home-t small{font-size:0.8125rem;font-weight:700;color:#8b6a6c;overflow-wrap:anywhere}
.pg-home-bar{display:block;height:0.5rem;border-radius:0.3125rem;background:rgba(255,255,255,.75);overflow:hidden;margin-top:0.375rem}
.pg-home-bar i{display:block;height:100%;background:linear-gradient(90deg,#f0956b,#e0607f);border-radius:0.3125rem}
.pg-home-go{font-size:1.625rem;font-weight:800;color:#e0607f}
[data-style="rpg"] .pg-home{border-radius:0.25rem;box-shadow:var(--frame),0 0.3125rem 0 -0.0625rem var(--shade)}
/* pregnancy: stages, cycle, library, feeding */
.pg-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:0.25rem;padding:0.25rem;border-radius:1.25rem;background:color-mix(in srgb,var(--pg-rose) 12%,var(--surface))}
.pg-phases button{position:relative;display:flex;align-items:center;justify-content:center;gap:0.3125rem;padding:0.5rem 0.25rem;border-radius:1rem;font-weight:800;font-size:0.8438rem;color:var(--ink-2);white-space:nowrap}
.pg-phases button span{font-size:1.0625rem}
.pg-phases button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pg-now{position:absolute;top:0.3125rem;right:0.4375rem;width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--pg-rose)}
.pg-cyc{display:grid;grid-template-columns:repeat(var(--cols,15),minmax(0,1.375rem));gap:0.3125rem 0.1875rem;justify-content:center;justify-items:center;align-items:center;margin-top:-0.25rem}
.pg-cyc i{width:1.125rem;height:1.125rem;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 0.0938rem var(--line);font-style:normal;font-size:0.625rem;font-weight:800;display:grid;place-items:center;color:#fff}
.pg-cyc i.per{background:var(--pg-rose);box-shadow:none}
.pg-cyc i.fer{background:var(--pg-peach-d);box-shadow:none}
.pg-cyc i.ov{background:var(--pg-peach-d);box-shadow:0 0 0 0.1563rem var(--pg-rose)}
.pg-cyc i.now{width:1.5rem;height:1.5rem;margin:-0.1875rem 0;box-shadow:0 0 0 0.1875rem var(--ink);color:var(--ink);background:var(--surface)}
.pg-cyc i.now.per,.pg-cyc i.now.fer,.pg-cyc i.now.ov{color:#fff;background:var(--pg-rose)}
.pg-legend i.ovk{background:var(--pg-peach-d);box-shadow:0 0 0 0.125rem var(--pg-rose)}
.pg-facts{list-style:none;margin:0;padding:0}
.pg-facts li{display:flex;justify-content:space-between;gap:0.625rem;padding:0.5rem 0.125rem;border-bottom:0.0938rem solid var(--line);font-size:0.9063rem}
.pg-facts li:last-child{border-bottom:0}
.pg-facts span{color:var(--ink-2);font-weight:600}
.pg-facts b{text-align:end;font-weight:800}
.pg-alert{background:var(--pg-blush);font-weight:700;font-size:0.9063rem;line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}
.pg-alert.urgent{background:var(--danger);color:#fff;font-size:0.9688rem;box-shadow:0 0.375rem 1.25rem color-mix(in srgb,var(--danger) 35%,transparent)}
.pg-alert.warn{background:var(--warn-soft);color:var(--ink)}
.pg-alert.feeding{width:100%;text-align:left;background:var(--pg-peach,var(--warn-soft));color:var(--ink);cursor:pointer}
.pg-flag.urgent{background:var(--danger);color:#fff}
.pg-tag.soft{background:var(--surface-2);color:var(--ink-2)}
.pg-hero.sm{padding:0.75rem 1rem;border-radius:1.625rem;gap:0.75rem}
.pg-hero.sm .pg-orb{width:4rem;height:4rem;padding:0.3125rem}
.pg-hero.sm .pg-orb>span{font-size:1.875rem}
.pg-hero.sm .pg-week{font-size:1.5rem}
.pg-tbl{width:100%;border-collapse:collapse;font-size:0.875rem;font-variant-numeric:tabular-nums}
.pg-tbl th,.pg-tbl td{padding:0.4375rem 0.25rem;text-align:center;border-bottom:0.0938rem solid var(--line)}
.pg-tbl thead th{font-size:0.75rem;font-weight:800;color:var(--ink-2)}
.pg-tbl tbody th{text-align:left;font-weight:700;color:var(--ink-2);white-space:nowrap}
.pg-tbl td{font-weight:800}
.pg-tbl td small{display:block;font-size:0.6875rem;font-weight:700;color:var(--ink-3)}
.pg-tbl td.low{color:var(--danger)}
.pg-tbl tr:last-child th,.pg-tbl tr:last-child td{border-bottom:0}
.pg-chart text.val{fill:var(--ink);font-size:1.375rem}
.pg-chart text.ref{fill:var(--danger);font-size:1.0625rem}
.pg-progress{height:0.75rem;border-radius:0.4375rem;background:var(--surface-2);overflow:hidden}
.pg-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--pg-peach),var(--pg-rose));border-radius:0.4375rem}
.pg-chips{display:flex;gap:0.375rem;overflow-x:auto;padding:0.125rem 0.125rem 0.375rem;margin:-0.25rem 0;scrollbar-width:none}
.pg-chips::-webkit-scrollbar{display:none}
.pg-chip{flex-shrink:0;padding:0.4375rem 0.75rem;border-radius:0.875rem;background:var(--surface);box-shadow:var(--shadow);font-weight:800;font-size:0.8438rem;color:var(--ink-2);white-space:nowrap}
.pg-chip i{font-style:normal;color:var(--pg-rose)}
.pg-chip[aria-pressed="true"]{background:var(--pg-grad);color:var(--ink)}
.pg-search{display:flex;align-items:center;gap:0.5rem;background:var(--surface);border-radius:1rem;padding:0 0.875rem;box-shadow:var(--shadow)}
.pg-search input{flex:1;min-width:0;height:2.875rem;border:0;background:transparent;font-weight:600;font-size:1rem;color:var(--ink);outline:none}
.pg-lib{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}
.pg-libi{display:flex;gap:0.75rem;align-items:flex-start;width:100%;text-align:start;padding:0.875rem;border-radius:1.375rem;background:var(--surface);box-shadow:var(--shadow)}
.pg-snip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pg-meta{display:flex;flex-wrap:wrap;gap:0.25rem;margin-top:0.25rem}
.pg-meta i{font-style:normal;font-size:0.7188rem;font-weight:800;padding:0.0625rem 0.5rem;border-radius:0.5625rem;background:var(--pg-cream);color:var(--ink-2);box-shadow:inset 0 0 0 0.0625rem var(--line)}
.pg-libtext{margin-top:0.75rem;white-space:pre-wrap;overflow-wrap:anywhere;font-size:0.9375rem;line-height:1.55;font-weight:500}
.pg-libtext a{color:var(--pg-rose);font-weight:700}
.pg-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:0.625rem;margin-top:0.875rem}
.pg-file{display:flex;flex-direction:column;gap:0.25rem;min-width:0}
.pg-file img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:1rem;background:var(--surface-2)}
.pg-fph{display:grid;place-items:center;aspect-ratio:1;border-radius:1rem;background:var(--pg-cream);font-size:2.5rem;text-decoration:none;box-shadow:inset 0 0 0 0.0938rem var(--line)}
.pg-file small{font-size:0.75rem;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.pg-file small a{color:var(--ink)}
.pg-frow{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;font-weight:600;font-size:0.875rem;padding:0.25rem 0;min-width:0}
.pg-frow span{min-width:0;overflow-wrap:anywhere}
.pg-feed{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin:1.125rem 0 0.375rem}
.pg-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.125rem;aspect-ratio:1;max-height:10.625rem;border-radius:50%;background:var(--pg-cream);box-shadow:inset 0 0 0 0.1875rem var(--line);color:var(--ink)}
.pg-side b{font-size:2.75rem;line-height:1;color:var(--pg-rose)}
.pg-side span{font-size:1.125rem;font-weight:800;font-variant-numeric:tabular-nums}
.pg-side.on{background:var(--pg-grad);box-shadow:inset 0 0 0 0.25rem var(--pg-rose)}
@media (max-width:359px){.pg-phases button{font-size:0.75rem;gap:0.1875rem}.pg-phases button span{font-size:0.9375rem}}
/* weekly routine (Daily goals with a weekday) + every-2-weeks list */
.dg-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0.25rem;margin-bottom:0.625rem}
.dg-day{display:flex;flex-direction:column;align-items:center;gap:0;padding:0.375rem 0 0.3125rem;border-radius:0.875rem;background:var(--surface-2);min-width:0;color:var(--ink-2)}
.dg-day b{font-size:0.8125rem;font-weight:800}
.dg-day small{font-size:0.5938rem;font-weight:700;color:var(--ink-3);white-space:nowrap;overflow:hidden;max-width:100%}
.dg-day i{font-style:normal;font-size:0.75rem;font-weight:800;margin-top:0.125rem;min-width:1.25rem;border-radius:0.5625rem;background:var(--surface);padding:0 0.3125rem}
.dg-day.past{opacity:.6}
.dg-day.today{box-shadow:inset 0 0 0 0.125rem var(--accent)}
.dg-day[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.dg-day[aria-pressed="true"] small{color:var(--accent-ink)}
.dg-day[aria-pressed="true"] i{background:var(--accent-ink);color:var(--accent)}
.dg-head{font-size:0.8438rem;font-weight:800;color:var(--ink-2);margin:0.125rem 0.125rem 0.625rem}
.dg-plan{opacity:.75}
.dg-miss{opacity:.7}
.dg-nav{display:flex;justify-content:flex-end;margin:-0.125rem 0 0.375rem}
.dg-navb{font-size:0.7813rem;font-weight:800;color:var(--accent);padding:0.25rem 0.5rem;border-radius:0.625rem;background:var(--surface-2)}
.dg-ok{display:inline-grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:0.75rem;flex:none}
.dg-bi{margin-top:0.875rem;padding-top:0.75rem;border-top:0.125rem dashed var(--line)}
.dg-birow{display:flex;justify-content:space-between;align-items:center;gap:0.625rem;width:100%;padding:0.5rem 0.25rem;border-radius:0.75rem;text-align:start;font-weight:700}
.dg-bit{flex:1;min-width:0;text-align:start;font-weight:700;overflow-wrap:anywhere;padding:0.25rem 0}
.dg-birow small{flex-shrink:0;font-size:0.7813rem;font-weight:800;color:var(--ink-3)}
.dg-birow small.due{color:var(--warn)}
.dg-birow small.ok{color:var(--ok)}
[data-style="rpg"] .dg-day{border-radius:0.25rem;box-shadow:var(--frame-sm)}
/* ---- Watch & read shelf ---- */
.s-cur{--sc:#2f80ed}.s-want{--sc:#9b6bd6}.s-done{--sc:#2e9e6a}.s-hold{--sc:#d99a1e}.s-drop{--sc:#9aa0a6}
.mchips{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0.125rem 0 0.625rem}
.mchip{font-size:0.75rem;font-weight:700;padding:0.25rem 0.5625rem;border-radius:62.4375rem;background:color-mix(in srgb,var(--sc) 14%,var(--surface));color:var(--ink)}
.mstrip{display:flex;gap:0.625rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0.125rem 0.125rem 0.5rem;margin:0 -0.125rem;scrollbar-width:none}
.mstrip::-webkit-scrollbar{display:none}
.mstrip .mcard{flex:0 0 5.75rem;scroll-snap-align:start}
.mtop{display:flex;flex-direction:column;gap:0.625rem;margin-bottom:0.875rem}
.mtabs{display:flex;gap:0.375rem;overflow-x:auto;scrollbar-width:none;padding:0.125rem}
.mtabs::-webkit-scrollbar{display:none}
.mtab{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.375rem;height:2.25rem;padding:0 0.75rem;border-radius:0.75rem;background:var(--surface);box-shadow:var(--shadow);font-size:0.875rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
.mtab b{font-size:0.75rem;padding:0.0625rem 0.4375rem;border-radius:62.4375rem;background:var(--surface-2,rgba(0,0,0,.06));color:var(--ink-2)}
.mtab[aria-pressed="true"]{background:color-mix(in srgb,var(--sc,var(--accent)) 18%,var(--surface));color:var(--ink);box-shadow:inset 0 0 0 0.125rem var(--sc,var(--accent))}
.mtools{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.msearch{flex:1 1 10rem;min-width:0;height:2.5rem;padding:0 0.75rem;border-radius:0.75rem;border:0.0625rem solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:0.9375rem}
.msort button{height:2rem}
.mfacts{display:flex;gap:0.75rem;flex-wrap:wrap;font-size:0.8125rem;color:var(--ink-2);font-weight:600}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.375rem,1fr));gap:0.875rem 0.625rem}
.mcard{display:flex;flex-direction:column;gap:0.3125rem;text-align:start;min-width:0;background:none;padding:0;color:var(--ink)}
.mcard[hidden]{display:none}
.mwrap{position:relative;display:block}
.mposter{position:relative;display:block;aspect-ratio:2/3;border-radius:0.75rem;overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
.mposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;background:linear-gradient(150deg,hsl(var(--h) 55% 62%),hsl(calc(var(--h) + 40) 50% 42%));color:#fff}
.mph b{font-size:2.125rem;line-height:1;font-weight:800;text-shadow:0 0.125rem 0.375rem rgba(0,0,0,.25)}
.mph i{font-style:normal;font-size:1rem;opacity:.85}
.mtag{position:absolute;top:0.375rem;inset-inline-start:0.375rem;width:1.5rem;height:1.5rem;border-radius:0.5rem;display:grid;place-items:center;font-size:0.75rem;background:rgba(255,255,255,.92);box-shadow:0 0.0625rem 0.25rem rgba(0,0,0,.2)}
.mbar{position:absolute;left:0.375rem;right:0.375rem;bottom:0.375rem;height:0.3125rem;border-radius:0.1875rem;background:rgba(0,0,0,.35);overflow:hidden}
.mbar i{display:block;height:100%;background:#4cc2ff}
.mtitle{font-size:0.8125rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mmeta{font-size:0.75rem;color:var(--ink-3);font-weight:600}
.mscore{color:#c98a00}
.mhead{display:flex;gap:0.875rem;align-items:flex-end;margin:0.625rem 0 0.25rem}
.mposter.big{width:6rem;flex:0 0 6rem}
.mhead-t{display:flex;flex-direction:column;gap:0.375rem;align-items:flex-start}
.mtag-l{font-size:0.8125rem;font-weight:700;padding:0.25rem 0.625rem;border-radius:62.4375rem;background:color-mix(in srgb,var(--sc) 16%,var(--surface));box-shadow:inset 0 0 0 0.0938rem var(--sc)}
.mscore-l{font-size:1.125rem;color:#c98a00}
.mhead-t small{color:var(--ink-2);font-weight:600}
.mset{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.mset .btn{min-width:0;padding:0 0.5rem}
.mset .btn:last-child:nth-child(odd){grid-column:1/-1}
.mset .btn[aria-pressed="true"]{box-shadow:inset 0 0 0 0.125rem var(--accent);background:var(--accent-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mtag{background:rgba(30,30,34,.9)}}
:root[data-theme="dark"] .mtag{background:rgba(30,30,34,.9)}
/* ---- Where your money went ---- */
.fw{display:flex;flex-direction:column;gap:0.375rem}
.fw-top{display:flex;justify-content:space-between;align-items:flex-start;gap:0.625rem;flex-wrap:wrap}
.fw-top>div{display:flex;flex-direction:column}
.fw-total{font-size:1.75rem;line-height:1.1;font-weight:800}
.fw-total small{font-size:0.875rem;color:var(--ink-2)}
.fw-top span{font-size:0.8125rem;color:var(--ink-2);font-weight:600}
.fw-ch{padding:0.25rem 0.625rem;border-radius:62.4375rem;font-weight:800!important;font-size:0.7813rem!important;background:var(--surface-2)}
.fw-ch.neg{color:var(--danger)}.fw-ch.pos{color:var(--ok)}
.fw-days{display:flex;align-items:flex-end;gap:0.375rem;height:6rem;margin:0.625rem 0 0.25rem}
.fw-days.month{gap:0.125rem}
.fw-d{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:0.25rem}
.fw-d i{display:block;width:100%;max-width:1.75rem;border-radius:0.375rem 0.375rem 0.1875rem 0.1875rem;background:var(--peach-i);min-height:0}
.fw-d.today i{background:var(--accent)}
.fw-d.future i{opacity:.3}
.fw-d span{font-size:0.6875rem;font-weight:700;color:var(--ink-3);height:0.8125rem;line-height:0.8125rem}
.fw-d.today span{color:var(--ink)}
.fw-chips{display:flex;flex-wrap:wrap;gap:0.375rem}
.fw-chip{font-size:0.8125rem;padding:0.375rem 0.625rem;border-radius:0.75rem;background:var(--surface-2);font-weight:600}
.fw-chip small{color:var(--ink-3)}
.fw-places{display:flex;flex-direction:column;gap:0.375rem}
.fw-p{display:grid;grid-template-columns:1.375rem minmax(0,1fr) auto;gap:0.5rem;align-items:center;font-size:0.875rem;font-weight:600}
.fw-p span[dir]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-p small{color:var(--ink-3)}
.fw-n{width:1.375rem;height:1.375rem;border-radius:0.4375rem;display:grid;place-items:center;font-size:0.75rem;font-weight:800;background:var(--accent-soft);color:var(--ink)}
.fw .subhead{margin-top:0.625rem}
[data-style="rpg"] :is(.fw-d i,.fw-chip,.fw-n,.fw-ch){border-radius:0}
.asset-head .asset-rename{flex:1;text-align:start;display:flex;align-items:baseline;gap:0.375rem;padding:0;min-width:0;color:inherit;text-decoration:none}
.asset-head .asset-rename b{flex:0 1 auto}
.asset-head .asset-rename small{font-size:0.75rem;font-weight:600}
.debt-prog{margin:0.125rem 0.25rem 0.5rem}
.debt-prog .sub{font-size:0.75rem;font-weight:700;color:var(--ink-2)}
.debt-acts{display:flex;gap:0.5rem;flex-wrap:wrap;margin:0 0.25rem 0.5rem}
.debt-acts .btn{padding:0.5rem 0.75rem;font-size:0.875rem;min-height:0}
button.fdebt{width:100%;background:none;border:0;color:inherit;font:inherit;font-size:0.9375rem;font-weight:700;text-align:start;cursor:pointer}
button.fdebt small{font-size:0.75rem;font-weight:700;margin-inline-start:0.375rem}
.cc-tx{width:100%;text-align:start;opacity:.85}
.mf-line{margin:0.125rem 0 0.375rem;font-weight:700;color:var(--ink-2);font-size:0.875rem}
.mf-about{font-size:0.875rem;line-height:1.5}
.mfind{display:flex;flex-direction:column;gap:0.625rem;margin-top:0.625rem}
.mf-card{display:flex;gap:0.625rem;padding:0.625rem;border-radius:0.875rem;background:var(--card-2,rgba(0,0,0,.04));align-items:flex-start}
.mf-card img,.mf-noimg{width:4.5rem;min-width:4.5rem;height:6.5rem;object-fit:cover;border-radius:0.625rem;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.mf-main{display:flex;flex-direction:column;gap:0.25rem;min-width:0;flex:1}
.mf-main b{font-size:0.9375rem}.mf-main small{font-weight:600;opacity:.7}
.mf-meta{font-size:0.75rem;font-weight:700;color:var(--ink-2)}
.mf-bio{font-size:0.8125rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mf-main .btn{align-self:flex-start;margin-top:0.25rem}