@import"https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap";:root{--font-display: "Rajdhani", system-ui, sans-serif;--font-body: "DM Sans", system-ui, sans-serif;--color-bg: #09090e;--color-surface: #0d0f1b;--color-surface-2: #121527;--color-border: rgba(120, 80, 240, .16);--color-border-strong: rgba(168, 85, 247, .3);--color-primary: #a855f7;--color-primary-dark: #9333ea;--color-accent: #f59e0b;--color-cyan: #22d3ee;--color-text: #dfe3f5;--color-text-muted: #63709e;--color-text-subtle: #36395a;--color-danger: #f87171;--color-danger-bg: rgba(248, 113, 113, .1);--radius: 4px;--ease-out: cubic-bezier(.23, 1, .32, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-body);background-color:var(--color-bg);background-image:radial-gradient(ellipse at 20% 15%,rgba(168,85,247,.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 85%,rgba(34,211,238,.06) 0%,transparent 50%),linear-gradient(rgba(168,85,247,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.03) 1px,transparent 1px);background-size:100% 100%,100% 100%,28px 28px,28px 28px;min-height:100vh;color:var(--color-text);display:flex;align-items:center;justify-content:center;padding:1rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;max-width:420px}@keyframes cardIn{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shine{0%{transform:translate(-100%)}to{transform:translate(350%)}}@keyframes glowPulse{0%,to{opacity:.4}50%{opacity:1}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.portal-card{background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:6px;overflow:hidden;animation:cardIn .36s var(--ease-out) both;position:relative;box-shadow:0 24px 80px #000000b8,0 0 0 1px #a855f70f}.portal-card:before{content:"";position:absolute;top:-1px;left:-1px;width:18px;height:18px;border-top:2px solid var(--color-primary);border-left:2px solid var(--color-primary);pointer-events:none;z-index:10}.portal-card:after{content:"";position:absolute;bottom:-1px;right:-1px;width:18px;height:18px;border-bottom:2px solid var(--color-primary);border-right:2px solid var(--color-primary);pointer-events:none;z-index:10}.portal-header{padding:2rem 1.5rem 1.75rem;text-align:center;background:linear-gradient(160deg,rgba(168,85,247,.09) 0%,transparent 60%);border-bottom:1px solid var(--color-border-strong);position:relative;overflow:hidden}.portal-header:before{content:"";position:absolute;top:-20px;left:50%;transform:translate(-50%);width:220px;height:80px;background:radial-gradient(ellipse,rgba(168,85,247,.3) 0%,transparent 70%);pointer-events:none;animation:glowPulse 3.5s ease-in-out infinite}.portal-header h1{font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;position:relative;line-height:1}.portal-header h1 span{color:var(--color-accent)}.portal-header p{font-family:var(--font-display);font-size:.62rem;opacity:.3;margin-top:.5rem;text-transform:uppercase;letter-spacing:.24em;position:relative}.portal-body{padding:1.5rem}.portal-body>p:first-child{text-align:center;color:var(--color-text-muted);font-size:.875rem;margin-bottom:1.5rem;line-height:1.6}.form-group{margin-bottom:1rem}.form-label{display:block;font-family:var(--font-display);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--color-text-muted);margin-bottom:.35rem}.form-control{width:100%;padding:.75rem 1rem;border:1px solid var(--color-border-strong);border-radius:var(--radius);font-size:1.1rem;font-family:var(--font-body);background:var(--color-surface-2);color:var(--color-text);transition:border-color .15s,box-shadow .15s;text-align:center;letter-spacing:.12em}.form-control::placeholder{color:var(--color-text-subtle)}.form-control:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #a855f72e,0 0 18px #a855f71f}.btn{display:block;width:100%;padding:.875rem;border:1px solid transparent;border-radius:var(--radius);font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .15s,box-shadow .15s;text-align:center;text-decoration:none}.btn:active:not(:disabled){transform:scale(.97);transition:transform .1s var(--ease-out),background .1s,box-shadow .1s}.btn:disabled{opacity:.38;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:inset 0 1px #ffffff24}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark);box-shadow:0 0 26px #a855f780,inset 0 1px #ffffff24}.btn-ghost{background:#ffffff0a;color:var(--color-text-muted);border-color:var(--color-border-strong);font-size:.8rem;padding:.625rem;margin-top:.75rem}.btn-ghost:hover{background:#ffffff12;color:var(--color-text)}.alert{padding:.75rem 1rem;border-radius:var(--radius);font-size:.875rem;margin-bottom:1rem;text-align:center;border:1px solid;border-left-width:3px}.alert-danger{background:var(--color-danger-bg);color:var(--color-danger);border-color:#f8717147;border-left-color:var(--color-danger)}.result-hero{text-align:center;padding:2rem 1.5rem 1.75rem;background:linear-gradient(160deg,rgba(168,85,247,.09) 0%,transparent 60%);border-bottom:1px solid var(--color-border-strong);position:relative;overflow:hidden;animation:fadeSlideUp .36s var(--ease-out) both}.result-hero:before{content:"";position:absolute;top:-30px;left:50%;transform:translate(-50%);width:240px;height:100px;background:radial-gradient(ellipse,rgba(168,85,247,.22) 0%,transparent 70%);pointer-events:none;animation:glowPulse 3.5s ease-in-out infinite}.result-name{font-family:var(--font-display);font-size:1.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.75rem;color:#fff;position:relative}.tier-badge{display:inline-flex;align-items:center;padding:.32rem 1.1rem;border-radius:2px;font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;position:relative}.result-card-id{font-family:var(--font-display);font-size:.62rem;opacity:.22;margin-top:.875rem;letter-spacing:.18em;text-transform:uppercase;position:relative}.points-section{padding:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.75rem;animation:fadeSlideUp .36s 80ms var(--ease-out) both}.points-box{background:var(--color-surface-2);border:1px solid var(--color-border-strong);border-radius:var(--radius);padding:1.25rem .875rem;text-align:center;position:relative}.points-box:before{content:"";position:absolute;top:-1px;left:-1px;width:8px;height:8px;border-top:1px solid var(--color-primary);border-left:1px solid var(--color-primary);pointer-events:none;opacity:.7}.points-label{font-family:var(--font-display);font-size:.58rem;text-transform:uppercase;letter-spacing:.16em;color:var(--color-text-muted);font-weight:700;margin-bottom:.5rem}.points-value{font-family:var(--font-display);font-size:2.4rem;font-weight:700;color:var(--color-primary);line-height:1;letter-spacing:-.01em}.points-value.secondary{font-size:1.6rem;color:var(--color-text)}.next-tier{padding:1.25rem 1.5rem 1.5rem;border-top:1px solid var(--color-border);animation:fadeSlideUp .36s .16s var(--ease-out) both}.next-tier-label{font-size:.82rem;color:var(--color-text-muted);text-align:center;margin-bottom:.875rem;line-height:1.55}.next-tier-name{font-weight:700;color:#c4b5fd}.progress-bar{height:6px;background:var(--color-surface-2);border-radius:1px;overflow:hidden;position:relative;border:1px solid var(--color-border)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-cyan) 100%);border-radius:1px;transition:width .9s var(--ease-out);position:relative}.progress-fill:after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shine 2.2s ease-in-out infinite}.progress-labels{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-subtle);margin-top:.5rem}.spinner{display:inline-block;width:1.1em;height:1.1em;border:2px solid rgba(168,85,247,.18);border-top-color:var(--color-primary);border-radius:50%;animation:spin .55s linear infinite;vertical-align:middle;margin-right:.4rem}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}