:root{--primary-bg: #f0f4f8;--secondary-bg: #ffffff;--primary-text: #2c3e50;--secondary-text: #5a738b;--accent-color: #3498db;--accent-color-dark: #2980b9;--correct-color: #2ecc71;--incorrect-color: #e74c3c;--border-color: #dfe6ec;--shadow-color: rgba(90, 116, 148, .15);--locked-color: #bdc3c7}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Nunito Sans,sans-serif;background-color:var(--primary-bg);color:var(--primary-text);display:flex;justify-content:center;align-items:flex-start;min-height:100vh}#root{width:100%;max-width:600px;height:100vh;position:relative}.app-container{background-color:var(--secondary-bg);box-shadow:0 8px 30px var(--shadow-color);overflow-y:auto;display:flex;flex-direction:column;height:100%;position:relative}.header{padding:1.5rem 2rem;background-color:var(--accent-color);color:#fff;text-align:center;position:sticky;top:0;z-index:10}.header h1{font-size:1.75rem;font-weight:700;margin:0}main{flex-grow:1;padding:2rem;padding-bottom:90px;overflow-y:hidden}.page-content,.quiz-view,.results-view{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-progress{margin-bottom:1.5rem}.user-stats{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.level-display{font-size:1.25rem;font-weight:600;color:var(--primary-text)}.streak-display{font-size:1.1rem;font-weight:600;color:#e67e22;background-color:#fdf3e7;padding:.25rem .75rem;border-radius:20px;display:flex;align-items:center;gap:.25rem}.xp-bar-container{background-color:var(--border-color);border-radius:8px;height:20px;overflow:hidden;width:100%}.xp-bar{background-color:var(--accent-color);height:100%;border-radius:8px 0 0 8px;transition:width .5s ease-in-out}.xp-text{font-size:.875rem;color:var(--secondary-text);margin-top:.5rem;text-align:center}.topic-list h2{font-size:1.5rem;margin-bottom:1rem;text-align:center;color:var(--secondary-text)}.topic-item{display:flex;justify-content:space-between;align-items:center;background-color:var(--primary-bg);padding:1rem 1.5rem;border-radius:12px;margin-bottom:1rem;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid var(--border-color)}.topic-item:hover{transform:translateY(-2px);box-shadow:0 4px 15px var(--shadow-color)}.topic-item.locked{background-color:#e9ecef;cursor:not-allowed;color:var(--locked-color)}.topic-item.locked:hover{transform:none;box-shadow:none}.topic-item span{font-size:1.1rem;font-weight:600}.boss-battle-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-radius:12px;margin-bottom:1rem;cursor:pointer;transition:all .2s ease-in-out;background:linear-gradient(135deg,#485563,#29323c);color:#f0f4f8;border:2px solid #f1c40f;box-shadow:0 5px 15px #0003}.boss-battle-item:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px #f1c40f66}.boss-battle-item.locked{background:#4a4a4a;cursor:not-allowed;color:#888;border-color:#555;box-shadow:none}.boss-battle-item.locked:hover{transform:none;box-shadow:none}.boss-battle-item span{font-size:1.2rem;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.quiz-view{display:flex;flex-direction:column;height:100%}.quiz-header{margin-bottom:1.5rem;flex-shrink:0}.quiz-progress-bar-container{height:10px;background-color:var(--border-color);border-radius:5px;margin-bottom:.5rem}.quiz-progress-bar{height:100%;background-color:var(--correct-color);border-radius:5px;transition:width .3s ease-in-out}.question-counter{text-align:right;font-size:.875rem;color:var(--secondary-text)}.question-text{font-size:1.25rem;font-weight:600;margin-bottom:2rem;line-height:1.5;flex-shrink:0}.quiz-scroll-content{flex-grow:1;overflow-y:auto;margin-bottom:1rem;padding-right:1rem}.options-grid{display:grid;gap:1rem}.option-btn{width:100%;padding:1rem;font-size:1rem;text-align:left;background-color:var(--secondary-bg);color:var(--primary-text);border:2px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s ease}.option-btn:not(:disabled):hover{border-color:var(--accent-color);background-color:#f8f9fa}.option-btn.selected{border-color:var(--accent-color);background-color:#eaf5fc}.option-btn.correct{background-color:#eafaf1;border-color:var(--correct-color);color:var(--correct-color);font-weight:700}.option-btn.incorrect{background-color:#fbecec;border-color:var(--incorrect-color);color:var(--incorrect-color)}.explanation-box{margin-top:1.5rem;padding:1rem;background-color:var(--primary-bg);border-radius:8px;border-left:4px solid var(--accent-color);animation:fadeIn .5s ease}.explanation-box h4{color:var(--accent-color-dark);margin-bottom:.5rem;font-size:1rem}.explanation-box p{color:var(--secondary-text);line-height:1.6;font-size:.95rem}.quiz-footer{margin-top:auto;padding-top:1rem;text-align:right;flex-shrink:0;background:var(--secondary-bg)}.btn{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;background-color:var(--accent-color);color:#fff;transition:background-color .2s}.btn:hover{background-color:var(--accent-color-dark)}.btn-secondary{background-color:var(--border-color);color:var(--secondary-text)}.btn-secondary:hover{background-color:#c8d6e5}.results-view{text-align:center}.score-circle{width:150px;height:150px;border-radius:50%;margin:0 auto 1.5rem;display:flex;justify-content:center;align-items:center;font-size:3rem;font-weight:700;color:#fff}.summary-text{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.feedback-text{font-size:1rem;color:var(--secondary-text);margin-bottom:2rem}.new-achievements-section{background-color:#eaf5fc;border:1px solid var(--accent-color);border-radius:12px;padding:1rem;margin-bottom:2rem}.new-achievements-section h3{color:var(--accent-color-dark);margin-bottom:.75rem}.new-achievement-item{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:1rem;font-weight:600}.navigation-bar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background-color:var(--secondary-bg);border-top:1px solid var(--border-color);box-shadow:0 -2px 10px #0000000d;z-index:100}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.75rem .5rem;cursor:pointer;color:var(--secondary-text);background:none;border:none;font-family:Nunito Sans,sans-serif;transition:color .2s ease-in-out}.nav-item:hover{color:var(--primary-text)}.nav-item.active{color:var(--accent-color)}.nav-item .icon{font-size:1.5rem;margin-bottom:.25rem}.nav-item .label{font-size:.75rem;font-weight:600}.achievements-view h2{text-align:center;margin-bottom:1.5rem;font-size:1.5rem;color:var(--primary-text)}.achievements-list{display:grid;gap:1rem}.achievement-item{display:flex;align-items:center;gap:1rem;padding:1rem;background-color:var(--primary-bg);border-radius:12px;border:1px solid var(--border-color);transition:all .2s ease}.achievement-icon{font-size:2.5rem}.achievement-details h3{font-size:1.1rem;margin-bottom:.25rem}.achievement-details p{font-size:.9rem;color:var(--secondary-text)}.achievement-item.locked{filter:grayscale(1);opacity:.6}.achievement-item.unlocked{border-left:5px solid var(--correct-color)}.question-bank-view h2{text-align:center;margin-bottom:.5rem}.question-bank-view .description{text-align:center;color:var(--secondary-text);margin-bottom:2rem}.topic-accordion{display:flex;flex-direction:column;gap:1rem}.topic-section{border:1px solid var(--border-color);border-radius:12px;overflow:hidden;background-color:var(--secondary-bg)}.topic-header{width:100%;background-color:var(--primary-bg);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:1.1rem;font-weight:700;color:var(--primary-text);border:none;text-align:left}.topic-header:hover{background-color:#e9ecef}.topic-header .arrow{transition:transform .2s ease-in-out;color:var(--secondary-text)}.topic-header .arrow.expanded{transform:rotate(180deg)}.question-list{padding:.5rem 1.5rem 1.5rem}.question-list-item{padding:1rem 0;border-bottom:1px solid var(--border-color)}.question-list-item:last-child{border-bottom:none;padding-bottom:0}.question-summary{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:1rem;color:var(--secondary-text);padding:0;line-height:1.5}.question-summary:hover{color:var(--primary-text)}.question-detail-view{margin-top:1rem;animation:fadeIn .3s ease}.options-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.option-item{padding:.75rem;border-radius:8px;background-color:var(--primary-bg);color:var(--secondary-text)}.option-item.correct{background-color:#eafaf1;border:1px solid var(--correct-color);color:#256d45;font-weight:600}.learn-hub-view h2{text-align:center;margin-bottom:.5rem}.learn-hub-view .description{text-align:center;color:var(--secondary-text);margin-bottom:2rem}.learn-mode-section{margin-bottom:2.5rem}.learn-mode-title{font-size:1.25rem;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent-color);display:inline-block}.learn-mode-description{color:var(--secondary-text);margin-bottom:1rem}.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.topic-card{background-color:var(--secondary-bg);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem 1rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-align:center;color:var(--primary-text)}.topic-card:hover{transform:translateY(-3px);box-shadow:0 4px 15px var(--shadow-color);border-color:var(--accent-color)}.flashcard-view{display:flex;flex-direction:column;height:100%}.flashcard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-shrink:0}.flashcard-header h3{font-size:1.25rem;color:var(--secondary-text)}.btn-back{padding:.5rem 1rem}.flashcard-progress{text-align:center;margin-bottom:1rem;font-size:.9rem;color:var(--secondary-text);flex-shrink:0}.flashcard-container{flex-grow:1;perspective:1000px;cursor:pointer;margin-bottom:1.5rem;min-height:300px}.flashcard{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:2rem;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 4px 15px var(--shadow-color);overflow-y:auto}.flashcard-front{background-color:var(--secondary-bg)}.flashcard-front p{font-size:1.25rem;font-weight:600;text-align:left;width:100%}.flashcard-back{background-color:var(--primary-bg);transform:rotateY(180deg)}.flashcard-back h4{color:var(--accent-color-dark);margin-bottom:.5rem}.flashcard-back .answer{font-size:1.1rem;font-weight:600;margin-bottom:1rem;color:var(--primary-text)}.flashcard-back .explanation-box{width:100%;border:none;padding:0;margin:0;background:none}.flashcard-nav{display:flex;justify-content:space-between;flex-shrink:0}.study-guide-view{display:flex;flex-direction:column;height:100%}.study-guide-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-shrink:0}.study-guide-header h3{font-size:1.25rem;color:var(--secondary-text)}.study-guide-content{flex-grow:1;overflow-y:auto;padding-right:1rem}.guide-question-item{padding:1.5rem;margin-bottom:1.5rem;background-color:var(--secondary-bg);border:1px solid var(--border-color);border-radius:12px}.guide-question-item:last-child{margin-bottom:0}.guide-question-text{font-size:1.1rem;font-weight:600;line-height:1.5;margin-bottom:1rem}.guide-options-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.guide-option-item{padding:.75rem;border-radius:8px;background-color:var(--primary-bg);color:var(--secondary-text)}.guide-option-item.correct{background-color:#eafaf1;border:1px solid var(--correct-color);color:#256d45;font-weight:600}.guide-question-item .explanation-box{margin-top:1rem}.forum-list-view h2{text-align:center;margin-bottom:1.5rem}.post-list{display:flex;flex-direction:column;gap:1rem}.post-item{background-color:var(--secondary-bg);border:1px solid var(--border-color);border-radius:12px;padding:1rem 1.5rem;cursor:pointer;transition:all .2s ease}.post-item:hover{transform:translateY(-2px);box-shadow:0 4px 20px var(--shadow-color);border-color:var(--accent-color)}.post-item-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.post-item-category{font-size:.75rem;font-weight:700;padding:.25rem .6rem;border-radius:20px;color:#fff}.category-讀書計畫{background-color:#3498db}.category-法規討論{background-color:#9b59b6}.category-心情抒發{background-color:#e67e22}.category-資源分享{background-color:#2ecc71}.post-item-title{font-size:1.1rem;font-weight:600;color:var(--primary-text);margin:0}.post-item-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--secondary-text)}.post-item-meta span{display:flex;align-items:center;gap:.25rem}.post-detail-view{animation:fadeIn .3s ease}.post-detail-header{margin-bottom:1.5rem}.post-content-container{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.post-title{font-size:1.5rem;margin-bottom:.25rem}.post-author{font-size:.9rem;color:var(--secondary-text);margin-bottom:1.5rem}.post-body p{line-height:1.7;margin-bottom:1rem}.reply-section h3{font-size:1.25rem;margin-bottom:1rem}.reply-list{display:flex;flex-direction:column;gap:1rem}.reply-item{background-color:var(--primary-bg);padding:1rem;border-radius:8px}.reply-author{font-weight:600;font-size:.9rem;margin-bottom:.5rem;color:var(--secondary-text)}.reply-text{line-height:1.6}.no-replies{color:var(--secondary-text);font-style:italic}