:root{--color-green:#16a34a;--color-green-light:#22c55e;--color-green-dark:#15803d;--color-green-50:#16a34a14;--color-green-100:#16a34a26;--color-bg:#f9fafb;--color-surface:#fff;--color-surface-2:#f0fdf4;--color-surface-3:#dcfce7;--color-red:#d94040;--color-amber:#c87000;--color-white:#fff;--text-primary:#111827;--text-secondary:#374151;--text-muted:#6b7280;--text-on-green:#fff;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-full:9999px;--shadow-sm:0 1px 3px #00000012, 0 1px 2px #0000000d;--shadow-md:0 4px 12px #00000014, 0 2px 6px #0000000d;--shadow-lg:0 10px 28px #0000001a, 0 4px 12px #0000000f;--shadow-glow-green:0 4px 18px #16a34a40;--border-subtle:#0000000f;--border-default:#0000001a;--border-strong:#0000002e;--border-green:#16a34a4d;--transition-fast:all .18s ease;--transition-base:all .28s ease;--font-heading:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--surface-0:var(--color-bg);--surface-1:var(--color-surface);--surface-2:var(--color-surface-2);--surface-3:var(--color-surface-3)}html[data-theme=dark]{--color-bg:#0f172a;--color-surface:#1e293b;--color-surface-2:#16a34a17;--color-surface-3:#16a34a24;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--border-subtle:#ffffff0f;--border-default:#ffffff1a;--border-strong:#ffffff2e;--shadow-sm:0 1px 3px #00000073, 0 1px 2px #0000004d;--shadow-md:0 4px 12px #0000008c, 0 2px 6px #0000004d;--shadow-lg:0 10px 28px #000000a6, 0 4px 12px #00000073;--shadow-glow-green:0 4px 18px #16a34a66;--color-amber:#d97706;--color-red:#ef4444}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--text-primary);font-weight:700;line-height:1.25}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:var(--font-body)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-surface-2)}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#16a34a59}::-webkit-scrollbar-thumb:hover{background:var(--color-green)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulseRing{0%{opacity:.6;transform:scale(.92)}70%{opacity:0;transform:scale(1.08)}to{opacity:0;transform:scale(.92)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes xpFill{0%{width:0%}}@keyframes waveBar{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.04)}70%{transform:scale(.97)}to{transform:scale(1)}}@keyframes progressFill{0%{width:0%}}.fade-up{animation:.45s ease-out both fadeUp}.fade-in{animation:.35s ease-out both fadeIn}.slide-down{animation:.28s ease-out both slideDown}.slide-up{animation:.28s ease-out both slideUp}.bounce-in{animation:.5s cubic-bezier(.36,.07,.19,.97) both bounceIn}.stagger-1{animation-delay:50ms}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}.stagger-5{animation-delay:.25s}.stagger-6{animation-delay:.3s}.stagger-7{animation-delay:.35s}.stagger-8{animation-delay:.4s}.skeleton{background:linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 50%, var(--color-surface-2) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}.card{background:var(--color-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:var(--transition-fast)}.card:hover{border-color:var(--border-green);box-shadow:var(--shadow-md);transform:translateY(-2px)}.card:active{transform:translateY(0)}.card-static{background:var(--color-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.gradient-text{background:linear-gradient(135deg, var(--color-green) 0%, var(--color-green-light) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.btn{border-radius:var(--radius-md);font-family:var(--font-body);cursor:pointer;transition:var(--transition-fast);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--color-green);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--color-green-dark);box-shadow:var(--shadow-glow-green)}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border-default);background:0 0}.btn-ghost:hover{background:var(--color-surface-2);color:var(--text-primary);border-color:var(--border-strong)}.btn-outline-green{color:var(--color-green);border:1.5px solid var(--border-green);background:0 0}.btn-outline-green:hover{background:var(--color-green-50);border-color:var(--color-green)}.btn-full{width:100%}.btn-lg{border-radius:var(--radius-lg);padding:1rem 2rem;font-size:1.0625rem}.btn-sm{border-radius:var(--radius-sm);padding:.5rem 1rem;font-size:.8125rem}.badge{border-radius:var(--radius-full);letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem;font-weight:700;font-family:var(--font-heading);align-items:center;gap:.25rem;padding:.2rem .75rem;display:inline-flex}.badge-beginner{color:var(--color-green-dark);background:#16a34a1a;border:1px solid #16a34a40}.badge-intermediate{color:var(--color-amber);background:#c870001a;border:1px solid #c8700040}.badge-advanced{color:var(--color-red);background:#d940401a;border:1px solid #d9404040}.badge-special{color:var(--color-green);border:1px solid var(--border-green);background:#16a34a1f}.input{background:var(--color-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-family:var(--font-body);outline:none;padding:.875rem 1rem;font-size:.9375rem;transition:border-color .15s,box-shadow .15s}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--color-green);background:var(--color-surface);box-shadow:0 0 0 3px #16a34a1f}.input-error{border-color:var(--color-red);box-shadow:0 0 0 3px #d940401a}.input-success{border-color:var(--color-green)}.label{color:var(--text-secondary);margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:block}.error-msg{color:var(--color-red);margin-top:.375rem;font-size:.8125rem;animation:.22s ease-out slideDown}.progress-bar-track{background:var(--color-surface-2);border-radius:var(--radius-full);height:6px;overflow:hidden}.progress-bar-fill{border-radius:var(--radius-full);background:var(--color-green);height:100%;transition:width .5s ease-out;animation:.8s ease-out both progressFill}.wave-bar{border-radius:var(--radius-full);transform-origin:bottom;animation:1s ease-in-out infinite waveBar}.social-btn{border:1.5px solid var(--border-default);border-radius:var(--radius-md);background:var(--color-surface);width:100%;font-family:var(--font-body);cursor:pointer;transition:var(--transition-fast);color:var(--text-primary);justify-content:center;align-items:center;gap:.75rem;padding:.875rem 1.25rem;font-size:.9375rem;font-weight:600;display:flex}.social-btn:hover{background:var(--color-surface-2);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}.social-btn:active{transform:scale(.99)}.divider{color:var(--text-muted);align-items:center;gap:1rem;font-size:.8125rem;display:flex}.divider:before,.divider:after{content:"";background:var(--border-subtle);flex:1;height:1px}.nav-link{border-radius:var(--radius-sm);color:var(--text-secondary);padding:.375rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.nav-link:hover{color:var(--text-primary);background:var(--color-surface-2)}.nav-link--active{color:var(--color-green);background:var(--color-green-50);font-weight:600}.mobile-nav{z-index:100;-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border-subtle);padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom));background:#fffffff5;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #0000000f}.mobile-nav-item{border-radius:var(--radius-md);color:var(--text-muted);transition:var(--transition-fast);flex-direction:column;flex:1;align-items:center;gap:.2rem;padding:.4rem .5rem;font-size:.65rem;font-weight:600;text-decoration:none;display:flex}.mobile-nav-item:hover,.mobile-nav-item.active{color:var(--color-green)}.mobile-nav-item svg{width:20px;height:20px}@media (max-width:768px){.mobile-nav{display:flex}.desktop-only{display:none!important}body{padding-bottom:70px}}@media (min-width:769px){.mobile-only{display:none!important}}.lesson-card{background:var(--color-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:var(--transition-fast);cursor:pointer;flex-direction:column;gap:.75rem;height:100%;padding:1.25rem;display:flex;position:relative}.lesson-card:hover{border-color:var(--border-green);box-shadow:var(--shadow-md);transform:translateY(-2px)}.lesson-card:active{transform:translateY(0)}.stat-card{background:var(--color-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-direction:column;gap:.25rem;padding:1.25rem;transition:transform .2s,box-shadow .2s;display:flex}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.heatmap-cell{background:var(--color-surface-2);width:12px;height:12px;transition:var(--transition-fast);border-radius:3px}.heatmap-cell.active-low{background:#16a34a40}.heatmap-cell.active-mid{background:#16a34a8c}.heatmap-cell.active-high{background:var(--color-green)}.auth-container{min-height:100vh;display:flex}.auth-left{background:linear-gradient(160deg, var(--color-green-dark) 0%, var(--color-green) 60%, var(--color-green-light) 100%);flex:1;display:none;position:relative;overflow:hidden}.auth-right{background:var(--color-bg);justify-content:center;align-items:center;width:100%;min-height:100vh;padding:2rem 1.5rem;display:flex}@media (min-width:1024px){.auth-left{flex-direction:column;justify-content:center;align-items:center;display:flex}.auth-right{flex-shrink:0;width:50%;max-width:600px}}html[data-theme=dark] .social-btn{background:var(--color-surface);border-color:var(--border-default);color:var(--text-primary)}html[data-theme=dark] .social-btn:hover{border-color:var(--border-strong);background:#ffffff0f}html[data-theme=dark] .input{background:var(--color-surface);border-color:var(--border-default);color:var(--text-primary)}html[data-theme=dark] .input:focus{background:var(--color-surface)}html[data-theme=dark] .divider{color:var(--text-muted)}html[data-theme=dark] .divider:before,html[data-theme=dark] .divider:after{background:var(--border-default)}.progress-ring-circle{transform-origin:50%;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);transform:rotate(-90deg)}.countdown-digit{font-family:var(--font-heading);color:var(--color-green);text-align:center;min-width:2ch;font-size:1.5rem;font-weight:800}.filter-tab{border-radius:var(--radius-full);border:1.5px solid var(--border-default);background:var(--color-surface);color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;transition:var(--transition-fast);white-space:nowrap;box-shadow:var(--shadow-sm);padding:.5rem 1.25rem;font-size:.875rem;font-weight:600}.filter-tab:hover{border-color:var(--border-green);color:var(--color-green);background:var(--color-green-50)}.filter-tab.active{background:var(--color-green);border-color:var(--color-green);color:#fff;box-shadow:var(--shadow-glow-green)}.lb-row{border-radius:var(--radius-md);transition:var(--transition-fast);align-items:center;gap:.875rem;padding:.875rem 1rem;display:flex}.lb-row:hover{background:var(--color-surface-2)}.lb-row.highlighted{background:var(--color-green-50);border:1px solid var(--border-green)}.lb-avatar{background:linear-gradient(135deg, var(--color-green), var(--color-green-light));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:.9375rem;font-weight:700;display:flex}.spinner{border:2.5px solid #2d7d4633;border-top-color:var(--color-green);border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin}.toast-container{font-family:var(--font-body)!important}:focus-visible{outline:2px solid var(--color-green);outline-offset:2px;border-radius:4px}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-primary-c{color:var(--text-primary)}.text-green{color:var(--color-green)}.font-heading{font-family:var(--font-heading)}.fw-600{font-weight:600}.fw-700{font-weight:700}.lesson-markdown{color:var(--text-primary);font-size:.9375rem;line-height:1.75}.lesson-markdown h1{color:var(--text-primary);margin:1.5rem 0 .75rem;font-size:1.5rem;font-weight:700}.lesson-markdown h2{color:var(--text-primary);border-bottom:1px solid var(--border-subtle);margin:1.5rem 0 .5rem;padding-bottom:.4rem;font-size:1.25rem;font-weight:700}.lesson-markdown h3{color:var(--text-primary);margin:1.25rem 0 .4rem;font-size:1rem;font-weight:600}.lesson-markdown p{color:var(--text-secondary);margin-bottom:.875rem}.lesson-markdown ul,.lesson-markdown ol{color:var(--text-secondary);margin:.5rem 0 1rem 1.5rem}.lesson-markdown li{margin-bottom:.3rem}.lesson-markdown strong{color:var(--text-primary);font-weight:700}.lesson-markdown em{color:var(--text-secondary);font-style:italic}.lesson-markdown code{background:var(--color-green-50);color:var(--color-green-dark);border:1px solid #16a34a26;border-radius:4px;padding:.15em .5em;font-family:monospace;font-size:.875em}.lesson-markdown blockquote{border-left:3px solid var(--color-green);background:var(--color-green-50);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-secondary);margin:1rem 0;padding:.625rem 1rem}.lesson-markdown hr{border:none;border-top:1px solid var(--border-subtle);margin:1.5rem 0}.lesson-markdown table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.875rem}.lesson-markdown th{background:var(--color-green-50);color:var(--color-green-dark);border:1px solid var(--border-subtle);text-align:left;padding:.5rem .75rem;font-weight:600}.lesson-markdown td{border:1px solid var(--border-subtle);color:var(--text-secondary);padding:.5rem .75rem}.lesson-markdown tr:nth-child(2n) td{background:var(--color-surface-2)}.lesson-markdown :first-child{margin-top:0}.stepper-step{width:28px;height:28px;transition:var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex}.stepper-step.done{background:var(--color-green);color:#fff}.stepper-step.current{background:var(--color-green);color:#fff;box-shadow:0 0 0 3px #2d7d4633}.stepper-step.upcoming{background:var(--color-surface-2);color:var(--text-muted)}.section-card{background:var(--color-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.5rem}.daily-challenge-card{border-radius:var(--radius-xl);background:linear-gradient(135deg,#2d7d4614,#48b2670f);border:1px solid #2d7d4633;padding:1.5rem;position:relative;overflow:hidden}.quiz-option{border:1.5px solid var(--border-default);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;transition:var(--transition-fast);text-align:left;font-family:var(--font-body);color:var(--text-primary);padding:.875rem 1.25rem;font-size:.9375rem}.quiz-option:hover{border-color:var(--color-green);background:var(--color-green-50)}.quiz-option.correct{border-color:var(--color-green);color:var(--color-green-dark);background:#2d7d461a}.quiz-option.incorrect{border-color:var(--color-red);color:var(--color-red);background:#d9404014}.quiz-option.selected{border-color:var(--color-green);background:var(--color-green-50)}.modal-overlay{z-index:200;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#00000059;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal-box{background:var(--color-surface);border-radius:var(--radius-xl);width:100%;max-width:520px;box-shadow:var(--shadow-lg);padding:2rem;animation:.35s both bounceIn}@media (max-width:768px){.main-content{padding:1rem .875rem!important}h1{font-size:clamp(1.375rem,5vw,2rem)}h2{font-size:clamp(1.125rem,4vw,1.5rem)}.card-grid,.stats-grid,.lessons-grid{grid-template-columns:1fr!important;gap:.75rem!important}.section-card{padding:1rem!important}.page-header{margin-bottom:1.25rem!important}.pricing-grid{grid-template-columns:1fr!important;gap:1rem!important}.tracks-grid{grid-template-columns:1fr!important}.filter-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;flex-wrap:nowrap!important;overflow-x:auto!important}.filter-tabs::-webkit-scrollbar{display:none}.table-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}.table-wrap table{min-width:540px}.modal-overlay{align-items:flex-end!important;padding:0!important}.modal-box{max-height:92vh;overflow-y:auto;border-radius:20px 20px 0 0!important;width:100%!important;max-width:100%!important}.stat-tiles{grid-template-columns:repeat(2,1fr)!important;gap:.625rem!important}.step-indicator-label{display:none}.billing-toggle{flex-wrap:wrap!important;gap:.5rem!important}.quiz-options{grid-template-columns:1fr!important}.admin-topbar-date{display:none!important}.payment-method-grid{grid-template-columns:1fr!important}}@media (max-width:480px){body{font-size:.9375rem}.stat-tiles{grid-template-columns:1fr!important}.btn{padding:.6rem 1.25rem;font-size:.875rem}.btn-sm{padding:.4rem .875rem;font-size:.8125rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}