:root{
  --bg:#060606;--s1:#101010;--s2:#181818;--s3:#222;
  --bd:#2c2c2c;--bd2:#383838;
  --tx:#eeeee8;--t2:#aaa;--t3:#666;--t4:#3a3a3a;
  --lime:#c9f03e;--lbg:rgba(201,240,62,.09);--lbd:rgba(201,240,62,.25);
  --amber:#f59e0b;--green:#34d399;--blue:#60a5fa;--red:#f87171;
  --r:15px;--rs:9px;
  --ff:'Manrope',sans-serif;--fd:'Barlow Condensed',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--tx);font-family:var(--ff);font-size:16px;line-height:1.5;min-height:100dvh;overflow-x:hidden}
#app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateX(30px);transition:opacity .28s ease,transform .28s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg)}
.screen.on{opacity:1;pointer-events:all;transform:none;position:relative}
.screen.out{opacity:0;transform:translateX(-30px)}

.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);font-weight:700;margin-bottom:7px}
.bigtitle{font-family:var(--fd);font-size:52px;font-weight:800;line-height:.95;letter-spacing:.5px;margin-bottom:8px}

.btn{background:var(--lime);color:var(--bg);border:none;border-radius:var(--r);padding:17px 20px;font-family:var(--ff);font-size:15px;font-weight:700;cursor:pointer;width:100%;transition:transform .13s;letter-spacing:.01em}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.3;pointer-events:none}
.btn-ghost{background:transparent;color:var(--t3);border:1px solid var(--bd2);border-radius:var(--r);padding:14px 20px;font-family:var(--ff);font-size:13px;cursor:pointer;width:100%;transition:background .14s}
.btn-ghost:active{background:var(--s2)}
.btn-icon{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:15px;cursor:pointer;color:var(--t2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--s1);border:1px solid var(--bd2);border-radius:100px;padding:4px 11px;font-size:11px;color:var(--t2)}
.pill.hi{background:var(--lbg);border-color:var(--lbd);color:var(--lime)}
.pill.blue{background:rgba(96,165,250,.08);border-color:rgba(96,165,250,.25);color:var(--blue)}

/* FORM */
.num-wrap{background:var(--s1);border:2px solid var(--bd2);border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;gap:8px;transition:border-color .2s;margin-bottom:10px}
.num-wrap:focus-within{border-color:var(--lime)}
.num-wrap input{flex:1;background:transparent;border:none;outline:none;font-family:var(--fd);font-size:52px;font-weight:700;color:var(--tx);min-width:0;letter-spacing:1px}
.num-wrap input::placeholder{color:var(--t4)}
.num-unit{font-size:18px;color:var(--t3)}
.tip-box{background:var(--s1);border:1px solid var(--bd);border-radius:var(--rs);padding:12px 14px;font-size:12px;color:var(--t2);line-height:1.65;display:flex;gap:9px;align-items:flex-start}
.tip-icon{font-size:16px;flex-shrink:0;margin-top:1px}

/* OPTS */
.opts{display:flex;flex-direction:column;gap:8px}
.opt{background:var(--s1);border:2px solid var(--bd);border-radius:var(--r);padding:14px 15px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .17s;user-select:none}
.opt:active{transform:scale(.985)}
.opt.on{border-color:var(--lime);background:var(--lbg)}
.opt-ico{font-size:20px;flex-shrink:0;width:28px;text-align:center}
.opt-txt{flex:1}
.opt-lbl{font-size:14px;font-weight:600;line-height:1.2}
.opt-sub{font-size:11px;color:var(--t3);margin-top:2px}
.chk{width:20px;height:20px;border-radius:50%;border:2px solid var(--bd2);flex-shrink:0;position:relative;transition:all .17s}
.chk.sq{border-radius:6px}
.opt.on .chk{background:var(--lime);border-color:var(--lime)}
.opt.on .chk::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:var(--bg);transform:translate(-50%,-50%)}
.opt.on .chk.sq::after{width:9px;height:6px;border-radius:0;background:none;border-left:2.5px solid var(--bg);border-bottom:2.5px solid var(--bg);transform:translate(-50%,-65%) rotate(-45deg)}

/* ARCH */
.arch-row{display:flex;gap:8px}
.arch-c{flex:1;background:var(--s1);border:2px solid var(--bd);border-radius:var(--r);padding:12px 6px 11px;cursor:pointer;text-align:center;transition:all .17s;user-select:none}
.arch-c:active{transform:scale(.97)}
.arch-c.on{border-color:var(--lime);background:var(--lbg)}
.arch-svg{height:44px;display:flex;justify-content:center;align-items:flex-end;margin-bottom:7px}
.arch-lbl{font-size:12px;font-weight:700}
.arch-sub{font-size:10px;color:var(--t3);margin-top:2px}

/* QUIZ */
.q-head{padding:52px 22px 0;position:sticky;top:0;background:var(--bg);z-index:10}
.prog{height:2px;background:var(--s3);border-radius:2px;overflow:hidden;margin-bottom:16px}
.prog-fill{height:100%;background:var(--lime);border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.q-meta{font-size:10px;color:var(--t4);letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:5px}
.q-err{font-size:12px;color:var(--amber);text-align:center;min-height:14px}

/* ═══════════════════════════════════════
   LANDING
═══════════════════════════════════════ */
#s-land{justify-content:flex-end}
.land-inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px 26px 18px;position:relative}
.land-glow{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(201,240,62,.06) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-56%);pointer-events:none}
.logo-mark{width:72px;height:72px;background:var(--lime);border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:0 0 48px rgba(201,240,62,.22);z-index:1;position:relative}
.land-title{font-family:var(--fd);font-size:68px;font-weight:800;line-height:.92;text-align:center;margin-bottom:11px;z-index:1;position:relative}
.land-title b{color:var(--lime)}
.land-sub{font-size:14px;color:var(--t2);text-align:center;max-width:280px;line-height:1.7;margin-bottom:22px}
.db-status{display:flex;align-items:center;gap:7px;background:var(--s1);border:1px solid var(--bd2);border-radius:100px;padding:7px 14px;font-size:11px;color:var(--t2);margin-bottom:20px}
.db-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.db-dot.ok{background:var(--lime);box-shadow:0 0 7px var(--lime)}
.db-dot.err{background:var(--red)}
.db-dot.loading{background:var(--amber);animation:pulse 1s ease-in-out infinite}
.method-label{font-size:10px;color:var(--t4);letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:8px;text-align:center}
.method-row{display:flex;gap:8px;width:100%;max-width:320px}
.method-btn{flex:1;background:var(--s1);border:2px solid var(--bd);border-radius:14px;padding:14px 8px;cursor:pointer;text-align:center;transition:all .17s;display:flex;flex-direction:column;align-items:center;gap:4px;user-select:none}
.method-btn:active{transform:scale(.97)}
.method-btn.on{border-color:var(--lime);background:var(--lbg)}
.method-ico{font-size:22px}
.method-lbl{font-size:12px;font-weight:700;line-height:1.2}
.method-sub{font-size:10px;color:var(--t3);line-height:1.3}
.land-foot{padding:16px 22px 44px;display:flex;flex-direction:column;gap:9px}

/* ═══════════════════════════════════════
   SCAN PREP — between phases
═══════════════════════════════════════ */
#s-prep{align-items:stretch;justify-content:center}
.prep-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px 28px 24px;text-align:center}

/* Phase stepper */
.phase-stepper{display:flex;align-items:center;gap:0;margin-bottom:36px}
.phase-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.phase-circle{width:40px;height:40px;border-radius:50%;border:2px solid var(--bd2);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:18px;font-weight:700;color:var(--t4);transition:all .3s;position:relative;z-index:1}
.phase-circle.done{background:var(--lime);border-color:var(--lime);color:var(--bg)}
.phase-circle.active{background:transparent;border-color:var(--lime);color:var(--lime);box-shadow:0 0 16px rgba(201,240,62,.3)}
.phase-line{height:2px;flex:1;margin-top:-28px;z-index:0}
.phase-line.done{background:var(--lime)}
.phase-line.pending{background:var(--bd)}
.phase-lbl{font-size:10px;color:var(--t4);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:2px;transition:color .3s}
.phase-lbl.active{color:var(--lime)}
.phase-lbl.done{color:var(--t2)}

.prep-icon{width:110px;height:110px;border-radius:28px;background:var(--s1);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-size:54px}
.prep-title{font-family:var(--fd);font-size:44px;font-weight:800;line-height:.95;margin-bottom:10px}
.prep-desc{font-size:14px;color:var(--t2);line-height:1.7;max-width:300px;margin:0 auto 28px}
.prep-steps{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;text-align:left;width:100%;max-width:320px;display:flex;flex-direction:column;gap:10px}
.prep-step-row{display:flex;gap:11px;align-items:flex-start}
.prep-step-num{width:22px;height:22px;border-radius:6px;background:var(--s3);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:13px;font-weight:700;color:var(--t3);flex-shrink:0;margin-top:1px}
.prep-step-txt{font-size:12px;color:var(--t2);line-height:1.55}
.prep-step-txt strong{color:var(--tx)}
.prep-foot{padding:16px 24px 48px;display:flex;flex-direction:column;gap:9px}

/* ═══════════════════════════════════════
   CAMERA ACTIVE
═══════════════════════════════════════ */
#s-scan{overflow:hidden}
.cam-wrap{position:relative;flex:1;background:#000;overflow:hidden;min-height:0;display:flex;flex-direction:column}
#cam-video{width:100%;height:100%;object-fit:cover;display:block;flex:1}
#cam-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Top HUD */
.cam-hud-top{width:100%;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent);position:absolute;top:0;left:0;z-index:10}
.cam-phase-tag{background:rgba(0,0,0,.55);border:1px solid rgba(201,240,62,.3);border-radius:100px;padding:5px 13px;font-size:11px;font-weight:700;color:var(--lime);letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(4px)}
.cam-close{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}

/* Phase dots top bar */
.cam-phase-dots{position:absolute;top:60px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.cpd{width:30px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);transition:all .3s}
.cpd.done{background:var(--lime)}
.cpd.active{background:rgba(201,240,62,.55);animation:pulse .9s ease-in-out infinite}

/* Foot guide */
.foot-guide-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .4s}

/* Scan ring */
.scan-ring-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.scan-ring{width:200px;height:200px;position:relative}
.scan-ring svg{position:absolute;inset:0;width:100%;height:100%}
.scan-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ring-pct{font-family:var(--fd);font-size:44px;font-weight:800;color:#fff;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ring-sub{font-size:10px;color:rgba(255,255,255,.7);letter-spacing:.06em;text-transform:uppercase;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* Badge */
.cam-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,80px);background:rgba(0,0,0,.68);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:6px 14px;font-size:12px;color:#fff;white-space:nowrap;backdrop-filter:blur(6px);transition:all .3s;pointer-events:none;z-index:8}
.cam-badge.ok{border-color:rgba(201,240,62,.4);color:var(--lime)}

/* Bottom panel */
.cam-panel{padding:14px 20px;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.65) 60%,transparent 100%);position:absolute;bottom:0;left:0;right:0;padding-bottom:max(16px,env(safe-area-inset-bottom));z-index:10}
.cam-instr{text-align:center;font-size:15px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.4;min-height:44px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.cam-dots-row{display:flex;justify-content:center;gap:3px;margin-bottom:14px;flex-wrap:wrap;padding:0 10px}
.cam-dot{width:10px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);transition:all .25s;flex-shrink:0}
.cam-dot.done{background:var(--lime)}
.cam-dot.active{background:rgba(201,240,62,.55);animation:pulse .8s ease-in-out infinite}
.shutter-wrap{display:flex;align-items:center;justify-content:center;gap:28px}
.shutter-hint{font-size:11px;color:rgba(255,255,255,.5);max-width:80px;text-align:center;line-height:1.4}
.cam-shutter{width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.cam-shutter:active{transform:scale(.91)}
.cam-shutter-inner{width:46px;height:46px;border-radius:50%;background:#fff}

/* Phase complete overlay */
.phase-complete{position:absolute;inset:0;background:rgba(6,6,6,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s}
.phase-complete.show{opacity:1;pointer-events:all}
.phase-complete-icon{font-size:64px;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
.phase-complete-title{font-family:var(--fd);font-size:40px;font-weight:800;color:var(--lime);letter-spacing:1px}
.phase-complete-sub{font-size:14px;color:var(--t2);text-align:center;max-width:240px;line-height:1.6}

/* Scan done */
.scan-done-wrap{padding:0 0 28px}
.scan-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px 14px}
.sres-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:13px 14px}
.sres-card.span2{grid-column:1/3}
.sres-lbl{font-size:10px;color:var(--t4);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:4px}
.sres-val{font-family:var(--fd);font-size:28px;font-weight:700;color:var(--lime);line-height:1}
.sres-unit{font-size:12px;color:var(--t3);margin-left:2px}
.sres-val-sm{font-size:14px;font-weight:600;color:var(--tx);font-family:var(--ff)}
.conf-row{display:flex;align-items:center;gap:8px}
.conf-bar{flex:1;height:4px;background:var(--s3);border-radius:2px;overflow:hidden}
.conf-fill{height:100%;background:var(--lime);border-radius:2px;transition:width .7s ease}
.conf-pct{font-size:12px;color:var(--t3);min-width:32px;text-align:right}

/* Phase summary in result */
.phase-summary{display:flex;gap:6px;padding:0 20px 16px}
.psum{flex:1;background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:10px 8px;text-align:center}
.psum.ok{border-color:rgba(201,240,62,.25)}
.psum-ico{font-size:18px;margin-bottom:4px}
.psum-lbl{font-size:10px;color:var(--t4);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.psum-v{font-size:11px;color:var(--lime);font-weight:700;margin-top:2px}

/* RESULTS */
#s-res{padding-bottom:52px}
.res-head{padding:48px 22px 12px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px}

/* Result tabs */
.res-tabs{display:flex;gap:0;margin:0 22px 16px;background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:4px;flex-shrink:0}
.res-tab{flex:1;padding:9px 10px;border-radius:9px;text-align:center;cursor:pointer;font-size:12px;font-weight:600;color:var(--t3);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:5px;user-select:none;letter-spacing:.01em}
.res-tab.on{background:var(--lime);color:var(--bg)}
.res-tab:active{opacity:.8}

.res-list{padding:0 22px;display:flex;flex-direction:column;gap:12px}
.shoe{background:var(--s1);border:1px solid var(--bd);border-radius:20px;overflow:hidden}
.shoe.top{border-color:rgba(201,240,62,.3)}
.shoe-header{padding:14px 14px 11px;display:flex;align-items:flex-start;gap:10px}
.rank{width:32px;height:32px;border-radius:9px;background:var(--s2);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:18px;font-weight:700;color:var(--t3);flex-shrink:0}
.rank.gold{background:var(--lime);color:var(--bg)}
.shoe-info{flex:1;min-width:0}
.shoe-brand{font-size:10px;color:var(--t4);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:1px}
.shoe-name{font-size:15px;font-weight:700;line-height:1.2}
.shoe-price{font-size:13px;font-weight:600;margin-top:3px}
.shoe-price.na{color:var(--t4);font-size:11px;font-weight:400}
.shoe-score{text-align:right;flex-shrink:0}
.score-num{font-family:var(--fd);font-size:32px;font-weight:700;line-height:1;color:var(--lime)}
.score-denom{font-size:10px;color:var(--t4);text-transform:uppercase;letter-spacing:.04em}
.shoe-divider{height:1px;background:var(--bd)}
.shoe-body{padding:11px 14px 13px}
.size-badge{display:flex;align-items:center;gap:8px;background:var(--lbg);border:1px solid var(--lbd);border-radius:8px;padding:7px 11px;margin-bottom:9px}
.size-lbl{font-size:10px;color:var(--lime);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.size-val{font-size:12px;font-weight:500}
.reasons{display:flex;flex-direction:column;gap:3px}
.reason{display:flex;gap:7px;font-size:11px;color:var(--t2);line-height:1.4;align-items:flex-start}
.reason.ok .ic{color:var(--green)}
.reason.warn .ic{color:var(--amber)}
.reason .ic{flex-shrink:0;margin-top:1px}

/* 3D FOOT VIEWER */
.foot3d-wrap{position:relative;width:100%;height:360px;background:radial-gradient(ellipse at 50% 40%,#141a10 0%,#080a06 60%,#060606 100%);overflow:hidden;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
#foot3d-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#foot3d-canvas:active{cursor:grabbing}
.foot3d-info{position:absolute;top:14px;left:14px;display:flex;gap:6px;flex-direction:column}
.f3d-badge{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);border-radius:100px;padding:4px 10px;font-size:11px;color:rgba(255,255,255,.7);font-weight:600;white-space:nowrap}
.foot3d-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:5px 12px;font-size:11px;color:rgba(255,255,255,.5);white-space:nowrap;display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px);pointer-events:none;transition:opacity .4s}
.foot3d-views{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:5px}
.f3d-view-btn{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px 10px;font-size:10px;color:rgba(255,255,255,.6);cursor:pointer;font-family:var(--ff);font-weight:700;letter-spacing:.04em;text-transform:uppercase;transition:all .15s;backdrop-filter:blur(4px)}
.f3d-view-btn:active{background:rgba(201,240,62,.15);border-color:rgba(201,240,62,.3);color:var(--lime)}
.foot3d-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 22px 12px}
.fstat{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:11px 13px}
.fstat-lbl{font-size:10px;color:var(--t4);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:3px}
.fstat-val{font-size:16px;font-weight:700;color:var(--lime);font-family:var(--fd);letter-spacing:.4px}

/* OVERLAYS */
#ov{position:fixed;inset:0;background:var(--bg);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s}
#ov.on{opacity:1;pointer-events:all}
.ov-title{font-family:var(--fd);font-size:40px;font-weight:800;color:var(--lime);letter-spacing:4px;margin-bottom:24px}
.spinner{width:32px;height:32px;border:3px solid var(--s3);border-top-color:var(--lime);border-radius:50%;animation:spin .75s linear infinite}
.ov-msg{margin-top:12px;font-size:13px;color:var(--t3);animation:pulse 1.4s ease-in-out infinite}

#db-error{position:fixed;inset:0;background:var(--bg);z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}
#db-error.on{display:flex}
.dbe-ico{font-size:52px;margin-bottom:16px}
.dbe-title{font-family:var(--fd);font-size:36px;font-weight:800;margin-bottom:10px}
.dbe-msg{font-size:13px;color:var(--t2);line-height:1.7;max-width:300px;margin-bottom:20px}
.code{background:var(--s1);border:1px solid var(--bd);border-radius:9px;padding:11px 14px;font-family:monospace;font-size:12px;color:#7dd3fc;line-height:1.7;text-align:left;width:100%;margin-bottom:14px}

#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--s2);border:1px solid var(--bd2);border-radius:100px;padding:8px 18px;font-size:12px;color:var(--tx);opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap;z-index:400}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}