.certificate-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100000;padding:20px;animation:fadeIn .3s ease-out}.certificate-modal{background:var(--bg-secondary);border-radius:12px;padding:30px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:slideUp .3s ease-out}.certificate-close{position:absolute;top:15px;right:15px;background:var(--bg-primary);border:2px solid var(--border);color:var(--text-primary);width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;transition:all .2s;z-index:10}.certificate-close:hover{background:var(--error);color:#fff;transform:rotate(90deg)}.certificate-container{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:8px;padding:40px;margin-bottom:20px;box-shadow:0 10px 40px #0000001a}.certificate-border{border:8px solid;border-image:linear-gradient(135deg,#e2b714,#f4c430,#e2b714) 1;padding:30px;position:relative;background:#fff}.certificate-border:before,.certificate-border:after{content:"";position:absolute;width:40px;height:40px;border:4px solid #e2b714}.certificate-border:before{top:-4px;left:-4px;border-right:none;border-bottom:none}.certificate-border:after{bottom:-4px;right:-4px;border-left:none;border-top:none}.certificate-content{position:relative;color:#333;text-align:center}.certificate-header{margin-bottom:30px}.certificate-logo{font-size:60px;margin-bottom:10px;animation:pulse 2s infinite}.certificate-title{font-size:48px;font-weight:800;color:#e2b714;margin:0;font-family:Georgia,serif;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.certificate-subtitle{font-size:20px;color:#666;margin:5px 0 0;font-style:italic;letter-spacing:2px}.certificate-divider{height:2px;background:linear-gradient(90deg,transparent 0%,#e2b714 50%,transparent 100%);margin:20px 0}.certificate-body{margin:30px 0}.certificate-text{font-size:18px;color:#666;margin:10px 0;font-style:italic}.certificate-name{font-size:42px;font-weight:700;color:#222;margin:20px 0;font-family:Georgia,serif;border-bottom:3px solid #e2b714;display:inline-block;padding-bottom:10px}.certificate-achievement{font-size:32px;font-weight:700;color:#e2b714;margin:20px 0;text-transform:uppercase;letter-spacing:2px}.certificate-description{font-size:20px;color:#555;margin:15px 0;font-weight:500}.certificate-stats{display:flex;justify-content:center;gap:60px;margin:30px 0}.certificate-stat{text-align:center}.stat-value{font-size:48px;font-weight:800;color:#e2b714;line-height:1}.stat-label{font-size:16px;color:#666;margin-top:5px;text-transform:uppercase;letter-spacing:1px}.certificate-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:40px;padding-top:20px;border-top:2px solid #e2b714}.certificate-date{text-align:left}.certificate-date p{margin:5px 0;color:#666;font-size:14px}.date-value{font-weight:700;color:#333;font-size:16px!important}.certificate-signature{text-align:center}.signature-line{width:200px;height:2px;background:#333;margin-bottom:5px}.certificate-signature p{margin:0;color:#666;font-size:14px;font-style:italic}.certificate-website{text-align:center;margin-top:20px;padding-top:15px;border-top:1px solid #e2b714}.certificate-website p{margin:0;color:#e2b714;font-size:14px;font-weight:600;letter-spacing:1px}.certificate-seal{position:absolute;bottom:20px;right:20px;width:100px;height:100px;background:radial-gradient(circle,#e2b714,#d4a017);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #e2b71466;border:4px solid #f4c430;transform:rotate(-15deg)}.seal-inner{text-align:center;color:#fff}.seal-text{font-size:12px;font-weight:800;letter-spacing:1px}.seal-year{font-size:20px;font-weight:700;margin-top:2px}.certificate-actions{display:flex;gap:15px;justify-content:center;margin-bottom:15px}.certificate-actions .cert-btn{min-width:250px}.cert-btn{padding:12px 30px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:8px}.cert-btn-primary{background:linear-gradient(135deg,#e2b714,#f4c430);color:#333;box-shadow:0 4px 15px #e2b7144d}.cert-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71466}.cert-btn-secondary{background:var(--bg-primary);color:var(--text-primary);border:2px solid var(--border)}.cert-btn-secondary:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--accent)}.cert-btn:disabled{opacity:.5;cursor:not-allowed}.certificate-note{text-align:center;color:var(--text-secondary);font-size:14px;margin:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@media (max-width: 768px){.certificate-modal,.certificate-container,.certificate-border{padding:20px}.certificate-title{font-size:32px}.certificate-name{font-size:28px}.certificate-achievement{font-size:22px}.certificate-stats{gap:30px}.stat-value{font-size:36px}.certificate-footer{flex-direction:column;gap:20px;align-items:center}.certificate-date{text-align:center}.certificate-seal{width:80px;height:80px;bottom:10px;right:10px}.seal-text{font-size:10px}.seal-year{font-size:16px}.certificate-actions{flex-direction:column}.cert-btn{width:100%;justify-content:center}}.achievement-notification{position:fixed;top:100px;right:-400px;width:350px;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border:2px solid var(--accent);border-radius:12px;padding:1.5rem;box-shadow:0 10px 40px #e2b7144d;z-index:1000;transition:right .5s cubic-bezier(.68,-.55,.265,1.55);animation:achievementGlow 2s ease-in-out infinite}.achievement-notification.show{right:20px}@keyframes achievementGlow{0%,to{box-shadow:0 10px 40px #e2b7144d}50%{box-shadow:0 10px 50px #e2b71480}}.achievement-content{position:relative}.achievement-header{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.achievement-badge{font-size:2rem;animation:bounce 1s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.achievement-header h3{color:var(--accent);font-size:1.2rem;margin:0;font-weight:600}.achievement-body{display:flex;gap:1rem;align-items:center}.achievement-icon{font-size:3rem;animation:rotate 2s ease-in-out infinite}@keyframes rotate{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}.achievement-info h4{color:var(--text-primary);font-size:1.1rem;margin:0 0 .3rem;font-weight:600}.achievement-info p{color:var(--text-secondary);font-size:.9rem;margin:0;line-height:1.4}.achievement-counter{text-align:center;margin-top:1rem;color:var(--text-secondary);font-size:.85rem}.achievement-close{position:absolute;top:.5rem;right:.5rem;background:transparent;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.achievement-close:hover{background:var(--bg-primary);color:var(--accent);transform:rotate(90deg)}.achievements-intro{text-align:center;color:var(--text-secondary);margin-bottom:2rem;font-size:1.1rem}.achievements-overview{display:grid;grid-template-columns:300px 1fr;gap:2rem;margin-bottom:3rem}.progress-card{background:var(--bg-secondary);border-radius:12px;padding:2rem;border:1px solid var(--border);text-align:center;box-shadow:0 4px 12px #0000001a}.progress-card h3{color:var(--accent);margin-bottom:1.5rem;font-size:1.3rem}.progress-circle{position:relative;width:150px;height:150px;margin:0 auto 1rem}.progress-circle svg{transform:rotate(-90deg)}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.progress-number{display:block;font-size:2rem;font-weight:700;color:var(--accent)}.progress-label{display:block;font-size:.9rem;color:var(--text-secondary)}.progress-info{color:var(--text-secondary);font-size:.95rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.stat-card{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.stat-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px #e2b71433;border-color:var(--accent)}.stat-icon{font-size:2rem;margin-bottom:.5rem}.stat-info h4{color:var(--text-secondary);font-size:.9rem;margin:0 0 .5rem;font-weight:500}.stat-value{color:var(--accent);font-size:1.8rem;font-weight:700;margin:0}.achievements-section{margin-bottom:3rem}.achievements-section h2{color:var(--accent);margin-bottom:1.5rem;font-size:1.8rem}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.achievement-card{background:var(--bg-secondary);border-radius:12px;padding:2rem;border:2px solid var(--border);text-align:center;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 12px #0000001a}.achievement-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(226,183,20,.1),transparent);transition:left .5s}.achievement-card:hover:before{left:100%}.achievement-card.unlocked{border-color:var(--accent);background:linear-gradient(135deg,rgba(226,183,20,.05) 0%,var(--bg-secondary) 100%)}.achievement-card.unlocked:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 8px 24px #e2b7144d}.achievement-card.locked{opacity:.7}.achievement-card.locked:hover{opacity:1;transform:translateY(-3px)}.achievement-icon-large{font-size:4rem;margin-bottom:1rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.achievement-icon-large.grayscale{filter:grayscale(100%);opacity:.5}.achievement-card h3{color:var(--text-primary);font-size:1.2rem;margin:0 0 .5rem;font-weight:600}.achievement-card p{color:var(--text-secondary);font-size:.9rem;margin:0 0 1rem;line-height:1.5}.achievement-badge-unlocked{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:var(--bg-primary);padding:.5rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;display:inline-block}.achievement-progress{display:flex;align-items:center;gap:.8rem}.progress-bar{flex:1;height:8px;background:var(--bg-primary);border-radius:10px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#f4c430);border-radius:10px;transition:width .5s ease}.progress-percentage{color:var(--accent);font-size:.9rem;font-weight:600;min-width:40px}.achievements-cta{text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,#e2b7141a,#f4c4301a);border-radius:12px;border:2px solid var(--accent)}.achievements-cta h3{color:var(--accent);font-size:1.8rem;margin-bottom:1rem}.achievements-cta p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:1.5rem}.daily-challenge-banner{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border:2px solid var(--accent);border-radius:16px;padding:2rem;margin-bottom:2rem;box-shadow:0 8px 24px #e2b71433;animation:fadeIn .6s ease-out}.challenge-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.challenge-icon{font-size:2.5rem;animation:pulse 2s ease-in-out infinite}.challenge-title h3{color:var(--accent);font-size:1.5rem;margin:0;font-weight:600}.challenge-date{color:var(--text-secondary);font-size:.9rem;margin:.3rem 0 0}.challenge-completed-badge{margin-left:auto;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600}.challenge-content{margin-bottom:1.5rem}.challenge-quote{background:var(--bg-primary);padding:1.5rem;border-radius:12px;border-left:4px solid var(--accent);margin-bottom:1rem}.challenge-text{color:var(--text-primary);font-size:1.1rem;line-height:1.8;margin:0 0 1rem;font-style:italic}.challenge-author{color:var(--accent);font-size:.95rem;margin:0;font-weight:600;text-align:right}.challenge-info{display:flex;gap:1rem;align-items:center}.challenge-difficulty{padding:.4rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600}.challenge-difficulty.easy{background:#4caf5033;color:#4caf50}.challenge-difficulty.medium{background:#ff980033;color:#ff9800}.challenge-difficulty.hard{background:#f4433633;color:#f44336}.challenge-button{width:100%;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border:none;color:var(--bg-primary);font-size:1.1rem;padding:1rem 2rem;cursor:pointer;border-radius:12px;font-family:Roboto Mono,monospace;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #e2b71466}.challenge-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71480}.challenge-button.completed{background:linear-gradient(135deg,#4caf50,#45a049)}@media (max-width: 1024px){.achievements-overview{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}@media (max-width: 768px){.achievement-notification{width:300px}.achievement-notification.show{right:10px}.achievements-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.daily-challenge-banner{padding:1.5rem}.challenge-text{font-size:1rem}}@media (max-width: 480px){.achievement-notification{width:calc(100vw - 40px);right:-100%}.achievement-notification.show{right:20px}.stats-grid{grid-template-columns:1fr}}.keyboard-guide{background:var(--bg-secondary);border-radius:12px;padding:24px;margin:20px 0;border:2px solid var(--border-color)}.keyboard-guide-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.keyboard-guide-header h3{margin:0;color:var(--text-primary);font-size:20px}.close-keyboard-btn{background:transparent;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:4px 8px;transition:color .2s}.close-keyboard-btn:hover{color:var(--text-primary)}.show-keyboard-btn{background:var(--primary-color);color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;margin:20px 0;transition:all .2s}.show-keyboard-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.finger-legend{display:flex;gap:16px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary)}.legend-color{width:20px;height:20px;border-radius:4px;border:1px solid var(--border-color)}.keyboard-container{position:relative;margin-bottom:20px}.hands-visual{display:flex;justify-content:center;align-items:flex-end;gap:100px;padding:30px 20px 15px;position:relative;min-height:140px;background:linear-gradient(to bottom,transparent 0%,var(--bg-primary) 100%);border-radius:8px 8px 0 0}.finger-indicators-container{display:contents}.finger-group{display:flex;gap:20px;align-items:flex-end}.finger-indicator{display:flex;flex-direction:column;align-items:center;animation:fingerFloat 3s ease-in-out infinite}.finger-indicator:nth-child(1){animation-delay:0s}.finger-indicator:nth-child(2){animation-delay:.2s}.finger-indicator:nth-child(3){animation-delay:.4s}.finger-indicator:nth-child(4){animation-delay:.6s}@keyframes fingerFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.finger-label{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.finger-line{width:4px;height:var(--finger-height);background:linear-gradient(to bottom,var(--finger-color),transparent);border-radius:2px;position:relative;animation:linePulse 2s ease-in-out infinite}@keyframes linePulse{0%,to{opacity:.6;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.05)}}.finger-dot{width:16px;height:16px;background:var(--finger-color);border-radius:50%;margin-top:-8px;box-shadow:0 0 20px var(--finger-color),0 4px 8px #0003;animation:dotPulse 2s ease-in-out infinite;position:relative;z-index:1}@keyframes dotPulse{0%,to{transform:scale(1);box-shadow:0 0 15px var(--finger-color),0 4px 8px #0003}50%{transform:scale(1.3);box-shadow:0 0 30px var(--finger-color),0 6px 12px #0000004d}}.finger-dot:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:var(--finger-color);border-radius:50%;animation:ripple 2s ease-out infinite}@keyframes ripple{0%{width:100%;height:100%;opacity:.8}to{width:200%;height:200%;opacity:0}}.keyboard-visual{background:var(--bg-primary);padding:20px;border-radius:8px}.keyboard-row{display:flex;gap:4px;justify-content:center;margin-bottom:4px}.keyboard-key{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:2px solid;font-weight:600;font-size:14px;color:var(--text-primary);position:relative;transition:all .2s;cursor:help}.keyboard-key:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.keyboard-key.highlighted{animation:pulse-key 1.5s infinite;font-size:16px;font-weight:700;color:#fff}@keyframes pulse-key{0%,to{transform:scale(1);box-shadow:0 0 #ffffffb3}50%{transform:scale(1.05);box-shadow:0 0 0 8px #fff0}}.keyboard-key.home-key{font-weight:700}.home-bump{position:absolute;bottom:4px;width:8px;height:2px;background:var(--text-primary);border-radius:1px}.spacebar-row{margin-top:8px}.spacebar{min-width:300px!important;background:var(--bg-secondary)!important;border-color:var(--border-color)!important}.keyboard-instructions{background:var(--bg-primary);padding:16px;border-radius:8px;margin-bottom:20px}.instruction-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;color:var(--text-secondary);font-size:14px;line-height:1.6}.instruction-item:last-child{margin-bottom:0}.instruction-icon{font-size:20px;flex-shrink:0}.hand-position-visual{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}.hand{text-align:center}.hand-label{font-weight:600;margin-bottom:12px;color:var(--text-primary);font-size:16px}.fingers{display:flex;gap:8px}.finger{width:60px;padding:12px 8px;border-radius:8px;color:#fff;font-weight:600;box-shadow:0 2px 8px #0003}.finger-name{font-size:11px;margin-bottom:8px;opacity:.9}.finger-key{font-size:20px;font-weight:700}@media (max-width: 768px){.keyboard-guide{padding:16px}.hands-visual{gap:60px;min-height:120px;padding:20px 15px 12px}.finger-group{gap:15px}.finger-label{font-size:10px}.finger-line{width:3px}.finger-dot{width:14px;height:14px}.keyboard-key{min-width:30px;height:30px;font-size:12px}.keyboard-key.highlighted{font-size:14px}.spacebar{min-width:200px!important}.finger{width:50px;padding:10px 6px}.finger-key{font-size:16px}.hand-position-visual{gap:20px}}@media (max-width: 480px){.hands-visual{gap:40px;min-height:100px;padding:15px 10px 10px}.finger-group{gap:10px}.finger-label{font-size:9px;margin-bottom:6px}.finger-line{width:2.5px}.finger-dot{width:12px;height:12px}@keyframes fingerFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.keyboard-key{min-width:24px;height:24px;font-size:10px}.spacebar{min-width:150px!important;font-size:12px}.finger{width:40px;padding:8px 4px}.finger-name{font-size:9px}.finger-key{font-size:14px}}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #323437;--bg-secondary: #2c2e31;--text-primary: #d1d0c5;--text-secondary: #646669;--accent: #e2b714;--error: #ca4754;--border: #646669;--primary-color: #e2b714;--primary-color-rgb: 226, 183, 20;--accent-color: #f4c430;--border-color: #646669}body[data-theme=light]{--bg-primary: #f5f5f5;--bg-secondary: #ffffff;--text-primary: #2c2e31;--text-secondary: #646669;--accent: #d4a017;--error: #d32f2f;--border: #d1d0c5;--primary-color: #d4a017;--primary-color-rgb: 212, 160, 23;--accent-color: #e2b714;--border-color: #d1d0c5}body{font-family:Roboto Mono,Noto Sans Devanagari,Noto Sans Arabic,Noto Sans CJK,sans-serif,monospace;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;overflow-y:auto;transition:background .3s ease,color .3s ease;position:relative;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(226,183,20,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(226,183,20,.08) 0%,transparent 50%);pointer-events:none;z-index:0}body[data-theme=light]:before{background:radial-gradient(circle at 20% 50%,rgba(212,160,23,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(212,160,23,.12) 0%,transparent 50%)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8rem 2rem 2rem;cursor:text;position:relative;z-index:1;width:100%;max-width:100vw;box-sizing:border-box}.header{position:fixed;top:0;left:0;right:0;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;animation:slideDown .6s ease-out;background:var(--bg-primary);border-bottom:1px solid var(--border);z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 10px #0000001a}.header-top-row{display:contents}.mobile-menu-btn{display:none;background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-primary);font-size:1.5rem;padding:.5rem .8rem;cursor:pointer;border-radius:10px;transition:all .3s ease;line-height:1}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.logo-container{display:flex;align-items:center;gap:.8rem;text-decoration:none;transition:all .3s ease}.logo-container:hover{transform:translateY(-2px)}.logo-icon{width:40px;height:40px;animation:flowPulse 3s ease-in-out infinite}@keyframes flowPulse{0%,to{transform:scaleZ(1);opacity:1}50%{transform:scale3d(1.05,1.05,1);opacity:.9}}.logo-text{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.8rem;font-weight:700;letter-spacing:-.5px;margin:0}.header-nav{display:flex;gap:2rem;align-items:center}.nav-link{color:var(--text-secondary);text-decoration:none;font-family:Roboto Mono,monospace;font-weight:500;font-size:1rem;transition:all .3s ease;position:relative;padding:.5rem 0}.nav-link:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--accent),#f4c430);transition:width .3s ease}.nav-link:hover{color:var(--accent)}.nav-link:hover:after{width:100%}.header-actions{display:flex;gap:1rem;align-items:center}.settings-btn{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:1.3rem;padding:.5rem .8rem;cursor:pointer;border-radius:50%;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a}.settings-btn:hover{border-color:var(--accent);transform:scale(1.1) rotate(90deg);box-shadow:0 4px 12px #e2b7144d}.settings-btn:active{transform:scale(.95) rotate(0)}.theme-toggle{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:1.3rem;padding:.5rem .8rem;cursor:pointer;border-radius:50%;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a}.theme-toggle:hover{border-color:var(--accent);transform:scale(1.1) rotate(20deg);box-shadow:0 4px 12px #e2b7144d}.theme-toggle:active{transform:scale(.95) rotate(0)}.share-btn{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:1rem;padding:.6rem 1.2rem;cursor:pointer;border-radius:.5rem;font-family:Roboto Mono,monospace;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px #0000001a;position:relative;overflow:hidden}.share-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:var(--accent);opacity:.2;transform:translate(-50%,-50%);transition:width .6s,height .6s}.share-btn:hover:before{width:300px;height:300px}.share-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}.share-btn span{position:relative;z-index:1}.share-btn span{font-size:1.2rem}.controls-wrapper{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem;align-items:center;animation:fadeIn .6s ease-out .3s both}.mode-selectors{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;justify-content:center}.difficulty-selector{display:flex;gap:1rem;align-items:center}.difficulty-dropdown{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-primary);font-size:1rem;padding:.7rem 1.2rem;cursor:pointer;border-radius:10px;font-family:Roboto Mono,monospace;transition:all .3s ease;min-width:200px;appearance:auto;-webkit-appearance:menulist;-moz-appearance:menulist;box-shadow:0 2px 8px #0000001a;font-weight:500}.difficulty-dropdown:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}.difficulty-dropdown:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #e2b7141a}.difficulty-dropdown option{background:var(--bg-secondary);color:var(--text-primary)}.selected-mode{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1rem;font-weight:600;letter-spacing:.5px}.language-selector{display:flex;gap:1rem;align-items:center}.language-dropdown{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-primary);font-size:1rem;padding:.7rem 1.2rem;cursor:pointer;border-radius:10px;font-family:Roboto Mono,monospace;transition:all .3s ease;min-width:200px;appearance:auto;-webkit-appearance:menulist;-moz-appearance:menulist;box-shadow:0 2px 8px #0000001a;font-weight:500}.language-dropdown:disabled{opacity:.5;cursor:not-allowed}.language-dropdown:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}.language-dropdown:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #e2b7141a}.language-dropdown option{background:var(--bg-secondary);color:var(--text-primary)}.selected-language{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1rem;font-weight:600;letter-spacing:.5px}.selected-language.disabled{opacity:.5;background:var(--text-secondary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.controls{display:flex;gap:1rem}.controls button{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:1.2rem;padding:.6rem 1.2rem;cursor:pointer;border-radius:10px;transition:all .3s ease;font-family:Roboto Mono,monospace;font-weight:500;box-shadow:0 2px 8px #0000001a;position:relative;overflow:hidden}.controls button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#e2b71433;transform:translate(-50%,-50%);transition:width .4s,height .4s}.controls button:hover:before{width:200px;height:200px}.controls button:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}.controls button.active{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:var(--bg-primary);border-color:var(--accent);font-weight:600;box-shadow:0 4px 15px #e2b71466}.controls button.active:before{display:none}.custom-time-input{display:flex;gap:.5rem;align-items:center}.time-input{background:transparent;border:2px solid var(--border);color:var(--text-primary);font-size:1.2rem;padding:.5rem;width:80px;border-radius:.5rem;font-family:Roboto Mono,monospace;text-align:center}.time-input:focus{outline:none;border-color:var(--accent)}.time-input::placeholder{color:var(--text-secondary)}.apply-btn{background:var(--accent)!important;color:var(--bg-primary)!important;padding:.5rem .8rem!important;font-size:1.2rem;border-radius:.5rem}.timer{font-size:3rem;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:2rem;font-weight:700;letter-spacing:2px;animation:pulse 2s ease-in-out infinite;text-shadow:0 0 20px rgba(226,183,20,.3)}@keyframes pulse{0%,to{transform:scaleZ(1)}50%{transform:scale3d(1.05,1.05,1)}}.words-container{max-width:900px;width:100%;font-size:1.8rem;line-height:3rem;display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2rem;-webkit-user-select:none;user-select:none;padding:2rem;background:var(--bg-secondary);border-radius:16px;box-shadow:0 10px 40px #0000001a,inset 0 1px #ffffff1a;border:1px solid var(--border);animation:fadeIn .3s ease-out both;position:relative;overflow:hidden;box-sizing:border-box;contain:layout style paint;content-visibility:auto}.words-container:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(226,183,20,.05),transparent);animation:shimmer 3s infinite;will-change:transform;transform:translateZ(0)}@keyframes shimmer{0%{left:-100%}to{left:100%}}.word{display:inline-flex;position:relative}.word{display:inline-flex;position:relative;transition:transform .2s ease}.word.current{background:linear-gradient(135deg,#e2b7141a,#f4c4301a);padding:.2rem .5rem;border-radius:8px;border-bottom:3px solid var(--accent);animation:currentWord .3s ease-out;transform:scale(1.05)}@keyframes currentWord{0%{transform:scale(1);opacity:.5}to{transform:scale(1.05);opacity:1}}.char{color:var(--text-secondary)}.char.correct{color:var(--text-primary)}.char.incorrect{color:var(--error)}.char.extra{color:var(--error);opacity:.8}.char.cursor:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent) 0%,#f4c430 100%);animation:blink 1s infinite,cursorGlow 2s ease-in-out infinite;border-radius:2px;box-shadow:0 0 10px var(--accent)}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes cursorGlow{0%,to{box-shadow:0 0 10px var(--accent)}50%{box-shadow:0 0 20px var(--accent),0 0 30px var(--accent)}}.custom-time-input{display:flex;align-items:center;gap:.5rem}.time-input{width:70px;padding:.4rem;background:var(--bg-secondary);border:2px solid var(--border);border-radius:.5rem;color:var(--text-primary);font-family:Roboto Mono,monospace;font-size:1rem;text-align:center;transition:all .3s ease}.time-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #e2b7141a}.apply-btn{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border:none;color:var(--bg-primary);font-size:1rem;padding:.4rem .8rem;cursor:pointer;border-radius:.5rem;transition:all .3s ease;font-weight:600;box-shadow:0 2px 8px #e2b7144d}.apply-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px #e2b71466}.apply-btn:active{transform:scale(.95)}.hidden-input{position:absolute;opacity:0;pointer-events:none}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:800px;margin:0 auto;animation:fadeIn .6s ease-out}.result-item{text-align:center;animation:scaleIn .5s ease-out backwards}.result-label{font-size:1rem;color:var(--text-secondary);margin-bottom:.5rem}.result-item:nth-child(1){animation-delay:.1s}.result-item:nth-child(2){animation-delay:.2s}.result-item:nth-child(3){animation-delay:.3s}.result-value{font-size:4rem;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;letter-spacing:-2px;text-shadow:0 4px 20px rgba(226,183,20,.3);animation:numberPop .5s ease-out}@keyframes numberPop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.restart-btn{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border:none;color:var(--bg-primary);font-size:1.2rem;padding:1rem 2.5rem;cursor:pointer;border-radius:12px;font-family:Roboto Mono,monospace;font-weight:600;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);margin:1rem auto 0;box-shadow:0 4px 15px #e2b71466;position:relative;overflow:hidden;display:block}.restart-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.restart-btn:hover:before{width:300px;height:300px}.restart-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 25px #e2b71480}.restart-btn:active{transform:translateY(-1px) scale(1.02)}.lesson-complete-actions{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;align-items:center;grid-column:1 / -1}.next-lesson-btn{background:linear-gradient(135deg,#4caf50,#45a049);border:none;color:#fff;font-size:1.2rem;padding:1rem 2.5rem;cursor:pointer;border-radius:12px;font-family:Roboto Mono,monospace;font-weight:600;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);display:flex;align-items:center;gap:.5rem;box-shadow:0 4px 15px #4caf5066;position:relative;overflow:hidden}.next-lesson-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.next-lesson-btn:hover:before{width:300px;height:300px}.next-lesson-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 25px #4caf5080}.next-lesson-btn:active{transform:translateY(-1px) scale(1.02)}.change-lesson-btn-result{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:1rem;padding:.8rem 1.5rem;cursor:pointer;border-radius:10px;font-family:Roboto Mono,monospace;font-weight:500;transition:all .3s ease;box-shadow:0 2px 8px #0000001a}.change-lesson-btn-result:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}.bottom-controls{margin-top:3rem;display:flex;justify-content:center;gap:1rem;animation:fadeIn .6s ease-out .5s both}.reset-bottom-btn{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:1rem;padding:.8rem 1.5rem;cursor:pointer;border-radius:10px;font-family:Roboto Mono,monospace;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px #0000001a;position:relative;overflow:hidden}.reset-bottom-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#e2b71433;transform:translate(-50%,-50%);transition:width .5s,height .5s}.reset-bottom-btn:hover:before{width:300px;height:300px}.reset-bottom-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}.reset-bottom-btn span{font-size:1.3rem}.shortcuts-btn{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:1rem;padding:.8rem 1.5rem;cursor:pointer;border-radius:10px;font-family:Roboto Mono,monospace;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px #0000001a;position:relative;overflow:hidden}.shortcuts-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#e2b71433;transform:translate(-50%,-50%);transition:width .5s,height .5s}.shortcuts-btn:hover:before{width:300px;height:300px}.shortcuts-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}.shortcuts-btn span{font-size:1.3rem}.shortcuts-info{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;align-items:center;animation:fadeIn .4s ease-out;padding:1.5rem;background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border);box-shadow:0 4px 12px #0000001a}.shortcut-item{color:var(--text-secondary);font-size:.9rem;display:flex;align-items:center;gap:.5rem}kbd{background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);border:2px solid var(--border);border-bottom-width:4px;border-radius:.4rem;padding:.4rem .8rem;font-family:Roboto Mono,monospace;font-size:.85rem;color:var(--text-primary);box-shadow:0 2px 4px #0000001a;font-weight:600;transition:all .2s ease}kbd:hover{transform:translateY(-1px);box-shadow:0 3px 6px #00000026}@media (max-width: 1024px){.app{padding:7rem 1.5rem 1.5rem}.header{padding:1.2rem 1.5rem}.header-nav,.mobile-menu-btn{display:none!important}.words-container{max-width:700px;font-size:1.5rem;line-height:2.5rem;padding:1.5rem}.header h1{font-size:1.5rem}.header h1:after{right:-1.8rem;font-size:1rem}.share-btn{font-size:.9rem;padding:.5rem 1rem}.timer{font-size:2.5rem}.mode-tab{font-size:1rem;padding:.7rem 1.5rem}.lesson-info{padding:1.2rem}.results{grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:700px}}@media (max-width: 768px){.app{padding:5.5rem .8rem .8rem}.header{padding:.5rem .6rem;flex-direction:row;gap:.3rem;align-items:center;justify-content:space-between;flex-wrap:wrap}.header-top-row{display:contents}.mobile-menu-btn{display:none!important}.logo-container{gap:.3rem;flex-shrink:0}.logo-icon{width:22px;height:22px}.header h1{font-size:1rem;letter-spacing:-.3px}.header-nav{display:none!important}.header-actions{display:flex;flex-direction:row;gap:.3rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}.settings-btn,.theme-toggle,.share-btn,.register-header-btn,.games-header-btn,.code-header-btn,.user-info{font-size:.7rem;padding:.4rem .6rem;border-radius:6px;font-weight:600;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:.3rem;height:32px;box-sizing:border-box}.settings-btn,.theme-toggle{min-width:32px;padding:.4rem;font-size:.95rem}.settings-btn:before,.theme-toggle:before{content:none}.share-btn span,.register-header-btn span,.games-header-btn span,.code-header-btn span{font-size:.9rem}.user-info{background:var(--bg-secondary);border:2px solid var(--border);transition:all .3s ease}.user-icon{font-size:.9rem}.user-name{font-size:.7rem;font-weight:600;max-width:50px;overflow:hidden;text-overflow:ellipsis}.user-dropdown-icon{font-size:.55rem}.user-dropdown-menu{left:0;right:0;min-width:100%;border-radius:10px}.profile-link,.logout-btn{padding:.9rem 1rem;font-size:.95rem}.controls-wrapper{gap:.8rem;margin-bottom:1.5rem}.mode-selectors{flex-direction:column;gap:1rem;width:100%}.difficulty-selector{flex-direction:column;gap:.5rem;width:100%}.difficulty-dropdown{min-width:100%;max-width:300px;font-size:.9rem;padding:.5rem .8rem}.selected-mode{font-size:.9rem}.language-selector{flex-direction:column;gap:.5rem;width:100%}.language-dropdown{min-width:100%;max-width:300px;font-size:.9rem;padding:.5rem .8rem}.selected-language{font-size:.9rem}.controls{flex-wrap:wrap;justify-content:center;gap:.5rem}.controls button{font-size:1rem;padding:.4rem .8rem}.custom-time-input{gap:.3rem}.time-input{width:60px;font-size:1rem;padding:.4rem}.timer{font-size:1.5rem;margin-bottom:1.5rem}.words-container{max-width:100%;font-size:1.3rem;line-height:2.2rem;gap:.5rem;margin-bottom:1.5rem;padding:1.2rem}.word.current{border-bottom:2px solid var(--accent);padding:.2rem .4rem}.bottom-controls{margin-top:2rem;flex-direction:column;gap:.8rem;width:100%;max-width:300px}.reset-bottom-btn,.shortcuts-btn{font-size:.9rem;padding:.7rem 1.2rem;width:100%}.reset-bottom-btn span,.shortcuts-btn span{font-size:1.1rem}.shortcuts-info{margin-top:1.5rem;gap:.8rem}.shortcut-item{font-size:.8rem;flex-wrap:wrap;justify-content:center}kbd{font-size:.75rem;padding:.2rem .5rem}.results{grid-template-columns:1fr;gap:1.5rem;max-width:300px}.result-label{font-size:.9rem}.result-value{font-size:2.5rem}.restart-btn{font-size:1rem;padding:.8rem 1.5rem}.lesson-complete-actions{width:100%;max-width:300px;margin-left:auto;margin-right:auto}.next-lesson-btn{font-size:1rem;padding:.8rem 1.5rem;width:100%}.change-lesson-btn-result{font-size:.9rem;padding:.7rem 1.2rem;width:100%}}@media (max-width: 480px){.app{padding:5.5rem .6rem .6rem}.header{padding:.4rem .5rem;gap:.25rem}.mobile-menu-btn{display:none!important}.logo-icon{width:20px;height:20px}.logo-container{gap:.25rem}.header h1{font-size:.9rem}.header-actions{gap:.25rem}.header-nav{display:none!important}.settings-btn,.theme-toggle,.share-btn,.register-header-btn,.games-header-btn,.code-header-btn,.user-info{font-size:.65rem;padding:.35rem .5rem;height:28px}.settings-btn,.theme-toggle{min-width:28px;padding:.35rem;font-size:.85rem}.share-btn span,.register-header-btn span,.games-header-btn span,.code-header-btn span,.user-icon{font-size:.8rem}.user-name{font-size:.65rem;max-width:40px}.user-dropdown-icon{font-size:.5rem}.words-container{font-size:1.1rem;line-height:1.9rem;gap:.4rem;padding:1rem}.timer{font-size:1.8rem}.controls button{font-size:.9rem;padding:.4rem .7rem}.language-dropdown,.difficulty-dropdown{font-size:.85rem;padding:.6rem 1rem}.result-value{font-size:2.2rem}.mode-tab{font-size:.85rem;padding:.5rem 1rem}.lesson-info{padding:1rem}.lesson-info h2{font-size:1.1rem}.lesson-info p{font-size:.85rem}}.mode-tabs{display:flex;gap:1rem;margin-bottom:2rem}.mode-tabs{display:flex;gap:1rem;margin-bottom:2rem;animation:fadeIn .6s ease-out .2s both}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mode-tab{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:1.1rem;padding:.8rem 2rem;cursor:pointer;border-radius:12px;font-family:Roboto Mono,monospace;font-weight:500;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a}.mode-tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(226,183,20,.2),transparent);transition:left .5s}.mode-tab:hover:before{left:100%}.mode-tab:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}.mode-tab.active{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border-color:var(--accent);color:var(--bg-primary);transform:scale(1.05);box-shadow:0 6px 20px #e2b71466}.mode-tab.active:before{display:none}.lesson-info{text-align:center;margin-bottom:2rem;max-width:600px;animation:fadeIn .6s ease-out .3s both;padding:1.5rem;background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border);box-shadow:0 4px 12px #0000001a}.lesson-info h2{color:var(--accent);font-size:1.5rem;margin-bottom:.5rem;font-weight:500}.lesson-info p{color:var(--text-primary);font-size:1rem;margin-bottom:1rem}.change-lesson-btn{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:.9rem;padding:.6rem 1.2rem;cursor:pointer;border-radius:8px;font-family:Roboto Mono,monospace;transition:all .3s ease;font-weight:500;box-shadow:0 2px 8px #0000001a}.change-lesson-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}.lesson-list{max-width:1200px;width:100%;max-height:70vh;overflow-y:auto;padding:1rem;animation:fadeIn .6s ease-out}.lesson-list::-webkit-scrollbar{width:10px}.lesson-list::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:10px}.lesson-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent) 0%,#f4c430 100%);border-radius:10px}.lesson-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#f4c430 0%,var(--accent) 100%)}.lesson-category{margin-bottom:3rem}.lesson-category h3{color:var(--accent);font-size:1.3rem;margin-bottom:1.5rem;font-weight:500}.lessons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}.lesson-card{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-primary);padding:1.5rem;cursor:pointer;border-radius:12px;text-align:left;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);font-family:Roboto Mono,monospace;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a}.lesson-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),#f4c430);transform:scaleX(0);transition:transform .3s ease}.lesson-card:hover:before{transform:scaleX(1)}.lesson-card:hover{border-color:var(--accent);transform:translateY(-5px) scale(1.02);box-shadow:0 8px 24px #e2b71433}.lesson-card.selected{border-color:var(--accent);background:linear-gradient(135deg,#e2b7141a,#f4c4301a);box-shadow:0 8px 24px #e2b7144d}.lesson-card.selected:before{transform:scaleX(1)}.lesson-number{color:var(--text-secondary);font-size:.85rem;margin-bottom:.5rem;font-weight:500}.lesson-title{color:var(--accent);font-size:1.1rem;margin-bottom:.5rem;font-weight:500}.lesson-description{color:var(--text-primary);font-size:.9rem;line-height:1.4}@media (max-width: 896px) and (orientation: landscape){.app{padding:6rem 1rem 1rem}.header{padding:.8rem 1rem;flex-direction:row;justify-content:space-between;flex-wrap:nowrap}.header h1{font-size:1.1rem}.header h1:after{display:none}.words-container{font-size:1.1rem;line-height:1.8rem;padding:1rem;max-height:50vh;overflow-y:auto}.timer{font-size:1.5rem;margin-bottom:1rem}.bottom-controls{flex-direction:row;max-width:100%;margin-top:1.5rem}.mode-tabs{gap:.8rem;margin-bottom:1rem}.mode-tab{font-size:.9rem;padding:.5rem 1.2rem}.controls-wrapper{gap:1rem;margin-bottom:1rem}.lesson-list{max-height:50vh}}@media (max-width: 768px){.mode-tabs{gap:.5rem;margin-bottom:1.5rem;width:100%;max-width:400px}.mode-tab{font-size:.9rem;padding:.6rem 1.2rem;flex:1}}@media (max-width: 600px){.mode-tab:nth-child(1),.mode-tab:nth-child(2),.mode-tab:nth-child(3){display:none}.mode-tab:nth-child(4){width:100%;font-size:1rem;padding:.8rem 1.5rem}}@media (max-width: 768px){.lesson-info{max-width:100%}.lesson-info h2{font-size:1.2rem}.lesson-info p{font-size:.9rem}.lesson-list{max-height:65vh;padding:.5rem}.lesson-list::-webkit-scrollbar{width:6px}.lesson-category h3{font-size:1.1rem;margin-bottom:1rem}.lessons-grid{grid-template-columns:1fr;gap:.8rem}.lesson-card{padding:1rem;min-height:100px}.lesson-title{font-size:1rem}.lesson-description{font-size:.85rem}}@media (max-width: 360px){.app{padding:12rem .5rem .5rem}.header{padding:.8rem}.logo-icon{width:26px;height:26px}.header h1{font-size:1rem}.header-actions{gap:.5rem}.theme-toggle{font-size:1rem;padding:.3rem .5rem}.share-btn{font-size:.75rem;padding:.4rem .7rem}.words-container{font-size:1rem;line-height:1.7rem;padding:.8rem}.timer{font-size:1.5rem}.mode-tab{font-size:.8rem;padding:.5rem .8rem}.controls button{font-size:.85rem;padding:.4rem .6rem}.result-value{font-size:2rem}.restart-btn,.next-lesson-btn{font-size:.9rem;padding:.7rem 1.2rem}}@media (hover: none) and (pointer: coarse){.controls button,.mode-tab,.lesson-card,.share-btn,.theme-toggle,.reset-bottom-btn,.shortcuts-btn,.change-lesson-btn,.restart-btn,.next-lesson-btn{min-height:44px;min-width:44px}.lesson-card{padding:1.2rem}}.footer{background:var(--bg-secondary);border-top:1px solid var(--border);margin-top:4rem;padding:3rem 2rem 1rem;font-family:Roboto Mono,monospace}.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h3{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.3rem;margin-bottom:.8rem;font-weight:600}.footer-section h4{color:var(--accent);font-size:1.1rem;margin-bottom:.8rem;font-weight:600}.footer-section p{color:var(--text-secondary);line-height:1.6;font-size:.9rem}.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:.5rem}.footer-links a,.footer-links li{color:var(--text-secondary);text-decoration:none;transition:all .3s ease;font-size:.9rem}.footer-links a:hover{color:var(--accent);transform:translate(5px);display:inline-block}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid var(--border);color:var(--text-secondary);font-size:.85rem}.footer-credits{margin-top:.5rem;font-size:.8rem;color:var(--text-secondary);opacity:.8}.footer-api-link{color:var(--accent);text-decoration:none;transition:all .3s ease;font-weight:500}.footer-api-link:hover{color:var(--text-primary);text-decoration:underline}.back-to-top{position:fixed;bottom:2rem;right:2rem;width:50px;height:50px;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:var(--bg-primary);border:none;border-radius:50%;font-size:1.5rem;font-weight:700;cursor:pointer;box-shadow:0 4px 15px #e2b71466;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.back-to-top:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 6px 20px #e2b71480}.back-to-top:active{transform:translateY(-2px) scale(1.05)}@media (max-width: 768px){.footer{padding:2rem 1rem 1rem}.footer-content{grid-template-columns:1fr;gap:1.5rem}.footer-section{text-align:center}.footer-links a:hover{transform:none}.back-to-top{bottom:1.5rem;right:1.5rem;width:45px;height:45px;font-size:1.3rem}}@media (max-width: 480px){.back-to-top{bottom:1rem;right:1rem;width:40px;height:40px;font-size:1.2rem}}.share-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:99999!important;animation:fadeIn .2s ease-out}.share-modal{background:var(--bg-secondary);border:2px solid var(--accent);border-radius:16px;padding:2.5rem;max-width:500px;width:90%;margin:auto;box-shadow:0 20px 60px #0000004d;animation:scaleIn .3s cubic-bezier(.68,-.55,.265,1.55);position:relative;z-index:100000!important;max-height:90vh;overflow-y:auto;color:var(--text-primary)}.share-modal-close-x{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--text-secondary);font-size:2rem;cursor:pointer;width:35px;height:35px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease;z-index:100001}.share-modal-close-x:hover{background:var(--bg-primary);color:var(--accent);transform:rotate(90deg)}.share-modal h3{color:var(--accent)!important;font-size:1.8rem;margin-bottom:.5rem;font-weight:600;text-align:center;display:block;visibility:visible;position:relative;z-index:1}.share-modal>p{color:var(--text-secondary)!important;font-size:1rem;margin-bottom:2rem;text-align:center;display:block;visibility:visible;position:relative;z-index:1}.share-options{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1rem;margin-bottom:1.5rem;visibility:visible;position:relative;z-index:1}.share-option{background:var(--bg-primary);border:2px solid var(--border);padding:1rem;border-radius:12px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:Roboto Mono,monospace;font-weight:500;color:var(--text-primary);position:relative;z-index:1}.share-option:hover{transform:translateY(-3px);box-shadow:0 4px 12px #0003}.share-option.twitter:hover{border-color:#1da1f2;background:#1da1f21a}.share-option.facebook:hover{border-color:#1877f2;background:#1877f21a}.share-option.linkedin:hover{border-color:#0a66c2;background:#0a66c21a}.share-option.whatsapp:hover{border-color:#25d366;background:#25d3661a}.share-option.telegram:hover{border-color:#08c;background:#0088cc1a}.share-icon{font-size:1.8rem;font-weight:700}.share-option span:last-child{font-size:.85rem}.share-divider{text-align:center;margin:1.5rem 0;position:relative;display:block;visibility:visible;z-index:1}.share-divider:before,.share-divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--border)}.share-divider:before{left:0}.share-divider:after{right:0}.share-divider span{color:var(--text-secondary);background:var(--bg-secondary);padding:0 1rem;font-size:.9rem}.share-copy-btn{width:100%;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%)!important;border:none;color:var(--bg-primary)!important;font-size:1rem;padding:1rem;border-radius:10px;cursor:pointer;font-family:Roboto Mono,monospace;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #e2b7144d;display:flex!important;align-items:center;justify-content:center;gap:.5rem;visibility:visible;position:relative;z-index:1}.share-copy-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71466}.share-copy-btn span{font-size:1.2rem}@media (max-width: 768px){.share-modal{padding:2rem 1.5rem;max-width:400px}.share-modal h3{font-size:1.5rem}.share-options{grid-template-columns:repeat(3,1fr);gap:.8rem}.share-option{padding:.8rem .5rem}.share-icon{font-size:1.5rem}.share-option span:last-child{font-size:.75rem}}@media (max-width: 480px){.share-modal{padding:1.5rem 1rem;max-width:340px}.share-modal h3{font-size:1.3rem}.share-modal>p{font-size:.9rem}.share-options{grid-template-columns:repeat(2,1fr)}.share-copy-btn{font-size:.95rem;padding:.9rem}}.copy-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.copy-modal{background:var(--bg-secondary);border:2px solid var(--accent);border-radius:16px;padding:2.5rem;max-width:400px;width:90%;margin:auto;text-align:center;box-shadow:0 20px 60px #0000004d;animation:scaleIn .3s cubic-bezier(.68,-.55,.265,1.55);position:relative}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.copy-modal-icon{width:70px;height:70px;margin:0 auto 1.5rem;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--bg-primary);font-weight:700;animation:checkPop .5s ease-out .2s both;box-shadow:0 4px 20px #e2b71466}@keyframes checkPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.copy-modal h3{color:var(--accent);font-size:1.8rem;margin-bottom:.8rem;font-weight:600}.copy-modal p{color:var(--text-primary);font-size:1rem;margin-bottom:2rem;line-height:1.6}.copy-modal-close{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border:none;color:var(--bg-primary);font-size:1rem;padding:.8rem 2rem;border-radius:8px;cursor:pointer;font-family:Roboto Mono,monospace;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #e2b7144d}.copy-modal-close:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71466}.copy-modal-close:active{transform:translateY(0)}@media (max-width: 768px){.copy-modal{padding:2rem;max-width:350px}.copy-modal-icon{width:60px;height:60px;font-size:2rem;margin-bottom:1.2rem}.copy-modal h3{font-size:1.5rem}.copy-modal p{font-size:.95rem;margin-bottom:1.5rem}.copy-modal-close{font-size:.95rem;padding:.7rem 1.8rem}}@media (max-width: 480px){.copy-modal{padding:1.5rem;max-width:300px}.copy-modal-icon{width:50px;height:50px;font-size:1.8rem;margin-bottom:1rem}.copy-modal h3{font-size:1.3rem}.copy-modal p{font-size:.9rem}.copy-modal-close{font-size:.9rem;padding:.6rem 1.5rem}}.cookie-consent-overlay{position:fixed;bottom:0;left:0;right:0;z-index:9999;animation:slideUp .5s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.cookie-consent{background:var(--bg-secondary);border-top:3px solid var(--accent);padding:1.5rem 2rem;box-shadow:0 -4px 20px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cookie-content{max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:1rem}.cookie-icon{font-size:3rem;flex-shrink:0;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,-10px,0)}}.cookie-text{flex:1}.cookie-text h3{color:var(--accent);font-size:1.3rem;margin-bottom:.5rem;font-weight:600}.cookie-text p{color:var(--text-primary);font-size:.95rem;line-height:1.6;margin-bottom:.5rem}.cookie-learn-more{font-size:.9rem}.cookie-learn-more a{color:var(--accent);text-decoration:underline;transition:all .3s ease}.cookie-learn-more a:hover{color:var(--text-primary)}.cookie-actions{max-width:1200px;margin:0 auto;display:flex;gap:1rem;justify-content:flex-end}.cookie-btn{padding:.8rem 2rem;border-radius:8px;font-family:Roboto Mono,monospace;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;border:none}.btn-text-full{display:inline}.btn-text-short{display:none}.cookie-accept{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:var(--bg-primary);box-shadow:0 4px 15px #e2b7144d}.cookie-accept:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71466}.cookie-necessary{background:transparent;border:2px solid var(--border);color:var(--text-primary)}.cookie-necessary:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.cookie-decline{background:transparent;border:2px solid var(--border);color:var(--text-secondary)}.cookie-decline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}@media (max-width: 768px){.cookie-consent{padding:1.2rem 1rem}.cookie-content{flex-direction:column;gap:1rem;margin-bottom:1rem}.cookie-icon{font-size:2.5rem;align-self:center}.cookie-text h3{font-size:1.2rem;text-align:center}.cookie-text p{font-size:.9rem;text-align:center}.cookie-actions{flex-direction:row;gap:.8rem;justify-content:center}.cookie-btn{flex:1;max-width:48%;padding:.7rem 1.5rem;font-size:.95rem}}@media (max-width: 480px){.cookie-consent{padding:1rem .8rem}.cookie-icon{font-size:2rem}.cookie-text h3{font-size:1.1rem}.cookie-text p{font-size:.85rem}.cookie-btn{padding:.6rem 1.2rem;font-size:.9rem}}@media (max-width: 400px){.cookie-consent-overlay{overflow-y:auto}.cookie-consent{padding:.6rem .5rem;max-height:85vh;overflow-y:auto;display:flex;flex-direction:column}.cookie-content{gap:.6rem;margin-bottom:.6rem;flex:1;overflow-y:auto}.cookie-icon{font-size:1.5rem}.cookie-text h3{font-size:.95rem;margin-bottom:.3rem}.cookie-text p{font-size:.75rem;line-height:1.3;margin-bottom:.3rem}.cookie-text ul{padding-left:12px;font-size:.65rem;margin-bottom:.25rem;margin-top:.25rem}.cookie-text ul li{margin-bottom:.15rem;line-height:1.15}.cookie-text h4{font-size:.8rem!important;margin-bottom:.25rem!important;font-weight:500!important}.cookie-categories{margin-top:.5rem!important;margin-bottom:.5rem!important}.cookie-learn-more{font-size:.7rem;margin-top:.3rem}.cookie-actions{gap:.5rem;flex-shrink:0;margin-top:.5rem}.cookie-btn{padding:.4rem .6rem;font-size:.7rem;min-width:105px!important;line-height:1.2}.btn-text-full{display:none}.btn-text-short{display:inline}.cookie-ads-info{font-size:.7rem!important;line-height:1.2!important;margin-top:.3rem!important}}.registration-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease-out;padding:1rem}.registration-modal{background:var(--bg-secondary);border:2px solid var(--accent);border-radius:16px;padding:2.5rem;max-width:500px;width:100%;box-shadow:0 20px 60px #0006;animation:scaleIn .4s cubic-bezier(.68,-.55,.265,1.55);position:relative}.registration-close-x{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--text-secondary);font-size:2rem;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease;line-height:1;padding:0}.registration-close-x:hover{background:var(--error);color:#fff;transform:rotate(90deg)}.registration-modal h2{color:var(--accent);font-size:2rem;margin-bottom:.5rem;font-weight:600;text-align:center;padding-right:40px}.registration-subtitle{color:var(--text-secondary);font-size:1rem;text-align:center;margin-bottom:2rem;line-height:1.5}.registration-form{display:flex;flex-direction:column;gap:1.5rem}.registration-error{background:#ca47541a;border:1px solid var(--error);color:var(--error);padding:.8rem;border-radius:8px;font-size:.9rem;text-align:center;animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translateZ(0)}25%{transform:translate3d(-10px,0,0)}75%{transform:translate3d(10px,0,0)}}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{color:var(--text-primary);font-size:.95rem;font-weight:500}.form-group input{background:var(--bg-primary);border:2px solid var(--border);color:var(--text-primary);padding:.8rem 1rem;border-radius:8px;font-family:Roboto Mono,monospace;font-size:1rem;transition:all .3s ease}.form-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #e2b7141a}.form-group input::placeholder{color:var(--text-secondary);opacity:.6}.registration-actions{display:flex;flex-direction:column;gap:1rem;margin-top:.5rem}.register-btn{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border:none;color:var(--bg-primary);font-size:1.1rem;padding:1rem 2rem;border-radius:10px;cursor:pointer;font-family:Roboto Mono,monospace;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #e2b7144d}.register-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71466}.register-btn:active{transform:translateY(0)}.skip-btn{background:transparent;border:2px solid var(--border);color:var(--text-secondary);font-size:1rem;padding:.8rem 1.5rem;border-radius:10px;cursor:pointer;font-family:Roboto Mono,monospace;font-weight:500;transition:all .3s ease}.skip-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.registration-note{color:var(--text-secondary);font-size:.85rem;text-align:center;margin-top:1rem;line-height:1.5}.registration-login-link{margin-top:1.5rem;padding:1rem;background:var(--bg-primary);border-radius:8px;text-align:center}.registration-login-link p{color:var(--text-secondary);font-size:.9rem;margin:0}.login-link-btn{background:transparent;border:none;color:var(--accent);cursor:pointer;text-decoration:underline;font-size:.9rem;font-weight:500;font-family:Roboto Mono,monospace;transition:all .3s ease}.login-link-btn:hover{color:var(--text-primary);transform:translateY(-1px)}@media (max-width: 768px){.registration-modal{padding:2rem 1.5rem;max-width:400px}.registration-close-x{top:.8rem;right:.8rem;font-size:1.8rem;width:36px;height:36px}.registration-modal h2{font-size:1.5rem;padding-right:45px;line-height:1.3}.registration-subtitle{font-size:.9rem;margin-bottom:1.5rem}.form-group input{padding:.7rem .9rem;font-size:.95rem}.register-btn{font-size:1rem;padding:.9rem 1.8rem}.skip-btn{font-size:.95rem;padding:.7rem 1.3rem}}@media (max-width: 480px){.registration-overlay{padding:.5rem}.registration-modal{padding:1.5rem 1rem;max-width:340px}.registration-close-x{top:.6rem;right:.6rem;font-size:1.6rem;width:32px;height:32px}.registration-modal h2{font-size:1.3rem;padding-right:40px;line-height:1.2}.registration-subtitle{font-size:.85rem}.form-group label{font-size:.9rem}.form-group input{padding:.6rem .8rem;font-size:.9rem}.register-btn{font-size:.95rem;padding:.8rem 1.5rem}.skip-btn{font-size:.9rem;padding:.6rem 1.2rem}.registration-note{font-size:.8rem}}@media (max-width: 400px){.registration-overlay{padding:2rem .3rem .3rem;align-items:flex-start}.registration-modal{padding:1.2rem .8rem;max-width:100%;width:calc(100% - .6rem);max-height:90vh;overflow-y:auto}.registration-close-x{top:.5rem;right:.5rem;font-size:1.4rem;width:28px;height:28px}.registration-modal h2{font-size:1.1rem;padding-right:35px;line-height:1.2;margin-bottom:.4rem}.registration-subtitle{font-size:.8rem;margin-bottom:1.2rem;line-height:1.4}.registration-form{gap:0rem}.form-group{gap:.4rem}.form-group label{font-size:.85rem}.form-group input{padding:.55rem .7rem;font-size:.85rem}.registration-actions{gap:.8rem;margin-top:.3rem}.register-btn{font-size:.9rem;padding:.7rem 1.3rem}.skip-btn{font-size:.85rem;padding:.55rem 1rem}.registration-note{font-size:.75rem;margin-top:.8rem}.registration-error{padding:.6rem;font-size:.8rem}.registration-login-link{margin-top:1rem!important;padding:.8rem!important}.registration-login-link p,.login-link-btn{font-size:.8rem!important}}.user-info{display:flex;align-items:center;gap:.5rem;background:var(--bg-secondary);border:2px solid var(--accent);padding:.5rem 1rem;border-radius:8px;font-family:Roboto Mono,monospace;font-weight:500;box-shadow:0 2px 8px #e2b71433}.user-icon{font-size:1.2rem}.user-name{color:var(--accent);font-size:.95rem}.register-header-btn,.games-header-btn,.code-header-btn{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border:none;color:var(--bg-primary);font-size:.95rem;padding:.6rem 1.2rem;cursor:pointer;border-radius:8px;font-family:Roboto Mono,monospace;font-weight:600;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px #e2b7144d;text-decoration:none}.register-header-btn:hover,.games-header-btn:hover,.code-header-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e2b71466}.register-header-btn span,.games-header-btn span,.code-header-btn span{font-size:1.1rem}.results-container{display:flex;flex-direction:column;gap:2rem;width:100%;max-width:1200px;align-items:center}.user-rank-badge{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:var(--bg-primary);padding:.8rem 1.5rem;border-radius:12px;font-size:1.1rem;font-weight:600;margin:1rem auto;max-width:fit-content;animation:bounceIn .6s ease-out;box-shadow:0 4px 15px #e2b71466;text-align:center;grid-column:1 / -1}@keyframes bounceIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.leaderboard-results{width:100%;max-width:800px;margin:2rem auto;background:var(--bg-secondary);border:2px solid var(--border);border-radius:16px;padding:2rem;box-shadow:0 10px 40px #0000001a;animation:fadeIn .6s ease-out .3s both}.leaderboard-results h3{color:var(--accent);font-size:1.8rem;margin-bottom:1.5rem;text-align:center;font-weight:600}.leaderboard-list{display:flex;flex-direction:column;gap:.5rem;max-height:500px;overflow-y:auto;padding-right:.5rem}.leaderboard-list::-webkit-scrollbar{width:8px}.leaderboard-list::-webkit-scrollbar-track{background:var(--bg-primary);border-radius:10px}.leaderboard-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent) 0%,#f4c430 100%);border-radius:10px}.leaderboard-item{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:1rem;padding:.8rem 1rem;background:var(--bg-primary);border:2px solid var(--border);border-radius:10px;transition:all .3s ease}.leaderboard-item:hover{transform:translate(5px);border-color:var(--accent);box-shadow:0 4px 12px #e2b71433}.leaderboard-item.current-user{background:linear-gradient(135deg,#e2b71426,#f4c43026);border-color:var(--accent);box-shadow:0 4px 15px #e2b7144d;animation:highlightPulse 2s ease-in-out infinite}@keyframes highlightPulse{0%,to{box-shadow:0 4px 15px #e2b7144d}50%{box-shadow:0 6px 20px #e2b71480}}.leaderboard-item .rank{font-size:1.2rem;font-weight:700;color:var(--accent);text-align:center}.leaderboard-item:nth-child(1) .rank{font-size:1.5rem;background:linear-gradient(135deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.leaderboard-item:nth-child(2) .rank{font-size:1.4rem;background:linear-gradient(135deg,silver,gray);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.leaderboard-item:nth-child(3) .rank{font-size:1.3rem;background:linear-gradient(135deg,#cd7f32,#8b4513);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.leaderboard-item .player-name{color:var(--text-primary);font-size:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-item.current-user .player-name{color:var(--accent);font-weight:600}.leaderboard-item .player-stats{display:flex;gap:1rem;align-items:center}.stat-wpm{color:var(--accent);font-weight:600;font-size:1rem}.stat-accuracy{color:var(--text-secondary);font-size:.9rem}@media (max-width: 768px){.results-container{gap:1.5rem}.leaderboard-results{padding:1.5rem 1rem}.leaderboard-results h3{font-size:1.5rem;margin-bottom:1rem}.leaderboard-list{max-height:400px}.leaderboard-item{grid-template-columns:40px 1fr auto;gap:.8rem;padding:.7rem .8rem}.leaderboard-item .rank{font-size:1rem}.leaderboard-item:nth-child(1) .rank{font-size:1.3rem}.leaderboard-item:nth-child(2) .rank{font-size:1.2rem}.leaderboard-item:nth-child(3) .rank{font-size:1.1rem}.leaderboard-item .player-name{font-size:.9rem}.leaderboard-item .player-stats{flex-direction:column;gap:.2rem;align-items:flex-end}.stat-wpm{font-size:.9rem}.stat-accuracy{font-size:.8rem}.user-rank-badge{font-size:1rem;padding:.7rem 1.2rem}.user-info{padding:.4rem .8rem}.user-name{font-size:.85rem}.register-header-btn,.games-header-btn,.code-header-btn{font-size:.85rem;padding:.5rem 1rem}}@media (max-width: 480px){.leaderboard-results{padding:1rem .8rem}.leaderboard-results h3{font-size:1.3rem}.leaderboard-list{max-height:350px}.leaderboard-item{grid-template-columns:35px 1fr auto;gap:.5rem;padding:.6rem}.leaderboard-item .rank{font-size:.9rem}.leaderboard-item .player-name,.stat-wpm{font-size:.85rem}.stat-accuracy{font-size:.75rem}.user-info{padding:.4rem .7rem}.user-icon{font-size:1rem}.user-name{font-size:.75rem;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-dropdown-icon{font-size:.6rem}.register-header-btn,.games-header-btn,.code-header-btn{font-size:.75rem;padding:.4rem .7rem}.register-header-btn span,.games-header-btn span,.code-header-btn span{font-size:.9rem}}.difficulty-dropdown option[value=expert]{background:linear-gradient(135deg,#e2b71433,#f4c43033);font-weight:600;color:var(--accent)}.difficulty-dropdown[value=expert]{border-color:var(--accent);background:linear-gradient(135deg,#e2b7141a,#f4c4301a);font-weight:600}.expert-mode-badge{display:inline-block;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:var(--bg-primary);padding:.3rem .8rem;border-radius:6px;font-size:.75rem;font-weight:700;margin-left:.5rem;animation:pulse 2s ease-in-out infinite;box-shadow:0 2px 8px #e2b7144d}.user-menu-container{position:relative}.user-info{cursor:pointer;-webkit-user-select:none;user-select:none}.user-dropdown-icon{font-size:.7rem;margin-left:.3rem;transition:transform .3s ease}.user-dropdown-menu{position:absolute;top:calc(100% + .5rem);right:0;background:var(--bg-secondary);border:2px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #0003;z-index:1000;min-width:150px;animation:dropdownSlide .2s ease-out}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.logout-btn{width:100%;background:transparent;border:none;color:var(--text-primary);padding:.8rem 1rem;cursor:pointer;font-family:Roboto Mono,monospace;font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;border-radius:6px}.logout-btn:hover{background:#ca47541a;color:var(--error)}.logout-btn span{font-size:1.1rem}.logout-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out;padding:1rem}.logout-modal{background:var(--bg-secondary);border:2px solid var(--error);border-radius:16px;padding:2.5rem;max-width:450px;width:100%;text-align:center;box-shadow:0 20px 60px #0006;animation:scaleIn .3s cubic-bezier(.68,-.55,.265,1.55)}.logout-icon{width:70px;height:70px;margin:0 auto 1.5rem;background:#ca47541a;border:3px solid var(--error);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;animation:warningPulse 2s ease-in-out infinite}@keyframes warningPulse{0%,to{transform:scale(1);box-shadow:0 0 #ca475466}50%{transform:scale(1.05);box-shadow:0 0 0 10px #ca475400}}.logout-modal h3{color:var(--error);font-size:1.8rem;margin-bottom:1rem;font-weight:600}.logout-modal p{color:var(--text-primary);font-size:1rem;margin-bottom:2rem;line-height:1.6}.logout-modal p strong{color:var(--error);font-weight:600}.logout-actions{display:flex;gap:1rem;justify-content:center;align-items:center}.logout-cancel-btn,.logout-confirm-btn{padding:.8rem 2rem;border-radius:8px;font-family:Roboto Mono,monospace;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;border:none}.logout-cancel-btn{background:var(--bg-primary);border:2px solid var(--border);color:var(--text-primary)}.logout-cancel-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.logout-confirm-btn{background:var(--error);color:#fff;box-shadow:0 4px 15px #ca47544d}.logout-confirm-btn:hover{background:#b33f4a;transform:translateY(-2px);box-shadow:0 6px 20px #ca475466}.logout-confirm-btn:active,.logout-cancel-btn:active{transform:translateY(0)}@media (max-width: 768px){.logout-modal{padding:2rem 1.5rem;max-width:380px}.logout-icon{width:60px;height:60px;font-size:2rem;margin-bottom:1.2rem}.logout-modal h3{font-size:1.5rem}.logout-modal p{font-size:.95rem;margin-bottom:1.5rem}.logout-actions{flex-direction:column-reverse;gap:.8rem}.logout-cancel-btn,.logout-confirm-btn{width:100%;padding:.7rem 1.5rem;font-size:.95rem}.user-dropdown-menu{min-width:140px}.logout-btn{padding:.7rem .9rem;font-size:.85rem}}@media (max-width: 480px){.logout-modal{padding:1.5rem 1rem;max-width:320px}.logout-icon{width:50px;height:50px;font-size:1.8rem;margin-bottom:1rem}.logout-modal h3{font-size:1.3rem}.logout-modal p{font-size:.9rem}.logout-cancel-btn,.logout-confirm-btn{padding:.6rem 1.2rem;font-size:.9rem}}.story-list{max-width:1200px;width:100%;padding:1rem;animation:fadeIn .6s ease-out}.story-list-title{color:var(--accent);font-size:2rem;margin-bottom:.5rem;text-align:center;font-weight:600}.story-list-subtitle{color:var(--text-secondary);font-size:1rem;text-align:center;margin-bottom:2rem}.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.story-card{background:var(--bg-secondary);border:2px solid var(--border);padding:1.5rem;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);position:relative;overflow:hidden}.story-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),#f4c430);transform:scaleX(0);transition:transform .3s ease}.story-card:hover:before{transform:scaleX(1)}.story-card:hover{border-color:var(--accent);transform:translateY(-5px) scale(1.02);box-shadow:0 8px 24px #e2b71433}.story-card.selected{border-color:var(--accent);background:linear-gradient(135deg,#e2b7141a,#f4c4301a);box-shadow:0 8px 24px #e2b7144d}.story-card.selected:before{transform:scaleX(1)}.story-category{display:inline-block;background:var(--accent);color:var(--bg-primary);padding:.3rem .8rem;border-radius:6px;font-size:.75rem;font-weight:600;margin-bottom:.8rem}.story-title{color:var(--text-primary);font-size:1.2rem;margin-bottom:.8rem;font-weight:600}.story-preview{color:var(--text-secondary);font-size:.9rem;line-height:1.5;margin-bottom:1rem}.story-word-count{color:var(--accent);font-size:.85rem;font-weight:500}.story-info{text-align:center;margin-bottom:2rem;max-width:700px;animation:fadeIn .6s ease-out .3s both;padding:1.5rem;background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border);box-shadow:0 4px 12px #0000001a}.story-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:1rem}.story-badge{display:inline-block;background:var(--accent);color:var(--bg-primary);padding:.3rem .8rem;border-radius:6px;font-size:.8rem;font-weight:600;margin-bottom:.5rem}.story-info h2{color:var(--accent);font-size:1.5rem;font-weight:600}.story-word-count-info{color:var(--text-secondary);font-size:.95rem}.change-story-btn{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary);font-size:.9rem;padding:.6rem 1.2rem;cursor:pointer;border-radius:8px;font-family:Roboto Mono,monospace;transition:all .3s ease;font-weight:500;box-shadow:0 2px 8px #0000001a}.change-story-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #e2b7144d}@media (max-width: 768px){.story-list-title{font-size:1.6rem}.story-list-subtitle{font-size:.9rem}.stories-grid{grid-template-columns:1fr;gap:1rem}.story-card{padding:1.2rem}.story-title{font-size:1.1rem}.story-preview{font-size:.85rem}.story-info{padding:1.2rem}.story-info-header{flex-direction:column;align-items:flex-start}.story-info h2{font-size:1.3rem}.change-story-btn{width:100%}}@media (max-width: 480px){.story-list-title{font-size:1.4rem}.story-card{padding:1rem}.story-title{font-size:1rem}.story-info{padding:1rem}.story-info h2{font-size:1.2rem}}.story-loading,.story-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.loading-spinner{width:50px;height:50px;border:4px solid var(--border);border-top:4px solid var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate3d(0,0,1,0)}to{transform:rotate3d(0,0,1,360deg)}}.story-loading p,.story-error p{color:var(--text-secondary);font-size:1.1rem;margin-top:1rem}.retry-btn{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border:none;color:var(--bg-primary);font-size:1rem;padding:.8rem 2rem;border-radius:8px;cursor:pointer;font-family:Roboto Mono,monospace;font-weight:600;margin-top:1rem;transition:all .3s ease;box-shadow:0 4px 15px #e2b7144d}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71466}.story-footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}.story-source{font-size:.75rem;color:var(--text-secondary);font-style:italic}.story-api-badge{display:inline-block;background:#4caf501a;color:#4caf50;padding:.2rem .6rem;border-radius:4px;font-size:.75rem;font-weight:500;margin-left:.5rem;border:1px solid rgba(76,175,80,.3)}@media (max-width: 768px){.loading-spinner{width:40px;height:40px}.story-loading p,.story-error p{font-size:1rem}.retry-btn{font-size:.9rem;padding:.7rem 1.5rem}}.user-dropdown-menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #0003;min-width:180px;overflow:hidden;z-index:1000}.profile-link{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text-primary);text-decoration:none;cursor:pointer;transition:background .2s;font-size:14px}.profile-link:hover{background:var(--bg-primary)}.logout-btn{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:transparent;border:none;color:var(--error);cursor:pointer;transition:background .2s;font-size:14px;text-align:left}.logout-btn:hover{background:var(--bg-primary)}.register-header-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--primary-color);border:none;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.register-header-btn:hover{background:var(--accent-color);transform:translateY(-1px)}.admin-login-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:transparent;border:1px solid var(--text-secondary);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s}.admin-login-btn:hover{background:var(--bg-secondary);border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-1px)}@media (max-width: 768px){.register-header-btn,.admin-login-btn{padding:6px 12px;font-size:13px}.register-header-btn span,.admin-login-btn span{display:none}}@media (max-width: 480px){.admin-login-btn{display:none}}.lesson-info{text-align:center;margin:20px 0;padding:20px;background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border-color);position:relative;z-index:10}.lesson-info h2{margin:0 0 12px;color:var(--primary-color);font-size:24px}.lesson-info p{margin:0 0 16px;color:var(--text-secondary);font-size:16px;line-height:1.5}.change-lesson-btn{padding:10px 24px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:all .2s;position:relative;z-index:20}.change-lesson-btn:hover{background:var(--accent-color);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.change-lesson-btn:active{transform:translateY(0)}.share-challenge-btn{background:linear-gradient(135deg,#4caf50,#45a049);border:none;color:#fff;font-size:1.1rem;padding:.9rem 2rem;cursor:pointer;border-radius:12px;font-family:Roboto Mono,monospace;font-weight:600;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);margin-top:1rem;box-shadow:0 4px 15px #4caf5066;position:relative;overflow:hidden;display:flex;align-items:center;gap:.5rem;justify-content:center}.share-challenge-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.share-challenge-btn:hover:before{width:300px;height:300px}.share-challenge-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 25px #4caf5080}.share-challenge-btn:active{transform:translateY(-1px) scale(1.02)}.share-challenge-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.challenge-share-box{background:var(--bg-secondary);border:2px solid var(--accent);border-radius:12px;padding:1.5rem;margin-top:1rem;animation:slideIn .4s ease-out;box-shadow:0 4px 20px #e2b71433;max-width:500px;width:100%}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.challenge-share-header{font-size:1.3rem;font-weight:600;color:var(--accent);margin-bottom:.8rem;text-align:center}.challenge-share-text{color:var(--text-secondary);font-size:.95rem;margin-bottom:1rem;text-align:center}.challenge-url-container{display:flex;gap:.5rem;margin-bottom:1rem}.challenge-url-input{flex:1;background:var(--bg-primary);border:2px solid var(--border);color:var(--text-primary);padding:.8rem;border-radius:8px;font-family:Roboto Mono,monospace;font-size:.85rem;transition:all .3s ease}.challenge-url-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #e2b7141a}.copy-url-btn{background:var(--accent);border:none;color:var(--bg-primary);padding:.8rem 1.2rem;cursor:pointer;border-radius:8px;font-family:Roboto Mono,monospace;font-weight:600;font-size:.9rem;transition:all .3s ease;white-space:nowrap;box-shadow:0 2px 8px #e2b7144d}.copy-url-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e2b71466}.copy-url-btn:active{transform:translateY(0)}.native-share-btn{width:100%;background:linear-gradient(135deg,#2196f3,#1976d2);border:none;color:#fff;padding:.9rem;cursor:pointer;border-radius:8px;font-family:Roboto Mono,monospace;font-weight:600;font-size:1rem;transition:all .3s ease;box-shadow:0 2px 8px #2196f34d}.native-share-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f366}.native-share-btn:active{transform:translateY(0)}@media (max-width: 768px){.challenge-share-box{padding:1.2rem;max-width:100%}.challenge-share-header{font-size:1.1rem}.challenge-share-text{font-size:.85rem}.challenge-url-container{flex-direction:column}.challenge-url-input{font-size:.75rem;padding:.7rem}.copy-url-btn{width:100%;padding:.7rem}.share-challenge-btn{font-size:1rem;padding:.8rem 1.5rem}}.custom-text-container{max-width:800px;width:100%;animation:fadeIn .6s ease-out}.custom-text-header{text-align:center;margin-bottom:2rem}.custom-text-header h2{font-size:2rem;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.custom-text-header p{color:var(--text-secondary);font-size:1rem}.custom-text-input-area{margin-bottom:1.5rem}.custom-text-textarea{width:100%;background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-primary);font-size:1.1rem;padding:1.5rem;border-radius:12px;font-family:Roboto Mono,monospace;line-height:1.6;resize:vertical;transition:all .3s ease}.custom-text-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #e2b7141a}.custom-text-info{margin-top:.5rem;text-align:right;font-size:.9rem}.text-error{color:var(--error)}.text-success{color:#4caf50}.custom-text-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}.custom-text-btn{padding:.8rem 2rem;border:none;border-radius:10px;font-family:Roboto Mono,monospace;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000001a}.custom-text-btn.primary{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:var(--bg-primary)}.custom-text-btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #e2b71466}.custom-text-btn.secondary{background:var(--bg-secondary);border:2px solid var(--accent);color:var(--accent)}.custom-text-btn.secondary:hover:not(:disabled){background:var(--accent);color:var(--bg-primary)}.custom-text-btn.cancel{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary)}.custom-text-btn.cancel:hover{border-color:var(--error);color:var(--error)}.custom-text-btn:disabled{opacity:.5;cursor:not-allowed}.save-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-secondary);border:2px solid var(--accent);border-radius:12px;padding:2rem;box-shadow:0 8px 32px #0000004d;z-index:1000;min-width:400px;animation:slideIn .3s ease-out}.save-dialog h3{color:var(--accent);margin-bottom:1rem}.save-dialog-input{width:100%;background:var(--bg-primary);border:2px solid var(--border);color:var(--text-primary);font-size:1rem;padding:.8rem;border-radius:8px;font-family:Roboto Mono,monospace;margin-bottom:1rem}.save-dialog-input:focus{outline:none;border-color:var(--accent)}.save-dialog-actions{display:flex;gap:1rem;justify-content:flex-end}.save-dialog-btn{padding:.6rem 1.5rem;border:none;border-radius:8px;font-family:Roboto Mono,monospace;font-weight:600;cursor:pointer;transition:all .3s ease}.save-dialog-btn.save{background:var(--accent);color:var(--bg-primary)}.save-dialog-btn.save:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e2b71466}.save-dialog-btn.cancel{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary)}.save-dialog-btn.cancel:hover{border-color:var(--error);color:var(--error)}.saved-texts-section{background:var(--bg-secondary);border:2px solid var(--border);border-radius:12px;padding:1.5rem;margin-top:2rem}.saved-texts-section h3{color:var(--accent);margin-bottom:1rem}.saved-texts-list{display:flex;flex-direction:column;gap:1rem}.saved-text-item{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:1rem;display:flex;justify-content:space-between;align-items:center;transition:all .3s ease}.saved-text-item:hover{border-color:var(--accent);transform:translateY(-2px)}.saved-text-info{flex:1}.saved-text-name{font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.saved-text-preview{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem}.saved-text-meta{color:var(--text-secondary);font-size:.8rem}.saved-text-actions{display:flex;gap:.5rem}.saved-text-btn{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .3s ease;font-family:Roboto Mono,monospace}.saved-text-btn.load{background:var(--accent);color:var(--bg-primary)}.saved-text-btn.load:hover{transform:translateY(-2px);box-shadow:0 2px 8px #e2b71466}.saved-text-btn.delete{background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-secondary)}.saved-text-btn.delete:hover{border-color:var(--error);color:var(--error)}@media (max-width: 768px){.save-dialog{min-width:90%;padding:1.5rem}.custom-text-actions{flex-direction:column}.custom-text-btn{width:100%}.saved-text-item{flex-direction:column;align-items:flex-start;gap:1rem}.saved-text-actions{width:100%;justify-content:flex-end}}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease-out}.settings-modal{background:var(--bg-secondary);border:2px solid var(--accent);border-radius:16px;padding:2rem;max-width:700px;width:90%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 10px 40px #00000080;animation:slideIn .3s ease-out}.settings-close-x{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--text-secondary);font-size:2rem;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.settings-close-x:hover{background:var(--error);color:#fff;transform:rotate(90deg)}.settings-modal h2{color:var(--accent);margin-bottom:2rem;font-size:2rem}.settings-section{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}.settings-section:last-of-type{border-bottom:none}.settings-section h3{color:var(--text-primary);margin-bottom:1.5rem;font-size:1.3rem}.settings-hint{color:var(--text-secondary);font-size:.9rem;margin-top:.5rem}.settings-toggle{display:flex;align-items:center;gap:1rem;cursor:pointer;-webkit-user-select:none;user-select:none}.settings-toggle input[type=checkbox]{display:none}.toggle-slider{position:relative;width:60px;height:30px;background:var(--bg-primary);border:2px solid var(--border);border-radius:30px;transition:all .3s ease}.toggle-slider:before{content:"";position:absolute;width:22px;height:22px;background:var(--text-secondary);border-radius:50%;top:2px;left:2px;transition:all .3s ease}.settings-toggle input:checked+.toggle-slider{background:var(--accent);border-color:var(--accent)}.settings-toggle input:checked+.toggle-slider:before{transform:translate(30px);background:#fff}.toggle-label{color:var(--text-primary);font-size:1rem;font-weight:500}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.theme-option{background:var(--bg-primary);border:2px solid var(--border);border-radius:12px;padding:1.2rem .8rem;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:Roboto Mono,monospace}.theme-option:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 4px 12px #e2b7144d}.theme-option.active{border-color:var(--accent);background:linear-gradient(135deg,#e2b71433,#f4c43033);box-shadow:0 0 20px #e2b71466}.theme-icon{font-size:2.5rem;margin-bottom:.3rem}.theme-name{font-size:.85rem;font-weight:600;color:var(--text-primary);text-align:center}.settings-close-btn{width:100%;padding:1rem;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:var(--bg-primary);border:none;border-radius:10px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .3s ease;font-family:Roboto Mono,monospace;margin-top:1rem;box-shadow:0 4px 12px #e2b7144d}.settings-close-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71480}.settings-close-btn:active{transform:translateY(0)}@media (max-width: 768px){.settings-modal{padding:1.5rem;width:95%}.settings-modal h2{font-size:1.6rem;margin-bottom:1.5rem}.settings-section h3{font-size:1.1rem}.theme-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.8rem}.theme-option{padding:1rem .6rem}.theme-icon{font-size:2rem}.theme-name{font-size:.75rem}}@media (max-width: 480px){.settings-modal{padding:1.2rem}.theme-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.custom-text-container{padding:0 1rem}.custom-text-header h2{font-size:1.6rem}.custom-text-header p{font-size:.9rem}.custom-text-textarea{font-size:1rem;padding:1rem;min-height:200px}.custom-text-actions{flex-direction:column;gap:.8rem}.custom-text-btn{width:100%;padding:.7rem 1.5rem;font-size:.95rem}.saved-texts-section{padding:1.2rem}.saved-texts-section h3{font-size:1.1rem}.saved-text-item{flex-direction:column;align-items:flex-start;gap:1rem;padding:.8rem}.saved-text-name{font-size:.95rem}.saved-text-preview{font-size:.85rem}.saved-text-meta{font-size:.75rem}.saved-text-actions{width:100%;justify-content:flex-end}.saved-text-btn{padding:.4rem .8rem;font-size:.85rem}}@media (max-width: 768px){.settings-btn{font-size:1.1rem;padding:.4rem .7rem}}@media (max-width: 600px){.mode-tabs{flex-wrap:wrap;justify-content:center}.mode-tab{font-size:.9rem;padding:.7rem 1.5rem;min-width:140px}.mode-tab:nth-child(1),.mode-tab:nth-child(2),.mode-tab:nth-child(3){display:none}.mode-tab:nth-child(4){width:100%;max-width:400px;font-size:1rem;padding:.8rem 1.5rem}}@media (max-width: 480px){.custom-text-header h2{font-size:1.4rem}.custom-text-header p{font-size:.85rem}.custom-text-textarea{font-size:.9rem;padding:.8rem;min-height:180px}.custom-text-btn{padding:.6rem 1.2rem;font-size:.9rem}.save-dialog{padding:1.5rem;min-width:95%}.save-dialog h3{font-size:1.2rem}.save-dialog-input{font-size:.9rem;padding:.7rem}.saved-texts-section{padding:1rem}.saved-texts-section h3{font-size:1rem}.saved-text-item{padding:.7rem}.saved-text-name{font-size:.9rem}.saved-text-preview{font-size:.8rem}.saved-text-btn{padding:.35rem .7rem;font-size:.8rem}.settings-btn{font-size:1rem;padding:.4rem .6rem}.mode-tab{font-size:.8rem;padding:.5rem 1rem;min-width:100px}.settings-modal{padding:1.2rem;width:95%}.settings-modal h2{font-size:1.5rem}.settings-section h3{font-size:1rem}.theme-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}.theme-option{padding:.8rem .5rem}.theme-icon{font-size:1.8rem}.theme-name{font-size:.7rem}.toggle-label{font-size:.9rem}.settings-hint{font-size:.8rem}}@media (max-width: 1024px){.custom-text-container,.saved-texts-section{max-width:700px}.settings-modal{max-width:600px}.theme-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 360px){.custom-text-header h2{font-size:1.2rem}.custom-text-textarea{font-size:.85rem;padding:.7rem;min-height:150px}.custom-text-btn{padding:.5rem 1rem;font-size:.85rem}.mode-tab{font-size:.75rem;padding:.4rem .8rem;min-width:90px}.settings-modal h2{font-size:1.3rem}.theme-grid{grid-template-columns:1fr 1fr;gap:.5rem}.theme-option{padding:.7rem .4rem}.theme-icon{font-size:1.5rem}.theme-name{font-size:.65rem}.saved-text-item{padding:.6rem}.saved-text-btn{padding:.3rem .6rem;font-size:.75rem}}@media (max-height: 600px) and (orientation: landscape){.custom-text-textarea{min-height:120px}.settings-modal{max-height:90vh;overflow-y:auto}.save-dialog{max-height:80vh;overflow-y:auto}.saved-texts-section{max-height:300px;overflow-y:auto}}@media (hover: none) and (pointer: coarse){.custom-text-btn,.saved-text-btn,.theme-option,.settings-btn{min-height:44px;min-width:44px}.mode-tab{min-height:44px}.custom-text-textarea,.save-dialog-input{font-size:16px}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.theme-icon{image-rendering:-webkit-optimize-contrast}}@media print{.custom-text-container,.settings-modal,.save-dialog{display:none}}.new-certificates-badge{background:linear-gradient(135deg,#e2b714,#f4c430);color:#333;padding:15px 25px;border-radius:12px;text-align:center;font-weight:600;font-size:16px;margin-top:20px;cursor:pointer;box-shadow:0 4px 15px #e2b71466;transition:all .3s;animation:bounce 2s infinite}.new-certificates-badge:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71499}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.main-title{text-align:center;font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:2rem auto 1.5rem;padding:0 1rem;max-width:900px;letter-spacing:-.5px;line-height:1.3;contain:layout style paint;will-change:auto}@media (max-width: 768px){.main-title{font-size:1.5rem;margin:1.5rem auto 1rem}}@media (max-width: 480px){.main-title{font-size:1.3rem;margin:1rem auto .8rem}}@media (max-width: 768px){*{-webkit-tap-highlight-color:transparent}body{min-height:-webkit-fill-available}.words-container:before{animation:none;display:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app{-webkit-overflow-scrolling:touch}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.logo-icon,.words-container,.word.current,.char.cursor,.result-item,.achievement-notification,.loading-spinner,[class*=animation],[class*=animate]{will-change:transform,opacity;transform:translateZ(0);backface-visibility:hidden}.animation-complete{will-change:auto}.page-container{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);padding:6rem 2rem 2rem}.page-content{max-width:900px;margin:0 auto;animation:fadeIn .6s ease-out}.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);text-decoration:none;font-family:Roboto Mono,monospace;font-weight:500;margin-bottom:2rem;margin-top:1rem;transition:all .3s ease}.back-link:hover{transform:translate(-5px);color:var(--text-primary)}.page-content h1{font-size:2.5rem;color:var(--accent);margin-bottom:1rem;font-weight:600}.last-updated{color:var(--text-secondary);font-size:.9rem;margin-bottom:2rem;font-style:italic}.page-section{margin-bottom:3rem;padding:2rem;background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border);box-shadow:0 4px 12px #0000001a}.page-section h2{font-size:1.8rem;color:var(--accent);margin-bottom:1rem;font-weight:600}.page-section h3{font-size:1.3rem;color:var(--text-primary);margin-top:1.5rem;margin-bottom:.8rem;font-weight:500}.page-section p{line-height:1.8;margin-bottom:1rem;color:var(--text-primary)}.page-section ul{margin-left:2rem;margin-bottom:1rem}.page-section li{line-height:1.8;margin-bottom:.5rem;color:var(--text-primary)}.inline-link{color:var(--accent);text-decoration:underline;transition:all .3s ease}.inline-link:hover{color:var(--text-primary)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem}.feature-item{padding:1.5rem;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border);transition:all .3s ease}.feature-item:hover{transform:translateY(-5px);box-shadow:0 6px 20px #e2b71433;border-color:var(--accent)}.feature-item h3{margin-top:0;font-size:1.2rem}.contact-form{max-width:600px;margin:2rem auto}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-primary);font-weight:500}.form-group input,.form-group textarea{width:100%;padding:.8rem;background:var(--bg-primary);border:2px solid var(--border);border-radius:8px;color:var(--text-primary);font-family:Roboto Mono,monospace;font-size:1rem;transition:all .3s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #e2b7141a}.form-group textarea{resize:vertical;min-height:120px}.submit-btn{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border:none;color:var(--bg-primary);font-size:1.1rem;padding:1rem 2.5rem;cursor:pointer;border-radius:8px;font-family:Roboto Mono,monospace;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #e2b71466;width:100%}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #e2b71480}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.success-message{text-align:center;padding:2rem;background:linear-gradient(135deg,#4caf501a,#45a0491a);border-radius:8px;border:2px solid #4CAF50;margin-bottom:1rem}.success-message h3{color:#4caf50;margin-top:0}.error-message{text-align:center;padding:2rem;background:linear-gradient(135deg,#d32f2f1a,#c628281a);border-radius:8px;border:2px solid #d32f2f;margin-bottom:1rem}.error-message h3{color:#d32f2f;margin-top:0}.error-message p{color:var(--text-primary)}.contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:1.5rem}.contact-item{padding:1.5rem;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border);text-align:center}.contact-item h3{margin-top:0;font-size:1.2rem}.contact-item .email-link{color:var(--accent);text-decoration:none;font-weight:500;transition:all .3s ease}.contact-item .email-link:hover{text-decoration:underline;color:var(--text-primary)}.faq-list{margin-top:1.5rem}.faq-item{padding:1.5rem;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border);margin-bottom:1rem}.faq-item h3{margin-top:0;color:var(--accent);font-size:1.1rem}.faq-item p{margin-bottom:0}@media (max-width: 768px){.page-container{padding:1rem;padding-top:2rem!important}.page-content h1{font-size:2rem}.page-section{padding:1.5rem}.page-section h2{font-size:1.5rem}.page-section h3{font-size:1.2rem}.feature-grid,.contact-info{grid-template-columns:1fr}}@media (max-width: 480px){.page-container{padding:3rem .8rem .8rem}.page-content h1{font-size:1.8rem}.page-section{padding:1rem}.page-section h2{font-size:1.3rem}}.blog-intro{font-size:1.1rem;color:var(--text-secondary);margin-bottom:3rem;text-align:center;max-width:700px;margin-left:auto;margin-right:auto}.blog-grid{display:flex;flex-direction:column;gap:3rem;margin-bottom:3rem}.blog-card{background:var(--bg-secondary);border-radius:12px;padding:2.5rem;border:1px solid var(--border);box-shadow:0 4px 12px #0000001a;transition:all .3s ease}.blog-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px #e2b71433;border-color:var(--accent)}.blog-card-header h2{color:var(--accent);font-size:1.8rem;margin-bottom:1rem;font-weight:600}.blog-meta{display:flex;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.blog-date,.blog-read-time{color:var(--text-secondary);font-size:.9rem;display:flex;align-items:center;gap:.3rem}.blog-excerpt{font-size:1.1rem;color:var(--text-primary);line-height:1.8;margin-bottom:2rem;font-weight:500;padding:1rem;background:var(--bg-primary);border-left:4px solid var(--accent);border-radius:4px}.blog-content{color:var(--text-primary);line-height:1.8}.blog-content h2{color:var(--accent);font-size:1.6rem;margin-top:2rem;margin-bottom:1rem;font-weight:600}.blog-content h3{color:var(--text-primary);font-size:1.3rem;margin-top:1.5rem;margin-bottom:.8rem;font-weight:500}.blog-content p{margin-bottom:1rem}.blog-content ul,.blog-content ol{margin-left:2rem;margin-bottom:1rem}.blog-content li{margin-bottom:.5rem;line-height:1.8}.blog-content strong{color:var(--accent);font-weight:600}.cta-section{text-align:center;background:linear-gradient(135deg,#e2b7141a,#f4c4301a);border:2px solid var(--accent)}.cta-section h2{color:var(--accent);margin-bottom:1rem}.cta-button{display:inline-block;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:var(--bg-primary);padding:1rem 2.5rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:1.1rem;transition:all .3s ease;box-shadow:0 4px 15px #e2b71466;margin-top:1rem}.cta-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e2b71480}@media (max-width: 768px){.blog-card{padding:1.5rem}.blog-card-header h2{font-size:1.5rem}.blog-content h2{font-size:1.4rem}.blog-content h3{font-size:1.2rem}.blog-meta{gap:1rem}.back-link{margin-top:3rem}}.games-intro{text-align:center;color:var(--text-secondary);margin-bottom:3rem;font-size:1.1rem}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-bottom:4rem}.game-card{background:var(--bg-secondary);border-radius:16px;padding:2rem;border:2px solid var(--border);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000001a;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(226,183,20,.1),transparent);transition:left .5s}.game-card:hover:before{left:100%}.game-card:hover{transform:translateY(-8px) scale(1.02);border-color:var(--accent);box-shadow:0 12px 32px #e2b7144d}.game-card-icon{font-size:4rem;text-align:center;margin-bottom:1rem;animation:float 3s ease-in-out infinite}.game-card h3{color:var(--accent);font-size:1.5rem;margin-bottom:.5rem;text-align:center}.game-card-description{color:var(--text-secondary);text-align:center;margin-bottom:1.5rem;line-height:1.6}.game-card-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem}.game-difficulty{padding:.4rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600}.game-difficulty.easy{background:#4caf5033;color:#4caf50}.game-difficulty.medium{background:#ff980033;color:#ff9800}.game-difficulty.hard{background:#f4433633;color:#f44336}.game-play-btn{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border:none;color:var(--bg-primary);padding:.6rem 1.2rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem}.game-play-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #e2b71466}.games-coming-soon{margin-top:4rem;margin-bottom:3rem;text-align:center}.games-coming-soon h2{color:var(--accent);font-size:2rem;margin-bottom:.5rem}.coming-soon-subtitle{color:var(--text-secondary);font-size:1.1rem;margin-bottom:2rem}.coming-soon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.coming-soon-card{background:var(--bg-secondary);border-radius:12px;padding:2rem;border:2px dashed var(--border);transition:all .3s ease;position:relative;opacity:.8}.coming-soon-card:hover{opacity:1;transform:translateY(-5px);border-color:var(--accent);box-shadow:0 8px 24px #e2b71433}.coming-soon-icon{font-size:4rem;margin-bottom:1rem;filter:grayscale(30%);animation:comingSoonFloat 3s ease-in-out infinite}@keyframes comingSoonFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.coming-soon-card h4{color:var(--text-primary);font-size:1.3rem;margin-bottom:.8rem;font-weight:600}.coming-soon-card p{color:var(--text-secondary);font-size:.95rem;line-height:1.6;margin-bottom:1rem}.coming-soon-badge{display:inline-block;background:linear-gradient(135deg,#e2b71433,#f4c43033);color:var(--accent);padding:.4rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;border:1px solid var(--accent)}.games-cta{text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,#e2b7141a,#f4c4301a);border-radius:16px;border:2px solid var(--accent);margin-top:3rem}.games-cta h2{color:var(--accent);margin-bottom:1rem;font-size:1.8rem}.games-cta p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:1.5rem;max-width:600px;margin-left:auto;margin-right:auto}@media (max-width: 768px){.games-grid,.coming-soon-grid{grid-template-columns:1fr}.games-coming-soon h2{font-size:1.6rem}.coming-soon-card{padding:1.5rem}.coming-soon-icon{font-size:3rem}}.streak-calendar{background:var(--bg-secondary);border-radius:12px;padding:24px;margin:24px 0}.streak-header{margin-bottom:24px}.streak-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:16px}.streak-stat{display:flex;align-items:center;gap:12px;background:var(--bg-primary);padding:16px;border-radius:8px;border:1px solid var(--border-color)}.streak-icon{font-size:32px}.streak-info{flex:1}.streak-number{font-size:24px;font-weight:700;color:var(--primary-color)}.streak-label{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.streak-warning{background:#ff6b6b;color:#fff;padding:12px 16px;border-radius:8px;text-align:center;font-weight:500;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.calendar-grid{margin:24px 0}.calendar-months{display:flex;gap:4px;margin-bottom:8px;font-size:11px;color:var(--text-secondary);font-weight:500}.month-label{flex:1;text-align:left}.calendar-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(12px,1fr));gap:4px;max-width:100%}.calendar-day{aspect-ratio:1;border-radius:3px;background:var(--bg-primary);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:relative}.calendar-day:hover{transform:scale(1.2);z-index:10}.calendar-day.visited{background:var(--primary-color);border-color:var(--primary-color)}.calendar-day.today{border:2px solid var(--accent-color);box-shadow:0 0 8px var(--accent-color)}.day-dot{width:6px;height:6px;border-radius:50%;background:transparent}.calendar-day.visited .day-dot{background:#fff}.streak-milestones{margin-top:24px}.streak-milestones h4{margin-bottom:16px;color:var(--text-primary)}.milestones-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px}.milestone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;transition:all .2s}.milestone.achieved{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.milestone.current{box-shadow:0 0 12px var(--accent-color);border-color:var(--accent-color)}.milestone-icon{font-size:24px}.milestone-label{font-size:12px;font-weight:500;text-align:center}@media (max-width: 768px){.streak-stats{grid-template-columns:1fr}.calendar-days{grid-template-columns:repeat(auto-fill,minmax(10px,1fr));gap:3px}.milestones-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}}.user-profile{max-width:1200px;margin:0 auto}.profile-header{display:flex;align-items:center;gap:20px;margin-bottom:32px;padding:24px;background:var(--bg-secondary);border-radius:12px}.profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--primary-color);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#fff}.profile-info h2{margin:0 0 8px;color:var(--text-primary)}.profile-email{color:var(--text-secondary);margin:0}.stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:32px}.stat-card{background:var(--bg-secondary);padding:20px;border-radius:12px;text-align:center;border:1px solid var(--border-color);transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.stat-icon{font-size:32px;margin-bottom:8px}.stat-value{font-size:28px;font-weight:700;color:var(--primary-color);margin-bottom:4px}.stat-label{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.progress-section{background:var(--bg-secondary);border-radius:12px;padding:24px;margin-bottom:24px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h3{margin:0;color:var(--text-primary)}.time-range-selector{display:flex;gap:8px}.time-range-selector button{padding:8px 16px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s}.time-range-selector button:hover{background:var(--bg-secondary)}.time-range-selector button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.progress-metrics{display:flex;gap:24px;margin-bottom:24px}.metric{flex:1;display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color)}.metric-label{font-size:14px;color:var(--text-secondary)}.metric-value{font-size:24px;font-weight:700}.metric-value.positive{color:#51cf66}.metric-value.negative{color:#ff6b6b}.chart-container{margin-top:24px}.chart{display:flex;align-items:flex-end;gap:4px;height:200px;padding:16px;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color)}.chart-bar-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;position:relative}.chart-bar{width:100%;background:var(--primary-color);border-radius:4px 4px 0 0;transition:all .3s;cursor:pointer;position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:4px;min-height:2px}.chart-bar:hover{background:var(--accent-color);transform:scaleY(1.05)}.bar-value{font-size:10px;color:#fff;font-weight:700}.chart-label{font-size:10px;color:var(--text-secondary);margin-top:8px;transform:rotate(-45deg);white-space:nowrap}.recent-tests-section{background:var(--bg-secondary);border-radius:12px;padding:24px;margin-top:24px}.recent-tests-section h3{margin:0 0 16px;color:var(--text-primary)}.recent-tests-list{display:flex;flex-direction:column;gap:12px}.test-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-primary);border-radius:8px;border:1px solid var(--border-color);transition:all .2s}.test-item:hover{border-color:var(--primary-color);transform:translate(4px)}.test-info{display:flex;gap:12px;align-items:center}.test-mode{padding:4px 12px;background:var(--primary-color);color:#fff;border-radius:4px;font-size:12px;font-weight:500;text-transform:capitalize}.test-date{font-size:14px;color:var(--text-secondary)}.test-stats{display:flex;gap:16px;align-items:center}.test-wpm{font-size:18px;font-weight:700;color:var(--primary-color)}.test-accuracy{font-size:14px;color:var(--text-secondary)}.no-tests{text-align:center;padding:40px;color:var(--text-secondary)}.profile-page{padding:24px;padding-top:6rem;max-width:1200px;margin:0 auto;width:100%}.profile-tabs{display:flex;gap:12px;margin-bottom:24px;border-bottom:2px solid var(--border-color)}.tab-button{padding:12px 24px;background:transparent;border:none;color:var(--text-secondary);font-size:16px;font-weight:500;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;margin-bottom:-2px}.tab-button:hover{color:var(--text-primary)}.tab-button.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.profile-content{width:100%}.not-registered{text-align:center;padding:60px 20px;background:var(--bg-secondary);border-radius:12px;margin:40px auto;max-width:600px}.not-registered h2{margin-bottom:16px;color:var(--text-primary)}.not-registered p{color:var(--text-secondary);margin-bottom:12px}@media (max-width: 768px){.stats-overview{grid-template-columns:repeat(2,1fr)}.section-header{flex-direction:column;align-items:flex-start;gap:12px}.progress-metrics{flex-direction:column}.chart{height:150px}.test-item{flex-direction:column;align-items:flex-start;gap:12px}.profile-tabs{flex-direction:column;margin-top:2rem}.tab-button{text-align:left}.profile-page{padding:5rem 1rem 1rem;max-width:100%}}.certificates-section{animation:fadeIn .5s ease-out}.certificates-section .certificates-stats{margin-bottom:40px}.certificates-section .earned-certificates-section h2,.certificates-section .available-certificates-section h2{margin-top:0}.certificates-section .certificates-info{margin-top:40px}@media (max-width: 768px){.certificates-section .certificates-stats{margin-bottom:30px}.certificates-section .certificates-info{margin-top:30px}}.weekly-leaderboard{max-width:800px;margin:0 auto}.leaderboard-header{text-align:center;margin-bottom:32px}.leaderboard-header h2{margin:0 0 12px;color:var(--text-primary);font-size:32px}.leaderboard-description{color:var(--text-secondary);margin:0}.week-selector{margin-bottom:24px;text-align:center}.week-dropdown{padding:12px 20px;font-size:16px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;min-width:200px;transition:all .2s}.week-dropdown:hover{border-color:var(--primary-color)}.week-dropdown:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(var(--primary-color-rgb),.1)}.user-rank-card{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:#fff;padding:20px;border-radius:12px;margin-bottom:24px;text-align:center}.rank-info{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:12px}.rank-label{font-size:16px;font-weight:500}.rank-value{font-size:32px;font-weight:700}.rank-message{font-size:14px;opacity:.9}.leaderboard-loading{text-align:center;padding:60px 20px}.loading-spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}.no-scores{text-align:center;padding:60px 20px;background:var(--bg-secondary);border-radius:12px;color:var(--text-secondary)}.leaderboard-table{background:var(--bg-secondary);border-radius:12px;overflow:hidden;border:1px solid var(--border-color)}.table-header{display:grid;grid-template-columns:80px 1fr 100px 100px;gap:16px;padding:16px 20px;background:var(--bg-primary);border-bottom:2px solid var(--border-color);font-weight:600;font-size:14px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.table-body{max-height:600px;overflow-y:auto}.table-row{display:grid;grid-template-columns:80px 1fr 100px 100px;gap:16px;padding:16px 20px;border-bottom:1px solid var(--border-color);transition:all .2s;align-items:center}.table-row:hover{background:var(--bg-primary)}.table-row.top-three{background:linear-gradient(90deg,rgba(255,215,0,.1) 0%,transparent 100%)}.table-row.current-user{background:linear-gradient(90deg,rgba(var(--primary-color-rgb),.15) 0%,transparent 100%);border-left:4px solid var(--primary-color);font-weight:600}.col-rank{font-size:18px;font-weight:700;color:var(--text-primary);text-align:center}.col-name{color:var(--text-primary);display:flex;align-items:center;gap:8px}.you-badge{padding:2px 8px;background:var(--primary-color);color:#fff;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase}.col-wpm{font-size:18px;font-weight:700;color:var(--primary-color);text-align:center}.col-accuracy{color:var(--text-secondary);text-align:center}.leaderboard-footer{margin-top:24px;text-align:center;padding:16px;background:var(--bg-secondary);border-radius:8px;color:var(--text-secondary);font-size:14px}@media (max-width: 768px){.table-header,.table-row{grid-template-columns:60px 1fr 80px 80px;gap:8px;padding:12px 16px;font-size:14px}.col-rank,.col-wpm{font-size:16px}.you-badge{display:none}.week-dropdown{width:100%}}.certificates-page{max-width:1200px;margin:0 auto;padding:40px 20px;animation:fadeIn .5s ease-out}.certificates-header{text-align:center;margin-bottom:40px}.certificates-header h1{font-size:42px;margin-bottom:10px;color:var(--text-primary)}.certificates-header p{font-size:18px;color:var(--text-secondary)}.certificates-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:50px}.stat-card{background:var(--bg-secondary);border:2px solid var(--border);border-radius:12px;padding:30px;text-align:center;transition:all .3s}.stat-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 10px 30px #0000001a}.stat-value{font-size:48px;font-weight:800;color:var(--accent);margin-bottom:10px}.stat-label{font-size:16px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.no-certificates{margin:60px 0}.empty-state{text-align:center;padding:60px 20px;background:var(--bg-secondary);border:2px dashed var(--border);border-radius:16px}.empty-icon{font-size:80px;margin-bottom:20px}.empty-state h2{font-size:32px;color:var(--text-primary);margin-bottom:10px}.empty-state p{font-size:18px;color:var(--text-secondary);margin-bottom:10px}.empty-state .hint{font-size:16px;color:var(--text-tertiary);font-style:italic}.earned-certificates-section{margin-bottom:60px}.earned-certificates-section h2{font-size:32px;color:var(--text-primary);margin-bottom:30px;display:flex;align-items:center;gap:10px}.certificates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px}.certificate-card{background:var(--bg-secondary);border:2px solid var(--border);border-radius:16px;padding:30px;text-align:center;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}.certificate-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#e2b714,#f4c430);transform:scaleX(0);transition:transform .3s}.certificate-card:hover:before{transform:scaleX(1)}.certificate-card.earned{border-color:#e2b714}.certificate-card:hover{transform:translateY(-8px);box-shadow:0 15px 40px #00000026}.cert-badge{position:absolute;top:15px;right:15px;width:40px;height:40px;background:linear-gradient(135deg,#e2b714,#f4c430);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;box-shadow:0 4px 10px #e2b7144d}.cert-icon{font-size:60px;margin-bottom:15px}.certificate-card h3{font-size:22px;color:var(--text-primary);margin-bottom:15px}.cert-stats{display:flex;justify-content:center;gap:20px;margin-bottom:15px;font-size:14px;color:var(--text-secondary)}.cert-stats span{background:var(--bg-primary);padding:5px 12px;border-radius:20px;font-weight:600}.cert-date{font-size:14px;color:var(--text-tertiary);margin-bottom:20px}.view-cert-btn{background:linear-gradient(135deg,#e2b714,#f4c430);color:#333;border:none;padding:10px 25px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s;width:100%}.view-cert-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px #e2b71466}.available-certificates-section{margin-bottom:60px}.available-certificates-section h2{font-size:32px;color:var(--text-primary);margin-bottom:30px}.milestones-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px}.milestone-card{background:var(--bg-secondary);border:2px solid var(--border);border-radius:16px;padding:30px;text-align:center;transition:all .3s;position:relative}.milestone-card.earned{border-color:#e2b714;cursor:pointer}.milestone-card.earned:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000001a}.milestone-card.locked{opacity:.6}.milestone-badge{position:absolute;top:15px;right:15px;width:35px;height:35px;background:linear-gradient(135deg,#e2b714,#f4c430);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px}.milestone-icon{font-size:50px;margin-bottom:15px}.milestone-card h3{font-size:20px;color:var(--text-primary);margin-bottom:10px}.milestone-desc{font-size:14px;color:var(--text-secondary);margin-bottom:20px;min-height:40px}.milestone-requirements{display:flex;justify-content:center;gap:15px;margin-bottom:15px}.requirement{background:var(--bg-primary);padding:8px 15px;border-radius:8px;font-size:13px}.req-label{color:var(--text-secondary);margin-right:5px}.req-value{color:var(--accent);font-weight:700}.view-milestone-btn{background:linear-gradient(135deg,#e2b714,#f4c430);color:#333;border:none;padding:8px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s;font-size:14px}.view-milestone-btn:hover{transform:scale(1.05)}.certificates-info{background:var(--bg-secondary);border:2px solid var(--border);border-radius:16px;padding:40px;margin-top:60px}.certificates-info h3{font-size:24px;color:var(--text-primary);margin-bottom:20px}.certificates-info ul{list-style:none;padding:0}.certificates-info li{font-size:16px;color:var(--text-secondary);margin-bottom:15px;padding-left:30px;position:relative}.certificates-info li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800;font-size:18px}.certificates-info strong{color:var(--text-primary);font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.certificates-page{padding:20px 15px}.certificates-header h1{font-size:32px}.certificates-header p{font-size:16px}.certificates-stats{grid-template-columns:1fr}.stat-value{font-size:36px}.earned-certificates-section h2,.available-certificates-section h2{font-size:24px}.certificates-grid,.milestones-grid{grid-template-columns:1fr}.certificates-info{padding:25px}.certificates-info h3{font-size:20px}.certificates-info li{font-size:14px}}.code-practice-container{max-width:1200px;margin:0 auto;padding:6rem 2rem 2rem}.code-practice-header{text-align:center;margin-bottom:2rem}.code-practice-header h2{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.code-practice-header p{color:var(--text-secondary);font-size:1.1rem}.language-selector-code{margin-bottom:2rem}.language-selector-code label{display:block;font-size:1.1rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.language-buttons{display:flex;flex-wrap:wrap;gap:.8rem}.lang-btn{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.2rem;background:var(--bg-secondary);border:2px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.lang-btn:hover{border-color:var(--accent);transform:translateY(-2px)}.lang-btn.active{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border-color:var(--accent);color:#fff}.lang-icon{font-size:1.3rem}.snippet-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:1rem;background:var(--bg-secondary);border-radius:10px}.snippet-info h3{margin:0;color:var(--text-primary);font-size:1.3rem}.random-btn{padding:.6rem 1.2rem;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.random-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e2b71466}.code-display{background:var(--bg-secondary);border:2px solid var(--border);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;overflow-x:auto;max-height:400px;overflow-y:auto}.code-display pre{margin:0;font-family:Fira Code,Courier New,monospace;font-size:1rem;line-height:1.6}.code-display code{color:var(--text-primary)}.code-char{color:var(--text-secondary);position:relative}.code-char.typed-correct{color:#51cf66;font-weight:500}.code-char.typed-incorrect{color:#ff6b6b;background:#ff6b6b33;font-weight:500}.code-char.current{background:var(--accent);color:#fff;animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}.code-input{width:100%;min-height:150px;padding:1.5rem;background:var(--bg-secondary);border:2px solid var(--border);border-radius:12px;color:var(--text-primary);font-family:Fira Code,Courier New,monospace;font-size:1rem;line-height:1.6;resize:vertical;margin-bottom:1.5rem}.code-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #e2b7141a}.code-stats{display:flex;gap:2rem;justify-content:center;padding:1rem;background:var(--bg-secondary);border-radius:10px;margin-bottom:2rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.3rem}.stat-label{font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:1.5rem;font-weight:700;color:var(--accent)}.stat-value.error{color:#ff6b6b}.code-results{text-align:center;padding:2rem;background:var(--bg-secondary);border-radius:12px;margin-bottom:2rem}.code-results h3{font-size:2rem;margin-bottom:1.5rem;color:var(--accent)}.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}.result-card{padding:1.5rem;background:var(--bg-primary);border:2px solid var(--border);border-radius:10px}.result-label{font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.result-value{font-size:2rem;font-weight:700;color:var(--accent)}.result-actions{display:flex;gap:1rem;justify-content:center}.retry-btn,.next-btn{padding:.8rem 2rem;font-size:1.1rem;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease}.retry-btn{background:var(--bg-primary);color:var(--text-primary);border:2px solid var(--border)}.retry-btn:hover{border-color:var(--accent);transform:translateY(-2px)}.next-btn{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);color:#fff}.next-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e2b71466}.snippet-list{margin-top:3rem}.snippet-list h3{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary)}.snippet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.snippet-card{display:flex;align-items:center;gap:.8rem;padding:1rem;background:var(--bg-secondary);border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all .3s ease;text-align:left}.snippet-card:hover{border-color:var(--accent);transform:translateY(-2px)}.snippet-card.active{background:linear-gradient(135deg,var(--accent) 0%,#f4c430 100%);border-color:var(--accent);color:#fff}.snippet-number{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--accent);color:#fff;border-radius:50%;font-weight:700;font-size:.9rem}.snippet-card.active .snippet-number{background:#fff;color:var(--accent)}.snippet-title{flex:1;font-size:.95rem;font-weight:500;color:var(--text-primary)}.snippet-card.active .snippet-title{color:#fff}@media (max-width: 1024px){.code-practice-container{padding:6rem 1.5rem 1.5rem}.language-buttons{gap:.6rem}.lang-btn{padding:.65rem 1.1rem;font-size:.95rem}.code-display,.code-input{padding:1.3rem;font-size:.95rem}}@media (max-width: 768px){.code-practice-container{padding:5rem 1rem 1rem}.code-practice-header h2{font-size:2rem}.code-practice-header p,.language-selector-code label{font-size:1rem}.language-buttons{gap:.5rem;justify-content:center}.lang-btn{padding:.6rem 1rem;font-size:.9rem;flex:1 1 calc(50% - .25rem);min-width:140px;justify-content:center}.snippet-info{flex-direction:column;gap:1rem;align-items:stretch}.snippet-info h3{font-size:1.1rem}.random-btn{width:100%;padding:.7rem 1rem}.code-display{padding:1rem;font-size:.9rem;max-height:350px}.code-input{min-height:120px;padding:1rem;font-size:.9rem}.code-stats{flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:space-around}.stat{flex:1 1 calc(33.333% - 1rem);min-width:80px}.results-grid{grid-template-columns:1fr;gap:1rem}.result-card{padding:1.2rem}.result-actions{flex-direction:column;gap:.8rem}.retry-btn,.next-btn{width:100%;padding:.9rem 1.5rem}.snippet-list h3{font-size:1.3rem}.snippet-grid{grid-template-columns:1fr;gap:.8rem}.snippet-card{padding:.9rem}}@media (max-width: 480px){.code-practice-container{padding:4.5rem .8rem .8rem}.code-practice-header h2{font-size:1.6rem}.code-practice-header p,.language-selector-code label{font-size:.95rem}.language-buttons{gap:.4rem}.lang-btn{padding:.5rem .8rem;font-size:.85rem;flex:1 1 100%;min-width:auto}.lang-icon{font-size:1.1rem}.snippet-info{padding:.8rem}.snippet-info h3{font-size:1rem}.random-btn{padding:.6rem 1rem;font-size:.9rem}.code-display{padding:.8rem;font-size:.85rem;max-height:300px}.code-input{min-height:100px;padding:.8rem;font-size:.85rem}.code-stats{gap:.8rem;padding:.8rem}.stat{flex:1 1 calc(33.333% - .8rem)}.stat-label{font-size:.8rem}.stat-value{font-size:1.2rem}.code-results{padding:1.5rem 1rem}.code-results h3{font-size:1.5rem}.result-card{padding:1rem}.result-label{font-size:.8rem}.result-value{font-size:1.6rem}.retry-btn,.next-btn{padding:.8rem 1.2rem;font-size:1rem}.snippet-list{margin-top:2rem}.snippet-list h3{font-size:1.2rem}.snippet-card{padding:.8rem}.snippet-number{width:26px;height:26px;font-size:.85rem}.snippet-title{font-size:.9rem}}@media (max-width: 360px){.code-practice-container{padding:4rem .6rem .6rem}.code-practice-header h2{font-size:1.4rem}.code-practice-header p{font-size:.9rem}.lang-btn{padding:.5rem .7rem;font-size:.8rem}.code-display,.code-input{padding:.7rem;font-size:.8rem}.stat-value{font-size:1.1rem}.result-value{font-size:1.4rem}}