:root{--bg: #000000;--neon: #00e5ff;--neon-dim: rgba(0, 229, 255, .4);--neon-faint: rgba(0, 229, 255, .12);--green: #00ff85;--red: #ff2d6f;--amber: #ffb800;--text: #e8feff;--text-dim: #6fb8c4;--glow: 0 0 8px var(--neon), 0 0 16px var(--neon-dim)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--text);font-family:Space Grotesk,system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(0,229,255,.05) 0%,transparent 60%),repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,229,255,.015) 2px 3px);pointer-events:none;z-index:0;animation:bgPulse 6s ease-in-out infinite}body:after{content:"";position:fixed;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,229,255,.06) 50%,transparent 100%);background-size:100% 8px;pointer-events:none;z-index:0;opacity:.35;animation:scan 7s linear infinite}@keyframes bgPulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes scan{0%{background-position:0 -100vh}to{background-position:0 100vh}}#app,#modal-root{position:relative;z-index:1;height:100%}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;animation:fadeIn .24s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}h1.logo{font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(36px,8vw,72px);letter-spacing:.08em;color:var(--neon);text-shadow:var(--glow);margin-bottom:16px}h2{font-family:Orbitron,sans-serif;font-weight:700;font-size:clamp(20px,4vw,28px);color:var(--neon);text-shadow:0 0 6px var(--neon-dim);margin-bottom:12px;letter-spacing:.04em}p{color:var(--text-dim);line-height:1.5;max-width:520px;margin:8px auto}p.warn{color:var(--amber)}p.small{font-size:13px}.btn{background:transparent;color:var(--neon);border:1px solid var(--neon);padding:12px 28px;font-family:Orbitron,sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:2px;box-shadow:0 0 0 transparent,inset 0 0 0 transparent;transition:box-shadow .16s,background .16s,color .16s;margin:6px}.btn:hover,.btn:focus-visible{background:var(--neon);color:#001318;box-shadow:0 0 14px var(--neon),0 0 28px var(--neon-dim);outline:none}.btn.ghost{color:var(--text-dim);border-color:var(--text-dim)}.btn.ghost:hover{background:var(--text-dim);color:#001318;box-shadow:none}.btn.danger{color:var(--red);border-color:var(--red)}.btn.danger:hover{background:var(--red);color:#150006;box-shadow:0 0 14px var(--red)}.btn:disabled{opacity:.4;cursor:not-allowed}.card{background:#000000b3;border:1px solid var(--neon);box-shadow:0 0 16px var(--neon-faint),inset 0 0 32px #00e5ff0a;border-radius:4px;padding:32px 28px;max-width:520px;width:100%}.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:12px;align-items:center}input[type=text]{background:transparent;border:1px solid var(--neon-dim);color:var(--text);font-family:inherit;font-size:18px;padding:12px 14px;border-radius:2px;width:100%;max-width:320px;outline:none;transition:border-color .16s,box-shadow .16s;text-align:center}input[type=text]:focus{border-color:var(--neon);box-shadow:0 0 10px var(--neon-dim)}.gender-pick{display:flex;gap:10px;margin:14px 0}.gender-pick label{border:1px solid var(--neon-dim);padding:8px 18px;border-radius:2px;cursor:pointer;color:var(--text-dim);font-size:13px;letter-spacing:.1em;text-transform:uppercase}.gender-pick input{display:none}.gender-pick input:checked+span{color:var(--neon)}.gender-pick label:has(input:checked){border-color:var(--neon);box-shadow:0 0 8px var(--neon-dim)}.field-err{color:var(--red);font-size:13px;min-height:18px;margin-top:6px}.capture-stage{position:relative;width:min(92vw,720px);aspect-ratio:4 / 3;border:1px solid var(--neon);box-shadow:0 0 14px var(--neon-faint);background:#000;overflow:hidden;border-radius:4px}.capture-stage video,.capture-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.capture-stage video{transform:scaleX(-1)}.capture-stage canvas{pointer-events:none}.pose-hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:Orbitron,sans-serif;letter-spacing:.1em;font-size:13px;color:var(--neon);text-shadow:0 0 6px var(--neon-dim);padding:0 12px}.pose-ring{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:3/4;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed var(--ring, var(--neon-dim));box-shadow:0 0 12px var(--ring, transparent);pointer-events:none;transition:border-color .2s,box-shadow .2s}.pose-ring.locked{border-style:solid;animation:ringPulse .6s ease-out infinite alternate}@keyframes ringPulse{0%{box-shadow:0 0 12px var(--ring)}to{box-shadow:0 0 28px var(--ring)}}.pose-arrow{position:absolute;top:50%;transform:translateY(-50%);font-family:Orbitron,sans-serif;font-size:80px;color:var(--neon);text-shadow:0 0 16px var(--neon);opacity:.7;pointer-events:none;animation:arrowBob .9s ease-in-out infinite alternate}.pose-arrow.left{left:18px}.pose-arrow.right{right:18px}.pose-arrow.hidden{display:none}@keyframes arrowBob{0%{transform:translateY(-50%);opacity:.5}to{transform:translate(8px,-50%);opacity:1}}.pose-arrow.left{animation-name:arrowBobL}@keyframes arrowBobL{0%{transform:translateY(-50%);opacity:.5}to{transform:translate(-8px,-50%);opacity:1}}.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Orbitron,sans-serif;font-size:120px;color:var(--neon);text-shadow:0 0 24px var(--neon);pointer-events:none}.progress-dots{display:flex;gap:10px;margin-top:14px}.progress-dots .dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--neon-dim)}.progress-dots .dot.active{background:var(--neon);box-shadow:0 0 8px var(--neon);border-color:var(--neon)}.progress-dots .dot.done{background:var(--green);border-color:var(--green);box-shadow:0 0 6px var(--green)}.score-stage{--tier: var(--neon);display:flex;flex-direction:column;align-items:center;padding:50px 16px 30px;width:100%}.score-big{font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(96px,22vw,200px);color:var(--tier);text-shadow:0 0 28px var(--tier),0 0 60px var(--tier);line-height:1;letter-spacing:-.02em;animation:scoreGlitch 1.6s ease-out}.tier-label{font-family:Orbitron,sans-serif;font-weight:900;font-size:clamp(22px,5vw,38px);letter-spacing:.18em;color:var(--tier);text-shadow:0 0 14px var(--tier);margin-top:8px;opacity:0;transform:scale(.9);animation:tierIn .6s 1.4s ease-out forwards}.score-label{color:var(--text-dim);letter-spacing:.3em;font-size:12px;text-transform:uppercase}@keyframes scoreGlitch{0%{opacity:0;transform:translateY(8px) scale(.94);filter:blur(8px)}40%{opacity:1;filter:blur(0)}45%{transform:translate(-3px,1px) scale(1)}47%{transform:translate(3px,-1px) scale(1)}to{transform:translate(0) scale(1)}}@keyframes tierIn{to{opacity:1;transform:scale(1)}}.metrics{display:flex;flex-direction:column;gap:10px;max-width:560px;width:100%;margin:22px auto 6px}.m-bar{display:grid;grid-template-columns:110px 1fr 60px;align-items:center;gap:12px;font-size:12px;opacity:0;animation:slideIn .4s ease-out forwards}.m-bar .lbl{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;font-size:11px;text-align:right}.m-bar .track{position:relative;height:8px;background:#00e5ff14;border:1px solid var(--neon-faint);border-radius:4px;overflow:visible}.m-bar .ideal-zone{position:absolute;top:0;bottom:0;background:#00ff852e;border-left:1px solid var(--green);border-right:1px solid var(--green)}.m-bar .needle{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--needle, var(--neon));box-shadow:0 0 8px var(--needle, var(--neon))}.m-bar .val{font-family:Orbitron,sans-serif;color:var(--needle, var(--neon));font-size:12px;text-align:left}@keyframes slideIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:none}}.avatar-ring{width:200px;height:200px;border-radius:50%;border:2px solid var(--neon);box-shadow:0 0 16px var(--neon),inset 0 0 8px var(--neon-faint);overflow:hidden;background:#000}.avatar-ring img{width:100%;height:100%;object-fit:cover;display:block}.dropzone{border:1px dashed var(--neon);padding:32px;border-radius:4px;cursor:pointer;color:var(--text-dim);max-width:340px}.dropzone:hover{background:var(--neon-faint);color:var(--neon)}.lb-tabs{display:flex;gap:8px;margin:12px 0 16px}.lb-tabs button{background:transparent;color:var(--text-dim);border:1px solid var(--neon-faint);padding:6px 14px;font-family:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:2px}.lb-tabs button.active{color:var(--neon);border-color:var(--neon);box-shadow:0 0 8px var(--neon-dim)}.lb-list{max-width:560px;width:100%;max-height:60vh;overflow-y:auto;border:1px solid var(--neon-faint);border-radius:4px}.lb-row{display:grid;grid-template-columns:36px 48px 1fr auto auto;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--neon-faint)}.lb-row:last-child{border-bottom:none}.lb-rank{font-family:Orbitron,sans-serif;color:var(--text-dim);font-size:14px}.lb-rank.top1{color:var(--neon)}.lb-row .av{width:40px;height:40px;border-radius:50%;overflow:hidden;border:1px solid var(--neon)}.lb-row .av img{width:100%;height:100%;object-fit:cover;display:block}.lb-row .nick{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-row .sc{color:var(--neon);font-family:Orbitron,sans-serif;font-weight:700}.lb-row .report{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:11px}.lb-row .report:hover{color:var(--red)}.lb-row.you{background:linear-gradient(90deg,rgba(0,229,255,.18),transparent 70%);animation:youPulse 1.2s ease-in-out infinite alternate}@keyframes youPulse{0%{box-shadow:inset 3px 0 0 var(--neon)}to{box-shadow:inset 6px 0 8px var(--neon)}}.modal-bg{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .2s;padding:20px}.spinner{width:28px;height:28px;border:2px solid var(--neon-faint);border-top-color:var(--neon);border-radius:50%;animation:spin .9s linear infinite;margin:12px auto}@keyframes spin{to{transform:rotate(360deg)}}.topbar{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;font-family:Orbitron,sans-serif;font-size:12px;letter-spacing:.2em;color:var(--text-dim);z-index:5}.topbar .brand{color:var(--neon);text-shadow:0 0 6px var(--neon-dim)}.topbar button{background:none;border:none;color:var(--text-dim);cursor:pointer;font:inherit;letter-spacing:.2em}.topbar button:hover{color:var(--neon)}
