:root{--color-primary: #0288D1;--color-primary-light: #E0F7FA;--color-secondary: #FFFFFF;--color-accent: #FF7043;--color-text-main: #263238;--color-text-sub: #546E7A;--color-correct-bg: #E8F5E9;--color-correct-text: #2E7D32;--color-incorrect-bg: #FFEBEE;--color-incorrect-text: #C62828;--shadow-card: 0 4px 20px rgba(0, 0, 0, .08);--shadow-float: 0 10px 25px rgba(2, 136, 209, .2);font-family:Inter,system-ui,sans-serif;line-height:1.6}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background:linear-gradient(180deg,#fff,#e0f7fa);color:var(--color-text-main)}#root{max-width:600px;margin:0 auto;padding:1rem;width:100%;box-sizing:border-box}.app-container{display:flex;flex-direction:column;gap:1.5rem;align-items:center}button{border:none;cursor:pointer;font-family:inherit;font-weight:600;transition:all .3s cubic-bezier(.25,.8,.25,1)}.card{background-color:var(--color-secondary);border-radius:20px;padding:2rem;width:100%;box-sizing:border-box;box-shadow:var(--shadow-card)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.fade-in{animation:fadeIn .6s ease-out forwards}.slide-up{animation:slideUp .5s ease-out forwards}.pop-in{animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) forwards}.title-screen{text-align:center;padding:3rem 1.5rem}.main-title{font-size:2.2rem;color:var(--color-primary);margin-bottom:.5rem;line-height:1.3}.subtitle{color:var(--color-text-sub);margin-bottom:3rem}.start-btn{background-color:var(--color-primary);color:#fff;padding:1rem 3rem;font-size:1.2rem;border-radius:50px;box-shadow:0 4px 15px #0288d14d}.start-btn:hover{background-color:#0277bd;transform:translateY(-3px);box-shadow:var(--shadow-float)}.quiz-header{width:100%}.progress-badge{display:inline-block;background-color:#fffc;padding:.5rem 1rem;border-radius:20px;color:var(--color-primary);font-weight:600;font-size:.9rem}.badge{padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:700;margin-right:8px}.badge.region{background:#eceff1;color:#455a64}.badge.difficulty-初級{background:#e1f5fe;color:#0288d1}.badge.difficulty-中級{background:#fff3e0;color:#f57c00}.badge.difficulty-上級{background:#ffebee;color:#d32f2f}.question-text{font-size:1.3rem;margin:1.5rem 0 2rem;color:var(--color-text-main);text-align:left}.options-grid{display:flex;flex-direction:column;gap:12px}.option-btn{background:#fff;border:2px solid #EEEEEE;padding:1rem;border-radius:12px;text-align:left;font-size:1rem;color:var(--color-text-main)}.option-btn:hover:not(:disabled){border-color:var(--color-primary);background-color:#f8fdff;transform:translateY(-2px);box-shadow:0 2px 8px #0000000d}.option-btn:disabled{cursor:default}.option-btn.correct{background-color:var(--color-correct-bg);border-color:var(--color-correct-text);color:var(--color-correct-text);font-weight:700}.option-btn.incorrect{background-color:var(--color-incorrect-bg);border-color:var(--color-incorrect-text);color:var(--color-incorrect-text);opacity:.6}.feedback-section{margin-top:2rem;padding-top:1.5rem;border-top:2px solid #F5F5F5}.feedback-header{display:flex;align-items:center;gap:10px;margin-bottom:1rem}.result-icon{font-size:1.5rem;font-weight:900}.result-message{font-size:1.2rem;font-weight:700}.correct-text{color:var(--color-correct-text)}.incorrect-text{color:var(--color-incorrect-text)}.commentary-box{background-color:#f8f9fa;padding:1rem;border-radius:12px;margin-bottom:1.5rem;text-align:left;font-size:.95rem;color:var(--color-text-sub)}.next-btn{width:100%;background-color:var(--color-primary);color:#fff;padding:1rem;border-radius:12px;font-size:1.1rem}.next-btn:hover{background-color:#0277bd;transform:translateY(-2px);box-shadow:var(--shadow-float)}.next-btn.final-btn{background:linear-gradient(135deg,var(--color-accent) 0%,#FF5722 100%);box-shadow:0 4px 15px #ff704366}.next-btn.final-btn:hover{background:linear-gradient(135deg,#f4511e,#d84315);transform:translateY(-2px);box-shadow:0 6px 20px #ff704380}.grading-screen{text-align:center;padding:3rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:2rem}.spinner{width:50px;height:50px;border:4px solid var(--color-primary-light);border-top:4px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.grading-text{font-size:1.2rem;font-weight:600;color:var(--color-text-main);animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.result-card{text-align:center;padding:3rem 1.5rem}.score-display{font-size:1.5rem;margin:1rem 0;color:var(--color-text-sub)}.score-num{font-size:3.5rem;font-weight:800;color:var(--color-primary)}.rank-section{margin-bottom:3rem;background:linear-gradient(135deg,#e0f7fa,#e1f5fe);padding:1.5rem;border-radius:16px}.rank-label{font-size:.9rem;color:var(--color-text-sub);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.rank-title{font-size:1.8rem;color:var(--color-accent);margin:.5rem 0}.rank-message{color:var(--color-text-main);font-weight:500}.retry-btn{background:#fff;border:2px solid var(--color-primary);color:var(--color-primary);padding:.8rem 2.5rem;border-radius:50px;font-size:1rem}.retry-btn:hover{background-color:var(--color-primary);color:#fff}