/* ========== AUTH OVERLAY ========== */
.auth-overlay{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity var(--duration-slow) var(--ease)}
.auth-overlay.hidden{opacity:0;pointer-events:none}
.auth-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--divider);box-shadow:var(--shadow-lg);padding:48px 40px;max-width:420px;width:100%;text-align:center}
.auth-card h1{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:700;margin-bottom:6px;color:var(--text)}
.auth-card h1 span{color:var(--indigo)}
.auth-card .auth-sub{font-size:var(--text-md);color:var(--text-muted);margin-bottom:32px}
.auth-form{display:flex;flex-direction:column;gap:var(--space-4);text-align:left}
.auth-field label{display:block;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.auth-field input{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-md);font-family:'DM Sans',sans-serif;background:var(--surface-offset);transition:border-color var(--duration-base) var(--ease);outline:none}
.auth-field input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-soft)}
.auth-btn{width:100%;padding:var(--space-4);border-radius:var(--radius);background:var(--indigo);color:white;font-family:var(--font-mono);font-size:var(--text-base);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;border:none;cursor:pointer;transition:all var(--duration-base) var(--ease);margin-top:8px}
.auth-btn:hover{background:var(--emerald);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.auth-btn:active{transform:scale(0.98)}
.google-btn:hover{border-color:var(--indigo);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.auth-toggle{font-size:var(--text-base);color:var(--text-muted);margin-top:20px}
.auth-toggle a{color:var(--indigo);font-weight:600;cursor:pointer;text-decoration:none}
.auth-toggle a:hover{text-decoration:underline}
.auth-error{color:var(--coral);font-size:var(--text-base);font-weight:500;min-height:18px;margin-top:4px}
.auth-logo{width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.auth-logo svg{width:26px;height:26px}
.auth-logo img{width:100%;height:100%;object-fit:contain;display:block}

/* ========== QUIZ OVERLAY ========== */
.quiz-overlay{position:fixed;inset:0;z-index:9998;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:1;transition:opacity var(--duration-slow) var(--ease);overflow-y:auto}
.quiz-overlay.hidden{opacity:0;pointer-events:none}
.quiz-container{max-width:640px;width:100%;padding:40px 24px}
.quiz-progress{display:flex;gap:var(--space-2);margin-bottom:40px;padding:0 var(--space-1)}
.quiz-progress-dot{flex:1;height:4px;border-radius:var(--radius-sm);background:var(--divider);transition:background var(--duration-slow) var(--ease)}
.quiz-progress-dot.filled{background:var(--indigo)}
.quiz-progress-dot.active{background:var(--indigo);box-shadow:0 0 8px rgba(45,106,79,0.4)}
.quiz-question-wrap{text-align:center;animation:quizFadeIn 400ms var(--ease)}
.quiz-question-num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--indigo);margin-bottom:12px}
.quiz-question-text{font-size:var(--text-xl);font-weight:600;line-height:1.4;color:var(--text);margin-bottom:36px;max-width:520px;margin-left:auto;margin-right:auto}
.quiz-options{display:flex;flex-direction:column;gap:var(--space-3)}
.quiz-option{background:var(--surface);border:2px solid var(--divider);border-radius:var(--radius);padding:var(--space-5) var(--space-6);font-size:var(--text-md);color:var(--text);cursor:pointer;transition:all var(--duration-base) var(--ease);text-align:left;line-height:1.45}
.quiz-option:hover{border-color:var(--indigo);background:var(--indigo-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.quiz-option.selected{border-color:var(--indigo);background:var(--indigo-light);font-weight:500}
.quiz-option .opt-icon{display:inline-block;width:28px;height:28px;border-radius:var(--radius-full);background:var(--surface-offset);border:2px solid var(--divider);margin-right:14px;vertical-align:middle;text-align:center;line-height:24px;font-size:var(--text-md);transition:all var(--duration-base) var(--ease);flex-shrink:0}
.quiz-option.selected .opt-icon{background:var(--indigo);border-color:var(--indigo);color:white}
.quiz-option-inner{display:flex;align-items:center}
.quiz-nav{display:flex;justify-content:space-between;margin-top:32px;gap:var(--space-4)}
.quiz-nav-btn{padding:var(--space-3) var(--space-8);border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--text-base);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;cursor:pointer;transition:all var(--duration-base) var(--ease)}
.quiz-nav-btn.secondary{background:var(--surface);border:1px solid var(--border);color:var(--text-muted)}
.quiz-nav-btn.secondary:hover{border-color:var(--text-muted);color:var(--text)}
.quiz-nav-btn.primary{background:var(--indigo);color:white;border:none}
.quiz-nav-btn.primary:hover{background:var(--emerald);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.quiz-nav-btn:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;transform:none !important}
@keyframes quizFadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ========== ARCHETYPE REVEAL ========== */
.reveal-overlay{position:fixed;inset:0;z-index:9997;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;opacity:1;transition:opacity var(--duration-slow) var(--ease);overflow-y:auto;padding:40px 0}
.reveal-overlay.hidden{opacity:0;pointer-events:none}
.reveal-container{max-width:700px;width:100%;padding:40px 24px;text-align:center}
.reveal-title{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--indigo);margin-bottom:8px;opacity:0;animation:revealUp 600ms var(--ease) 200ms forwards}
.reveal-headline{font-size:var(--text-xl);font-weight:700;color:var(--text);margin-bottom:40px;opacity:0;animation:revealUp 600ms var(--ease) 400ms forwards}
.reveal-badges{display:flex;gap:var(--space-5);justify-content:center;margin-bottom:40px;flex-wrap:wrap}
.reveal-badge{opacity:0;transform:scale(0.7) translateY(20px)}
.reveal-badge.show{animation:badgePop 500ms var(--ease) forwards}
.reveal-badge-card{background:var(--surface);border-radius:var(--radius-lg);border:2px solid var(--divider);box-shadow:var(--shadow-md);padding:var(--space-8) var(--space-6);min-width:180px;position:relative;overflow:hidden;transition:all var(--duration-slow) var(--ease)}
.reveal-badge-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.reveal-badge-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.reveal-badge-rank{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px}
.reveal-badge-icon{width:56px;height:56px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:var(--text-xl)}
.reveal-badge-name{font-family:var(--font-mono);font-size:var(--text-md);font-weight:700;letter-spacing:0.5px;margin-bottom:6px}
.reveal-badge-tagline{font-size:var(--text-base);color:var(--text-muted);line-height:1.4}
.reveal-desc{background:var(--surface);border-radius:var(--radius);border:1px solid var(--divider);padding:var(--space-6) var(--space-8);margin-bottom:32px;text-align:left;opacity:0;animation:revealUp 600ms var(--ease) 1200ms forwards}
.reveal-desc h3{font-family:var(--font-mono);font-size:var(--text-base);font-weight:600;margin-bottom:10px;color:var(--text)}
.reveal-desc p{font-size:var(--text-md);color:var(--text-muted);line-height:1.6}
.reveal-desc .marketing-tips{margin-top:16px;display:flex;flex-direction:column;gap:var(--space-2)}
.reveal-desc .tip{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-base);color:var(--text);line-height:1.5}
.reveal-desc .tip-icon{width:20px;height:20px;border-radius:var(--radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);margin-top:2px}
.reveal-cta{display:flex;gap:var(--space-4);justify-content:center;opacity:0;animation:revealUp 600ms var(--ease) 1400ms forwards}
@keyframes revealUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes badgePop{0%{opacity:0;transform:scale(0.7) translateY(20px)}60%{opacity:1;transform:scale(1.05) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* ========== HEADER USER PROFILE ========== */
.user-profile{display:flex;align-items:center;gap:var(--space-3)}

/* ═══ ARCHETYPE CODEX — LUXURY RESKIN ═══ */
.codex-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(45,60,50,0.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.codex-overlay.open{display:flex}
.codex-panel{background:var(--bg);border:1px solid var(--divider);border-radius:var(--radius-lg);width:min(94vw,960px);max-height:88vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-lg)}
.codex-header{padding:var(--space-8) var(--space-8) var(--space-5);display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--divider)}
.codex-title{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;letter-spacing:5px;text-transform:uppercase;color:var(--text)}
.codex-subtitle{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:2px;color:var(--text-muted);margin-top:6px;text-transform:uppercase}
.codex-close{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);cursor:pointer;background:none;border:1px solid var(--divider);padding:var(--space-2) var(--space-4);border-radius:var(--radius);transition:all var(--duration-base) var(--ease)}
.codex-close:hover{color:var(--text);border-color:var(--emerald)}
.codex-carousel{padding:0 var(--space-6) var(--space-8)}
.codex-featured{display:flex;gap:var(--space-4);justify-content:center;padding:var(--space-8) 0 0}
.codex-divider{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-6) 0 var(--space-2);color:var(--text-faint);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:3px;text-transform:uppercase}
.codex-divider::before,.codex-divider::after{content:'';flex:1;height:1px;background:var(--divider)}
.codex-locked-grid{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;padding:var(--space-3) 0 0}
.codex-locked-grid .codex-card{flex:0 0 140px;padding:var(--space-4) var(--space-4)}
.codex-locked-grid .codex-icon{width:40px;height:40px;font-size:var(--text-lg);margin-bottom:10px}
.codex-locked-grid .codex-name{font-size:var(--text-xs);letter-spacing:2px;margin-bottom:4px}
.codex-locked-grid .codex-motto{font-size:var(--text-xs);margin-bottom:0}
.codex-locked-grid .codex-rank-badge{font-size:var(--text-xs);letter-spacing:1.5px;padding:var(--space-1) var(--space-2)}
.codex-carousel::-webkit-scrollbar{height:4px}
.codex-carousel::-webkit-scrollbar-track{background:transparent}
.codex-carousel::-webkit-scrollbar-thumb{background:var(--divider);border-radius:var(--radius-sm)}
.codex-carousel::-webkit-scrollbar-thumb:hover{background:var(--emerald-soft)}
.codex-card{flex:0 0 200px;background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);position:relative;transition:all var(--duration-slow) var(--ease)}
.codex-card:hover{background:var(--surface);border-color:var(--emerald);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.codex-card.codex-primary{border-color:var(--emerald);background:linear-gradient(180deg,rgba(45,106,79,0.04) 0%,var(--surface) 100%)}
.codex-card.codex-primary:hover{border-color:var(--emerald);box-shadow:var(--shadow-lg)}
.codex-card.codex-secondary{border-color:rgba(45,106,79,0.2)}
.codex-card.codex-tertiary{border-color:rgba(167,151,120,0.3)}
.codex-card.codex-locked{background:var(--bg);border-color:var(--divider);opacity:var(--opacity-muted)}
.codex-card.codex-locked:hover{border-color:var(--divider);transform:none}
.codex-rank-badge{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:var(--space-1) var(--space-3);border-radius:var(--radius-lg);display:inline-block;margin-bottom:18px}
.codex-rank-primary{background:rgba(45,106,79,0.08);color:var(--emerald);border:1px solid rgba(45,106,79,0.2)}
.codex-rank-secondary{background:rgba(45,106,79,0.04);color:var(--text-muted);border:1px solid var(--divider)}
.codex-rank-tertiary{background:rgba(167,151,120,0.06);color:var(--text-faint);border:1px solid rgba(167,151,120,0.2)}
.codex-rank-locked{background:transparent;color:var(--text-faint);border:1px solid var(--divider)}
.codex-icon{width:44px;height:44px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;background:var(--emerald-soft);border:1px solid rgba(45,106,79,0.15);font-family:var(--font-mono);font-size:var(--text-md);font-weight:700;letter-spacing:1px;color:var(--emerald);line-height:1}
.codex-locked .codex-icon{background:var(--bg);border-color:var(--divider);color:var(--text-faint);opacity:var(--opacity-disabled)}
.codex-name{font-family:var(--font-mono);font-size:var(--text-base);font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--text);text-align:center;margin-bottom:8px}
.codex-locked .codex-name{color:var(--text-faint)}
.codex-motto{font-family:var(--font-body);font-size:var(--text-sm);font-style:italic;color:var(--text-muted);text-align:center;line-height:1.5;margin-bottom:20px}
.codex-locked .codex-motto{color:var(--text-faint)}
.codex-stats{display:flex;flex-direction:column;gap:var(--space-3);border-top:1px solid var(--divider);padding-top:var(--space-4)}
.codex-stat{font-size:var(--text-sm);color:var(--text);line-height:1.5}
.codex-stat-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:3px}
.codex-locked .codex-stats{display:none}
.user-badges{display:flex;gap:0;cursor:pointer}
.user-badge{display:none}
.user-badges-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-faint);padding:var(--space-1) var(--space-3);border:1px solid var(--divider);border-radius:var(--radius-lg);transition:all var(--duration-base) var(--ease);white-space:nowrap;background:var(--surface)}
.user-badges-label:hover{border-color:var(--emerald);color:var(--emerald)}
.notif-bell{position:relative;cursor:pointer;padding:var(--space-1);border:none;background:none;font-size:var(--text-md);line-height:1;color:var(--text-muted);transition:color var(--duration-base) var(--ease)}
.notif-bell:hover{color:var(--text)}
.notif-badge{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;background:var(--coral);color:white;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:0 var(--space-1);line-height:1}
.notif-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:280px;max-width:340px;padding:0;z-index:101;display:none;overflow:hidden}
.notif-dropdown.open{display:block}
.notif-header{padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--divider)}
.notif-item{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--divider);cursor:pointer;transition:background var(--duration-fast) var(--ease)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:rgba(45,106,79,0.04)}
.notif-item-title{font-size:var(--text-base);font-weight:600;color:var(--text);margin-bottom:2px}
.notif-item-desc{font-size:var(--text-sm);color:var(--text-muted);line-height:1.4}
.user-name{font-family:var(--font-mono);font-size:var(--text-base);font-weight:600;color:var(--text);cursor:pointer;position:relative}
.user-menu{position:absolute;top:100%;right:0;margin-top:10px;background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:220px;padding:var(--space-2) 0;z-index:100;display:none;font-family:'DM Sans',sans-serif}
.user-menu.open{display:block}
.user-menu-item{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;padding:var(--space-3) var(--space-5);border-radius:0;font-size:var(--text-base);font-weight:450;color:var(--text);transition:all var(--duration-fast) var(--ease);border:none;background:none;cursor:pointer;line-height:1.3}
.user-menu-item span:first-child{display:inline-flex;width:16px;font-size:var(--text-md);text-align:center;flex-shrink:0}
.user-menu-item:hover{background:rgba(45,106,79,0.04);color:var(--indigo)}
.user-menu-item.danger{color:var(--text-muted);font-weight:400}
.user-menu-item.danger:hover{background:rgba(155,68,68,0.05);color:var(--coral)}
.user-menu-divider{height:1px;background:var(--divider);margin:6px 14px}

/* ========== REEVAL NUDGE ========== */
.reeval-banner{background:linear-gradient(135deg,var(--indigo-light),var(--indigo-light));border:1px solid rgba(45,106,79,0.15);border-radius:var(--radius);padding:var(--space-4) var(--space-5);margin-bottom:20px;display:flex;align-items:center;gap:var(--space-4)}
.reeval-banner.hidden{display:none}
.reeval-icon{width:36px;height:36px;border-radius:var(--radius-full);background:var(--indigo);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);flex-shrink:0}
.reeval-text{flex:1;font-size:var(--text-base);color:var(--text);line-height:1.45}
.reeval-text strong{font-weight:600}
.reeval-btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--indigo);color:white;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;white-space:nowrap;transition:all var(--duration-base) var(--ease)}
.reeval-btn:hover{background:var(--emerald)}


/* ========== ROLE SELECTOR ========== */
.role-selector{display:flex;gap:var(--space-2);margin-bottom:8px}
.role-btn{flex:1;padding:var(--space-4) var(--space-3);border:2px solid var(--divider);border-radius:var(--radius);cursor:pointer;text-align:center;transition:all var(--duration-base) var(--ease);background:var(--surface);-webkit-tap-highlight-color:transparent;user-select:none}
.role-btn:hover{border-color:var(--indigo);background:var(--indigo-light)}
.role-btn:active{transform:scale(0.97)}
.role-btn.active{border-color:var(--indigo);background:var(--indigo-light);box-shadow:0 0 0 3px rgba(45,106,79,0.15)}
.role-btn-icon{font-size:var(--text-xl);margin-bottom:6px}
.role-btn-label{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;letter-spacing:1px;text-transform:uppercase}
.role-btn-desc{font-size:var(--text-sm);color:var(--text-muted);margin-top:4px}

/* ========== SPOTIFY ONBOARDING OVERLAY (NEW) ========== */
.spotify-onboard-overlay{position:fixed;inset:0;z-index:9997;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity var(--duration-slow) var(--ease);overflow-y:auto}
.spotify-onboard-overlay.hidden{opacity:0;pointer-events:none}
.spotify-onboard-container{max-width:520px;width:100%;padding:40px 24px;margin:auto}

.spotify-onboard-header{text-align:center;margin-bottom:32px}
.spotify-onboard-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--indigo);margin-bottom:8px}
.spotify-onboard-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:8px}
.spotify-onboard-desc{font-size:14px;color:var(--text-muted);max-width:480px;margin:0 auto;line-height:1.5}

/* Claim code section */
.spotify-claim-section{background:var(--indigo-soft);border:1px dashed var(--indigo);border-radius:var(--radius-sm);padding:16px;margin-bottom:24px}
.spotify-claim-title{font-weight:600;font-size:14px;margin-bottom:4px}
.spotify-claim-desc{font-size:12px;color:var(--text-muted);margin-bottom:12px;line-height:1.4}
.spotify-claim-row{display:flex;gap:8px}
.spotify-claim-input{font-family:var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-size:14px;outline:none;transition:border-color var(--duration-base) var(--ease)}
.spotify-claim-input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-soft)}
.spotify-claim-btn{white-space:nowrap;padding:8px 16px !important;margin-top:0 !important}
.spotify-claim-result{margin-top:8px}

/* Divider */
.spotify-divider{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.spotify-divider-line{flex:1;border-top:1px dashed var(--divider)}
.spotify-divider-text{font-size:11px;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:1px;white-space:nowrap}

/* Spotify URL input with prefix */
.spotify-url-field{background:var(--surface-offset);border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color var(--duration-base) var(--ease)}
.spotify-url-field:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-soft)}
.spotify-url-label{display:flex;align-items:center;gap:8px;padding:10px 14px 0;font-size:12px;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:0.3px;user-select:none}
.spotify-icon{width:18px;height:18px;flex-shrink:0}
.spotify-url-prefix{color:var(--text-faint);font-size:12px}
.spotify-id-input{width:100%;padding:6px 14px 12px;border:none;background:transparent;font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:0.5px;color:var(--text);outline:none}
.spotify-id-input::placeholder{color:var(--text-faint);font-weight:400;opacity:0.6}

.spotify-verify-error{color:var(--coral);font-size:13px;font-weight:500;min-height:0;margin-top:8px;transition:all var(--duration-base) var(--ease)}

.spotify-verify-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px !important}

/* Discovered profiles result */
.spotify-profiles-result{margin-top:24px;animation:quizFadeIn 400ms var(--ease)}
.spotify-profiles-header{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:0.5px;color:var(--emerald);margin-bottom:8px}
.spotify-artist-name{font-size:20px;font-weight:700;color:var(--text);margin-bottom:20px}
.spotify-profiles-title{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}

.spotify-profiles-list{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}
.spotify-profile-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius-sm);font-size:13px;color:var(--text);transition:all var(--duration-base) var(--ease)}
.spotify-profile-item:hover{border-color:var(--indigo);background:var(--indigo-light)}
.spotify-profile-icon{width:20px;text-align:center;font-size:14px;flex-shrink:0}
.spotify-profile-name{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:var(--text-muted);min-width:100px}
.spotify-profile-url{flex:1;color:var(--indigo);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.spotify-profile-url:hover{text-decoration:underline}

.spotify-continue-btn{margin-top:0 !important}