:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=dark]{--bg-primary: #242424;--bg-secondary: #1a1a1a;--text-primary: rgba(255, 255, 255, .87);--text-secondary: rgba(255, 255, 255, .6);--accent-primary: #646cff;--accent-secondary: #535bf2;--error: #cf6679;--success: #4caf50}:root:not([data-theme=dark]){--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--text-primary: #213547;--text-secondary: #666;--accent-primary: #646cff;--accent-secondary: #747bff;--error: #d32f2f;--success: #4caf50}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s,color .3s}#root{width:100%;min-height:100vh}a{font-weight:500;color:var(--accent-primary);text-decoration:inherit}a:hover{color:var(--accent-secondary)}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:border-color .25s,background-color .3s,color .3s}button:hover{border-color:var(--accent-primary)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{background-color:var(--bg-secondary);border-radius:8px;padding:1.5em;box-shadow:0 2px 8px #0000001a}.text-muted{color:var(--text-secondary)}@media (max-width: 768px){h1{font-size:2.5em}}@media (max-width: 480px){h1{font-size:2em}button{padding:.5em 1em}}.header{position:fixed;top:0;left:0;width:100%;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.1);z-index:1000;padding:.5rem 0}.header-container{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;text-decoration:none;font-size:1.5rem;font-weight:700;color:#2d3748}.logo-icon{font-size:2rem;margin-right:.5rem}.logo-text{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav{display:flex;gap:2rem;align-items:center}.nav-link{text-decoration:none;color:#4a5568;font-weight:500;padding:.5rem 0;position:relative;transition:color .3s ease}.nav-link:hover,.nav-link.active{color:#667eea}.nav-link.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px}.menu-toggle{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:.5rem}.menu-toggle span{width:25px;height:3px;background:#2d3748;margin:3px 0;transition:.3s;border-radius:2px}@media (max-width: 768px){.menu-toggle{display:flex}.nav{position:absolute;top:100%;left:0;width:100%;background:#fff;flex-direction:column;padding:1rem;box-shadow:0 4px 15px #0000001a;transform:translateY(-10px);opacity:0;visibility:hidden;transition:all .3s ease}.nav-open{transform:translateY(0);opacity:1;visibility:visible}.nav-link{padding:1rem 0;width:100%;text-align:center;border-bottom:1px solid #e2e8f0}.nav-link:last-child{border-bottom:none}}.typing-area-modern{max-width:900px;margin:0 auto;padding:20px;font-family:Inter,Segoe UI,sans-serif;background:#f8fafc;border-radius:12px;box-shadow:0 4px 6px #0000000d}.config-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000000d}.config-group{display:flex;flex-direction:column;gap:8px}.config-group label{font-weight:600;font-size:14px;color:#374151}.config-group select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:14px}.config-group select:disabled{opacity:.6;cursor:not-allowed}.mode-toggle{display:flex;border:1px solid #d1d5db;border-radius:6px;overflow:hidden}.mode-toggle button{flex:1;padding:8px 12px;border:none;background:#f9fafb;cursor:pointer;font-size:14px;transition:all .2s}.mode-toggle button.active{background:#3b82f6;color:#fff}.mode-toggle button:disabled{opacity:.6;cursor:not-allowed}.action-buttons{display:flex;gap:10px;align-items:flex-end}.btn-secondary{padding:8px 16px;background:#e5e7eb;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:background .2s}.btn-secondary:hover:not(:disabled){background:#d1d5db}.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.test-info-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;margin-bottom:20px;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000000d}.test-info-item{display:flex;flex-direction:column;align-items:center;gap:4px}.info-label{font-size:12px;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.info-value{font-size:18px;font-weight:600;color:#1f2937}.text-display-modern{background:#fff;padding:25px;border-radius:8px;min-height:150px;margin-bottom:20px;font-size:18px;line-height:1.6;box-shadow:0 2px 4px #0000000d;overflow-wrap:break-word}.char{position:relative;transition:all .1s}.char.incorrect{color:#ef4444;text-decoration:underline}.char.current{background-color:#3b82f6;color:#fff;padding:0 2px;border-radius:2px}.char.space-char{background-color:transparent}.input-container-modern{position:relative;margin-bottom:15px}.typing-input-modern{width:100%;padding:15px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;line-height:1.5;resize:vertical;transition:border-color .2s;font-family:inherit}.typing-input-modern:focus{outline:none;border-color:#3b82f6}.typing-input-modern:disabled{background-color:#f9fafb;cursor:not-allowed}.start-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#6b7280;pointer-events:none}.start-hint p{margin:0 0 8px;font-size:16px}.shortcut-hint{font-size:12px;opacity:.7}.progress-modern{width:100%;height:6px;background:#e5e7eb;border-radius:3px;margin-bottom:20px;overflow:hidden}.progress-bar-modern{height:100%;background:linear-gradient(90deg,#3b82f6,#10b981);transition:width .3s;border-radius:3px}.test-controls{display:flex;justify-content:center;align-items:center;gap:15px}.btn-primary{padding:12px 24px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.completion-notice{color:#10b981;font-weight:600}.loading-text{text-align:center;color:#6b7280;font-style:italic}@media (max-width: 768px){.typing-area-modern{padding:15px}.config-panel{grid-template-columns:1fr}.test-info-bar{grid-template-columns:repeat(2,1fr)}.text-display-modern{font-size:16px;padding:15px}}.test-settings{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 10px 40px #0000001a;max-width:800px;margin:0 auto}.settings-header{text-align:center;margin-bottom:2.5rem}.settings-header h2{margin:0 0 .5rem;color:#2d3748;font-size:2rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.settings-header p{margin:0;color:#6b7280;font-size:1.1rem}.settings-content{margin-bottom:2rem}.settings-section{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid #f1f5f9}.settings-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.section-title{margin:0 0 1.2rem;color:#374151;font-size:1.3rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.mode-selection{margin-bottom:1rem}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.mode-option{background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .3s ease;text-align:left;display:flex;flex-direction:column;gap:.8rem}.mode-option:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 8px 25px #667eea26}.mode-option.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff}.mode-icon{font-size:2rem;margin-bottom:.5rem}.mode-label{font-size:1.1rem;font-weight:600;margin-bottom:.3rem}.mode-description{font-size:.9rem;opacity:.8;line-height:1.4}.mode-option.active .mode-description{opacity:.9}.quick-options{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.5rem;justify-content:center}.quick-option{padding:.8rem 1.2rem;background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease;min-width:80px;text-align:center}.quick-option:hover{border-color:#667eea;transform:translateY(-1px)}.quick-option.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 4px 12px #667eea4d}.slider-container{margin:1.5rem 0}.time-slider,.word-slider{width:100%;height:8px;border-radius:4px;background:#e2e8f0;outline:none;-webkit-appearance:none;appearance:none;margin-bottom:.8rem;transition:background .3s ease}.time-slider:hover,.word-slider:hover{background:#cbd5e1}.time-slider::-webkit-slider-thumb,.word-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 4px 12px #667eea66;border:3px solid white;transition:transform .2s ease}.time-slider::-webkit-slider-thumb:hover,.word-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.time-slider::-moz-range-thumb,.word-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 4px 12px #667eea66;border:3px solid white}.slider-labels{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:#6b7280;font-weight:500}.current-value{font-weight:600;color:#667eea;font-size:1rem}.difficulty-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.difficulty-option{background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:1.2rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:1rem}.difficulty-option:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 8px 25px #667eea26}.difficulty-option.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff}.difficulty-icon{font-size:2rem;flex-shrink:0}.difficulty-info{flex:1}.difficulty-label{display:block;font-weight:600;margin-bottom:.2rem;font-size:1rem}.difficulty-description{display:block;font-size:.8rem;opacity:.8;line-height:1.3}.difficulty-option.active .difficulty-description{opacity:.9}.selection-indicator{width:20px;height:20px;border:2px solid #cbd5e1;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.difficulty-option.active .selection-indicator{border-color:#fff;background:#fff3}.indicator-dot{width:10px;height:10px;background:#fff;border-radius:50%}.additional-options{display:flex;flex-direction:column;gap:1rem}.option-checkbox{display:flex;align-items:flex-start;gap:1rem;cursor:pointer;padding:1rem;border-radius:8px;transition:background .3s ease}.option-checkbox:hover{background:#f1f5f9}.checkbox-input{position:absolute;opacity:0;cursor:pointer}.checkmark{width:22px;height:22px;background:#fff;border:2px solid #cbd5e1;border-radius:6px;position:relative;flex-shrink:0;margin-top:.2rem;transition:all .3s ease}.option-checkbox:hover .checkmark{border-color:#667eea}.checkbox-input:checked~.checkmark{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea}.checkbox-input:checked~.checkmark:after{display:block;left:6px;top:2px;width:6px;height:12px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.option-content{flex:1}.option-label{display:block;font-weight:600;margin-bottom:.2rem;color:#374151}.option-description{display:block;font-size:.9rem;color:#6b7280;line-height:1.4}.test-preview{background:#f8fafc;border-radius:12px;padding:1.5rem}.preview-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;border-bottom:1px solid #e2e8f0}.preview-item:last-child{border-bottom:none}.preview-label{font-weight:600;color:#374151}.preview-value{color:#667eea;font-weight:500}.settings-actions{text-align:center;margin-top:2rem}.start-test-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;padding:1.5rem 2.5rem;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 8px 25px #10b9814d;display:inline-flex;align-items:center;gap:.8rem}.start-test-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px #10b98166}.start-test-btn:active{transform:translateY(-1px)}.btn-icon{font-size:1.5rem}.btn-subtext{position:absolute;bottom:-25px;left:50%;transform:translate(-50%);font-size:.8rem;opacity:.8;white-space:nowrap}@media (max-width: 768px){.test-settings{padding:1.5rem;margin:0 1rem}.mode-options,.difficulty-options{grid-template-columns:1fr}.quick-options{justify-content:center}.quick-option{flex:1;min-width:70px}.settings-header h2{font-size:1.7rem}.start-test-btn{padding:1.2rem 2rem;font-size:1.1rem}}@media (max-width: 480px){.test-settings{padding:1rem;margin:0 .5rem}.settings-section{margin-bottom:2rem;padding-bottom:1.5rem}.mode-option{padding:1.2rem}.difficulty-option{padding:1rem}.option-checkbox{padding:.8rem}.test-preview{padding:1.2rem}.start-test-btn{width:100%;justify-content:center}.btn-subtext{bottom:-20px;font-size:.7rem}}.test-settings{animation:slideUp .6s ease-out}.mode-option,.difficulty-option,.quick-option{animation:fadeIn .5s ease-out}.test-results{max-width:1200px;margin:0 auto;padding:20px;position:relative;overflow:hidden}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.confetti{position:absolute;width:10px;height:10px;opacity:0;animation:fall 3s linear forwards}@keyframes fall{0%{opacity:1;transform:translateY(-100px) rotate(0)}to{opacity:0;transform:translateY(100vh) rotate(360deg)}}.results-header{text-align:center;margin-bottom:30px;position:relative}.header-content h1{font-size:2.5rem;color:#1f2937;margin-bottom:10px;animation:fadeInUp .8s ease}.header-content p{font-size:1.1rem;color:#6b7280;animation:fadeInUp 1s ease}.celebrate{animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}.performance-badge{display:flex;align-items:center;justify-content:center;gap:15px;padding:20px;border-radius:20px;color:#fff;margin:0 auto 40px;max-width:400px;animation:scaleIn .8s ease;box-shadow:0 10px 30px #00000026}.badge-icon{font-size:2.5rem}.badge-content{display:flex;flex-direction:column;align-items:center}.badge-level{font-size:1.3rem;font-weight:700;margin-bottom:5px}.badge-text{font-size:.9rem;opacity:.9}.badge-wpm{font-size:1.8rem;font-weight:700;margin-left:auto}.results-grid{display:flex;flex-direction:column;gap:30px}.main-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:20px}.stat-card{background:#fff;border-radius:16px;padding:25px;box-shadow:0 4px 20px #00000014;border:1px solid #f3f4f6;position:relative;overflow:hidden;animation:slideInUp .8s ease}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4f46e5,#8b5cf6);opacity:.8}.stat-icon{font-size:2.5rem;margin-bottom:15px}.stat-content h3{color:#374151;margin-bottom:15px;font-size:1.1rem;font-weight:600}.stat-value{font-size:3rem;font-weight:800;color:#1f2937;margin-bottom:5px;background:linear-gradient(135deg,#4f46e5,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{color:#6b7280;font-weight:500;margin-bottom:20px}.progress-ring{position:relative;width:80px;height:80px;margin:15px 0}.progress-ring svg{transform:rotate(-90deg)}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.9rem;font-weight:600;color:#4f46e5}.accuracy-bar{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin:15px 0}.accuracy-fill{height:100%;border-radius:4px;transition:width 1.5s ease-in-out}.stat-comparison{margin-top:15px;padding-top:15px;border-top:1px solid #f3f4f6}.comparison-label{color:#6b7280;font-size:.9rem}.comparison-value{color:#4f46e5;font-weight:600;margin-left:8px}.stat-details{display:flex;gap:15px;margin-top:15px}.detail-item{display:flex;flex-direction:column;align-items:center}.detail-label{font-size:.8rem;color:#6b7280;margin-bottom:4px}.detail-value{font-weight:600;color:#1f2937}.secondary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px}.stat-item{background:#fff;border-radius:12px;padding:20px;display:flex;align-items:center;gap:15px;box-shadow:0 2px 10px #0000000d;border:1px solid #f3f4f6;animation:slideInUp .8s ease;animation-delay:.2s}.stat-item-icon{font-size:1.8rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#f0f9ff;border-radius:12px}.stat-item-content{display:flex;flex-direction:column}.stat-item-label{color:#6b7280;font-size:.9rem;margin-bottom:4px}.stat-item-value{font-size:1.4rem;font-weight:700;color:#1f2937}.details-section{background:#fff;border-radius:16px;padding:25px;box-shadow:0 4px 20px #00000014;border:1px solid #f3f4f6;animation:slideInUp .8s ease;animation-delay:.4s}.details-toggle{display:flex;align-items:center;gap:10px;background:none;border:none;color:#4f46e5;font-weight:600;cursor:pointer;padding:0;font-size:1rem}.toggle-arrow{transition:transform .3s ease}.detailed-analysis{margin-top:20px;padding-top:20px;border-top:1px solid #f3f4f6}.analysis-section{margin-bottom:30px}.analysis-section h4{color:#374151;margin-bottom:15px;font-size:1.1rem}.char-accuracy-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;background:#f9fafb;border-radius:8px}.char{font-weight:600;color:#374151;font-size:1.1rem}.char-accuracy-bar{width:100%;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.char-accuracy-fill{height:100%;border-radius:3px;transition:width 1s ease}.char-accuracy-percent{font-size:.9rem;font-weight:600;color:#1f2937}.char-count{font-size:.7rem;color:#6b7280}.timeline-chart{display:flex;flex-direction:column;gap:10px}.timeline-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f9fafb;border-radius:8px}.timeline-word{font-weight:500;color:#374151;flex:1}.timeline-stats{display:flex;gap:15px}.timeline-wpm{font-weight:600;color:#4f46e5;min-width:60px}.timeline-accuracy{font-weight:600;min-width:50px;text-align:right}.timeline-accuracy.perfect{color:#10b981}.timeline-accuracy.has-errors{color:#ef4444}.action-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-bottom:30px}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 20px;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem}.btn-primary{background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4f46e566}.btn-secondary{background:#fff;color:#4f46e5;border:2px solid #e5e7eb}.btn-secondary:hover{border-color:#4f46e5;transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.btn-share{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.btn-share:hover{transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.btn-history{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.btn-history:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f59e0b66}.btn-icon{font-size:1.2rem}.motivation-section{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:16px;padding:30px;text-align:center;animation:slideInUp .8s ease;animation-delay:.6s}.motivation-section h3{color:#1e40af;margin-bottom:15px;font-size:1.4rem}.motivation-emoji{animation:pulse 2s infinite}.motivation-text{color:#374151;font-size:1.1rem;line-height:1.6;margin-bottom:20px}.progress-tips{text-align:left;max-width:500px;margin:0 auto}.progress-tips h4{color:#1e40af;margin-bottom:15px;font-size:1.1rem}.progress-tips ul{list-style:none;padding:0}.progress-tips li{padding:8px 0;color:#374151;display:flex;align-items:center;gap:10px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@media (max-width: 768px){.test-results{padding:15px}.header-content h1{font-size:2rem}.performance-badge{flex-direction:column;text-align:center;gap:10px}.badge-wpm{margin-left:0}.main-stats{grid-template-columns:1fr}.secondary-stats,.action-buttons{grid-template-columns:repeat(2,1fr)}.char-accuracy-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 480px){.secondary-stats,.action-buttons{grid-template-columns:1fr}.char-accuracy-grid{grid-template-columns:repeat(2,1fr)}.stat-value{font-size:2.5rem}}.text-selector{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 15px #0000000d;margin-bottom:2rem}.selector-header{margin-bottom:1.5rem;border-bottom:1px solid #e5e7eb;padding-bottom:1rem}.selector-header h3{margin:0 0 1rem;color:#2d3748;font-size:1.3rem;text-align:center}.selector-tabs{display:flex;gap:.5rem;justify-content:center}.selector-tabs .tab{padding:.8rem 1.5rem;border:none;background:#f8fafc;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:.5rem}.selector-tabs .tab.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #667eea4d}.selector-tabs .tab:hover:not(.active){background:#e2e8f0;transform:translateY(-1px)}.filter-controls{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.search-box{position:relative;flex:1;min-width:250px}.search-input{width:100%;padding:.8rem 1rem .8rem 2.5rem;border:1px solid #d1d5db;border-radius:8px;font-size:.9rem;transition:border-color .3s ease}.search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.search-icon{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:#9ca3af}.difficulty-filter{display:flex;align-items:center;gap:.5rem}.difficulty-filter label{font-weight:500;color:#4b5563;white-space:nowrap}.filter-select{padding:.8rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer}.filter-select:focus{outline:none;border-color:#667eea}.texts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;max-height:400px;overflow-y:auto;padding:.5rem}.text-card{background:#f8fafc;border:2px solid #e5e7eb;border-radius:8px;padding:1rem;cursor:pointer;transition:all .3s ease;position:relative}.text-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:#667eea}.text-card.selected{border-color:#667eea;background:#667eea0d}.text-card.selected:before{content:"✓";position:absolute;top:-10px;right:-10px;background:#10b981;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 6px #10b98166}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem}.card-header h4{margin:0;font-size:1rem;color:#2d3748;flex:1}.difficulty-badge{padding:.2rem .6rem;border-radius:12px;font-size:.7rem;font-weight:600;text-transform:uppercase;margin-left:.5rem}.difficulty-badge.easy{background:#dcfce7;color:#166534}.difficulty-badge.medium{background:#ffedd5;color:#9a3412}.difficulty-badge.hard{background:#fee2e2;color:#991b1b}.difficulty-badge.custom{background:#e0e7ff;color:#3730a3}.text-preview{margin:0 0 1rem;color:#4b5563;font-size:.9rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-footer{display:flex;justify-content:space-between;align-items:center}.word-count{font-size:.8rem;color:#6b7280;font-weight:500}.preview-btn{background:none;border:1px solid #d1d5db;padding:.3rem .6rem;border-radius:4px;font-size:.8rem;cursor:pointer;transition:all .2s ease}.preview-btn:hover{background:#f3f4f6;transform:translateY(-1px)}.no-results{grid-column:1 / -1;text-align:center;padding:2rem;color:#6b7280;font-style:italic}.custom-editor{margin-bottom:2rem}.editor-header{display:flex;gap:1rem;margin-bottom:1rem;align-items:center;flex-wrap:wrap}.title-input{flex:1;min-width:250px;padding:.8rem 1rem;border:1px solid #d1d5db;border-radius:8px;font-size:1rem}.title-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.editor-stats{display:flex;gap:1rem;font-size:.8rem;color:#6b7280}.text-area{width:100%;padding:1rem;border:1px solid #d1d5db;border-radius:8px;font-family:inherit;font-size:.95rem;line-height:1.5;resize:vertical;min-height:120px;margin-bottom:1rem;transition:border-color .3s ease}.text-area:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.text-area::placeholder{color:#9ca3af}.editor-actions{display:flex;gap:.8rem}.save-btn,.cancel-btn{padding:.8rem 1.5rem;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease}.save-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 8px #10b9814d}.save-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.save-btn:disabled{background:#d1d5db;cursor:not-allowed;box-shadow:none}.cancel-btn{background:#f3f4f6;color:#4b5563;border:1px solid #d1d5db}.cancel-btn:hover{background:#e5e7eb}.saved-texts h4{margin:0 0 1rem;color:#2d3748;font-size:1.1rem}.saved-texts-list{display:flex;flex-direction:column;gap:.8rem;max-height:200px;overflow-y:auto}.saved-text-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem;background:#f8fafc;border-radius:8px;border:1px solid #e5e7eb}.saved-text-info h5{margin:0 0 .3rem;color:#2d3748;font-size:.9rem}.saved-text-actions{display:flex;gap:.5rem}.use-btn,.edit-btn,.delete-btn{padding:.4rem .8rem;border:none;border-radius:4px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease}.use-btn{background:#667eea;color:#fff}.use-btn:hover:not(:disabled){background:#5a67d8;transform:translateY(-1px)}.use-btn:disabled{background:#9ca3af;cursor:not-allowed}.edit-btn{background:#f59e0b;color:#fff}.edit-btn:hover{background:#d97706;transform:translateY(-1px)}.delete-btn{background:#ef4444;color:#fff}.delete-btn:hover{background:#dc2626;transform:translateY(-1px)}.text-preview-modal{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background:#fff;border-radius:12px;padding:1.5rem;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 10px 25px #0003;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e5e7eb}.modal-header h3{margin:0;color:#2d3748;flex:1}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;padding:.2rem;border-radius:4px}.close-btn:hover{background:#f3f4f6;color:#374151}.modal-body{margin-bottom:1.5rem}.modal-body p{line-height:1.6;color:#4b5563;font-size:1rem}.modal-footer{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid #e5e7eb}.select-btn{padding:.8rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease}.select-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.selected-text-info{background:#667eea0d;border:1px solid #667eea;border-radius:8px;padding:1rem;margin-top:1.5rem}.selected-text-info h4{margin:0 0 .5rem;color:#2d3748;font-size:1rem}.selected-preview{margin:0 0 1rem;color:#4b5563;font-size:.9rem;line-height:1.4}.clear-selection-btn{padding:.5rem 1rem;background:#f3f4f6;color:#4b5563;border:1px solid #d1d5db;border-radius:6px;font-size:.8rem;cursor:pointer;transition:all .2s ease}.clear-selection-btn:hover{background:#e5e7eb}@media (max-width: 768px){.text-selector{padding:1rem}.filter-controls{flex-direction:column}.search-box{min-width:auto}.texts-grid{grid-template-columns:1fr}.editor-header{flex-direction:column;align-items:stretch}.title-input{min-width:auto}.editor-stats{justify-content:space-between}.saved-text-item{flex-direction:column;align-items:stretch;gap:.8rem}.saved-text-actions{justify-content:center}.modal-content{margin:1rem;padding:1rem}}@media (max-width: 480px){.selector-tabs .tab{padding:.6rem 1rem;font-size:.9rem}.difficulty-filter{flex-direction:column;align-items:stretch}.editor-actions{flex-direction:column}.saved-text-actions{flex-wrap:wrap;justify-content:center}}.take-test-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;position:relative;overflow:hidden;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.take-test-header{text-align:center;margin-bottom:30px;color:#fff;position:relative;z-index:2}.header-title{font-size:2.5rem;margin-bottom:10px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.2)}.header-subtitle{font-size:1.1rem;opacity:.9;margin-bottom:20px;max-width:600px;margin-left:auto;margin-right:auto}.header-indicators{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:20px}.indicator{padding:8px 15px;border-radius:20px;background-color:#fff3;color:#fff;font-size:.9rem;font-weight:500;box-shadow:0 4px 6px #0000001a}.test-content{max-width:1200px;margin:0 auto;background:#fff;border-radius:15px;box-shadow:0 10px 30px #00000026;padding:30px;position:relative;z-index:2;transition:all .5s ease}.test-content.transitioning{opacity:.7;transform:scale(.98)}.test-setup{display:grid;grid-template-columns:2fr 1fr;gap:30px}.setup-content{display:flex;flex-direction:column;gap:25px}.settings-section,.text-selection-section{background:#f8f9fa;border-radius:10px;padding:20px;box-shadow:0 4px 6px #0000000d}.start-test-section{display:flex;justify-content:center;margin-top:10px}.start-test-btn{background:linear-gradient(to right,#667eea,#764ba2);color:#fff;border:none;padding:12px 30px;border-radius:30px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.start-test-btn:hover{transform:translateY(-2px);box-shadow:0 7px 20px #00000040}.start-test-btn:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.test-stats-section{background:#f8f9fa;border-radius:10px;padding:20px;box-shadow:0 4px 6px #0000000d;height:fit-content}.test-stats{text-align:center}.test-stats h3{margin-bottom:20px;color:#495057;font-size:1.3rem}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.stat-item{background:#fff;padding:15px;border-radius:10px;box-shadow:0 2px 4px #0000001a}.stat-value{font-size:1.5rem;font-weight:700;color:#667eea;margin-bottom:5px}.stat-label{font-size:.9rem;color:#6c757d}.test-typing-section{display:flex;flex-direction:column;gap:20px}.typing-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid #e9ecef}.test-info{display:flex;gap:15px;align-items:center}.time-limit{font-weight:600;color:#495057;font-size:1.1rem}.difficulty-badge{padding:5px 12px;border-radius:15px;color:#fff;font-size:.85rem;font-weight:500}.progress-indicator{flex:1;max-width:200px}.progress-bar{height:8px;background:#e9ecef;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(to right,#667eea,#764ba2);width:0%;transition:width .3s ease;border-radius:4px}.test-results-section{padding:20px 0}.loading-spinner{border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top:4px solid white;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 20px}.take-test-container p{text-align:center;color:#fff}.background-animation{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1}.floating-shape{position:absolute;border-radius:50%;opacity:.1;background:#fff;animation:float 15s infinite linear}.shape-1{width:150px;height:150px;top:10%;left:10%;animation-duration:20s}.shape-2{width:100px;height:100px;top:70%;left:80%;animation-duration:15s;animation-delay:1s}.shape-3{width:200px;height:200px;top:40%;left:60%;animation-duration:25s;animation-delay:.5s}@keyframes float{0%{transform:translate(0) rotate(0)}25%{transform:translate(20px,30px) rotate(90deg)}50%{transform:translateY(60px) rotate(180deg)}75%{transform:translate(-20px,30px) rotate(270deg)}to{transform:translate(0) rotate(360deg)}}@media (max-width: 992px){.test-setup{grid-template-columns:1fr}.header-title{font-size:2rem}.test-content{padding:20px}}@media (max-width: 768px){.take-test-container{padding:15px}.header-title{font-size:1.8rem}.header-subtitle{font-size:1rem}.typing-header{flex-direction:column;gap:10px;align-items:flex-start}.progress-indicator{max-width:100%;width:100%}.header-indicators{gap:10px}.indicator{padding:6px 12px;font-size:.8rem}.stats-grid{grid-template-columns:1fr}}@media (max-width: 480px){.header-title{font-size:1.5rem}.settings-section,.text-selection-section,.test-stats-section{padding:15px}.start-test-btn{padding:10px 20px;font-size:1rem}}.results-container{max-width:1000px;margin:0 auto;padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #e5e7eb}.results-header h2{color:#1f2937;margin:0;font-size:1.8rem}.tab{padding:8px 16px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-weight:500;color:#6b7280;transition:all .2s ease}.tab.active{background:#fff;color:#4f46e5;box-shadow:0 1px 3px #0000001a}.tab:hover:not(.active){color:#4f46e5}.no-results-icon{font-size:4rem;margin-bottom:20px}.no-results h2{color:#1f2937;margin-bottom:10px}.results-overview{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:30px}@media (max-width: 768px){.results-overview{grid-template-columns:1fr}}.main-stats{display:flex;flex-direction:column;gap:20px}.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;display:flex;align-items:flex-start;gap:16px}.stat-card.primary{border-left:4px solid #4f46e5}.stat-icon{font-size:2rem;padding:12px;background:#f0f9ff;border-radius:10px}.stat-content h3{margin:0 0 8px;color:#374151;font-size:1rem;font-weight:600}.stat-value{font-size:2.5rem;font-weight:700;color:#1f2937;margin-bottom:4px}.stat-subtext{color:#6b7280;font-weight:500;margin-bottom:16px}.progress-container{width:100%}.progress-fill{height:100%;border-radius:4px;transition:width .5s ease}.progress-labels{display:flex;justify-content:space-between;font-size:.75rem;color:#6b7280}.secondary-stats{background:#f9fafb;border-radius:12px;padding:24px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}@media (max-width: 480px){.stats-grid{grid-template-columns:1fr}}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e5e7eb}.stat-item:last-child{border-bottom:none}.stat-label{color:#6b7280;font-weight:500}.stat-value-sm{color:#1f2937;font-weight:600}.details-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;color:#4f46e5;font-weight:600;cursor:pointer;padding:8px 0;margin-bottom:16px}.toggle-arrow{font-size:.8rem;transition:transform .2s ease}.details-content{background:#f9fafb;border-radius:12px;padding:24px}.detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media (max-width: 768px){.detail-columns{grid-template-columns:1fr}}.detail-column h4{margin:0 0 16px;color:#374151}.char-accuracy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.char-accuracy-item{display:flex;flex-direction:column;gap:4px}.char{font-weight:600;color:#374151}.char-accuracy-bar{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.char-accuracy-fill{height:100%;border-radius:3px;transition:width .5s ease}.char-accuracy-percent{font-size:.875rem;font-weight:600;color:#1f2937}.char-count{font-size:.75rem;color:#6b7280}.comparison-container{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px;font-family:Courier New,monospace;line-height:1.6;max-height:200px;overflow-y:auto}.char{display:inline-block;min-width:8px;position:relative}.char.correct{color:#10b981}.char.error{color:#ef4444;text-decoration:underline}.char.extra{color:#ef4444;background:#ef44441a}.char.not-typed{color:#9ca3af}.comparison-legend{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-size:.875rem;color:#6b7280}.legend-color.error{background:#ef4444}.legend-color.extra{background:#ef4444;opacity:.7}.btn-primary,.btn-secondary,.btn-share{padding:12px 24px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px}.btn-primary{background:#4f46e5;color:#fff}.btn-primary:hover{background:#4338ca;transform:translateY(-1px)}.btn-primary.large{padding:16px 32px;font-size:1.1rem}.btn-secondary{background:#fff;color:#4f46e5;border:1px solid #e5e7eb}.btn-secondary:hover{background:#f0f9ff;border-color:#4f46e5}.btn-share{background:#10b981;color:#fff}.btn-share:hover{background:#059669}.btn-text{background:none;border:none;color:#4f46e5;cursor:pointer;font-weight:500}.history-tab{padding:20px 0}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:30px}.history-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;transition:transform .2s ease,box-shadow .2s ease}.history-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.history-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f3f4f6}.history-date{font-size:.875rem;color:#6b7280}.history-wpm{font-weight:700;color:#4f46e5;font-size:1.2rem}.history-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}.history-stat-label{display:block;font-size:.75rem;color:#6b7280;margin-bottom:4px}.history-stat-value{display:block;font-weight:600;color:#1f2937}.performance-badge{padding:4px 12px;border-radius:20px;color:#fff;font-size:.75rem;font-weight:600}.performance-badge.small{font-size:.7rem;padding:2px 8px}.history-preview{margin:20px 0}.history-preview-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #e5e7eb}.history-preview-item:last-child{border-bottom:none}.preview-wpm{font-weight:600;color:#4f46e5}.preview-accuracy{color:#10b981}.preview-date{font-size:.875rem;color:#6b7280}.practice-settings{background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 15px #0000001a}.practice-settings h3{margin-bottom:20px;color:#2d3748;font-size:1.5rem;text-align:center}.settings-group{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.settings-group:last-child{border-bottom:none}.settings-label{display:block;margin-bottom:12px;font-weight:600;color:#4a5568;font-size:1.1rem}.mode-toggle{display:flex;border-radius:8px;overflow:hidden;border:1px solid #cbd5e0}.mode-btn{flex:1;padding:12px;border:none;background:#f7fafc;cursor:pointer;transition:all .3s ease;font-size:.95rem}.mode-btn.active{background:#667eea;color:#fff;box-shadow:0 2px 8px #667eea66}.mode-btn:not(.active):hover{background:#edf2f7}.time-options,.word-options,.difficulty-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.time-option,.word-option,.difficulty-btn{padding:8px 16px;border:1px solid #cbd5e0;background:#f7fafc;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:.9rem}.time-option.active,.word-option.active,.difficulty-btn.active{background:#667eea;color:#fff;border-color:#667eea;box-shadow:0 2px 8px #667eea66}.time-option:hover:not(.active),.word-option:hover:not(.active),.difficulty-btn:hover:not(.active){background:#edf2f7}.slider-container{margin-top:15px}.time-slider,.word-slider{width:100%;height:6px;border-radius:3px;background:#e2e8f0;outline:none;-webkit-appearance:none;appearance:none}.time-slider::-webkit-slider-thumb,.word-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 6px #667eea80}.time-slider::-moz-range-thumb,.word-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 6px #667eea80;border:none}.slider-value{display:block;text-align:center;margin-top:8px;font-weight:600;color:#4a5568}.checkbox-group{display:flex;flex-direction:column;gap:12px}.checkbox-label{display:flex;align-items:center;cursor:pointer;position:relative;padding-left:35px;font-size:1rem;color:#4a5568}.checkbox-label input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:22px;width:22px;background-color:#f7fafc;border:1px solid #cbd5e0;border-radius:4px;transition:all .3s ease}.checkbox-label:hover input~.checkmark{background-color:#edf2f7}.checkbox-label input:checked~.checkmark{background-color:#667eea;border-color:#667eea}.checkmark:after{content:"";position:absolute;display:none}.checkbox-label input:checked~.checkmark:after{display:block}.checkbox-label .checkmark:after{left:7px;top:3px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.settings-description{background:#f7fafc;padding:15px;border-radius:8px;margin-top:20px;border-left:4px solid #667eea}.settings-description h4{margin-bottom:10px;color:#2d3748}.settings-description ul{padding-left:20px;color:#4a5568}.settings-description li{margin-bottom:5px}.start-practice-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%;margin-top:20px;box-shadow:0 4px 15px #667eea4d}.practice-stats{background:linear-gradient(135deg,#1a202c,#2d3748);border-radius:16px;padding:24px;color:#fff;box-shadow:0 10px 30px #0000004d;margin:20px 0;overflow:hidden;position:relative}.practice-stats:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#10b981,#3b82f6,#f59e0b);z-index:1}.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}.stats-header h3{margin:0;font-size:1.5rem;font-weight:700;background:linear-gradient(90deg,#10b981,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stats-tabs{display:flex;background:#ffffff1a;border-radius:12px;padding:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tab{padding:8px 16px;border:none;background:transparent;color:#ffffffb3;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease}.tab:hover{color:#fff;background:#ffffff1a}.tab.active{color:#fff;background:linear-gradient(90deg,#3b82f6,#10b981);box-shadow:0 4px 12px #3b82f666}.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:24px}.stat-card{background:#ffffff0d;border-radius:16px;padding:20px;display:flex;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:all .3s ease;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#3b82f61a,#10b9811a);opacity:0;transition:opacity .3s ease;z-index:0}.stat-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0003;border-color:#3b82f64d}.stat-card:hover:before{opacity:1}.stat-card.primary{background:linear-gradient(135deg,#3b82f626,#10b98126);border-color:#3b82f64d}.stat-icon{font-size:2rem;margin-right:16px;z-index:1}.stat-info{flex:1;z-index:1}.stat-info h4{margin:0 0 4px;font-size:1.5rem;font-weight:700}.stat-info p{margin:0 0 6px;color:#ffffffb3;font-size:.9rem}.stat-level{font-size:.85rem;font-weight:600}.progress-ring{position:relative;width:60px;height:60px;z-index:1}.progress-ring svg circle:last-child{transition:stroke-dasharray 1.5s ease-in-out}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.8rem;font-weight:600}.streak-fire{display:flex;flex-direction:column;z-index:1}.fire-emoji{font-size:1.2rem;animation:flame 1.5s infinite alternate}.fire-emoji:nth-child(2){animation-delay:.3s}.fire-emoji:nth-child(3){animation-delay:.6s}.fire-emoji:nth-child(4){animation-delay:.9s}.fire-emoji:nth-child(5){animation-delay:1.2s}.time-chart{display:flex;align-items:flex-end;height:40px;gap:4px;z-index:1}.chart-bar{width:8px;background:linear-gradient(to top,#3b82f6,#10b981);border-radius:4px 4px 0 0;transition:height .5s ease}.additional-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;background:#ffffff0d;border-radius:12px;padding:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.additional-stat{display:flex;flex-direction:column;align-items:center}.stat-label{font-size:.85rem;color:#ffffffb3;margin-bottom:4px}.stat-value{font-size:1.2rem;font-weight:700}.progress-stats{animation:fadeIn .5s ease}.progress-chart{display:flex;justify-content:space-around;align-items:flex-end;height:200px;margin:24px 0;padding:0 10px}.chart-column{display:flex;flex-direction:column;align-items:center;flex:1;max-width:50px}.chart-bar.progress{width:30px;border-radius:6px 6px 0 0;position:relative;transition:height 1s ease-in-out;display:flex;justify-content:center;transform-origin:bottom}.chart-bar.progress.animate{animation:growBar 1s ease-out forwards}.bar-value{position:absolute;top:-25px;font-size:.8rem;font-weight:600;opacity:0;transition:opacity .3s ease}.chart-bar.progress:hover .bar-value{opacity:1}.bar-label{margin-top:8px;font-size:.8rem;color:#ffffffb3}.progress-summary{display:flex;justify-content:space-around;margin-top:24px;background:#ffffff0d;border-radius:12px;padding:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.summary-item{display:flex;flex-direction:column;align-items:center}.summary-label{font-size:.85rem;color:#ffffffb3;margin-bottom:4px}.summary-value{font-size:1.1rem;font-weight:600}.session-stats{animation:fadeIn .5s ease}.session-results{max-height:300px;overflow-y:auto;margin-bottom:16px}.session-result{display:flex;justify-content:space-between;padding:12px 16px;background:#ffffff0d;border-radius:8px;margin-bottom:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.session-result:hover{background:#ffffff1a;transform:translate(5px)}.session-summary{display:flex;justify-content:space-around;background:#ffffff0d;border-radius:12px;padding:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.session-stat{font-size:1rem}.no-session-data{text-align:center;padding:40px 0;color:#ffffff80;font-style:italic}.stats-motivation{margin-top:24px;padding:16px;background:linear-gradient(90deg,#3b82f626,#10b98126);border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,.1);animation:pulse 2s infinite}.motivation-text{font-size:1.1rem;font-weight:600;margin-bottom:8px}.next-milestone{font-size:.9rem;color:#fffc}@keyframes flame{0%{transform:scale(1);text-shadow:0 0 5px rgba(255,69,0,.5)}to{transform:scale(1.2);text-shadow:0 0 20px rgba(255,69,0,.9)}}@keyframes growBar{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 10px #3b82f600}to{box-shadow:0 0 #3b82f600}}@media (max-width: 768px){.stat-cards{grid-template-columns:1fr}.stats-header{flex-direction:column;align-items:flex-start}.stats-tabs{width:100%;justify-content:center}.progress-summary,.session-summary{flex-direction:column;gap:16px}.progress-chart{height:150px}.chart-bar.progress{width:20px}}.practice-container{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.practice-header{text-align:center;margin-bottom:30px;animation:fadeInDown .8s ease}.practice-header h1{font-size:2.5rem;color:#2d3748;margin-bottom:10px}.practice-header p{font-size:1.1rem;color:#4a5568}.practice-setup{display:grid;grid-template-columns:2fr 1fr;gap:30px;animation:fadeIn .8s ease}.setup-content{background:#fff;border-radius:12px;padding:25px;box-shadow:0 10px 25px #0000001a}.settings-section,.text-selection-section,.start-practice-section{margin-bottom:25px}.start-practice-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%;box-shadow:0 4px 15px #667eea4d}.start-practice-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.start-practice-btn:disabled{background:#cbd5e0;cursor:not-allowed;transform:none;box-shadow:none}.practice-stats-section{background:#fff;border-radius:12px;padding:25px;box-shadow:0 10px 25px #0000001a;height:fit-content}.practice-typing{background:#fff;border-radius:12px;padding:25px;box-shadow:0 10px 25px #0000001a;animation:fadeIn .8s ease}.back-to-settings-btn{background:#e2e8f0;color:#4a5568;border:none;padding:10px 20px;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .3s ease;margin-top:20px}.back-to-settings-btn:hover{background:#cbd5e0}.practice-results{background:#fff;border-radius:12px;padding:25px;box-shadow:0 10px 25px #0000001a;animation:fadeIn .8s ease}.loading-spinner{border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.practice-setup{grid-template-columns:1fr}.practice-header h1{font-size:2rem}}.results-container{max-width:1000px;margin:0 auto;padding:20px;font-family:Inter,Segoe UI,sans-serif;background:#f8fafc;border-radius:12px;box-shadow:0 4px 6px #0000000d}.no-results{text-align:center;padding:40px 20px}.no-results-icon{font-size:48px;margin-bottom:20px}.no-results h2{color:#374151;margin-bottom:10px}.no-results p{color:#6b7280;margin-bottom:30px}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:15px;border-bottom:1px solid #e5e7eb}.results-header h2{color:#1f2937;margin:0}.tabs{display:flex;background:#f3f4f6;border-radius:8px;padding:4px}.tab{padding:8px 16px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-weight:500;color:#6b7280;transition:all .2s}.tab.active{background:#fff;color:#3b82f6;box-shadow:0 1px 3px #0000001a}.results-overview{margin-bottom:30px}.main-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}.stat-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;display:flex;align-items:flex-start}.stat-card.primary{border-left:4px solid #3b82f6}.stat-icon{font-size:32px;margin-right:16px}.stat-content{flex:1}.stat-content h3{margin:0 0 8px;font-size:16px;color:#6b7280;font-weight:500}.stat-value{font-size:32px;font-weight:700;color:#1f2937;margin-bottom:8px}.stat-subtext{font-size:14px;color:#6b7280;margin-bottom:16px}.progress-container{margin-top:16px}.progress-bar{height:8px;background:#f3f4f6;border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;border-radius:4px;transition:width .3s ease}.progress-labels{display:flex;justify-content:space-between;font-size:12px;color:#6b7280}.secondary-stats{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.stat-item{display:flex;flex-direction:column;align-items:center;padding:16px;background:#f9fafb;border-radius:8px}.stat-label{font-size:14px;color:#6b7280;margin-bottom:8px}.stat-value-sm{font-size:20px;font-weight:600;color:#1f2937}.details-section{margin-bottom:30px}.details-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;color:#3b82f6;font-weight:500;cursor:pointer;padding:0;margin-bottom:16px}.toggle-arrow{transition:transform .2s;font-size:12px}.toggle-arrow.open{transform:rotate(180deg)}.details-content{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.detail-column h4{margin:0 0 16px;color:#374151;font-size:18px}.char-accuracy-grid{display:flex;flex-direction:column;gap:12px}.char-accuracy-item{display:flex;align-items:center;gap:12px}.char-accuracy-item .char{min-width:50px;font-weight:600;color:#374151}.char-accuracy-bar{flex:1;height:8px;background:#f3f4f6;border-radius:4px;overflow:hidden}.char-accuracy-fill{height:100%;border-radius:4px;transition:width .3s ease}.char-accuracy-percent{min-width:40px;text-align:right;font-weight:600;color:#374151}.char-count{min-width:60px;text-align:right;font-size:12px;color:#6b7280}.text-comparison{margin-top:24px}.comparison-container{background:#f9fafb;padding:16px;border-radius:8px;margin-bottom:16px;line-height:1.8;font-family:Monaco,Menlo,monospace;font-size:14px;max-height:200px;overflow-y:auto}.comparison-container .char{display:inline-block;min-width:8px;text-align:center}.comparison-container .char.correct{color:#10b981;background:#10b9811a}.comparison-container .char.error{color:#ef4444;background:#ef44441a;text-decoration:line-through}.comparison-container .char.extra{color:#ef4444;background:#ef44441a}.comparison-container .char.not-typed{color:#9ca3af}.comparison-legend{display:flex;gap:16px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-size:14px;color:#6b7280}.legend-color{width:12px;height:12px;border-radius:2px}.legend-color.correct{background:#10b981}.legend-color.error,.legend-color.extra{background:#ef4444}.legend-color.not-typed{background:#9ca3af}.action-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.btn-primary,.btn-secondary,.btn-share{padding:12px 24px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s;border:none;display:flex;align-items:center;gap:8px}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover{background:#2563eb}.btn-secondary{background:#e5e7eb;color:#374151}.btn-secondary:hover{background:#d1d5db}.btn-share{background:#f9fafb;color:#374151;border:1px solid #e5e7eb}.btn-share:hover{background:#f3f4f6}.btn-text{background:none;border:none;color:#3b82f6;cursor:pointer;font-weight:500}.btn-text:hover{text-decoration:underline}.btn-text.danger{color:#ef4444}.btn-large{padding:16px 32px;font-size:16px}.history-tab{margin-top:20px}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.history-header h3{margin:0;color:#1f2937}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-bottom:30px}.history-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 3px #0000001a}.history-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.history-date{font-size:14px;color:#6b7280}.history-wpm{font-size:18px;font-weight:700;color:#1f2937}.history-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.history-stat{text-align:center}.history-stat-label{display:block;font-size:12px;color:#6b7280;margin-bottom:4px}.history-stat-value{display:block;font-size:16px;font-weight:600;color:#1f2937}.history-performance{display:flex;justify-content:center}.performance-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff}.performance-badge.small{font-size:11px;padding:2px 8px}.no-history{text-align:center;padding:40px 20px;color:#6b7280}.history-section{margin-top:40px;padding-top:30px;border-top:1px solid #e5e7eb}.history-section h3{margin-bottom:16px;color:#374151}.history-preview{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.history-preview-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d}.preview-wpm{font-weight:600;color:#1f2937}.preview-accuracy{color:#6b7280}.preview-date{font-size:12px;color:#9ca3af}@media (max-width: 768px){.results-container{padding:16px}.results-header{flex-direction:column;align-items:flex-start;gap:16px}.tabs{width:100%}.main-stats,.detail-columns{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.history-grid{grid-template-columns:1fr}.action-buttons{flex-direction:column}.btn-primary,.btn-secondary,.btn-share{width:100%;justify-content:center}}.tips-page{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.container{max-width:1200px;margin:0 auto;background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 40px #0000001a}.tips-header{text-align:center;margin-bottom:40px}.tips-header h1{font-size:3rem;font-weight:700;color:#2d3748;margin-bottom:10px;background:linear-gradient(135deg,#4f46e5,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.proverb-display{font-size:1.2rem;color:#718096;font-style:italic;margin-top:20px;padding:15px;background:#f7fafc;border-radius:12px;border-left:4px solid #4f46e5;animation:fadeIn 2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.controls-section{display:flex;gap:20px;margin-bottom:30px;align-items:center;flex-wrap:wrap}.search-box{position:relative;flex:1;min-width:300px}.search-input{width:100%;padding:15px 20px 15px 50px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;transition:all .3s ease}.search-input:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51a}.search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#a0aec0}.bookmark-toggle{padding:15px 25px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;font-weight:600;cursor:pointer;transition:all .3s ease}.bookmark-toggle.active,.bookmark-toggle:hover{background:#4f46e5;color:#fff;border-color:#4f46e5}.progress-display{background:#f7fafc;padding:20px;border-radius:12px;margin-bottom:30px}.progress-bar{width:100%;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#4f46e5,#7c3aed);border-radius:4px;transition:width .5s ease}.progress-text{font-weight:600;color:#4a5568}.category-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:40px}.category-btn{padding:20px;border:2px solid #e2e8f0;border-radius:16px;background:#fff;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:10px}.category-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0000001a}.category-btn.active{background:var(--color);color:#fff;border-color:var(--color)}.category-icon{font-size:2rem}.category-name{font-weight:600;font-size:1.1rem}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:25px;margin-bottom:40px}.tip-card{background:#fff;border:2px solid #e2e8f0;border-radius:16px;overflow:hidden;transition:all .3s ease;box-shadow:0 4px 6px #0000000d}.tip-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.tip-card.expanded{border-color:#4f46e5;box-shadow:0 8px 25px #4f46e526}.tip-card.completed{border-color:#059669;background:linear-gradient(135deg,#f0fff4,#fff)}.tip-header{padding:25px;cursor:pointer;display:flex;align-items:flex-start;gap:15px;background:#fff}.tip-image{font-size:2rem;flex-shrink:0}.tip-info{flex:1}.tip-info h3{font-size:1.3rem;font-weight:600;color:#2d3748;margin-bottom:10px}.tip-meta{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.difficulty-badge{padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:600;text-transform:capitalize}.difficulty-badge.beginner{background:#dcfce7;color:#059669}.difficulty-badge.intermediate{background:#dbeafe;color:#1d4ed8}.difficulty-badge.advanced{background:#fef3c7;color:#d97706}.practice-time{font-size:.9rem;color:#718096}.tip-actions{display:flex;gap:10px;align-items:center}.bookmark-btn,.complete-btn,.expand-btn{padding:8px;border:2px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:1.1rem}.bookmark-btn:hover{border-color:#f59e0b;color:#f59e0b}.bookmark-btn.bookmarked{background:#fef3c7;border-color:#f59e0b;color:#f59e0b}.complete-btn:hover{border-color:#059669;color:#059669}.complete-btn.completed{background:#dcfce7;border-color:#059669;color:#059669}.expand-btn{font-weight:700;font-size:1.2rem}.tip-content{background:#f7fafc;border-top:2px solid #e2e8f0}.content-wrapper{padding:25px}.content-wrapper p{line-height:1.6;color:#4a5568;margin-bottom:20px}.benefits-section{background:#fff;padding:20px;border-radius:12px;border-left:4px solid #4f46e5;margin-bottom:20px}.benefits-section h4{font-weight:600;color:#2d3748;margin-bottom:10px}.action-buttons{display:flex;gap:15px;flex-wrap:wrap}.practice-btn,.remind-btn{padding:12px 20px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.practice-btn{background:#4f46e5;color:#fff}.practice-btn:hover{background:#3730a3;transform:translateY(-1px)}.remind-btn{background:#e5e7eb;color:#4b5563}.remind-btn:hover{background:#d1d5db}.empty-state{text-align:center;padding:60px 20px;color:#718096}.empty-icon{font-size:4rem;margin-bottom:20px;opacity:.5}.stats-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:40px}.stat-card{background:#f7fafc;padding:30px;border-radius:16px;text-align:center;border:2px solid #e2e8f0}.stat-card h3{font-weight:600;color:#4a5568;margin-bottom:15px}.stat-number{font-size:2.5rem;font-weight:700;color:#4f46e5}@media (max-width: 768px){.container{padding:20px}.tips-header h1{font-size:2rem}.controls-section{flex-direction:column}.search-box{min-width:100%}.tips-grid,.category-selector{grid-template-columns:1fr}.action-buttons{flex-direction:column}}@media (max-width: 480px){.tip-header{flex-direction:column;text-align:center}.tip-actions{align-self:center}.stat-card{padding:20px}.stat-number{font-size:2rem}}.about-container{min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.about-hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4rem 2rem;display:flex;justify-content:center;align-items:center;min-height:60vh;position:relative;overflow:hidden}.about-hero:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.05)"/></svg>');background-size:100% 100%}.hero-content{display:flex;align-items:center;justify-content:center;gap:4rem;max-width:1200px;width:100%;z-index:1}.profile-image-container{position:relative;width:300px;height:300px}.profile-image{width:250px;height:250px;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 15px 35px #0003;animation:float 6s ease-in-out infinite}.image-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#5a67d8,#4c51bf);display:flex;justify-content:center;align-items:center;font-size:4rem;font-weight:700;color:#fff}.image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#667eea99,#764ba299);border-radius:50%}.decoration-circle{position:absolute;border-radius:50%;background:#ffffff1a;animation:pulse 3s infinite}.circle-1{width:80px;height:80px;top:0;right:0;animation-delay:.5s}.circle-2{width:60px;height:60px;bottom:20px;left:0;animation-delay:1s}.circle-3{width:40px;height:40px;top:50%;right:30px;animation-delay:1.5s}.hero-text h1{font-size:3.5rem;margin:0 0 .5rem;font-weight:700}.hero-text h2{font-size:1.8rem;margin:0 0 1.5rem;font-weight:400;opacity:.9}.hero-text p{font-size:1.2rem;margin-bottom:2rem;max-width:500px;line-height:1.6}.hero-buttons{display:flex;gap:1rem}.btn{padding:1rem 2rem;border-radius:50px;font-weight:600;text-decoration:none;transition:all .3s ease;display:inline-block;border:none;cursor:pointer;font-size:1rem}.btn-primary{background:#fff;color:#667eea;box-shadow:0 4px 15px #0003}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.btn-secondary{background:transparent;color:#fff;border:2px solid white}.btn-secondary:hover{background:#fff;color:#667eea;transform:translateY(-3px)}.about-content{max-width:1200px;margin:0 auto;padding:4rem 2rem}.section-title{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#2d3748;position:relative}.section-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:80px;height:4px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px}.about-grid{display:grid;grid-template-columns:2fr 1fr;gap:3rem;margin-bottom:4rem}.about-text p{font-size:1.1rem;line-height:1.8;margin-bottom:1.5rem;color:#4a5568}.about-details{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 10px 25px #0000000d}.detail-item{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #e2e8f0}.detail-item:last-child{border-bottom:none}.detail-label{font-weight:600;color:#2d3748}.detail-value{color:#4a5568}.skills-section{margin-bottom:4rem}.tabs{display:flex;justify-content:center;margin-bottom:2rem;border-bottom:1px solid #e2e8f0}.tab{padding:1rem 2rem;background:none;border:none;font-size:1.1rem;font-weight:600;color:#718096;cursor:pointer;transition:all .3s ease;position:relative}.tab:hover,.tab.active{color:#667eea}.tab.active:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:3px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:3px 3px 0 0}.tab-content{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 10px 25px #0000000d}.skill-category{margin-bottom:2.5rem}.skill-category h3{font-size:1.5rem;margin-bottom:1.5rem;color:#2d3748;padding-bottom:.5rem;border-bottom:2px solid #e2e8f0}.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.skill-item{margin-bottom:1rem}.skill-header{display:flex;justify-content:space-between;margin-bottom:.5rem}.skill-name{font-weight:600;color:#2d3748}.skill-percentage{color:#667eea;font-weight:600}.skill-bar{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}.skill-progress{height:100%;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px;transition:width 1.5s ease-in-out;animation:fillBar 1.5s ease-in-out}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}.project-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 5px 15px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.project-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px #00000026}.project-image{height:200px;background:linear-gradient(135deg,#667eea,#764ba2);position:relative;overflow:hidden}.project-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.project-card:hover .project-overlay{opacity:1}.project-link{color:#fff;text-decoration:none;font-weight:600;padding:.5rem 1.5rem;border:2px solid white;border-radius:50px;transition:all .3s ease}.project-link:hover{background:#fff;color:#667eea}.project-info{padding:1.5rem}.project-info h3{margin:0 0 1rem;color:#2d3748}.project-info p{color:#718096;margin-bottom:1.5rem;line-height:1.6}.project-technologies{display:flex;flex-wrap:wrap;gap:.5rem}.tech-tag{background:#e9d8fd;color:#6b46c1;padding:.3rem .8rem;border-radius:50px;font-size:.8rem;font-weight:600}.timeline{position:relative;max-width:800px;margin:0 auto}.timeline:before{content:"";position:absolute;left:30px;top:0;height:100%;width:2px;background:#e2e8f0}.timeline-item{position:relative;margin-bottom:2rem;padding-left:80px}.timeline-marker{position:absolute;left:22px;top:0;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:4px solid white;box-shadow:0 0 0 3px #667eea}.timeline-content h3{margin:0 0 .5rem;color:#2d3748}.timeline-content h4{margin:0 0 1rem;color:#667eea;font-weight:600}.timeline-content p{color:#718096;line-height:1.6}.certifications-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.certification-card{display:flex;align-items:center;background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 5px 15px #00000014;transition:transform .3s ease}.certification-card:hover{transform:translateY(-3px)}.certification-icon{font-size:2rem;color:#667eea;margin-right:1.5rem}.certification-info h3{margin:0 0 .5rem;color:#2d3748}.certification-info p{margin:0;color:#718096}.contact-section{background:#fff;padding:3rem;border-radius:12px;box-shadow:0 10px 25px #0000000d}.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.contact-info{display:flex;flex-direction:column;gap:1.5rem}.contact-item{display:flex;align-items:center;gap:1rem}.contact-icon{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;align-items:center;color:#fff;font-size:1.2rem}.contact-details h3{margin:0 0 .3rem;color:#2d3748}.contact-details p{margin:0;color:#718096}.contact-form .form-group{margin-bottom:1.5rem}.contact-form input,.contact-form textarea{width:100%;padding:1rem;border:1px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:border-color .3s ease}.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.contact-form textarea{resize:vertical;min-height:120px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes pulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.1);opacity:.9}}@keyframes fillBar{0%{width:0%}}.fade-in{animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 968px){.hero-content{flex-direction:column;text-align:center;gap:2rem}.about-grid,.contact-content{grid-template-columns:1fr}}@media (max-width: 768px){.hero-text h1{font-size:2.5rem}.hero-text h2{font-size:1.5rem}.tabs{flex-wrap:wrap}.tab{padding:.8rem 1.2rem;font-size:1rem}.skills-grid,.projects-grid,.certifications-grid{grid-template-columns:1fr}}@media (max-width: 480px){.about-hero{padding:2rem 1rem}.profile-image-container{width:200px;height:200px}.profile-image{width:180px;height:180px}.hero-buttons{flex-direction:column;align-items:center}.btn{width:100%;text-align:center}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;color:#333}.App{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding-top:80px}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-secondary{background:#f8f9fa;color:#495057;border:1px solid #dee2e6}.btn-secondary:hover{background:#e9ecef;transform:translateY(-2px)}.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover{background:#c82333;transform:translateY(-2px)}.card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 15px #0000000d;margin-bottom:1.5rem}.form-group{margin-bottom:1.5rem}.form-label{display:block;margin-bottom:.5rem;font-weight:600;color:#495057}.form-input,.form-select,.form-textarea{width:100%;padding:12px 16px;border:1px solid #ced4da;border-radius:8px;font-size:1rem;transition:border-color .3s ease,box-shadow .3s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.fade-in{animation:fadeIn .6s ease-in-out}.slide-up{animation:slideUp .6s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.main-content{padding-top:70px}.btn{padding:10px 20px;font-size:.9rem}.card{padding:1.25rem;margin-bottom:1rem}}.loading-spinner{border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:2rem auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}