:root{--primary: #10b981;--secondary: #3b82f6;--accent: #f59e0b;--bg: #f8fafc;--card: #ffffff;--text: #0f172a;--text-muted: #64748b;--nav-h: 72px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,system-ui,sans-serif;height:100vh;overflow:hidden}.app-container{max-width:480px;margin:0 auto;height:100vh;display:flex;flex-direction:column;background:var(--bg);position:relative;box-shadow:0 0 40px #0000000d}.app-header{padding:16px 20px;background:var(--card);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f5f9;z-index:100}.logo{font-weight:800;font-size:1.2rem;color:var(--primary);display:flex;align-items:center;gap:8px}.fire{color:#ef4444}.cloud-status{font-size:11px;color:var(--text-muted);background:#f1f5f9;padding:4px 10px;border-radius:20px;display:flex;align-items:center;gap:4px}.scroll-container{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(var(--nav-h) + 20px);-webkit-overflow-scrolling:touch}.home-content{padding:16px}.hero-banner{height:180px;border-radius:24px;overflow:hidden;position:relative;margin-bottom:20px;background:linear-gradient(135deg,var(--primary),var(--secondary))}.hero-banner img{width:100%;height:100%;object-fit:cover;opacity:.8}.hero-text{position:absolute;bottom:0;left:0;right:0;padding:20px;color:#fff;background:linear-gradient(transparent,#000000b3)}.hero-text h1{margin:0;font-size:1.5rem}.hero-text p{margin:4px 0 0;font-size:.9rem;opacity:.9}.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}.stat-box{background:var(--card);padding:16px;border-radius:20px;display:flex;align-items:center;gap:12px;border:1px solid #f1f5f9}.s-icon{color:var(--primary)}.stat-box strong{display:block;font-size:1.2rem}.stat-box span{font-size:.75rem;color:var(--text-muted)}.action-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.primary-btn,.secondary-btn{padding:16px;border-radius:16px;border:none;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:.2s}.primary-btn{background:var(--primary);color:#fff;box-shadow:0 4px 12px #10b98133}.secondary-btn{background:var(--secondary);color:#fff;box-shadow:0 4px 12px #3b82f633}.primary-btn:active{transform:scale(.97)}.section-title{font-weight:700;margin-bottom:12px;font-size:1.1rem}.featured-card{background:var(--card);border-radius:20px;padding:12px;display:flex;gap:16px;align-items:center;border:1px solid #f1f5f9;cursor:pointer}.featured-card img{width:70px;height:70px;border-radius:12px;object-fit:cover}.f-info{flex:1;position:relative}.f-info h4{margin:0 0 4px;font-size:.95rem}.f-info p{margin:0;font-size:.8rem;color:var(--text-muted)}.learn-content{padding:0 16px}.sticky-header{position:sticky;top:0;background:var(--bg);padding:16px 0;display:flex;align-items:center;gap:12px;z-index:5}.back{width:40px;height:40px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;cursor:pointer}.knowledge-grid{display:flex;flex-direction:column;gap:12px}.k-card{background:var(--card);padding:16px;border-radius:20px;border-left:4px solid var(--primary);box-shadow:0 2px 8px #00000005;transition:.3s}.k-card.is-read{border-left-color:#cbd5e1;opacity:.7}.k-top{display:flex;justify-content:space-between;margin-bottom:8px}.k-tag{font-size:10px;font-weight:700;color:var(--primary);background:#ecfdf5;padding:2px 8px;border-radius:6px}.check{color:var(--primary)}.k-card h3{margin:0 0 8px;font-size:1.05rem}.k-card p{margin:0;font-size:.85rem;color:var(--text-muted);line-height:1.5}.quiz-card{background:var(--card);margin:20px 16px;padding:24px;border-radius:24px;box-shadow:0 10px 25px #0000000d}.quiz-header{margin-bottom:20px;font-size:.85rem;color:var(--text-muted)}.progress-bar{height:6px;background:#f1f5f9;border-radius:3px;margin-top:8px;overflow:hidden}.progress-fill{height:100%;background:var(--primary);transition:.4s}.question-text{font-size:1.2rem;margin-bottom:24px;line-height:1.4}.options-list{display:flex;flex-direction:column;gap:12px}.option-btn{padding:16px;border:2px solid #f1f5f9;border-radius:16px;background:#fff;text-align:left;font-size:1rem;font-weight:500;cursor:pointer;transition:.2s}.option-btn:hover{border-color:var(--primary);background:#f0fdf4}.score-card{text-align:center;padding:60px 20px}.score-circle{width:120px;height:120px;border-radius:50%;border:8px solid var(--primary);margin:0 auto 24px;display:flex;flex-direction:column;align-items:center;justify-content:center}.score-num{font-size:2.5rem;font-weight:900;color:var(--primary);line-height:1}.score-label{font-size:.8rem;font-weight:700;color:var(--text-muted)}.badges-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}.badge-card{background:var(--card);padding:20px;border-radius:24px;text-align:center;opacity:.3;filter:grayscale(1);transition:.4s}.badge-card.active{opacity:1;filter:grayscale(0);background:#fffbeb;border:1px solid #fef3c7}.b-icon{width:60px;height:60px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fbbf24}.b-icon img{width:100%;height:100%;object-fit:contain}.badge-card h4{margin:0 0 4px;font-size:.9rem}.badge-card p{margin:0;font-size:.75rem;color:var(--text-muted)}.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:var(--nav-h);background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-around;align-items:center;border-top:1px solid #f1f5f9;padding-bottom:12px;z-index:100}.bottom-nav button{background:none;border:none;display:flex;flex-direction:column;align-items:center;color:var(--text-muted);cursor:pointer;transition:.2s}.bottom-nav button.active{color:var(--primary)}.bottom-nav span{font-size:10px;margin-top:4px;font-weight:600}.loading{height:100vh;display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700}