*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a1628;--card:#111d2e;--card-hover:#1a2a40;--primary:#3b82f6;--accent:#f59e0b;--success:#22c55e;--text:#e2e8f0;--text-secondary:#94a3b8;--border:#1e3a5f;--danger:#ef4444;--purple:#a855f7;--nav-height:60px;--header-height:52px}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow-x:hidden}#root{flex-direction:column;min-height:100%;display:flex}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}.app-shell{flex-direction:column;width:100%;max-width:480px;min-height:100vh;margin:0 auto;display:flex;position:relative}.app-header{height:var(--header-height);background:var(--bg);border-bottom:1px solid var(--border);z-index:100;flex-shrink:0;justify-content:center;align-items:center;padding:0 16px;display:flex;position:sticky;top:0}.app-header h1{letter-spacing:.5px;color:var(--text);font-size:18px;font-weight:700}.app-header .back-btn{color:var(--primary);border-radius:8px;align-items:center;gap:4px;padding:6px 8px;font-size:14px;transition:background .15s;display:flex;position:absolute;left:12px}.app-header .back-btn:hover{background:#3b82f61a}.page-content{padding:16px;padding-bottom:calc(var(--nav-height) + 24px);flex:1;overflow-y:auto}.bottom-nav{width:100%;max-width:480px;height:var(--nav-height);border-top:1px solid var(--border);z-index:200;background:#0d1b2a;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-tab{color:var(--text-secondary);flex-direction:column;flex:1;align-items:center;gap:4px;padding:8px 0;font-size:11px;font-weight:500;transition:color .2s;display:flex;position:relative}.nav-tab.active{color:var(--primary)}.nav-tab.active:after{content:"";background:var(--primary);border-radius:0 0 2px 2px;height:2px;position:absolute;top:0;left:25%;right:25%}.nav-icon{font-size:22px;line-height:1}.card{background:var(--card);border-radius:12px;transition:background .2s,transform .15s;overflow:hidden}.card:hover{background:var(--card-hover)}.card:active{transform:scale(.98)}.course-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.badge{letter-spacing:.3px;border-radius:20px;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge-premium{color:var(--accent);background:#f59e0b26}.badge-count{color:var(--primary);background:#3b82f626}.tag-badge{text-transform:capitalize;border-radius:20px;align-items:center;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}.tag-hybrid{color:#3b82f6;background:#3b82f626}.tag-long_distance{color:#22c55e;background:#22c55e26}.tag-pure_speed{color:#ef4444;background:#ef444426}.tag-long_speed{color:#f59e0b;background:#f59e0b26}.tag-interval_training{color:#a855f7;background:#a855f726}.skeleton{background:linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%);background-size:200% 100%;border-radius:12px;animation:1.5s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-card{height:180px}.skeleton-line{border-radius:6px;height:14px;margin-bottom:8px}.skeleton-line.short{width:60%}.error-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:48px 24px;display:flex}.error-state .error-icon{opacity:.5;font-size:48px}.error-state p{color:var(--text-secondary);font-size:14px;line-height:1.5}.retry-btn{background:var(--primary);color:#fff;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;transition:opacity .2s}.retry-btn:hover{opacity:.85}.video-container{background:#000;border-radius:12px;width:100%;margin:12px 0;padding-bottom:56.25%;position:relative;overflow:hidden}.video-container iframe,.video-container video{border:none;width:100%;height:100%;position:absolute;top:0;left:0}.section-warmup{border-left:3px solid var(--success)}.section-main{border-left:3px solid var(--primary)}.section-cooldown{border-left:3px solid var(--purple)}.section-preparation{border-left:3px solid var(--accent)}.pdf-download-btn{color:var(--primary);background:#3b82f61a;border-radius:8px;flex-shrink:0;align-items:center;gap:5px;padding:7px 12px;font-size:12px;font-weight:600;transition:background .2s;display:flex}.pdf-download-btn:hover{background:#3b82f633}.survey-option{background:var(--card);color:var(--text);text-align:left;border:2px solid #0000;border-radius:12px;align-items:center;gap:10px;width:100%;padding:12px 14px;font-size:14px;font-weight:500;transition:border-color .15s,background .15s;display:flex}.survey-option.selected{border-color:var(--primary);background:#3b82f614}.survey-option .check-circle{border:2px solid var(--border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;transition:border-color .15s,background .15s;display:flex}.survey-option.selected .check-circle{border-color:var(--primary);background:var(--primary)}.survey-btn{color:#fff;background:var(--primary);border-radius:12px;width:100%;padding:14px;font-size:15px;font-weight:700;transition:opacity .2s}.survey-btn:disabled{opacity:.4}.survey-btn:not(:disabled):hover{opacity:.85}.survey-progress{gap:4px;margin-bottom:20px;display:flex}.survey-progress .step{background:var(--border);border-radius:2px;flex:1;height:4px;transition:background .3s}.survey-progress .step.done{background:var(--primary)}.rec-card{margin-bottom:8px;padding:14px}.rec-card .rec-meta{color:var(--text-secondary);align-items:center;gap:6px;margin-top:6px;font-size:11px;display:flex}.page-enter{animation:.25s ease-out fadeSlideIn}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}