*,:before,:after{box-sizing:border-box;margin:0;padding:0}button{font:inherit;cursor:pointer;background:0 0;border:none}img{max-width:100%;display:block}input{font:inherit}ol,ul{list-style:none}:root{--bg-base:#f4f4f5;--bg-surface:#fff;--bg-elevated:#f0f0f1;--bg-input:#f4f4f5;--border:#e4e4e7;--border-hover:#c4c4c7;--accent:#ff4f00;--accent-muted:#ff4f0014;--accent-hover:#e04600;--text-primary:#111;--text-secondary:#71717a;--text-tertiary:#a1a1aa;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--sidebar-w:260px}html,body,#root{height:100%}body{background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:14px;line-height:1.5}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:3px}.app-layout{height:100%;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-w);background:var(--bg-surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:20px;padding:16px;display:flex;overflow-y:auto}.sidebar-logo{color:var(--accent);align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.sidebar-logo .icon{font-size:24px}.filter-group h3{text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);margin-bottom:8px;font-size:12px;font-weight:600}.filter-tags{flex-wrap:wrap;gap:6px;display:flex}.filter-tag{border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;white-space:nowrap;border:1px solid #0000;padding:4px 10px;font-size:12px;transition:all .15s}.filter-tag:hover{border-color:var(--border-hover);color:var(--text-primary)}.filter-tag.active{background:var(--accent-muted);color:var(--accent);border-color:var(--accent)}.filter-count{opacity:.6;margin-left:2px;font-size:11px}.main-area{flex-direction:column;flex:1;display:flex;overflow:hidden}.top-bar{background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:12px 20px;display:flex}.search-input{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-input);outline:none;flex:1;max-width:480px;padding:8px 14px;font-size:14px;transition:border-color .15s}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}.result-count{color:var(--text-secondary);white-space:nowrap;font-size:13px}.clear-btn{color:var(--accent);border-radius:var(--radius-sm);padding:6px 12px;font-size:13px;transition:background .15s}.clear-btn:hover{background:var(--accent-muted)}.mobile-toggle{color:var(--text-secondary);padding:8px;font-size:20px;display:none}.exercise-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-content:start;gap:16px;padding:20px;display:grid;overflow-y:auto}.exercise-card{background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;flex-direction:column;transition:all .2s;display:flex;box-shadow:0 1px 3px #0000000a}.exercise-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 20px #0000001a}.exercise-card:active{transform:scale(.98)}.card-media{aspect-ratio:1;background:var(--bg-elevated);border-radius:var(--radius-lg) var(--radius-lg) 0 0;flex-shrink:0;width:100%;display:grid;overflow:hidden}.card-media>*{grid-area:1/1}.card-media img{object-fit:cover;width:100%;height:100%;display:block}.card-media .static-img{z-index:1}.card-media .gif-img{z-index:2;opacity:0;transition:opacity .2s}.exercise-card:hover .gif-img{opacity:1}.card-placeholder{color:var(--text-tertiary);justify-content:center;align-items:center;font-size:48px;display:flex}.card-body{flex-direction:column;flex:1;gap:8px;padding:12px 14px;display:flex}.card-name{color:var(--text-primary);word-break:break-word;font-size:14px;font-weight:600;line-height:1.4}.card-name-en{color:var(--text-tertiary);word-break:break-word;font-size:11px;font-weight:400;line-height:1.3}.card-tags{flex-wrap:wrap;gap:6px;margin-top:auto;display:flex}.card-tag{border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--text-secondary);padding:3px 8px;font-size:12px;font-weight:500}.modal-overlay{z-index:100;background:#0006;justify-content:center;align-items:center;padding:20px;animation:.15s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-panel{background:var(--bg-surface);border-radius:var(--radius-xl);width:100%;max-width:680px;max-height:90vh;animation:.2s slideUp;overflow-y:auto;box-shadow:0 20px 60px #00000026}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.modal-header{background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:1;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex;position:sticky;top:0}.modal-title{font-size:18px;font-weight:700}.modal-close{width:36px;height:36px;color:var(--text-secondary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;transition:all .15s;display:flex}.modal-close:hover{background:var(--bg-elevated);color:var(--text-primary)}.modal-body{flex-direction:column;gap:20px;padding:20px;display:flex}.modal-media{justify-content:center;display:flex}.modal-media img{border-radius:var(--radius-md);object-fit:cover;background:var(--bg-elevated);width:180px;height:180px}.modal-meta{flex-wrap:wrap;gap:8px;display:flex}.meta-badge{border-radius:var(--radius-sm);background:var(--accent-muted);color:var(--accent);padding:6px 12px;font-size:13px;font-weight:500}.steps-section h3{margin-bottom:12px;font-size:16px;font-weight:700}.step-list{flex-direction:column;gap:10px;display:flex}.step-item{align-items:flex-start;gap:12px;display:flex}.step-num{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:1px;font-size:12px;font-weight:700;display:flex}.step-text{color:var(--text-secondary);flex:1;line-height:1.6}.lang-selector{flex-wrap:wrap;gap:4px;display:flex}.lang-btn{border-radius:var(--radius-sm);color:var(--text-secondary);background:var(--bg-elevated);padding:5px 10px;font-size:12px;transition:all .15s}.lang-btn:hover{color:var(--text-primary)}.lang-btn.active{background:var(--accent);color:#fff}.loading-state,.empty-state{color:var(--text-tertiary);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:60px 20px;display:flex}.loading-spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=768px){:root{--sidebar-w:100%}.app-layout{flex-direction:column}.sidebar{z-index:50;padding-top:60px;transition:transform .25s;position:fixed;inset:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.mobile-toggle{display:block}.sidebar-backdrop{z-index:49;background:#0000004d;display:none;position:fixed;inset:0}.sidebar-backdrop.open{display:block}.exercise-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:12px}.top-bar{padding:10px 12px}.modal-panel{border-radius:0;max-width:100%;height:100%;max-height:100vh}}