/* Site styles */
:root{--bg:#f3f5fb;--card:#fff;--text:#1c2333;--muted:#6b7487;--line:#e6e9f2;--pri:#5b5bf0;--pri2:#8a5cf6;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--shadow:0 4px 20px #1c233314}
@media(prefers-color-scheme:dark){:root{--bg:#0f1220;--card:#181c2e;--text:#eef0f8;--muted:#9aa3bb;--line:#272d45;--shadow:0 4px 20px #0006}}
*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}
.wrap{max-width:820px;margin:auto;padding:16px}
/* auth */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.auth .box{background:var(--card);width:100%;max-width:400px;border-radius:18px;padding:32px 28px;box-shadow:var(--shadow)}
.logo{font-size:34px;text-align:center}.auth h1{text-align:center;margin:4px 0 2px;font-size:24px}.sub{text-align:center;color:var(--muted);margin:0 0 20px}
.alt{text-align:center;margin-top:18px;color:var(--muted)}.alt a{color:var(--pri);font-weight:600;text-decoration:none;cursor:pointer}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:12px 0 4px}
input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}
input:focus{outline:2px solid var(--pri);border-color:transparent}input:disabled{opacity:.6}
button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;background:var(--pri);color:#fff;transition:.15s}
button:hover{filter:brightness(1.1)}button:disabled{opacity:.4;cursor:not-allowed}
button.full{width:100%;margin-top:18px;padding:12px;background:linear-gradient(135deg,var(--pri),var(--pri2))}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}button.ok{background:var(--ok)}button.bad{background:var(--bad)}button.sm{padding:6px 12px;font-size:13px}
/* app */
nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--card);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);margin-bottom:16px}
nav .who{display:flex;flex-direction:column;line-height:1.2}nav small{color:var(--muted)}
.pill{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-radius:99px;padding:6px 14px;font-weight:700}
.card{background:var(--card);border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;font-size:17px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}.row:first-of-type{border-top:0}
.row small{color:var(--muted);display:block}
.tag{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--line);color:var(--muted);white-space:nowrap}
.tag.Approved,.tag.Active{background:#16a34a22;color:var(--ok)}.tag.Pending{background:#d9770622;color:var(--warn)}.tag.Rejected,.tag.Done{background:#dc262622;color:var(--bad)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:520px){.grid{grid-template-columns:1fr}}
pre{margin:8px 0 0;padding:10px 12px;background:var(--bg);border:1px dashed var(--line);border-radius:10px;white-space:pre-wrap;word-break:break-all;font-size:13px}
.empty{color:var(--muted);padding:8px 0}

.shell{display:flex;min-height:100vh}
.side{width:240px;background:var(--card);padding:18px 12px;box-shadow:var(--shadow);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.brand{font-weight:800;font-size:18px;padding:6px 12px 16px}
.mi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;color:var(--text);padding:11px 12px}
.mi:hover{background:var(--bg);filter:none}.mi.on{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff}
.mi .bd2{margin-left:auto;background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:1px 8px}
.main{flex:1;min-width:0;padding:16px 20px;max-width:1000px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:16px}.top h2{margin:0;flex:1;font-size:22px}
.burger{display:none}.bellw{position:relative}
.bell{position:relative;background:var(--card);color:var(--text);border:1px solid var(--line);font-size:18px;padding:8px 12px}
.bd{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:1px 6px}
.drop{position:absolute;right:0;top:48px;width:310px;max-width:85vw;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:8;max-height:360px;overflow:auto}
.note{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}.note:hover{background:var(--bg)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column}
.stat b{font-size:28px}.stat span{color:var(--muted);font-size:13px}.stat.warn b{color:var(--warn)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.chip{background:var(--bg);color:var(--muted);border:1px solid var(--line);padding:6px 14px;font-size:13px}.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)}
@media(max-width:760px){.side{position:fixed;left:-260px;z-index:7;transition:.25s}.side.open{left:0}.burger{display:inline-block}.stats{grid-template-columns:1fr 1fr}.main{padding:12px}}
.stats.s3{grid-template-columns:repeat(3,1fr)}.tag.Available{background:#16a34a22;color:var(--ok)}.tag.Taken{background:#dc262622;color:var(--bad)}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:sticky;bottom:0;z-index:5;background:var(--card);margin:10px -18px -18px;padding:12px 18px;border-top:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:0 -6px 14px #1c23330d}.ck{width:auto;margin:0;transform:scale(1.25)}.selall{display:flex;gap:8px;align-items:center;margin:0;color:var(--muted);font-weight:600;font-size:13px}
textarea,select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}.mbox{background:var(--card);border-radius:16px;padding:22px;width:100%;max-width:440px;max-height:90vh;overflow:auto}
.hero{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-radius:16px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow)}
.hero small{opacity:.85}.hero h1{margin:2px 0 0;font-size:38px}.hero h1 span{font-size:16px;font-weight:500;opacity:.85}button.light{background:#fff;color:var(--pri)}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card.plan{display:flex;flex-direction:column;margin:0;transition:.2s}.plan:hover{transform:translateY(-3px)}.plan h3{margin:10px 0 2px;font-size:18px}.plan button{margin-top:auto}
.price{font-size:28px;font-weight:800}.price span{font-size:13px;font-weight:500;color:var(--muted)}
.av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));flex-shrink:0}.av.big{width:52px;height:52px;font-size:22px}
.subhead{display:flex;align-items:center;gap:12px}.subhead small{display:block;color:var(--muted)}
.pbar{height:8px;background:var(--line);border-radius:9px;margin:14px 0;overflow:hidden}.pbar i{display:block;height:100%;background:var(--ok);border-radius:9px}.pbar i.w{background:var(--warn)}
.cred{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px 12px}.cred code{word-break:break-all;font-size:13px}
.sec{margin:20px 0 10px;font-size:17px}.pill2{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-radius:99px;padding:7px 14px;font-weight:700;white-space:nowrap}
#ld{position:fixed;inset:0;background:#f3f5fb4d;z-index:50;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;overflow:hidden}
#ld.on{opacity:1;visibility:visible}
@media(prefers-color-scheme:dark){#ld{background:#0f12204d}}
.gline{position:absolute;left:0;right:0;top:50%;height:3px;opacity:.35;background:repeating-linear-gradient(90deg,var(--pri) 0 14px,transparent 14px 30px);animation:gl .45s linear infinite}
@keyframes gl{to{background-position:-30px 0}}
.runwrap{position:absolute;top:calc(50% - 120px);left:calc((100% - 130px)*var(--p,0));width:130px;text-align:center;transition:left .12s linear}
#ld.fin .runwrap{transition:left .45s cubic-bezier(.3,.7,.4,1)}#ld.nt .runwrap{transition:none}
.runner{width:130px;height:130px;color:var(--pri);overflow:visible;display:block}
.runner line,.runner circle{stroke:currentColor;stroke-width:4.5;stroke-linecap:round;fill:none}.runner circle{fill:currentColor}
.runner .a2,.runner .l2{opacity:.5}
.bob{animation:bob .4s ease-in-out infinite}
.leg{transform-origin:50px 56px;animation:th .8s linear infinite}.calf{transform-origin:50px 72px;animation:ca .8s linear infinite}
.arm{transform-origin:50px 32px;animation:ar .8s ease-in-out infinite}
.l2,.a2{animation-delay:-.4s}.l2 .calf{animation-delay:-.4s}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes th{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(40deg)}}
@keyframes ca{0%,25%{transform:rotate(5deg)}50%{transform:rotate(60deg)}75%{transform:rotate(100deg)}100%{transform:rotate(5deg)}}
@keyframes ar{0%,100%{transform:rotate(45deg)}50%{transform:rotate(-45deg)}}
.lm{margin-top:2px;font-weight:700;font-size:14px;color:var(--pri)}
@media(prefers-reduced-motion:reduce){.runner *,.gline{animation:none!important}}
.dlg{position:fixed;inset:0;z-index:70;background:#0b0f1f88;backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;animation:fin .18s}.dlg.out{opacity:0;transition:.18s}
.dbox{background:var(--card);border-radius:20px;padding:28px 24px 22px;width:100%;max-width:380px;text-align:center;box-shadow:0 20px 60px #0005;animation:pop .25s cubic-bezier(.2,.9,.3,1.3)}
.dic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:30px;margin:0 auto 12px;background:#5b5bf022}.dic.bad{background:#dc262622}
.dbox h3{margin:0 0 6px;font-size:19px}.dbox p{margin:0 0 20px;color:var(--muted)}.dbox p b{color:var(--text)}
.dbt{display:flex;gap:10px}.dbt button{flex:1;padding:11px}
@keyframes fin{from{opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.85)}}
#toast{position:fixed;bottom:20px;right:20px;z-index:80;display:flex;flex-direction:column;gap:10px;width:min(370px,calc(100vw - 32px));pointer-events:none}
.tst{pointer-events:auto;position:relative;display:flex;align-items:center;gap:12px;background:var(--card);color:var(--text);border-radius:14px;padding:13px 38px 16px 14px;box-shadow:0 10px 30px #1c233333;border:1px solid var(--line);border-left:5px solid var(--ok);overflow:hidden;animation:tin .35s cubic-bezier(.2,.9,.3,1.2)}
.tst.error{border-left-color:var(--bad)}.tst.info{border-left-color:var(--pri)}.tst.out{animation:tout .25s forwards}
.ti{font-size:22px}.tb{display:flex;flex-direction:column;line-height:1.35}.tb b{font-size:14px}.tb span{font-size:13px;color:var(--muted)}
.tx{position:absolute;top:6px;right:8px;background:none;color:var(--muted);padding:2px 6px;font-size:20px;line-height:1}.tx:hover{filter:none;color:var(--text)}
.tp{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ok);animation:drain 5s linear forwards}.tst.error .tp{background:var(--bad)}.tst.info .tp{background:var(--pri)}
@keyframes tin{from{opacity:0;transform:translateX(40px)}}@keyframes tout{to{opacity:0;transform:translateX(40px)}}@keyframes drain{to{width:0}}
@media(prefers-reduced-motion:reduce){.tst,.dbox,.dlg,.tp{animation:none}}

/* ---- cute cat skin (used when #ld has class skin-cute) ---- */
.cat{display:none;width:150px;height:125px;overflow:visible}
.skin-cute .cat{display:block}.skin-cute .runner{display:none}
.skin-cute .runwrap{width:150px;top:calc(50% - 115px);left:calc((100% - 150px)*var(--p,0))}
.skin-cute .gline{height:6px;margin-top:-1px;opacity:.75;background:radial-gradient(circle,#ff9bb3 2.6px,transparent 3px) 0 0/22px 6px repeat-x;animation:gd .5s linear infinite}
.skin-cute .lm{color:#e0628a}
.cbob{animation:cb .3s ease-in-out infinite alternate}.cleg{animation:cl .6s linear infinite}.cleg.lB{animation-delay:-.3s}
.tail{animation:tw .45s ease-in-out infinite alternate}
.puff{transform-box:fill-box;transform-origin:center;animation:pf .6s linear infinite;opacity:0}.puff.pb{animation-delay:-.3s}
.ht{animation:fl 1.2s ease-out infinite;opacity:0}.ht.h2{animation-delay:-.6s}
@keyframes gd{to{background-position:-22px 0}}
@keyframes cb{to{transform:translateY(-4px)}}
@keyframes cl{0%,100%{transform:rotate(30deg)}50%{transform:rotate(-30deg)}}
@keyframes tw{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
@keyframes pf{0%{opacity:.8;transform:translateX(0) scale(.5)}100%{opacity:0;transform:translateX(-18px) scale(1.5)}}
@keyframes fl{0%{opacity:0;transform:translateY(6px)}30%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.cat *{animation:none!important}}

/* ---- sleeping cat skin (used when #ld has class skin-sleep) ---- */
.sleepcat{display:none;width:150px;height:125px;overflow:visible}
.skin-sleep .sleepcat{display:block}.skin-sleep .runner,.skin-sleep .cat,.skin-sleep .gline{display:none}
.skin-sleep .runwrap{width:150px;top:calc(50% - 90px);left:calc(50% - 75px);transition:none}
.skin-sleep .lm{color:#8a7bd8}
.sbody{transform-origin:74px 92px;animation:br 2.4s ease-in-out infinite}
@keyframes br{50%{transform:scaleY(1.06)}}
.eo,.ex,.brst{opacity:0}
.eo{display:none}
.bubw{transform:scale(calc(.12 + var(--p,0)*1.25));transition:transform .12s linear}
.bubb{transform-box:fill-box;transform-origin:right center;animation:bw 1.6s ease-in-out infinite}
@keyframes bw{50%{transform:scale(1.07)}}
.zz{animation:zf 2.4s ease-in-out infinite;opacity:0}.zz.z2{animation-delay:.8s}.zz.z3{animation-delay:1.6s}
@keyframes zf{0%{opacity:0;transform:translate(-6px,8px)}30%{opacity:1}100%{opacity:0;transform:translate(8px,-10px)}}
/* pop */
.pop .bubw{animation:bp .18s ease-out forwards}
@keyframes bp{to{opacity:0;transform:scale(1.7)}}
.pop .brst{animation:bu .45s ease-out forwards}
@keyframes bu{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.4)}}
/* wake */
.wake .ec,.wake .zz{display:none}.wake .eo{display:block;opacity:1}
.wake .sbody{animation:none}.wake .sc{animation:st .45s cubic-bezier(.2,.9,.3,1.3)}
.wake .mo{d:path("M32 80 q3 3 6 0")}
.wake .ex{animation:ex 1s ease-out forwards}
@keyframes st{0%{transform:translateY(0)}35%{transform:translateY(-12px)}100%{transform:translateY(0)}}
@keyframes ex{0%{opacity:0;transform:translateY(6px) scale(.6)}25%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sleepcat *{animation:none!important}.bubw{transition:none}}


/* =====================================================================
   POLISH LAYER — tokens, states, accessibility, responsive fixes
   ===================================================================== */
:root{color-scheme:light dark;--ease:cubic-bezier(.2,.8,.2,1);--ring:0 0 0 3px #5b5bf040;--pri-soft:#5b5bf014;--shadow:0 1px 2px #1c23330d,0 6px 20px #1c23330d}
@media(prefers-color-scheme:dark){:root{--ring:0 0 0 3px #8a8cff55;--pri-soft:#8a8cff1f;--shadow:0 1px 2px #0006,0 8px 24px #0004}}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
h1,h2,h3{letter-spacing:-.015em}
#app:focus{outline:none}
.skip{position:fixed;left:12px;top:-64px;z-index:100;background:var(--card);color:var(--text);padding:9px 16px;border-radius:10px;font-weight:600;text-decoration:none;box-shadow:var(--shadow);transition:top .15s}
.skip:focus{top:12px}

/* focus & form controls */
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pri);box-shadow:var(--ring)}
input,textarea,select{transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239aa3bb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
textarea{resize:vertical;min-height:84px}
.ck{accent-color:var(--pri);cursor:pointer}

/* buttons */
button{transition:filter .15s,background .15s,color .15s,border-color .15s,box-shadow .15s,transform .1s}
button:active:not(:disabled){transform:translateY(1px)}
button.ghost:hover{background:var(--bg);color:var(--text);filter:none}
button.full:hover{box-shadow:0 6px 18px #5b5bf055}
button:disabled{opacity:.45}

/* sidebar */
.side{height:100dvh;box-shadow:none;border-right:1px solid var(--line)}
.brand{letter-spacing:-.01em}
.mi{border-radius:10px;font-weight:500;transition:background .15s,color .15s,box-shadow .15s}
.mi:not(.on):hover{background:var(--pri-soft);filter:none}
.mi.on{font-weight:600;box-shadow:0 4px 14px #5b5bf044}
.mi .bd2{min-width:20px;text-align:center;font-weight:700;line-height:18px;padding:0 6px}
.mi.on .bd2{background:#fff;color:var(--pri)}

/* top bar, bell, notifications */
.main{margin-inline:auto;padding:22px 28px 48px}
.top{margin-bottom:20px}.top h2{font-size:24px;letter-spacing:-.02em}
.bell{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:12px}
.bell:hover{background:var(--bg);border-color:#5b5bf066;filter:none}
.bd{border:2px solid var(--card);min-width:20px;text-align:center;font-weight:700;line-height:15px;padding:1px 5px;top:-8px;right:-8px}
.drop{width:350px;top:calc(100% + 8px);border-radius:14px;box-shadow:0 14px 44px #1c233336;transform-origin:top right;animation:dropin .16s var(--ease)}
.note{padding:12px 16px;line-height:1.4;transition:background .12s}.note:last-child{border-bottom:0}.note:hover{background:var(--pri-soft)}
.drop .empty{padding:22px 16px}
@keyframes dropin{from{opacity:0;transform:translateY(-6px) scale(.98)}}

/* cards & stats */
.card,.stat,nav{border:1px solid var(--line)}
.card h3{letter-spacing:-.01em}
.stat{gap:2px;transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}
.stat:hover{transform:translateY(-2px);border-color:#5b5bf055;box-shadow:0 10px 28px #5b5bf01f}
.stat b{font-size:30px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font-weight:500}
.stats.s3 .stat:last-child:nth-child(odd){grid-column:auto}

/* filter chips */
.chip{border-radius:99px;font-weight:600;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.chip:not(.on):hover{background:var(--pri-soft);color:var(--text);filter:none}
.chip.on{box-shadow:0 2px 10px #5b5bf044}

/* list rows */
.row{padding:14px 8px;transition:background .12s}
.row:hover{background:var(--pri-soft)}.row:has(.ck:checked){background:var(--pri-soft)}
.row b{font-weight:600}.row small{margin-top:2px}

/* status tags: dot + colour so state isn't colour-only */
.tag{display:inline-flex;align-items:center;gap:6px;letter-spacing:.01em}
.tag.Available::before,.tag.Active::before,.tag.Approved::before,.tag.Pending::before,.tag.Rejected::before,.tag.Taken::before,.tag.Done::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* action bar, empty state, modals */
.bar{gap:10px;backdrop-filter:saturate(1.2) blur(6px)}.selall{cursor:pointer;user-select:none}
.empty{text-align:center;padding:30px 12px}
.modal{backdrop-filter:blur(3px)}.mbox{border:1px solid var(--line);box-shadow:0 20px 60px #0004;animation:pop .22s var(--ease)}
.auth .box{border:1px solid var(--line);animation:pop .3s var(--ease)}
.dbox{border:1px solid var(--line)}
.tst.hold .tp{animation-play-state:paused}
#ld.on{cursor:progress}

/* burger */
.burger{width:40px;height:40px;padding:0;border-radius:10px;background:var(--card);color:var(--text);border:1px solid var(--line);font-size:18px}

/* responsive */
@media(max-width:760px){
  .main{padding:14px 14px 36px}
  .top h2{font-size:21px}
  .stats.s3{grid-template-columns:1fr 1fr}
  .stats.s3 .stat:last-child:nth-child(odd){grid-column:1/-1}
  .side{box-shadow:var(--shadow)}
  .side.open{box-shadow:0 0 0 100vmax #0b0f1f66,var(--shadow)}   /* dimmed backdrop, click-outside closes (core.js) */
  .drop{position:fixed;left:12px;right:12px;top:72px;width:auto;max-width:none}
}
@media(max-width:420px){.stats,.stats.s3{grid-template-columns:1fr}.stat b{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* =====================================================================
   KAWAII LAYER — pastel sticker UI. Sits on top of everything above and
   keeps every existing class name, so the JS-rendered screens restyle as is.
   ===================================================================== */
:root{--ink:#3b2f2f;--ink2:#6a5860;--edge:#3b2f2f;--pink:#ff9bb3;--lav:#d9cdfd;--mint:#bdeed6;--butter:#ffe58a;--sky:#c6e6ff;--coral:#ff8d8d;--dot:#ffdce8;
--bg:#fff5f9;--card:#fff;--text:#3b2f2f;--muted:#7a6870;--line:#f6d9e4;--line2:#efc3d3;--pri:#c93a73;--pri2:#8b6fe0;--ok:#1e9e62;--bad:#d93b5b;
--pri-soft:#ff9bb31f;--ring:0 0 0 4px #ff9bb366;--shadow:0 4px 0 var(--line2);
--f1:"Nunito",ui-rounded,"SF Pro Rounded","Varela Round",system-ui,-apple-system,"Segoe UI",sans-serif;
--f2:"Fredoka","Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#1d1730;--card:#2a2243;--text:#fdeef4;--muted:#c2b3d3;--line:#3d3360;--line2:#4d4175;--pri:#ff9bb3;--pri2:#b7a4ff;--edge:#0e0a1a;--dot:#271f3f;--ring:0 0 0 4px #ff9bb355;--shadow:0 4px 0 #120d20}}

/* base + type */
body{font-family:var(--f1);font-size:16px;background-color:var(--bg);background-image:radial-gradient(var(--dot) 1.6px,transparent 1.9px);background-size:24px 24px}
h1,h2,h3,.brand,.price,.stat b,.pill,.pill2,.lm{font-family:var(--f2)}
h1,h2,h3{letter-spacing:0}
::selection{background:var(--pink);color:var(--ink)}
*{scrollbar-color:var(--line2) transparent}
.top h2{font-size:26px}.card h3{font-size:18px}

/* forms */
input,textarea,select{border:2px solid var(--line2);border-radius:16px;padding:11px 15px}
select{padding-right:38px}
input:focus,textarea:focus,select:focus{border-color:var(--pri);box-shadow:var(--ring)}
label{font-weight:700;margin:14px 0 5px}

/* sticker buttons */
button{font-family:var(--f2);font-weight:600;font-size:15px;letter-spacing:.01em;border:2px solid var(--edge);border-radius:99px;padding:9px 18px;background:var(--pink);color:var(--ink);box-shadow:0 3px 0 var(--edge)}
button:hover{filter:none;transform:translateY(-1px);box-shadow:0 4px 0 var(--edge)}
button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
button:disabled,button:disabled:hover{box-shadow:none;transform:none}
button:focus-visible{outline:3px solid var(--pri);outline-offset:3px}
button.full{background:linear-gradient(135deg,#ffb3c7,#cdbcff);padding:12px;font-size:16px}
button.full:hover{box-shadow:0 4px 0 var(--edge)}
button.ghost{background:var(--card);color:var(--text);border-color:var(--line2);box-shadow:0 3px 0 var(--line2)}
button.ghost:hover{background:var(--card);color:var(--text);box-shadow:0 4px 0 var(--line2)}
button.ok{background:var(--mint)}button.bad{background:var(--coral)}button.light{background:#fff;color:var(--ink)}
button.sm{padding:5px 13px;font-size:13px}

/* menu items + toast close are buttons without the sticker look */
.mi,.tx{border:0;box-shadow:none;border-radius:16px;font-family:var(--f1);background:transparent}
.tx{border-radius:99px}
.mi:hover,.mi:active:not(:disabled),.tx:hover,.tx:active:not(:disabled){transform:none;box-shadow:none}
.mi.on{background:var(--pink);color:var(--ink);box-shadow:inset 0 0 0 2px var(--edge),0 3px 0 var(--edge)}
.mi .bd2{background:#ff6b8b;color:var(--ink)}.mi.on .bd2{background:var(--ink);color:#fff}

/* chips */
.chip{background:var(--card);color:var(--text);border-color:var(--line2);box-shadow:none;font-size:13px;padding:6px 14px}
.chip:hover{box-shadow:none;transform:none}
.chip.on{background:var(--pink);color:var(--ink);border-color:var(--edge);box-shadow:0 3px 0 var(--edge)}

/* top bar + bell */
.bell,.burger{background:var(--card);color:var(--text);border:2px solid var(--edge);border-radius:16px;box-shadow:0 3px 0 var(--edge)}
.bell:hover{border-color:var(--edge)}
.bd{background:#ff6b8b;color:var(--ink);border-color:var(--edge)}
.drop{border:2px solid var(--edge);border-radius:20px;box-shadow:0 6px 0 var(--edge)}

/* surfaces */
nav,.card,.stat{border:2px solid var(--line)}
nav{border-radius:22px}
.card{border-radius:22px;padding:20px}
.side{border:0;border-right:2px solid var(--line)}
.brand{font-size:21px}.brand::after{content:"♥";color:var(--pri);margin-left:6px;font-size:.75em}
.pill,.pill2{background:var(--butter);color:var(--ink);border:2px solid var(--edge);box-shadow:0 2px 0 var(--edge)}
.bar{border-radius:0 0 20px 20px;border-top:2px dashed var(--line2);margin:10px -20px -20px;padding:12px 20px}
.row{border-top:2px dashed var(--line)}
.empty::before{content:"(◕‿◕)";content:"(◕‿◕)" / "";display:block;font-size:24px;color:var(--pri);margin-bottom:6px}

/* status tags: pastel fills, dark text */
.tag{background:var(--lav);color:#4b3a8f;font-weight:800}
.tag.Approved,.tag.Active,.tag.Available{background:#c6f1dc;color:#0f6b3a}
.tag.Pending{background:#fff0b8;color:#8a5300}
.tag.Rejected,.tag.Done,.tag.Taken{background:#ffd3dc;color:#a3153f}

/* stat tiles */
.stat{border:2px solid var(--edge);border-radius:20px;box-shadow:0 4px 0 var(--edge);color:var(--ink)}
.stat:nth-child(4n+1){background:#ffd6e3}.stat:nth-child(4n+2){background:#e4dcff}.stat:nth-child(4n+3){background:#cff3e0}.stat:nth-child(4n+4){background:#d3ecff}
.stat span{color:var(--ink2);font-weight:700}
.stat.warn{background:#fff0b8}.stat.warn b{color:#8a5300}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffc2d4,#dccdff 55%,#bfe3ff);color:var(--ink);border:2.5px solid var(--edge);border-radius:28px;box-shadow:0 6px 0 var(--edge);padding:26px 28px}
.hero>*{position:relative;z-index:1}
.hero small,.hero h1 span{opacity:1;color:var(--ink2)}.hero h1{font-size:40px}
.hero::before,.hero::after{position:absolute;z-index:0;color:#fff;pointer-events:none}
.hero::before{content:"✦";content:"✦" / "";right:24%;top:10px;font-size:26px}
.hero::after{content:"♥";content:"♥" / "";right:-6px;bottom:-16px;font-size:92px;opacity:.55}

/* plan cards = the memorable thing: pastel stickers */
.plans{gap:16px}
.card.plan{border:2.5px solid var(--edge);border-radius:26px;box-shadow:0 5px 0 var(--edge);color:var(--ink)}
.plan:nth-child(5n+1){background:#ffd6e3}.plan:nth-child(5n+2){background:#e4dcff}.plan:nth-child(5n+3){background:#cff3e0}.plan:nth-child(5n+4){background:#fff0b8}.plan:nth-child(5n+5){background:#d3ecff}
.plan h3{font-size:20px;color:var(--ink)}.price{font-size:30px}.plan .price{color:var(--ink)}.plan .price span,.plan small,.plan p{color:var(--ink2)}
.plan button{background:#fff}
@media(hover:hover){.plan:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 9px 0 var(--edge)}.stat:hover{transform:translateY(-3px);border-color:var(--edge);box-shadow:0 7px 0 var(--edge)}}

/* avatar, progress, credentials */
.av{border-radius:50%;background:var(--lav);color:var(--ink);border:2px solid var(--edge);box-shadow:0 2px 0 var(--edge)}
.pbar{height:16px;border:2px solid var(--edge);background:var(--card);border-radius:99px}
.pbar i{background:repeating-linear-gradient(135deg,#7fdcae 0 9px,#a6ebc7 9px 18px);border-radius:0 99px 99px 0}
.pbar i.w{background:repeating-linear-gradient(135deg,#ffb35c 0 9px,#ffd08f 9px 18px)}
.cred,pre{border:2px dashed var(--pink);border-radius:16px}

/* dialogs + toasts */
.mbox,.dbox{border:2.5px solid var(--edge);border-radius:28px;box-shadow:0 8px 0 var(--edge)}
.dic{background:var(--lav);border:2px solid var(--edge)}.dic.bad{background:#ffd3dc}
.tst{border:2px solid var(--edge);border-left-width:8px;border-left-color:var(--ok);border-radius:20px;box-shadow:0 4px 0 var(--edge)}

/* sign in / sign up */
.auth{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffc2d4,#dccdff 55%,#bfe3ff)}
.auth::before,.auth::after{position:absolute;color:#fff;opacity:.75;pointer-events:none}
.auth::before{content:"✦";content:"✦" / "";top:9%;left:11%;font-size:48px}
.auth::after{content:"♥";content:"♥" / "";bottom:8%;right:12%;font-size:72px}
.auth .box{position:relative;z-index:1;border:2.5px solid var(--edge);border-radius:30px;box-shadow:0 8px 0 var(--edge)}
.logo{width:72px;height:72px;margin:0 auto 6px;display:grid;place-items:center;border-radius:50%;background:var(--butter);border:2px solid var(--edge);box-shadow:0 3px 0 var(--edge)}
.auth h1{font-size:28px}
.alt a{color:var(--pri);text-decoration:underline dotted 2px;text-underline-offset:4px}

/* loader */
#ld{background:#fff5f94d}
.lm{font-size:15px}.skin-sleep .lm{color:#6a58c0}.skin-cute .lm{color:#c2336a}
@media(prefers-color-scheme:dark){
  .auth{background:linear-gradient(135deg,#4a2f58,#2f2858 55%,#243a63)}
  #ld{background:#1d17304d}.skin-sleep .lm{color:#c4b5ff}.skin-cute .lm{color:#ff9bb3}
}

/* fixes found while reading the JS */
.stat.info{background:#e4dcff}.stat.ok{background:#cff3e0}.stat.bad{background:#ffd6e3}
button.burger{padding:0;border-color:var(--edge);box-shadow:0 3px 0 var(--edge)}
button.burger:hover{box-shadow:0 4px 0 var(--edge)}
.plan button{background:#fff;color:var(--ink);border-color:var(--edge);box-shadow:0 3px 0 var(--edge)}
.plan button:hover{box-shadow:0 4px 0 var(--edge)}.plan button:disabled{box-shadow:none}