/* ==========================================================================================================================
   ONE DESIGN LANGUAGE for the whole workspace. Every app uses these tokens and these motions, so everything feels like one thing:
   soft surfaces, generous space, round corners, and slow gentle movement (one curve, three speeds). Nothing snaps; nothing bounces hard.
   ========================================================================================================================== */
:root{
  --calm:cubic-bezier(.22,.8,.3,1); --ease:var(--calm);
  --t1:.16s; --t2:.28s; --t3:.5s;
  --soft:0 1px 2px rgba(0,0,0,.05),0 6px 22px rgba(0,0,0,.05);
  --lift:0 2px 4px rgba(0,0,0,.08),0 14px 34px rgba(0,0,0,.12);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--soft:0 1px 2px rgba(0,0,0,.25),0 8px 28px rgba(0,0,0,.22);--lift:0 2px 4px rgba(0,0,0,.3),0 16px 38px rgba(0,0,0,.34)}}
:root[data-theme="dark"]{--soft:0 1px 2px rgba(0,0,0,.25),0 8px 28px rgba(0,0,0,.22);--lift:0 2px 4px rgba(0,0,0,.3),0 16px 38px rgba(0,0,0,.34)}
::selection{background:color-mix(in srgb,var(--primary) 28%,transparent)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 18%,transparent) transparent}
button,a,input,select,textarea,.win{transition-timing-function:var(--calm)}
button:not(:disabled):active{transform:scale(.97)}
@keyframes uiIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes uiPop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.win .body{animation:uiIn var(--t3) var(--calm)}
.wd-pop{animation:uiPop var(--t1) var(--calm) both;border-radius:var(--r-5)!important}
.wd-pop.out{animation:wdOut .12s ease-in forwards}
#toast{animation:none}

/* ===== the check circle: the same for a task wherever it shows up ===== */
.td-chk{flex:none;width:24px;height:24px;border-radius:50%;border:1.6px solid color-mix(in srgb,var(--ink) 38%,transparent);background:none;color:transparent;display:grid;place-items:center;padding:0;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.td-chk:hover{border-color:var(--primary);color:color-mix(in srgb,var(--primary) 50%,transparent)}
.td-chk.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.td-chk.pulse{animation:tdPop .5s var(--ease)}
.td-chk.sm{width:19px;height:19px;border-width:1.4px}
@keyframes tdPop{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ===== right-click menu ===== */
.ctx{border-radius:var(--r-5)!important;padding:6px!important;box-shadow:var(--lift)!important;min-width:230px;max-height:min(560px,86vh);overflow:auto}
.ctx.in{animation:uiPop var(--t1) var(--calm) both}
.ctx button{display:flex;align-items:center;gap:12px;padding:9px 12px!important;border-radius:var(--r-3)!important;font-weight:500!important}
.ctx .cx-i{display:grid;place-items:center;width:18px;color:var(--ink2);flex:none}.ctx .cx-t{flex:1;min-width:0}
.ctx .cx-ck{display:grid;place-items:center;color:var(--primary)}
.ctx button.on{color:var(--primary)}
.ctx button.danger,.ctx button.danger .cx-i{color:var(--danger)}
.ctx .cx-h{font-size:var(--fs-1);font-weight:var(--fw-b);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding:10px 12px 4px}
.ctx hr{margin:5px 6px!important;border-top-color:color-mix(in srgb,var(--ink) 8%,transparent)!important}
.ctx-on{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 45%,transparent)}

/* ===== lock screen: password ===== */
.lk-pw{position:relative;display:flex;align-items:center;gap:8px;margin:14px auto 0;width:min(280px,80vw);background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(18px);border-radius:var(--r-pill);padding:5px 5px 5px 18px;box-shadow:var(--soft)}
.lk-pw input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs-5);color:var(--ink);padding:9px 0;letter-spacing:.08em}
.lk-pw input:focus{outline:0}
.lk-pw button{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;cursor:pointer}
.lk-pw .lk-err{position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;text-align:center;color:var(--danger);font-size:var(--fs-3)}
.lk-pw.shake{animation:lkShake .4s var(--calm,ease)}
@keyframes lkShake{20%{transform:translateX(-8px)}45%{transform:translateX(7px)}70%{transform:translateX(-4px)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* ===== quick capture ===== */
.qa{position:fixed;left:0;right:0;margin:0 auto;top:84px;z-index:2400;width:min(520px,calc(100vw - 24px));background:var(--surface);border-radius:var(--r-7);padding:10px 14px 14px;box-shadow:var(--lift);animation:uiPop var(--t2) var(--calm) both}
.qa.out{opacity:0;transform:translateY(-6px);transition:all .18s var(--calm)}
.qa-tabs{display:flex;align-items:center;gap:4px;margin-bottom:8px}.qa-tabs .sp{flex:1}
.qa-tabs button{display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--ink2);font:inherit;font-size:var(--fs-3);font-weight:var(--fw-m);padding:8px 12px;border-radius:var(--r-pill);cursor:pointer}
.qa-tabs button.on{background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary)}
.qa-tabs .qa-x{padding:8px;color:var(--ink2)}
.qa-in{width:100%;border:0;background:none;font:inherit;font-size:var(--fs-6);color:var(--ink);padding:12px 6px;resize:none;outline:0}
.qa-in::placeholder{color:var(--ink2)}
.qa-row{display:flex;align-items:center;gap:12px;padding:6px 0}.qa-row small{width:58px;color:var(--ink2);font-size:var(--fs-2);flex:none}
.qa-chips{display:flex;flex-wrap:wrap;gap:6px}
.qa-chips button{display:flex;align-items:center;gap:5px;border:0;background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink);font:inherit;font-size:var(--fs-2);padding:6px 12px;border-radius:var(--r-pill);cursor:pointer}
.qa-pick{display:flex;align-items:center;gap:4px;padding:2px 4px 2px 10px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink2);cursor:pointer}.qa-pick input{border:0;background:none;font:inherit;font-size:var(--fs-2);color:var(--ink);width:128px;outline:0;padding:4px 0}
.qa-chips button.on{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.qa-dots{display:flex;gap:8px}.qa-dots .sn-dot{width:20px;height:20px}
.qa-tags{flex:1;border:0;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:var(--r-pill);padding:8px 14px;font:inherit;font-size:var(--fs-3);color:var(--ink);outline:0}
.qa-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.qa-hint{color:var(--ink2);font-size:var(--fs-1)}
.qa-go{border:0;background:var(--primary);color:var(--on-primary);font:inherit;font-size:var(--fs-3);font-weight:var(--fw-m);padding:9px 22px;border-radius:var(--r-pill);cursor:pointer}

/* the Studio and other pages that live in a frame */
.sf-body{padding:0!important;overflow:hidden!important}.sf{width:100%;height:100%;border:0;display:block;background:transparent}

/* ===== home screen widgets ===== */
#desk .widgets{position:absolute;top:38px;left:calc(var(--wg-left,260px) - 22px);right:2px;bottom:96px;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));grid-auto-rows:92px;grid-auto-flow:dense;gap:14px;align-content:start;align-items:stretch;justify-items:stretch;overflow:auto;pointer-events:none;padding:24px 26px 36px 24px;z-index:1;scrollbar-width:none}
#desk .widgets::-webkit-scrollbar{display:none}
#desk .widgets[data-on="0"]{display:none}
.wg{grid-column:span var(--cols,1);grid-row:span var(--rows,3);pointer-events:auto;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;padding:14px 16px 12px;border-radius:var(--r-6);background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(18px) saturate(1.1);box-shadow:var(--soft);border:1px solid color-mix(in srgb,var(--line) 40%,transparent);animation:uiIn var(--t3) var(--calm) both;transition:box-shadow var(--t2) var(--calm),transform var(--t2) var(--calm),opacity var(--t2)}
.wg:hover{box-shadow:var(--lift)}
.wg.bare{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;align-items:center;justify-content:flex-start}.wg.bare:hover{box-shadow:none}
.wg.lift{opacity:.4}.wg.over{outline:2px solid var(--primary);outline-offset:2px}
.wg:nth-child(2){animation-delay:40ms}.wg:nth-child(3){animation-delay:80ms}.wg:nth-child(4){animation-delay:120ms}.wg:nth-child(5){animation-delay:160ms}.wg:nth-child(6){animation-delay:200ms}.wg:nth-child(7){animation-delay:240ms}.wg:nth-child(n+8){animation-delay:280ms}
.wg-h{display:flex;align-items:center;gap:8px;color:var(--ink2);font-size:var(--fs-2);cursor:grab;flex:none}.wg-h b{font-weight:var(--fw-m);color:var(--ink)}.wg-h .sp{flex:1}
.wg-o{border:0;background:none;color:var(--ink2);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity var(--t1)}.wg:hover .wg-o{opacity:1}.wg-o:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.wg-b{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:10px;margin:-10px}
.wg-add{width:100%;border:0;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:var(--r-pill);padding:9px 14px;font:inherit;font-size:var(--fs-3);color:var(--ink);outline:0;flex:none}
.wg-add:focus{background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 50%,transparent)}
.wg-list{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0;flex:1;scrollbar-width:none;padding:8px;margin:-8px}
.wg-t,.wg-u{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:var(--r-3);cursor:pointer;min-width:0;transition:background var(--t1)}
.wg-t:hover,.wg-u:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.wg-tt{flex:1;min-width:0;display:flex;flex-direction:column}.wg-tt b{font-weight:500;font-size:var(--fs-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wg-tt small{color:var(--ink2);font-size:var(--fs-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wg-tt small.over{color:var(--danger)}.wg-tt small.today{color:var(--primary)}
.wg-t.done .wg-tt b{text-decoration:line-through;opacity:.55}
.wg-star{color:var(--primary);display:grid}.wg-pri{flex:none;width:8px;height:8px;border-radius:50%;background:#A0A0A0}.wg-pri.red{background:#D93025}.wg-pri.yellow{background:#E7A800}.wg-pri.grey{background:#A0A0A0}
.wg-dot{flex:none;width:9px;height:9px;border-radius:50%;margin:0 5px}
.wg-empty{margin:auto;color:var(--ink2);font-size:var(--fs-2);text-align:center;line-height:1.5;padding:6px 8px}
.wg-foot{flex:none;font-size:var(--fs-1);color:var(--ink2);position:relative;padding-top:8px}.wg-foot:not(:empty)::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:linear-gradient(to right,var(--primary) var(--p,0%),color-mix(in srgb,var(--ink) 10%,transparent) var(--p,0%))}
.wg-qf{display:flex;flex-direction:column;gap:6px;flex:none}.wg-qs{display:flex;gap:6px}.wg-qs select{flex:1;min-width:0;border:0;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:var(--r-pill);padding:6px 10px;font:inherit;font-size:var(--fs-2);color:var(--ink2);outline:0}
.wg-qs .sel{flex:1;min-width:0}
.wg-sn{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;overflow:auto;min-height:0;scrollbar-width:none;align-content:start;padding:8px;margin:-8px}.wg-sn .sn{margin:0}.wg-sn .sn-body{max-height:92px;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.wg-sn .sn-body:focus{max-height:none;overflow:visible}.wg-sn .sn:focus-within{grid-column:1/-1}
.wg-snb{display:flex;gap:6px;flex:none}.wg-snb button{border:0;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font:inherit;font-size:var(--fs-2);font-weight:var(--fw-m);padding:5px 12px;border-radius:var(--r-pill);cursor:pointer}
.wg-mh{display:flex;align-items:center;gap:4px;flex:none}.wg-mh b{font-size:var(--fs-3);font-weight:var(--fw-m)}.wg-mh .sp{flex:1}.wg-mh button{border:0;background:none;color:var(--ink2);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;cursor:pointer}.wg-mh button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.wg-mg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:var(--fs-1);flex:1;min-height:0;align-content:start}
.wg-mg i.h{color:var(--ink2);font-style:normal;padding:2px 0}.wg-mg button{border:0;background:none;color:var(--ink);font:inherit;font-size:var(--fs-2);height:26px;border-radius:50%;cursor:pointer;position:relative}.wg-mg button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.wg-mg button.today{background:var(--primary);color:var(--on-primary)}.wg-mg button.ev::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--primary)}.wg-mg button.today.ev::after{background:var(--on-primary)}
.wg-fr{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1}.wg-ft{font-size:var(--fs-10);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.wg-fc{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.wg-fc select{border:0;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:var(--r-pill);padding:5px 10px;font:inherit;font-size:var(--fs-2);color:var(--ink2);outline:0}
.wg-fb{border:0;background:var(--primary);color:var(--on-primary);font:inherit;font-size:var(--fs-2);font-weight:var(--fw-m);padding:7px 18px;border-radius:var(--r-pill);cursor:pointer}.wg-fb.on{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
.wg-mr{display:flex;align-items:center;gap:12px;flex:1;min-height:0}.wg-art{position:relative;flex:none;width:54px;height:54px;border-radius:var(--r-3);background:color-mix(in srgb,var(--primary) 12%,transparent);overflow:hidden;transition:transform var(--t3) var(--calm)}.wg-art.on{transform:scale(1.06)}.wg-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wg-mt{min-width:0;display:flex;flex-direction:column}.wg-mt b{font-size:var(--fs-3);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wg-mt small{color:var(--ink2);font-size:var(--fs-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-mb{height:4px;border-radius:4px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden;flex:none}.wg-mb i{display:block;height:100%;background:var(--primary);transition:width .5s linear}
.wg-mc{display:flex;justify-content:center;gap:10px;flex:none}.wg-mc button{border:0;background:none;color:var(--ink);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer}.wg-mc button:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}.wg-mc .pp{background:var(--primary);color:var(--on-primary)}.wg-mc .pp:hover{background:var(--primary)}
.wg-pg{display:flex;flex-direction:column;gap:9px;justify-content:center;flex:1}.wg-pg div{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:var(--fs-1);color:var(--ink2)}.wg-pg b{color:var(--ink);font-weight:var(--fw-m)}.wg-pg i{grid-column:1/3;display:block;height:4px;border-radius:4px;background:linear-gradient(to right,var(--primary) var(--p),color-mix(in srgb,var(--ink) 10%,transparent) var(--p))}
.wg-st{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}.wg-st div{display:flex;flex-direction:column;justify-content:center;background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:var(--r-3);padding:6px 12px}.wg-st b{font-size:var(--fs-8);font-weight:600;line-height:1}.wg-st span{font-size:var(--fs-1);color:var(--ink2)}.wg-st .bad b{color:var(--danger)}
.wg-sb{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1}.wg-sb small{color:var(--ink2);font-size:var(--fs-1)}.wg-sb .big{font-size:var(--fs-9);font-weight:600;letter-spacing:-.01em}.wg-sb .nx{margin-top:6px}.wg-sb .nx b{color:var(--ink);font-weight:var(--fw-m)}
.wg-lb{display:flex;flex-direction:column;gap:8px;flex:1;justify-content:center}.wg-lb .b{display:flex;flex-direction:column;gap:2px}.wg-lb .b b{font-size:var(--fs-3);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wg-lb .b small{color:var(--ink2);font-size:var(--fs-1)}.wg-lb i{display:block;height:4px;border-radius:4px;margin-top:3px;background:linear-gradient(to right,var(--primary) var(--p),color-mix(in srgb,var(--ink) 10%,transparent) var(--p))}
/* settings list for widgets */
.wgs{display:flex;flex-direction:column;gap:6px;margin:12px 0}.wgs-r{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:var(--r-4);padding:8px 10px 8px 14px}.wgs-r .sp{flex:1}.wgs-i{display:grid;place-items:center;color:var(--ink2)}
.wgs-m{border:0;background:none;color:var(--ink2);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;cursor:pointer}.wgs-m:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 8%,transparent)}.wgs-m:disabled{opacity:.3}
.wgs-sw{position:relative;width:40px;height:24px;flex:none}.wgs-sw input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}.wgs-sw i{position:absolute;inset:0;border-radius:99px;background:color-mix(in srgb,var(--ink) 18%,transparent);transition:background var(--t2) var(--calm);pointer-events:none}.wgs-sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--t2) var(--calm)}.wgs-sw input:checked+i{background:var(--primary)}.wgs-sw input:checked+i::after{transform:translateX(16px)}
/* phones: widgets sit below the icons and scroll */
@media (max-width:760px){#desk .widgets{display:grid;left:12px;right:12px;top:var(--wg-top,330px);bottom:104px;grid-template-columns:1fr 1fr;grid-auto-rows:84px;gap:10px}.wg{grid-column:span 2;grid-row:span var(--rows,3)}.wg:is([data-w=clock],[data-w=progress],[data-w=stats],[data-w=subs],[data-w=library],[data-w=studio]){grid-column:span 1}}
.wg.bare .wclock{width:190px;height:190px}.wg.bare .wclock .h{font-size:var(--fs-12)}

.wg .sel{padding:6px 12px!important;font-size:var(--fs-2)!important;min-height:0!important;border-radius:var(--r-pill)!important}
#desk .widgets{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}

/* top-bar music pill */
.mpill{display:inline-flex;align-items:center;gap:8px;max-width:210px;cursor:pointer}
.mpill[hidden]{display:none}
.mpill .mp-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mpill .mp-f{font-variant-numeric:tabular-nums;color:var(--primary);font-weight:var(--fw-m)}.mpill .mp-f:empty{display:none}
.mp-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}.mp-eq i{width:3px;height:4px;border-radius:2px;background:var(--primary);transition:height var(--t2) var(--calm)}
.mpill.on .mp-eq i{animation:mpEq 1s var(--calm) infinite alternate}.mpill.on .mp-eq i:nth-child(2){animation-delay:.25s}.mpill.on .mp-eq i:nth-child(3){animation-delay:.5s}
@keyframes mpEq{from{height:3px}to{height:12px}}
@media (prefers-reduced-motion:reduce){.mpill.on .mp-eq i{animation:none;height:8px}}
@media (max-width:760px){.mpill .mp-t{display:none}}