:root{--bg:#f4efe8;--bg2:#ebe3d8;--card:#fffdf9;--ink:#26221d;--mute:#6f6759;--line:#e4dccf;--accent:#2b6f77;--accent-ink:#fff;--ok:#2f8a57;--warn:#c9831f;--bad:#c4503f;--r:20px;--shadow:0 1px 2px rgba(60,40,10,.06),0 8px 24px rgba(60,40,10,.07);--side:236px;--font:ui-rounded,"SF Pro Rounded","Avenir Next","Segoe UI",system-ui,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Georgia,serif}
[data-theme=dark]{--bg:#16181b;--bg2:#1d2024;--card:#23272c;--ink:#f1ece4;--mute:#a49d90;--line:#32373d;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35)}
@media(prefers-color-scheme:dark){[data-theme=auto]{--bg:#16181b;--bg2:#1d2024;--card:#23272c;--ink:#f1ece4;--mute:#a49d90;--line:#32373d;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.4 var(--font)}
body{overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
.shell{display:grid;grid-template-columns:var(--side) 1fr;height:100dvh}
.side{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#000),color-mix(in srgb,var(--accent) 60%,#2a1a30));color:#fff;padding:18px 12px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 14px}
.brand .logo{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:20px}
.brand b{font:700 17px var(--font);display:block}.brand small{opacity:.7;letter-spacing:.12em;font-size:10px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav button{display:flex;gap:12px;align-items:center;border:0;background:transparent;color:#fff;padding:10px 12px;border-radius:12px;font-weight:600;text-align:left;opacity:.86;transition:.15s}
.nav button:hover{background:rgba(255,255,255,.12);opacity:1}
.nav button.on{background:rgba(255,255,255,.95);color:color-mix(in srgb,var(--accent) 85%,#000);opacity:1;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.nav .ic{width:22px;text-align:center;font-size:17px}
.side .sp{flex:1}
.sync{font-size:12px;display:flex;align-items:center;gap:8px;padding:8px 12px;opacity:.9}
.dot{width:9px;height:9px;border-radius:50%;background:#9aa;flex:none}.dot.live{background:#6fe3a1;box-shadow:0 0 0 4px rgba(111,227,161,.25);animation:pulse 2s infinite}.dot.offline{background:#f2b44a}.dot.auth{background:#f27a6a}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(111,227,161,0)}}
.main{overflow:auto;padding:0 0 40px;scroll-behavior:smooth}
.top{position:sticky;top:0;z-index:5;display:flex;gap:10px;align-items:center;padding:12px 24px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .who{margin-left:auto;display:flex;gap:8px;align-items:center}
.pill{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 14px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
.pill.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.page{padding:22px 24px;max-width:1400px;margin:0 auto}
.hero{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:22px 26px;border-radius:26px;color:#fff;background:linear-gradient(120deg,var(--accent),var(--hero2,color-mix(in srgb,var(--accent) 55%,#e8a05a)));box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}
.avatar{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.25);display:grid;place-items:center;font:700 28px var(--serif);flex:none}
.hero h1{font:700 30px var(--serif)}.hero p{opacity:.9;margin-top:4px}
.hero .clock{text-align:right;position:relative;z-index:1}.clock b{font:700 38px var(--font);letter-spacing:-.02em}
.verse{margin-top:14px;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.2);font-weight:600;grid-column:1/-1}
.grid{grid-auto-flow:dense;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:18px}
.w{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;position:relative;border-top:4px solid var(--wc,var(--accent));min-width:0;display:flex;flex-direction:column;gap:10px}
.w.s{grid-column:span 3;min-width:0}.w.m{grid-column:span 4}.w.l{grid-column:span 6}.w.xl{grid-column:span 12}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--mute);font-weight:700;text-transform:uppercase}
.w h2{font:700 21px var(--serif)}
.w .more{margin-top:auto;border:0;background:none;color:var(--accent);font-weight:700;text-align:left;padding:0}
.edit-bar{display:flex;gap:6px;position:absolute;top:8px;right:8px}
.edit-bar button{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:2px 8px;font-size:13px}
.w.dragging{opacity:.4}.w.dragover{outline:3px dashed var(--accent)}
.row{display:flex;gap:10px;align-items:center}.row.sb{justify-content:space-between}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}
.mute{color:var(--mute)}.small{font-size:13px}
.chip{border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--card));color:color-mix(in srgb,var(--accent) 80%,var(--ink));padding:3px 11px;font-size:12px;font-weight:700}
.bar{height:9px;background:var(--bg2);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#e8b04a));border-radius:99px;transition:width .5s}
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kid{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--bg);border:1px solid var(--line);text-align:left}
.av,.kid .av,.w .av{width:38px;height:38px;border-radius:12px;color:#fff;display:grid;place-items:center;font:700 17px var(--serif);flex:none}
.task{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);width:100%;text-align:left;transition:.15s}
.task:active{transform:scale(.985)}
.task .box{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--line);display:grid;place-items:center;flex:none;transition:.2s;color:transparent;font-weight:900}
.task.done{background:color-mix(in srgb,var(--ok) 10%,var(--card));border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.task.done .box{background:var(--ok);border-color:var(--ok);color:#fff;animation:pop .35s}
.task.done .lbl{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ok) 60%,transparent);opacity:.75}
.task.approved .box{background:var(--accent);border-color:var(--accent)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.task .pts{margin-left:auto;font-weight:700;color:var(--mute);font-size:13px;white-space:nowrap}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.w.xl .cols{align-items:start}
.group h3{font:700 15px var(--font);margin:0 0 8px;display:flex;gap:10px;align-items:center}
.group .num{width:26px;height:26px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px}
.stack{display:flex;flex-direction:column;gap:8px}
.btn{border:1px solid var(--line);background:var(--card);padding:9px 16px;border-radius:12px;font-weight:700}
.btn.danger{color:var(--bad)}.btn.sm{padding:5px 11px;font-size:13px}
.btn:disabled{opacity:.5}
input,select,textarea{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px;min-width:0}
input:focus,select:focus{outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.tabs{display:flex;gap:6px;overflow:auto;padding-bottom:4px}.tabs button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 16px;font-weight:700;white-space:nowrap}.tabs button.on{background:var(--accent);color:#fff;border-color:transparent}
.ptitle{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}.ptitle h1{font:700 30px var(--serif)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal .hd{font-size:11px;letter-spacing:.1em;color:var(--mute);text-align:center;font-weight:700}
.cal .day{min-height:92px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;overflow:hidden;text-align:left}.cal .day.out{opacity:.45}.cal .day.today{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.cal .ev{font-size:11px;border-radius:6px;padding:1px 6px;margin-top:3px;background:color-mix(in srgb,var(--accent) 16%,var(--card));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map{position:relative;height:380px;border-radius:16px;overflow:hidden;background:#dfe7e4;touch-action:none;border:1px solid var(--line)}
.map .tile{position:absolute;width:256px;height:256px;user-select:none;-webkit-user-drag:none}
.map .pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.map .pin b{background:var(--pc,#c4503f);color:#fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);width:34px;height:34px;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.map .pin b span{transform:rotate(45deg);font-weight:800}
.map .pin em{font-style:normal;font-size:11px;background:#fff;color:#222;border-radius:8px;padding:1px 6px;margin-top:2px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.map .zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.map .attr{position:absolute;right:6px;bottom:4px;font-size:10px;background:rgba(255,255,255,.8);padding:1px 6px;border-radius:6px;color:#333}
.modal-bg{position:fixed;inset:0;background:rgba(10,8,5,.5);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--card);border-radius:24px;padding:24px;width:min(460px,100%);max-height:92dvh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.picker{position:fixed;inset:0;z-index:60;background:linear-gradient(135deg,#1f4f57,#7a4a6a);display:grid;place-items:center;padding:20px;color:#fff;overflow:auto}
.picker .box{width:min(760px,100%)}.picker h1{font:700 36px var(--serif)}.picker .opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:22px}
.picker .opts button{border:0;border-radius:22px;padding:20px 12px;background:rgba(255,255,255,.14);color:#fff;display:flex;flex-direction:column;gap:10px;align-items:center;font-weight:700;backdrop-filter:blur(8px);transition:.15s}
.picker .opts button:hover{background:rgba(255,255,255,.26);transform:translateY(-3px)}
.picker .opts .av{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font:700 28px var(--serif)}
#toasts{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#26221d;color:#fff;padding:10px 18px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.35);animation:in .25s}@keyframes in{from{transform:translateY(12px);opacity:0}}
.bottom{display:none}
.big{font:800 34px var(--font);letter-spacing:-.02em}.chip.big{font-weight:800}
.reward{display:flex;gap:14px;align-items:center;padding:14px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}.reward .ic{font-size:30px}
.confetti{position:fixed;pointer-events:none;z-index:99;font-size:22px;animation:fall 1.4s ease-in forwards}@keyframes fall{to{transform:translate(var(--dx),70vh) rotate(540deg);opacity:0}}
@media(max-width:1100px){:root{--side:72px}.nav button span:not(.ic),.brand div,.sync span,.side .sp+*{display:none}.nav button{justify-content:center;padding:12px 0}.brand{justify-content:center;padding:4px 0 14px}.w.s{grid-column:span 6}.w.m{grid-column:span 6}.w.l{grid-column:span 12}.sync{justify-content:center;padding:8px 0}}
@media(max-width:700px){.who .pill{padding:7px 11px;white-space:nowrap}.who [data-act=switch]{font-size:0}.who [data-act=switch]:before{content:'↩';font-size:15px}.top{gap:6px}.shell{grid-template-columns:1fr;grid-template-rows:1fr auto}.side{display:none}.main{padding-bottom:84px}.page{padding:14px 12px}.top{padding:10px 12px}
.bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));overflow-x:auto;gap:2px}
.bottom button{flex:1;min-width:62px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;font-weight:700;color:var(--mute);padding:6px 2px;border-radius:12px}.bottom button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.bottom .ic{font-size:20px}
.grid{gap:12px}.w.s,.w.m,.w.l,.w.xl{grid-column:span 12}.hero{grid-template-columns:auto 1fr;padding:18px}.hero .clock{display:none}.hero h1{font-size:24px}.avatar{width:52px;height:52px}.cal .day{min-height:64px}.cal .ev{display:none}.cal .day.has:after{content:"•";color:var(--accent)}.map{height:300px}}
.display .main{font-size:17px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Per-person styles: color schemes ---- */
html[data-scheme=ocean]{--accent:#1f78b4;--hero2:#38c6c0;--bg:#eef5f9;--bg2:#e0edf3;--line:#d3e3ec;--wc:#1f78b4}
html[data-scheme=forest]{--accent:#2f7d4f;--hero2:#9bc24a;--bg:#f0f4ec;--bg2:#e3ebdb;--line:#d8e2cd}
html[data-scheme=sunset]{--accent:#d9553f;--hero2:#f2a93b;--bg:#fbf1e8;--bg2:#f5e2d0;--line:#ecd5c0}
html[data-scheme=candy]{--accent:#d6409f;--hero2:#7a5cf0;--bg:#fcf0f7;--bg2:#f7e0ef;--line:#efd0e3}
html[data-scheme=midnight]{--accent:#7c8cff;--hero2:#38e0c0;--accent-ink:#0b0e1a;--bg:#0d1020;--bg2:#141830;--card:#181d38;--ink:#eef0ff;--mute:#9aa2cf;--line:#2a3158;--shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.45)}
html[data-scheme=midnight] .side{background:linear-gradient(180deg,#141a3c,#0a0d1c)}
html[data-scheme=midnight] .nav button.on{color:#0b0e1a}
html[data-scheme=midnight] .task{background:#1d2342}
html[data-theme=dark][data-scheme=ocean],html[data-theme=dark][data-scheme=forest],html[data-theme=dark][data-scheme=sunset],html[data-theme=dark][data-scheme=candy]{--bg:#16181b;--bg2:#1d2024;--card:#23272c;--ink:#f1ece4;--mute:#a49d90;--line:#32373d}
/* ---- Looks ---- */
html[data-look=playful]{--r:30px;--font:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI Rounded",system-ui,sans-serif;--serif:ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif}
html[data-look=playful] .w{border-top-width:0;border:2px solid color-mix(in srgb,var(--wc,var(--accent)) 35%,var(--line));transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
html[data-look=playful] .w:hover{transform:translateY(-3px) rotate(-.4deg)}
html[data-look=playful] .task{border-radius:22px;padding:14px 16px;font-weight:700;transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
html[data-look=playful] .task:active{transform:scale(.96)}
html[data-look=playful] .task.done .box{animation:pop .45s cubic-bezier(.3,1.9,.5,1)}
html[data-look=playful] .box{width:30px;height:30px}
html[data-look=playful] .hero{border-radius:36px}
html[data-look=playful] .hero:before{content:"✨";position:absolute;right:26px;bottom:16px;font-size:28px;opacity:.9;animation:float 3s ease-in-out infinite}
html[data-look=playful] .pill,html[data-look=playful] .btn{border-radius:999px;font-weight:700}
html[data-look=playful] .nav button{border-radius:999px}
html[data-look=arcade]{--r:10px;--font:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--serif:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--shadow:5px 5px 0 color-mix(in srgb,var(--ink) 85%,transparent)}
html[data-look=arcade] .w,html[data-look=arcade] .task,html[data-look=arcade] .pill,html[data-look=arcade] .btn,html[data-look=arcade] .hero{border:3px solid var(--ink)}
html[data-look=arcade] .w{border-top-width:3px;box-shadow:5px 5px 0 color-mix(in srgb,var(--wc,var(--accent)) 90%,#000)}
html[data-look=arcade] .task:active,html[data-look=arcade] .btn:active{transform:translate(3px,3px)}
html[data-look=arcade] .eyebrow{letter-spacing:.2em}
html[data-look=arcade] .hero{box-shadow:6px 6px 0 var(--ink)}
html[data-look=arcade] .nav button.on{border:3px solid var(--ink)}
html[data-look=clean]{--r:12px;--shadow:0 1px 2px rgba(0,0,0,.06);--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--serif:var(--font)}
html[data-look=clean] .w{border-top-width:0;border:1px solid var(--line)}
html[data-look=clean] .hero{border-radius:16px;padding:16px 22px;background:var(--accent)}
html[data-look=clean] .hero:after{display:none}
html[data-look=clean] .task{padding:9px 12px}
html[data-look=clean] .page{padding:16px 20px}
@keyframes pop{0%{transform:scale(.5)}100%{transform:scale(1)}}
@keyframes float{50%{transform:translateY(-8px) rotate(12deg)}}
/* streak + level */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{display:inline-flex;gap:6px;align-items:center;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.22);font-weight:800;font-size:13px}
.lvl{height:8px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden;width:160px;margin-top:6px}.lvl i{display:block;height:100%;background:#fff;border-radius:99px}
/* style picker */
.style-sec{margin:14px 0 6px;font-weight:800}
.swatches,.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.swatch,.look{border:2px solid var(--line);background:var(--card);border-radius:16px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:6px;font-weight:700}
.swatch.on,.look.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.swatch i{display:block;height:34px;border-radius:10px}
.look .pv{height:44px;border-radius:10px;background:var(--bg2);display:grid;place-items:center;font-size:12px;color:var(--mute)}

html.has-bg .main,html.has-bg .shell{background:transparent}
html.has-bg .top{background:rgba(255,255,255,.55)}
html[data-theme=dark].has-bg .top,html[data-scheme=midnight].has-bg .top{background:rgba(10,12,24,.55)}
.hero.has-img{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.hero.has-img:after{display:none}

.av.sm{width:22px;height:22px;border-radius:7px;font-size:11px;flex:none;display:inline-grid;place-items:center;color:#fff;font-weight:700}
#backdrop{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;background-color:var(--bg)}
html.has-bg #backdrop{filter:none}
#backdrop.glass{filter:blur(10px) saturate(1.1) brightness(.62);transform:scale(1.08)}
html:not(.has-bg):not([data-look=glass]) #backdrop{background-image:none!important}
html[data-look=glass]{--r:22px;--bg:#0f1418;--bg2:#161c22;--card:rgba(24,30,38,.58);--ink:#f2f4f6;--mute:#b3bcc6;--line:rgba(255,255,255,.14);--shadow:0 10px 36px rgba(0,0,0,.4);--accent-ink:#fff}
html[data-look=glass] body,html[data-look=glass] .shell,html[data-look=glass] .main{background:transparent}
html[data-look=glass] .w,html[data-look=glass] .task,html[data-look=glass] .pill,html[data-look=glass] .btn,html[data-look=glass] .modal,html[data-look=glass] .swatch,html[data-look=glass] .look{backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line)}
html[data-look=glass] .w{border-top-width:1px;box-shadow:var(--shadow);background:var(--card)}
html[data-look=glass] .task{background:rgba(255,255,255,.07)}
html[data-look=glass] .task.done{background:rgba(70,190,120,.22)}
html[data-look=glass] .side{background:rgba(12,16,22,.6);backdrop-filter:blur(20px)}
html[data-look=glass] .nav button.on{background:var(--accent);color:#fff}
html[data-look=glass] .top{background:rgba(10,14,18,.45)}
html[data-look=glass] .hero{background:rgba(10,14,18,.35);border:1px solid var(--line);backdrop-filter:blur(6px);text-shadow:0 1px 8px rgba(0,0,0,.6)}
html[data-look=glass] .hero.has-img{background-color:transparent}
html[data-look=glass] .hero:after{display:none}
html[data-look=glass] .hero .avatar{border-radius:20px;border:2px solid rgba(255,255,255,.35)}
html[data-look=glass] .modal{background:rgba(20,26,34,.82)}
html[data-look=glass] input,html[data-look=glass] select,html[data-look=glass] textarea{background:rgba(255,255,255,.08);color:var(--ink);border:1px solid var(--line)}
html[data-look=glass] .bottom{background:rgba(12,16,22,.7);backdrop-filter:blur(18px)}

/* 5.5 polish */
.hero .clock{display:flex;gap:14px;align-items:center;justify-content:flex-end}
.hero .stat{display:flex;flex-direction:column;align-items:center;padding:8px 16px;border-radius:16px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);text-align:center;line-height:1.1}
.hero .stat b{font:700 28px var(--font)}.hero .stat span{font-size:12px;opacity:.9;margin-top:2px}
.hero .tm{text-align:right}
.picker .opts button .av{width:84px;height:84px;border-radius:26px;font-size:34px;box-shadow:0 8px 22px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.3)}
.picker .opts button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);padding:22px 12px}
.picker .opts button:hover,.picker .opts button:focus-visible{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.picker .opts small{font-size:13px}
html[data-look=glass] .bar{background:rgba(255,255,255,.2)}
html[data-look=glass] .w .more,html[data-look=glass] .w a{color:color-mix(in srgb,var(--accent) 45%,#fff)}
html[data-look=glass] .task .pts,html[data-look=glass] .pill{color:var(--ink)}
html[data-look=glass] .pill.primary{background:var(--accent);color:#fff}
html[data-look=glass] .w h2,html[data-look=glass] .hero h1{color:#fff}
html[data-look=glass] .eyebrow{color:var(--mute)}
html[data-look=glass] .hero .stat{background:rgba(255,255,255,.14)}
html[data-look=glass] .hero .verse{background:rgba(0,0,0,.28);border:1px solid var(--line)}
@media(max-width:700px){
 .hero{grid-template-columns:auto 1fr auto;padding:14px;gap:12px;border-radius:22px}
 .hero .clock{display:flex;grid-column:3;grid-row:1}.hero .tm{display:none}.hero .stat{padding:6px 10px}.hero .stat b{font-size:22px}
 .hero h1{font-size:21px}.hero p{font-size:13px}.avatar{width:46px;height:46px}
 .hero .badges{grid-column:1/-1!important}.hero .verse{grid-column:1/-1;font-size:13px;padding:10px 12px;margin-top:0}
 .who [data-act=style]{font-size:0}.who [data-act=style]:before{content:'🎨';font-size:15px}
 .who .pill.primary{font-size:13px}.who{gap:5px}.top .pill{padding:7px 9px}
 .picker h1{font-size:28px}.picker .opts{grid-template-columns:repeat(2,1fr)}.picker .opts button .av{width:68px;height:68px}
}

html[data-look=glass] .w .badge,html[data-look=glass] .w .chip,html[data-look=glass] .w .tag{color:#fff;background:rgba(255,255,255,.16)}
@media(max-width:700px){.picker .opts{gap:10px;margin-top:14px}.picker .opts button{padding:14px 8px;gap:6px;border-radius:20px}.picker .opts button .av{width:60px;height:60px;font-size:26px;border-radius:19px}.picker .opts small{font-size:11px}.picker p{display:none}}

/* 5.6 delight */
.hero .ring{display:grid;padding:5px;border-radius:30px;background:conic-gradient(#6fe3a1 calc(var(--p)*1%),rgba(255,255,255,.25) 0);transition:.6s}
.hero .ring .avatar{border-radius:25px}
.pop{position:fixed;z-index:200;font:800 22px var(--font);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none;animation:popup 1.1s ease-out forwards}
@keyframes popup{0%{transform:translateY(0) scale(.6);opacity:0}20%{transform:translateY(-14px) scale(1.25);opacity:1}100%{transform:translateY(-70px) scale(1);opacity:0}}
.spark{position:fixed;z-index:200;width:9px;height:9px;border-radius:50%;pointer-events:none;animation:spark .8s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.task{transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .3s}.task:active{transform:scale(.97)}.task.done{animation:donepop .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes donepop{40%{transform:scale(1.04)}}
.w{animation:rise .5s both}.grid>.w:nth-child(2){animation-delay:.05s}.grid>.w:nth-child(3){animation-delay:.1s}.grid>.w:nth-child(4){animation-delay:.15s}.grid>.w:nth-child(5){animation-delay:.2s}.grid>.w:nth-child(6){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.w:hover{transform:translateY(-2px)}
.nextup{padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:16px}.nextup .nu{color:var(--accent)}
html[data-look=glass] #backdrop:not([style*=url]){background:radial-gradient(60% 50% at 20% 20%,color-mix(in srgb,var(--accent) 70%,#000),transparent),radial-gradient(50% 60% at 85% 75%,#3b2a7a,transparent),#0b0f14;background-size:140% 140%;animation:aurora 18s ease-in-out infinite alternate;filter:none;transform:none}
@keyframes aurora{to{background-position:100% 100%}}
html[data-look=glass] #backdrop:not([style*=url]):not(.glass){display:none}
.picker .opts button:nth-child(odd):hover .av{transform:rotate(-6deg) scale(1.08)}.picker .opts button:nth-child(even):hover .av{transform:rotate(6deg) scale(1.08)}.picker .opts .av{transition:.2s}
@media(prefers-reduced-motion:reduce){.pop,.spark{display:none}}

/* 5.6.2 dark+scheme fix: schemes never leave light text on light surfaces */
html[data-theme=dark][data-scheme=ocean],html[data-theme=dark][data-scheme=forest],html[data-theme=dark][data-scheme=sunset],html[data-theme=dark][data-scheme=candy]{--bg:#16181b;--bg2:#1d2024;--card:#23272c;--ink:#f1ece4;--mute:#a49d90;--line:#32373d}
@media(prefers-color-scheme:dark){html[data-theme=auto][data-scheme=ocean],html[data-theme=auto][data-scheme=forest],html[data-theme=auto][data-scheme=sunset],html[data-theme=auto][data-scheme=candy]{--bg:#16181b;--bg2:#1d2024;--card:#23272c;--ink:#f1ece4;--mute:#a49d90;--line:#32373d}}

/* 5.6.2 contrast */
html[data-theme=dark] .w .more,html[data-theme=dark] .btn.danger{color:color-mix(in srgb,var(--accent) 50%,#fff)}
html[data-theme=dark] .btn.danger{color:color-mix(in srgb,var(--bad) 55%,#fff)}
@media(prefers-color-scheme:dark){html[data-theme=auto] .w .more{color:color-mix(in srgb,var(--accent) 50%,#fff)}html[data-theme=auto] .btn.danger{color:color-mix(in srgb,var(--bad) 55%,#fff)}}
html[data-scheme=midnight] .tabs .on,html[data-scheme=midnight] .num{color:#0b0e1a}
html[data-look=glass] .nav button.on,html[data-look=glass] .pill.primary,html[data-look=glass] .btn.primary{color:var(--accent-ink)}
html[data-look=glass][data-scheme=midnight]{--accent-ink:#0b0e1a}
html[data-look=glass] .btn.danger{color:color-mix(in srgb,var(--bad) 55%,#fff)}

/* 5.6.3 picker: grid item must fill the column, not shrink to content */
.picker{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center}.picker .box{width:min(760px,100%);margin:0 auto}

.hero .ring .avatar:not([style]){background:rgba(20,10,40,.55)}

/* ===== 5.7 looks: directions + fandom worlds (original art, no trademarks) ===== */

/* Direction A: Magic Hour */
html[data-look=magic]{--r:28px;--bg:#150d33;--bg2:#241552;--card:rgba(255,255,255,.1);--ink:#fff;--mute:#cdbff5;--line:rgba(255,255,255,.2);--accent:#ffcf3f!important;--accent-ink:#2a1250;--hero2:#ff5fa8!important;--shadow:0 12px 40px rgba(10,0,40,.5);--font:ui-rounded,"SF Pro Rounded","Nunito","Avenir Next",system-ui,sans-serif;--serif:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,sans-serif}
html[data-look=magic] body{background:radial-gradient(70% 60% at 15% 10%,#6a35d8 0,transparent 60%),radial-gradient(60% 60% at 90% 20%,#ff5fa8 0,transparent 55%),radial-gradient(70% 70% at 70% 100%,#1fc7c7 0,transparent 55%),#150d33;background-attachment:fixed}
html[data-look=magic] .shell,html[data-look=magic] .main{background:transparent}
html[data-look=magic] .side{background:rgba(20,10,60,.55);backdrop-filter:blur(22px);border-right:1px solid var(--line)}
html[data-look=magic] .nav button{border-radius:20px;font-weight:800;font-size:15px}
html[data-look=magic] .nav button.on{background:linear-gradient(135deg,#ffcf3f,#ff9d3f);color:#2a1250;box-shadow:0 6px 20px rgba(255,180,60,.45)}
html[data-look=magic] .top{background:rgba(20,10,60,.4)}
html[data-look=magic] .pill,html[data-look=magic] .btn{background:rgba(255,255,255,.14);border:1px solid var(--line);color:#fff;font-weight:800}
html[data-look=magic] .pill.primary,html[data-look=magic] .btn.primary{background:linear-gradient(135deg,#ffcf3f,#ff9d3f);color:#2a1250;border:0}
html[data-look=magic] .hero{background:linear-gradient(120deg,rgba(255,95,168,.55),rgba(106,53,216,.55));border:1px solid rgba(255,255,255,.35);border-radius:36px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:26px 30px}
html[data-look=magic] .hero:after{display:block;background:radial-gradient(circle,#ffcf3f55,transparent 70%);width:320px;height:320px;right:-60px;top:-110px}
html[data-look=magic] .hero h1{font-size:38px;font-weight:900;letter-spacing:-.02em}
html[data-look=magic] .hero .stat{background:linear-gradient(135deg,#ffcf3f,#ff9d3f);color:#2a1250;border:0;border-radius:22px;box-shadow:0 8px 24px rgba(255,170,50,.5)}
html[data-look=magic] .hero .stat b{font-size:34px}
html[data-look=magic] .hero .ring{background:conic-gradient(#ffcf3f calc(var(--p)*1%),rgba(255,255,255,.25) 0);box-shadow:0 0 30px #ffcf3f66}
html[data-look=magic] .hero .verse{background:rgba(20,10,60,.4);border:1px solid var(--line)}
html[data-look=magic] .w{background:var(--card);backdrop-filter:blur(18px);border:1px solid var(--line);border-top:1px solid var(--line);box-shadow:var(--shadow)}
html[data-look=magic] .w h2{font-weight:900;font-size:24px}
html[data-look=magic] .eyebrow{color:#ffcf3f;font-weight:900;letter-spacing:.14em}
html[data-look=magic] .task{background:rgba(255,255,255,.1);border:1px solid var(--line);border-radius:22px;padding:14px 16px;font-weight:700;font-size:16px}
html[data-look=magic] .task.done{background:linear-gradient(135deg,rgba(60,220,140,.45),rgba(30,180,200,.4))}
html[data-look=magic] .chip,html[data-look=magic] .badge{background:rgba(255,207,63,.2);color:#ffe28a;border:1px solid rgba(255,207,63,.4);font-weight:900}
html[data-look=magic] .bar{background:rgba(255,255,255,.2);height:12px}html[data-look=magic] .bar i{background:linear-gradient(90deg,#ffcf3f,#ff5fa8)}
html[data-look=magic] .w .more{color:#ffcf3f;font-weight:900}
html[data-look=magic] .bottom{background:rgba(20,10,60,.75)}html[data-look=magic] .bottom button.on{color:#2a1250;background:#ffcf3f}
html[data-look=magic] .tabs button.on{background:linear-gradient(135deg,#ffcf3f,#ff9d3f);color:#2a1250}

/* Direction B: Command Center */
html[data-look=command]{--r:14px;--bg:#0b0d10;--bg2:#12161b;--card:#12161b;--ink:#e8edf2;--mute:#8793a1;--line:#222a33;--accent:#b6ff3c!important;--accent-ink:#0b0d10;--hero2:#16d9c4!important;--shadow:none;--font:"SF Pro Text",Inter,system-ui,sans-serif;--serif:"SF Pro Display",Inter,system-ui,sans-serif}
html[data-look=command] body{background:#0b0d10}
html[data-look=command] .side{background:#0e1115;border-right:1px solid var(--line)}
html[data-look=command] .nav button{border-radius:10px;font-weight:600;font-size:14px;letter-spacing:.01em}
html[data-look=command] .nav button.on{background:#1b2229;color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
html[data-look=command] .top{background:#0b0d10ee;border-bottom:1px solid var(--line)}
html[data-look=command] .pill,html[data-look=command] .btn{background:#12161b;border:1px solid var(--line);color:var(--ink);border-radius:10px;font-weight:600}
html[data-look=command] .pill.primary,html[data-look=command] .btn.primary{background:var(--accent);color:#0b0d10;border:0}
html[data-look=command] .hero{background:linear-gradient(90deg,#12161b,#0f1a16);border:1px solid var(--line);border-radius:16px;box-shadow:inset 0 0 0 1px #0000,0 0 0 1px #0000;padding:20px 24px}
html[data-look=command] .hero:after{display:none}
html[data-look=command] .hero h1{font:700 26px var(--serif);letter-spacing:-.02em}
html[data-look=command] .hero .clock b{font:600 44px ui-monospace,"SF Mono",Menlo,monospace;color:var(--accent);letter-spacing:-.04em}
html[data-look=command] .hero .stat{background:#0b0d10;border:1px solid var(--line);border-radius:12px}
html[data-look=command] .hero .stat b{font:700 34px ui-monospace,Menlo,monospace;color:var(--accent)}
html[data-look=command] .hero .ring{background:conic-gradient(var(--accent) calc(var(--p)*1%),#222a33 0)}
html[data-look=command] .hero .verse{background:#0b0d10;border:1px solid var(--line);border-left:3px solid var(--accent)}
html[data-look=command] .w{background:var(--card);border:1px solid var(--line);border-top:1px solid var(--line);box-shadow:none}
html[data-look=command] .w h2{font:700 20px var(--serif);letter-spacing:-.01em}
html[data-look=command] .eyebrow{color:var(--accent);font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.16em}
html[data-look=command] .task{background:#0e1115;border:1px solid var(--line);border-radius:10px;font-weight:500}
html[data-look=command] .task.done{background:#13200f;border-color:#2f4d1c}
html[data-look=command] .chip,html[data-look=command] .badge{background:#1b2229;color:var(--accent);font:700 12px ui-monospace,Menlo,monospace;border:1px solid var(--line)}
html[data-look=command] .bar{background:#222a33;height:6px;border-radius:3px}html[data-look=command] .bar i{background:var(--accent)}
html[data-look=command] .w .more{color:var(--accent);font-weight:700}
html[data-look=command] .bottom{background:#0e1115}html[data-look=command] .bottom button.on{color:var(--accent);background:#1b2229}
html[data-look=command] .tabs button.on{background:var(--accent);color:#0b0d10}

/* Direction C: Hearth & Home */
html[data-look=hearth2]{--r:22px;--bg:#f6ecdc;--bg2:#efe0c8;--card:#fffaf0;--ink:#3a2a1e;--mute:#7d6652;--line:#e4cfae;--accent:#c4552f!important;--accent-ink:#fff;--hero2:#e9a23b!important;--shadow:0 2px 0 #e4cfae,0 14px 28px rgba(120,70,20,.12);--font:"Avenir Next","Trebuchet MS",system-ui,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Georgia,serif}
html[data-look=hearth2] body{background:radial-gradient(circle at 20% 0,#fff4df,transparent 50%),#f6ecdc}
html[data-look=hearth2] .side{background:linear-gradient(180deg,#5b3a28,#3e2619);color:#fbe9d0}
html[data-look=hearth2] .nav button{border-radius:16px;font-weight:700;color:#fbe9d0}
html[data-look=hearth2] .nav button.on{background:#fbe9d0;color:#5b3a28}
html[data-look=hearth2] .top{background:#f6ecdcdd}
html[data-look=hearth2] .pill,html[data-look=hearth2] .btn{background:#fffaf0;border:1.5px solid var(--line);font-weight:700}
html[data-look=hearth2] .pill.primary,html[data-look=hearth2] .btn.primary{background:var(--accent);color:#fff;border:0}
html[data-look=hearth2] .hero{background:linear-gradient(120deg,#c4552f,#e9a23b);border-radius:30px;box-shadow:0 3px 0 #a8431f,0 20px 36px rgba(140,60,20,.25)}
html[data-look=hearth2] .hero:after{background:rgba(255,255,255,.16)}
html[data-look=hearth2] .hero h1{font:700 36px var(--serif)}
html[data-look=hearth2] .hero .stat{background:#fffaf0;color:#5b3a28;border:0;border-radius:20px;box-shadow:0 3px 0 #00000022}
html[data-look=hearth2] .hero .ring{background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.3) 0)}
html[data-look=hearth2] .hero .verse{background:rgba(255,250,240,.2);border:1px dashed rgba(255,255,255,.6)}
html[data-look=hearth2] .w{background:var(--card);border:1.5px solid var(--line);border-top:6px solid var(--wc,var(--accent));box-shadow:var(--shadow)}
html[data-look=hearth2] .w h2{font:700 24px var(--serif)}
html[data-look=hearth2] .eyebrow{color:var(--accent);font-weight:800;letter-spacing:.14em}
html[data-look=hearth2] .task{background:#fff;border:1.5px dashed #dcc3a0;border-radius:16px;font-weight:600;font-size:16px}
html[data-look=hearth2] .task.done{background:#e8f3df;border:1.5px solid #9cc47c}
html[data-look=hearth2] .chip,html[data-look=hearth2] .badge{background:#fbe3c4;color:#8a3a18;font-weight:800}
html[data-look=hearth2] .bar{background:#efe0c8;height:12px}html[data-look=hearth2] .bar i{background:linear-gradient(90deg,#c4552f,#e9a23b)}
html[data-look=hearth2] .w .more{color:#a8431f;font-weight:800}
html[data-look=hearth2] .bottom{background:#fffaf0}html[data-look=hearth2] .bottom button.on{color:#a8431f;background:#fbe3c4}
html[data-look=hearth2] .tabs button.on{background:var(--accent);color:#fff}

.hero .ring .avatar:not([style]){background:rgba(20,10,40,.55)}
@media(max-width:700px){html[data-look=magic] .hero h1{font-size:24px}html[data-look=magic] .hero{padding:16px}}

/* world: hero */
html[data-look=hero]{--r:8px;--bg:#0b1030;--bg2:#141c4d;--card:#141c4d;--ink:#fff;--mute:#b9c3ff;--line:#000;--accent:#ff3b3b!important;--accent-ink:#fff;--hero2:#2a5bff!important;--shadow:6px 6px 0 #000;--font:'Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;--serif:Impact,'Arial Black','Trebuchet MS',sans-serif}
html[data-look=hero] body{background:radial-gradient(circle at 1px 1px,#ffffff14 1.5px,transparent 2px) 0 0/16px 16px,linear-gradient(160deg,#0b1030,#1a1f6b 60%,#3a0f4d);background-attachment:fixed}
html[data-look=hero] .shell,html[data-look=hero] .main{background:transparent}
html[data-look=hero] .side{background:#06091f;border-right:4px solid #000;box-shadow:4px 0 0 #ff3b3b}
html[data-look=hero] .nav button{border-radius:6px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
html[data-look=hero] .nav button.on{background:#ffd23f;color:#000;box-shadow:3px 3px 0 #ff3b3b}
html[data-look=hero] .top{background:#06091fdd;border-bottom:4px solid #000}
html[data-look=hero] .pill,html[data-look=hero] .btn{background:#141c4d;border:3px solid #000;color:#fff;font-weight:900;box-shadow:3px 3px 0 #000;border-radius:8px}
html[data-look=hero] .pill.primary,html[data-look=hero] .btn.primary{background:#ffd23f;color:#000}
html[data-look=hero] .hero{background:radial-gradient(circle at 1px 1px,#00000030 1.5px,transparent 2px) 0 0/10px 10px,linear-gradient(115deg,#ff3b3b 0 38%,#2a5bff 38% 100%);border:4px solid #000;border-radius:10px;box-shadow:8px 8px 0 #000;transform:none}
html[data-look=hero] .hero:after{display:block;background:#ffd23f;border:4px solid #000;border-radius:0;width:120px;height:120px;right:-30px;top:-50px;transform:rotate(18deg);opacity:1;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
html[data-look=hero] .hero h1{font:italic 900 40px var(--serif);text-transform:uppercase;letter-spacing:.01em;text-shadow:3px 3px 0 #000}
html[data-look=hero] .hero .stat{background:#ffd23f;color:#000;border:3px solid #000;border-radius:6px;box-shadow:4px 4px 0 #000;transform:rotate(-3deg)}
html[data-look=hero] .hero .stat b{font:900 34px var(--serif)}
html[data-look=hero] .hero .ring{background:conic-gradient(#ffd23f calc(var(--p)*1%),#000 0)}
html[data-look=hero] .hero .verse{background:#000000aa;border:3px solid #000}
html[data-look=hero] .w{background:var(--card);border:3px solid #000;border-top:3px solid #000;box-shadow:6px 6px 0 #000;border-radius:10px}
html[data-look=hero] .w h2{font:italic 900 24px var(--serif);text-transform:uppercase}
html[data-look=hero] .eyebrow{color:#ffd23f;font-weight:900;letter-spacing:.16em}
html[data-look=hero] .task{background:#0b1030;border:3px solid #000;border-radius:8px;font-weight:800;box-shadow:3px 3px 0 #000}
html[data-look=hero] .task.done{background:#1f8a4c}
html[data-look=hero] .chip,html[data-look=hero] .badge{background:#ffd23f;color:#000;border:2px solid #000;font-weight:900}
html[data-look=hero] .bar{background:#000;height:14px;border-radius:2px}html[data-look=hero] .bar i{background:repeating-linear-gradient(45deg,#ff3b3b 0 8px,#ff7a5a 8px 16px);border-radius:0}
html[data-look=hero] .w .more{color:#ffd23f;font-weight:900;text-transform:uppercase}
html[data-look=hero] .bottom{background:#06091f;border-top:4px solid #000}html[data-look=hero] .bottom button.on{color:#000;background:#ffd23f}
html[data-look=hero] .tabs button.on{background:#ffd23f;color:#000}

/* world: court */
html[data-look=court]{--r:12px;--bg:#16100b;--bg2:#241a12;--card:#21170f;--ink:#fff6ea;--mute:#d8b999;--line:#4a3320;--accent:#ff7a1a!important;--accent-ink:#1a0e05;--hero2:#1d4ed8!important;--shadow:0 10px 30px rgba(0,0,0,.5);--font:'Avenir Next Condensed','Arial Narrow',system-ui,sans-serif;--serif:'Avenir Next Condensed','Arial Narrow Bold',Impact,sans-serif}
html[data-look=court] body{background:linear-gradient(180deg,#00000099,#000000cc),repeating-linear-gradient(90deg,#b5733c 0 70px,#a8672f 70px 140px);background-attachment:fixed}
html[data-look=court] .shell,html[data-look=court] .main{background:transparent}
html[data-look=court] .side{background:#0d0905ee;border-right:2px solid #ff7a1a}
html[data-look=court] .nav button{border-radius:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:14px}
html[data-look=court] .nav button.on{background:#ff7a1a;color:#1a0e05}
html[data-look=court] .top{background:#0d0905dd;border-bottom:2px solid #ff7a1a}
html[data-look=court] .pill,html[data-look=court] .btn{background:#2c1f14;border:1.5px solid #5a3d24;color:#fff6ea;font-weight:800;border-radius:10px}
html[data-look=court] .pill.primary,html[data-look=court] .btn.primary{background:#ff7a1a;color:#1a0e05;border:0}
html[data-look=court] .hero{background:radial-gradient(circle at 88% 50%,transparent 0 62px,#ffffff30 62px 66px,transparent 66px),linear-gradient(110deg,#c4571a,#ff7a1a 55%,#ffb347);border-radius:18px;border:2px solid #fff3;box-shadow:0 14px 40px rgba(0,0,0,.5);color:#1a0e05}
html[data-look=court] .hero:after{display:block;content:'🏀';background:none;font-size:92px;width:auto;height:auto;right:30px;top:12px;opacity:.9;filter:drop-shadow(0 6px 10px #0006);animation:float 3s ease-in-out infinite;border-radius:0}
html[data-look=court] .hero h1{font:900 42px var(--serif);text-transform:uppercase;letter-spacing:.01em;color:#1a0e05;text-shadow:none}html[data-look=court] .hero p{color:#2a1608;font-weight:700}
html[data-look=court] .hero .stat{background:#0d0905;color:#ffb347;border:2px solid #1a0e05;border-radius:10px}
html[data-look=court] .hero .stat b{font:800 36px ui-monospace,Menlo,monospace}
html[data-look=court] .hero .clock b{color:#1a0e05;font-family:ui-monospace,Menlo,monospace}html[data-look=court] .hero .clock .small{color:#2a1608}
html[data-look=court] .hero .ring{background:conic-gradient(#0d0905 calc(var(--p)*1%),#ffffff55 0)}
html[data-look=court] .hero .badge{background:#0d0905;color:#ffb347;border:0}html[data-look=court] .hero .lvl{background:#00000044}html[data-look=court] .hero .lvl i{background:#0d0905}
html[data-look=court] .hero .verse{background:#0d0905cc;color:#fff6ea;border:1px solid #ffffff33;text-shadow:none}html[data-look=court] .hero .verse .eyebrow{color:#ffb347!important}
html[data-look=court] .w{background:var(--card);border:1px solid var(--line);border-left:6px solid #ff7a1a;border-top:1px solid var(--line);box-shadow:var(--shadow)}
html[data-look=court] .w h2{font:900 24px var(--serif);text-transform:uppercase;letter-spacing:.02em}
html[data-look=court] .eyebrow{color:#ff7a1a;font-weight:900;letter-spacing:.16em}
html[data-look=court] .task{background:#2c1f14;border:1px solid #5a3d24;border-radius:10px;font-weight:700;font-size:16px}
html[data-look=court] .task.done{background:#14301f;border-color:#2f7d4a}
html[data-look=court] .chip,html[data-look=court] .badge{background:#0d0905;color:#ffb347;border:1px solid #5a3d24;font:800 13px ui-monospace,Menlo,monospace}
html[data-look=court] .bar{background:#0d0905;height:12px}html[data-look=court] .bar i{background:linear-gradient(90deg,#ff7a1a,#ffb347)}
html[data-look=court] .w .more{color:#ffb347;font-weight:900;text-transform:uppercase}
html[data-look=court] .bottom{background:#0d0905}html[data-look=court] .bottom button.on{color:#1a0e05;background:#ff7a1a}
html[data-look=court] .tabs button.on{background:#ff7a1a;color:#1a0e05}

/* world: gem */
html[data-look=gem]{--r:26px;--bg:#ffe3f1;--bg2:#ffd0e7;--card:rgba(255,255,255,.78);--ink:#3a1c5e;--mute:#7b5aa0;--line:#f2b4d8;--accent:#e83e94!important;--accent-ink:#fff;--hero2:#7a6cff!important;--shadow:0 10px 30px rgba(180,60,140,.2);--font:'Avenir Next','Trebuchet MS',system-ui,sans-serif;--serif:'Avenir Next','Trebuchet MS',system-ui,sans-serif}
html[data-look=gem] body{background:radial-gradient(circle at 20% 15%,#fff 0 2px,transparent 3px),radial-gradient(circle at 70% 40%,#fff 0 2px,transparent 3px),radial-gradient(circle at 40% 80%,#fff 0 3px,transparent 4px),radial-gradient(circle at 90% 85%,#fff 0 2px,transparent 3px),linear-gradient(160deg,#ffb7dc,#d9b8ff 55%,#9fd8ff);background-size:240px 240px,300px 300px,260px 260px,340px 340px,100% 100%;background-attachment:fixed}
html[data-look=gem] .shell,html[data-look=gem] .main{background:transparent}
html[data-look=gem] .side{background:linear-gradient(180deg,#a6309a,#5a2a9e);color:#fff}
html[data-look=gem] .nav button{border-radius:18px;font-weight:800;color:#fff}
html[data-look=gem] .nav button.on{background:#fff;color:#a6309a;box-shadow:0 6px 18px #5a2a9e55}
html[data-look=gem] .top{background:#ffe3f1cc}
html[data-look=gem] .pill,html[data-look=gem] .btn{background:#ffffffcc;border:2px solid #f2b4d8;font-weight:800;color:var(--ink)}
html[data-look=gem] .pill.primary,html[data-look=gem] .btn.primary{background:linear-gradient(135deg,#e83e94,#a355ff);color:#fff;border:0}
html[data-look=gem] .hero{background:conic-gradient(from 200deg at 85% 40%,#ff7ac3,#a58bff,#7ae0ff,#ff7ac3);border-radius:34px;border:3px solid #ffffffaa;box-shadow:0 16px 40px rgba(160,60,160,.35)}
html[data-look=gem] .hero:after{display:block;content:'◆';background:none;color:#ffffffcc;font-size:110px;width:auto;height:auto;right:36px;top:-8px;line-height:1;text-shadow:0 0 30px #fff;animation:float 4s ease-in-out infinite;border-radius:0}
html[data-look=gem] .hero h1{font:900 38px var(--serif);text-shadow:0 2px 12px #7a2a8a99}
html[data-look=gem] .hero .stat{background:#fffffff0;color:#a6309a;border:0;border-radius:22px;box-shadow:0 6px 18px #a355ff66}
html[data-look=gem] .hero .ring{background:conic-gradient(#fff calc(var(--p)*1%),#ffffff44 0)}
html[data-look=gem] .hero .verse{background:#ffffff33;border:2px dashed #fff}
html[data-look=gem] .w{background:var(--card);backdrop-filter:blur(10px);border:2px solid #fff;border-top:2px solid #fff;box-shadow:var(--shadow)}
html[data-look=gem] .w h2{font:900 24px var(--serif)}
html[data-look=gem] .eyebrow{color:#c02a85;font-weight:900;letter-spacing:.14em}
html[data-look=gem] .task{background:#ffffffd9;border:2px solid #f2b4d8;border-radius:20px;font-weight:700;font-size:16px}
html[data-look=gem] .task.done{background:linear-gradient(135deg,#d9fff0,#c9ecff);border-color:#7ae0c0}
html[data-look=gem] .chip,html[data-look=gem] .badge{background:#ffd9ec;color:#a6309a;font-weight:900}
html[data-look=gem] .bar{background:#f2b4d855;height:12px}html[data-look=gem] .bar i{background:linear-gradient(90deg,#e83e94,#7a6cff,#7ae0ff)}
html[data-look=gem] .w .more{color:#b0207a;font-weight:900}
html[data-look=gem] .bottom{background:#ffffffee}html[data-look=gem] .bottom button.on{color:#a6309a;background:#ffd9ec}
html[data-look=gem] .tabs button.on{background:linear-gradient(135deg,#e83e94,#a355ff);color:#fff}

/* world: meadow */
html[data-look=meadow]{--r:30px;--bg:#e9f6ff;--bg2:#ffe9f6;--card:#ffffffee;--ink:#47306b;--mute:#7a62a0;--line:#e4d6ff;--accent:#a95bff!important;--accent-ink:#fff;--hero2:#ff7ac3!important;--shadow:0 10px 28px rgba(140,100,220,.18);--font:ui-rounded,'SF Pro Rounded','Avenir Next',system-ui,sans-serif;--serif:ui-rounded,'SF Pro Rounded','Avenir Next',system-ui,sans-serif}
html[data-look=meadow] body{background:radial-gradient(60px 30px at 12% 14%,#fff 60%,transparent 62%),radial-gradient(80px 36px at 18% 12%,#fff 60%,transparent 62%),radial-gradient(70px 30px at 78% 22%,#fff 60%,transparent 62%),radial-gradient(90px 38px at 84% 20%,#fff 60%,transparent 62%),linear-gradient(180deg,#bfe6ff,#e9f6ff 45%,#ffe9f6 80%,#d6f5c9);background-attachment:fixed}
html[data-look=meadow] .shell,html[data-look=meadow] .main{background:transparent}
html[data-look=meadow] .side{background:linear-gradient(180deg,#b883ff,#ff9ad5);color:#fff}
html[data-look=meadow] .nav button{border-radius:22px;font-weight:800;color:#fff}
html[data-look=meadow] .nav button.on{background:#fff;color:#8a3fe0;box-shadow:0 6px 16px #8a3fe044}
html[data-look=meadow] .top{background:#e9f6ffcc}
html[data-look=meadow] .pill,html[data-look=meadow] .btn{background:#fff;border:2px solid #e4d6ff;font-weight:800;color:var(--ink)}
html[data-look=meadow] .pill.primary,html[data-look=meadow] .btn.primary{background:linear-gradient(135deg,#a95bff,#ff7ac3);color:#fff;border:0}
html[data-look=meadow] .hero{background:linear-gradient(115deg,#a95bff,#ff7ac3 55%,#ffc46b);border-radius:38px;border:3px solid #fff;box-shadow:0 16px 40px rgba(150,90,220,.3);overflow:hidden}
html[data-look=meadow] .hero:before{content:'';position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(90deg,#ff5d5d,#ffa14a,#ffe14a,#5fdc6b,#4ab8ff,#8a6bff,#d46bff)}
html[data-look=meadow] .hero:after{display:block;content:'🦄';background:none;font-size:84px;width:auto;height:auto;right:34px;top:14px;opacity:.95;animation:float 3s ease-in-out infinite;border-radius:0}
html[data-look=meadow] .hero h1{font:900 38px var(--serif);text-shadow:0 2px 10px #8a3fe099}
html[data-look=meadow] .hero .stat{background:#fff;color:#8a3fe0;border:0;border-radius:24px;box-shadow:0 6px 18px #a95bff55}
html[data-look=meadow] .hero .ring{background:conic-gradient(#fff calc(var(--p)*1%),#ffffff44 0)}
html[data-look=meadow] .hero .verse{background:#ffffff30;border:2px dashed #ffffffcc}
html[data-look=meadow] .w{background:var(--card);border:3px solid #fff;border-top:10px solid var(--wc,var(--accent));box-shadow:var(--shadow)}
html[data-look=meadow] .w h2{font:900 24px var(--serif)}
html[data-look=meadow] .eyebrow{color:#9a4be8;font-weight:900;letter-spacing:.14em}
html[data-look=meadow] .task{background:#fff;border:2px solid #e4d6ff;border-radius:22px;font-weight:700;font-size:16px}
html[data-look=meadow] .task.done{background:linear-gradient(135deg,#e6ffe9,#e0f3ff);border-color:#8ee0a0}
html[data-look=meadow] .chip,html[data-look=meadow] .badge{background:#f1e2ff;color:#7a2fd0;font-weight:900}
html[data-look=meadow] .bar{background:#e4d6ff;height:14px}html[data-look=meadow] .bar i{background:linear-gradient(90deg,#ff5d5d,#ffa14a,#ffe14a,#5fdc6b,#4ab8ff,#8a6bff)}
html[data-look=meadow] .w .more{color:#8a3fe0;font-weight:900}
html[data-look=meadow] .bottom{background:#ffffffee}html[data-look=meadow] .bottom button.on{color:#8a3fe0;background:#f1e2ff}
html[data-look=meadow] .tabs button.on{background:linear-gradient(135deg,#a95bff,#ff7ac3);color:#fff}

/* world: blocks */
html[data-look=blocks]{--r:0px;--bg:#1b2a18;--bg2:#243a20;--card:#2b4226;--ink:#f3ffe9;--mute:#b8d8a8;--line:#0d1a0b;--accent:#5bd84a!important;--accent-ink:#0d1a0b;--hero2:#8b5a2b!important;--shadow:inset -4px -4px 0 #00000055,inset 4px 4px 0 #ffffff22;--font:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--serif:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
html[data-look=blocks] body{background:linear-gradient(#00000055,#00000055),repeating-conic-gradient(#2d4a28 0 25%,#27431f 0 50%) 0 0/48px 48px;background-attachment:fixed}
html[data-look=blocks] .shell,html[data-look=blocks] .main{background:transparent}
html[data-look=blocks] .side{background:#5a3b1c;border-right:6px solid #2e1d0c;box-shadow:inset -4px 0 0 #00000044}
html[data-look=blocks] .nav button{border-radius:0;font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.04em;border:3px solid transparent}
html[data-look=blocks] .nav button.on{background:#5bd84a;color:#0d1a0b;border-color:#0d1a0b;box-shadow:inset -3px -3px 0 #00000044,inset 3px 3px 0 #ffffff55}
html[data-look=blocks] .top{background:#1b2a18ee;border-bottom:6px solid #0d1a0b}
html[data-look=blocks] .pill,html[data-look=blocks] .btn{background:#6b6b6b;color:#fff;border:3px solid #0d1a0b;border-radius:0;font-weight:900;box-shadow:inset -3px -3px 0 #00000066,inset 3px 3px 0 #ffffff44}
html[data-look=blocks] .pill.primary,html[data-look=blocks] .btn.primary{background:#5bd84a;color:#0d1a0b}
html[data-look=blocks] .hero{background:linear-gradient(#5bd84a 0 14px,#3da232 14px 22px,#8b5a2b 22px 100%);border:4px solid #0d1a0b;border-radius:0;box-shadow:inset -6px -6px 0 #00000055,inset 6px 6px 0 #ffffff33;padding-top:36px}
html[data-look=blocks] .hero:after{display:block;content:'⛏';background:none;font-size:80px;width:auto;height:auto;right:30px;top:20px;border-radius:0;opacity:.95;transform:rotate(-15deg);filter:drop-shadow(4px 4px 0 #0008)}
html[data-look=blocks] .hero h1{font:900 32px var(--serif);text-transform:uppercase;text-shadow:3px 3px 0 #000}
html[data-look=blocks] .hero .stat{background:#ffd23f;color:#0d1a0b;border:3px solid #0d1a0b;border-radius:0;box-shadow:inset -3px -3px 0 #00000044,inset 3px 3px 0 #ffffff66}
html[data-look=blocks] .hero .stat b{font:900 30px var(--serif)}
html[data-look=blocks] .hero .clock b{font-family:var(--serif)}
html[data-look=blocks] .hero .ring{background:conic-gradient(#5bd84a calc(var(--p)*1%),#0d1a0b 0);border-radius:0}html[data-look=blocks] .hero .ring .avatar{border-radius:0!important}
html[data-look=blocks] .hero .verse{background:#0d1a0bcc;border:3px solid #0d1a0b;border-radius:0}
html[data-look=blocks] .w{background:var(--card);border:4px solid #0d1a0b;border-top:4px solid #0d1a0b;border-radius:0;box-shadow:var(--shadow)}
html[data-look=blocks] .w h2{font:900 20px var(--serif);text-transform:uppercase}
html[data-look=blocks] .eyebrow{color:#5bd84a;font-weight:900;letter-spacing:.14em}
html[data-look=blocks] .task{background:#1f3319;border:3px solid #0d1a0b;border-radius:0;font-weight:700;box-shadow:inset -3px -3px 0 #00000044,inset 3px 3px 0 #ffffff1a}
html[data-look=blocks] .task.done{background:#2f7d2a}
html[data-look=blocks] .chip,html[data-look=blocks] .badge{background:#0d1a0b;color:#5bd84a;border:2px solid #5bd84a;border-radius:0;font-weight:900}
html[data-look=blocks] .bar{background:#0d1a0b;height:16px;border-radius:0}html[data-look=blocks] .bar i{background:repeating-linear-gradient(90deg,#5bd84a 0 14px,#3da232 14px 16px);border-radius:0}
html[data-look=blocks] .w .more{color:#ffd23f;font-weight:900;text-transform:uppercase}
html[data-look=blocks] .bottom{background:#5a3b1c;border-top:6px solid #2e1d0c}html[data-look=blocks] .bottom button.on{color:#0d1a0b;background:#5bd84a;border-radius:0}
html[data-look=blocks] .tabs button.on{background:#5bd84a;color:#0d1a0b;border-radius:0}
html[data-look=blocks] .avatar,html[data-look=blocks] .av{border-radius:0!important}

@media(max-width:700px){html[data-look=hero] .hero h1,html[data-look=court] .hero h1,html[data-look=gem] .hero h1,html[data-look=meadow] .hero h1,html[data-look=magic] .hero h1{font-size:24px}html[data-look=blocks] .hero h1{font-size:20px}html[data-look=hero] .hero:after,html[data-look=court] .hero:after,html[data-look=gem] .hero:after,html[data-look=meadow] .hero:after,html[data-look=blocks] .hero:after{font-size:48px;width:60px;height:60px;right:10px;top:4px;opacity:.5}}
html[data-look=court] .hero:after,html[data-look=gem] .hero:after,html[data-look=meadow] .hero:after,html[data-look=blocks] .hero:after{right:270px;top:10px;font-size:64px}@media(max-width:1100px){html[data-look=court] .hero:after,html[data-look=gem] .hero:after,html[data-look=meadow] .hero:after,html[data-look=blocks] .hero:after{display:none}}
html[data-look=magic] .num,html[data-look=command] .num,html[data-look=court] .num,html[data-look=hero] .num,html[data-look=blocks] .num,html[data-look=hearth2] .num,html[data-look=meadow] .num,html[data-look=gem] .num{color:var(--accent-ink,#fff)}
html[data-look=hearth2] .btn.danger,html[data-look=meadow] .btn.danger,html[data-look=gem] .btn.danger{color:#b3261e!important}
html[data-look=magic] .btn.danger,html[data-look=command] .btn.danger,html[data-look=court] .btn.danger,html[data-look=hero] .btn.danger,html[data-look=blocks] .btn.danger{color:#ff9a8f!important}
html[data-look=meadow] .num,html[data-look=gem] .num,html[data-look=hearth2] .num{color:#fff}
html[data-look=blocks] .btn.danger{color:#fff!important;background:#a8322a}
html[data-look=court] .hero .stat b,html[data-look=court] .hero .stat span{color:#ffb347}
html[data-look=gem] .hero .stat b,html[data-look=gem] .hero .stat span,html[data-look=meadow] .hero .stat b,html[data-look=meadow] .hero .stat span{color:#8a2aa0;text-shadow:none}
html[data-look=hero] .hero .stat b,html[data-look=hero] .hero .stat span,html[data-look=blocks] .hero .stat b,html[data-look=blocks] .hero .stat span,html[data-look=magic] .hero .stat b,html[data-look=magic] .hero .stat span,html[data-look=hearth2] .hero .stat b,html[data-look=hearth2] .hero .stat span{text-shadow:none}
html[data-look=hero] .hero .stat,html[data-look=blocks] .hero .stat{color:#0d1020}
.hero .ring .avatar:not([style]){color:#fff!important;text-shadow:none}

/* ---- dark mode for the light-based looks (hearth2, gem, meadow): real dark page, sidebar, header, cards ---- */
html[data-dark="1"][data-look=hearth2]{--bg:#1d1610;--bg2:#2a1e15;--card:#2c2118;--ink:#f8e9d2;--mute:#cdb391;--line:#4d3a28;--shadow:0 2px 0 #00000055,0 14px 28px rgba(0,0,0,.4)}
html[data-dark="1"][data-look=hearth2] body{background:radial-gradient(circle at 20% 0,#33261a,transparent 50%),#1d1610}
html[data-dark="1"][data-look=hearth2] .top{background:#1d1610ee}
html[data-dark="1"][data-look=hearth2] .pill,html[data-dark="1"][data-look=hearth2] .btn{background:#2c2118;color:var(--ink);border-color:#5a4430}
html[data-dark="1"][data-look=hearth2] .pill.primary,html[data-dark="1"][data-look=hearth2] .btn.primary{background:var(--accent);color:#fff}
html[data-dark="1"][data-look=hearth2] .task{background:#3a2b1f;border-color:#6a523a;color:var(--ink)}
html[data-dark="1"][data-look=hearth2] .task.done{background:#27391f;border-color:#58853f}
html[data-dark="1"][data-look=hearth2] .chip,html[data-dark="1"][data-look=hearth2] .badge{background:#523519;color:#ffd9a8}
html[data-dark="1"][data-look=hearth2] .bar{background:#3d2e21}
html[data-dark="1"][data-look=hearth2] .eyebrow{color:#ff9d6e}
html[data-dark="1"][data-look=hearth2] .w .more{color:#ffb98a}
html[data-dark="1"][data-look=hearth2] .bottom{background:#2c2118}
html[data-dark="1"][data-look=hearth2] .bottom button.on{background:#523519;color:#ffc79a}
html[data-dark="1"][data-look=hearth2] .tabs button.on{background:var(--accent);color:#fff}
html[data-dark="1"][data-look=gem]{--bg:#1c1038;--bg2:#27164d;--card:rgba(44,24,86,.82);--ink:#f7eaff;--mute:#cdb5ee;--line:#6a46a6;--shadow:0 10px 30px rgba(0,0,0,.4)}
html[data-dark="1"][data-look=gem] body{background:radial-gradient(circle at 20% 15%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 70% 40%,#ffd9ff 0 1.5px,transparent 2.5px),radial-gradient(circle at 40% 80%,#fff 0 2px,transparent 3px),radial-gradient(circle at 90% 85%,#cfe8ff 0 1.5px,transparent 2.5px),linear-gradient(160deg,#2a0f4a,#1c1038 55%,#0f2a4a);background-size:240px 240px,300px 300px,260px 260px,340px 340px,100% 100%;background-attachment:fixed}
html[data-dark="1"][data-look=gem] .top{background:#1c1038d9}
html[data-dark="1"][data-look=gem] .pill,html[data-dark="1"][data-look=gem] .btn{background:#ffffff1c;color:var(--ink);border-color:#7d52c2}
html[data-dark="1"][data-look=gem] .pill.primary,html[data-dark="1"][data-look=gem] .btn.primary{background:linear-gradient(135deg,#e83e94,#a355ff);color:#fff}
html[data-dark="1"][data-look=gem] .w{border-color:#ffffff24}
html[data-dark="1"][data-look=gem] .task{background:#ffffff14;border-color:#7d52c2;color:var(--ink)}
html[data-dark="1"][data-look=gem] .task.done{background:linear-gradient(135deg,#0f3d3a,#10315a);border-color:#2fa58a}
html[data-dark="1"][data-look=gem] .chip,html[data-dark="1"][data-look=gem] .badge{background:#512a8c;color:#ffe0ff}
html[data-dark="1"][data-look=gem] .bar{background:#ffffff26}
html[data-dark="1"][data-look=gem] .eyebrow{color:#ff9ed6}
html[data-dark="1"][data-look=gem] .w .more{color:#ffa6dc}
html[data-dark="1"][data-look=gem] .bottom{background:#241046f2}
html[data-dark="1"][data-look=gem] .bottom button.on{background:#512a8c;color:#ffe0ff}
html[data-dark="1"][data-look=meadow]{--bg:#111a36;--bg2:#1b1442;--card:#1f2650ee;--ink:#f1e9ff;--mute:#c0aee6;--line:#4a4684;--shadow:0 10px 28px rgba(0,0,0,.4)}
html[data-dark="1"][data-look=meadow] body{background:radial-gradient(2px 2px at 12% 14%,#fff 60%,transparent 62%),radial-gradient(2px 2px at 78% 22%,#ffe9a8 60%,transparent 62%),radial-gradient(2px 2px at 44% 60%,#fff 60%,transparent 62%),radial-gradient(2px 2px at 90% 70%,#d9c7ff 60%,transparent 62%),linear-gradient(180deg,#0c1430,#1b1442 55%,#1e2a4a 85%,#143324);background-attachment:fixed}
html[data-dark="1"][data-look=meadow] .top{background:#111a36d9}
html[data-dark="1"][data-look=meadow] .pill,html[data-dark="1"][data-look=meadow] .btn{background:#2a3068;color:var(--ink);border-color:#5d58a6}
html[data-dark="1"][data-look=meadow] .pill.primary,html[data-dark="1"][data-look=meadow] .btn.primary{background:linear-gradient(135deg,#a95bff,#ff7ac3);color:#fff}
html[data-dark="1"][data-look=meadow] .w{border-color:#ffffff22}
html[data-dark="1"][data-look=meadow] .task{background:#ffffff12;border-color:#5d58a6;color:var(--ink)}
html[data-dark="1"][data-look=meadow] .task.done{background:linear-gradient(135deg,#123c2a,#12365a);border-color:#3fae78}
html[data-dark="1"][data-look=meadow] .chip,html[data-dark="1"][data-look=meadow] .badge{background:#4a3484;color:#ffe3f6}
html[data-dark="1"][data-look=meadow] .bar{background:#ffffff24}
html[data-dark="1"][data-look=meadow] .eyebrow{color:#e0b3ff}
html[data-dark="1"][data-look=meadow] .w .more{color:#ffb0e0}
html[data-dark="1"][data-look=meadow] .bottom{background:#1a2148f2}
html[data-dark="1"][data-look=meadow] .bottom button.on{background:#4a3484;color:#ffe3f6}
html[data-dark="1"] .btn.primary[disabled]{opacity:.6}

/* My style panel: a side panel so every change shows live on the page behind it */
.modal-bg.style{background:rgba(10,8,5,.10);pointer-events:none;place-items:center end;padding:12px}
.modal-bg.style .modal{pointer-events:auto;width:min(440px,100%);max-height:calc(100vh - 24px);overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.5)}
@media(max-width:760px){.modal-bg.style{place-items:end center;padding:8px}.modal-bg.style .modal{max-height:56vh}}

/* ---- fandom world scenes: original vector art, crisp at any resolution (hidden when a kid sets their own page background) ---- */
html[data-look=hero]:not(.has-bg) body::before,html[data-look=court]:not(.has-bg) body::before,html[data-look=gem]:not(.has-bg) body::before,html[data-look=meadow]:not(.has-bg) body::before,html[data-look=blocks]:not(.has-bg) body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-position:center bottom;background-size:cover;background-repeat:no-repeat}
html[data-look=hero]:not(.has-bg) body::before{background-image:url(../art/hero.svg);opacity:.9}
html[data-look=court]:not(.has-bg) body::before{background-image:url(../art/court.svg);opacity:.55}
html[data-look=gem]:not(.has-bg) body::before{background-image:url(../art/gem.svg);opacity:.85}
html[data-look=meadow]:not(.has-bg) body::before{background-image:url(../art/meadow.svg);opacity:.95}
html[data-look=blocks]:not(.has-bg) body::before{background-image:url(../art/blocks.svg);opacity:.7}
html[data-dark="1"][data-look=gem]:not(.has-bg) body::before{opacity:.6}
html[data-dark="1"][data-look=meadow]:not(.has-bg) body::before{opacity:.45;filter:saturate(.8) brightness(.7)}
html[data-look=hero]:not(.has-bg) .shell,html[data-look=court]:not(.has-bg) .shell,html[data-look=gem]:not(.has-bg) .shell,html[data-look=meadow]:not(.has-bg) .shell,html[data-look=blocks]:not(.has-bg) .shell{position:relative;z-index:1}
html[data-dark="1"][data-look=hearth2] .btn.danger,html[data-dark="1"][data-look=gem] .btn.danger,html[data-dark="1"][data-look=meadow] .btn.danger{color:#ffb4b4;border-color:#a55}
.map .zoom .btn{background:#fff;color:#222;border:1px solid #0003}
html[data-dark="1"] .task .btn.danger,html[data-dark="1"] .btn.sm.danger{color:#ffc2c2!important}