:root{--bg:#07070f;--bg-secondary:#12111f;--bg-elevated:#191830;--text:#f2f1fa;--hint:#9793b0;--accent:#6366f1;--accent-2:#f59e0b;--accent-text:#fff;--border:#302e4a;--good:#22c55e;--danger:#f43f5e;--ring:#a5b4fc;--glass-bg:#1918308c;--glass-bg-strong:#191830d1;--glass-border:#a5b4fc24;--blur:18px;--glow-accent:0 0 24px #6366f166;--gradient-accent:linear-gradient(135deg, var(--accent), var(--accent-2));--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-pill:999px;--dur-fast:.15s;--dur-base:.22s;--dur-slow:.34s;--ease-out:cubic-bezier(.16, 1, .3, 1);--sans:system-ui, "Segoe UI", Roboto, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.4}@media (width>=480px){:root{font-size:18px}}@media (width>=900px){:root{font-size:19px}}*{box-sizing:border-box}body{background:radial-gradient(1200px 600px at 15% -10%, #6366f152, transparent 60%), radial-gradient(900px 500px at 100% 0%, #f59e0b29, transparent 55%), var(--bg);background-attachment:fixed;margin:0}#root{min-height:100svh}h1{margin:0 0 4px;font-size:1.375rem}h2{margin:0 0 4px;font-size:1.125rem}p{margin:0}button{font:inherit}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}#center{min-height:100svh;padding:var(--space-6);text-align:center;justify-content:center;align-items:center;display:flex}.error{color:var(--danger)}.hint{color:var(--hint)}.shell{flex-direction:column;min-height:100svh;display:flex}.tab-viewport{flex:1;position:relative;overflow:hidden}.tab-page{min-height:100%}.app{padding-bottom:var(--space-6)}.screen-header{align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-4) var(--space-3);display:flex}.screen-header h1{flex:1}.back-button{border-radius:var(--radius-pill);border:1px solid var(--glass-border);background:var(--glass-bg);width:36px;height:36px;color:var(--text);cursor:pointer;transition:background var(--dur-fast) var(--ease-out);justify-content:center;align-items:center;display:flex}.back-button:hover{background:var(--glass-bg-strong)}.empty-state{padding:var(--space-6) var(--space-4);text-align:center;color:var(--hint)}.placeholder-screen{justify-content:center;align-items:center;gap:var(--space-2);min-height:70svh;padding:var(--space-6);text-align:center;flex-direction:column;display:flex}.badge{border-radius:var(--radius-pill);align-items:center;padding:2px 10px;font-size:.8rem;font-weight:600;display:inline-flex}.badge-good{color:var(--good);background:#22c55e29}.badge-accent{color:var(--accent-2);background:#f59e0b29}.badge-muted{background:var(--glass-bg);color:var(--hint);border:1px solid var(--glass-border)}.course-card-list{gap:var(--space-3);padding:0 var(--space-4) var(--space-6);flex-direction:column;display:flex}.course-card{align-items:center;gap:var(--space-3);text-align:left;background:var(--glass-bg);width:100%;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-3);cursor:pointer;color:var(--text);transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);display:flex}.course-card:hover{background:var(--glass-bg-strong)}.course-card:active{transform:scale(.98)}.course-card-cover{border-radius:var(--radius-md);object-fit:cover;background:var(--bg-elevated);flex-shrink:0;width:64px;height:64px}.course-card-cover-empty{background:var(--gradient-accent);opacity:.4}.course-card-body{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.course-card-title-row{align-items:center;gap:var(--space-2);display:flex}.course-card-title{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.course-card-lock{color:var(--hint);flex-shrink:0}.course-card-desc{color:var(--hint);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.85rem;display:-webkit-box;overflow:hidden}.course-card-meta-row{align-items:center;gap:var(--space-2);margin-top:2px;display:flex}.course-card-progress{color:var(--hint);font-size:.8rem}.course-card-caret{color:var(--hint);flex-shrink:0}.course-card-skeleton{pointer-events:none}.course-card-skeleton .course-card-cover{animation:1.4s ease-in-out infinite skeleton-pulse}.skeleton-line{border-radius:var(--radius-sm);background:var(--bg-elevated);height:12px;animation:1.4s ease-in-out infinite skeleton-pulse}@keyframes skeleton-pulse{0%,to{opacity:.5}50%{opacity:1}}.course-detail-cover{aspect-ratio:16/9;object-fit:cover;background:var(--bg-elevated);width:100%}.course-detail-body{padding:var(--space-4);gap:var(--space-4);flex-direction:column;display:flex}.access-gate{align-items:flex-start;gap:var(--space-3);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-4);color:var(--hint);display:flex}.access-gate svg{color:var(--accent-2);flex-shrink:0;margin-top:2px}.module-block h2{padding:0 var(--space-1);margin-bottom:var(--space-2)}.lesson-list{gap:var(--space-2);flex-direction:column;display:flex}.lesson-row{align-items:center;gap:var(--space-3);text-align:left;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);width:100%;padding:var(--space-3);color:var(--text);font-weight:500;display:flex}.lesson-row-current{cursor:pointer;border-color:var(--accent);box-shadow:var(--glow-accent)}.lesson-row-current:active{transform:scale(.98)}.lesson-row-current .lesson-row-icon{color:var(--accent-2)}.lesson-row-done .lesson-row-icon{color:var(--good)}.lesson-row-done .lesson-row-title{color:var(--hint)}.lesson-row-locked{opacity:.55;cursor:not-allowed}.lesson-row-icon{flex-shrink:0}.lesson-row-title{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.toast{left:50%;bottom:calc(84px + env(safe-area-inset-bottom));background:var(--glass-bg-strong);max-width:calc(100% - 32px);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border:1px solid var(--glass-border);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-5);color:var(--text);text-align:center;z-index:1000;animation:toast-in var(--dur-base) var(--ease-out);font-size:.9rem;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #00000059}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.tab-bar{padding:var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border-top:1px solid var(--glass-border);transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);display:flex}.tab-bar.hidden{opacity:0;pointer-events:none;transform:translateY(100%)}.tab-bar-item{padding:var(--space-2) 0;color:var(--hint);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;display:flex;position:relative}.tab-bar-item.active{color:var(--accent-2)}.tab-bar-indicator{border-radius:var(--radius-pill);background:var(--gradient-accent);width:24px;height:3px;position:absolute;top:0}.tab-bar-icon{display:block}.tab-bar-label{font-size:.7rem;font-weight:600}
