:root{
  --paper:#FFFBF0; --butter:#FFD95A; --butter-l:#FFF1BF; --ink:#1E2440; --ink2:#5A5F78;
  --lilac:#C7B6FF; --lilac-l:#EEE8FF; --tomato:#FF6A3D; --mint:#A8E6C3; --mint-l:#E3F8EC; --sky:#BFE3FF;
  --line:#1E2440; --r:20px; --sh:3px 3px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#EDE6D6;font-family:"Atkinson Hyperlegible Next",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,.disp{font-family:"Atkinson Hyperlegible Next",sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1.1}
.hand{font-style:italic;font-weight:700}

#app{max-width:430px;min-height:100%;margin:0 auto;background:var(--paper);position:relative;display:flex;flex-direction:column;overflow:hidden}
.screen{flex:1;padding:22px 20px 110px;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:8px;font-family:"Atkinson Hyperlegible Next";font-weight:800;font-weight:800;font-size:18px}
.brand i{width:30px;height:30px;border-radius:9px;background:var(--butter);border:2px solid var(--ink);display:grid;place-items:center;font-style:normal;font-size:16px;box-shadow:2px 2px 0 var(--ink)}
.pill{font-size:12px;font-weight:800;background:#fff;border:2px solid var(--ink);border-radius:99px;padding:5px 10px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:17px 18px;border-radius:16px;font-weight:800;font-size:17px;border:2.5px solid var(--ink);box-shadow:var(--sh);transition:transform .06s,box-shadow .06s}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--tomato);color:#fff}
.btn.yellow{background:var(--butter)}
.btn.white{background:#fff}
.btn.lilac{background:var(--lilac)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink2);font-weight:700;font-size:15px;padding:12px}
.row{display:flex;gap:10px}

/* cards */
.card{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.card+.card{margin-top:14px}
.kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}

/* home */
.hello{font-size:15px;color:var(--ink2);font-weight:700}
.big{font-size:34px;margin:4px 0 16px}
.big em{font-style:normal;background:var(--butter);padding:0 6px;border-radius:8px}
.energy{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.energy button{background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:12px 6px;font-weight:800;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:4px}
.energy button b{font-size:26px;line-height:1}
.energy button small{font-weight:600;font-size:11px;color:var(--ink2)}
.energy button.on{background:var(--butter);box-shadow:var(--sh)}
.today{background:var(--lilac-l)}
.today h2{font-size:24px;margin:6px 0 4px}
.today p{color:var(--ink2);font-weight:600;margin-bottom:14px}
.stuck{margin-top:12px;width:100%;border:2.5px dashed var(--tomato);color:#C8421B;border-radius:16px;padding:14px;font-weight:800;background:#FFF1EC}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:26px 0 10px}
.sec h3{font-size:20px}
.sec a{font-size:13px;font-weight:800;color:var(--ink2);text-decoration:underline}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.room{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:10px 8px;text-align:center;font-weight:800;font-size:13px}
.room b{display:block;font-size:24px;margin-bottom:2px}
.room .bar{height:8px;border-radius:9px;background:#EFEAE0;margin-top:8px;overflow:hidden;border:1.5px solid var(--ink)}
.room .bar span{display:block;height:100%;background:var(--mint)}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tool{border:2.5px solid var(--ink);border-radius:18px;padding:14px;text-align:left;box-shadow:var(--sh);min-height:108px;display:flex;flex-direction:column;justify-content:space-between}
.tool b{font-size:26px}
.tool span{font-weight:800;font-size:15px;line-height:1.15}
.tool small{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-top:2px}
.t-red{background:#FFD5C7}.t-sky{background:var(--sky)}.t-mint{background:var(--mint-l)}.t-butter{background:var(--butter-l)}
.back{background:var(--mint-l);border:2.5px solid var(--ink);border-radius:18px;padding:14px 16px;display:flex;gap:12px;align-items:center;margin-bottom:16px}
.back b{font-size:26px}.back p{font-weight:700;font-size:14px}.back button{margin-left:auto;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:8px 12px;font-weight:800;font-size:13px;white-space:nowrap}

/* session */
.sbar{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.sbar .x{width:40px;height:40px;border-radius:12px;border:2px solid var(--ink);background:#fff;font-size:18px;font-weight:800}
.prog{flex:1;height:12px;border:2px solid var(--ink);border-radius:9px;background:#fff;overflow:hidden}
.prog span{display:block;height:100%;background:var(--butter)}
.steptag{display:inline-flex;gap:6px;align-items:center;background:var(--butter-l);border:2px solid var(--ink);border-radius:99px;padding:6px 12px;font-weight:800;font-size:13px}
.steptext{font-size:32px;margin:18px 0 26px;line-height:1.1}
.ring{width:210px;height:210px;margin:0 auto 26px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;position:relative;background:conic-gradient(var(--tomato) calc(var(--p)*1%),#fff 0);box-shadow:4px 4px 0 var(--ink)}
.ring .in{width:160px;height:160px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);display:grid;place-items:center;text-align:center}
.ring .in b{font-family:"Atkinson Hyperlegible Next";font-weight:800;font-size:44px;display:block}
.ring .in small{font-weight:700;color:var(--ink2);font-size:13px}
.smaller{display:block;margin:10px auto 0;font-weight:800;color:var(--ink2);text-decoration:underline;font-size:14px}

/* win */
.win{text-align:center;padding-top:40px}
.win .burst{font-size:82px;margin-bottom:10px;animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.win h2{font-size:34px;margin-bottom:8px}
.win p{font-size:18px;color:var(--ink2);font-weight:600;margin-bottom:26px}
.hand-note{font-size:26px;color:var(--tomato);transform:rotate(-3deg);display:inline-block;margin-bottom:18px}

/* quiz */
.qwrap{padding-top:6px}
.qtitle{font-size:28px;margin:18px 0 20px}
.opt{width:100%;text-align:left;background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:16px;font-weight:700;font-size:16px;margin-bottom:10px;display:flex;gap:12px;align-items:center}
.opt i{width:22px;height:22px;border:2.5px solid var(--ink);border-radius:7px;flex:0 0 auto;font-style:normal;display:grid;place-items:center;font-size:14px}
.opt.on{background:var(--butter);box-shadow:var(--sh)}
.opt.on i{background:var(--ink);color:#fff}
.rrow{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 12px;margin-bottom:8px;font-weight:800}
.rrow .ic{font-size:22px}.rrow .nm{flex:1;font-size:15px}
.rrow .sc{display:flex;gap:4px}
.rrow .sc button{width:34px;height:34px;border-radius:10px;border:2px solid var(--ink);font-size:16px;background:#fff}
.rrow .sc button.on{background:var(--butter)}
.legend{font-size:12px;color:var(--ink2);font-weight:700;margin:-8px 0 12px}

/* building + plan */
.building{text-align:center;padding-top:70px}
.building .spin{width:90px;height:90px;border-radius:50%;border:6px solid #fff;border-top-color:var(--tomato);outline:3px solid var(--ink);margin:0 auto 26px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.checks{text-align:left;max-width:300px;margin:22px auto 0;font-weight:700}
.checks div{margin:8px 0;opacity:.35}.checks div.done{opacity:1}
.plan-hero{background:var(--butter);border:2.5px solid var(--ink);border-radius:22px;padding:20px;box-shadow:var(--sh);margin-bottom:16px}
.plan-hero h2{font-size:30px;margin:6px 0}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.day{aspect-ratio:1;border:2px solid var(--ink);border-radius:10px;background:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;position:relative}
.day.done{background:var(--mint)}
.day.now{background:var(--tomato);color:#fff}
.day span{position:absolute;bottom:1px;font-size:10px}
.plist .pi{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:2px dashed #E3DCCB;font-weight:700}
.plist .pi b{width:34px;height:34px;border-radius:10px;border:2px solid var(--ink);display:grid;place-items:center;background:#fff;font-size:13px;flex:0 0 auto}

/* panic + lists */
.panic-hero{background:#FFD5C7;border:2.5px solid var(--ink);border-radius:22px;padding:18px;box-shadow:var(--sh);margin-bottom:16px}
.panic-hero h2{font-size:28px}
.chk{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:14px;margin-bottom:10px;width:100%;text-align:left;font-weight:700;font-size:15px}
.chk i{width:26px;height:26px;border:2.5px solid var(--ink);border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-style:normal;font-weight:900}
.chk small{display:block;color:var(--ink2);font-weight:700;font-size:12px;margin-top:4px}
.chk.done{background:var(--mint-l)}.chk.done i{background:var(--ink);color:#fff}.chk.done span{text-decoration:line-through;opacity:.6}

/* body double */
.buddy{background:var(--sky);border:2.5px solid var(--ink);border-radius:26px;padding:24px 18px;text-align:center;box-shadow:var(--sh);margin-bottom:18px}
.face{width:120px;height:120px;margin:0 auto 12px;border-radius:50%;background:var(--butter);border:3px solid var(--ink);position:relative;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.face:before,.face:after{content:"";position:absolute;top:44px;width:12px;height:16px;background:var(--ink);border-radius:50%}
.face:before{left:36px}.face:after{right:36px}
.face i{position:absolute;left:42px;top:70px;width:36px;height:16px;border-bottom:4px solid var(--ink);border-radius:0 0 30px 30px}
.buddy h2{font-size:24px}.buddy p{font-weight:700;color:var(--ink2);margin-top:6px}
.mins{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.mins button{border:2.5px solid var(--ink);border-radius:14px;background:#fff;padding:14px 0;font-weight:800;font-size:16px}
.mins button.on{background:var(--butter);box-shadow:var(--sh)}

/* brain dump */
textarea{width:100%;min-height:190px;border:2.5px solid var(--ink);border-radius:18px;padding:16px;font:500 17px "Atkinson Hyperlegible Next";background:#fff;resize:vertical;box-shadow:var(--sh);margin-bottom:16px}
.first{background:var(--butter);border:2.5px solid var(--ink);border-radius:20px;padding:18px;box-shadow:var(--sh);margin:6px 0 16px}
.first h2{font-size:24px;margin:6px 0}
.grp{margin-bottom:12px}
.grp h4{font-family:"Atkinson Hyperlegible Next";font-weight:800;font-size:16px;margin-bottom:6px}
.grp div{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:10px 12px;margin-bottom:6px;font-weight:600;font-size:14px}

/* progress */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat{background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:14px;box-shadow:var(--sh)}
.stat b{font-family:"Atkinson Hyperlegible Next";font-weight:800;font-size:34px;display:block}
.stat small{font-weight:700;color:var(--ink2)}
.nostreak{font-size:24px;color:var(--ink2);text-align:center;margin:20px 0 6px}

/* nav */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;border-top:2.5px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 8px calc(10px + env(safe-area-inset-bottom));z-index:10}
.nav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:800;font-size:11px;color:var(--ink2);padding:6px 0;border-radius:12px}
.nav button b{font-size:22px;filter:grayscale(1);opacity:.6}
.nav button.on{color:var(--ink);background:var(--butter-l)}
.nav button.on b{filter:none;opacity:1}

/* welcome */
.welcome{padding-top:26px}
.welcome .blob{background:var(--butter);border:3px solid var(--ink);border-radius:32px;padding:26px 20px;box-shadow:5px 5px 0 var(--ink);margin:20px 0 22px;position:relative}
.welcome h1{font-size:44px}
.welcome .blob p{font-weight:700;font-size:17px;margin-top:10px}
.welcome .sticker{position:absolute;right:-8px;top:-18px;background:var(--lilac);border:2.5px solid var(--ink);border-radius:99px;padding:6px 12px;transform:rotate(6deg);font-weight:800;font-size:13px}
.welcome ul{list-style:none;margin:0 0 22px}
.welcome li{display:flex;gap:10px;align-items:center;font-weight:700;margin-bottom:10px}
.welcome li b{width:34px;height:34px;border-radius:10px;border:2px solid var(--ink);display:grid;place-items:center;background:#fff;flex:0 0 auto}
.fine{font-size:12px;color:var(--ink2);text-align:center;margin-top:12px;font-weight:600}

/* ===== Theme study (27/sep): evidence-based candidates. Activate with ?theme=lavender|eucalyptus|sky ===== */
[data-theme]{--sh:0 2px 10px rgba(20,30,40,.07)}
[data-theme] body{background:var(--bg-out)}
[data-theme] #app{background:var(--paper)}
[data-theme] .card,[data-theme] .tool,[data-theme] .room,[data-theme] .energy button,[data-theme] .btn,[data-theme] .rrow,[data-theme] .opt,
[data-theme] .chk,[data-theme] .stat,[data-theme] .plan-hero,[data-theme] .panic-hero,[data-theme] .buddy,[data-theme] .first,[data-theme] .back,
[data-theme] .welcome .blob,[data-theme] textarea,[data-theme] .pill,[data-theme] .steptag,[data-theme] .sbar .x,[data-theme] .day,[data-theme] .prog,[data-theme] .rrow .sc button,
[data-theme] .mins button,[data-theme] .brand i,[data-theme] .room .bar,[data-theme] .welcome li b,[data-theme] .plist .pi b,[data-theme] .grp div{border:1.5px solid var(--line-soft)}
[data-theme] .btn{box-shadow:none}
[data-theme] .btn:active{transform:scale(.98)}
[data-theme] .card,[data-theme] .tool,[data-theme] .stat,[data-theme] .plan-hero,[data-theme] .buddy,[data-theme] .first,[data-theme] .welcome .blob,[data-theme] .energy button.on,[data-theme] .opt.on,[data-theme] .mins button.on{box-shadow:var(--sh)}
[data-theme] .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
[data-theme] .btn.yellow{background:var(--soft);border-color:var(--soft)}
[data-theme] .btn.white{background:#fff}
[data-theme] .energy button.on,[data-theme] .opt.on,[data-theme] .mins button.on,[data-theme] .rrow .sc button.on{background:var(--soft);border-color:var(--primary)}
[data-theme] .opt.on i{background:var(--primary);border-color:var(--primary)}
[data-theme] .big em{background:none;color:var(--primary);padding:0}
[data-theme] .today{background:var(--soft)}
[data-theme] .plan-hero,[data-theme] .welcome .blob,[data-theme] .first{background:var(--soft)}
[data-theme] .welcome .sticker{background:#fff;border:1.5px solid var(--line-soft)}
[data-theme] .brand i{background:var(--primary);color:#fff;box-shadow:none}
[data-theme] .t-red{background:var(--t1)}[data-theme] .t-sky{background:var(--t2)}[data-theme] .t-butter{background:var(--t3)}[data-theme] .t-mint{background:var(--t4)}
[data-theme] .room .bar span,[data-theme] .day.done{background:var(--ok)}
[data-theme] .day.now{background:var(--primary);color:#fff;border-color:var(--primary)}
[data-theme] .prog span{background:var(--primary)}
[data-theme] .ring{background:conic-gradient(var(--primary) calc(var(--p)*1%),#fff 0);border:1.5px solid var(--line-soft);box-shadow:var(--sh)}
[data-theme] .ring .in{border:1.5px solid var(--line-soft);background:var(--paper)}
[data-theme] .stuck{border-color:var(--primary);color:var(--primary);background:transparent}
[data-theme] .hand-note{color:var(--primary)}
[data-theme] .nav{border-top:1.5px solid var(--line-soft)}
[data-theme] .nav button.on{background:var(--soft)}
[data-theme] .face{background:var(--t3);border-color:var(--ink)}
[data-theme] .panic-hero{background:var(--t1)}
[data-theme] .buddy{background:var(--t2)}
[data-theme] .chk.done{background:var(--soft)}[data-theme] .chk.done i{background:var(--primary);border-color:var(--primary)}

/* 1) LAVENDER CALM — código de la categoría TDAH (Tiimo App of the Year 2025, Shimmer) */
[data-theme=lavender]{--bg-out:#EEEAF7;--paper:#FAF9FD;--ink:#23213A;--ink2:#625F78;--line-soft:#E2DEF0;--primary:#6D5BD0;--soft:#EEEAFB;--ok:#9ED9C0;--t1:#F3EEFF;--t2:#EAF1FF;--t3:#F4EFFA;--t4:#EAF6F1}
/* 2) EUCALYPTUS — biofílico/calmante + asociación "casa limpia y fresca"; se diferencia del azul de TidyMinds/Sweepy y del lila de Tiimo */
[data-theme=eucalyptus]{--bg-out:#E7EDE9;--paper:#F8FAF7;--ink:#1D2B28;--ink2:#56645F;--line-soft:#DCE5E0;--primary:#2E6E62;--soft:#E3EFEA;--ok:#A9D8C5;--t1:#F6ECE6;--t2:#E6F0EE;--t3:#EEF1E6;--t4:#E3EFEA}
/* 3) CLEAN SKY — código de la categoría "limpieza" (TidyMinds, Sweepy) */
[data-theme=sky]{--bg-out:#E4EEF6;--paper:#F8FBFE;--ink:#17304A;--ink2:#5A6B7D;--line-soft:#DCE7F1;--primary:#2F7BC0;--soft:#E6F1FB;--ok:#A8DCC8;--t1:#FCEEEA;--t2:#E6F1FB;--t3:#F1F4FA;--t4:#E7F5EF}

/* icons (Lucide) */
.ico,svg.lucide{width:1em;height:1em;stroke-width:2;vertical-align:-.15em}
.room b svg,.tool b svg,.energy button b svg{width:26px;height:26px;stroke:var(--primary,var(--ink))}
.nav button b svg{width:22px;height:22px}
.rrow .ic svg{width:22px;height:22px;stroke:var(--primary,var(--ink))}
.day svg{width:15px;height:15px}
.burst svg{width:84px;height:84px;stroke:var(--primary,var(--tomato));stroke-width:1.5}
.brand i svg{width:16px;height:16px}
.opt i svg{width:14px;height:14px;stroke:#fff;stroke-width:3}
.back b svg{width:26px;height:26px}
.hand-note{font-size:20px;font-style:italic;font-weight:700}
.nav button b{filter:none;opacity:.55}
.nav button.on b{opacity:1}
body{font-size:17px;line-height:1.5}
[data-theme] .steptag{background:var(--soft);border-color:var(--line-soft)}
[data-theme] .back{background:var(--soft)}
[data-theme] .stuck svg{stroke:var(--primary)}
[data-theme] .energy button b svg{stroke:var(--ink2)}
[data-theme] .energy button.on b svg{stroke:var(--primary)}

/* ===== Personalization: 5 palettes + calm mode (27/sep) ===== */
[data-theme=sand]{--bg-out:#EFE8DF;--paper:#FBF8F4;--ink:#2E2721;--ink2:#6E6258;--line-soft:#E8DFD5;--primary:#8A6A4F;--soft:#F1E8DF;--ok:#C9DCC4;--t1:#F6E9E2;--t2:#EFEBE4;--t3:#F4EEE3;--t4:#E9EFE4}
[data-theme=night]{--bg-out:#0E0D14;--paper:#16151F;--ink:#ECEAF5;--ink2:#A6A2BD;--line-soft:#2E2C3E;--primary:#A99BFF;--soft:#2A2838;--ok:#4F8F78;--t1:#2C2433;--t2:#222A3A;--t3:#28263A;--t4:#1F2E2A}
[data-theme=night] .card,[data-theme=night] .tool,[data-theme=night] .room,[data-theme=night] .energy button,[data-theme=night] .btn.white,[data-theme=night] .rrow,[data-theme=night] .opt,
[data-theme=night] .chk,[data-theme=night] .stat,[data-theme=night] textarea,[data-theme=night] .pill,[data-theme=night] .sbar .x,[data-theme=night] .day,[data-theme=night] .prog,
[data-theme=night] .rrow .sc button,[data-theme=night] .mins button,[data-theme=night] .nav,[data-theme=night] .welcome li b,[data-theme=night] .plist .pi b,[data-theme=night] .grp div,[data-theme=night] .sw,[data-theme=night] .gear{background:#1F1E2B;color:var(--ink)}
[data-theme=night] .btn.primary{color:#16151F}
[data-theme=night] .ring{background:conic-gradient(var(--primary) calc(var(--p)*1%),#1F1E2B 0)}
[data-theme=night] .room .bar{background:#2E2C3E}
.gear{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line-soft,#ddd);background:#fff;display:grid;place-items:center}
.gear svg{width:19px;height:19px;stroke:var(--primary,var(--ink))}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sw{background:#fff;border:1.5px solid var(--line-soft,#ddd);border-radius:16px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:2px}
.sw.on{border:2px solid var(--primary);box-shadow:var(--sh)}
.sw .chips{display:flex;gap:4px;margin-bottom:8px}
.sw .chips i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.08)}
.sw b{font-size:15px}.sw small{font-size:12px;color:var(--ink2);font-weight:600}
.toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left}
.toggle small{display:block;color:var(--ink2);font-weight:600;font-size:13px}
.toggle i{flex:0 0 auto;width:48px;height:28px;border-radius:99px;background:var(--line-soft,#ccc);position:relative;transition:background .2s}
.toggle i:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .2s}
.toggle i.on{background:var(--primary)}.toggle i.on:after{left:23px}
html.calm *{animation:none!important;transition:none!important}


/* ===== access screens ===== */
.field,#leadmail{width:100%;border:1.5px solid var(--line-soft,#ddd);border-radius:14px;padding:15px 16px;font:600 17px "Atkinson Hyperlegible Next",sans-serif;background:#fff;color:var(--ink)}
.field.code{font-size:28px;letter-spacing:.4em;text-align:center}
.price-line{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.price-line b{font-size:38px;font-weight:800}.price-line s{color:var(--ink2);font-size:18px}
.price-line .save{margin-left:auto;background:var(--soft);color:var(--primary);font-weight:800;font-size:13px;padding:4px 10px;border-radius:99px}
.pw-list{list-style:none;margin:0 0 16px}.pw-list li{display:flex;gap:9px;margin-bottom:8px;font-weight:700}.pw-list svg{color:var(--primary);flex:0 0 auto;margin-top:3px}
a.btn{text-decoration:none}
[data-theme=night] .field,[data-theme=night] #leadmail{background:#1F1E2B}

.clerk-box{min-height:360px}
.clerk-box .cl-rootBox,.clerk-box .cl-card{width:100%;max-width:100%}

/* v2 (28/sep): answers card, one-time payment line, daily reminder */
.answers ul{list-style:none;padding:0;margin:8px 0 0}
.answers li{display:flex;gap:8px;align-items:flex-start;font-weight:700;font-size:15px;margin-bottom:8px}
.answers li .ico{color:var(--primary);flex:none;margin-top:2px;width:18px;height:18px}
.answers .goal{margin:6px 0 0;font-size:15px;color:var(--ink2)}.answers .goal b{color:var(--ink)}
.onepay{display:flex;gap:8px;align-items:center;font-weight:800;font-size:15px;color:var(--primary);background:var(--soft);border-radius:12px;padding:10px 12px;margin:6px 0 12px}
.onepay .ico{width:18px;height:18px;flex:none}
.remind select{width:100%;font:inherit;font-weight:800;font-size:17px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface,#fff);color:var(--ink)}
.remind .row .btn{font-size:15px;padding:12px 10px;gap:6px}
.remind .row .btn .ico{width:18px;height:18px}

/* library */
.lib-count{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:-4px 0 4px}
.lib-count div{background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:12px 8px;text-align:center;box-shadow:var(--sh)}
.lib-count b{display:block;font-size:26px;font-weight:800;line-height:1}
.lib-count small{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-top:4px}
.lib{display:flex;align-items:center;gap:12px;width:100%;border:2.5px solid var(--ink);border-radius:18px;padding:14px;margin-bottom:10px;text-align:left;box-shadow:var(--sh);color:var(--ink);text-decoration:none}
.lib>b{font-size:24px;flex:0 0 auto}
.lib>div{flex:1}
.lib span{display:block;font-weight:800;font-size:16px;line-height:1.15}
.lib small{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-top:3px}
.lib .go{margin-left:auto;opacity:.6}
.lib .qm{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;border:2px solid var(--ink);font-size:20px;line-height:1}
.lib .qm small{font-size:10px;margin:0}
.room .rc{display:block;font-size:11px;font-weight:700;color:var(--ink2);margin-top:2px}
button.room{cursor:pointer}
.rt{display:flex;gap:10px;align-items:center;width:100%;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:12px 14px;margin-bottom:8px;text-align:left}
.rt>div{flex:1;min-width:0}
.rt span{display:block;font-weight:800;font-size:15px}
.rt small{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt em{font-style:normal;font-size:12px;font-weight:800;color:var(--ink2);white-space:nowrap}
.chk.done span{text-decoration:line-through;opacity:.6}
.plist .pi.now b{background:var(--butter)}
.plist .pi span{font-size:14px}
.guide h2{font-size:22px;margin:6px 0 8px}
.guide p{font-weight:600;line-height:1.5;color:var(--ink2)}

/* ===== RAINBOW (29/sep): same look as the printable planner — multicolor titles, colored section labels, one color per room ===== */
[data-theme=rainbow]{--bg-out:#F1ECE4;--paper:#FFFDF9;--ink:#2B2D42;--ink2:#6B6E80;--line-soft:#ECE6DC;--primary:#E07A5F;--soft:#F6F1EA;--ok:#9ED9C0;
  --t1:#FBE6DF;--t2:#E3EEF8;--t3:#FBF0DA;--t4:#E0F0EF;--r1:#E07A5F;--r2:#D9718F;--r3:#8C7AE6;--r4:#4FA3A5;--r5:#E0A83A;--r6:#5B9BD5}
[data-theme=rainbow] .big,[data-theme=rainbow] .qtitle,[data-theme=rainbow] .panic-hero h2,[data-theme=rainbow] .win h2,[data-theme=rainbow] .steptext,[data-theme=rainbow] .guide h2{font-family:Fredoka,"Atkinson Hyperlegible Next",sans-serif;font-weight:600;letter-spacing:0}
[data-theme=rainbow] .big em{font-style:normal}
[data-theme=rainbow] .hand-note,[data-theme=rainbow] .nostreak{font-family:Caveat,cursive;font-style:normal;font-size:28px;font-weight:700}
[data-theme=rainbow] .sec h3{font-family:Fredoka,sans-serif;font-weight:600;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--c,var(--r1));padding:5px 12px;border-radius:8px}
[data-theme=rainbow] .kicker{color:var(--r1)}
[data-theme=rainbow] .brand i{background:linear-gradient(135deg,var(--r1),var(--r3) 50%,var(--r4))}
[data-theme=rainbow] .rooms>:nth-child(6n+1){--rc:var(--r1)}[data-theme=rainbow] .rooms>:nth-child(6n+2){--rc:var(--r4)}[data-theme=rainbow] .rooms>:nth-child(6n+3){--rc:var(--r3)}
[data-theme=rainbow] .rooms>:nth-child(6n+4){--rc:var(--r6)}[data-theme=rainbow] .rooms>:nth-child(6n+5){--rc:var(--r5)}[data-theme=rainbow] .rooms>:nth-child(6n+6){--rc:var(--r2)}
[data-theme=rainbow] .room b svg{stroke:var(--rc)}
[data-theme=rainbow] .room .bar span{background:var(--rc)}
[data-theme=rainbow] .room{border-top:4px solid var(--rc)}
[data-theme=rainbow] .t-red b svg{stroke:var(--r1)}[data-theme=rainbow] .t-sky b svg{stroke:var(--r6)}[data-theme=rainbow] .t-butter b svg{stroke:var(--r5)}[data-theme=rainbow] .t-mint b svg{stroke:var(--r4)}
[data-theme=rainbow] .lib>b svg{width:26px;height:26px}
[data-theme=rainbow] .lib-count div:nth-child(1) b{color:var(--r1)}[data-theme=rainbow] .lib-count div:nth-child(2) b{color:var(--r4)}[data-theme=rainbow] .lib-count div:nth-child(3) b{color:var(--r3)}
[data-theme=rainbow] .lib-count b{font-family:Fredoka,sans-serif;font-weight:600}
[data-theme=rainbow] .days .day:nth-child(6n+1).done{background:var(--r1)}[data-theme=rainbow] .days .day:nth-child(6n+2).done{background:var(--r4)}[data-theme=rainbow] .days .day:nth-child(6n+3).done{background:var(--r3)}
[data-theme=rainbow] .days .day:nth-child(6n+4).done{background:var(--r6)}[data-theme=rainbow] .days .day:nth-child(6n+5).done{background:var(--r5)}[data-theme=rainbow] .days .day:nth-child(6n+6).done{background:var(--r2)}
[data-theme=rainbow] .day.done{color:#fff}[data-theme=rainbow] .day.done svg{stroke:#fff}
[data-theme=rainbow] .stat:nth-child(1) b{color:var(--r1)}[data-theme=rainbow] .stat:nth-child(2) b{color:var(--r4)}
[data-theme=rainbow] .chk.done i{background:var(--r4);border-color:var(--r4)}
[data-theme=rainbow] .today{background:var(--t3)}
[data-theme] .lib,[data-theme] .lib-count div,[data-theme] .rt{border:1.5px solid var(--line-soft);box-shadow:var(--sh)}
[data-theme] .rt{box-shadow:none;background:#fff}
[data-theme=night] .lib-count div,[data-theme=night] .rt{background:#1F1E2B}
.pdfpick .chips{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:34px;height:34px}
.pdfpick .chips i{border-radius:50%;width:15px;height:15px}

/* suggestions box (29/sep) */
.fbfab{position:fixed;right:max(14px,calc(50% - 201px));bottom:92px;z-index:30;display:flex;align-items:center;gap:6px;background:var(--primary,var(--tomato));color:#fff;border-radius:99px;padding:10px 14px;font-weight:800;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.fbfab svg{width:18px;height:18px;stroke:#fff}
.fbfab em{position:absolute;top:-6px;right:-4px;background:#E5484D;color:#fff;font-style:normal;font-size:11px;min-width:20px;height:20px;border-radius:99px;display:grid;place-items:center;border:2px solid #fff}
[data-theme=rainbow] .fbfab{background:linear-gradient(135deg,var(--r1),var(--r2) 50%,var(--r3))}
[data-theme=night] .fbfab{color:#16151F}[data-theme=night] .fbfab svg{stroke:#16151F}
#fbtext,.fbitem textarea{width:100%;min-height:130px;border:1.5px solid var(--line-soft,#ddd);border-radius:14px;padding:14px;font:600 16px "Atkinson Hyperlegible Next",sans-serif;background:#fff;color:var(--ink);margin-bottom:12px;resize:vertical}
.fbitem textarea{min-height:70px;margin:8px 0}
.fbitem small{display:block;font-size:12px;font-weight:700;color:var(--ink2)}
.fbitem small.rep{color:var(--primary);margin-top:8px}
.fbitem p{font-weight:600;margin:3px 0}
.fbitem.done{opacity:.6}
.fbthanks{text-align:center}.fbthanks>b svg{width:34px;height:34px;stroke:var(--primary)}.fbthanks h2{font-size:22px;margin:6px 0}.fbthanks p{font-weight:600;color:var(--ink2);margin-bottom:10px}
[data-theme=night] #fbtext,[data-theme=night] .fbitem textarea{background:#1F1E2B}
@media (max-width:380px){.fbfab span{display:none}.fbfab{padding:11px}}