:root{--color-primary:#4f46e5;--color-primary-hover:#4338ca;--color-primary-light:#e0e7ff;--color-accent:#06b6d4;--color-accent-hover:#0891b2;--color-success:#10b981;--color-success-light:#d1fae5;--color-error:#ef4444;--color-error-light:#fee2e2;--color-warning:#f59e0b;--color-bg:#f5f7fa;--color-surface:#fff;--color-surface-hover:#f8fafc;--color-text:#1e293b;--color-text-secondary:#64748b;--color-text-muted:#94a3b8;--color-border:#e2e8f0;--color-border-hover:#cbd5e1;--color-shadow:#00000014;--color-shadow-lg:#0000001f;--color-overlay:#00000080;--font-heading:"Inter", "Noto Sans JP", sans-serif;--font-body:"Noto Sans JP", "Inter", sans-serif;--font-size-xs:clamp(.7rem, 2vw, .75rem);--font-size-sm:clamp(.8rem, 2.5vw, .875rem);--font-size-base:clamp(.875rem, 3vw, 1rem);--font-size-lg:clamp(1rem, 3.5vw, 1.125rem);--font-size-xl:clamp(1.125rem, 4vw, 1.25rem);--font-size-2xl:clamp(1.25rem, 4.5vw, 1.5rem);--font-size-3xl:clamp(1.5rem, 5vw, 1.875rem);--font-size-4xl:clamp(1.875rem, 6vw, 2.25rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px var(--color-shadow);--shadow-md:0 4px 6px -1px var(--color-shadow), 0 2px 4px -2px var(--color-shadow);--shadow-lg:0 10px 15px -3px var(--color-shadow-lg), 0 4px 6px -4px var(--color-shadow);--shadow-xl:0 20px 25px -5px var(--color-shadow-lg), 0 8px 10px -6px var(--color-shadow);--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.35s ease;--max-width:960px;--header-height:64px}[data-theme=dark]{--color-primary:#818cf8;--color-primary-hover:#a5b4fc;--color-primary-light:#312e81;--color-accent:#22d3ee;--color-accent-hover:#67e8f9;--color-success:#34d399;--color-success-light:#064e3b;--color-error:#f87171;--color-error-light:#7f1d1d;--color-warning:#fbbf24;--color-bg:#0f172a;--color-surface:#1e293b;--color-surface-hover:#334155;--color-text:#f1f5f9;--color-text-secondary:#94a3b8;--color-text-muted:#64748b;--color-border:#334155;--color-border-hover:#475569;--color-shadow:#0000004d;--color-shadow-lg:#0006;--color-overlay:#000000b3}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;transition:background-color var(--transition-base), color var(--transition-base);line-height:1.7}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--color-text);font-weight:700;line-height:1.3}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-hover)}img{max-width:100%;height:auto;display:block}button{cursor:pointer;font-family:var(--font-body)}input,textarea,select{font-family:var(--font-body)}#app{flex-direction:column;min-height:100vh;display:flex}.page{flex-direction:column;flex:1;animation:.4s ease-out pageIn;display:flex}@keyframes pageIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.app-header{height:var(--header-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:0 var(--space-6);z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background var(--transition-base), border-color var(--transition-base);background:#ffffffd9;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}[data-theme=dark] .app-header{background:#1e293bd9}.app-header__title{font-size:var(--font-size-lg);align-items:center;gap:var(--space-2);font-weight:700;display:flex}.app-header__title .icon{font-size:var(--font-size-xl)}.app-header__actions{align-items:center;gap:var(--space-3);display:flex}.content-wrapper{width:100%;max-width:var(--max-width);padding:var(--space-6) var(--space-4);padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom));margin:0 auto}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base), background var(--transition-base)}.card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-hover)}.card--interactive{cursor:pointer}.card--interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);font-size:var(--font-size-base);transition:all var(--transition-fast);white-space:normal;word-break:break-word;text-align:center;border:none;font-weight:600;line-height:1.5;display:inline-flex}.btn:active{transform:scale(.97)}.btn--primary{background:var(--color-primary);color:#fff}.btn--primary:hover{background:var(--color-primary-hover);box-shadow:0 4px 12px #4f46e54d}.btn--secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn--secondary:hover{background:var(--color-surface-hover);border-color:var(--color-border-hover)}.btn--success{background:var(--color-success);color:#fff}.btn--success:hover{filter:brightness(1.1)}.btn--danger{background:var(--color-error);color:#fff}.btn--danger:hover{filter:brightness(1.1)}.btn--ghost{color:var(--color-text-secondary);padding:var(--space-2);background:0 0}.btn--ghost:hover{background:var(--color-surface-hover);color:var(--color-text)}.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-lg);border-radius:var(--radius-xl)}.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}.btn--full{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.input{width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-surface);transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-base);outline:none}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.input::placeholder{color:var(--color-text-muted)}.input--lg{padding:var(--space-4) var(--space-5);font-size:var(--font-size-lg)}.badge{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);letter-spacing:.02em;align-items:center;font-weight:600;display:inline-flex}.badge--primary{background:var(--color-primary-light);color:var(--color-primary)}.badge--accent{color:var(--color-accent);background:#06b6d426}.badge--success{background:var(--color-success-light);color:var(--color-success)}.badge--error{background:var(--color-error-light);color:var(--color-error)}.progress{background:var(--color-border);border-radius:var(--radius-full);width:100%;height:6px;overflow:hidden}.progress__bar{background:linear-gradient(90deg, var(--color-primary), var(--color-accent));border-radius:var(--radius-full);height:100%;transition:width var(--transition-base)}.score-display{align-items:center;gap:var(--space-2);color:var(--color-primary);font-weight:700;font-size:var(--font-size-lg);display:flex}.grid{gap:var(--space-4);display:grid}.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}.empty-state{text-align:center;padding:var(--space-16) var(--space-6);color:var(--color-text-muted)}.empty-state__icon{margin-bottom:var(--space-4);font-size:3rem}.empty-state__message{font-size:var(--font-size-lg)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{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 shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes correctFlash{0%{background-color:#0000}50%{background-color:var(--color-success-light)}to{background-color:#0000}}@keyframes incorrectFlash{0%{background-color:#0000}50%{background-color:var(--color-error-light)}to{background-color:#0000}}.animate-fade-in{animation:.4s ease-out fadeIn}.animate-slide-up{animation:.4s ease-out slideUp}.animate-slide-down{animation:.4s ease-out slideDown}.animate-scale-in{animation:.3s ease-out scaleIn}.animate-pulse{animation:.6s ease-in-out pulse}.animate-shake{animation:.5s ease-in-out shake}.animate-correct{animation:.8s ease-out correctFlash}.animate-incorrect{animation:.8s ease-out incorrectFlash}.sound-wave{justify-content:center;align-items:center;gap:3px;height:32px;display:flex}.sound-wave__bar{background:var(--color-primary);border-radius:var(--radius-full);width:4px;height:100%;animation:1.2s ease-in-out infinite wave}.sound-wave__bar:first-child{animation-delay:-.4s}.sound-wave__bar:nth-child(2){animation-delay:-.2s}.sound-wave__bar:nth-child(3){animation-delay:0s}.sound-wave__bar:nth-child(4){animation-delay:-.3s}.sound-wave__bar:nth-child(5){animation-delay:-.1s}@keyframes wave{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.sound-wave--paused .sound-wave__bar{animation-play-state:paused;transform:scaleY(.3)}@media (width<=768px){.content-wrapper{padding:var(--space-6) var(--space-4)}.grid--2{grid-template-columns:1fr}.grid--3{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.app-header{padding:0 var(--space-4)}}@media (width<=480px){:root{--font-size-3xl:1.5rem;--font-size-4xl:1.875rem}.content-wrapper{padding:var(--space-4) var(--space-3)}}.auth-page{min-height:100vh;padding:var(--space-6);background:linear-gradient(135deg, var(--color-bg) 0%, var(--color-primary-light) 100%);justify-content:center;align-items:center;display:flex}.auth-page__container{text-align:center;width:100%;max-width:420px}.auth-page__card{padding:var(--space-10)}.auth-page__icon{margin-bottom:var(--space-4);font-size:3.5rem}.auth-page__title{font-size:var(--font-size-3xl);margin-bottom:var(--space-2);background:linear-gradient(135deg, var(--color-primary), var(--color-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:800}.auth-page__subtitle{color:var(--color-text-secondary);margin-bottom:var(--space-8)}.auth-page__form{gap:var(--space-4);flex-direction:column;display:flex}.auth-page__label{text-align:left;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);font-weight:600;display:block}.auth-page__error{color:var(--color-error);font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3);background:var(--color-error-light);border-radius:var(--radius-md);font-weight:500}.auth-page__footer{margin-top:var(--space-6);color:var(--color-text-muted);font-size:var(--font-size-sm)}.quiz-select__heading{font-size:var(--font-size-2xl);margin-bottom:var(--space-2)}.quiz-select__description{color:var(--color-text-secondary);margin-bottom:var(--space-6)}.quiz-select__filters{gap:var(--space-4);margin-bottom:var(--space-8);flex-wrap:wrap;display:flex}.filter-group{flex:1;min-width:180px}.filter-group__label{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);font-weight:600;display:block}.playlist-card{padding:0;overflow:hidden}.playlist-card__image-wrapper{background:var(--color-border);width:100%;height:180px;position:relative;overflow:hidden}.playlist-card__image{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-slow)}.playlist-card:hover .playlist-card__image{transform:scale(1.05)}.playlist-card__badge-overlay{top:var(--space-3);right:var(--space-3);position:absolute}.playlist-card__body{padding:var(--space-5)}.playlist-card__title{font-size:var(--font-size-lg);margin-bottom:var(--space-3);font-weight:700}.playlist-card__tags{gap:var(--space-2);flex-wrap:wrap;display:flex}.quiz-mini-card{text-align:center;padding:var(--space-5)}.quiz-mini-card__icon{margin-bottom:var(--space-3);font-size:2rem}.quiz-mini-card__title{font-size:var(--font-size-sm);margin-bottom:var(--space-3);font-weight:600;line-height:1.4}.quiz-mini-card__meta{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.quiz-play{max-width:640px;margin:0 auto}.quiz-play__progress{margin-bottom:var(--space-6)}.quiz-play__progress-info{margin-top:var(--space-3);justify-content:space-between;align-items:center;display:flex}.quiz-play__question-count{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:600}.quiz-play__card{padding:var(--space-8)}.quiz-play__question{text-align:center;margin-bottom:var(--space-8)}.quiz-play__question-icon{margin-bottom:var(--space-4);font-size:3rem}.quiz-play__question-text{font-size:var(--font-size-xl);margin-bottom:var(--space-4);font-weight:700}.quiz-play__meta-badges{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.quiz-play__player{justify-content:center;align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);flex-wrap:wrap;display:flex}.quiz-play__play-btn{min-width:160px}.quiz-play__answer-form{gap:var(--space-4);flex-direction:column;display:flex}.quiz-play__result-content{text-align:center;padding:var(--space-6);border-radius:var(--radius-lg)}.quiz-play__result--correct{background:var(--color-success-light)}.quiz-play__result--incorrect{background:var(--color-error-light)}.quiz-play__result-icon{margin-bottom:var(--space-2);font-size:3rem}.quiz-play__result-label{font-size:var(--font-size-2xl);margin-bottom:var(--space-4);font-weight:800}.quiz-play__result--correct .quiz-play__result-label{color:var(--color-success)}.quiz-play__result--incorrect .quiz-play__result-label{color:var(--color-error)}.quiz-play__result-answer{text-align:left;gap:var(--space-2);margin-top:var(--space-4);flex-direction:column;display:flex}.quiz-play__result-row{gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border);display:flex}.quiz-play__result-key{color:var(--color-text-secondary);font-size:var(--font-size-sm);white-space:nowrap;min-width:100px;font-weight:600}.quiz-play__result-value{font-weight:500}.quiz-play__result-value--correct{color:var(--color-success);font-weight:700}.quiz-play__points-earned{margin-top:var(--space-4);font-size:var(--font-size-xl);color:var(--color-success);font-weight:800}.quiz-play__nav{margin-top:var(--space-6)}.result-page{max-width:640px;margin:0 auto}.result-page__score-card{text-align:center;padding:var(--space-10);margin-bottom:var(--space-8)}.result-page__emoji{margin-bottom:var(--space-4);font-size:4rem}.result-page__title{font-size:var(--font-size-3xl);margin-bottom:var(--space-2);font-weight:800}.result-page__message{color:var(--color-text-secondary);margin-bottom:var(--space-8)}.result-page__stats{justify-content:center;align-items:center;gap:var(--space-6);margin-bottom:var(--space-6);flex-wrap:wrap;display:flex}.result-page__stat{text-align:center}.result-page__stat-value{font-size:var(--font-size-3xl);color:var(--color-primary);font-weight:800;display:block}.result-page__stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:500;display:block}.result-page__stat-divider{background:var(--color-border);width:1px;height:40px}.result-page__accuracy-bar{max-width:300px;margin:0 auto}.result-page__details-title{font-size:var(--font-size-xl);margin-bottom:var(--space-4)}.result-page__list{gap:var(--space-3);flex-direction:column;display:flex}.result-page__item{gap:var(--space-4);padding:var(--space-4);border-left:4px solid #0000;display:flex}.result-page__item--correct{border-left-color:var(--color-success)}.result-page__item--incorrect{border-left-color:var(--color-error)}.result-page__item-header{align-items:center;gap:var(--space-1);flex-direction:column;min-width:40px;display:flex}.result-page__item-number{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:700}.result-page__item-icon{font-size:var(--font-size-lg)}.result-page__item-body{flex:1}.result-page__item-question{margin-bottom:var(--space-2);font-weight:600}.result-page__item-answers{gap:var(--space-1);flex-direction:column;display:flex}.result-page__item-row{gap:var(--space-2);font-size:var(--font-size-sm);display:flex}.result-page__item-key{color:var(--color-text-muted);white-space:nowrap}.result-page__item-value--wrong{color:var(--color-error);text-decoration:line-through}.result-page__item-value--correct{color:var(--color-success);font-weight:600}.result-page__item-score{margin-top:var(--space-2);font-size:var(--font-size-sm);color:var(--color-primary);font-weight:700}.result-page__actions{margin-top:var(--space-8);gap:var(--space-3);flex-direction:column;display:flex}.theme-customizer{z-index:1000;pointer-events:none;position:fixed;top:0;bottom:0;right:0}.theme-customizer--open{pointer-events:auto}.theme-customizer__backdrop{background:var(--color-overlay);opacity:0;transition:opacity var(--transition-base);position:fixed;inset:0}.theme-customizer--open .theme-customizer__backdrop{opacity:1}.theme-customizer__panel{background:var(--color-surface);border-left:1px solid var(--color-border);width:320px;max-width:85vw;box-shadow:var(--shadow-xl);transition:transform var(--transition-base);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%)}.theme-customizer--open .theme-customizer__panel{transform:translate(0)}.theme-customizer__header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.theme-customizer__title{font-size:var(--font-size-lg);font-weight:700}.theme-customizer__close{font-size:var(--font-size-lg)}.theme-customizer__body{padding:var(--space-5);gap:var(--space-6);flex-direction:column;display:flex}.theme-customizer__section{gap:var(--space-2);flex-direction:column;display:flex}.theme-customizer__label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:600}.theme-customizer__mode-toggle{gap:var(--space-2);display:flex}.theme-customizer__mode-btn{padding:var(--space-3) var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast);flex:1;font-weight:600}.theme-customizer__mode-btn:hover{border-color:var(--color-border-hover)}.theme-customizer__mode-btn--active{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary)}.theme-customizer__color-row{align-items:center;gap:var(--space-3);display:flex}.theme-customizer__color-input{border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;background:0 0;width:48px;height:36px;padding:2px}.theme-customizer__color-input::-webkit-color-swatch-wrapper{padding:0}.theme-customizer__color-input::-webkit-color-swatch{border-radius:var(--radius-sm);border:none}.theme-customizer__color-value{font-size:var(--font-size-sm);color:var(--color-text-muted);font-family:monospace}.app-header__left{align-items:center;gap:var(--space-3);display:flex}.app-header__back-btn{font-size:var(--font-size-sm)}@media (width<=768px){.quiz-play__card{padding:var(--space-5)}.result-page__stats{gap:var(--space-4)}.result-page__stat-divider{display:none}.quiz-select__filters{flex-direction:column}.filter-group{min-width:unset}}@media (width<=480px){.auth-page__card{padding:var(--space-6)}.quiz-play__question-text{font-size:var(--font-size-lg)}}