[hidden]{display:none!important}
/* Layout: dark app shell; nav on the left, home tiles or player on top, cover grid below. */
:root{
  color-scheme:dark;
  --bg:#09090b; --surface:#1c1c21; --raise:#28282f; --raise2:#36363f; --paper:#121216; --ink:#f5f5f7; --muted:#a3a3ad;
  --line:#383842; --accent:#ff8a4c; --hot:#ff4f8b; --accent-ink:#1a0c04; --brass:#f5c451;
  --good:#5fd39a; --scrim:rgba(0,0,0,.42); --dot:rgba(12,12,16,.82); --dot-off:rgba(12,12,16,.16);
  --on:#f7f7f9; --g1:#f5c451; --g2:#ff8a4c; --g3:#ff4f8b;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Light mode is opt-in from Account; dark stays the default look */
:root[data-mode="light"]{
  color-scheme:light;
  --bg:#f1f1f4; --surface:#ffffff; --raise:#e7e7ed; --raise2:#d4d4de; --paper:#f9f9fb; --ink:#15151a; --muted:#5c5c69;
  --line:#d2d2dc; --accent:#ea580c; --hot:#db2777; --brass:#a16207; --good:#15803d;
}
:root[data-mode="light"] .brand .lgD{display:none}:root[data-mode="light"] .brand .lgL{display:block}
:root[data-mode="light"] .tag.lvl{background:#1e1e24;color:#f5c451}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
.app{--sideW:248px;--mainW:1120px;padding-left:var(--sideW)}
/* Sidebar fixed to the left edge; every view uses the same content width. */
.side{position:fixed;left:0;top:0;bottom:0;width:var(--sideW);padding:24px 18px 24px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;border-right:1px solid var(--line);background:var(--bg);z-index:20}
body.admin-bar .side{top:32px}
.brand{margin:0;padding-left:14px;line-height:0}
.brand img{display:block;height:30px;width:auto;max-width:100%}.brand .lgL{display:none}
#nav{display:flex;flex-direction:column;gap:4px}
#nav button{background:transparent;text-align:left;padding:10px 14px;border-radius:12px;color:var(--muted);white-space:nowrap}
#nav button:hover{background:var(--surface);color:var(--ink)}
#nav button:disabled{opacity:.45;cursor:default;background:transparent;color:var(--muted)}
#nav button[aria-pressed="true"]{background:var(--raise);color:var(--ink)}
.note{color:var(--muted);font-size:13px;margin:0}
.side .note{padding-left:14px}
main{display:flex;flex-direction:column;gap:30px;min-width:0;width:100%;max-width:var(--mainW);margin:0 auto;padding:24px 32px 56px}
@media (max-width:900px){
  .app{padding-left:0}
  main{padding:12px 16px 56px}
  .side{position:static;width:auto;padding:16px 16px 0;border-right:0;overflow:visible;gap:10px}.brand,.side .note{padding-left:0}
  #nav{flex-direction:row;overflow-x:auto;padding-bottom:4px}
}

.stage{background:var(--surface);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:18px;min-width:0}
.head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.head h2{font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1.1;margin:0;text-wrap:balance}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--raise);border-radius:999px;padding:3px 11px}
.tag.lvl{color:var(--brass)}
.social{display:flex;gap:6px;align-items:center}
.social button{min-width:40px}
#score{font-size:17px;font-weight:800;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}

button,select,input{font:inherit;color:inherit}
button{background:var(--raise);border:0;border-radius:999px;padding:9px 15px;cursor:pointer;font-weight:600}
button:hover{background:var(--raise2)}
button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.sheet{color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:16px;position:relative}
.sheetbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 0;gap:10px}
.beats{display:flex;gap:7px;align-items:center}
.beats i{width:11px;height:11px;border-radius:50%;background:var(--raise2);display:block}
.beats i.on{background:var(--accent)}
#phase{font-size:12.5px;color:var(--muted);font-weight:600}
.scroll{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--raise2) transparent}
.opts{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.secs{flex-wrap:wrap;align-items:center}
.opts .fl{width:70px}
.leadN{font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.leadN input{width:56px}
.leadN.off{opacity:.45}
/* Steppers replace the browser's number spinners; same height as the option chips so rows never change size */
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stp{display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 3px;border-radius:999px;background:var(--raise);vertical-align:middle}
.stp button{width:24px;height:24px;padding:0;border-radius:50%;background:var(--raise2);font-size:15px;line-height:1;display:grid;place-items:center;flex:none}
.stp button:hover{background:var(--line)}
.stp input[type=number]{width:36px;height:100%;padding:0;border:0;border-radius:0;background:transparent;text-align:center;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.stp input[type=number]:focus-visible{outline:0}
.stp:has(:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.stp button:focus-visible{outline:0}
.secs{min-height:30px}
.fl.fw{width:62px}
.tbtns{display:flex;gap:8px;flex-wrap:wrap}
#stopBtn{padding:17px 24px;font-weight:800;font-size:17px}
canvas{display:block}
.sbR{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#fsBtn,#fsPlay,#clipBtn{padding:5px 13px;font-size:13px}
/* Clip mode: a clean 9:16 frame of the notation for screen recordings */
.clipHead,.clipFoot{display:none}
.sheet.fs.clip{left:50%;right:auto;width:min(100vw,calc(100vh*9/16));transform:translateX(-50%);box-shadow:0 0 0 100vmax #000;padding-block:26px 18px;cursor:pointer}
.sheet.clip .clipHead{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 20px;text-align:center}
.clipHead .lg{background:#09090b;border-radius:12px;padding:9px 13px;line-height:0}
.clipHead img{height:30px;width:auto;display:block}
.clipHead h3{margin:6px 0 0;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.clipHead .tags{justify-content:center;margin:0}
.clipHead .tag.lvl{background:#1e1e24}
.clipTempo{display:flex;align-items:baseline;gap:8px}
.clipTempo b{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.sheet.clip .sheetbar{justify-content:center;padding-top:14px}
.sheet.clip .sbR{display:none}
.sheet.clip .clipFoot{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 20px 0;text-align:center}
.clipCap{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.2;outline:0;min-height:1.2em;cursor:text;max-width:100%;overflow-wrap:anywhere}
.clipHint{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:600}
.clipHint button{padding:4px 11px;font-size:12px}
.sheet.clip.live .clipHint{visibility:hidden}
.sheet.fs{position:fixed;inset:0;z-index:50;border:0;border-radius:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet.fs .scroll{flex:1;min-height:0;display:flex;flex-direction:column}
.sheet.fs canvas{margin-block:auto;flex:none}

.transport{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
@media (max-width:560px){.transport{grid-template-columns:minmax(0,1fr)}}
#play{background:linear-gradient(120deg,var(--g1),var(--g2) 45%,var(--g3));color:var(--accent-ink);font-weight:800;font-size:19px;padding:17px 36px;min-width:150px}
#play:hover{filter:brightness(1.1)}
.tempo{display:flex;flex-direction:column;gap:8px;min-width:0}
.tempoRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#bpmVal{font-weight:800;font-size:50px;letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums;min-width:2.4ch;text-align:center}
.unit{font-size:13px;color:var(--muted);font-weight:700}
.step{width:40px;height:40px;font-size:20px;padding:0}
#bpm{width:100%}
input[type=range],input[type=checkbox]{accent-color:var(--accent)}

.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
fieldset{border:0;background:var(--paper);border-radius:16px;padding:16px;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
legend{float:left;width:100%;padding:0;font-weight:800;font-size:15px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row label{display:flex;align-items:center;gap:8px}
input[type=number],select{padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--raise)}
input[type=number]{width:66px;font-variant-numeric:tabular-nums}
input[type=checkbox]{width:17px;height:17px}
#autoStatus{font-size:13px;color:var(--muted);min-height:1.4em}
kbd{font-family:inherit;font-size:12px;background:var(--raise);border-radius:6px;padding:1px 6px}

.lib{display:flex;flex-direction:column;gap:14px;min-width:0}
.lib h3{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0}
#list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;list-style:none;margin:0;padding:0}
#list button{width:100%;background:transparent;border-radius:16px;padding:8px;text-align:left;display:flex;flex-direction:column;gap:8px}
#list button:hover{background:var(--surface)}
.cover{aspect-ratio:1;max-width:100%;border-radius:12px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
#list button[aria-current="true"] .cover{outline:2px solid var(--ink);outline-offset:2px}
.cover b{font-size:12px;font-weight:700;background:var(--scrim);color:var(--on);border-radius:999px;padding:3px 10px}
.grid{display:grid;grid-template-columns:repeat(16,1fr);gap:3px 2px;width:100%}
.grid i{aspect-ratio:1;border-radius:50%;background:var(--dot-off)}
.grid i.on{background:var(--dot)}
#list .t{font-weight:700;line-height:1.25}
#list .dl{font-size:12.5px;font-weight:700;display:flex;flex-direction:column;gap:4px}
#list .dl em{display:block;height:4px;border-radius:99px;background:var(--raise2);overflow:hidden}
#list .dl i{display:block;height:100%;border-radius:99px}
#list .m{font-size:12.5px;color:var(--muted);font-weight:500}
.empty{color:var(--muted);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.empty p{margin:0}
.ctop{display:flex;gap:5px;align-items:center;width:100%}
.cover{color:var(--accent-ink)}
.cover .mk{background:var(--bg);color:var(--good);margin-left:auto;width:24px;height:24px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:13px}
.pct strong{display:block;font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1}
.pct small{display:block;font-size:12.5px;font-weight:800;margin-top:3px}
#hideM,.featSel button{padding:10px 16px}
.featSel{display:flex;flex-direction:column;gap:6px}.featSel>span{font-size:12px;color:var(--muted);font-weight:600}.featSel>div{display:flex;gap:8px;flex-wrap:wrap}
#mast[aria-pressed="true"]{background:var(--good);color:var(--bg)}
.stage #mast:disabled{opacity:.8;color:var(--muted);font-variant-numeric:tabular-nums}
.filters{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end}
.sel{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--muted);flex:0 1 190px;min-width:140px}
.msel{position:relative}.msel>button{width:100%;padding:10px 12px;border-radius:12px;background:var(--raise);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;text-align:left;display:flex;justify-content:space-between;gap:8px;white-space:nowrap;overflow:hidden}
.msel>button span{overflow:hidden;text-overflow:ellipsis}.msel>button::after{content:"▾";opacity:.7}
.msel .menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.msel .menu label{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.msel .menu label:hover{background:var(--raise)}.msel .menu input{accent-color:var(--accent);width:16px;height:16px}
.sel select{width:100%;padding:10px 12px;border-radius:12px;background:var(--raise);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.frow{display:flex;gap:10px;align-items:baseline;min-width:0}
.fl{font-size:13px;font-weight:700;color:var(--muted);width:44px;flex:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.chips button{padding:5px 13px;font-size:13.5px}
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:18px}
.pager button{padding:8px 13px;min-width:40px;border-radius:10px;background:var(--surface);color:var(--ink);font-weight:700}
.pager button[aria-current="page"]{background:var(--ink);color:var(--bg)}
.pager button:disabled{opacity:.4;cursor:default}.pager span{color:var(--muted);padding:0 4px}.pager .pinfo{margin-left:auto;font-size:13px}
#count{margin-left:auto;white-space:nowrap;align-self:center}
@media (max-width:560px){.frow{flex-wrap:wrap}.fl{width:100%}#count{margin-left:0;width:100%}.sel{flex:1 1 140px}}
.home{display:flex;flex-direction:column;gap:18px;min-width:0}
.hello{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:0;text-wrap:balance}
.groups{display:flex;flex-direction:column;gap:26px}
.grp h3{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.grp .tiles.five{grid-template-columns:repeat(5,minmax(0,1fr))}@media (max-width:1100px){.grp .tiles.five{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:560px){.grp .tiles.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.grp3 .tiles{grid-template-columns:1fr}
@media (max-width:760px){.grp3{grid-template-columns:1fr}}
.tiles .wide{grid-column:span 2;background:linear-gradient(120deg,var(--g1),var(--g2) 45%,var(--g3));color:var(--accent-ink)}
@media (max-width:560px){.tiles .wide{grid-column:1/-1}}
.tiles .wide .bar{display:block;width:100%;height:8px;border-radius:99px;background:rgba(0,0,0,.18);overflow:hidden}.tiles .wide .bar i{display:block;height:100%;background:rgba(0,0,0,.55);border-radius:99px}
.tiles .wide .c{background:rgba(0,0,0,.16);color:inherit}
.hubNote{margin:-6px 0 4px;color:var(--muted)}
#nav .navLab{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.7;padding:12px 14px 4px}
#nav button.sub{padding-left:26px}
@media (max-width:900px){#nav .navLab{display:none}#nav button.sub{padding-left:14px}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tiles button{border-radius:22px;padding:20px;min-height:158px;width:100%;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:18px;align-items:flex-start;color:var(--on);transition:transform .15s}
.tiles button:not(:disabled):hover{transform:translateY(-3px);filter:brightness(1.1)}
.tiles button:disabled{background:var(--surface);color:var(--muted);cursor:default}
.tiles .n{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1;display:block}
.tiles .d{font-size:14px;font-weight:500;display:block;margin-top:6px;opacity:.9}
.tiles .c{font-size:12.5px;font-weight:700;background:var(--scrim);border-radius:999px;padding:4px 11px}
.tiles button:disabled .c{background:var(--raise)}
#back{align-self:flex-start}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tiles button{padding:15px;min-height:150px;border-radius:18px}.tiles .n{font-size:19px}.tiles .d{font-size:13px}.hello{font-size:28px}}
@media (prefers-reduced-motion:reduce){.tiles button{transition:none}}
#banner{width:100%;border-radius:22px;padding:22px;text-align:left;display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:linear-gradient(120deg,var(--g1),var(--g2) 45%,var(--g3));color:var(--accent-ink)}
#banner:hover{filter:brightness(1.07)}
.hero{border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(120deg,var(--g1),var(--g2) 45%,var(--g3));color:var(--accent-ink)}
.hero h2,#banner .n{font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:0}
.hero p{margin:0;font-weight:600;max-width:60ch}
.wk{font-size:13px;font-weight:800}
.bar{height:8px;border-radius:99px;background:var(--scrim);width:100%;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:currentColor;border-radius:99px;transition:width .2s linear}
.chall{display:flex;flex-direction:column;gap:18px;min-width:0}
.chMeta{display:flex;gap:14px 28px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.days{display:flex;gap:6px;align-items:center}
.days i{width:26px;height:26px;border-radius:50%;background:var(--raise);color:var(--muted);font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center}
.days i.on{background:var(--good);color:var(--bg)}
.days i.today{outline:2px solid var(--muted);outline-offset:1px}
#chTasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#chTasks li{background:var(--surface);border-radius:18px;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center}
.tk{display:flex;flex-direction:column;gap:5px;min-width:0;align-items:flex-start}
.tk b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.tk .g{color:var(--muted);font-size:14px}
.tk .s{font-size:13px;font-weight:700;color:var(--muted)}
.tk .s.ok{color:var(--good)}
#chTasks .go{background:var(--ink);color:var(--bg);padding:11px 22px}
@media (max-width:560px){#chTasks li{grid-template-columns:minmax(0,1fr)}}
.chp{background:var(--paper);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.chTop{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.chTop b{font-size:17px;font-weight:800}
#chLive{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.chp .bar{background:var(--raise2);color:var(--accent)}
#chResult{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#chMsg{margin:0;font-weight:700}
.rate{display:flex;gap:8px;flex-wrap:wrap}
.stage button:disabled,.stage input:disabled{opacity:.4;cursor:default}
.stage fieldset:disabled{opacity:.45}
/* Account, points, calendar, badges */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.pick{border-radius:14px;padding:10px;background:var(--paper);border:2px solid transparent;text-align:left;display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:0}
.pick:hover{background:var(--raise)}
.pick[aria-pressed="true"]{background:var(--raise);color:var(--ink);border-color:var(--ink)}
.pick b{font-size:14px;font-weight:800}
.pick span{font-size:12px;color:var(--muted);line-height:1.35;font-weight:500}
.pick .sw{height:46px;border-radius:8px;display:block}
.acct{display:flex;flex-direction:column;gap:18px;min-width:0}
.card{background:var(--surface);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em}
.acHead{display:flex;gap:16px;align-items:center}
.avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3));color:var(--accent-ink);display:grid;place-items:center;font-size:28px;font-weight:800;flex:none}
.acWho{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.acWho h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
.acWho .tags{margin:0}
.rankbar{background:var(--raise2);color:var(--brass);max-width:380px}
.wallet,.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.coin{background:var(--surface);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;min-width:0}
.coin svg{width:34px;height:34px;flex:none}
.coin b,.stat b{font-size:26px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;display:block;letter-spacing:-.02em}
.coin span,.stat span{font-size:12.5px;color:var(--muted);font-weight:600}
.c0{color:var(--ink)}.c1{color:var(--brass)}.c2{color:var(--accent)}.c3{color:var(--hot)}
.stat{background:var(--surface);border-radius:16px;padding:14px;min-width:0}
.acCols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.more{margin-top:12px;padding:8px 14px;border-radius:999px;border:0;background:var(--raise2);color:var(--ink);font:600 13px Manrope,Arial,sans-serif;cursor:pointer}.more:hover{filter:brightness(1.15)}
.calHead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.calNav{display:flex;align-items:center;gap:8px;font-size:14px}
.calNav button{width:32px;height:32px;padding:0;font-size:17px}
.calGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calGrid .wd{font-size:11.5px;color:var(--muted);font-weight:700;text-align:center;padding:2px 0}
.calGrid button{aspect-ratio:1;border-radius:10px;padding:2px;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:13px;font-weight:700;color:var(--muted);min-width:0}
.calGrid button.q{background:var(--raise);color:var(--ink)}
.calGrid button.today{outline:2px solid var(--muted);outline-offset:-2px}
.calGrid button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.calGrid .dots{display:flex;gap:2px;height:5px}
.calGrid .dots i{width:5px;height:5px;border-radius:50%}
.legend{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:600}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
#dayBody ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
#dayBody li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
#dayBody li span{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#dayBody p{margin:0;color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bdg{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--paper);min-width:0}
.bdg .md{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--accent-ink)}
.bdg.off .md{background:var(--raise2);color:var(--muted)}
.bdg.off b{color:var(--muted)}
.bdg b{font-size:14px;line-height:1.25}
.bdg span{font-size:12px;color:var(--muted);line-height:1.35}
.bdg em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hstrip{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center;width:100%;text-align:left;border-radius:16px;padding:12px 16px;background:var(--surface);font-size:14px;font-weight:600;color:var(--muted)}
.hstrip b{color:var(--ink);font-weight:800}
.adslot{border:1px dashed var(--line);border-radius:14px;padding:14px;text-align:center;color:var(--muted);font-size:13px;font-weight:600}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;z-index:70;max-width:calc(100% - 32px);text-align:center}
.sampleNote{background:var(--raise);border-radius:14px;padding:10px 14px;margin:0;font-size:13.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sampleNote button{background:var(--raise2);padding:6px 12px;font-size:13px}
input[type=text]{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--raise);width:100%}
.plan ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.plan b{font-size:20px;font-weight:800}
/* Page scrollbar: space is always reserved, so the layout never shifts when the scrollbar appears; slim and dark to match. */
html{scrollbar-gutter:stable;background:var(--bg);scrollbar-width:thin;scrollbar-color:var(--raise2) transparent}
html::-webkit-scrollbar{width:10px}html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:var(--raise2);border-radius:99px;border:2px solid var(--bg)}

/* Roomier spacing on computer screens; phones keep the compact sizes. */
@media (min-width:901px){
  .app{--sideW:272px;--mainW:1240px}
  body{font-size:16px}
  main{gap:40px;padding:38px 48px 80px}
  .side{padding:32px 22px;gap:28px}
  .brand img{height:34px}
  #nav{gap:6px}#nav button{padding:12px 16px;font-size:16px}#nav button.sub{padding-left:30px}
  .hello{font-size:40px}
  .groups{gap:36px}.grp h3{font-size:14px;margin-bottom:16px}
  .tiles{gap:18px}.tiles button{min-height:182px;padding:24px;border-radius:24px}.tiles .n{font-size:27px}.tiles .d{font-size:15px}
  .grp3{gap:18px}
  .lib{gap:20px}.lib h3{font-size:26px}
  #list{grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:18px}
  .hstrip{padding:16px 22px;font-size:15px}
  .stage{padding:28px;gap:24px}
  .pager{margin-top:24px}
}

/* ---------- Accounts ---------- */
button.pri,.row .pri{background:var(--ink);color:var(--bg)}
.who{display:flex;flex-direction:column;gap:8px;padding:0 14px}.who b{font-size:15px}.who .tag{align-self:flex-start}.who .tag.prem{background:var(--accent);color:var(--accent-ink)}
.who button{width:100%}
@media (max-width:900px){.who{flex-direction:row;flex-wrap:wrap;align-items:center;padding:0}.who button{width:auto}}
.ctop .pr{background:rgba(0,0,0,.72)!important;color:#ffd166!important}
#play.locked{background:var(--raise2);color:var(--ink)}
.acct:not(.guest) .acGuest{display:none}.acct.guest>*:not(.acGuest){display:none!important}
.gate{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px}
.gate[hidden]{display:none}
.gateBox{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.gateBox h3{margin:0;font-size:24px;letter-spacing:-.02em}.gateBox p{margin:0;color:var(--muted)}.gateBox .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.gateX{position:absolute;top:12px;right:12px;width:34px;height:34px;padding:0;font-size:20px;line-height:1}
/* Forms from Paid Member Subscriptions inside the app */
.authv{background:var(--surface);border-radius:22px;padding:28px;max-width:560px;width:100%;display:flex;flex-direction:column;gap:14px}
.authv h2{margin:0;font-size:30px;letter-spacing:-.03em}
.authv form{display:block}.authv form>*+*{margin-top:14px}
.authv label{font-weight:600;font-size:14px;color:var(--muted);display:block;margin-bottom:5px}
.authv input[type=text],.authv input[type=email],.authv input[type=password],.authv input[type=tel],.authv select,.authv textarea{width:100%;padding:11px 13px;border-radius:12px;background:var(--raise);border:1px solid var(--line);color:var(--ink);font:inherit}
.authv input[type=submit],.authv button[type=submit],.authv .pms-submit,.authv .button{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:11px 20px;font:inherit;font-weight:700;cursor:pointer}
.authv a{color:var(--ink)}.authv ul{padding-left:18px}.authv table{width:100%;border-collapse:collapse}.authv td,.authv th{padding:8px;border-bottom:1px solid var(--line);text-align:left}
.authv .authLinks{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}

/* PMS ships its own colours; inside the app the form follows the app theme. */
.authv label,.authv legend,.authv .pms-field label,.authv h3,.authv h4,.authv p,.authv li,.authv span{color:var(--ink)!important}
.authv label{color:var(--muted)!important;font-weight:600!important}
.authv input[type=text],.authv input[type=email],.authv input[type=password],.authv input[type=tel],.authv select,.authv textarea{background:var(--raise)!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:12px!important;box-shadow:none!important}
.authv input:focus,.authv select:focus{outline:2px solid var(--accent)!important;outline-offset:1px}
.authv input[type=submit],.authv button[type=submit],.authv .pms-submit,.authv .button{background:var(--ink)!important;color:var(--bg)!important;border:0!important;border-radius:999px!important;padding:12px 22px!important;font-weight:700!important;width:auto!important}
.authv a{color:var(--ink)!important}
.socialLogin{display:flex;flex-direction:column;gap:8px}
.orLine{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:4px 0}.orLine::before,.orLine::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Auth forms v2: higher specificity than PMS / Nextend, which load their own CSS after ours ---------- */
#authView input[type=submit],#authView button[type=submit],#authView .pms-submit,#authView .button,#authView .button-primary{
  background:var(--ink)!important;color:var(--bg)!important;border:0!important;border-radius:999px!important;padding:12px 26px!important;
  font:700 15px var(--body)!important;text-shadow:none!important;box-shadow:none!important;cursor:pointer;width:auto!important;height:auto!important;line-height:1.2!important}
#authView input[type=submit]:hover,#authView button[type=submit]:hover{filter:brightness(.9)}
#authView .login-register-lost-password,#authView .pms-login-links{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--muted)!important}
#authView .login-register-lost-password *{display:inline!important;margin:0!important}
/* Nextend also adds its buttons inside the login form; the app shows one set above the form instead. */
#authView form .nsl-container,#authView form .nsl-container-block{display:none!important}
/* "Continue with Google" in the app style */
#authView .socialLogin .nsl-container{display:block!important;margin:0!important;padding:0!important}
#authView .socialLogin .nsl-container-buttons{display:flex!important;flex-direction:column!important;gap:10px!important;padding:0!important;max-width:none!important}
#authView .socialLogin a{text-decoration:none!important;display:block!important;margin:0!important;max-width:none!important;width:100%!important}
#authView .socialLogin .nsl-button{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;width:100%!important;max-width:none!important;
  background:var(--raise)!important;border:1px solid var(--line)!important;border-radius:999px!important;box-shadow:none!important;padding:11px 18px!important;color:var(--ink)!important;transition:background .15s}
#authView .socialLogin .nsl-button:hover{background:var(--raise2)!important}
#authView .socialLogin .nsl-button-svg-container{display:grid!important;place-items:center!important;width:26px!important;height:26px!important;flex:none!important;padding:0!important;margin:0!important;background:#fff!important;border-radius:50%!important}
#authView .socialLogin .nsl-button-svg-container svg{width:16px!important;height:16px!important}
#authView .socialLogin .nsl-button-label-container{color:var(--ink)!important;font:700 15px var(--body)!important;margin:0!important;padding:0!important;line-height:1.2!important;text-align:left!important}
#authView .socialLogin .nsl-button-label-container b{font-weight:700!important;color:inherit!important}
/* PMS forces white text on its submit button with a very specific selector; this one is stronger, and
   -webkit-text-fill-color wins over any "color" rule in every current browser. */
html body #authView form input[type=submit],html body #authView form button[type=submit],html body #authView form .button-primary,html body #authView form .pms-submit{
  background:var(--ink)!important;color:var(--bg)!important;-webkit-text-fill-color:var(--bg)!important;opacity:1!important}
/* Space between "Register | Lost your password?" whatever markup PMS uses */


/* ---------- Top bar and menu on phones ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu{display:contents}
.menuBtn{display:none}
@media (max-width:900px){
  .side{position:sticky;top:0;z-index:40;padding:12px 16px;gap:0;border-bottom:1px solid var(--line);transition:transform .25s ease}
  .side.hide:not(.open){transform:translateY(-100%)}
  .brand img{height:28px}
  .menuBtn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;margin-right:-8px;background:transparent;border-radius:12px}
  .menuBtn span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
  .side.open .menuBtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .side.open .menuBtn span:nth-child(2){opacity:0}
  .side.open .menuBtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu{display:none;position:fixed;left:0;right:0;top:var(--barB,69px);bottom:0;flex-direction:column;gap:20px;padding:16px 16px calc(28px + env(safe-area-inset-bottom));background:var(--bg);overflow-y:auto;overscroll-behavior:contain}
  html.menuOpen{overflow:hidden}
  .side.open #nav button{font-size:18px;padding:12px 14px}.side.open #nav button.sub{padding-left:30px}
  .side.open .menu{display:flex}
  #nav{flex-direction:column;overflow:visible;padding-bottom:0;gap:2px}
  #nav .navLab{display:block}
  #nav button.sub{padding-left:28px}
  .who{flex-direction:column;align-items:stretch;padding:0 14px}.who button{width:100%}
  .side .note{padding-left:14px}
}
@media (min-width:601px) and (max-width:782px){body.admin-bar .side{top:46px}}
@media (min-width:783px) and (max-width:900px){body.admin-bar .side{top:32px}}
@media (max-width:600px){body.admin-bar .side{top:0}}
/* "Register | Lost your password?" under the login form */
#authView .sep{display:inline-block;margin:0 10px;color:var(--muted)}

.brand a{display:inline-block;line-height:0;border-radius:8px}
/* Phones: Mastered sits on the same row as Back */
@media (max-width:900px){
  .stage{position:relative}
  .stage #mast{position:absolute;top:20px;right:20px;white-space:nowrap;max-width:calc(100% - 150px);overflow:hidden;text-overflow:ellipsis}
}

/* ---------- Profile banner in the menu ---------- */
.who .meCard{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:16px;background:var(--surface);text-align:left;color:var(--ink)}
.who .meCard:hover{background:var(--raise)}
.meAv{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:18px;color:var(--accent-ink);background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3))}
.meTx{display:flex;flex-direction:column;gap:5px;min-width:0}
.meTx b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meTags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.meTags .tag{font-size:11.5px;padding:2px 9px}
.meRank{font-size:12px;font-weight:700;color:var(--brass)}
.who{padding:0}
@media (min-width:901px){.side .who{padding:0}}

/* ---------- Pricing ---------- */
.prem{display:flex;flex-direction:column;gap:22px;align-items:center}
.pHead{text-align:center;max-width:620px}.pHead h2{font-size:36px;font-weight:800;letter-spacing:-.03em;margin:0 0 8px}
.pBill{display:inline-flex;gap:4px;background:var(--surface);border-radius:999px;padding:4px}
.pBill button{border-radius:999px;background:transparent;color:var(--muted);padding:9px 18px}
.pBill button[aria-pressed="true"]{background:var(--raise2);color:var(--ink)}
.pBill em{font-style:normal;color:var(--good);font-weight:800;margin-left:4px}
.pGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;max-width:820px}
.pCard{background:var(--surface);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pCard>button{margin-top:auto}
.pPro{position:relative;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--g1),var(--g2),var(--g3)) border-box;border:2px solid transparent}
.pName{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pPro .pName{color:var(--accent)}
.pPrice{display:flex;align-items:baseline;gap:6px}.pPrice b{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}.pPrice span{color:var(--muted)}
.plist{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:9px}
.plist li{position:relative;padding-left:26px}
.plist li:before{content:"";position:absolute;left:2px;top:.35em;width:13px;height:7px;border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);transform:rotate(-45deg)}
.pMore{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pFine{max-width:620px;text-align:center}
@media (max-width:700px){.pGrid{grid-template-columns:1fr}.pPro{order:-1}.pHead h2{font-size:28px}}
/* Stripe card form: no white box around it (containers transparent; iframe keeps the page's dark colour scheme). */
#authView iframe{color-scheme:dark;background:transparent!important}:root[data-mode="light"] #authView iframe{color-scheme:light}
#authView [id*="stripe" i],#authView [class*="stripe" i],#authView [class*="StripeElement"],#authView .pms-paygate-extra-fields,#authView .pms-credit-card-information{background:transparent!important;box-shadow:none!important;border:0!important;padding-left:0!important;padding-right:0!important}
.who .meCard[aria-pressed="true"]{background:var(--raise);box-shadow:inset 0 0 0 1px var(--line)}