.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.login-box{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;padding:40px;width:100%;max-width:450px;animation:slideUp .4s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-header{text-align:center;margin-bottom:30px}.login-icon{font-size:60px;margin-bottom:10px}.login-header h1{font-size:28px;color:var(--color-text);margin-bottom:5px}.login-header p{color:var(--color-text-secondary);font-size:14px}.login-tabs{display:flex;gap:10px;margin-bottom:30px;background:var(--color-background);border-radius:var(--radius-lg);padding:5px}.login-tabs button{flex:1;padding:12px;background:transparent;color:var(--color-text-secondary);font-weight:600;border-radius:var(--radius-md);transition:all .3s ease}.login-tabs button.active{background:#fff;color:var(--color-primary);box-shadow:var(--shadow-sm)}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--color-text);font-size:14px}.form-group input{width:100%;padding:14px;border:2px solid #e0e0e0;border-radius:var(--radius-md);font-size:15px;transition:all .2s ease}.form-group input:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px #2196f31a}.error-message{background:#ffebee;color:var(--color-danger);padding:12px;border-radius:var(--radius-md);margin-bottom:20px;font-size:14px;border-left:4px solid var(--color-danger)}.submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #667eea66}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.login-footer{margin-top:30px;text-align:center}.login-footer p{color:var(--color-text-secondary);font-size:13px}.quiz-view{max-width:900px;margin:0 auto}.quiz-header{display:flex;align-items:center;gap:20px;margin-bottom:30px;padding:20px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.back-btn{padding:10px 20px;background:var(--color-background);color:var(--color-text);font-weight:600;border-radius:var(--radius-md)}.back-btn:hover{background:var(--color-text-secondary);color:#fff}.quiz-header h2{flex:1;font-size:22px;color:var(--color-text)}.quiz-stats{font-size:14px;color:var(--color-text-secondary);font-weight:500}.quiz-content{padding:30px}.question-card{background:#fff;padding:40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.question-number{color:var(--color-primary);font-weight:600;margin-bottom:10px}.question-text{font-size:22px;color:var(--color-text);margin-bottom:30px;line-height:1.5}.answer-btn{padding:18px 24px;background:var(--color-background);color:var(--color-text);font-size:16px;text-align:left;border-radius:var(--radius-md);border:2px solid transparent;transition:all .2s ease;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;line-height:1.5;min-height:56px;display:flex;align-items:center}.answer-btn:hover:not(:disabled){background:#e8e8e8;border-color:var(--color-primary);transform:translate(5px)}.answer-btn.correct{background:#e8f5e9;border-color:var(--color-success);color:var(--color-success);font-weight:600}.answer-btn.incorrect{background:#ffebee;border-color:var(--color-danger);color:var(--color-danger);font-weight:600}.answer-btn.disabled{opacity:.5}.feedback{padding:20px;border-radius:var(--radius-md);font-weight:600;margin-top:20px}.feedback.correct{background:#e8f5e9;color:var(--color-success)}.feedback.incorrect{background:#ffebee;color:var(--color-danger)}.explanation{margin-top:10px;font-weight:400;color:var(--color-text)}.gap-text-container,.free-text-container{margin-top:20px}.gap-text{font-size:18px;line-height:2.5;margin-bottom:20px;color:var(--color-text)}.gap-input{border:none;border-bottom:2px solid var(--color-border);background:transparent;padding:5px 10px;font-size:18px;color:var(--color-text);min-width:120px;margin:0 5px}.gap-input:focus{outline:none;border-bottom-color:var(--color-primary)}.gap-input.correct{border-bottom-color:var(--color-success);color:var(--color-success)}.gap-input.incorrect{border-bottom-color:var(--color-danger);color:var(--color-danger)}.free-text-input{width:100%;padding:15px;font-size:16px;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text);margin-bottom:15px}.free-text-input:focus{outline:none;border-color:var(--color-primary)}.free-text-input.correct{border-color:var(--color-success);background:#e8f5e9}.free-text-input.incorrect{border-color:var(--color-danger);background:#ffebee}.submit-btn{padding:12px 30px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.submit-btn:hover:not(:disabled){background:#5a67d8;transform:translateY(-2px);box-shadow:var(--shadow-md)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.correct-answers{margin-top:15px;padding:12px;background:#e8f5e9;border-left:4px solid var(--color-success);border-radius:var(--radius-sm);color:#2e7d32;font-weight:500}.table-container{margin-top:20px}.question-table{width:100%;border-collapse:collapse;margin-bottom:20px}.question-table th,.question-table td{padding:12px;text-align:left;border:1px solid var(--color-border)}.question-table th{background:var(--color-background);font-weight:600;color:var(--color-text)}.question-table td{color:var(--color-text-secondary)}.table-cell-input{width:100%;padding:8px;border:2px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-background);color:var(--color-text);font-size:14px;font-family:inherit}.table-cell-input:focus{outline:none;border-color:var(--color-primary)}.table-cell-input.correct{border-color:var(--color-success);background:#e8f5e9}.table-cell-input.incorrect{border-color:var(--color-danger);background:#ffebee}.table-cell-input:disabled{cursor:not-allowed;opacity:.7}.ip-calc-container{margin-top:20px}.ip-calc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px}.ip-field{display:flex;flex-direction:column;gap:8px}.ip-field label{font-weight:600;color:var(--color-text);font-size:14px}.ip-field input{padding:12px;font-size:15px;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text);font-family:Courier New,monospace}.ip-field input:focus{outline:none;border-color:var(--color-primary)}.ip-field input.correct{border-color:var(--color-success);background:#e8f5e9}.ip-field input.incorrect{border-color:var(--color-danger);background:#ffebee}.ip-field input:disabled{cursor:not-allowed;opacity:.7}.ip-answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;font-family:Courier New,monospace;font-size:14px}.code-editor-container{margin-top:20px}.code-editor-input{width:100%;padding:15px;font-size:14px;font-family:Courier New,Monaco,monospace;border:2px solid var(--color-border);border-radius:var(--radius-md);background:#1e1e1e;color:#d4d4d4;margin-bottom:15px;resize:vertical;line-height:1.6;-moz-tab-size:2;tab-size:2}.code-editor-input:focus{outline:none;border-color:var(--color-primary);background:#252525}.code-editor-input.correct{border-color:var(--color-success);background:#e8f5e9;color:var(--color-text)}.code-editor-input.incorrect{border-color:var(--color-danger);background:#ffebee;color:var(--color-text)}.code-editor-input:disabled{cursor:not-allowed;opacity:.8}.code-answer{margin-top:10px;padding:15px;background:#1e1e1e;color:#d4d4d4;border-radius:var(--radius-sm);font-family:Courier New,Monaco,monospace;font-size:14px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.quiz-results{max-width:700px;margin:0 auto;padding:40px 20px}.results-header{text-align:center;margin-bottom:40px}.results-header h2{font-size:36px;color:var(--color-text);margin-bottom:10px}.results-header .theme-name{font-size:20px;color:var(--color-text-secondary)}.results-stats{display:flex;flex-direction:column;gap:30px;margin-bottom:40px}.result-card{background:#fff;padding:25px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;gap:10px}.result-card.main{padding:40px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.result-card.main .result-icon{font-size:64px}.result-card.main .result-value{font-size:72px;font-weight:700;color:#fff}.result-card.main .result-label{font-size:20px;color:#ffffffe6}.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.result-icon{font-size:48px}.result-value{font-size:48px;font-weight:700;color:var(--color-text)}.result-card.correct .result-value{color:var(--color-success)}.result-card.incorrect .result-value{color:var(--color-danger)}.result-label{font-size:16px;color:var(--color-text-secondary);font-weight:500}.restart-btn,.menu-btn{padding:15px 30px;font-size:16px;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;border:none}.restart-btn{background:var(--color-primary);color:#fff}.restart-btn:hover{background:#5a67d8;transform:translateY(-2px);box-shadow:var(--shadow-md)}.menu-btn{background:var(--color-background);color:var(--color-text)}.menu-btn:hover{background:#d0d0d0}@media (max-width: 768px){.results-grid{grid-template-columns:1fr}.results-actions{flex-direction:column}.restart-btn,.menu-btn{width:100%}}.next-question-buttons{display:flex;gap:15px;margin-top:25px;justify-content:center}.next-question-btn{padding:15px 35px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;font-weight:600;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #667eea4d}.next-question-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px #667eea66}.next-question-btn:active{transform:translateY(-1px)}.hold-next-btn{position:relative;padding:15px 30px;background:#f0f0f0;color:var(--color-text);font-size:14px;font-weight:600;border-radius:var(--radius-md);border:2px solid #d0d0d0;cursor:pointer;overflow:hidden;transition:all .2s ease;-webkit-user-select:none;user-select:none}.hold-next-btn:hover{border-color:var(--color-primary);background:#e8e8e8}.hold-next-btn.holding{border-color:var(--color-primary);background:#e0e7ff}.hold-progress{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#667eea4d,#764ba24d);transition:width .1s linear;z-index:0}.hold-text{position:relative;z-index:1;display:flex;align-items:center;gap:6px}@media (max-width: 768px){.next-question-buttons{flex-direction:column}.next-question-btn,.hold-next-btn{width:100%}}.resume-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.resume-dialog{background:#fff;border-radius:var(--radius-lg);padding:40px;max-width:550px;width:90%;box-shadow:0 20px 60px #0000004d;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}.resume-dialog h3{font-size:28px;color:var(--color-text);margin-bottom:10px;text-align:center}.resume-dialog p{text-align:center;color:var(--color-text-secondary);font-size:16px;margin-bottom:25px}.resume-stats{background:var(--color-background);border-radius:var(--radius-md);padding:20px;margin-bottom:25px}.resume-stat{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #e0e0e0}.resume-stat:last-child{border-bottom:none}.resume-stat .stat-label{font-weight:600;color:var(--color-text-secondary);font-size:14px}.resume-stat .stat-value{font-weight:700;color:var(--color-text);font-size:16px}.resume-options{display:flex;flex-direction:column;gap:12px}.resume-btn{padding:16px 24px;font-size:16px;font-weight:600;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all .2s ease;text-align:left}.resume-btn.continue{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.resume-btn.continue:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.resume-btn.wrong-only{background:#fff3e0;color:#f57c00;border-color:#f57c00}.resume-btn.wrong-only:hover{background:#ffe0b2;transform:translateY(-2px);box-shadow:0 4px 12px #f57c004d}.resume-btn.restart{background:#fff;color:var(--color-text);border-color:#d0d0d0}.resume-btn.restart:hover{background:var(--color-background);border-color:var(--color-primary)}@media (max-width: 768px){.resume-dialog{padding:30px 20px}.resume-dialog h3{font-size:24px}}.question-image-container{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;gap:8px}.question-image{max-width:100%;max-height:300px;border-radius:var(--radius-md);box-shadow:0 4px 12px #00000026;cursor:pointer;transition:all .3s ease;object-fit:contain}.question-image:hover{transform:scale(1.02);box-shadow:0 6px 20px #667eea4d}.image-zoom-hint{font-size:.85em;color:var(--color-text-muted);font-style:italic}.image-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease}.image-modal-content{position:relative;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:15px;animation:scaleIn .3s ease}.image-modal-large{max-width:100%;max-height:85vh;border-radius:var(--radius-md);box-shadow:0 10px 40px #00000080;object-fit:contain}.image-modal-close{position:absolute;top:-40px;right:0;background:#fff;border:none;width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 4px 12px #0000004d}.image-modal-close:hover{background:#f0f0f0;transform:scale(1.1)}.image-modal-hint{color:#fff;font-size:.9em;opacity:.8;text-align:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.home-view{max-width:1400px;margin:0 auto}.stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:40px}.stat-card{display:flex;align-items:center;gap:15px;background:#fff;padding:20px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-icon{font-size:36px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--color-background);border-radius:var(--radius-md)}.stat-info{flex:1}.stat-label{font-size:13px;color:var(--color-text-secondary);margin-bottom:4px}.stat-value{font-size:28px;font-weight:700;color:var(--color-text)}.section-title{font-size:24px;font-weight:600;color:var(--color-text);margin-bottom:20px}.themes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}.theme-card{display:flex;gap:20px;background:#fff;padding:25px;border-radius:var(--radius-lg);border-left:5px solid;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .3s ease}.theme-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.theme-icon{width:70px;height:70px;display:flex;align-items:center;justify-content:center;font-size:36px;border-radius:var(--radius-md);flex-shrink:0}.theme-content{flex:1}.theme-content h3{font-size:18px;font-weight:600;color:var(--color-text);margin-bottom:12px}.theme-progress{margin-bottom:10px}.progress-bar{height:8px;background:var(--color-background);border-radius:10px;overflow:hidden;margin-bottom:6px}.progress-fill{height:100%;transition:width .3s ease}.progress-text{font-size:13px;color:var(--color-text-secondary);font-weight:500}.theme-stats{display:flex;gap:8px;font-size:13px;color:var(--color-text-secondary)}.leaderboard-view{max-width:800px;margin:0 auto}.leaderboard-header{text-align:center;margin-bottom:30px}.leaderboard-header h2{font-size:32px;color:var(--color-text);margin-bottom:10px}.leaderboard-header p{color:var(--color-text-secondary)}.leaderboard-list{display:flex;flex-direction:column;gap:15px}.leaderboard-item{display:flex;align-items:center;gap:20px;background:#fff;padding:20px 25px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .2s ease}.leaderboard-item:hover{transform:translate(5px);box-shadow:var(--shadow-md)}.leaderboard-item:nth-child(1) .rank{background:linear-gradient(135deg,gold,orange);color:#fff;font-size:18px}.leaderboard-item:nth-child(2) .rank{background:linear-gradient(135deg,silver,gray);color:#fff}.leaderboard-item:nth-child(3) .rank{background:linear-gradient(135deg,#cd7f32,#8b4513);color:#fff}.rank{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--color-background);border-radius:50%;font-weight:700;font-size:16px;color:var(--color-text);flex-shrink:0}.player-info{flex:1}.player-name{font-size:18px;font-weight:600;color:var(--color-text);margin-bottom:4px}.player-stats{font-size:13px;color:var(--color-text-secondary)}.score{font-size:24px;font-weight:700;color:var(--color-primary)}.leaderboard-item.current-user{border:2px solid var(--color-primary);background:linear-gradient(135deg,#667eea0d,#764ba20d);box-shadow:0 0 0 4px #667eea1a}.badge{display:inline-block;margin-left:10px;padding:4px 12px;background:var(--color-primary);color:#fff;font-size:12px;font-weight:600;border-radius:12px}.statistics-view{max-width:1200px;margin:0 auto;padding:20px}.statistics-header{text-align:center;margin-bottom:40px}.statistics-header h2{font-size:32px;color:var(--color-text);margin-bottom:10px}.statistics-header p{color:var(--color-text-secondary);font-size:16px}.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:40px}.stat-card{background:#fff;padding:30px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:center;transition:transform .2s;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.stat-icon{font-size:48px;margin-bottom:15px}.stat-value{font-size:42px;font-weight:700;color:var(--color-primary);margin-bottom:10px;word-wrap:break-word;overflow-wrap:break-word}.stat-label{font-size:14px;color:var(--color-text-secondary);text-transform:uppercase;font-weight:600;letter-spacing:.5px;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;line-height:1.4;max-width:100%}.theme-stats,.type-stats{background:#fff;padding:30px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:30px}.theme-stats h3,.type-stats h3{font-size:24px;color:var(--color-text);margin-bottom:25px;border-bottom:2px solid var(--color-primary);padding-bottom:10px}.theme-list{display:flex;flex-direction:column;gap:20px}.theme-stat-item{background:var(--color-background);padding:20px;border-radius:var(--radius-md);border:2px solid transparent;transition:all .2s}.theme-stat-item:hover{border-color:var(--color-primary);transform:translate(5px)}.theme-stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.theme-name{font-size:18px;font-weight:600;color:var(--color-text);text-transform:capitalize;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;line-height:1.4}.theme-points{font-size:16px;font-weight:600;color:var(--color-primary)}.theme-stat-details{display:flex;gap:20px;margin-bottom:15px;flex-wrap:wrap}.detail-item{display:flex;gap:8px;align-items:center}.detail-label{font-size:14px;color:var(--color-text-secondary)}.detail-value{font-size:14px;font-weight:600;color:var(--color-text)}.progress-bar{width:100%;height:8px;background:#e0e0e0;border-radius:10px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),#764ba2);border-radius:10px;transition:width .5s ease}.type-list{display:flex;flex-direction:column;gap:12px}.type-stat-item{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:var(--color-background);border-radius:var(--radius-md);transition:all .2s}.type-stat-item:hover{background:#e8e8e8;transform:translate(5px)}.type-name{font-size:16px;font-weight:600;color:var(--color-text);flex:1}.type-value{font-size:15px;color:var(--color-text-secondary);margin-right:20px}.type-accuracy{font-size:18px;font-weight:700;color:var(--color-primary);min-width:60px;text-align:right}.loading{text-align:center;padding:60px;font-size:18px;color:var(--color-text-secondary)}.theme-stat-item.clickable{cursor:pointer;position:relative;overflow:hidden}.theme-stat-item.clickable:hover{border-color:var(--color-primary);transform:translate(5px);box-shadow:0 4px 12px #667eea33}.click-hint{font-size:12px;color:var(--color-primary);margin-top:10px;font-weight:600;opacity:0;transition:opacity .2s}.theme-stat-item.clickable:hover .click-hint{opacity:1}.theme-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:40px}.best-themes,.worst-themes{background:#fff;padding:25px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.best-themes h3,.worst-themes h3{font-size:20px;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--color-primary)}.highlight-list{display:flex;flex-direction:column;gap:12px}.highlight-item{display:flex;justify-content:space-between;align-items:center;padding:15px;border-radius:var(--radius-md);transition:all .2s}.highlight-item.best{background:linear-gradient(135deg,#d4edda,#c3e6cb);border-left:4px solid #28a745}.highlight-item.best:hover{transform:translate(5px);box-shadow:0 4px 12px #28a74533}.highlight-item.worst{background:linear-gradient(135deg,#f8d7da,#f5c6cb);border-left:4px solid #dc3545}.highlight-item.worst:hover{transform:translate(5px);box-shadow:0 4px 12px #dc354533}.highlight-item .theme-name{font-size:16px;font-weight:600}.highlight-item .theme-accuracy{font-size:18px;font-weight:700;color:var(--color-text)}.theme-detail-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:fadeIn .2s ease}.theme-detail-modal{background:#fff;border-radius:var(--radius-lg);max-width:800px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:25px 30px;border-bottom:2px solid var(--color-primary);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.modal-header h3{font-size:24px;margin:0;text-transform:capitalize}.modal-close{background:#fff3;border:none;color:#fff;font-size:28px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;line-height:1}.modal-close:hover{background:#ffffff4d;transform:rotate(90deg)}.modal-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;padding:25px 30px;background:var(--color-background);border-bottom:1px solid #e0e0e0}.modal-stat{display:flex;flex-direction:column;gap:5px}.modal-stat .stat-label{font-size:13px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.modal-stat .stat-value{font-size:24px;font-weight:700;color:var(--color-primary)}.question-history{padding:25px 30px}.question-history h4{font-size:18px;color:var(--color-text);margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #e0e0e0}.history-list{display:flex;flex-direction:column;gap:15px;max-height:500px;overflow-y:auto;padding-right:10px}.history-item{background:var(--color-background);border-radius:var(--radius-md);padding:20px;border-left:4px solid transparent;transition:all .2s}.history-item.correct{border-left-color:#28a745;background:linear-gradient(135deg,#f1f9f3,#e8f5e9)}.history-item.incorrect{border-left-color:#dc3545;background:linear-gradient(135deg,#fef5f5,#fee)}.history-item:hover{transform:translate(5px);box-shadow:0 4px 12px #0000001a}.history-header{display:flex;gap:15px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.history-icon{font-size:20px}.history-type{font-size:13px;font-weight:600;color:var(--color-primary);background:#fff;padding:4px 10px;border-radius:12px;text-transform:capitalize}.history-date{font-size:12px;color:var(--color-text-secondary);margin-left:auto}.history-question{font-size:15px;color:var(--color-text);margin-bottom:12px;font-weight:500;line-height:1.5}.history-answer{font-size:14px;color:var(--color-text);padding:10px;background:#fff;border-radius:var(--radius-sm);margin-bottom:8px;border:1px solid #e0e0e0}.history-correct-answer{font-size:14px;color:var(--color-text);padding:10px;background:#d4edda;border-radius:var(--radius-sm);margin-bottom:8px;border:1px solid #c3e6cb}.history-points{font-size:13px;font-weight:600;color:var(--color-primary);text-align:right}.no-history{text-align:center;padding:40px;color:var(--color-text-secondary);font-size:15px}.friends-view{max-width:900px;margin:0 auto}.friends-header{margin-bottom:30px}.friends-header h2{font-size:32px;color:var(--color-text)}.add-friend-section,.requests-section,.friends-section{background:#fff;padding:25px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:20px}.add-friend-section h3,.requests-section h3,.friends-section h3{font-size:18px;color:var(--color-text);margin-bottom:15px}.add-friend-form{display:flex;gap:10px}.add-friend-form input{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:var(--radius-md);font-size:15px}.add-friend-form button{padding:12px 24px;background:var(--color-primary);color:#fff;font-weight:600;border-radius:var(--radius-md)}.add-friend-form button:hover{background:var(--color-secondary)}.message{margin-top:15px;padding:12px;border-radius:var(--radius-md);font-size:14px}.message.success{background:#e8f5e9;color:var(--color-success)}.message.error{background:#ffebee;color:var(--color-danger)}.requests-list,.friends-list{display:flex;flex-direction:column;gap:10px}.request-item,.friend-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:var(--color-background);border-radius:var(--radius-md)}.request-username{font-weight:600;color:var(--color-text)}.request-actions{display:flex;gap:10px}.accept-btn,.reject-btn{padding:8px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:600}.accept-btn{background:var(--color-success);color:#fff}.reject-btn{background:var(--color-danger);color:#fff}.friend-info{flex:1}.friend-name{font-weight:600;color:var(--color-text);margin-bottom:4px}.friend-stats{font-size:13px;color:var(--color-text-secondary)}.empty-state{text-align:center;padding:40px;color:var(--color-text-secondary)}.duel-game-view{max-width:900px;margin:0 auto;padding:20px}.duel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.duel-info{display:flex;flex-direction:column;gap:8px}.round-indicator{font-size:24px;font-weight:700;color:var(--color-primary)}.theme-name{font-size:16px;color:var(--color-text-secondary);text-transform:capitalize}.timer{position:relative}.timer-circle{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.timer-value{font-size:32px;font-weight:700;color:var(--color-text);position:absolute;background:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center}.scores-bar{display:flex;justify-content:space-around;align-items:center;margin-bottom:30px;padding:25px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.player-score{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1}.player-score.mine{color:var(--color-primary)}.player-score.opponent{color:#764ba2}.player-name{font-size:16px;font-weight:600;opacity:.8}.score{font-size:42px;font-weight:700}.vs{font-size:24px;font-weight:700;color:var(--color-text-secondary);padding:0 30px}.question-container{background:#fff;padding:40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.question-text{font-size:24px;color:var(--color-text);margin-bottom:30px;line-height:1.5;text-align:center}.answers-grid{display:grid;gap:15px;margin-bottom:20px}.duel-answer-btn{padding:20px 24px;background:var(--color-background);color:var(--color-text);font-size:18px;text-align:left;border-radius:var(--radius-md);border:3px solid transparent;transition:all .2s ease;cursor:pointer}.duel-answer-btn:hover:not(:disabled){background:#e8e8e8;border-color:var(--color-primary);transform:translate(5px)}.duel-answer-btn.correct{background:#e8f5e9;border-color:var(--color-success);color:var(--color-success);font-weight:600}.duel-answer-btn.incorrect{background:#ffebee;border-color:var(--color-danger);color:var(--color-danger);font-weight:600}.duel-answer-btn.disabled{opacity:.5;cursor:not-allowed}.answer-feedback{padding:20px;border-radius:var(--radius-md);font-weight:600;margin-top:20px;display:flex;justify-content:space-between;align-items:center}.answer-feedback.correct{background:#e8f5e9;color:var(--color-success)}.answer-feedback.incorrect{background:#ffebee;color:var(--color-danger)}.answer-time{font-size:14px;font-weight:500;opacity:.8}.waiting-screen{text-align:center;padding:100px 40px}.waiting-spinner{font-size:64px;animation:spin 2s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.waiting-screen h3{font-size:28px;color:var(--color-text);margin-bottom:10px}.waiting-screen p{color:var(--color-text-secondary);font-size:16px}.results-screen{background:#fff;padding:40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.results-header h2{font-size:36px;text-align:center;margin-bottom:40px;color:var(--color-text)}.final-scores{display:flex;justify-content:space-around;align-items:center;margin-bottom:50px;padding:30px;background:var(--color-background);border-radius:var(--radius-lg)}.final-score{display:flex;flex-direction:column;align-items:center;gap:15px}.final-score.mine .score-value{color:var(--color-primary)}.final-score.opponent .score-value{color:#764ba2}.score-label{font-size:18px;font-weight:600;color:var(--color-text-secondary)}.score-value{font-size:56px;font-weight:700}.rounds-summary{margin-bottom:40px}.rounds-summary h3{font-size:24px;color:var(--color-text);margin-bottom:20px;border-bottom:2px solid var(--color-primary);padding-bottom:10px}.rounds-list{display:flex;flex-direction:column;gap:15px}.round-summary{padding:15px 20px;background:var(--color-background);border-radius:var(--radius-md)}.round-number{font-size:14px;font-weight:600;color:var(--color-text-secondary);margin-bottom:10px}.round-result{display:flex;justify-content:space-between;gap:20px}.player-result{flex:1;padding:10px 15px;border-radius:var(--radius-sm);font-size:14px;font-weight:500}.player-result.correct{background:#e8f5e9;color:var(--color-success)}.player-result.incorrect{background:#ffebee;color:var(--color-danger)}.results-actions{display:flex;gap:15px;justify-content:center}.rematch-btn,.exit-btn{padding:15px 40px;font-size:18px;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.rematch-btn{background:var(--color-primary);color:#fff}.rematch-btn:hover{background:#5a67d8;transform:translateY(-2px);box-shadow:var(--shadow-md)}.exit-btn{background:var(--color-background);color:var(--color-text)}.exit-btn:hover{background:#d0d0d0}.loading{text-align:center;padding:100px;font-size:24px;color:var(--color-text-secondary)}.quizduell-view{max-width:900px;margin:0 auto}.quizduell-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.quizduell-header h2{font-size:32px;color:var(--color-text)}.create-btn{padding:12px 24px;background:var(--color-success);color:#fff;font-weight:600;border-radius:var(--radius-md);font-size:15px}.create-btn:hover{background:#45a049}.create-dialog{background:#fff;padding:25px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:30px}.create-dialog h3{font-size:20px;color:var(--color-text);margin-bottom:10px}.create-dialog p{color:var(--color-text-secondary);margin-bottom:15px}.friends-select{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.friend-select-btn{padding:15px;background:var(--color-background);color:var(--color-text);font-weight:600;border-radius:var(--radius-md);transition:all .2s ease}.friend-select-btn:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px)}.no-friends{color:var(--color-text-secondary);text-align:center;padding:30px}.duels-list{background:#fff;padding:25px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.duels-list h3{font-size:18px;color:var(--color-text);margin-bottom:20px}.duel-item{display:flex;justify-content:space-between;align-items:center;padding:20px;background:var(--color-background);border-radius:var(--radius-md);margin-bottom:15px;cursor:pointer;transition:all .2s ease}.duel-item:hover{transform:translate(5px);box-shadow:var(--shadow-sm)}.duel-players{font-weight:600;color:var(--color-text);margin-bottom:5px}.duel-theme{font-size:13px;color:var(--color-text-secondary)}.duel-actions{display:flex;align-items:center;gap:15px}.duel-status{font-size:14px;color:var(--color-text-secondary);font-weight:500}.play-duel-btn{padding:10px 20px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all .2s}.play-duel-btn:hover{background:#5a67d8;transform:translateY(-2px)}.themes-select{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;margin-top:20px}.theme-select-btn{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;background:#fff;border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.theme-select-btn:hover{border-color:var(--color-primary);transform:translateY(-3px);box-shadow:var(--shadow-md)}.theme-icon{font-size:32px}.theme-label{font-size:14px;font-weight:600;color:var(--color-text)}.back-btn-small{padding:8px 16px;background:var(--color-background);color:var(--color-text);border:none;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;margin-bottom:15px;transition:all .2s}.back-btn-small:hover{background:#d0d0d0}.empty-state{text-align:center;padding:60px;color:var(--color-text-secondary)}.empty-state p{margin-bottom:10px}.main-view{display:flex;flex-direction:column;height:100vh;background:var(--color-background)}.header{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:var(--color-primary);color:#fff;box-shadow:var(--shadow-md);z-index:100}.header-left{display:flex;align-items:center;gap:15px}.logo{font-size:32px}.header h1{font-size:24px;font-weight:600}.header-right{display:flex;align-items:center;gap:20px}.user-status{background:#fff3;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500}.navbar{display:flex;gap:10px;padding:15px 30px;background:var(--color-primary);border-bottom:2px solid rgba(255,255,255,.1)}.navbar button{padding:12px 24px;background:#ffffff26;color:#fff;font-size:15px;font-weight:600;border-radius:var(--radius-md);transition:all .2s ease}.navbar button:hover{background:#ffffff40;transform:translateY(-2px)}.navbar button.active{background:#fff;color:var(--color-primary)}.navbar .logout-btn{margin-left:auto;background:#f443364d}.navbar .logout-btn:hover{background:var(--color-danger)}.content{flex:1;overflow-y:auto;padding:30px}*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #2196F3;--color-secondary: #1976D2;--color-success: #4CAF50;--color-warning: #FF9800;--color-danger: #F44336;--color-background: #F5F6FA;--color-surface: #FFFFFF;--color-text: #2C3E50;--color-text-secondary: #7F8C8D;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .2);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-background);color:var(--color-text);overflow:hidden}#root{width:100vw;height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-background)}::-webkit-scrollbar-thumb{background:var(--color-text-secondary);border-radius:var(--radius-lg)}::-webkit-scrollbar-thumb:hover{background:var(--color-text)}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all .2s ease}button:disabled{opacity:.5;cursor:not-allowed}input,textarea{font-family:inherit;border:1px solid #ddd;border-radius:var(--radius-md);padding:12px;font-size:14px;transition:all .2s ease}input:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2196f31a}*{word-wrap:break-word;overflow-wrap:break-word}button,.button,.btn,label,span,div,p,h1,h2,h3,h4,h5,h6{word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}