:root{--primary-color: #3B82F6;--secondary-color: #F59E0B;--success-color: #10B981;--error-color: #EF4444;--purple-color: #8B5CF6;--gray-color: #6B7280;--light-gray: #F3F4F6;--border-color: #E5E7EB}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.app-container{max-width:480px;margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 0 20px #0000001a}.header{background:linear-gradient(135deg,var(--primary-color),#2563eb);color:#fff;padding:20px;text-align:center;position:relative}.header h1{margin:0;font-size:20px;font-weight:600}.header .subtitle{font-size:14px;opacity:.9;margin-top:4px}.main-content{padding:20px}.chapter-card{background:#fff;border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 2px 8px #00000014;border:1px solid var(--border-color);transition:transform .2s,box-shadow .2s}.chapter-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.chapter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.chapter-title{font-size:16px;font-weight:600;color:#1f2937}.chapter-badge{background:var(--primary-color);color:#fff;padding:4px 12px;border-radius:12px;font-size:12px}.level-item{background:var(--light-gray);border-radius:8px;padding:12px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .2s}.level-item:hover:not(.locked){background:#e5e7eb}.level-item.locked{opacity:.5;cursor:not-allowed}.level-info{flex:1}.level-name{font-size:14px;font-weight:500;color:#374151;margin-bottom:4px}.level-progress{font-size:12px;color:var(--gray-color)}.level-status{display:flex;align-items:center;gap:8px}.stars{color:var(--secondary-color);font-size:16px}.lock-icon{color:var(--gray-color);font-size:18px}.stats-bar{display:flex;justify-content:space-around;background:var(--light-gray);padding:16px;border-radius:12px;margin-bottom:20px}.stat-item{text-align:center}.stat-value{font-size:24px;font-weight:600;color:var(--primary-color)}.stat-label{font-size:12px;color:var(--gray-color);margin-top:4px}.progress-ring{width:80px;height:80px;margin:0 auto 20px}.question-card{background:#fff;border-radius:16px;padding:24px;margin-bottom:16px;box-shadow:0 2px 12px #00000014}.question-type{display:inline-block;background:var(--secondary-color);color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;margin-bottom:16px}.question-content{font-size:16px;line-height:1.6;color:#1f2937;margin-bottom:20px}.options-list{display:flex;flex-direction:column;gap:12px}.option-item{background:var(--light-gray);border:2px solid transparent;border-radius:12px;padding:14px;cursor:pointer;transition:all .2s;font-size:14px;line-height:1.5}.option-item:hover:not(.disabled){background:#e0e7ff;border-color:var(--primary-color)}.option-item.selected{background:#dbeafe;border-color:var(--primary-color)}.option-item.correct{background:#d1fae5;border-color:var(--success-color)}.option-item.incorrect{background:#fee2e2;border-color:var(--error-color)}.option-item.disabled{cursor:not-allowed;opacity:.6}.action-buttons{display:flex;gap:12px;margin-top:20px}.btn{flex:1;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:transform .2s,opacity .2s}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary-color);color:#fff}.btn-secondary{background:var(--light-gray);color:#374151}.timer{text-align:center;margin-bottom:20px}.timer-display{font-size:32px;font-weight:600;color:var(--primary-color);font-family:Courier New,monospace}.timer-label{font-size:12px;color:var(--gray-color);margin-top:4px}.result-card{background:#fff;border-radius:16px;padding:32px;text-align:center;box-shadow:0 4px 16px #0000001a}.result-stars{font-size:48px;margin-bottom:16px}.result-score{font-size:36px;font-weight:700;color:var(--primary-color);margin-bottom:8px}.result-accuracy{font-size:18px;color:var(--gray-color);margin-bottom:24px}.result-message{font-size:16px;color:#374151;margin-bottom:24px}.achievements-section{margin-top:20px}.achievement-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--light-gray);border-radius:12px;margin-bottom:8px}.achievement-icon{font-size:32px}.achievement-info{flex:1}.achievement-title{font-size:14px;font-weight:600;color:#1f2937}.achievement-desc{font-size:12px;color:var(--gray-color)}.achievement-unlocked{background:var(--success-color);color:#fff;padding:4px 8px;border-radius:8px;font-size:12px}.tabs{display:flex;gap:8px;margin-bottom:20px;background:var(--light-gray);padding:4px;border-radius:12px}.tab-item{flex:1;padding:10px;background:transparent;border:none;border-radius:8px;cursor:pointer;font-size:14px;color:var(--gray-color);transition:all .2s}.tab-item.active{background:#fff;color:var(--primary-color);font-weight:500;box-shadow:0 2px 4px #0000001a}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;background:#fff;border-top:1px solid var(--border-color);display:flex;justify-content:space-around;padding:12px 0;box-shadow:0 -2px 8px #0000000d}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:var(--gray-color);font-size:12px;padding:8px 16px;border-radius:8px;transition:all .2s}.nav-item.active{color:var(--primary-color)}.nav-icon{font-size:24px}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pulse{animation:pulse 2s ease-in-out infinite}