.grammar-hero-new{background:linear-gradient(160deg,#0f172a,#1e1b4b 40%,#312e81);position:relative;overflow:hidden}.grammar-hero-new:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(99,102,241,.15) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(139,92,246,.12) 0%,transparent 50%)}.grammar-hero-new:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 70%);top:-100px;right:-80px;animation:heroFloat 8s ease-in-out infinite}@keyframes heroFloat{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-30px,20px) scale(1.1)}}@keyframes cardSlideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.grammar-lesson-btn{animation:cardSlideUp .35s ease-out both}.grammar-lesson-btn:nth-child(1){animation-delay:.02s}.grammar-lesson-btn:nth-child(2){animation-delay:.04s}.grammar-lesson-btn:nth-child(3){animation-delay:.06s}.grammar-lesson-btn:nth-child(4){animation-delay:.08s}.grammar-lesson-btn:nth-child(5){animation-delay:.1s}.grammar-lesson-btn:nth-child(6){animation-delay:.12s}.grammar-lesson-btn:nth-child(7){animation-delay:.14s}.grammar-lesson-btn:nth-child(8){animation-delay:.16s}.grammar-lesson-btn:nth-child(9){animation-delay:.18s}.grammar-lesson-btn:nth-child(10){animation-delay:.2s}.grammar-lesson-btn:nth-child(11){animation-delay:.22s}.grammar-lesson-btn:nth-child(12){animation-delay:.24s}.grammar-lesson-btn:nth-child(13){animation-delay:.26s}.grammar-lesson-btn:nth-child(14){animation-delay:.28s}@keyframes sparkle{0%,to{opacity:.4}50%{opacity:1}}.grammar-level-card{background:linear-gradient(180deg,#222226,#1e1e22);border:1px solid #2e2e33;border-radius:20px;overflow:hidden;transition:all .3s ease;box-shadow:0 2px 12px #00000026,0 1px 3px #0000001a}.grammar-level-card:hover{border-color:#3a3a40;box-shadow:0 4px 20px #0003}.grammar-lesson-btn{display:flex;align-items:center;gap:14px;width:100%;padding:16px 20px;border-radius:16px;background:linear-gradient(180deg,#2a2a2f,#242428);border:2px solid #35353a;border-bottom:5px solid #18181c;cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);text-decoration:none;color:inherit;position:relative;overflow:hidden;box-shadow:0 2px 8px #0003,inset 0 1px #ffffff0a}.grammar-lesson-btn:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}.grammar-lesson-btn:hover{background:linear-gradient(180deg,#32323a,#2a2a2e);border-color:#45454a;transform:translateY(-2px);box-shadow:0 6px 20px #0000004d,inset 0 1px #ffffff0f}.grammar-lesson-btn:active{border-bottom-width:2px;transform:translateY(2px);box-shadow:0 1px 3px #0003}.grammar-lesson-btn.state-completed{border-left:4px solid #22c55e;background:linear-gradient(90deg,#22c55e14,#2a2a2f 30%);border-color:#22c55e33}.grammar-lesson-btn.state-completed:hover{border-color:#22c55e59;box-shadow:0 6px 20px #22c55e1f,inset 0 1px #ffffff0a}.grammar-lesson-btn.state-completed .lesson-num{position:relative}.grammar-lesson-btn.state-completed .lesson-num:before{content:"⭐";position:absolute;top:-8px;right:-8px;font-size:.7rem;animation:sparkle 2s ease-in-out infinite}.grammar-lesson-btn.state-current{border-color:#38bdf873;border-bottom-color:#38bdf880;background:linear-gradient(90deg,#38bdf814,#2a2a2f 30%);box-shadow:0 2px 12px #38bdf81f,0 0 30px #38bdf80f;animation:currentPulse 3s ease-in-out infinite,cardSlideUp .35s ease-out both}.grammar-lesson-btn.state-current .lesson-num{animation:currentNumPulse 2s ease-in-out infinite}@keyframes currentNumPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes currentPulse{0%,to{box-shadow:0 2px 12px #38bdf81f,0 0 30px #38bdf80f}50%{box-shadow:0 2px 16px #38bdf833,0 0 40px #38bdf81a}}.grammar-lesson-btn.state-locked{opacity:.4;cursor:default;filter:grayscale(.5)}.grammar-lesson-btn.state-locked:hover{transform:none;box-shadow:0 2px 8px #0003}.grammar-lesson-btn.state-premium-locked{opacity:.5}.lesson-num{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;flex-shrink:0;border-bottom:4px solid rgba(0,0,0,.25);box-shadow:0 2px 6px #00000026,inset 0 1px #ffffff26;position:relative}.lesson-num:after{content:"";position:absolute;top:2px;left:20%;right:20%;height:30%;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent);border-radius:999px}.progress-ring-wrap{position:relative;width:44px;height:44px;flex-shrink:0}.progress-ring-wrap svg{transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:#2e2e32;stroke-width:3}.progress-ring-fill{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .7s ease}.progress-ring-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem}.level-toggle-header{display:flex;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;transition:background .2s;user-select:none}.level-toggle-header:hover{background:#ffffff05}.level-icon-badge{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;border-bottom:5px solid rgba(0,0,0,.2);flex-shrink:0;box-shadow:0 4px 12px #00000026,inset 0 1px #ffffff26;position:relative}.level-icon-badge:after{content:"";position:absolute;top:3px;left:20%;right:20%;height:30%;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);border-radius:999px}.level-progress-bar{height:12px;background:#1a1a1e;border-radius:999px;overflow:hidden;margin:0 24px 20px;box-shadow:inset 0 2px 4px #0000004d}.level-progress-fill{height:100%;border-radius:999px;transition:width .7s cubic-bezier(.4,0,.2,1);position:relative}.level-progress-fill:after{content:"";position:absolute;top:2px;left:8px;right:8px;height:4px;background:#ffffff4d;border-radius:999px}.level-lessons-grid{display:grid;gap:10px;padding:0 20px 20px}.status-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:700;white-space:nowrap;flex-shrink:0}html.light .grammar-hero-new{background:linear-gradient(160deg,#667eea,#764ba2 60%,#6366f1)!important}html.light .grammar-hero-new h1,html.light .grammar-hero-new p,html.light .grammar-hero-new span,html.light .grammar-hero-new .hero-stat-val,html.light .grammar-hero-new .hero-stat-label{color:#fff!important}html.light .grammar-level-card{background:linear-gradient(180deg,#fff,#fafafa)!important;border-color:#e2e4e9!important;box-shadow:0 2px 8px #0000000f,0 1px 2px #0000000a!important}html.light .grammar-level-card:hover{border-color:#d1d5db!important;box-shadow:0 4px 16px #00000014!important}html.light .level-toggle-header:hover{background:#00000005!important}html.light .level-toggle-header .level-title{color:#1f2937!important}html.light .level-toggle-header .level-subtitle{color:#6b7280!important}html.light .level-toggle-header .level-chevron,html.light .level-toggle-header .level-count-text{color:#9ca3af!important}html.light .level-progress-bar{background:#e5e7eb!important;box-shadow:inset 0 2px 4px #00000014!important}html.light .grammar-lesson-btn{background:linear-gradient(180deg,#fff,#f8f9fa)!important;border-color:#dfe2e6!important;border-bottom-color:#c8ccd2!important;box-shadow:0 2px 6px #0000000d,inset 0 1px #fffc!important;color:#1f2937!important}html.light .grammar-lesson-btn:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)!important}html.light .grammar-lesson-btn:hover{background:linear-gradient(180deg,#fff,#f3f4f6)!important;border-color:#c8ccd2!important;box-shadow:0 4px 14px #00000014,inset 0 1px #fffc!important}html.light .grammar-lesson-btn .lesson-title-text{color:#1f2937!important}html.light .grammar-lesson-btn .lesson-sub-text{color:#6b7280!important}html.light .grammar-lesson-btn.state-completed{background:linear-gradient(90deg,#22c55e0f,#fff 30%)!important;border-color:#22c55e33!important;border-left-color:#22c55e!important}html.light .grammar-lesson-btn.state-current{border-color:#38bdf859!important;border-bottom-color:#38bdf873!important;background:linear-gradient(90deg,#38bdf80f,#fff 30%)!important;box-shadow:0 2px 12px #38bdf81a!important}html.light .lesson-num{box-shadow:0 2px 6px #0000001a,inset 0 1px #ffffff4d!important}html.light .progress-ring-bg{stroke:#e5e7eb!important}html.light .placement-cta-new{background:linear-gradient(135deg,#6366f10f,#22c55e0f)!important;border-color:#6366f126!important}html.light .status-chip.chip-free,html.light .status-chip.chip-done{background:#dcfce7!important;color:#166534!important}html.light .status-chip.chip-current{background:#dbeafe!important;color:#1e40af!important}html.light .status-chip.chip-locked{background:#f3f4f6!important;color:#9ca3af!important}html.light .status-chip.chip-premium{background:#fef3c7!important;color:#92400e!important}html.light .level-complete-badge{background:#dcfce7!important;color:#166534!important;border-color:#bbf7d0!important}html.light .grammar-hero-new .backdrop-blur-sm{background:#ffffff26!important;border-color:#ffffff40!important}html.light .grammar-lesson-btn .lesson-meta-text{color:#9ca3af!important}html.light .level-icon-badge{box-shadow:0 4px 12px #0000001a,inset 0 1px #ffffff4d!important}html.light .level-progress-fill:after{background:#fff6!important}html.light .grammar-lesson-btn.state-completed .lesson-num:before{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}html.light .placement-cta-new h3{color:#1f2937!important}html.light .placement-cta-new p{color:#6b7280!important}html.light .grammar-level-card .text-\[\#6B6B65\]{color:#78716c!important}html.light .grammar-level-card .text-\[\#8B8B85\]{color:#57534e!important}html.light .grammar-level-card .text-\[\#C8C8C0\]{color:#1c1917!important}html.light .grammar-lesson-btn .text-\[\#6B6B65\]{color:#78716c!important}html.light .grammar-level-card .text-green-400{color:#16a34a!important}html.light .grammar-level-card .text-blue-400{color:#2563eb!important}html.light .grammar-level-card .text-yellow-400{color:#ca8a04!important}html.light .grammar-level-card .text-orange-400{color:#ea580c!important}html.light .grammar-level-card .text-purple-400{color:#9333ea!important}html.light .hero-stat .text-green-400{color:#16a34a!important}html.light .hero-stat .text-blue-400{color:#2563eb!important}html.light .hero-stat .text-yellow-400{color:#ca8a04!important}html.light .hero-stat .text-orange-400{color:#ea580c!important}html.light .hero-stat .text-purple-400{color:#9333ea!important}@media(max-width:640px){.grammar-hero-new h1{font-size:2rem!important}.level-toggle-header{padding:16px!important;gap:12px!important}.level-icon-badge{width:44px!important;height:44px!important;font-size:1.4rem!important;border-radius:12px!important}.level-lessons-grid{padding:0 12px 16px!important;gap:8px!important}.grammar-lesson-btn{padding:12px 14px!important;gap:10px!important;border-radius:12px!important}.lesson-num{width:38px!important;height:38px!important;border-radius:10px!important;font-size:.95rem!important}.level-progress-bar{margin:0 16px 16px!important}}