:root{--pg-bg:#eceef1;--pg-ink:#1b2430;--pg-mute:#566273;--pg-line:#c9cfd8;--pg-card:#fff;--pg-acc:#1f4fa3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pg-bg:#14181e;--pg-ink:#e8ecf2;--pg-mute:#9aa6b6;--pg-line:#2f3845;--pg-card:#1d232c;--pg-acc:#8db3ff;color-scheme:dark}}
:root[data-theme="dark"]{--pg-bg:#14181e;--pg-ink:#e8ecf2;--pg-mute:#9aa6b6;--pg-line:#2f3845;--pg-card:#1d232c;--pg-acc:#8db3ff;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--pg-bg);color:var(--pg-ink);font-family:"Figtree",system-ui,sans-serif;padding-inline:16px;padding-block:14px 28px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent}
button:focus-visible,select:focus-visible{outline:3px solid #f2a900;outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.skinbar{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.skinbtn{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;padding:8px 12px;border:2px solid var(--pg-line);border-radius:10px;background:var(--pg-card);min-height:48px;min-width:0}
.skinbtn b{font-size:14px}.skinbtn span{font-size:12px;color:var(--pg-mute)}
.skinbtn[aria-pressed="true"]{border-color:var(--pg-acc);box-shadow:0 0 0 2px var(--pg-acc) inset}
.clocksel{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--pg-mute);min-width:220px}
.clocksel select{font:inherit;font-size:14px;padding:9px 10px;border-radius:10px;border:2px solid var(--pg-line);background:var(--pg-card);color:var(--pg-ink)}
.note{font-size:13px;color:var(--pg-mute);margin:0;max-width:96ch;line-height:1.45}
.holder{margin:0 auto;overflow:hidden;border-radius:22px}

/* ===== App frame: iPad landscape 1180 x 820 ===== */
.app{--bg:#fff;--panel:#f1f2f5;--card:#fff;--ink:#1b2430;--muted:#5b6574;--line:#d6dbe2;--track:#e1e5ea;--accent:#1f4fa3;--on-accent:#fff;--good:#1a8a4a;--warn:#b86e00;--bad:#c23b32;--star:#f5a800;
--c0:#2f6bff;--c1:#e8473f;--c2:#e09b00;--c3:#12a36a;--on0:#fff;--on1:#fff;--on2:#2a1d00;--on3:#fff;--r:22px;--rs:12px;--bw:0px;--edge:none;--fh:"Nunito",sans-serif;--fb:"Nunito",system-ui,sans-serif;--buck:#d9a21b;--on-buck:#fff;
position:relative;display:flex;flex-direction:column;overflow:hidden;width:1180px;height:820px;flex:none;transform-origin:0 0;background:var(--bg);color:var(--ink);font-family:var(--fb)}
.k0{--kc:var(--c0);--onk:var(--on0)}.k1{--kc:var(--c1);--onk:var(--on1)}.k2{--kc:var(--c2);--onk:var(--on2)}.k3{--kc:var(--c3);--onk:var(--on3)}
.app svg{width:1em;height:1em;display:block;flex:none}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:12px 24px;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:900;font-size:24px}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:20px}
.clockchip{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--muted)}
.clockchip b{font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums}.clockchip svg{font-size:22px}
.parentbtn{justify-self:end;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--line);color:var(--muted);font-weight:800;background:transparent}
.parentbtn svg{font-size:18px}
.stage{flex:1;display:flex;flex-direction:column;padding:4px 24px 22px;min-height:0;overflow-y:auto;position:relative;z-index:1}

/* Avatars: a different shape for each kid */
.avatar{--av:92px;width:var(--av);height:var(--av);flex:none;display:grid;place-items:center;background:var(--avbg,#fff);color:var(--avfg,var(--kc));font-family:var(--fh);font-weight:900;font-size:calc(var(--av) * .54);line-height:1}
.k0 .avatar{border-radius:50%}.k1 .avatar{border-radius:30%}
.k2 .avatar{clip-path:polygon(50% 2%,93% 26%,93% 74%,50% 98%,7% 74%,7% 26%)}
.k3 .avatar{clip-path:polygon(50% 0,100% 36%,81% 100%,19% 100%,0 36%)}

/* Progress ring */
.ring{--p:0;--rd:128px;width:var(--rd);height:var(--rd);flex:none;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--ringc,var(--kc)) calc(var(--p) * 1%),var(--ringbg,rgba(0,0,0,.12)) 0)}
.ring::before{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--ringin,var(--card))}
.ring b{position:relative;font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;display:flex;color:var(--ringtx,var(--ink))}
.ring b svg{font-size:46px;color:var(--star)}
.st-star .ring b svg{color:var(--star)}.st-late .ring b svg{color:var(--warn)}
.st-overdue{--ringc:var(--bad)}.st-late{--ringc:var(--warn)}.st-star{--ringc:var(--good)}

/* Home */
.home{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.hint{margin:0;text-align:center;color:var(--muted);font-size:19px;font-weight:700}
.tiles{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:18px;min-height:0}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:12px;text-align:left;padding:22px 26px;border-radius:var(--r);background:var(--tilebg,var(--card));color:var(--ink);border:var(--bw) solid var(--tileline,transparent);box-shadow:var(--edge);min-width:0;transition:transform .08s}
.tile:active{transform:translateY(3px)}
.tile-head{display:flex;align-items:center;gap:20px}
.tile-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.tile-name{font-family:var(--fh);font-weight:900;font-size:56px;line-height:1}
.tile-now{font-size:20px;font-weight:800;line-height:1.2;color:var(--tilemuted,var(--muted))}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:14px}
.dchips{display:flex;gap:12px}
.dchip{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--chipbg,rgba(0,0,0,.07));border:3px solid transparent}
.dc-ic{font-size:26px;line-height:1}
.dchip::after{content:"";position:absolute;right:-7px;top:-7px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 14px/24px sans-serif;text-align:center}
.dc-star::after{content:"\2605";background:var(--star);color:#3a2a00}
.dc-late::after{content:"\2713";background:var(--warn);color:#fff}
.dc-overdue::after{content:"!";background:var(--bad);color:#fff}
.dc-open{border-color:var(--kc)}.dchip.cur{border-color:var(--kc);background:var(--chipcur,var(--chipbg,rgba(0,0,0,.07)))}
.dc-upcoming{opacity:.45}
.tile-stars{display:flex;gap:4px;font-size:36px}
.st{color:var(--starOff,rgba(0,0,0,.18))}.st.on{color:var(--star)}.st.on svg path{stroke:rgba(0,0,0,.28);stroke-width:1.2}
.tile-nums{display:flex;gap:16px;font-weight:900;font-size:22px}
.mini{display:flex;align-items:center;gap:6px}.mini svg{font-size:26px}.mini svg:has(circle){color:var(--buck)}.mini svg:has(path){color:inherit}

/* List */
.list,.profile,.parent{width:100%;margin:0 auto;display:flex;flex-direction:column;gap:14px;min-height:0}
.list{flex:1}.profile{max-width:980px}
.list-head{display:flex;align-items:center;gap:16px}
.list-head .avatar{--av:78px}
.who{flex:1;min-width:0;display:flex;align-items:center;gap:16px}
.list-title-wrap{flex:1;min-width:0}
.list-kicker{margin:0 0 2px;font-weight:800;color:var(--kc,var(--accent));font-size:18px}
.list-title{margin:0;font-family:var(--fh);font-weight:900;font-size:40px;line-height:1.05}
.back,.rewards-btn{display:flex;align-items:center;gap:6px;min-height:52px;padding:0 18px;border-radius:999px;border:2px solid var(--line);font-weight:800;font-size:17px}
.back svg,.rewards-btn svg{font-size:22px}
.rewards-btn{background:var(--star);color:#2a1d00;border-color:transparent}
.timecard{position:relative;width:290px;flex:none;display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-radius:var(--rs);background:var(--card);box-shadow:var(--edge);border:var(--bw) solid var(--cardline,transparent)}
.arc{display:none;width:100%;height:auto;color:var(--ink)}.sun{fill:#ffb300}
.tc-big{font-family:var(--fh);font-size:36px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.tc-small{font-size:14px;font-weight:700;color:var(--muted)}
.drain{display:block;height:10px;border-radius:99px;background:var(--track);overflow:hidden;margin-top:4px}
.drain span{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .3s}
.tc-due{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800}.tc-due svg{font-size:16px}
.timecard.bad .tc-big{color:var(--bad)}.timecard.bad .drain span{background:var(--bad)}
.timecard.ok .tc-big{color:var(--good)}.timecard.ok .drain span{background:var(--good)}
.steps{display:flex;align-items:center;gap:8px}
.stp{flex:1;height:14px;border-radius:99px;background:var(--track)}.stp.on{background:var(--kc)}
.goal{display:grid;place-items:center;font-size:34px;color:var(--track);padding-left:4px}.goal.on{color:var(--star)}
.items{list-style:none;margin:0;padding:0;flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px}
.items.few{flex:none;grid-auto-rows:270px}
.items li{display:flex;min-height:0;min-width:0}
.item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px 12px;border-radius:var(--r);background:var(--card);border:var(--bw) solid var(--cardline,transparent);box-shadow:var(--edge);transition:transform .08s,background .2s}
.item:active:not(:disabled){transform:translateY(3px)}
.item-ic{font-size:70px;line-height:1}
.item-text{font-family:var(--fh);font-size:25px;font-weight:900;text-align:center;line-height:1.12;padding-inline:8px}
.item .box{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50%;border:3px solid var(--line);display:grid;place-items:center;color:transparent;font-size:30px}
.item.on{background:color-mix(in srgb,var(--kc) 20%,var(--card))}
.item.on .box{background:var(--kc);border-color:var(--kc);color:var(--onk)}
.item.on .item-ic{opacity:.55;filter:grayscale(.4)}
.item:disabled{cursor:default}
.closed{flex:1;display:grid;place-content:center;text-align:center;font-size:26px;font-weight:800;gap:4px}
.closed p{margin:0}.closed .sub{color:var(--muted);font-size:19px}.closed-ic{font-size:80px}

/* Profile */
.goalline{margin:0;font-size:20px;font-weight:800;color:var(--kc)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:14px 18px;border-radius:var(--r);background:var(--card);box-shadow:var(--edge);border:var(--bw) solid var(--cardline,transparent)}
.stat svg{grid-row:1/3;font-size:42px;color:var(--star)}.stat svg:has(text){color:var(--buck)}.stat svg:has(path[d^="M12 2.5c"]){color:#ff7a1a}
.stat b{font-size:32px;line-height:1;font-variant-numeric:tabular-nums}.stat span{color:var(--muted);font-size:15px;font-weight:700}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cols h3,.pcard h3{margin:0 0 8px;font-family:var(--fh);font-size:21px;font-weight:900}
.cols section{min-width:0}
.pr{margin:0 0 10px;font-size:16px}
.badges,.shop{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.badge{display:flex;gap:12px;align-items:center;padding:8px 12px;border-radius:var(--rs);background:var(--card);opacity:.45}
.badge.got{opacity:1}
.badge-ic{font-size:30px;color:var(--muted);display:flex}.badge.got .badge-ic{color:var(--star)}
.badge-t{display:flex;flex-direction:column;font-size:16px}.badge-t i{font-style:normal;color:var(--muted);font-size:13px}
.week{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end;height:100px}
.wk{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.wk-bar{flex:1;width:100%;max-width:34px;background:var(--track);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden}
.wk-fill{width:100%;background:var(--muted)}.wk-fill.s3{background:var(--good)}.wk-fill.s2{background:var(--accent)}.wk-fill.s1{background:var(--warn)}
.wk-d{font-size:12px;color:var(--muted)}
.reward{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--rs);background:var(--card)}
.reward-t{font-size:16px;font-weight:700}
.buy{display:flex;align-items:center;gap:6px;min-height:46px;padding:0 16px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-weight:900}
.buy svg{font-size:22px;color:var(--buck)}.buy:disabled{opacity:.35;cursor:not-allowed}

/* Parent */
.parent{max-width:1100px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pcard{padding:16px;border-radius:var(--r);background:var(--card);box-shadow:var(--edge);border:var(--bw) solid var(--cardline,transparent);min-width:0}
.pcard.wide{grid-column:1/-1}
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:13px;color:var(--muted);font-weight:800}
tbody th{font-size:19px}.num{font-variant-numeric:tabular-nums;font-weight:900}
.cell-sub{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:900;background:var(--track);color:var(--ink)}
.tag-star{background:var(--good);color:#fff}.tag-late{background:var(--warn);color:#fff}.tag-overdue{background:var(--bad);color:#fff}.tag-open{background:var(--accent);color:var(--on-accent)}
.outlist,.reqs,.recs,.weekgrid{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.outlist li{display:flex;flex-direction:column;gap:3px}.out-items{color:var(--muted);font-size:14px}
.none{color:var(--muted)}
.wlabels{display:grid;grid-template-columns:70px repeat(8,1fr);gap:4px;font-size:11px;color:var(--muted);margin-bottom:4px}
.wlabels span:first-child{grid-column:2}
.wrow{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:4px}.wname{font-weight:900}
.wcells{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.wc{display:grid;place-items:center;height:32px;border-radius:6px;font-weight:900;font-size:14px;background:var(--track);color:var(--ink)}
.wc.s3{background:var(--good);color:#fff}.wc.s2{background:var(--accent);color:var(--on-accent)}.wc.s1{background:var(--warn);color:#fff}
.req{display:flex;flex-direction:column;gap:8px}.req-btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{min-height:44px;padding:0 16px;border-radius:99px;border:2px solid var(--line);font-weight:800}
.btn.ok{background:var(--good);border-color:var(--good);color:#fff}
.recs li{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--muted)}.recs b{color:var(--ink);min-width:48px;font-size:16px}
.pfoot{display:flex;justify-content:flex-end}

/* Celebrate + toast */
.celebrate{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:rgba(10,14,20,.6);padding:16px}
.cel-card{width:min(560px,100%);padding:30px 28px;text-align:center;border-radius:calc(var(--r) + 8px);background:var(--card);color:var(--ink);border:var(--bw) solid var(--cardline,transparent);box-shadow:var(--edge);display:flex;flex-direction:column;gap:10px;align-items:center}
.cel-star{font-size:110px;color:var(--star);display:flex}.plain .cel-star{color:var(--good)}
.won .cel-star{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.2) rotate(-40deg)}to{transform:none}}
.cel-card h2{margin:0;font-family:var(--fh);font-weight:900;font-size:46px}
.cel-card p{margin:0;font-size:20px;font-weight:700}.cel-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-weight:800;color:var(--accent)}
.cel-line{color:var(--muted)}
.cel-btn{margin-top:8px;min-height:60px;padding:0 32px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-weight:900;font-size:21px}
.toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:11;padding:12px 22px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:800}
@media (prefers-reduced-motion:reduce){.won .cel-star{animation:none}.drain span{transition:none}.tile,.item{transition:none}}
/* ===== 1. Pop: bold color, chunky 3D buttons ===== */
.app[data-skin="pop"]{--bg:#eef1ff;--panel:#e0e6ff;--card:#fff;--ink:#1c2340;--muted:#5a6388;--line:#cdd5f5;--track:#d9e0fb;--accent:#3b6dff;--on-accent:#fff;--good:#14894f;--warn:#b86a00;--bad:#d03a30;--star:#ffb400;
--c0:#3b6dff;--c1:#ff5a4d;--c2:#ffb400;--c3:#14b86f;--on0:#fff;--on1:#fff;--on2:#2a1d00;--on3:#fff;--fh:"Nunito",sans-serif;--buck:#f0a000}
.app[data-skin="pop"] .tile{background:color-mix(in srgb,var(--kc) 22%,#fff);border:3px solid var(--kc);box-shadow:0 7px 0 var(--kc);margin-bottom:7px}
.app[data-skin="pop"] .avatar{--avbg:var(--kc);--avfg:var(--onk)}
.app[data-skin="pop"] .ring{--ringbg:rgba(28,35,64,.12);--ringin:#fff}
.app[data-skin="pop"] .tile-now{color:var(--ink)}
.app[data-skin="pop"] .dchip{background:#fff}
.app[data-skin="pop"] .item{border:3px solid var(--line);box-shadow:0 6px 0 var(--line);margin-bottom:6px}
.app[data-skin="pop"] .item.on{border-color:var(--kc);box-shadow:0 6px 0 var(--kc)}
.app[data-skin="pop"] .item .box{border-color:var(--line)}
.app[data-skin="pop"] .timecard,.app[data-skin="pop"] .pcard,.app[data-skin="pop"] .stat{border:3px solid var(--line);box-shadow:0 5px 0 var(--line)}
.app[data-skin="pop"] .stp{height:18px}
.app[data-skin="pop"] .back,.app[data-skin="pop"] .parentbtn{background:#fff;border:3px solid var(--line);box-shadow:0 4px 0 var(--line)}
.app[data-skin="pop"] .rewards-btn{box-shadow:0 4px 0 #c98a00}
.app[data-skin="pop"] .cel-btn,.app[data-skin="pop"] .buy{box-shadow:0 5px 0 rgba(0,0,0,.25)}
.app[data-skin="pop"] .cel-card{border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink)}
.app[data-skin="pop"] .brand-mark{background:var(--star);color:#2a1d00}

/* ===== 2. Level Up: dark game screen ===== */
.app[data-skin="levelup"]{--bg:#0e1128;--panel:#181c3d;--card:#1b2048;--ink:#f2f4ff;--muted:#aab0dc;--line:#343b7a;--track:#2a3070;--accent:#ffd23f;--on-accent:#231a00;--good:#3ee6a0;--warn:#ffb13d;--bad:#ff6b88;--star:#ffd23f;
--c0:#7b95ff;--c1:#ff7392;--c2:#ffc547;--c3:#3ee6a8;--on0:#0e1128;--on1:#0e1128;--on2:#0e1128;--on3:#0e1128;--fh:"Baloo 2",sans-serif;--fb:"Nunito",system-ui,sans-serif;--r:20px;--buck:#ffd23f;--on-buck:#231a00;--pg-line:#343b7a}
.app[data-skin="levelup"] .brand,.app[data-skin="levelup"] .tile-name,.app[data-skin="levelup"] .list-title,.app[data-skin="levelup"] .tc-big,.app[data-skin="levelup"] .item-text{font-weight:800}
.app[data-skin="levelup"] .tile{background:var(--card);border:3px solid var(--kc);box-shadow:0 7px 0 color-mix(in srgb,var(--kc) 50%,#000);margin-bottom:7px}
.app[data-skin="levelup"] .avatar{--avbg:var(--kc);--avfg:var(--onk)}
.app[data-skin="levelup"] .ring{--ringbg:#2a3070;--ringin:var(--card)}
.app[data-skin="levelup"] .dchip{background:#121634}
.app[data-skin="levelup"] .st{--starOff:#3a4290}
.app[data-skin="levelup"] .tile-name{color:var(--kc)}
.app[data-skin="levelup"] .item{border:3px solid var(--line);box-shadow:0 7px 0 #080a1c;margin-bottom:7px}
.app[data-skin="levelup"] .item .box{border-color:var(--line);border-radius:10px}
.app[data-skin="levelup"] .item.on{border-color:var(--kc);background:color-mix(in srgb,var(--kc) 22%,var(--card));box-shadow:0 7px 0 color-mix(in srgb,var(--kc) 45%,#000)}
.app[data-skin="levelup"] .stp{height:24px;border-radius:7px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.28)}
.app[data-skin="levelup"] .timecard,.app[data-skin="levelup"] .pcard,.app[data-skin="levelup"] .stat{border:3px solid var(--line)}
.app[data-skin="levelup"] .drain,.app[data-skin="levelup"] .drain span{border-radius:5px}.app[data-skin="levelup"] .drain{height:14px}
.app[data-skin="levelup"] .back,.app[data-skin="levelup"] .parentbtn{border:3px solid var(--line);background:var(--card);color:var(--ink)}
.app[data-skin="levelup"] .cel-card{border:3px solid var(--accent)}
.app[data-skin="levelup"] .tag-star,.app[data-skin="levelup"] .tag-late,.app[data-skin="levelup"] .tag-overdue,.app[data-skin="levelup"] .wc.s3,.app[data-skin="levelup"] .wc.s1,.app[data-skin="levelup"] .btn.ok{color:#0e1128}
/* ===== 4. Sunrise: the sky matches the time of day ===== */
.app[data-skin="sunrise"]{--panel:rgba(255,255,255,.7);--card:rgba(255,255,255,.84);--ink:#1d2433;--muted:#4c566b;--line:rgba(29,36,51,.18);--track:rgba(29,36,51,.14);--accent:#e8590c;--on-accent:#fff;--good:#157a46;--warn:#a85d00;--bad:#c2352b;--star:#f5a000;
--c0:#3a63ec;--c1:#e0414e;--c2:#e8920a;--c3:#0c8f6c;--on0:#fff;--on1:#fff;--on2:#2a1d00;--on3:#fff;--fh:"Outfit",sans-serif;--fb:"Outfit",system-ui,sans-serif;--r:26px;--buck:#e8a000;
--sky:linear-gradient(180deg,#ffc58a 0%,#ff9db0 50%,#a7b9ff 100%);--sky-ink:#3a1f2e;background:var(--sky);transition:background .4s}
.app[data-skin="sunrise"][data-period="afternoon"]{--sky:linear-gradient(180deg,#58b6ff 0%,#a9dcff 60%,#e6f6ff 100%);--sky-ink:#0b3050}
.app[data-skin="sunrise"][data-period="dinner"]{--sky:linear-gradient(180deg,#2b2a6e 0%,#8a4fa3 52%,#ff8f5e 100%);--sky-ink:#fff}
.app[data-skin="sunrise"][data-period="night"]{--sky:linear-gradient(180deg,#0a1030 0%,#1b2457 100%);--sky-ink:#fff}
.app[data-skin="sunrise"] .topbar,.app[data-skin="sunrise"] .hint,.app[data-skin="sunrise"] .list-head,.app[data-skin="sunrise"] .goalline{color:var(--sky-ink)}
.app[data-skin="sunrise"] .clockchip,.app[data-skin="sunrise"] .clockchip b{color:var(--sky-ink)}
.app[data-skin="sunrise"] .list-kicker{color:inherit;opacity:.85}
.app[data-skin="sunrise"] .back,.app[data-skin="sunrise"] .parentbtn{border-color:currentColor;color:var(--sky-ink)}
.app[data-skin="sunrise"] .brand-mark{background:#fff;color:#e8920a}
.app[data-skin="sunrise"] .tile,.app[data-skin="sunrise"] .item,.app[data-skin="sunrise"] .timecard,.app[data-skin="sunrise"] .stat,.app[data-skin="sunrise"] .pcard,.app[data-skin="sunrise"] .badge,.app[data-skin="sunrise"] .reward{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(20,20,60,.14)}
.app[data-skin="sunrise"] .avatar{--avbg:var(--kc);--avfg:var(--onk)}
.app[data-skin="sunrise"] .ring{--ringbg:rgba(29,36,51,.12);--ringin:#fff}
.app[data-skin="sunrise"] .dchip{background:#fff}
.app[data-skin="sunrise"] .item.on{background:color-mix(in srgb,var(--kc) 30%,#fff)}
.app[data-skin="sunrise"] .stp{height:16px}.app[data-skin="sunrise"] .stp:not(.on){background:rgba(255,255,255,.6)}
.app[data-skin="sunrise"] .goal{color:rgba(255,255,255,.7)}.app[data-skin="sunrise"] .goal.on{color:var(--star)}
.app[data-skin="sunrise"] .arc{display:block;height:58px;width:auto;margin:0 auto 2px}
.app[data-skin="sunrise"] .timecard{align-items:stretch}
.app[data-skin="sunrise"] .tc-big{font-size:32px}
.app[data-skin="sunrise"] .cel-card{background:#fff}

/* ===== 5. Scoreboard: sports style, giant numbers ===== */
.app[data-skin="board"]{--bg:#0a0a0b;--panel:#151517;--card:#151517;--ink:#fff;--muted:#a5a5ae;--line:#2d2d33;--track:#2a2a30;--accent:#ffe600;--on-accent:#000;--good:#4ade80;--warn:#ffb020;--bad:#ff5468;--star:#ffe600;
--c0:#22d3ee;--c1:#ff5470;--c2:#ffd60a;--c3:#7cff6b;--on0:#000;--on1:#000;--on2:#000;--on3:#000;--fh:"Anton",sans-serif;--fb:"Barlow Condensed",system-ui,sans-serif;--r:6px;--rs:4px;--buck:#ffe600;--on-buck:#000;--pg-line:#2d2d33}
.app[data-skin="board"] .brand,.app[data-skin="board"] .tile-name,.app[data-skin="board"] .list-title,.app[data-skin="board"] .item-text,.app[data-skin="board"] .cel-card h2,.app[data-skin="board"] .cols h3,.app[data-skin="board"] .pcard h3,.app[data-skin="board"] .tc-big{font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.app[data-skin="board"] .brand{font-size:26px}
.app[data-skin="board"] .tile-now,.app[data-skin="board"] .hint,.app[data-skin="board"] .tc-small,.app[data-skin="board"] .list-kicker{font-weight:700;font-size:22px;letter-spacing:.02em}
.app[data-skin="board"] .tile{background:var(--kc);color:#000;--star:#000;--starOff:rgba(0,0,0,.22);--tilemuted:rgba(0,0,0,.78);--chipbg:rgba(0,0,0,.16);--buck:#000;--ringc:#000;--ringbg:rgba(0,0,0,.2);--ringin:var(--kc);--ringtx:#000}
.app[data-skin="board"] .tile-name{font-size:76px;line-height:.95}
.app[data-skin="board"] .tile .avatar{--avbg:#000;--avfg:var(--kc)}
.app[data-skin="board"] .tile .ring b svg{color:#000}
.app[data-skin="board"] .tile.st-overdue{--ringc:#000}.app[data-skin="board"] .dc-open,.app[data-skin="board"] .dchip.cur{border-color:#000}
.app[data-skin="board"] .tile-nums{font-size:26px}.app[data-skin="board"] .ring b{font-family:var(--fh);font-weight:400;font-size:40px}
.app[data-skin="board"] .list-head .avatar{--avbg:var(--kc);--avfg:#000}
.app[data-skin="board"] .items{counter-reset:n}
.app[data-skin="board"] .item{counter-increment:n;border:2px solid var(--line);align-items:center}
.app[data-skin="board"] .item::before{content:counter(n);position:absolute;left:16px;top:8px;font:400 52px/1 "Anton",sans-serif;color:var(--kc);opacity:.9}
.app[data-skin="board"] .item-text{font-size:30px;line-height:1.05}
.app[data-skin="board"] .item .box{border-radius:6px;border-color:#55555e}
.app[data-skin="board"] .item.on{background:var(--kc);border-color:var(--kc);color:#000}
.app[data-skin="board"] .item.on::before{color:#000}.app[data-skin="board"] .item.on .box{background:#000;border-color:#000;color:var(--kc)}
.app[data-skin="board"] .item.on .item-ic{opacity:.8;filter:none}
.app[data-skin="board"] .timecard{background:#000;border:2px solid var(--line)}
.app[data-skin="board"] .tc-big{font-size:54px;color:var(--accent);line-height:1}
.app[data-skin="board"] .timecard.bad .tc-big{color:var(--bad)}.app[data-skin="board"] .timecard.ok .tc-big{color:var(--good)}
.app[data-skin="board"] .drain,.app[data-skin="board"] .drain span{border-radius:0}
.app[data-skin="board"] .stp{height:18px;border-radius:0;transform:skewX(-14deg)}
.app[data-skin="board"] .back,.app[data-skin="board"] .parentbtn{border-radius:4px;border-color:#55555e}
.app[data-skin="board"] .parentbtn{color:#fff}
.app[data-skin="board"] .cel-card{border:3px solid var(--accent)}
.app[data-skin="board"] .tag-star,.app[data-skin="board"] .tag-late,.app[data-skin="board"] .tag-overdue,.app[data-skin="board"] .wc.s3,.app[data-skin="board"] .wc.s1,.app[data-skin="board"] .btn.ok{color:#000}
.app[data-skin="board"] .cel-btn,.app[data-skin="board"] .buy,.app[data-skin="board"] .rewards-btn{border-radius:4px}
.app[data-skin="sunrise"] .cols h3,.app[data-skin="sunrise"] .pr,.app[data-skin="sunrise"] .pfoot .btn{color:var(--sky-ink)}
.skinbtn em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--pg-acc);color:var(--pg-bg);padding:1px 6px;border-radius:99px;margin-left:6px;vertical-align:2px}

/* ===== Teen layout: two-column rows, small picture badge ===== */
.app.teen .items{grid-template-columns:1fr 1fr;gap:14px}
.app.teen .items.few{grid-template-columns:1fr;grid-auto-rows:138px}
.app.teen .item{flex-direction:row;justify-content:flex-start;gap:20px;padding:0 24px 0 18px;text-align:left}
.app.teen .item-ic{width:76px;height:76px;flex:none;display:grid;place-items:center;font-size:40px;border-radius:var(--icr,18px);background:var(--icbg,rgba(128,128,128,.14))}
.app.teen .item-text{text-align:left;font-size:26px;padding:0;flex:1}
.app.teen .item .box{position:static;margin-left:auto;flex:none;width:52px;height:52px}
.app.teen .tile-name{font-size:62px}

/* ===== Climb: rock-climbing gym ===== */
.app[data-skin="climb"]{--bg:#17191d;--panel:#22252b;--card:#23262c;--ink:#f3f4f6;--muted:#9ba2ad;--line:#363a44;--track:#33373f;--accent:#ffd400;--on-accent:#111;--good:#4cd964;--warn:#ffa21a;--bad:#ff5252;--star:#ffd400;
--c0:#ff6a2a;--c1:#2fe0c9;--c2:#ff4d9a;--c3:#b6f23c;--on0:#111;--on1:#111;--on2:#111;--on3:#111;--fh:"Big Shoulders Display",sans-serif;--fb:"Archivo",system-ui,sans-serif;--r:16px;--rs:10px;--buck:#ffd400;--on-buck:#111;--icbg:#2e323a;--pg-line:#363a44;
background-color:var(--bg);background-image:radial-gradient(rgba(255,255,255,.055) 1.3px,transparent 1.7px),radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px);background-size:23px 23px,13px 13px;background-position:0 0,8px 10px}
.app[data-skin="climb"] .brand,.app[data-skin="climb"] .tile-name,.app[data-skin="climb"] .list-title,.app[data-skin="climb"] .item-text,.app[data-skin="climb"] .tc-big,.app[data-skin="climb"] .cel-card h2,.app[data-skin="climb"] .cols h3,.app[data-skin="climb"] .pcard h3{font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.app[data-skin="climb"] .tile-name{font-size:72px;line-height:.92}.app[data-skin="climb"] .item-text{font-size:32px;line-height:1}
.app[data-skin="climb"] .brand{font-size:30px}.app[data-skin="climb"] .list-title{font-size:48px}
.app[data-skin="climb"] .tile-now,.app[data-skin="climb"] .hint{font-weight:600}
.app[data-skin="climb"] .tile{border:2px solid var(--line)}
.app[data-skin="climb"] .avatar{--avbg:var(--kc);--avfg:#111;clip-path:none;box-shadow:inset -7px -9px 0 rgba(0,0,0,.2),inset 5px 6px 0 rgba(255,255,255,.22)}
.app[data-skin="climb"] .k0 .avatar{border-radius:62% 38% 54% 46% / 48% 60% 40% 52%}
.app[data-skin="climb"] .k1 .avatar{border-radius:40% 60% 46% 54% / 58% 44% 56% 42%}
.app[data-skin="climb"] .k2 .avatar{border-radius:54% 46% 62% 38% / 42% 56% 44% 58%}
.app[data-skin="climb"] .k3 .avatar{border-radius:46% 54% 40% 60% / 60% 42% 58% 40%}
.app[data-skin="climb"] .ring{--ringbg:#31353d;--ringin:var(--card)}
.app[data-skin="climb"] .dchip{background:#2e323a}
.app[data-skin="climb"] .st{--starOff:#3d424c}
.app[data-skin="climb"] .steps{justify-content:space-between;padding:6px 4px;background:linear-gradient(90deg,var(--line) 0 50%,transparent 50%) center/14px 3px repeat-x}
.app[data-skin="climb"] .stp{flex:none;width:44px;height:34px;border-radius:56% 44% 60% 40% / 50% 56% 44% 50%;background:#3a3f49;box-shadow:inset -3px -4px 0 rgba(0,0,0,.25)}
.app[data-skin="climb"] .stp:nth-child(even){border-radius:42% 58% 46% 54% / 58% 44% 56% 42%;transform:translateY(-4px) rotate(-8deg)}
.app[data-skin="climb"] .stp.on{background:var(--kc);box-shadow:inset -4px -5px 0 rgba(0,0,0,.2),inset 3px 3px 0 rgba(255,255,255,.25)}
.app[data-skin="climb"] .goal{font-size:40px;color:#3a3f49}.app[data-skin="climb"] .goal.on{color:var(--star)}
.app[data-skin="climb"] .drain{height:12px;background:repeating-linear-gradient(135deg,#3c404a 0 6px,#2d3037 6px 12px)}
.app[data-skin="climb"] .drain span{background:repeating-linear-gradient(135deg,var(--accent) 0 6px,#d1ae00 6px 12px)}
.app[data-skin="climb"] .timecard{border:2px solid var(--line)}
.app[data-skin="climb"] .tc-big{font-size:44px}
.app[data-skin="climb"] .item{border:2px solid var(--line)}
.app[data-skin="climb"] .item .box{border-color:#4a505b;border-radius:12px}
.app[data-skin="climb"] .item.on{background:var(--kc);border-color:var(--kc);color:#111}
.app[data-skin="climb"] .item.on .item-ic{background:rgba(0,0,0,.18);opacity:1;filter:none}
.app[data-skin="climb"] .item.on .box{background:#111;border-color:#111;color:var(--kc)}
.app[data-skin="climb"] .back,.app[data-skin="climb"] .parentbtn{border-color:var(--line);color:var(--ink)}
.app[data-skin="climb"] .cel-card{border:3px solid var(--accent)}
.app[data-skin="climb"] .tag-star,.app[data-skin="climb"] .tag-late,.app[data-skin="climb"] .tag-overdue,.app[data-skin="climb"] .wc.s3,.app[data-skin="climb"] .wc.s1,.app[data-skin="climb"] .btn.ok{color:#111}

/* ===== Trail Run: Strava-style orange on cool gray ===== */
.app[data-skin="run"]{--bg:#f7f7fa;--panel:#eeeef2;--card:#fff;--ink:#242428;--muted:#6d6d78;--line:#e3e3e8;--track:#e6e6ec;--accent:#fc4c02;--on-accent:#fff;--good:#168a45;--warn:#b35a00;--bad:#d1301c;--star:#ffb400;
--c0:#1c7ed6;--c1:#7048e8;--c2:#0f9d8e;--c3:#c2255c;--on0:#fff;--on1:#fff;--on2:#fff;--on3:#fff;--fh:"Barlow",sans-serif;--fb:"Barlow",system-ui,sans-serif;--r:14px;--rs:10px;--buck:#e08a00;--icbg:#f2f2f5;--icr:12px;
background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1180' height='820' viewBox='0 0 1180 820' fill='none'%3E%3Cg stroke='rgba(36,36,40,.055)' stroke-width='2'%3E%3Cg transform='rotate(-18 800 300)'%3E%3Cellipse cx='800' cy='300' rx='60' ry='36'/%3E%3Cellipse cx='800' cy='300' rx='120' ry='76'/%3E%3Cellipse cx='800' cy='300' rx='190' ry='122'/%3E%3Cellipse cx='800' cy='300' rx='270' ry='176'/%3E%3Cellipse cx='800' cy='300' rx='360' ry='236'/%3E%3Cellipse cx='800' cy='300' rx='460' ry='300'/%3E%3C/g%3E%3Cg transform='rotate(14 160 720)'%3E%3Cellipse cx='160' cy='720' rx='50' ry='30'/%3E%3Cellipse cx='160' cy='720' rx='110' ry='66'/%3E%3Cellipse cx='160' cy='720' rx='180' ry='108'/%3E%3Cellipse cx='160' cy='720' rx='260' ry='154'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M40 770C180 720 230 640 370 610S560 540 650 440S900 390 1010 250S1120 130 1150 50' stroke='rgba(252,76,2,.2)' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/cover}
.app[data-skin="run"] .brand,.app[data-skin="run"] .tile-name,.app[data-skin="run"] .list-title,.app[data-skin="run"] .cel-card h2{font-weight:800;letter-spacing:-.02em}
.app[data-skin="run"] .brand-mark{background:var(--accent);color:#fff}
.app[data-skin="run"] .tile-name{font-size:66px;line-height:.95}.app[data-skin="run"] .list-title{font-size:44px}
.app[data-skin="run"] .tile-now,.app[data-skin="run"] .tc-small,.app[data-skin="run"] .hint{font-weight:600}
.app[data-skin="run"] .hint{text-transform:uppercase;letter-spacing:.08em;font-size:15px;font-weight:700}
.app[data-skin="run"] .tile{border:1px solid var(--line);box-shadow:0 1px 2px rgba(36,36,40,.06),0 10px 28px rgba(36,36,40,.07)}
.app[data-skin="run"] .avatar{--avbg:var(--kc);--avfg:#fff;--av:84px;clip-path:none;border-radius:50%}
.app[data-skin="run"] .list-head .avatar{--av:68px}
.app[data-skin="run"] .ring{--rd:118px;--ringc:var(--accent);--ringbg:#ececf1;--ringin:#fff}
.app[data-skin="run"] .ring::before{inset:13px}
.app[data-skin="run"] .ring b{font-weight:800;font-size:36px}
.app[data-skin="run"] .st-star{--ringc:var(--good)}.app[data-skin="run"] .st-late{--ringc:var(--warn)}.app[data-skin="run"] .st-overdue{--ringc:var(--bad)}
.app[data-skin="run"] .dchip{background:#f2f2f5}
.app[data-skin="run"] .dc-open,.app[data-skin="run"] .dchip.cur{border-color:var(--accent);background:#fff1ea}
.app[data-skin="run"] .st{--starOff:#dcdce3}
.app[data-skin="run"] .stp{height:10px;border-radius:99px;background:#e1e1e8}
.app[data-skin="run"] .stp.on{background:var(--accent)}
.app[data-skin="run"] .goal{color:#dcdce3}.app[data-skin="run"] .goal.on{color:var(--star)}
.app[data-skin="run"] .timecard{border:1px solid var(--line);box-shadow:0 1px 2px rgba(36,36,40,.06)}
.app[data-skin="run"] .timecard::before{content:"TIME LEFT";font:700 12px "Barlow",sans-serif;letter-spacing:.12em;color:var(--muted)}
.app[data-skin="run"] .tc-big{font-size:46px;font-weight:800;line-height:.95;letter-spacing:-.02em}
.app[data-skin="run"] .drain{height:8px}.app[data-skin="run"] .drain span{background:var(--accent)}
.app[data-skin="run"] .timecard.ok .drain span{background:var(--good)}.app[data-skin="run"] .timecard.bad .drain span{background:var(--bad)}
.app[data-skin="run"] .item{border:1px solid var(--line);box-shadow:0 1px 2px rgba(36,36,40,.05)}
.app[data-skin="run"] .item-text{font-weight:700;font-size:27px;letter-spacing:-.01em}
.app[data-skin="run"] .item .box{border-color:#c9c9d2}
.app[data-skin="run"] .item.on{background:var(--accent);border-color:var(--accent);color:#fff}
.app[data-skin="run"] .item.on .item-ic{background:rgba(255,255,255,.22);opacity:1;filter:none}
.app[data-skin="run"] .item.on .box{background:#fff;border-color:#fff;color:var(--accent)}
.app[data-skin="run"] .back,.app[data-skin="run"] .parentbtn{background:#fff;border-color:var(--line);color:var(--ink)}
.app[data-skin="run"] .rewards-btn{background:var(--accent);color:#fff}
.app[data-skin="run"] .buy,.app[data-skin="run"] .cel-btn{background:var(--accent);color:#fff}
.app[data-skin="run"] .buy svg{color:#fff}
.app[data-skin="run"] .cel-card{border:0;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.app[data-skin="run"] .tag-open{background:var(--accent)}
.app[data-skin="run"] .wc.s2{background:var(--accent)}

/* ===== Trailhead: park sign boards and painted blazes ===== */
.app[data-skin="trail"]{--bg:#221811;--panel:#33261b;--card:#33261b;--ink:#f5f3ee;--muted:#c8bca8;--line:#5b4733;--track:#4f3d2c;--accent:#f2c230;--on-accent:#24170d;--good:#62d48b;--warn:#ffb340;--bad:#ff7a6b;--star:#f2c230;
--c0:#59aaff;--c1:#ff6656;--c2:#ffa13a;--c3:#4fd1a8;--on0:#1a110b;--on1:#1a110b;--on2:#1a110b;--on3:#1a110b;--fh:"Zilla Slab",serif;--fb:"Figtree",system-ui,sans-serif;--r:8px;--rs:6px;--buck:#f2c230;--on-buck:#24170d;--icbg:#44332a;--icr:8px;--pg-line:#5b4733;
background-color:var(--bg);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 2px,transparent 2px 11px)}
.app[data-skin="trail"] .brand,.app[data-skin="trail"] .tile-name,.app[data-skin="trail"] .list-title,.app[data-skin="trail"] .cel-card h2,.app[data-skin="trail"] .cols h3,.app[data-skin="trail"] .pcard h3{font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.app[data-skin="trail"] .tile-name{font-size:56px}.app[data-skin="trail"] .list-title{font-size:38px}
.app[data-skin="trail"] .item-text{font-weight:700;letter-spacing:.01em}
.app[data-skin="trail"] .tile,.app[data-skin="trail"] .item,.app[data-skin="trail"] .timecard,.app[data-skin="trail"] .pcard,.app[data-skin="trail"] .stat,.app[data-skin="trail"] .cel-card{box-shadow:inset 0 0 0 3px #33261b,inset 0 0 0 5px rgba(245,243,238,.5),0 6px 0 rgba(0,0,0,.28)}
.app[data-skin="trail"] .tile{padding:26px 30px}
.app[data-skin="trail"] .avatar{--avbg:var(--kc);--avfg:var(--onk);clip-path:none;border-radius:8px;--av:84px}
.app[data-skin="trail"] .ring{--ringbg:#4f3d2c;--ringin:#33261b}
.app[data-skin="trail"] .dchip{background:#44332a;border-radius:8px}.app[data-skin="trail"] .dchip.cur{border-color:var(--accent)}
.app[data-skin="trail"] .dc-open{border-color:var(--accent)}
.app[data-skin="trail"] .st{--starOff:#5d4a38}
.app[data-skin="trail"] .steps{justify-content:space-between;padding:4px 2px}
.app[data-skin="trail"] .stp{flex:none;width:28px;height:46px;border-radius:4px;background:#4f3d2c}
.app[data-skin="trail"] .stp.on{background:var(--kc)}
.app[data-skin="trail"] .goal{width:54px;height:54px;border-radius:50%;background:#4f3d2c;color:#7a6650;font-size:30px;padding:0}.app[data-skin="trail"] .goal.on{background:var(--accent);color:#24170d}
.app[data-skin="trail"] .drain{border-radius:3px;background:#4f3d2c}.app[data-skin="trail"] .drain span{border-radius:3px;background:var(--accent)}
.app[data-skin="trail"] .item .box{border-radius:8px;border-color:#7a6650}
.app[data-skin="trail"] .item.on{background:var(--kc);color:#1a110b}
.app[data-skin="trail"] .item.on .item-ic{background:rgba(26,17,11,.2);opacity:1;filter:none}
.app[data-skin="trail"] .item.on .box{background:#1a110b;border-color:#1a110b;color:var(--kc)}
.app[data-skin="trail"] .back,.app[data-skin="trail"] .parentbtn{border-color:var(--line);color:var(--ink)}
.app[data-skin="trail"] .tag-star,.app[data-skin="trail"] .tag-late,.app[data-skin="trail"] .tag-overdue,.app[data-skin="trail"] .wc.s3,.app[data-skin="trail"] .wc.s1,.app[data-skin="trail"] .btn.ok{color:#1a110b}
.app[data-skin="trail"] .cel-btn{background:var(--accent);color:#24170d}

/* ===== Daylight: clean and editorial ===== */
.app[data-skin="day"]{--bg:#fff;--panel:#f4f5f7;--card:#fff;--ink:#0e1014;--muted:#667085;--line:#e4e7ec;--track:#e8eaee;--accent:#0e1014;--on-accent:#fff;--good:#0b7a4d;--warn:#a85d00;--bad:#c4372f;--star:#f2a100;
--c0:#2d5bff;--c1:#e43c1c;--c2:#b86300;--c3:#00855a;--on0:#fff;--on1:#fff;--on2:#fff;--on3:#fff;--fh:"Manrope",sans-serif;--fb:"Manrope",system-ui,sans-serif;--r:18px;--rs:12px;--buck:#c58a00;--icbg:#f2f3f6;--icr:14px}
.app[data-skin="day"] .brand,.app[data-skin="day"] .tile-name,.app[data-skin="day"] .list-title,.app[data-skin="day"] .cel-card h2{font-weight:800;letter-spacing:-.035em}
.app[data-skin="day"] .tile-name{font-size:64px;letter-spacing:-.05em}.app[data-skin="day"] .list-title{font-size:46px}
.app[data-skin="day"] .brand-mark{background:var(--ink);color:#fff}
.app[data-skin="day"] .tile{background:#f6f7f9;border:1.5px solid var(--line)}
.app[data-skin="day"] .avatar{--avbg:var(--kc);--avfg:#fff;--av:64px;clip-path:none;border-radius:50%}
.app[data-skin="day"] .list-head .avatar{--av:60px}
.app[data-skin="day"] .ring{--rd:112px;--ringbg:#e3e6eb;--ringin:#f6f7f9}
.app[data-skin="day"] .ring::before{inset:9px}
.app[data-skin="day"] .ring b{font-size:30px;font-weight:800}
.app[data-skin="day"] .dchip{background:#fff;border:1.5px solid var(--line)}.app[data-skin="day"] .dchip.cur{border-color:var(--ink)}
.app[data-skin="day"] .dc-ic,.app[data-skin="day"] .item-ic{filter:grayscale(1) contrast(1.05)}
.app[data-skin="day"] .st{--starOff:#d9dce3}
.app[data-skin="day"] .stp{height:6px}
.app[data-skin="day"] .goal{font-size:28px}
.app[data-skin="day"] .timecard{background:transparent;border:0;box-shadow:none;padding:0 4px;width:250px}
.app[data-skin="day"] .tc-big{font-size:40px;letter-spacing:-.04em}
.app[data-skin="day"] .drain{height:5px}
.app[data-skin="day"] .item{border:1.5px solid var(--line)}
.app[data-skin="day"] .item-text{font-weight:700;font-size:25px;letter-spacing:-.015em}
.app[data-skin="day"] .item .box{border-color:#c9cdd6}
.app[data-skin="day"] .item.on{background:color-mix(in srgb,var(--kc) 9%,#fff);border-color:var(--kc)}
.app[data-skin="day"] .item.on .item-ic{opacity:.5}
.app[data-skin="day"] .parentbtn,.app[data-skin="day"] .back{border:1.5px solid var(--line)}
.app[data-skin="day"] .cel-card{box-shadow:0 30px 80px rgba(0,0,0,.28)}

/* ===== Sunrise, refined: quieter sky, glass panels, tighter type ===== */
.app[data-skin="sunrise"]{--panel:rgba(255,255,255,.55);--card:rgba(255,255,255,.74);--r:18px;--rs:12px;--fh:"Outfit",sans-serif;--fb:"Outfit",system-ui,sans-serif;--accent:#1d2433;--on-accent:#fff;
--c0:#3d5fc4;--c1:#c4444f;--c2:#a96d0c;--c3:#1b866e;--on0:#fff;--on1:#fff;--on2:#fff;--on3:#fff;--buck:#c58a00;--icbg:rgba(29,36,51,.07);--icr:14px;
--sky:linear-gradient(172deg,#f2cfa4 0%,#dc9488 40%,#7488b6 100%);--sky-ink:#2b1a22}
.app[data-skin="sunrise"][data-period="afternoon"]{--sky:linear-gradient(172deg,#6ea9db 0%,#b4d3e9 58%,#e7eef4 100%);--sky-ink:#0d2740}
.app[data-skin="sunrise"][data-period="dinner"]{--sky:linear-gradient(172deg,#222a5c 0%,#6a4a8c 55%,#d6805f 100%);--sky-ink:#fff}
.app[data-skin="sunrise"][data-period="night"]{--sky:linear-gradient(172deg,#0a0f2b 0%,#1a2250 100%);--sky-ink:#fff}
.app[data-skin="sunrise"] .brand,.app[data-skin="sunrise"] .tile-name,.app[data-skin="sunrise"] .list-title,.app[data-skin="sunrise"] .cel-card h2,.app[data-skin="sunrise"] .tc-big,.app[data-skin="sunrise"] .item-text{font-weight:600;letter-spacing:-.02em}
.app[data-skin="sunrise"] .tile-name{font-size:62px}.app[data-skin="sunrise"] .list-title{font-size:40px}
.app[data-skin="sunrise"] .tile,.app[data-skin="sunrise"] .item,.app[data-skin="sunrise"] .timecard,.app[data-skin="sunrise"] .stat,.app[data-skin="sunrise"] .pcard,.app[data-skin="sunrise"] .badge,.app[data-skin="sunrise"] .reward{border:1px solid rgba(255,255,255,.65);box-shadow:0 14px 40px rgba(15,18,50,.16)}
.app[data-skin="sunrise"] .avatar{--avbg:var(--kc);--avfg:#fff;--av:72px;clip-path:none;border-radius:50%}
.app[data-skin="sunrise"] .list-head .avatar{--av:62px}
.app[data-skin="sunrise"] .ring{--rd:112px;--ringbg:rgba(29,36,51,.1);--ringin:rgba(255,255,255,.9)}
.app[data-skin="sunrise"] .ring::before{inset:10px}
.app[data-skin="sunrise"] .ring b{font-weight:600;font-size:32px}
.app[data-skin="sunrise"] .dchip{background:rgba(255,255,255,.85)}
.app[data-skin="sunrise"] .dc-ic,.app[data-skin="sunrise"] .item-ic{filter:grayscale(.55)}
.app[data-skin="sunrise"] .item .box{border-color:rgba(29,36,51,.28)}
.app[data-skin="sunrise"] .item.on{background:rgba(255,255,255,.92);border-color:var(--kc)}
.app[data-skin="sunrise"] .item.on .item-ic{opacity:.5}
.app[data-skin="sunrise"] .stp{height:6px}.app[data-skin="sunrise"] .stp:not(.on){background:rgba(255,255,255,.5)}
.app[data-skin="sunrise"] .arc{height:48px;opacity:.9}
.app[data-skin="sunrise"] .tc-big{font-size:30px}
.app[data-skin="sunrise"] .rewards-btn{background:rgba(255,255,255,.9);color:#2a1d00}
.app[data-skin="sunrise"] .cel-btn{background:#1d2433;color:#fff}
/* ===== Live sky layer (Sunrise) ===== */
.sky{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:0}
.app[data-skin="sunrise"] .sky{display:block}
.ui{position:absolute;inset:0;display:flex;flex-direction:column;z-index:1;box-sizing:border-box;padding:var(--sat,0px) var(--sar,0px) 0 var(--sal,0px)} /* header clears the status bar; the bottom is NOT padded here so the scrolling stage runs to the screen edge and content scrolls behind the home bar */
.wxchip{display:none}
.app[data-skin="sunrise"] .wxchip{display:inline;color:var(--sky-ink);font-weight:600;font-size:16px}
.app[data-skin="sunrise"] .topbar,.app[data-skin="sunrise"] .hint,.app[data-skin="sunrise"] .list-head,.app[data-skin="sunrise"] .goalline{text-shadow:var(--sky-shadow,none)}
.app[data-skin="sunrise"] .list-head .back,.app[data-skin="sunrise"] .list-head .rewards-btn,.app[data-skin="sunrise"] .parentbtn{text-shadow:none}
.app[data-skin="sunrise"] .back,.app[data-skin="sunrise"] .parentbtn{background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ===== Full screen ===== */
.fsbtn{align-self:stretch;padding:0 18px;border-radius:10px;border:2px solid var(--pg-acc);background:var(--pg-acc);color:var(--pg-bg);font-weight:800;min-height:48px}
.fsfloat{display:none}
body.full{background:#000;padding:0;overflow:hidden}
body.full .wrap{position:fixed;inset:0;max-width:none;margin:0;display:grid;place-items:center;background:#000;gap:0}
body.full .holder{border-radius:0}
body.full .note,body.full .skinbar,body.full #fsBtn{display:none}
body.full .ctl{display:none;position:fixed;right:10px;bottom:46px;z-index:60;flex-direction:column;background:var(--pg-card);padding:12px;border-radius:14px;border:1px solid var(--pg-line);box-shadow:0 12px 40px rgba(0,0,0,.4)}
body.full.fs-open .ctl{display:flex}
body.full .fsfloat{display:flex;gap:6px;position:fixed;right:10px;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:61}
.fsfloat button{min-height:34px;padding:0 12px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}