/* ============================================================
   MOGRATE — styles
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07070c;--ink:#f4f4fa;--muted:#9a9ab0;--line:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.045);--card-2:rgba(255,255,255,.07);
  --gold:#ffd16a;--pink:#ff7eb3;--violet:#7c5cff;--cyan:#22d3ee;
  --grad:linear-gradient(135deg,#ffd16a,#ff7eb3 48%,#7c5cff);
  --radius:24px;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
html,body{height:100%}
body{font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior:none;overflow-x:hidden;line-height:1.45}
b,strong{font-weight:700}
button{font-family:inherit}
[hidden]{display:none!important}

/* backdrop */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 90% at 50% -10%,#15101f 0%,#0a0a12 45%,#07070c 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;mix-blend-mode:screen;will-change:transform}
.blob--1{width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;background:radial-gradient(circle,#7c5cff,transparent 70%);animation:floatA 16s ease-in-out infinite}
.blob--2{width:40vmax;height:40vmax;right:-12vmax;top:8vmax;background:radial-gradient(circle,#ff7eb3,transparent 70%);animation:floatB 19s ease-in-out infinite}
.blob--3{width:42vmax;height:42vmax;left:6vmax;bottom:-18vmax;background:radial-gradient(circle,#22d3ee,transparent 70%);opacity:.35;animation:floatC 22s ease-in-out infinite}
.grain{position:absolute;inset:-50%;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
@keyframes floatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.1)}}
@keyframes floatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vmax,6vmax) scale(1.08)}}
@keyframes floatC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vmax,-5vmax) scale(1.12)}}

/* layout */
#app{max-width:480px;margin:0 auto;min-height:100%;padding:calc(16px + var(--safe-t)) 18px calc(96px + var(--safe-b))}
.tab{display:none}
.tab.is-active{display:block;animation:screenIn .45s cubic-bezier(.16,1,.3,1)}
.screen{display:none;flex-direction:column;align-items:center;text-align:center}
.screen.is-active{display:flex;animation:screenIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* upload */
.brand{margin-top:4vh;display:flex;flex-direction:column;align-items:center;gap:6px}
.brand__mark{filter:drop-shadow(0 6px 20px rgba(124,92,255,.45));animation:floatY 5s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.brand__title{font-family:"Sora",sans-serif;font-weight:800;letter-spacing:.04em;font-size:36px;line-height:1}
.brand__title span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand__tag{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);font-weight:600}
.lead{margin:20px 4px 18px;color:#c9c9da;font-size:15px;max-width:25em}
.lead b{color:#fff}

.err-card{display:flex;gap:12px;align-items:center;width:100%;margin-bottom:16px;padding:14px 16px;border-radius:16px;
  background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.35);text-align:left;animation:popIn .4s}
.err-emoji{font-size:26px}
.err-card b{display:block;font-size:15px}.err-card span{font-size:12.5px;color:var(--muted)}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

.dropzone{position:relative;width:100%;border-radius:var(--radius);padding:30px 22px;background:var(--card);border:1.5px dashed rgba(255,255,255,.16);
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:border-color .25s,transform .25s,background .25s;overflow:hidden;-webkit-tap-highlight-color:transparent}
.dropzone:active{transform:scale(.985)}
.dropzone.is-over,.dropzone:focus-visible{border-color:rgba(255,209,106,.7);background:var(--card-2);outline:none}
.dz-glow{position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.55),transparent 70%);filter:blur(14px);top:-40px;opacity:.8;animation:glowPulse 3.4s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:.85;transform:scale(1.1)}}
.dz-icon{position:relative;width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:#0a0a12;background:var(--grad);box-shadow:0 10px 26px rgba(255,126,179,.35)}
.dz-title{position:relative;font-weight:700;font-size:17px}
.dz-hint{position:relative;font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.chip{font-size:12px;color:#cfcfe0;padding:7px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.disclaimer{margin-top:18px;font-size:11.5px;color:#6d6d82;max-width:27em;line-height:1.5}

/* buttons */
.btn-ghost{margin-top:12px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 18px;border-radius:15px;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;background:var(--card);border:1px solid var(--line);transition:transform .2s,background .2s;-webkit-tap-highlight-color:transparent}
.btn-ghost:active{transform:scale(.97);background:var(--card-2)}
.btn-ghost.accent{border-color:rgba(255,126,179,.4);background:rgba(255,126,179,.1)}
.btn-primary{margin-top:18px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px;border:0;border-radius:18px;font-weight:800;font-size:16px;color:#170c22;cursor:pointer;background:var(--grad);background-size:180% 180%;box-shadow:0 14px 34px rgba(124,92,255,.4);transition:transform .2s;animation:gradShift 6s ease infinite;-webkit-tap-highlight-color:transparent}
.btn-primary svg{fill:#170c22}.btn-primary:active{transform:scale(.975)}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* analyzing */
.screen--analyzing{justify-content:center;min-height:80vh;gap:6px}
.scanwrap{position:relative;width:230px;height:230px;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5);margin-top:2vh}
.scan-img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
.scan-overlay{position:absolute;inset:0}
.scan-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,92,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(124,92,255,.16) 1px,transparent 1px);background-size:26px 26px;mask:radial-gradient(circle at 50% 50%,#000 60%,transparent 100%)}
.scan-line{position:absolute;left:0;right:0;height:3px;top:0;background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),transparent);box-shadow:0 0 18px 4px rgba(34,211,238,.5);animation:scanMove 2s ease-in-out infinite}
@keyframes scanMove{0%{top:6%}50%{top:92%}100%{top:6%}}
.bracket{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,.7)}
.bracket--tl{top:10px;left:10px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.bracket--tr{top:10px;right:10px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.bracket--bl{bottom:10px;left:10px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.bracket--br{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.dot{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:dotPulse 1.4s ease-in-out infinite}
.dot:nth-child(7){animation-delay:.15s}.dot:nth-child(8){animation-delay:.3s}.dot:nth-child(9){animation-delay:.45s}.dot:nth-child(10){animation-delay:.6s}.dot:nth-child(11){animation-delay:.75s}
@keyframes dotPulse{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
.scan-ring{position:relative;width:120px;height:120px;margin-top:28px}
.scan-ring svg{transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7}
.ring-prog{fill:none;stroke:url(#gaugeGrad);stroke-width:7;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7}
.scan-pct{position:absolute;inset:0;display:grid;place-content:center;font-family:"Sora",sans-serif;font-weight:800;font-size:30px}
.scan-pct i{font-size:15px;color:var(--muted);font-style:normal;margin-left:1px}
.scan-status{margin-top:22px;font-weight:700;font-size:16px;min-height:22px}
.scan-sub{font-size:12.5px;color:var(--muted)}

/* results */
.screen--results{gap:14px;padding-bottom:6px}
.reveal{opacity:0;transform:translateY(18px)}
.screen--results.is-active .reveal{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*90ms)}

.bot-banner{position:relative;width:100%;display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:16px;text-decoration:none;color:#0c0613;background:var(--grad);background-size:160% 160%;animation:gradShift 6s ease infinite;box-shadow:0 12px 30px rgba(124,92,255,.4);overflow:hidden}
.screen--results .bot-banner{position:sticky;top:calc(var(--safe-t) + 6px);z-index:20}
.bb-shine{position:absolute;top:0;bottom:0;width:50%;left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}
.bb-icon{position:relative;width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:rgba(12,6,19,.9);color:#fff}
.bb-text{position:relative;font-size:14px;font-weight:700;text-align:left;line-height:1.2}
.bb-chevron{position:relative;margin-left:auto;font-weight:800;font-size:18px}

.result-hero{display:flex;flex-direction:column;align-items:center;margin-top:4px}
.gauge{position:relative;width:220px;height:220px;display:grid;place-items:center}
.gauge svg{transform:rotate(-90deg)}
.g-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:14}
.g-prog{fill:none;stroke:url(#gaugeGrad);stroke-width:14;stroke-linecap:round;stroke-dasharray:527.79;stroke-dashoffset:527.79}
.gauge-center{position:absolute;display:flex;flex-direction:column;align-items:center}
.gauge-score{font-family:"Sora",sans-serif;font-weight:800;font-size:58px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gauge-unit{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.gauge-thumb{position:absolute;bottom:-6px;width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85);box-shadow:0 6px 16px rgba(0,0,0,.5);opacity:0;transition:opacity .4s}
.gauge-thumb.show{opacity:1}
.tier-badge{margin-top:14px;font-family:"Sora",sans-serif;font-weight:800;letter-spacing:.06em;font-size:20px;padding:9px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);position:relative;overflow:hidden}
.tier-badge::before{content:"";position:absolute;inset:0;opacity:.18;background:var(--tier-grad,var(--grad))}
.tier-badge span{position:relative;background:var(--tier-grad,var(--grad));-webkit-background-clip:text;background-clip:text;color:transparent}
.mog-line{margin-top:12px;font-size:15px;color:#d4d4e4;max-width:24em}
.mog-line b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.rank-line{margin-top:8px;font-size:13px;color:var(--muted)}
.rank-line b{color:var(--gold)}
.warns{margin-top:10px;font-size:12.5px;color:#ffd16a;background:rgba(255,209,106,.1);border:1px solid rgba(255,209,106,.3);padding:9px 13px;border-radius:12px;max-width:26em}

.hl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.hl-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 12px;text-align:center}
.hl-val{font-family:"Sora",sans-serif;font-weight:800;font-size:30px;line-height:1}
.hl-val i{font-style:normal;font-size:17px;color:var(--muted);margin-left:1px}
.hl-card:first-child .hl-val{background:linear-gradient(135deg,#9be15d,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-card:last-child .hl-val{background:linear-gradient(135deg,#ffd16a,#ff7eb3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-key{margin-top:7px;font-size:12px;color:var(--muted)}

.breakdown{width:100%;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 16px;display:flex;flex-direction:column;gap:15px}
.cat-row{display:flex;flex-direction:column;gap:7px}
.cat-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
.cat-name{font-weight:600;color:#e6e6f0}
.cat-name small{display:block;font-size:10.5px;color:#6d6d82;font-weight:500}
.cat-val{font-family:"Sora",sans-serif;font-weight:700;font-size:15px}
.cat-track{height:9px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.cat-fill{height:100%;border-radius:99px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--violet),var(--pink),var(--gold));transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.cat-fill.is-filled{transform:scaleX(var(--p,0))}
.verdict{width:100%;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;font-size:14.5px;color:#dcdce8;text-align:left;line-height:1.55;position:relative;padding-left:50px}
.verdict::before{content:"✦";position:absolute;left:18px;top:17px;font-size:18px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:12px}
.actions .btn-ghost{margin-top:0}
.foot{margin-top:14px;font-size:11px;color:#5e5e72;text-align:center}

/* ===== page head (battle / board) ===== */
.page-head{text-align:center;margin:2vh 0 18px}
.page-head h2{font-family:"Sora",sans-serif;font-weight:800;font-size:26px}
.page-head p{margin-top:6px;font-size:13px;color:var(--muted)}

.need-scan{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 20px;margin-top:20px}
.need-scan p{color:#c9c9da;margin-bottom:4px}

/* me card */
.me-card{display:flex;align-items:center;gap:14px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.me-thumb{width:52px;height:52px;border-radius:14px;object-fit:cover;background:#1a1a26;border:1px solid var(--line)}
.me-info{flex:1;text-align:left}.me-name{font-weight:700;font-size:15px}.me-sub{font-size:12px;color:var(--muted)}
.me-mog{font-family:"Sora",sans-serif;font-weight:800;font-size:30px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:5px;margin-top:18px}
.seg-btn{padding:11px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;transition:.2s}
.seg-btn.is-on{background:var(--card-2);color:#fff}

.join-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px}
.inp{width:100%;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:600;outline:none;transition:border-color .2s}
.inp:focus{border-color:rgba(255,209,106,.6)}
#joinCode{text-transform:uppercase;letter-spacing:.2em;text-align:center}
.join-row .btn-ghost{margin-top:0;width:auto;padding-inline:22px}

.list-head{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 12px}
.list-head h3{font-size:15px;font-weight:700}
.mini-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:16px;cursor:pointer;transition:.2s}
.mini-btn:active{transform:scale(.92)}

.room-list,.board-list{display:flex;flex-direction:column;gap:10px}
.room-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;animation:popIn .35s}
.room-item .ri-name{flex:1;font-weight:600;font-size:14px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-item .ri-mog{font-family:"Sora",sans-serif;font-weight:700;color:var(--gold)}
.room-item .ri-join{padding:8px 16px;border-radius:10px;border:0;background:var(--grad);color:#170c22;font-weight:800;font-size:13px;cursor:pointer}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:18px}
.board-note{margin-top:12px;font-size:12px;color:#6d6d82;text-align:center;line-height:1.5}

/* room waiting */
.room-card{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 20px;margin-top:10px}
.room-code-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.room-code{font-family:"Sora",sans-serif;font-weight:800;font-size:46px;letter-spacing:.18em;margin:8px 0 4px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.room-status{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-size:14px;margin:10px 0 18px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--pink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* battle result */
.winner-banner{margin-top:14px;text-align:center;font-family:"Sora",sans-serif;font-weight:800;font-size:24px;padding:16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);position:relative;overflow:hidden;animation:popIn .5s}
.winner-banner.win{background:linear-gradient(135deg,rgba(155,225,93,.18),rgba(34,211,238,.14));border-color:rgba(155,225,93,.4)}
.winner-banner.lose{background:rgba(255,90,90,.1);border-color:rgba(255,90,90,.3)}
.winner-banner span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:14px}
.vs-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 8px;text-align:center}
.vs-card.w{border-color:rgba(155,225,93,.5);background:rgba(155,225,93,.08)}
.vs-card img{width:56px;height:56px;border-radius:14px;object-fit:cover;background:#1a1a26;margin-bottom:8px}
.vs-card .vc-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-card .vc-mog{font-family:"Sora",sans-serif;font-weight:800;font-size:30px;margin-top:4px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-card .vc-lab{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.vs-mid{font-family:"Sora",sans-serif;font-weight:800;color:var(--muted);font-size:16px}
.vs-cats{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.vcat{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:8px;font-size:13px}
.vcat .vl{font-weight:800;text-align:center}.vcat .vr{font-weight:800;text-align:center}
.vcat .vc-mid{text-align:center;color:var(--muted);font-size:11px}
.vcat .vbar{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;display:flex}
.vcat .vbar i{height:100%}
.vcat .vbar .bl{background:linear-gradient(90deg,#22d3ee,#7c5cff)}
.vcat .vbar .br{background:linear-gradient(90deg,#ff7eb3,#ffd16a);margin-left:auto}
.win-mark{color:#9be15d}.lose-mark{color:#ff7a7a}

/* leaderboard */
.name-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.name-row span{font-size:13px;color:var(--muted);white-space:nowrap}
.myrank{background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(255,126,179,.14));border:1px solid rgba(124,92,255,.35);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.myrank .mr-pos{font-family:"Sora",sans-serif;font-weight:800;font-size:24px;min-width:46px}
.myrank .mr-txt{flex:1;font-size:13px;color:#d4d4e4}.myrank .mr-txt b{color:#fff}
.board-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 14px;animation:popIn .3s}
.board-row.me{border-color:rgba(255,209,106,.5);background:rgba(255,209,106,.07)}
.br-pos{font-family:"Sora",sans-serif;font-weight:800;font-size:16px;min-width:30px;text-align:center;color:var(--muted)}
.br-pos.medal{font-size:20px}
.br-name{flex:1;overflow:hidden}
.br-name .n{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-name .t{font-size:11px;color:var(--muted)}
.br-mog{font-family:"Sora",sans-serif;font-weight:800;font-size:20px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.br-psl{font-size:11px;color:var(--muted);text-align:right}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;gap:6px;
  padding:8px 12px calc(8px + var(--safe-b));background:rgba(10,10,18,.8);backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.tabbtn{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;border-radius:12px;transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent}
.tabbtn svg{width:23px;height:23px}
.tabbtn.is-active{color:#fff}
.tabbtn.is-active svg{stroke:url(#bg1);filter:drop-shadow(0 0 6px rgba(124,92,255,.6))}
body.scanning .tabbar{transform:translateY(120%);transition:transform .3s}

/* camera modal */
.cam-modal{position:fixed;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center}
.cam-modal[hidden]{display:none}
.cam-inner{position:relative;width:100%;height:100%;max-width:480px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#camVideo{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-frame{position:absolute;width:62vw;max-width:280px;aspect-ratio:3/4;border:2px solid rgba(255,255,255,.6);border-radius:130px/150px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.cam-controls{position:absolute;bottom:calc(28px + var(--safe-b));left:0;right:0;display:flex;align-items:center;justify-content:center;gap:40px}
.cam-shoot{width:74px;height:74px;border-radius:50%;border:5px solid #fff;background:rgba(255,255,255,.25);cursor:pointer;transition:transform .15s}
.cam-shoot:active{transform:scale(.9)}
.cam-x,.cam-flip{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#fff;font-size:18px;cursor:pointer}

#fx{position:fixed;inset:0;pointer-events:none;z-index:50}

@media (prefers-reduced-motion:reduce){
  .blob,.scan-line,.dot,.dz-glow,.bb-shine,.brand__mark,.btn-primary,.bot-banner,.spin{animation:none!important}
  .reveal{transition-duration:.001s!important}
}
@media (max-height:680px){.brand{margin-top:1vh}.lead{margin:14px 4px 14px}}