:root{--bg-primary: #fff8f0;--bg-secondary: #fff1e6;--bg-card: #ffffff;--text-primary: #2d3436;--text-secondary: #636e72;--text-light: #b2bec3;--coral: #ff6b6b;--ocean: #00b894;--sky: #74b9ff;--sun: #fdcb6e;--lavender: #a29bfe;--pink: #fd79a8;--shadow: 0 4px 20px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--radius: 20px;--radius-sm: 12px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);font-family:Quicksand,Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--text-primary);background:var(--bg-primary);min-height:100vh}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 10% 20%,rgba(255,107,107,.08) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(116,185,255,.08) 0%,transparent 50%)}#root{min-height:100vh;position:relative;z-index:1}.app-shell{max-width:1280px;margin:0 auto;padding:16px}.top-bar{display:flex;justify-content:space-between;align-items:center;background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 20px;margin-bottom:14px}.top-bar h1{margin:0;font-size:30px;font-family:Fredoka,Quicksand,sans-serif;background:linear-gradient(135deg,var(--coral),var(--lavender));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.top-bar p{margin:4px 0 0;color:var(--text-secondary);font-weight:600}.tag{border-radius:999px;background:linear-gradient(135deg,#74b9ff33,#a29bfe33);color:#4a4aa2;padding:8px 14px;font-weight:700}.panel{border-radius:var(--radius);background:var(--bg-card);box-shadow:var(--shadow-lg);padding:20px}.home-hero{text-align:center;padding:10px 0}.home-hero p{color:var(--text-secondary);font-weight:600}.home-mascot{font-size:68px}.section{display:grid;gap:14px}.section h2{margin:0;font-size:24px;font-family:Fredoka,Quicksand,sans-serif}.field{display:grid;gap:8px}.field span{font-weight:700;color:var(--text-secondary)}input{border:3px solid #ffe4a7;border-radius:var(--radius-sm);padding:12px;font-size:18px;outline:none;background:var(--bg-card)}input:focus{border-color:var(--sun);box-shadow:0 0 0 4px #fdcb6e33}.chip-grid,.mode-row,.option-grid,.score-grid,.two-col-input{display:grid;gap:10px}.chip-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.category-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.mode-row{grid-template-columns:repeat(2,minmax(220px,1fr))}.option-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.option-grid.single-col{grid-template-columns:1fr}.two-col-input{grid-template-columns:repeat(2,minmax(240px,1fr))}.chip,.mode-btn,.option,.primary-btn,.ghost-btn,.audio-btn{border-radius:var(--radius-sm);border:3px solid #edf0f2;background:var(--bg-card);color:var(--text-primary);min-height:56px;font-size:17px;font-weight:700;cursor:pointer;transition:var(--transition);padding:10px 12px}.category-card{border-radius:var(--radius);border:3px solid transparent;background:var(--bg-card);box-shadow:var(--shadow);padding:16px 10px;display:grid;gap:4px;text-align:center;cursor:pointer;transition:var(--transition)}.category-card .category-icon{font-size:34px}.category-card strong{font-size:16px}.category-card small{color:var(--text-secondary);font-weight:600}.category-card.active{border-color:var(--sky);background:linear-gradient(135deg,#74b9ff26,#a29bfe26)}.chip:hover,.mode-btn:hover,.option:hover,.primary-btn:hover,.ghost-btn:hover,.audio-btn:hover,.category-card:hover{transform:translateY(-2px)}.chip.active,.mode-btn.active,.option.active{border-color:var(--sky);background:linear-gradient(135deg,#74b9ff2e,#a29bfe2e)}.primary-btn{border:none;color:#fff;background:linear-gradient(135deg,var(--coral),var(--pink));box-shadow:0 6px 24px #ff6b6b59}.audio-btn{border-color:#b8d7ff;background:linear-gradient(135deg,#74b9ff24,#a29bfe24);color:#3e5a9a}.big-audio-btn{min-height:72px;font-size:20px}.audio-btn:disabled{opacity:.6;cursor:not-allowed}.primary-btn:disabled,.ghost-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.ghost-btn{border-color:#dfe6e9;color:var(--text-secondary)}.row-actions{display:flex;gap:10px;justify-content:space-between}.row-actions.inline{display:grid;grid-template-columns:repeat(2,1fr)}.question-card,.result-block,.info-box{border-radius:var(--radius);background:var(--bg-card);box-shadow:var(--shadow);padding:14px}.question-card h3,.result-block h3{margin:0 0 8px;font-family:Fredoka,Quicksand,sans-serif}.quiz-layout{display:grid;gap:14px;grid-template-columns:1.1fr 1.2fr;align-items:start}.quiz-question-pane,.quiz-option-pane{display:grid;gap:10px}.question-type-tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;color:#4a4aa2;background:#a29bfe33}.placeholder-box{border:2px dashed #d8e3f5;border-radius:var(--radius-sm);padding:10px;display:grid;gap:8px}.media-box{min-height:260px;align-content:start}.image-box,.audio-box{background:#fdfefe}.question-image{width:100%;max-height:320px;object-fit:contain;border-radius:12px;border:2px solid #e0ecff;background:#f6fbff}.image-placeholder{min-height:100px;display:flex;align-items:center;justify-content:center;background:#f6fbff;border-radius:10px;color:#6e88a8;font-weight:700;padding:12px;text-align:center}.image-placeholder-large{min-height:240px}.progress,.meta{color:var(--text-secondary);font-weight:600}.big-score{margin:0;font-size:52px;font-family:Fredoka,Quicksand,sans-serif;color:var(--ocean)}.score-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.score-item{border-radius:var(--radius-sm);border:2px solid #eef3f8;padding:10px;display:grid;gap:4px}.wrong-list,.reason-list{display:grid;gap:8px}.wrong-item{background:#fff;border-left:4px solid var(--coral);border-radius:var(--radius-sm);padding:10px}.wrong-media-preview{margin-top:8px}.wrong-image-thumb{width:140px;height:92px;object-fit:cover;border-radius:8px;border:1px solid #d4e3fa;background:#f8fbff}.result-block>p{line-height:1.65}.result-action-footer{display:flex;gap:12px;justify-content:center;padding:8px 0}.result-action-footer .primary-btn,.result-action-footer .ghost-btn{min-width:160px}.follow-up-block{margin-top:6px;border:2px solid #ffd1b8;background:linear-gradient(180deg,#fffaf7,#fff 60%)}.follow-up-block h3{margin-bottom:6px}.follow-up-block .row-actions{justify-content:flex-start}@media (max-width: 1024px){.quiz-layout{grid-template-columns:1fr}.panel{padding:16px}.media-box{min-height:210px}}@media (max-width: 900px){.top-bar{flex-direction:column;align-items:flex-start;gap:8px}.row-actions,.mode-row,.two-col-input,.row-actions.inline{grid-template-columns:1fr;display:grid}}