*{
                margin: 0;
                padding: 0;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            
            body {background: black; color: #ffffff; font-family: -apple-system, system-ui, Segoe UI, Roboto, Inter, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";}
            canvas {display:block; position: fixed; inset: 0; width: 100vw; height: 100vh;}
            .overlay {position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px;}
            .overlay::before {content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.2) 100%); z-index: 0; pointer-events: none;}
            .overlay > * {position: relative; z-index: 1;}
            .card {background: #0f1012; border: 1px solid #1f2327; border-radius: 24px; padding: 28px; width: 100%; max-width: 640px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);}    
            .brand-row {display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px;}
            .brand-logo {width: 120px; height: 48px; border-radius: 50%; object-fit: contain;}
            .brand-name {font-weight: 600; font-size: 18px; color: #e5e7eb;}
            .brand-name span {background: linear-gradient(90deg,#ff3ea6,#ff884a); -webkit-background-clip: text; background-clip: text; color: transparent;}
            h1 {text-align: center; font-weight: 800; line-height: 1.25; color: #ffffff; margin: 12px 0 14px;}
            p.sub {text-align: center; color: #cbd5e1; font-size: 16px; margin-bottom: 22px;}
            .button {display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border-radius: 9999px; padding: 14px 22px; font-weight: 600; color: #ffffff; text-decoration: none; background: linear-gradient(90deg,#ff3ea6,#ff884a); box-shadow: 0 4px 12px rgba(255,136,74,0.4);}
            .badge-row {display: flex; align-items: center; justify-content: center; gap: 8px; color: #d1d5db; font-size: 14px; margin-top: 14px;}
            .badge-row svg {width: 16px; height: 16px; fill: #ea2a84;}
            .badge-row strong {color: #ea2a84;}
            .footer-note {text-align: center; color: #9ca3af; font-size: 13px;}
            .hidden {display: none !important;}
            .input-row {display: flex; align-items: center; justify-content: center; margin-top: 16px;}
            .input-wrapper {display: flex; align-items: center; gap: 12px; background: #0b0c0f; border: 1px solid #1f2327; border-radius: 9999px; padding: 12px 14px; width: 100%; max-width: 560px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);}
            .input-icon {font-weight: 700; font-size: 18px; background: linear-gradient(90deg,#ff3ea6,#ff884a); -webkit-background-clip: text; background-clip: text; color: transparent;}
            .input-field {flex: 1; background: transparent; border: none; outline: none; color: #e5e7eb; font-size: 16px;}
            .input-field::placeholder {color: #94a3b8;}
            .input-submit {width: 40px; height: 40px; border-radius: 50px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid #22272b; color: #ff3ea6; transition: all 0.2s ease;}
            .input-submit:hover {background: rgba(255,255,255,0.1);}
            .badge-row.warn {margin-top: 16px; color: #d1d5db;}
            .badge-row.warn svg {fill: #ea2a84; color: #ea2a84;}
            .spinner {width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.25); border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite;}
            @keyframes spin {to {transform: rotate(360deg);}}
            .confirm-card {text-align: center;}
            .confirm-title {font-weight: 800; font-size: 24px; background: linear-gradient(90deg,#ff3ea6,#ff884a); -webkit-background-clip: text; background-clip: text; color: transparent;}
            .confirm-sub {color: #d1d5db; margin-top: 4px;}
            .confirm-user {font-weight: 700; color: #ffffff;}
            .avatar {width: 108px; height: 108px; border-radius: 50%; object-fit: cover; margin: 18px auto; border: 2px solid #22272b;}
            .bio {color: #cbd5e1; font-size: 15px; max-width: 640px; margin: 8px auto 14px;}
            .stats {display: flex; align-items: center; justify-content: center; gap: 28px; margin: 12px 0 18px;}
            .stats-item {display: flex; flex-direction: column; align-items: center;}
            .stats-item .value {font-weight: 800; color: #ffffff;}
            .stats-item .label {color: #9ca3af; font-size: 13px;}
            .info-panel {margin-top: 14px; border-radius: 20px; padding: 14px 16px; background: linear-gradient(180deg, rgba(234,42,132,0.12), rgba(255,255,255,0.02)); border: 1px solid #2a2f33; color: #d1d5db;}
            .btn-row {display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px;}
            .btn-outline {display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 14px; border: 1px solid #2a2f33; background: rgba(255,255,255,0.02); color: #e5e7eb; font-weight: 600;}
.btn-gradient {display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 14px; background: linear-gradient(90deg,#ff3ea6,#ff884a); color: #ffffff; font-weight: 700; gap: 8px;}