:root{
  --ink:#123B32; --ink-soft:#4A6A61; --paper:#F2F5F1; --card:#FFFFFF;
  --line:#D6E0DA; --mint:#2E9E74; --amber:#A8720F; --red:#B4432F;
  --font:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#E4EEE9; --ink-soft:#9DB5AC; --paper:#0F1F1B; --card:#16302A;
    --line:#264840; --mint:#55C99A; --amber:#E2A84A; --red:#E07A63; color-scheme: dark; }
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.5;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
a{color:inherit}
button{font:inherit;cursor:pointer}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;max-width:640px;margin:0 auto}
.brand{font-weight:800;text-decoration:none;font-size:1.1rem}
.upload-btn{text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px;font-weight:600;font-size:.9rem}
.sample-note{max-width:640px;margin:0 auto;padding:0 20px;color:var(--ink-soft);font-size:.85rem}
main{max-width:640px;margin:0 auto;padding:8px 20px 24px}
main:focus{outline:none}
h1{font-size:1.6rem;line-height:1.2;margin:16px 0 8px;font-weight:800}
h2{font-size:1.1rem;margin:28px 0 8px;font-weight:600}
.muted{color:var(--ink-soft)}
.small{font-size:.85rem}
.countdown{margin:12px 0 4px}
.countdown .n{font-size:clamp(4.5rem,22vw,7.5rem);font-weight:800;line-height:.9;letter-spacing:-.04em}
.countdown .l{color:var(--ink-soft)}
.road{height:10px;background:var(--line);border-radius:5px;overflow:hidden;margin:18px 0 4px}
.road span{display:block;height:100%;width:0;background:var(--mint)}
.road-l{font-size:.85rem;color:var(--ink-soft);margin:0}
.task{background:var(--ink);color:var(--paper);border-radius:18px;padding:18px 20px;margin-top:24px}
.task div{font-size:.9rem;opacity:.8}
.task p{margin:4px 0 14px;font-size:1.15rem;font-weight:600}
.btn{background:var(--mint);color:#fff;border:0;border-radius:999px;padding:10px 18px;font-weight:600}
a.btn{display:inline-block;text-decoration:none;margin-top:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
.left{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding:18px 0 12px}
.left .amt{font-size:2rem;font-weight:800}
.amt.over{color:var(--red)}
.logs li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.logs small{color:var(--ink-soft);margin-left:6px}
ul.plain{list-style:none;padding:0;margin:0}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:10px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-weight:600;color:var(--ink-soft);font-size:.85rem}
.num{text-align:right;font-variant-numeric:tabular-nums}
tr.total td,tfoot td{font-weight:700}
.scroll{overflow-x:auto}
.hurt li{margin:6px 0}
.flag{color:var(--red);font-weight:600;font-size:.85rem}
.warn{color:var(--amber);font-weight:600}
.empty{border:1.5px dashed var(--line);border-radius:18px;padding:24px;text-align:center;color:var(--ink-soft)}
form.log{display:flex;gap:8px;flex-wrap:wrap}
input{font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);min-width:0;flex:1}
.extra{display:flex;align-items:center;gap:10px;margin:8px 0}
.extra input{max-width:120px;flex:none}
.seg{display:flex;gap:6px;margin:16px 0 8px}
.seg button{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px}
.seg button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.letters li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.note{font-size:.9rem;color:var(--ink-soft);border-left:3px solid var(--amber);padding-left:12px;margin-top:24px}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;background:var(--card);
  border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.tabs a{text-decoration:none;padding:8px 10px;border-radius:12px;font-size:.9rem;color:var(--ink-soft);font-weight:600}
.tabs a[aria-current="page"]{color:var(--ink);background:var(--paper)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.road span{transition:width .8s ease}}
.top-r{display:flex;align-items:center;gap:10px}
#user{min-width:32px;min-height:32px}
.signed-out .tabs,.signed-out .upload-btn,.signed-out .sample-note,.signed-out #user{display:none}
.welcome h1{font-size:2rem;line-height:1.15;margin-top:24px}
#sign-in{display:flex;justify-content:center;margin-top:20px}

.tag{display:inline-block;font-size:.75rem;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);margin-left:6px}
td small{display:block;color:var(--ink-soft);font-size:.8rem}
details{margin-top:24px}
summary{cursor:pointer;font-weight:600}
details p{color:var(--ink-soft)}

:root{--c-bills:#9DB8AD;--c-left:#CFE6DA}
@media (prefers-color-scheme: dark){:root{--c-bills:#4E6D63;--c-left:#244A3F}}
.top,.sample-note,main{max-width:760px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-top:20px}
.card-h{margin:0 0 6px;font-size:1rem}
.chart{width:100%;height:auto;display:block;margin:6px 0}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--ink-soft);font-size:11px;font-family:var(--font)}
.chart .axis.strong{fill:var(--ink);font-weight:600}
.chart .c-line{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linejoin:round}
.chart .c-area{fill:var(--mint);opacity:.14}
.chart .c-alt{fill:none;stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:5 4}
.chart .c-target{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:3 3}
.chart .c-target-l{fill:var(--amber);font-size:11px;font-weight:600;font-family:var(--font)}
.chart .s-bills{fill:var(--c-bills)}
.chart .s-debt{fill:var(--mint)}
.chart .s-left{fill:var(--c-left)}
.chart .s-income{stroke:var(--ink);stroke-width:2}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-soft);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.k-bills{background:var(--c-bills)}
.k-debt{background:var(--mint)}
.k-left{background:var(--c-left)}
i.k-income{height:3px;width:14px;border-radius:0;background:var(--ink)}
i.k-alt{height:0;width:14px;border-radius:0;background:none;border-top:2px dashed var(--ink-soft)}
i.k-target{height:0;width:14px;border-radius:0;background:none;border-top:2px dashed var(--amber)}
.split{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:16px 0 4px;background:var(--line)}
.split span{display:block;height:100%}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.stat span{font-size:.85rem;color:var(--ink-soft)}
.stat b{display:block;font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.stat b.over{color:var(--red)}
.stat small{display:block;color:var(--ink-soft);font-size:.8rem}
.tl li{padding:10px 0;border-bottom:1px solid var(--line)}
.tl-top{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:.95rem}
.tl-bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:6px 0 4px}
.tl-bar span{display:block;height:100%;background:var(--mint);border-radius:4px}
.tl small{color:var(--ink-soft);font-size:.8rem}
.tag{display:inline-block;font-size:.75rem;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);margin-left:6px}
td small{display:block;color:var(--ink-soft);font-size:.8rem}
details{margin-top:24px}
summary{cursor:pointer;font-weight:600}
details p{color:var(--ink-soft)}
/* pop */
:root{
  --pine:#0E2E27; --pine-2:#145A48;
  --mint:#12B886; --mint-strong:#0A7F5C;
  --gold:#F5B700; --coral:#E8553F; --sky:#4C6EF5; --lime:#94D82D;
  --c-bills:#4C6EF5; --c-left:#94D82D; --amber:#B86E00; --red:#D9412B;
  --paper:#F3F7F4;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#0B1A16; --card:#11251F; --line:#22423A; --mint:#20C997; --mint-strong:#0F9D74;
    --c-bills:#748FFC; --c-left:#A9E34B; --amber:#FFC53D; --red:#FF7A66; }
}
.brand{display:inline-flex;align-items:center;gap:8px}
.brand::before{content:"";width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--gold))}
.upload-btn{background:var(--mint-strong);border-color:var(--mint-strong);color:#fff}
.countdown{background:linear-gradient(140deg,var(--pine),var(--pine-2));color:#fff;border-radius:22px;padding:22px 22px 20px;margin-top:8px;box-shadow:0 12px 30px -14px rgba(14,46,39,.6)}
.countdown .n{color:var(--gold)}
.countdown .l{color:#CFE9DF}
.road{height:12px;background:var(--line)}
.road span{background:linear-gradient(90deg,var(--mint),var(--gold))}
.stat{border-top:4px solid var(--mint)}
.stats .stat:nth-child(2){border-top-color:var(--sky)}
.stats .stat:nth-child(3){border-top-color:var(--gold)}
.stats .stat:nth-child(4){border-top-color:var(--coral)}
.card{box-shadow:0 8px 24px -16px rgba(14,46,39,.45)}
.task{background:linear-gradient(135deg,var(--mint-strong),var(--pine-2));color:#fff;box-shadow:0 12px 28px -16px rgba(10,127,92,.7)}
.task .btn{background:#fff;color:#0E2E27}
.btn{background:var(--mint-strong)}
.left .amt{color:var(--mint-strong)}
.amt.over,.stat b.over{color:var(--red)}
.chart .c-line{stroke:var(--mint);stroke-width:3}
.chart .c-area{fill:var(--mint);opacity:.22}
.chart .c-target{stroke:var(--gold);stroke-width:2}
.chart .c-target-l{fill:var(--amber)}
.k-debt{background:var(--mint)}
i.k-target{border-top-color:var(--gold)}
.tl-bar span{background:linear-gradient(90deg,var(--mint),var(--lime))}
.tabs a[aria-current="page"]{background:var(--mint-strong);color:#fff}
.seg button[aria-pressed="true"]{background:var(--mint-strong);border-color:var(--mint-strong);color:#fff}
.warn{color:var(--amber)}
.flag{color:var(--coral)}
.note{border-left-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 13px;font-weight:600;font-size:.9rem}
.chip[aria-pressed="true"]{background:var(--gold,#F5B700);border-color:var(--gold,#F5B700);color:#0E2E27}
.chip[aria-pressed="true"]::before{content:"\2713  "}

dialog#edit-dialog{border:0;border-radius:20px;padding:0;width:min(560px,94vw);max-height:90vh;background:var(--card);color:var(--ink);box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
dialog#edit-dialog::backdrop{background:rgba(8,20,17,.55)}
.ed-form{padding:20px 20px 0;display:flex;flex-direction:column;gap:12px;overflow:auto;max-height:90vh}
.ed-form h2{margin:0 0 4px}
.ed-field{display:flex;flex-direction:column;gap:4px;font-size:.9rem;font-weight:600}
.ed-field input,.ed-field select,.ed-field textarea{font:inherit;font-weight:400;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);width:100%}
.ed-field small{color:var(--ink-soft);font-weight:400}
.ed-check{display:flex;align-items:center;gap:10px;font-size:.95rem}
.ed-check input{width:20px;height:20px;accent-color:var(--mint-strong,#0A7F5C)}
.ed-err{color:var(--red);margin:0;min-height:1.2em;font-weight:600}
.ed-actions{display:flex;gap:8px;align-items:center;position:sticky;bottom:0;background:var(--card);padding:12px 0 16px;border-top:1px solid var(--line)}
.ed-actions .spacer{flex:1}
.btn-danger{background:var(--red)}
.btn-small{padding:6px 14px;font-size:.9rem}
.ed-head{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px}
.ed-head h2{margin:0}
.ed-list li{border-bottom:1px solid var(--line)}
.ed-row{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 2px;cursor:pointer;gap:12px}
.ed-row:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.ed-row strong{display:block}
.ed-row small{display:block;color:var(--ink-soft)}
.ed-go{color:var(--mint-strong,#0A7F5C);font-weight:600;font-size:.9rem;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#0E2E27;color:#fff;padding:10px 18px;border-radius:999px;font-weight:600;z-index:50}
.wz-prog{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:12px}
.wz-prog span{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--gold,#F5B700))}
.wz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px}
.wz-form{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.wz .ed-check{align-items:flex-start;margin:10px 0;line-height:1.4}
.wz .ed-check input{margin-top:2px;flex:none}
.chip.wz-add{border-style:dashed}
.picks{display:grid;gap:12px;margin-top:12px}
.pick{all:unset;box-sizing:border-box;cursor:pointer;display:block;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 16px}
.pick[aria-pressed="true"]{border-color:var(--mint-strong,#0A7F5C);box-shadow:0 0 0 3px rgba(18,184,134,.2)}
.pick b{display:block;font-size:1.05rem;margin-bottom:4px}
.pick span{display:block;color:var(--ink-soft);font-size:.9rem}
.pick:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.issues li{margin:8px 0}
/* billing: header badge, pricing, account, locked previews, upgrade prompt */
.top{flex-wrap:wrap;gap:10px}
.top-r{flex-wrap:wrap;justify-content:flex-end}
.acct-link{display:inline-flex;align-items:center;gap:6px}
.plan-badge{background:#fff;color:var(--pine);border-radius:999px;padding:0 8px;font-size:.72rem;font-weight:700;line-height:1.5}
.eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:700;color:var(--mint-strong)}
.notice{margin:12px 0;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--mint);font-weight:600}
.notice.warn-n{border-left-color:var(--gold)}
.bill-toggle{margin-top:20px}
.bill-toggle .save{font-size:.72rem;font-weight:700;background:var(--gold);color:#0E2E27;border-radius:999px;padding:1px 7px;margin-left:4px}
.plans{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:8px;align-items:start}
.plan-card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 24px -16px rgba(14,46,39,.45)}
.plan-card.featured{border-color:var(--mint-strong);box-shadow:0 0 0 3px rgba(18,184,134,.18),0 8px 24px -16px rgba(14,46,39,.45)}
.plan-card h2{margin:0;font-size:1.25rem}
.plan-card .price{margin:2px 0 0}
.plan-card .price b{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.plan-card .price span{color:var(--ink-soft)}
.plan-card .small{margin:0}
.feat{padding-left:20px;margin:6px 0;font-size:.93rem}
.feat li{margin:5px 0}
.feat .tag{margin-left:2px}
.plan-act .btn{width:100%;padding:12px 18px}
.terms{font-size:.8rem;line-height:1.45;color:var(--ink-soft);margin:8px 0 0}
.current-tag{margin:6px 0 0;font-weight:700;color:var(--mint-strong)}
.founding{background:linear-gradient(140deg,var(--pine),var(--pine-2));color:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px;margin-top:16px;box-shadow:0 12px 30px -14px rgba(14,46,39,.6)}
.founding .eyebrow{color:var(--gold)}
.founding h2{margin:0 0 6px;font-size:1.3rem}
.founding p{color:#DCEFE7;margin:0 0 12px}
.founding .terms{color:#CFE9DF;margin:10px 0 0}
.btn-gold{background:var(--gold);color:#0E2E27;padding:12px 20px}
.founding .btn:focus-visible{outline-color:var(--gold)}
.acct .acct-plan{margin:0 0 4px;font-size:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.acct .acct-plan .tag{margin:0}
.acct p{margin:4px 0 10px}
.meters{margin-top:4px}
.meter-row{padding:10px 0;border-bottom:1px solid var(--line)}
.meter-top{display:flex;justify-content:space-between;gap:12px;font-size:.95rem;font-weight:600}
.meter-top span:last-child{font-weight:400;text-align:right}
.meter-row small{display:block;margin-top:4px;font-size:.8rem}
.meter{height:10px;background:var(--line);border-radius:5px;overflow:hidden;margin-top:6px}
.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--lime))}
.meter.full span{background:var(--coral)}
.lock{position:relative;margin-top:16px}
.lock-preview{max-height:520px;overflow:hidden;filter:blur(6px);opacity:.7;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.lock.compact .lock-preview{max-height:230px}
.lock-cta{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:48px 12px 12px}
.lock.compact .lock-cta{align-items:center;padding:12px}
.lock-box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;max-width:420px;text-align:center;box-shadow:0 18px 40px -18px rgba(14,46,39,.55)}
.lock-box h2{margin:0 0 6px;font-size:1.15rem}
.lock-box p{margin:0 0 8px;color:var(--ink-soft)}
.lock-box .btn{margin-top:4px;padding:12px 22px}
.lock-box .small{margin:8px 0 0}
.lock-link{font-weight:700;color:var(--mint-strong)}
.countdown .n.date{font-size:clamp(2.4rem,11vw,4rem);line-height:1.05;letter-spacing:-.02em;margin:4px 0}
dialog#upgrade-dialog{border:0;border-radius:20px;padding:0;width:min(440px,92vw);background:var(--card);color:var(--ink);box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
dialog#upgrade-dialog::backdrop{background:rgba(8,20,17,.55)}
.up{padding:20px}
.up h2{margin:0 0 8px}
.up-act{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.signed-out .acct-link{display:none}
@media (max-width:420px){.top{padding:12px 16px}.top-r{gap:6px}.upload-btn{padding:5px 11px;font-size:.85rem}}
.acct-act{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
#cancel-dialog{border:0;border-radius:20px;padding:0;width:min(440px,92vw);background:var(--card);color:var(--ink);box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
#cancel-dialog::backdrop{background:rgba(8,20,17,.55)}

/* mascot */
.mascot{display:block;flex:none;line-height:0}
.mascot img{display:block;width:100%;height:auto}
.welcome-hero{display:flex;align-items:center;gap:16px}
.welcome-hero>div{flex:1;min-width:0}
.welcome-mascot{width:clamp(120px,34vw,220px)}
.mascot-head{display:flex;align-items:center;gap:12px;margin-top:12px}
.mascot-head h1{margin:0 0 4px}
.mascot-head p{margin:0}
.mascot-inline{width:64px}
.countdown.has-mascot{position:relative;padding-right:120px;overflow:hidden}
.countdown-mascot{position:absolute;right:10px;bottom:-6px;width:100px}
.lock-mascot{width:72px;margin:-6px auto 6px}
@media (max-width:420px){.welcome-hero{flex-direction:column-reverse;align-items:flex-start}.welcome-mascot{width:150px;align-self:center}.countdown.has-mascot{padding-right:96px}.countdown-mascot{width:84px}}
@media (prefers-reduced-motion:no-preference){
  .welcome-mascot img{animation:mascot-bob 4s ease-in-out infinite}
  @keyframes mascot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}

/* features: upload, letters, coach, credit, weekly review, free-week lock */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.linkish{background:none;border:0;padding:0;color:var(--mint-strong);font-weight:600;text-decoration:underline;cursor:pointer}
.up-card{display:flex;flex-direction:column;gap:12px}
.up-card input[type=file]{padding:10px;border:1.5px dashed var(--line);border-radius:12px;background:var(--paper)}
.read p{margin:6px 0}
.card-h+p.small{margin-top:0}
.sugg li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.sugg .btn{flex:none}
.up-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0}
.up-row strong{display:block;word-break:break-word}
.up-row small{display:block;color:var(--ink-soft)}
.up-acts{display:flex;gap:6px;flex:none}
.letters li .btn[disabled]{opacity:.45}
.letter-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
pre.letter{white-space:pre-wrap;word-wrap:break-word;font-family:Georgia,"Times New Roman",serif;font-size:1rem;line-height:1.55;background:#fff;color:#111;border:1px solid var(--line);border-radius:12px;padding:24px;margin:0}
.chat{display:flex;flex-direction:column;gap:10px;margin:16px 0;max-height:min(60vh,520px);overflow-y:auto;padding:4px}
.msg{max-width:88%;border-radius:16px;padding:10px 14px;line-height:1.45}
.msg p{margin:0}
.msg.user{align-self:flex-end;background:var(--mint-strong);color:#fff;border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.typing p{color:var(--ink-soft);font-style:italic}
.coach-form{display:flex;gap:8px;align-items:flex-end}
.coach-form textarea{flex:1;font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);resize:vertical;min-height:48px}
.coach-form textarea:focus-visible,.up-card select:focus-visible,.wz-form select:focus-visible,.wz-form textarea:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.coach-empty .btn,.empty .btn{margin-top:8px}
.empty .lock-mascot{margin:0 auto 8px}
.cr-acct{padding:12px 0;border-bottom:1px solid var(--line)}
.cr-acct small{color:var(--ink-soft);font-weight:400}
.cr-by{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.9rem;margin-top:4px}
.cr-by b{font-weight:700}
.weekly .logs li{font-size:.95rem}
.weekly p{margin:10px 0 0}
.locked-week{text-align:center;padding:12px 0 24px}
.locked-week .welcome-mascot{margin:0 auto 8px;width:170px}
.locked-week p{max-width:460px;margin:8px auto}
.locked-week .btn{margin-top:12px;padding:12px 26px}
@media (max-width:440px){.tabs a{padding:8px 6px;font-size:.82rem}}
@media print{
  body{background:#fff;padding:0}
  .top,.tabs,.sample-note,.letter-actions,#view>h1,#view>p,#view>.note,dialog{display:none!important}
  pre.letter{border:0;padding:0;font-size:12pt}
}
.key-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.key-form input{flex:1;min-width:200px;font-family:ui-monospace,Consolas,monospace}
.legal-links{text-align:center;margin:18px 0 0}
.legal-links a{color:var(--mint-strong,#0A7F5C)}