.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);border:none;border-radius:var(--radius-lg);font-family:var(--font-family);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;text-decoration:none;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.btn:focus-visible{outline:2px solid var(--color-primary-light);outline-offset:2px}.btn--primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md),0 0 0 0 var(--color-primary-glow)}.btn--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow)}.btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.btn--secondary{background:transparent;color:var(--text-primary);border:2px solid var(--color-primary);box-shadow:none}.btn--secondary:hover:not(:disabled){background:var(--color-primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-glow)}.btn--secondary:active:not(:disabled){transform:translateY(0)}.btn--ghost{background:transparent;color:var(--text-secondary);border:none}.btn--ghost:hover:not(:disabled){color:var(--text-primary);background:#7c3aed1a}.btn--accent{background:var(--gradient-accent);color:var(--text-inverse);font-weight:var(--font-bold);box-shadow:var(--shadow-md)}.btn--accent:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow-accent)}.btn--accent:active:not(:disabled){transform:translateY(0)}.btn--danger{background:var(--color-error);color:#fff}.btn--danger:hover:not(:disabled){background:#dc2626;transform:translateY(-2px);box-shadow:0 0 20px #ef44444d}.btn--sm{padding:.625rem 1rem;font-size:var(--text-sm);border-radius:var(--radius-md);min-height:44px}.btn--md{padding:.75rem 1.5rem;font-size:var(--text-base);min-height:44px}.btn--lg{padding:1rem 2rem;font-size:var(--text-lg);border-radius:var(--radius-xl);min-height:48px}.btn--full{width:100%}.btn--with-icon .btn__content{display:flex;align-items:center;gap:var(--space-sm)}.btn__icon{display:flex;align-items:center;font-size:1.2em}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn--loading{cursor:wait}.btn__spinner{position:absolute;display:flex;gap:4px;align-items:center}.btn__spinner-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:bounce .6s ease-in-out infinite}.btn__spinner-dot:nth-child(2){animation-delay:.1s}.btn__spinner-dot:nth-child(3){animation-delay:.2s}.btn__content--hidden{visibility:hidden}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.visualizer{display:flex;align-items:flex-end;justify-content:center;gap:2px;overflow:hidden}.visualizer--default{height:64px;width:100%;padding:0 var(--space-md)}.visualizer--compact{height:40px;width:100%}.visualizer--hero{height:120px;width:100%;max-width:400px;padding:0 var(--space-lg)}.visualizer__bar{flex:1;min-width:2px;max-width:8px;border-radius:2px 2px 0 0;background:var(--gradient-primary);height:15%;opacity:.4;transition:opacity var(--transition-fast)}.visualizer--playing .visualizer__bar{opacity:1;animation:visualizer-bounce var(--bar-duration, 1s) ease-in-out infinite alternate;animation-delay:var(--bar-delay, 0s)}.visualizer:not(.visualizer--playing) .visualizer__bar{animation:none}.visualizer--hero .visualizer__bar{max-width:12px;border-radius:4px 4px 0 0}.visualizer--compact .visualizer__bar{max-width:4px}@keyframes visualizer-bounce{0%{height:15%}to{height:calc(var(--bar-max-scale, .8) * 100%)}}@media (prefers-reduced-motion: reduce){.visualizer--playing .visualizer__bar{animation:none;height:calc(var(--bar-max-scale, .8) * 60%)}}.card{border-radius:var(--radius-lg);transition:all var(--transition-base)}.card--default{background:var(--bg-card);border:1px solid rgba(124,58,237,.1)}.card--elevated{background:var(--gradient-card);border:1px solid rgba(124,58,237,.15);box-shadow:var(--shadow-md)}.card--glass{background:#241a36d9;border:1px solid rgba(124,58,237,.15)}@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)){.card--glass{background:#241a3699;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}.card--interactive{background:var(--bg-card);border:1px solid rgba(124,58,237,.1);cursor:pointer}.card--interactive:hover{background:var(--bg-card-hover);border-color:var(--color-primary);transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--shadow-glow)}.card--interactive:active{transform:translateY(-2px)}.card--pad-none{padding:0}.card--pad-sm{padding:var(--space-md)}.card--pad-md{padding:var(--space-xl)}.card--pad-lg{padding:var(--space-2xl)}.input-group{display:flex;flex-direction:column;gap:var(--space-xs)}.input-group--full{width:100%}.input-group__label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);margin-bottom:2px}.input-group__input{background:var(--bg-input);border:2px solid rgba(124,58,237,.15);border-radius:var(--radius-md);padding:.75rem 1rem;font-size:var(--text-base);font-family:var(--font-family);color:var(--text-primary);transition:all var(--transition-base);outline:none;width:100%;box-sizing:border-box}.input-group__input::placeholder{color:var(--text-muted)}.input-group__input:hover{border-color:#7c3aed4d}.input-group__input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.input-group__input--error{border-color:var(--color-error)}.input-group__input--error:focus{box-shadow:0 0 0 3px #ef444433}.input-group__textarea{resize:vertical;min-height:100px}.input-group__error{font-size:var(--text-xs);color:var(--color-error);display:flex;align-items:center;gap:var(--space-xs)}.input-group__hint{font-size:var(--text-xs);color:var(--text-muted)}.home{position:relative;max-width:var(--max-width);margin:0 auto;padding:var(--space-xl);overflow:hidden}.home__bg-orb{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}.home__bg-orb--1{width:600px;height:600px;background:#7c3aed1f;top:-200px;right:-200px}.home__bg-orb--2{width:400px;height:400px;background:#f7258514;bottom:200px;left:-150px}.home__bg-orb--3{width:300px;height:300px;background:#06d6a00f;bottom:-100px;right:100px}.home__hero{position:relative;z-index:var(--z-base);display:flex;flex-direction:column;align-items:center;text-align:center;min-height:60vh;padding:var(--space-3xl) 0;justify-content:center}.home__hero-content{display:flex;flex-direction:column;align-items:center;animation:fadeInUp .6s ease forwards}.home__title-group{position:relative;display:inline-block;padding:var(--space-lg) var(--space-xl)}.home__title-visualizer{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;opacity:.12;pointer-events:none;z-index:0;overflow:hidden}.home__title-visualizer .visualizer--hero{height:100%;max-width:none;width:120%}.home__title{position:relative;z-index:1;font-size:var(--text-5xl);font-weight:var(--font-extrabold);line-height:1.1;margin:0 0 var(--space-lg);color:var(--text-primary);letter-spacing:-.02em}.home__title-accent{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.home__subtitle{font-size:var(--text-lg);line-height:1.7;color:var(--text-secondary);margin:0 0 var(--space-2xl);max-width:560px}.home__cta-group{display:flex;gap:var(--space-md);flex-wrap:wrap;justify-content:center}.home__join-section{margin-top:var(--space-xl);display:flex;flex-direction:column;align-items:center}.home__join-label{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 var(--space-sm)}.home__join-row{display:flex;gap:var(--space-sm);align-items:flex-start;max-width:400px;width:100%}.home__join-row .input-group{flex:1}.home__your-quizzes{position:relative;z-index:var(--z-base);padding:var(--space-3xl) 0}.home__quiz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}.home__quiz-card-square{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:flex-end;overflow:hidden}.home__quiz-card-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.home__quiz-card-square--has-cover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#00000026,#0000008c,#000000d9);pointer-events:none}.home__quiz-card-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-md);width:100%}.home__quiz-card-title{margin:0;font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}.home__quiz-card-square--has-cover .home__quiz-card-title{color:#fff}.home__quiz-card-desc{margin:0;font-size:var(--text-xs);color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home__quiz-card-square--has-cover .home__quiz-card-desc{color:#ffffffb3}.home__quiz-card-meta{display:flex;gap:var(--space-md);font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-xs)}.home__quiz-card-square--has-cover .home__quiz-card-meta{color:#ffffff80}.home__sample-toggle{display:flex;align-items:center;gap:var(--space-sm);background:none;border:none;cursor:pointer;padding:0;margin-bottom:var(--space-xl);font-family:var(--font-family)}.home__sample-toggle[aria-expanded=false]{margin-bottom:0}.home__section-title--inline{text-align:left;margin:0}.home__sample-chevron{color:var(--text-muted);transition:transform var(--transition-fast);flex-shrink:0}.home__sample-chevron--open{transform:rotate(180deg)}.home__features{position:relative;z-index:var(--z-base);padding:var(--space-3xl) 0}.home__section-title{font-size:var(--text-3xl);font-weight:var(--font-bold);text-align:center;margin:0 0 var(--space-2xl);color:var(--text-primary)}.home__features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}.home__feature{display:flex;flex-direction:column;gap:var(--space-sm)}.home__feature-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);margin-bottom:var(--space-sm)}.home__feature-icon--purple{background:#7c3aed26;color:var(--color-primary-light)}.home__feature-icon--pink{background:#f7258526;color:var(--color-secondary-light)}.home__feature-icon--green{background:#06d6a026;color:var(--color-accent)}.home__feature-icon--yellow{background:#fbbf2426;color:var(--color-warning)}.home__feature-title{margin:0;font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary)}.home__feature-desc{margin:0;font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary)}.home__how-it-works{position:relative;z-index:var(--z-base);padding:var(--space-3xl) 0}.home__steps{display:flex;align-items:flex-start;justify-content:center;gap:0}.home__step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;max-width:280px;padding:0 var(--space-md)}.home__step-number{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gradient-primary);color:#fff;font-size:var(--text-xl);font-weight:var(--font-bold);margin-bottom:var(--space-md);box-shadow:var(--shadow-glow)}.home__step-connector{width:80px;min-width:40px;height:2px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));margin-top:24px;opacity:.3;flex-shrink:1}.home__step-title{margin:0 0 var(--space-sm);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.home__step-desc{margin:0;font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary)}.home__footer-cta{position:relative;z-index:var(--z-base);padding:var(--space-2xl) 0 var(--space-3xl)}.home__footer-cta-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-md)}.home__footer-cta-title{margin:0;font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--text-primary)}.home__footer-cta-desc{margin:0;font-size:var(--text-lg);color:var(--text-secondary)}@media (max-width: 900px){.home__hero{min-height:auto;padding:var(--space-2xl) 0}.home__subtitle{max-width:100%}.home__features-grid{grid-template-columns:1fr}.home__title{font-size:var(--text-4xl)}}@media (max-width: 640px){.home{padding:var(--space-md)}.home__title{font-size:var(--text-3xl)}.home__title-group{padding:var(--space-sm) var(--space-md)}.home__subtitle{font-size:var(--text-base)}.home__quiz-grid{grid-template-columns:repeat(2,1fr)}.home__cta-group{flex-direction:column;width:100%}.home__cta-group .btn{width:100%}.home__steps{flex-direction:column;align-items:center}.home__step-connector{width:2px;height:32px;min-width:2px;margin-top:0;background:linear-gradient(180deg,var(--color-primary),var(--color-secondary))}}.progress{width:100%}.progress__label{display:flex;justify-content:space-between;margin-bottom:var(--space-xs)}.progress__label-text{font-size:var(--text-sm);color:var(--text-secondary)}.progress__label-percent{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary)}.progress__track{width:100%;border-radius:var(--radius-full);background:#7c3aed1a;overflow:hidden}.progress--sm .progress__track{height:4px}.progress--md .progress__track{height:8px}.progress--lg .progress__track{height:12px}.progress__fill{height:100%;border-radius:var(--radius-full);transition:width .6s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.progress__fill--primary{background:var(--gradient-primary)}.progress__fill--accent{background:var(--gradient-accent)}.progress__fill--warm{background:var(--gradient-warm)}.progress__fill--animated:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 2s ease-in-out infinite}.audio-url-input{display:flex;flex-direction:column;gap:var(--space-sm)}.audio-url-input__input-wrap{position:relative;display:flex;align-items:center}.audio-url-input__icon{position:absolute;left:12px;color:var(--text-muted);pointer-events:none}.audio-url-input__input{width:100%;padding:.7rem .8rem .7rem 36px;background:var(--bg-input);border:2px solid rgba(124,58,237,.15);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:var(--font-family);color:var(--text-primary);transition:all var(--transition-base);outline:none}.audio-url-input__input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.audio-url-input__input::placeholder{color:var(--text-muted)}.audio-url-input__hint{font-size:var(--text-xs);color:var(--text-muted)}.audio-url-input__preview{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:#06d6a014;border:1px solid rgba(6,214,160,.2);border-radius:var(--radius-md);animation:fadeIn var(--transition-fast) ease}.audio-url-input__preview-info{display:flex;align-items:center;gap:var(--space-md);min-width:0}.audio-url-input__platform-icon{flex-shrink:0}.audio-url-input__platform-icon--youtube{color:red}.audio-url-input__platform-icon--spotify{color:#1db954}.audio-url-input__preview-details{display:flex;flex-direction:column;min-width:0}.audio-url-input__preview-platform{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}.audio-url-input__preview-id{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audio-url-input__remove{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.audio-url-input__remove:hover{background:#ef44441a;color:var(--color-error)}.audio-url-input__error{font-size:var(--text-xs);color:var(--color-error);animation:fadeIn var(--transition-fast) ease}.audio-player{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--bg-card);border:1px solid rgba(124,58,237,.15);border-radius:var(--radius-xl);animation:fadeInUp var(--transition-slow) ease}.audio-player--disabled{opacity:.5;pointer-events:none}.audio-player__play-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;min-width:52px;border-radius:50%;border:none;background:var(--gradient-primary);color:#fff;cursor:pointer;transition:all var(--transition-base);padding:0;box-shadow:var(--shadow-md)}.audio-player__play-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:var(--shadow-lg),var(--shadow-glow)}.audio-player__play-btn:active:not(:disabled){transform:scale(.95)}.audio-player__play-btn--playing{animation:pulseGlow 2s ease-in-out infinite}.audio-player__play-btn:disabled{opacity:.5;cursor:not-allowed}.audio-player__loader{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.audio-player__middle{flex:1;display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}.audio-player__progress-track{width:100%;height:4px;background:#7c3aed26;border-radius:var(--radius-full);overflow:hidden}.audio-player__progress-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width .2s linear;position:relative}.audio-player__progress-fill:after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 6px var(--color-primary-glow);opacity:0;transition:opacity var(--transition-fast)}.audio-player:hover .audio-player__progress-fill:after{opacity:1}.audio-player__time{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}.audio-player--spotify{flex-direction:column;gap:var(--space-sm);padding:var(--space-md)}.audio-player__spotify-embed{width:100%;border-radius:12px;overflow:hidden}.audio-player__spotify-embed iframe{display:block}.audio-player__timer-section{display:flex;align-items:center;gap:var(--space-md);width:100%}.audio-player__play-btn--small{width:36px;height:36px;min-width:36px}@media (max-width: 480px){.audio-player{padding:var(--space-sm) var(--space-md);gap:var(--space-sm)}.audio-player__play-btn{width:44px;height:44px;min-width:44px}.audio-player__play-btn--small{width:32px;height:32px;min-width:32px}}.creator{max-width:var(--max-width-narrow);margin:0 auto;padding:var(--space-xl);padding-bottom:0}.creator__header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.creator__back{display:flex;align-items:center;gap:var(--space-xs);background:none;border:none;color:var(--text-secondary);font-size:var(--text-sm);font-family:var(--font-family);cursor:pointer;padding:var(--space-sm);border-radius:var(--radius-md);transition:all var(--transition-fast)}.creator__back:hover{color:var(--text-primary);background:#7c3aed1a}.creator__title{margin:0;font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary)}.creator__progress{margin-bottom:var(--space-2xl)}.creator__steps-nav{display:flex;gap:var(--space-xs);margin-top:var(--space-md)}.creator__step-tab{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:transparent;border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-family:var(--font-family);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.creator__step-tab:disabled{cursor:not-allowed;opacity:.4}.creator__step-tab--active{color:var(--text-primary);background:#7c3aed26}.creator__step-tab--done{color:var(--color-accent)}.creator__step-num{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:var(--text-xs);font-weight:var(--font-bold);background:#7c3aed1a}.creator__step-tab--active .creator__step-num{background:var(--color-primary);color:#fff}.creator__step-tab--done .creator__step-num{background:var(--color-accent);color:var(--text-inverse)}.creator__step-label{display:none}@media (min-width: 640px){.creator__step-label{display:inline}}.creator__panel-title{margin:0 0 var(--space-sm);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary)}.creator__panel-desc{margin:0 0 var(--space-xl);color:var(--text-secondary);font-size:var(--text-sm)}.creator__form{display:flex;flex-direction:column;gap:var(--space-lg)}.creator__form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}@media (max-width: 480px){.creator__form-row{grid-template-columns:1fr}}.creator__form-section{display:flex;flex-direction:column;gap:var(--space-sm)}.creator__form-hint{margin:0;font-size:var(--text-xs);color:var(--text-muted)}.creator__preview-player{margin-bottom:var(--space-sm)}.creator__validation-warning{color:var(--color-warning);font-weight:var(--font-medium)}.creator__setting-warning{margin:var(--space-xs) 0 0;font-size:var(--text-xs);color:var(--color-warning);font-weight:var(--font-medium)}.creator__setting-sub{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid rgba(124,58,237,.1)}.creator__slider-group{display:flex;align-items:center;gap:var(--space-md)}.creator__slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:var(--radius-full);background:#7c3aed26;outline:none}.creator__slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:var(--shadow-glow);transition:transform var(--transition-fast)}.creator__slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.creator__slider::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:var(--shadow-glow)}.creator__slider-value{min-width:40px;text-align:center;font-weight:var(--font-bold);font-size:var(--text-lg);color:var(--color-primary-light);font-variant-numeric:tabular-nums}.creator__add-mode-toggle{display:flex;gap:2px;background:#7c3aed14;border-radius:var(--radius-md);padding:3px;margin-bottom:var(--space-lg)}.creator__add-mode-btn{flex:1;padding:var(--space-sm) var(--space-md);background:transparent;border:none;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-medium);font-family:var(--font-family);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.creator__add-mode-btn:hover{color:var(--text-primary)}.creator__add-mode-btn--active{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.creator__import-panel{margin-bottom:var(--space-lg);animation:fadeIn var(--transition-fast) ease}.creator__import-status{display:flex;flex-direction:column;gap:var(--space-sm)}.creator__import-message{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}.creator__import-status--error .creator__import-message{color:var(--color-error)}.creator__import-status--done .creator__import-message{color:var(--color-success)}.creator__questions-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-sm)}.creator__question-count{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--font-medium)}.creator__song-list{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-lg)}.creator__song-list-note{margin:0 0 var(--space-xs);font-size:var(--text-xs);color:var(--text-muted);font-style:italic}.creator__song-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--bg-card);border:1px solid rgba(124,58,237,.1);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}.creator__song-item:hover{border-color:#7c3aed40}.creator__song-platform-icon{flex-shrink:0}.creator__song-platform-icon--youtube{color:red}.creator__song-platform-icon--spotify{color:#1db954}.creator__song-info{flex:1;min-width:0;display:flex;flex-direction:column}.creator__song-title{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.creator__song-artist{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.creator__song-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.creator__song-remove:hover{background:#ef444426;color:var(--color-error)}.creator__edit-songs-actions{display:flex;align-items:center;gap:var(--space-md)}.creator__shuffle-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:transparent;border:1px dashed rgba(124,58,237,.3);border-radius:var(--radius-md);color:var(--color-primary-light);font-size:var(--text-sm);font-family:var(--font-family);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast)}.creator__shuffle-btn:hover{border-color:var(--color-primary);background:#7c3aed1a;color:var(--color-primary)}.creator__accordion{display:flex;flex-direction:column;gap:var(--space-xs)}.creator__accordion-item{border:1px solid rgba(124,58,237,.1);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--transition-fast)}.creator__accordion-item--expanded{border-color:#7c3aed4d}.creator__accordion-header{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);width:100%;background:var(--bg-card);border:none;cursor:pointer;font-family:var(--font-family);text-align:left;transition:background var(--transition-fast)}.creator__accordion-header:hover{background:#7c3aed0d}.creator__accordion-num{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gradient-primary);color:#fff;font-size:var(--text-xs);font-weight:var(--font-bold);flex-shrink:0}.creator__accordion-info{flex:1;min-width:0;display:flex;flex-direction:column}.creator__accordion-title{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.creator__accordion-artist{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.creator__accordion-chevron{flex-shrink:0;color:var(--text-muted);transition:transform var(--transition-fast)}.creator__accordion-chevron--open{transform:rotate(180deg)}.creator__accordion-body{padding:0 var(--space-md) var(--space-lg);border-top:1px solid rgba(124,58,237,.1);padding-top:var(--space-lg);animation:fadeIn var(--transition-fast) ease}.creator__options{display:flex;flex-direction:column;gap:var(--space-sm)}.creator__option{display:flex;align-items:center;gap:var(--space-sm)}.creator__option-radio{width:28px;height:28px;min-width:28px;border-radius:50%;border:2px solid rgba(124,58,237,.3);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);padding:0;color:#fff}.creator__option-radio:hover{border-color:var(--color-accent)}.creator__option-radio--selected{background:var(--color-accent);border-color:var(--color-accent)}.creator__option-input{flex:1;background:var(--bg-input);border:2px solid rgba(124,58,237,.15);border-radius:var(--radius-md);padding:.6rem .8rem;font-size:var(--text-sm);font-family:var(--font-family);color:var(--text-primary);transition:all var(--transition-base);outline:none}.creator__option-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.creator__option-input::placeholder{color:var(--text-muted)}.creator__add-hint{background:none;border:none;color:var(--color-primary-light);font-size:var(--text-sm);font-family:var(--font-family);cursor:pointer;padding:var(--space-sm);text-align:left;transition:color var(--transition-fast)}.creator__add-hint:hover{color:var(--color-primary)}.creator__settings{display:flex;flex-direction:column;gap:var(--space-lg)}.creator__setting{display:flex;flex-direction:column;gap:var(--space-sm)}.creator__setting-label{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}.creator__setting-desc{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}.creator__setting-toggle-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-md)}.creator__snippet-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-top:var(--space-sm)}.creator__snippet-preset{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-md);background:var(--bg-input);border:2px solid rgba(124,58,237,.1);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family)}.creator__snippet-preset:hover{border-color:var(--color-primary)}.creator__snippet-preset--active{border-color:var(--color-primary);background:#7c3aed26;box-shadow:0 0 0 1px var(--color-primary)}.creator__snippet-preset-value{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary)}.creator__snippet-preset-desc{font-size:var(--text-xs);color:var(--text-muted)}.creator__answer-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-top:var(--space-sm)}.creator__answer-mode-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-md);background:var(--bg-input);border:2px solid rgba(124,58,237,.1);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family)}.creator__answer-mode-btn:hover{border-color:var(--color-primary)}.creator__answer-mode-btn--active{border-color:var(--color-primary);background:#7c3aed26;box-shadow:0 0 0 1px var(--color-primary)}.creator__answer-mode-label{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--text-primary)}.creator__answer-mode-desc{font-size:var(--text-xs);color:var(--text-muted)}.creator__auto-generate-btn{background:none;border:1px dashed rgba(124,58,237,.3);color:var(--color-primary-light);font-size:var(--text-sm);font-family:var(--font-family);cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);transition:all var(--transition-fast);text-align:left}.creator__auto-generate-btn:hover{border-color:var(--color-primary);background:#7c3aed1a;color:var(--color-primary)}.creator__hint-options{display:flex;gap:var(--space-sm);margin-top:var(--space-sm)}.creator__hint-option{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:2px solid rgba(124,58,237,.1);background:var(--bg-input);color:var(--text-secondary);font-weight:var(--font-semibold);font-size:var(--text-base);font-family:var(--font-family);cursor:pointer;transition:all var(--transition-fast)}.creator__hint-option:hover{border-color:var(--color-primary)}.creator__hint-option--active{border-color:var(--color-primary);background:#7c3aed26;color:var(--color-primary-light)}.creator__toggle{width:52px;height:28px;border-radius:var(--radius-full);border:none;background:#7c3aed26;cursor:pointer;position:relative;transition:background var(--transition-fast);padding:0;flex-shrink:0}.creator__toggle--active{background:var(--color-primary)}.creator__toggle-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform var(--transition-base);box-shadow:var(--shadow-sm)}.creator__toggle--active .creator__toggle-thumb{transform:translate(24px)}.creator__password-input{margin-top:var(--space-sm);animation:fadeInDown var(--transition-fast) ease}.creator__cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--space-sm);margin-top:var(--space-sm)}.creator__cover-option{position:relative;aspect-ratio:1;border-radius:var(--radius-md);border:2px solid rgba(124,58,237,.1);background:var(--bg-input);cursor:pointer;overflow:hidden;padding:0;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.creator__cover-option:hover{border-color:var(--color-primary)}.creator__cover-option--selected{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.creator__cover-auto{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-secondary);font-family:var(--font-family)}.creator__cover-thumb{width:100%;height:100%;object-fit:cover}.creator__cover-check{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center}.creator__review{display:flex;flex-direction:column;gap:var(--space-lg)}.creator__review-section{margin-bottom:var(--space-md)}.creator__review-section:last-child{margin-bottom:0}.creator__review-label{margin:0 0 var(--space-xs);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.creator__review-value{margin:0;font-size:var(--text-base);color:var(--text-primary)}.creator__review-questions{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-sm)}.creator__review-question{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:#7c3aed0d;border-radius:var(--radius-md)}.creator__review-q-num{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gradient-primary);color:#fff;font-size:var(--text-xs);font-weight:var(--font-bold);flex-shrink:0}.creator__review-q-title{margin:0;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}.creator__review-q-info{flex:1;min-width:0}.creator__review-q-artist{margin:0;font-size:var(--text-xs);color:var(--text-muted)}.creator__review-q-source{font-size:var(--text-xs);color:var(--text-muted);text-decoration:none;background:#7c3aed1a;padding:2px var(--space-sm);border-radius:var(--radius-sm);flex-shrink:0;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all var(--transition-fast)}.creator__review-q-source:hover{color:var(--color-primary-light);background:#7c3aed33}.creator__review-settings{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-sm)}.creator__review-setting{display:flex;justify-content:space-between;padding:var(--space-sm) 0;border-bottom:1px solid rgba(124,58,237,.05);font-size:var(--text-sm);color:var(--text-secondary)}.creator__review-setting strong{color:var(--text-primary)}.creator__footer{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) 0 var(--space-lg);margin-top:var(--space-lg);border-top:1px solid rgba(124,58,237,.1)}@media (max-width: 480px){.creator{padding:var(--space-md)}.creator__snippet-presets{grid-template-columns:repeat(2,1fr)}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--bg-overlay);z-index:var(--z-modal-backdrop);animation:fadeIn var(--transition-fast) ease;padding:var(--space-md)}.modal{background:var(--bg-card);border:1px solid rgba(124,58,237,.2);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg),var(--shadow-glow);animation:scaleIn var(--transition-spring) forwards;max-height:90vh;overflow-y:auto;width:100%}.modal--sm{max-width:400px}.modal--md{max-width:560px}.modal--lg{max-width:720px}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);border-bottom:1px solid rgba(124,58,237,.1)}.modal__title{margin:0;font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary)}.modal__close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--radius-md);background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);padding:0}.modal__close:hover{background:#7c3aed1a;color:var(--text-primary)}.modal__body{padding:var(--space-xl)}.share-modal{display:flex;flex-direction:column;gap:var(--space-xl)}.share-modal__section{display:flex;flex-direction:column;gap:var(--space-sm)}.share-modal__section-header{display:flex;align-items:center;gap:var(--space-sm)}.share-modal__section-title{margin:0;font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.share-modal__info-toggle{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--text-muted);border-radius:var(--radius-full);background:transparent;color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--font-bold);cursor:pointer;transition:all var(--transition-fast);padding:0;line-height:1}.share-modal__info-toggle:hover,.share-modal__info-toggle--active{border-color:var(--color-primary-light);color:var(--color-primary-light);background:#7c3aed1a}.share-modal__info-panel{margin:0;padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);color:var(--text-secondary);background:#7c3aed0d;border-left:2px solid var(--color-primary-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;line-height:1.5}.share-modal__url-box{padding:var(--space-sm) var(--space-md);background:var(--bg-input);border:1px solid rgba(124,58,237,.15);border-radius:var(--radius-md);overflow:hidden}.share-modal__url-text{display:block;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:all;user-select:all;cursor:text}.share-modal__url-meta{display:flex;align-items:center;justify-content:space-between}.share-modal__char-count{font-size:var(--text-sm);color:var(--text-muted)}.share-modal__note{margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:1.5}.share-modal__short-actions{display:flex;align-items:center;gap:var(--space-sm)}.share-modal__error{font-size:var(--text-sm);color:var(--color-error)}.share-modal__divider{border:none;border-top:1px solid rgba(124,58,237,.1);margin:0}.share-modal__copy-btn--success{border-color:var(--color-success)!important;color:var(--color-success)!important}.player{max-width:var(--max-width-narrow);margin:0 auto;padding:var(--space-md) var(--space-xl)}.player__center{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:var(--space-xl)}.player__center .card{max-width:500px;width:100%;text-align:center}.player__loading{color:var(--text-muted)}.player__password-card{display:flex;flex-direction:column;gap:var(--space-md)}.player__ready-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);overflow:hidden}.player__ready-hero{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:flex-end;overflow:hidden}.player__ready-hero-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.player__ready-hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#00000040,#0000008c,#000000d9);pointer-events:none}.player__ready-hero-content{position:relative;z-index:1;width:100%;padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-xs)}.player__ready-hero-title{font-size:var(--text-3xl);font-weight:var(--font-bold);margin:0;color:#fff}.player__ready-hero-desc{color:#fffc;margin:0;line-height:1.5;font-size:var(--text-sm)}.player__ready-hero-creator{font-size:var(--text-sm);color:#fff9;margin:0}.player__ready-hero-meta{display:flex;gap:var(--space-md);font-size:var(--text-xs);color:#fff9;flex-wrap:wrap;margin-top:var(--space-xs)}.player__ready-title{font-size:var(--text-3xl);font-weight:var(--font-bold);margin:0;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.player__ready-desc{color:var(--text-secondary);margin:0;line-height:1.5}.player__ready-creator{font-size:var(--text-sm);color:var(--text-muted);margin:0}.player__ready-meta{display:flex;gap:var(--space-md);font-size:var(--text-sm);color:var(--text-muted);flex-wrap:wrap;justify-content:center}.player__ready-bottom{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-lg) var(--space-xl);width:100%}.player__ready-plays{font-size:var(--text-xs);color:var(--text-muted);margin:0}.player__ready-actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.player__ready-links{display:flex;gap:var(--space-sm)}.player__header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.player__back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--radius-md);background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);padding:0}.player__back:hover{background:#7c3aed1a;color:var(--text-primary)}.player__header-info{flex:1;display:flex;flex-direction:column;min-width:0}.player__quiz-title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player__question-counter{font-size:var(--text-xs);color:var(--text-muted)}.player__score-badge{display:flex;flex-direction:column;align-items:center;padding:var(--space-sm) var(--space-md);background:#7c3aed1a;border-radius:var(--radius-md);min-width:70px}.player__score-label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.player__score-value{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-primary-light);font-variant-numeric:tabular-nums}.player__question-area{display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-md) 0}.player__audio-section{display:flex;flex-direction:column;gap:var(--space-md)}.player__audio-label{display:flex;flex-direction:column;gap:2px}.player__audio-question-num{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-primary-light);text-transform:uppercase;letter-spacing:.05em}.player__audio-instruction{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary)}.player__audio-error{margin:0;font-size:var(--text-sm);color:var(--color-error)}.player__audio-row{display:flex;gap:var(--space-md);align-items:stretch}.player__audio-row .audio-player{flex:3;min-width:0}.player__points-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm);background:var(--bg-card);border:1px solid rgba(124,58,237,.15);border-radius:var(--radius-xl)}.player__points-dots{display:flex;gap:8px}.player__points-dot{width:14px;height:14px;border-radius:50%;background:#ffffff1a;transition:all var(--transition-base)}.player__points-panel--3 .player__points-dot--active{background:var(--color-success);box-shadow:0 0 8px #22c55e80}.player__points-panel--2 .player__points-dot--active{background:var(--color-primary-light);box-shadow:0 0 8px #7c3aed80}.player__points-panel--1 .player__points-dot--active{background:var(--color-warning);box-shadow:0 0 8px #f59e0b80}.player__points-label{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--text-secondary);white-space:nowrap}.player__extend-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:var(--space-sm);background:var(--bg-card);border:1px solid rgba(124,58,237,.15);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family)}.player__extend-btn:hover{background:var(--bg-card-hover);border-color:var(--color-primary)}.player__extend-time{font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-primary-light)}.player__extend-cost{font-size:var(--text-xs);color:var(--text-muted)}.player__type-in{margin-top:var(--space-md)}.player__type-in-row{display:flex;gap:var(--space-sm);align-items:flex-start}.player__type-in-row .input-group{flex:1}.player__answers{display:flex;flex-direction:column;gap:var(--space-sm)}.player__answer{display:flex;align-items:center;gap:var(--space-md);width:100%;padding:var(--space-md) var(--space-lg);background:var(--bg-card);border:2px solid rgba(124,58,237,.1);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);font-family:var(--font-family);text-align:left;color:var(--text-primary);position:relative;overflow:hidden}.player__answer:hover:not(:disabled){border-color:var(--color-primary);background:var(--bg-card-hover);transform:translate(4px)}.player__answer:active:not(:disabled){transform:translate(2px)}.player__answer:disabled{cursor:default}.player__answer--selected{border-color:var(--color-primary);background:#7c3aed1a}.player__answer--correct{border-color:var(--color-success);background:#22c55e1a;animation:correctPop .4s ease}.player__answer--correct:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(34,197,94,.1) 0%,transparent 100%)}.player__answer--incorrect{border-color:var(--color-error);background:#ef44441a;animation:incorrectShake .4s ease}.player__answer--incorrect:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(239,68,68,.1) 0%,transparent 100%)}.player__answer--dimmed{opacity:.4}.player__answer-letter{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:#7c3aed1a;font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-primary-light);flex-shrink:0;position:relative;z-index:1}.player__answer--correct .player__answer-letter{background:var(--color-success);color:#fff}.player__answer--incorrect .player__answer-letter{background:var(--color-error);color:#fff}.player__answer-text{flex:1;font-size:var(--text-base);font-weight:var(--font-medium);position:relative;z-index:1}.player__answer-icon{display:flex;align-items:center;color:var(--color-success);flex-shrink:0;position:relative;z-index:1}.player__answer-icon--wrong{color:var(--color-error)}.player__feedback{margin-top:0}.player__feedback--correct{border-color:#22c55e4d!important}.player__feedback--incorrect{border-color:#ef44444d!important}.player__feedback-content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.player__feedback-left{display:flex;align-items:center;gap:var(--space-md);min-width:0}.player__feedback-emoji{display:flex;align-items:center;justify-content:center;flex-shrink:0}.player__feedback-emoji--correct{animation:correctPop .4s ease}.player__feedback-emoji--incorrect{animation:incorrectShake .4s ease}.player__feedback-title{margin:0;font-size:var(--text-base);font-weight:var(--font-bold);color:var(--text-primary)}.player__feedback-song{margin:0;font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 640px){.player{padding:var(--space-xs) var(--space-md);min-height:100dvh;display:flex;flex-direction:column}.player__header{margin-bottom:var(--space-sm)}.player__question-area{flex:1;gap:var(--space-sm);padding:var(--space-xs) 0}.player__audio-section{gap:var(--space-sm)}.player__audio-label{gap:0}.player__audio-instruction{font-size:var(--text-base)}.player__audio-row{flex-wrap:wrap;gap:var(--space-sm)}.player__audio-row .audio-player{flex:1 1 100%}.player__points-panel,.player__extend-btn{flex:1 1 0;padding:var(--space-xs)}.player__points-dots{gap:5px}.player__points-dot{width:10px;height:10px}.player__answer{padding:var(--space-md)}.player__feedback{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-sticky);border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin:0}.player__feedback-content{flex-direction:row;align-items:center}.player__feedback-left{min-width:0;flex:1}.player__feedback-song{display:none}}.results{max-width:var(--max-width-narrow);margin:0 auto;padding:var(--space-xl);position:relative;overflow:hidden}.results__center{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:var(--space-xl)}.results__center .card{max-width:500px;width:100%;text-align:center}.results__center .card h2{margin-bottom:var(--space-sm)}.results__center .card p{color:var(--text-secondary);margin-bottom:var(--space-lg)}.results__confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.results__confetti-piece{position:absolute;top:-20px;width:10px;height:10px;border-radius:2px;animation:confetti-fall 3s ease-in forwards;opacity:.8}.results__confetti-piece:nth-child(odd){width:8px;height:14px;border-radius:50%}.results__hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-2xl) 0;position:relative;z-index:1}.results__score-circle{position:relative;width:160px;height:160px;margin-bottom:var(--space-lg)}.results__score-ring{width:100%;height:100%;transform:rotate(-90deg)}.results__score-ring-bg{stroke:#7c3aed1a}.results__score-ring-fill{stroke:var(--color-primary);transition:stroke-dasharray 1.5s cubic-bezier(.34,1.56,.64,1)}.grade--perfect .results__score-ring-fill{stroke:var(--color-accent)}.grade--great .results__score-ring-fill{stroke:var(--color-success)}.grade--good .results__score-ring-fill{stroke:var(--color-primary)}.grade--ok .results__score-ring-fill{stroke:var(--color-warning)}.grade--low .results__score-ring-fill{stroke:var(--color-error)}.results__score-inner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.results__score-percent{font-size:var(--text-4xl);font-weight:var(--font-extrabold);color:var(--text-primary);line-height:1}.results__score-fraction{font-size:var(--text-sm);color:var(--text-muted);margin-top:4px}.results__grade{margin:0;font-size:var(--text-3xl);font-weight:var(--font-bold);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.grade--perfect .results__grade{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text}.results__quiz-name{margin:var(--space-sm) 0 0;font-size:var(--text-base);color:var(--text-secondary)}.results__total-points{margin:var(--space-xs) 0 0;font-size:var(--text-sm);color:var(--text-muted)}.results__share{position:relative;z-index:1;margin-bottom:var(--space-2xl)}.results__share-content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.results__share-preview{flex:1}.results__share-title{margin:0 0 var(--space-sm);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary)}.results__emoji-grid{display:flex;gap:6px;flex-wrap:wrap}.results__emoji-dot{width:16px;height:16px;border-radius:4px}.results__emoji-dot--pts-3{background:var(--color-success)}.results__emoji-dot--pts-2{background:var(--color-primary-light)}.results__emoji-dot--pts-1{background:var(--color-warning)}.results__emoji-dot--pts-0{background:var(--color-error);opacity:.6}.results__share-actions{display:flex;gap:var(--space-sm)}.results__breakdown{position:relative;z-index:1;margin-bottom:var(--space-2xl)}.results__section-title{margin:0 0 var(--space-md);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.results__answers{display:flex;flex-direction:column;gap:var(--space-sm)}.results__answer-card{overflow:hidden}.results__answer-row{display:flex;align-items:center;gap:var(--space-md)}.results__answer-indicator{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}.results__answer-indicator--pts-3{background:#22c55e26;color:var(--color-success)}.results__answer-indicator--pts-2{background:#7c3aed26;color:var(--color-primary-light)}.results__answer-indicator--pts-1{background:#fbbf2426;color:var(--color-warning)}.results__answer-indicator--pts-0{background:#ef444426;color:var(--color-error)}.results__answer-info{flex:1;min-width:0}.results__answer-song{margin:0;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.results__answer-artist{margin:0;font-size:var(--text-xs);color:var(--text-muted)}.results__answer-details{display:flex;gap:var(--space-sm);align-items:center;flex-shrink:0}.results__answer-time{font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}.results__answer-points{font-size:var(--text-sm);font-weight:var(--font-bold);font-variant-numeric:tabular-nums;min-width:28px;text-align:center}.results__answer-points--pts-3{color:var(--color-success)}.results__answer-points--pts-2{color:var(--color-primary-light)}.results__answer-points--pts-1{color:var(--color-warning)}.results__answer-points--pts-0{color:var(--color-error)}.results__answer-extensions{font-size:var(--text-xs);color:var(--text-muted);padding:2px 6px;background:#7c3aed1a;border-radius:var(--radius-sm)}.results__answer-correct{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid rgba(124,58,237,.05);font-size:var(--text-xs);color:var(--color-accent)}.results__actions{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-lg) 0}@media (max-width: 480px){.results{padding:var(--space-md)}.results__score-circle{width:130px;height:130px}.results__score-percent{font-size:var(--text-3xl)}.results__share-content{flex-direction:column;align-items:stretch}}.edit-quiz{max-width:var(--max-width-narrow);margin:0 auto;padding:var(--space-xl)}.edit-quiz__center{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:var(--space-xl)}.edit-quiz__center .card{max-width:500px;width:100%;text-align:center}.edit-quiz__header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-2xl)}.edit-quiz__back{display:flex;align-items:center;gap:var(--space-xs);background:none;border:none;color:var(--text-secondary);font-size:var(--text-sm);font-family:var(--font-family);cursor:pointer;padding:var(--space-sm);border-radius:var(--radius-md);transition:all var(--transition-fast)}.edit-quiz__back:hover{color:var(--text-primary);background:#7c3aed1a}.edit-quiz__title{margin:0;font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary)}.edit-quiz__section{margin-bottom:var(--space-lg)}.edit-quiz__section-title{margin:0 0 var(--space-md);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.edit-quiz__form{display:flex;flex-direction:column;gap:var(--space-md)}.edit-quiz__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}.edit-quiz__stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-md);background:#7c3aed0d;border-radius:var(--radius-md)}.edit-quiz__stat-value{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-primary-light)}.edit-quiz__stat-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.edit-quiz__share-desc{margin:0 0 var(--space-md);font-size:var(--text-sm);color:var(--text-secondary)}.edit-quiz__share-row{display:flex;align-items:center;gap:var(--space-sm)}.edit-quiz__share-url{flex:1;padding:var(--space-sm) var(--space-md);background:var(--bg-input);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono)}.edit-quiz__danger{border-color:#ef444433!important}.edit-quiz__danger-title{color:var(--color-error)!important}.edit-quiz__danger-desc{margin:0 0 var(--space-md);font-size:var(--text-sm);color:var(--text-secondary)}.edit-quiz__modal-content p{margin:0 0 var(--space-lg);color:var(--text-secondary)}.edit-quiz__modal-actions{display:flex;justify-content:flex-end;gap:var(--space-sm)}@media (max-width: 480px){.edit-quiz{padding:var(--space-md)}.edit-quiz__stats{grid-template-columns:repeat(2,1fr)}.edit-quiz__share-row{flex-direction:column;align-items:stretch}}.app{min-height:100vh;position:relative}.app__header{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-xl);background:#0f0a1acc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(124,58,237,.08)}.app__logo{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--text-primary);cursor:pointer;border:none;background:none;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);transition:opacity var(--transition-fast);font-family:var(--font-family)}.app__logo:hover{opacity:.8}.app__logo-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--gradient-primary);color:#fff;font-size:14px;line-height:1}.app__nav{display:flex;gap:var(--space-sm)}.app__main{animation:fadeIn var(--transition-base) ease}@media (max-width: 480px){.app__header{padding:var(--space-sm) var(--space-md)}}:root{--color-primary: #7c3aed;--color-primary-light: #a78bfa;--color-primary-dark: #5b21b6;--color-primary-glow: rgba(124, 58, 237, .3);--color-accent: #06d6a0;--color-accent-light: #34e8b8;--color-accent-dark: #05a87e;--color-secondary: #f72585;--color-secondary-light: #f955a2;--color-secondary-dark: #c51e6b;--color-warning: #fbbf24;--color-error: #ef4444;--color-success: #22c55e;--bg-primary: #0f0a1a;--bg-secondary: #1a1128;--bg-card: #241a36;--bg-card-hover: #2e2245;--bg-input: #1a1128;--bg-overlay: rgba(15, 10, 26, .85);--text-primary: #f0ecf5;--text-secondary: #a89bbf;--text-muted: #6b5f80;--text-inverse: #0f0a1a;--gradient-primary: linear-gradient(135deg, #7c3aed 0%, #f72585 100%);--gradient-accent: linear-gradient(135deg, #06d6a0 0%, #7c3aed 100%);--gradient-warm: linear-gradient(135deg, #f72585 0%, #fbbf24 100%);--gradient-hero: linear-gradient(160deg, #0f0a1a 0%, #1a1128 30%, #2d1a4e 70%, #1a1128 100%);--gradient-card: linear-gradient(145deg, #241a36 0%, #1a1128 100%);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-5xl: 3.5rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 4px 16px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glow: 0 0 20px var(--color-primary-glow);--shadow-glow-accent: 0 0 20px rgba(6, 214, 160, .3);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease;--transition-spring: .4s cubic-bezier(.34, 1.56, .64, 1);--z-base: 1;--z-dropdown: 10;--z-sticky: 20;--z-modal-backdrop: 40;--z-modal: 50;--z-toast: 60;--max-width: 1200px;--max-width-narrow: 720px;--header-height: 64px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 10px var(--color-primary-glow)}50%{box-shadow:0 0 30px var(--color-primary-glow),0 0 60px #7c3aed26}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes confetti-fall{0%{transform:translateY(-100%) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes correctPop{0%{transform:scale(1)}30%{transform:scale(1.15)}60%{transform:scale(.95)}to{transform:scale(1)}}@keyframes incorrectShake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-fade-in{animation:fadeIn var(--transition-base) ease forwards}.animate-fade-in-up{animation:fadeInUp var(--transition-slow) ease forwards}.animate-scale-in{animation:scaleIn var(--transition-spring) forwards}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}*,*:before,*:after{box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{margin:0;font-family:var(--font-family);line-height:1.5;font-weight:var(--font-normal);color:var(--text-primary);background-color:var(--bg-primary);background-image:var(--gradient-hero);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;text-rendering:optimizeLegibility}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;line-height:1.2}a{color:var(--color-primary-light);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary)}:focus-visible{outline:2px solid var(--color-primary-light);outline-offset:2px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#7c3aed4d;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#7c3aed80}::selection{background:#7c3aed4d;color:var(--text-primary)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}