/* Joy Chaser Connect — one stylesheet, themed by body[data-theme] and body[data-tier]. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#5BBFB5;--teal-d:#2E8B80;--coral:#F19481;--orange:#E05535;--sage:#A8C5B5;--purple:#8B5FC0;--navy:#1B2D5C;
  --gold:#E6A93C;--pink:#DD85CF;--sky:#6FB3D9;--mint:#76AF9B;
  --display:'Poppins',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;--hand:'Gochi Hand',cursive;
  --r:22px;--r-sm:14px;--gap:1.1rem;
}
/* ---------- themes ---------- */
body{--bg:#121212;--bg2:#1a1a1e;--card:#fff;--ink:#1a1a1a;--muted:#6b6b6b;--line:#ece6da;--soft:#F6F3EC;--accent:var(--teal);--accent-ink:#fff;--head:#fff;--head-muted:rgba(255,255,255,.65);--shadow:5px 5px 0 rgba(91,191,181,.45);--chip:#F6F3EC;--chip-ink:#334;--nav:#1a1a1e;--nav-ink:#cfcfcf}
body[data-theme=sunny]{--bg:#FFF6E6;--bg2:#FFEFD3;--card:#fff;--ink:#1a1a1a;--muted:#5d5a55;--line:#f0e4cc;--soft:#FFF6E6;--accent:#F19481;--head:#1B2D5C;--head-muted:#6b5f55;--shadow:5px 5px 0 #F4DC8A;--nav:#fff;--nav-ink:#5d5a55;--chip:#FFF1D6}
body[data-theme=night]{--bg:#0e1014;--bg2:#161920;--card:#181b22;--ink:#E9ECF1;--muted:#98a0ad;--line:#2a2f3a;--soft:#20242d;--accent:#7FD1C7;--accent-ink:#0e1014;--head:#fff;--head-muted:#98a0ad;--shadow:none;--chip:#232833;--chip-ink:#dfe3ea;--nav:#12151b;--nav-ink:#98a0ad}
body[data-theme=calm]{--bg:#F4F1EA;--bg2:#ECE7DC;--card:#fff;--ink:#1f2330;--muted:#6a6f7c;--line:#e6e0d3;--soft:#F7F4EE;--accent:#2E8B80;--head:#1B2D5C;--head-muted:#6a6f7c;--shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(27,45,92,.06);--nav:#fff;--nav-ink:#6a6f7c;--chip:#F1EDE4}
body[data-theme=ocean]{--bg:#0f2a3a;--bg2:#12344a;--card:#f7fbfc;--ink:#10212c;--muted:#5b6d78;--line:#dce9ee;--soft:#eef6f8;--accent:#3AA5C2;--head:#fff;--head-muted:#a9c6d3;--shadow:5px 5px 0 rgba(58,165,194,.35);--nav:#0c2230;--nav-ink:#a9c6d3;--chip:#e6f1f4}
body[data-theme=contrast]{--bg:#000;--bg2:#000;--card:#fff;--ink:#000;--muted:#222;--line:#000;--soft:#fff;--accent:#0000c8;--accent-ink:#fff;--head:#fff;--head-muted:#fff;--shadow:none;--chip:#fff;--chip-ink:#000;--nav:#000;--nav-ink:#fff}
body[data-theme=contrast] .card,body[data-theme=contrast] .chip,body[data-theme=contrast] .btn{border:2px solid #000!important}
/* ---------- base ---------- */
html{font-size:16px}
html[data-text=large]{font-size:18px}html[data-text=xl]{font-size:20.5px}
html[data-font=readable] body{--display:'Atkinson Hyperlegible',sans-serif;--body:'Atkinson Hyperlegible',sans-serif;--hand:'Atkinson Hyperlegible',sans-serif;letter-spacing:.01em}
body{font-family:var(--body);background:var(--bg);color:var(--ink);min-height:100vh;line-height:1.45;-webkit-font-smoothing:antialiased}
body[data-role=client]{padding-bottom:86px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;color:var(--ink)}
a{color:var(--accent)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.5rem 1rem;z-index:9999}.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:1.4rem 1.2rem 3rem}
.wrap.narrow{max-width:720px}
.ic{flex-shrink:0;vertical-align:middle}
.hand{font-family:var(--hand);color:var(--coral);font-size:1.15rem}
body[data-tier=teen] .hand,body[data-tier=adult] .hand{font-family:var(--body);font-style:italic;font-size:.98rem;color:var(--muted)}
.muted{color:var(--muted);font-size:.9rem}
.small{font-size:.8rem}
.center{text-align:center}
.row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.hrow{display:flex;gap:.7rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.hrow>div:first-child{min-width:0}
.spacer{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.stack>*+*{margin-top:var(--gap)}
/* page heads sit on the page background */
.pagehead{margin:.4rem 0 1.2rem}
.pagehead h1{color:var(--head);font-size:1.9rem}
.pagehead p{color:var(--head-muted);margin-top:.25rem}
.pagehead .hand{display:block;margin-top:.2rem}
/* ---------- topbar + tabbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.1rem;position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--display);font-weight:900;letter-spacing:.5px;font-size:1.15rem}
.brand .b1{color:var(--head)}.brand .b2{background:var(--coral);color:#fff;border-radius:7px;padding:0 8px}
.brand small{font-family:var(--body);font-weight:700;font-size:.72rem;color:var(--head-muted);letter-spacing:.08em;text-transform:uppercase;margin-left:4px}
.help-btn{display:flex;align-items:center;gap:.4rem;background:#E05535;color:#fff;text-decoration:none;font-weight:700;font-size:.85rem;padding:.45rem .85rem;border-radius:999px}
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;justify-content:space-around;background:var(--nav);border-top:1px solid var(--line);padding:.35rem .3rem calc(.35rem + env(safe-area-inset-bottom))}
.tabbar a{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--nav-ink);font-size:.72rem;font-weight:700;padding:.35rem 0;border-radius:14px;position:relative}
.tabbar a.on{color:var(--accent)}
.tabbar a.on .ic{transform:translateY(-1px)}
.tabbar .dot{position:absolute;top:2px;right:calc(50% - 20px);background:#E05535;color:#fff;font-style:normal;font-size:.65rem;border-radius:999px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px}
body[data-tier=little] .tabbar a{font-size:.8rem}
body[data-tier=little] .tabbar .ic{width:30px;height:30px}
.topbar.pro{background:var(--card);border-bottom:1px solid var(--line)}
.topbar.pro .brand .b1{color:var(--head)}
.pronav{display:flex;gap:.2rem;align-items:center;flex-wrap:wrap}
.pronav a{text-decoration:none;color:var(--muted);font-weight:700;font-size:.9rem;padding:.45rem .8rem;border-radius:999px}
.pronav a.on,.pronav a:hover{background:var(--soft);color:var(--navy)}
.pronav a.out{display:flex;gap:.3rem;align-items:center}
@media(max-width:640px){.pronav a{padding:.4rem .5rem;font-size:.8rem}.pronav a.out span{display:none}.topbar.pro{flex-wrap:wrap;gap:.4rem}}
.handoff-bar{background:var(--gold);color:#1a1a1a;font-weight:700;font-size:.88rem;padding:.5rem 1rem;display:flex;gap:.5rem;align-items:center;justify-content:center;flex-wrap:wrap}
.handoff-bar a{background:#1a1a1a;color:#fff;border-radius:999px;padding:.2rem .8rem;text-decoration:none}
.crisis-strip{position:fixed;left:0;right:0;bottom:64px;z-index:55;background:#fdeee9;color:#7a2e1a;font-size:.8rem;text-align:center;padding:.35rem .6rem}
.crisis-strip a{color:#b23b1e;font-weight:800}
body:has(.crisis-strip){padding-bottom:112px}
/* ---------- cards ---------- */
.card{background:var(--card);color:var(--ink);border-radius:var(--r);padding:1.35rem;box-shadow:var(--shadow);border:1px solid var(--line)}
body[data-theme=joy] .card{border:none}
.card+.card{margin-top:var(--gap)}
.card h2{font-size:1.2rem;margin-bottom:.8rem;display:flex;gap:.5rem;align-items:center}
.card h2 .ic{color:var(--accent)}
.card h3{font-size:1rem;margin-bottom:.5rem}
.card .sub{color:var(--muted);font-size:.9rem;margin:-.4rem 0 .8rem}
body[data-tier=little] .card{border-radius:28px 24px 30px 22px;padding:1.5rem}
body[data-tier=little] .card h2{font-size:1.45rem}
.soft{background:var(--soft);border-radius:var(--r-sm);padding:.9rem 1rem}
.note-box{border-left:4px solid var(--accent);background:var(--soft);padding:.8rem 1rem;border-radius:0 12px 12px 0}
.divider{height:1px;background:var(--line);margin:1rem 0}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--display);font-weight:700;font-size:.95rem;border:2px solid transparent;cursor:pointer;text-decoration:none;padding:.7rem 1.3rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);transition:transform .12s,filter .12s;min-height:44px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.line{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn.warm{background:var(--coral);color:#fff}
.btn.danger{background:#E05535;color:#fff}
.btn.dark{background:var(--navy);color:#fff}
.btn.sm{padding:.35rem .9rem;font-size:.82rem;min-height:34px}
.btn.big{padding:1rem 1.8rem;font-size:1.1rem}
.btn.block{display:flex;width:100%}
body[data-theme=joy] .btn:not(.ghost):not(.line):not(.sm){box-shadow:4px 4px 0 rgba(0,0,0,.25)}
body[data-tier=little] .btn{font-size:1.1rem;padding:.9rem 1.6rem;min-height:54px}
.iconbtn{background:none;border:none;cursor:pointer;color:var(--muted);padding:.3rem;border-radius:10px;display:inline-flex}
.iconbtn:hover{color:var(--orange);background:var(--soft)}
/* ---------- forms ---------- */
label.lbl,.lbl{display:block;font-weight:700;font-size:.9rem;margin:.9rem 0 .4rem;color:var(--ink)}
.input,textarea.input,select.input{width:100%;padding:.75rem .95rem;border:2px solid var(--line);border-radius:14px;font-family:var(--body);font-size:1rem;background:var(--soft);color:var(--ink);outline:none;transition:border-color .15s}
.input:focus{border-color:var(--accent)}
textarea.input{resize:vertical;min-height:90px}
body[data-tier=little] .input{font-size:1.2rem;padding:.9rem 1rem}
.check{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem;margin:.4rem 0;cursor:pointer}
.check input{margin-top:.2rem;width:18px;height:18px;accent-color:var(--accent)}
.err{background:#fbe4dd;color:#9a2e14;border-radius:12px;padding:.7rem 1rem;font-weight:600;font-size:.9rem;margin-bottom:1rem}
.ok{background:#e3f4ec;color:#146c3c;border-radius:12px;padding:.7rem 1rem;font-weight:600;font-size:.9rem;margin-bottom:1rem}
/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{background:var(--chip);color:var(--chip-ink);border:2px solid transparent;border-radius:999px;padding:.45rem .95rem;font-size:.9rem;cursor:pointer;font-family:var(--body);user-select:none;transition:all .12s;line-height:1.2}
.chip:hover{border-color:var(--accent)}
.chip.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
body[data-tier=little] .chip{font-size:1.05rem;padding:.6rem 1.1rem}
/* ---------- misc components ---------- */
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;border-radius:999px;padding:.15rem .6rem;background:var(--soft);color:var(--muted)}
.pill.warn{background:#fdeee9;color:#b23b1e}.pill.good{background:#e3f4ec;color:#146c3c}.pill.info{background:#e7f1f8;color:#245b82}.pill.purple{background:#f0e8fb;color:#6b3fa5}
.empty{color:var(--muted);text-align:center;padding:1.2rem;font-size:.92rem}
.say{background:none;border:none;color:var(--accent);cursor:pointer;vertical-align:middle;padding:2px;margin-left:4px;display:none}
body[data-read="1"] .say{display:inline-flex}
#toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(160px);background:var(--navy);color:#fff;padding:.8rem 1.3rem;border-radius:999px;font-weight:700;font-size:.95rem;transition:transform .3s;z-index:3000;max-width:92vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#toast{opacity:0;pointer-events:none}#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.bit{position:fixed;width:10px;height:14px;border-radius:2px;pointer-events:none;z-index:4000}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(10,12,18,.55);z-index:2000;align-items:center;justify-content:center;padding:1rem}
.modal-bg.open{display:flex}
.modal{background:var(--card);color:var(--ink);border-radius:24px;padding:1.6rem;width:100%;max-width:520px;max-height:90vh;overflow:auto;position:relative}
.modal-x{position:absolute;top:.8rem;right:.8rem;background:none;border:none;color:var(--muted);cursor:pointer}
.tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1rem}
.tabs button,.tabs a{background:var(--soft);border:none;border-radius:999px;padding:.5rem 1rem;font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--ink);cursor:pointer;text-decoration:none}
.tabs .on{background:var(--navy);color:#fff}
body[data-theme=night] .tabs .on{background:var(--accent);color:var(--accent-ink)}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;padding:.5rem;border-bottom:1px solid var(--line)}
.tbl td{padding:.65rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
/* ---------- client: home ---------- */
.hello{display:flex;align-items:center;gap:1rem;margin:.3rem 0 1.2rem}
.hello .buddy-wrap{width:78px;height:78px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--card);border-radius:50% 46% 54% 48%;box-shadow:var(--shadow)}
.hello h1{color:var(--head);font-size:1.7rem}
.hello p{color:var(--head-muted)}
.streak{display:flex;gap:.8rem;align-items:center}
.flame{display:flex;align-items:center;gap:.35rem;font-family:var(--display);font-weight:900;font-size:1.6rem;color:var(--orange)}
.flame .ic{color:var(--orange)}
.flame.off,.flame.off .ic{color:var(--muted)}
.shields{display:flex;gap:.25rem}
.shield{color:var(--sky);display:inline-flex}.shield.empty{color:var(--line);padding:0;text-align:left}
.weekdots{display:flex;gap:.35rem;margin-top:.6rem}
.weekdots i{width:30px;height:30px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.7rem;font-weight:800;color:var(--muted);border:2px solid transparent}
.weekdots i.on{background:var(--accent);color:var(--accent-ink)}
.weekdots i.shielded{background:#e7f1f8;color:#245b82}
.weekdots i.today{border-color:var(--accent)}
.big-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.1rem}
.big-actions a{background:var(--card);color:var(--ink);text-decoration:none;border-radius:24px;padding:1.2rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--display);font-weight:800;font-size:1.05rem;box-shadow:var(--shadow);text-align:center}
.big-actions a .ic{color:var(--accent)}
.plan-item{display:flex;gap:.7rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line)}
.plan-item:last-child{border-bottom:none}
.tick{width:30px;height:30px;border:2.5px solid var(--ink);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:transparent;background:var(--card)}
.done .tick,.tick.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.done .tx{text-decoration:line-through;color:var(--muted)}
.plan-item .tx{flex:1}
.cheer{display:flex;gap:.8rem;align-items:center;background:#fff4e6;color:#5a3d12;border-radius:18px;padding:.9rem 1rem;margin-bottom:var(--gap)}
body[data-theme=night] .cheer{background:#2a2419;color:#f3dfb8}
/* check-in */
.faces{display:flex;gap:.5rem;justify-content:space-between}
.face{flex:1;background:var(--soft);border:3px solid transparent;border-radius:20px;padding:.6rem .2rem .4rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.78rem;font-weight:700;color:var(--muted);transition:transform .1s}
.face:hover{transform:translateY(-2px)}
.face.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card))}
body[data-tier=little] .face svg{width:64px;height:64px}
.slider-row{display:flex;align-items:center;gap:.8rem}
.slider-row input[type=range]{flex:1;accent-color:var(--accent);height:30px}
.slider-row b{font-family:var(--display);font-size:1.3rem;min-width:2.2ch;text-align:right}
.slider-ends{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}
/* toolbox */
.area{border-radius:var(--r);background:var(--card);padding:1.2rem;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:var(--gap)}
.area-head{display:flex;gap:.8rem;align-items:center;margin-bottom:.9rem}
.area-ic{width:50px;height:50px;border-radius:50% 46% 54% 48%;background:var(--ac,var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.area-head h2{margin:0;font-size:1.15rem}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem}
.tcard{display:flex;gap:.75rem;align-items:flex-start;text-decoration:none;color:var(--ink);background:var(--soft);border:2px solid transparent;border-radius:18px;padding:.85rem;transition:transform .12s,border-color .12s}
.tcard:hover{transform:translateY(-2px);border-color:var(--ac,var(--accent))}
.tcard .ic{color:var(--ac,var(--accent))}
.tcard b{font-family:var(--display);display:block;font-size:.98rem}
.tcard small{color:var(--muted);font-size:.82rem;display:block;line-height:1.3;margin-top:.1rem}
.tcard .used{font-size:.7rem;color:var(--accent);font-weight:800;margin-top:.3rem;display:block}
body[data-tier=little] .tgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
body[data-tier=little] .tcard{flex-direction:column;align-items:center;text-align:center;padding:1.1rem .6rem}
body[data-tier=little] .tcard .ic{width:44px;height:44px}
body[data-tier=little] .tcard small{display:none}
/* tool page */
.tool-head{display:flex;align-items:center;gap:1rem;margin:.2rem 0 1.2rem}
.tool-head .ti{width:60px;height:60px;border-radius:50% 46% 54% 48%;background:var(--ac,var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tool-head h1{color:var(--head);font-size:1.7rem}
.tool-head p{color:var(--head-muted)}
.back{display:inline-flex;gap:.3rem;align-items:center;color:var(--head-muted);text-decoration:none;font-size:.88rem;font-weight:700;margin-bottom:.6rem}
.entry{border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;margin-bottom:.6rem;background:var(--card)}
.entry .when{font-size:.72rem;color:var(--muted);margin-top:.3rem}
.star{background:none;border:none;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:700;padding:.2rem .4rem;border-radius:8px}
.star.on{color:var(--gold)}
.share-tog{font-size:.75rem}
/* chat */
.chat{display:flex;flex-direction:column;height:calc(100vh - 230px);min-height:380px}
.chat-log{flex:1;overflow-y:auto;padding:.6rem .2rem;display:flex;flex-direction:column;gap:.45rem}
.bubble{max-width:78%;padding:.6rem .9rem;border-radius:18px;font-size:.95rem;line-height:1.35;white-space:pre-wrap;word-wrap:break-word}
.bubble.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px}
.bubble.them{align-self:flex-start;background:var(--soft);color:var(--ink);border-bottom-left-radius:6px}
.bubble .t{display:block;font-size:.65rem;opacity:.7;margin-top:.2rem}
.chat-day{align-self:center;font-size:.7rem;color:var(--muted);margin:.4rem 0}
.chat-form{display:flex;gap:.5rem;padding-top:.6rem;border-top:1px solid var(--line)}
.chat-form textarea{flex:1;min-height:48px;max-height:140px}
.quick{display:flex;gap:.4rem;overflow-x:auto;padding:.4rem 0}
.quick .chip{white-space:nowrap;font-size:.82rem}
.hours{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--muted);background:var(--soft);border-radius:14px;padding:.7rem .9rem;margin-bottom:.6rem}
/* crisis */
.crisis{background:#fff;color:#1a1a1a;border:3px solid #E05535;border-radius:22px;padding:1.3rem}
.crisis h2{color:#b23b1e}
.crisis .line{display:flex;gap:.8rem;align-items:center;padding:.7rem 0;border-bottom:1px solid #f1e2dc}
.crisis .line:last-child{border:none}
.crisis .num{font-family:var(--display);font-weight:900;font-size:1.4rem;color:#b23b1e;text-decoration:none}
/* worker */
.stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--display);font-size:1.8rem;color:var(--navy)}
.stat span{font-size:.8rem;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.2rem}
.kid-card{display:flex;gap:.9rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:.9rem 1rem;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .12s}
.kid-card:hover{transform:translateY(-2px)}
.kid-card .nm{font-family:var(--display);font-weight:800;font-size:1.05rem}
.kid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.8rem}
.spark{display:flex;gap:2px;align-items:flex-end;height:26px}
.spark i{width:6px;border-radius:2px;background:var(--accent);opacity:.8}
.spark i.none{background:var(--line);height:4px!important}
.alert-row{display:flex;gap:.7rem;align-items:center;background:#fdeee9;color:#7a2e1a;border-radius:14px;padding:.7rem .9rem;margin-bottom:.5rem}
.feed-row{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.feed-row .ic{color:var(--accent);margin-top:2px}
.feed-row .wh{font-size:.72rem;color:var(--muted)}
.area-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
.apick{display:flex;gap:.6rem;align-items:flex-start;border:2px solid var(--line);border-radius:16px;padding:.7rem .8rem;cursor:pointer;background:var(--card);transition:border-color .12s}
.apick.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,var(--card))}
.apick .ic{color:var(--ac)}
.apick b{font-size:.92rem;display:block}
.apick small{font-size:.76rem;color:var(--muted);display:block;line-height:1.25}
.apick.locked{opacity:.55;cursor:not-allowed}
.rec{font-size:.65rem;font-weight:800;color:#146c3c;background:#e3f4ec;border-radius:999px;padding:.05rem .45rem;margin-left:.3rem}
.tip{display:flex;gap:.7rem;align-items:flex-start;background:#fff8e8;color:#5a4414;border-radius:16px;padding:.8rem 1rem;font-size:.9rem;margin-bottom:.8rem}
.tip .ic{color:var(--gold);margin-top:1px}
.logincard{border:3px dashed var(--line);border-radius:22px;padding:1.4rem;text-align:center;background:#fff;color:#1a1a1a}
.pics{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.pic{aspect-ratio:1;border-radius:18px;border:3px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--soft);color:#fff}
.pic span{width:64%;height:64%;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pic.sel{border-color:var(--ink)}
.picked{display:flex;gap:.5rem;justify-content:center;min-height:52px;margin:.6rem 0}
.picked i{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;border:2px dashed var(--line)}
/* landing */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:2rem 0}
.hero h1{font-size:2.6rem;color:var(--head)}
.hero p.lead{font-size:1.1rem;color:var(--head-muted);margin:.8rem 0 1.2rem}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero h1{font-size:2rem}}
.feature{display:flex;gap:.8rem;align-items:flex-start}
.feature .ic{color:var(--accent);margin-top:3px}
.feature b{font-family:var(--display)}
.tiers-demo{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
@media(max-width:700px){.tiers-demo{grid-template-columns:1fr 1fr}}
/* motion */
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
body[data-motion=reduce] *{animation:none!important;transition:none!important}
@media print{.topbar,.tabbar,.crisis-strip,.btn,.no-print{display:none!important}body{background:#fff;color:#000}.card{box-shadow:none;border:1px solid #ccc}}
/* engines */
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.note-item{padding:.9rem .8rem .5rem;min-height:110px;border:2px solid #1a1a1a;box-shadow:3px 3px 0 rgba(0,0,0,.14);font-family:var(--hand);font-size:1.15rem;line-height:1.2;color:#1a1a1a}
.note-item .star,.note-item .iconbtn{color:rgba(0,0,0,.45);font-family:var(--body)}
.plan-sec{padding:1rem 0;border-bottom:1px solid var(--line)}
.plan-sec:last-of-type{border-bottom:none}
.plan-sec h3{font-size:1.02rem;margin-bottom:.25rem}
.plan-sec p{margin-bottom:.5rem}
.plan-sec.crisis{border:3px solid #E05535;border-radius:18px;padding:1rem;margin-top:1rem}
.sort-pile{display:flex;flex-wrap:wrap;gap:.5rem;min-height:64px;padding:.8rem;border:2px dashed var(--line);border-radius:16px;margin-bottom:1rem}
.sort-buckets{display:grid;gap:.7rem}
@media(max-width:640px){.sort-buckets{grid-template-columns:1fr!important}}
.sort-bucket{border:3px solid var(--bc);border-radius:18px;padding:.8rem;min-height:150px;background:color-mix(in srgb,var(--bc) 7%,var(--card))}
.sort-bucket b{display:block;font-family:var(--display)}
.sort-bucket small{color:var(--muted);display:block;margin-bottom:.4rem}
.sort-in{display:flex;flex-wrap:wrap;gap:.4rem}
.sort-card{background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:.45rem .75rem;font-size:.9rem;cursor:grab;touch-action:none;user-select:none;box-shadow:2px 2px 0 rgba(0,0,0,.12)}
.sort-card.pick{outline:3px solid var(--gold)}
.sort-card.drag{position:fixed;z-index:1500;cursor:grabbing;box-shadow:6px 8px 0 rgba(0,0,0,.18)}
.scn-opt{border-color:var(--line)!important;color:var(--ink)!important}
.progress-ring{display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap}

/* ---------- Vibe Studio (v2, 2026-09-28): looks, patterns, shapes, card styles ---------- */
body[data-look] .topbar{background:color-mix(in srgb,var(--bg2) 86%,transparent)}
body[data-look]{background:var(--bg);background-attachment:fixed}
/* patterns are a mask over a tinted layer, so they take the look's colors */
body[data-pattern]:not([data-pattern=none])::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--head);opacity:.07;-webkit-mask-size:var(--pat-size,28px);mask-size:var(--pat-size,28px)}
body[data-theme=night][data-pattern]::before,body[data-theme=joy][data-pattern]::before,body[data-theme=ocean][data-pattern]::before{opacity:.09}
body[data-pattern=dots]::before,.pat[data-k=dots] i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='7' cy='7' r='2.4'/%3E%3Ccircle cx='21' cy='21' r='2.4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='7' cy='7' r='2.4'/%3E%3Ccircle cx='21' cy='21' r='2.4'/%3E%3C/svg%3E")}
body[data-pattern=grid]::before,.pat[data-k=grid] i{--pat-size:32px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' stroke='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' stroke='black'/%3E%3C/svg%3E")}
body[data-pattern=checkers]::before,.pat[data-k=checkers] i{--pat-size:44px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='22' height='22'/%3E%3Crect x='22' y='22' width='22' height='22'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='22' height='22'/%3E%3Crect x='22' y='22' width='22' height='22'/%3E%3C/svg%3E")}
body[data-pattern=waves]::before,.pat[data-k=waves] i{--pat-size:60px 24px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cpath d='M0 12c10-8 20-8 30 0s20 8 30 0' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cpath d='M0 12c10-8 20-8 30 0s20 8 30 0' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
body[data-pattern=squiggles]::before,.pat[data-k=squiggles] i{--pat-size:70px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 20c4-6 8 6 12 0s8 6 12 0'/%3E%3Cpath d='M40 52c4-6 8 6 12 0s8 6 12 0'/%3E%3Ccircle cx='52' cy='18' r='4'/%3E%3Cpath d='M14 50l6 6M20 50l-6 6'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 20c4-6 8 6 12 0s8 6 12 0'/%3E%3Cpath d='M40 52c4-6 8 6 12 0s8 6 12 0'/%3E%3Ccircle cx='52' cy='18' r='4'/%3E%3Cpath d='M14 50l6 6M20 50l-6 6'/%3E%3C/g%3E%3C/svg%3E")}
body[data-pattern=hearts]::before,.pat[data-k=hearts] i{--pat-size:48px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M12 18c-3-4-9-1-6 4l6 6 6-6c3-5-3-8-6-4z'/%3E%3Cpath d='M36 42c-2-3-7-1-5 3l5 4 5-4c2-4-3-6-5-3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M12 18c-3-4-9-1-6 4l6 6 6-6c3-5-3-8-6-4z'/%3E%3Cpath d='M36 42c-2-3-7-1-5 3l5 4 5-4c2-4-3-6-5-3z'/%3E%3C/svg%3E")}
body[data-pattern=leaves]::before,.pat[data-k=leaves] i{--pat-size:64px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M10 30c0-12 8-18 20-20-2 12-8 20-20 20z'/%3E%3Cpath d='M44 60c0-9 6-14 15-15-1 9-6 15-15 15z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M10 30c0-12 8-18 20-20-2 12-8 20-20 20z'/%3E%3Cpath d='M44 60c0-9 6-14 15-15-1 9-6 15-15 15z'/%3E%3C/svg%3E")}
body[data-pattern=bubbles]::before,.pat[data-k=bubbles] i{--pat-size:90px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='20' cy='22' r='12'/%3E%3Ccircle cx='66' cy='60' r='18'/%3E%3Ccircle cx='70' cy='14' r='5'/%3E%3Ccircle cx='24' cy='74' r='7'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='20' cy='22' r='12'/%3E%3Ccircle cx='66' cy='60' r='18'/%3E%3Ccircle cx='70' cy='14' r='5'/%3E%3Ccircle cx='24' cy='74' r='7'/%3E%3C/g%3E%3C/svg%3E")}
body[data-pattern=pixels]::before,.pat[data-k=pixels] i{--pat-size:40px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='24' y='14' width='6' height='6'/%3E%3Crect x='14' y='30' width='6' height='6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='24' y='14' width='6' height='6'/%3E%3Crect x='14' y='30' width='6' height='6'/%3E%3C/svg%3E")}
body[data-pattern=stripes]::before,.pat[data-k=stripes] i{--pat-size:36px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M-9 45L45 -9M-9 9L9 -9M27 45L45 27' stroke='black' stroke-width='6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M-9 45L45 -9M-9 9L9 -9M27 45L45 27' stroke='black' stroke-width='6'/%3E%3C/svg%3E")}
body[data-pattern=critters]::before,.pat[data-k=critters] i{--pat-size:84px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg%3E%3Cellipse cx='20' cy='26' rx='8' ry='6'/%3E%3Ccircle cx='12' cy='16' r='3'/%3E%3Ccircle cx='20' cy='13' r='3'/%3E%3Ccircle cx='28' cy='16' r='3'/%3E%3Cellipse cx='62' cy='66' rx='8' ry='6'/%3E%3Ccircle cx='54' cy='56' r='3'/%3E%3Ccircle cx='62' cy='53' r='3'/%3E%3Ccircle cx='70' cy='56' r='3'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg%3E%3Cellipse cx='20' cy='26' rx='8' ry='6'/%3E%3Ccircle cx='12' cy='16' r='3'/%3E%3Ccircle cx='20' cy='13' r='3'/%3E%3Ccircle cx='28' cy='16' r='3'/%3E%3Cellipse cx='62' cy='66' rx='8' ry='6'/%3E%3Ccircle cx='54' cy='56' r='3'/%3E%3Ccircle cx='62' cy='53' r='3'/%3E%3Ccircle cx='70' cy='56' r='3'/%3E%3C/g%3E%3C/svg%3E")}
/* shapes */
body[data-shape=bubbly]{--r:32px;--r-sm:20px}
body[data-shape=sharp]{--r:8px;--r-sm:6px}
body[data-shape=sharp] .btn,body[data-shape=sharp] .chip{border-radius:8px}
/* card styles */
body[data-card=flat] .card,body[data-card=flat] .area{box-shadow:none}
body[data-card=sticker] .card,body[data-card=sticker] .area{border:2.5px solid var(--ink)}
body[data-card=glow] .card,body[data-card=glow] .area{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 0 24px color-mix(in srgb,var(--accent) 22%,transparent),0 0 40px color-mix(in srgb,var(--accent2,var(--accent)) 12%,transparent)}
body[data-card=glass] .card,body[data-card=glass] .area{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.35)}
body[data-card=holo] .card,body[data-card=holo] .area{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(115deg,#ff9ad5,#9fe7ff,#c7b3ff,#b8ffcf,#ffe29a,#ff9ad5) border-box;background-size:100% 100%,300% 300%;animation:holo 8s linear infinite}
@keyframes holo{to{background-position:0 0,300% 0}}
body[data-motion=reduce][data-card=holo] .card{animation:none}
@media (prefers-reduced-motion:reduce){body[data-card=holo] .card{animation:none}}
body[data-vfont=pixel] h1,body[data-vfont=pixel] h2{letter-spacing:.02em;font-weight:700}
body[data-vfont=bold] h1{letter-spacing:.01em}
/* Vibe Studio page */
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.7rem}
.look{border:2px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);padding:.55rem;cursor:pointer;text-align:left;font:inherit;position:relative}
.look.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.look .sw{display:flex;height:46px;border-radius:12px;overflow:hidden;margin-bottom:.45rem}
.look .sw i{flex:1}
.look b{display:block;font-size:.88rem}.look small{color:var(--muted);font-size:.72rem;line-height:1.2;display:block}
.look.locked{opacity:.55}
.look.locked::after{content:"";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='6' y='11' width='12' height='9' rx='2'/%3E%3Cpath d='M9 11V8a3 3 0 016 0v3'/%3E%3C/svg%3E") center/14px no-repeat}
.swatch-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.swatch{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}
.swatch.sel{border-color:var(--ink)}
.pat{width:64px;height:48px;border-radius:12px;border:2px solid var(--line);background:var(--soft);cursor:pointer;position:relative;overflow:hidden;padding:0}
.pat.sel{border-color:var(--accent)}
.pat span{position:absolute;left:0;right:0;bottom:2px;font-size:.62rem;font-weight:700;color:var(--muted);text-align:center}
.vibe-preview{border-radius:var(--r);padding:1rem;background:var(--bg);border:1px solid var(--line);position:sticky;top:64px;z-index:2}
/* levels + family */
.lvl-pill{display:inline-flex;align-items:center;gap:.35rem;background:color-mix(in srgb,var(--lc) 18%,var(--card));color:var(--ink);border:1.5px solid var(--lc);font-weight:800;font-size:.82rem;padding:.25rem .7rem;border-radius:999px}
.vibe-chip{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;padding:.4rem .9rem;border-radius:999px;background:var(--soft)}
.vibe-chip i{width:16px;height:16px;border-radius:50%}
.ladder{display:grid;gap:.5rem;margin-top:.6rem}
.rung{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem .9rem;border-radius:16px;background:var(--soft);border:2px solid transparent}
.rung.cur{border-color:var(--lc);background:color-mix(in srgb,var(--lc) 12%,var(--card))}
.rung .n{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--lc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-family:var(--display)}
.rung b{display:block}.rung small{color:var(--muted);display:block;line-height:1.35}
.nudge{display:flex;gap:.8rem;align-items:flex-start;background:#FFF4DF;color:#3b2a10;border-radius:16px;padding:.9rem 1rem;margin-bottom:.8rem;border:1.5px solid #E6A93C}
.nudge .ic{color:#B87A12}
.promise{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .7rem;border-radius:12px;background:var(--soft);margin-bottom:.4rem;cursor:pointer}
.promise input{margin-top:.25rem;width:20px;height:20px;accent-color:var(--accent)}
.sign{font-family:var(--hand);font-size:1.6rem;border:none;border-bottom:2px dashed var(--line);background:transparent;color:var(--ink);width:100%;padding:.2rem .1rem}
/* level-up ceremony */
.levelup{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.levelup .big-n{font-family:var(--display);font-weight:900;font-size:5rem;line-height:1;color:var(--head)}
.levelup .ring{width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--lc) var(--p,0%),color-mix(in srgb,var(--lc) 18%,transparent) 0);transition:--p 1s;margin:1rem auto}
.levelup .ring>div{width:150px;height:150px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-direction:column}
.step-card{max-width:560px;width:100%;text-align:left}
/* Joy Go */
.go-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 85%,#000 0%),color-mix(in srgb,var(--accent2,var(--accent)) 70%,var(--accent)));color:var(--accent-ink);border:none}
.go-hero h2,.go-hero .ic{color:inherit!important}
.goq{display:flex;gap:.8rem;align-items:center;padding:.8rem;border-radius:16px;background:var(--soft);margin-bottom:.5rem;border:2px solid transparent;cursor:pointer;text-align:left;width:100%;font:inherit;color:var(--ink)}
.goq.done{opacity:.6}
.goq .gi,.gi{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.goq b{display:block}.goq small{color:var(--muted)}
.cam{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:3/4;max-height:70vh;margin:0 auto;width:100%}
.cam video,.cam canvas{width:100%;height:100%;object-fit:cover;display:block}
.cam .wild{position:absolute;width:38%;cursor:pointer;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));transition:transform .2s}
.cam .wild.bob{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.cam .hud{position:absolute;left:0;right:0;top:0;padding:.7rem;display:flex;justify-content:space-between;color:#fff;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.6);font-size:.9rem}
.cam .fake{position:absolute;inset:0;background:linear-gradient(#bfe3f5,#e6f6e0 60%,#a9d49b 60%)}
.walk-dial{width:210px;height:210px;margin:.6rem auto;position:relative}
.walk-dial svg{width:100%;height:100%}
.walk-dial .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.recap{min-height:62vh;border-radius:var(--r);padding:2rem 1.4rem;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#fff;position:relative;overflow:hidden}
.recap .num{font-family:var(--display);font-weight:900;font-size:4.2rem;line-height:1}
.recap h2{color:#fff;font-size:1.5rem;justify-content:center}
.recap p{opacity:.9}
.recap-dots{display:flex;gap:6px;justify-content:center;margin:.8rem 0}
.recap-dots i{width:24px;height:4px;border-radius:4px;background:var(--line)}
.recap-dots i.on{background:var(--accent)}

.pat i{position:absolute;inset:0;background:var(--ink);opacity:.35;-webkit-mask-size:var(--pat-size,28px);mask-size:var(--pat-size,28px)}
.pat[data-k=none] i{display:none}
.pat span{z-index:1;background:color-mix(in srgb,var(--soft) 80%,transparent)}

/* v2 fixes: solid modals on see-through looks, readable stats on every look */
.modal{background:var(--modal,var(--card))}
body[data-look] .stat b{color:var(--ink)}
.card .stat{box-shadow:none;background:var(--soft)}
.faces{gap:.35rem}.face{min-width:0}.face svg{max-width:100%;height:auto}
@media(max-width:420px){.face span{font-size:.68rem}}
.mm-dot{display:inline-block;border-radius:50%;vertical-align:-1px;flex:none}

/* ---------- Idol Stage look + Kawaii pattern (2026-10-06, made for a K-pop fan) ---------- */
body[data-pattern=kawaii]::before,.pat[data-k=kawaii] i{--pat-size:96px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M16 14c-3-4-9-1-6 4l6 6 6-6c3-5-3-8-6-4z'/%3E%3Cpath d='M64 20l-10-6q-3 6 0 12z M64 20l10-6q3 6 0 12z'/%3E%3Ccircle cx='64' cy='20' r='2.6'/%3E%3Cpath d='M63 22l-3 8 M65 22l3 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M22 52c-2-3-7-1-5 3l5 4 5-4c2-4-3-6-5-3z'/%3E%3Crect x='20.5' y='60' width='3' height='16' rx='1.5'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='70' cy='68' r='10'/%3E%3Cpath d='M66 70q4 4 8 0'/%3E%3C/g%3E%3Ccircle cx='66' cy='66' r='1.6'/%3E%3Ccircle cx='74' cy='66' r='1.6'/%3E%3Cpath d='M44 46c-1.5-2-4.5-.5-3 2l3 3 3-3c1.5-2.5-1.5-4-3-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M16 14c-3-4-9-1-6 4l6 6 6-6c3-5-3-8-6-4z'/%3E%3Cpath d='M64 20l-10-6q-3 6 0 12z M64 20l10-6q3 6 0 12z'/%3E%3Ccircle cx='64' cy='20' r='2.6'/%3E%3Cpath d='M63 22l-3 8 M65 22l3 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M22 52c-2-3-7-1-5 3l5 4 5-4c2-4-3-6-5-3z'/%3E%3Crect x='20.5' y='60' width='3' height='16' rx='1.5'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='70' cy='68' r='10'/%3E%3Cpath d='M66 70q4 4 8 0'/%3E%3C/g%3E%3Ccircle cx='66' cy='66' r='1.6'/%3E%3Ccircle cx='74' cy='66' r='1.6'/%3E%3Cpath d='M44 46c-1.5-2-4.5-.5-3 2l3 3 3-3c1.5-2.5-1.5-4-3-2z'/%3E%3C/svg%3E")}
body[data-pattern=kawaii]::before{background:linear-gradient(160deg,var(--accent),var(--accent2,var(--accent)))}
body[data-theme=night][data-pattern=kawaii]::before{opacity:.14}
body[data-card=idol] .card,body[data-card=idol] .area{border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent),0 0 26px color-mix(in srgb,var(--accent) 24%,transparent),0 6px 30px color-mix(in srgb,var(--accent2,var(--accent)) 10%,transparent)}
body[data-look=idol] .topbar{border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#FF5FA8,#B98CFF,#FFD36B,#FF5FA8) 1}
body[data-look=idol] .btn:not(.ghost):not(.line):not(.danger):not(.dark){background:linear-gradient(135deg,#FF5FA8,#C77DFF);color:#fff;border-color:transparent}
body[data-look=idol] h1,body[data-look=idol] h2{text-shadow:0 0 18px rgba(255,95,168,.45)}
/* moving stage spotlights behind everything */
body[data-look=idol]::after{content:"";position:fixed;inset:-10% -20% auto;height:70vh;z-index:-2;pointer-events:none;
 background:conic-gradient(from 160deg at 20% 0%,transparent 0 10deg,rgba(255,95,168,.16) 14deg,transparent 22deg 360deg),conic-gradient(from 175deg at 80% 0%,transparent 0 10deg,rgba(185,140,255,.18) 14deg,transparent 22deg 360deg);
 animation:idolSweep 9s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes idolSweep{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
body[data-motion=reduce][data-look=idol]::after{animation:none}
@media (prefers-reduced-motion:reduce){body[data-look=idol]::after{animation:none}}
/* ---------- Joy Stage + Joy Pop looks (2026-10-06, free for everyone, Joy Chaser colors) ---------- */
body[data-look=joystage] .topbar,body[data-look=joypop] .topbar{border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#F19481,#DD85CF,#625BD1,#76AF9B,#E8B22B) 1}
body[data-look=joystage] .btn:not(.ghost):not(.line):not(.danger):not(.dark){background:linear-gradient(135deg,#F19481,#DD85CF);color:#1C1530;border-color:transparent}
body[data-look=joystage] h1,body[data-look=joystage] h2{text-shadow:0 0 18px rgba(241,148,129,.4)}
body[data-look=joystage]::after{content:"";position:fixed;inset:-10% -20% auto;height:70vh;z-index:-2;pointer-events:none;
 background:conic-gradient(from 160deg at 20% 0%,transparent 0 10deg,rgba(241,148,129,.15) 14deg,transparent 22deg 360deg),conic-gradient(from 175deg at 80% 0%,transparent 0 10deg,rgba(98,91,209,.2) 14deg,transparent 22deg 360deg);
 animation:idolSweep 9s ease-in-out infinite alternate;transform-origin:50% 0}
body[data-motion=reduce][data-look=joystage]::after{animation:none}
@media (prefers-reduced-motion:reduce){body[data-look=joystage]::after{animation:none}}
body[data-look=joypop] .btn:not(.ghost):not(.line):not(.danger):not(.dark){background:linear-gradient(135deg,#E87E6B,#DD85CF);color:#fff;border-color:transparent}
body[data-look=joypop][data-pattern=kawaii]::before{opacity:.16;background:linear-gradient(160deg,#F19481,#DD85CF 50%,#76AF9B)}
body[data-look=joypop][data-card=sticker] .card,body[data-look=joypop][data-card=sticker] .area{border:2.5px solid #2A1E24}