.metal-selector{background-color:var(--bg-secondary);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.metal-selector h3{text-align:center;margin-bottom:var(--spacing-sm);color:var(--primary-color)}.hint{text-align:center;color:var(--text-secondary);font-size:var(--font-sm);margin-bottom:var(--spacing-lg);font-style:italic}.selector-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);margin-bottom:var(--spacing-lg)}.selector-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.selector-group label{font-weight:600;color:var(--primary-color)}.selector-group select{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-md);border:2px solid var(--text-light);border-radius:var(--radius-md);background-color:var(--bg-tertiary);cursor:pointer;transition:border-color var(--transition-fast)}.selector-group select:hover{border-color:var(--accent-color)}.selector-group select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #3498db1a}.metal-info{background-color:var(--bg-tertiary);padding:var(--spacing-md);border-radius:var(--radius-md);border-left:4px solid var(--accent-color);margin-top:var(--spacing-sm)}.metal-info strong{display:block;font-size:var(--font-lg);color:var(--primary-color);margin-bottom:var(--spacing-xs)}.metal-info p{margin:var(--spacing-xs) 0;font-size:var(--font-sm);color:var(--text-primary)}.metal-info .description{color:var(--text-secondary);font-style:italic;margin-top:var(--spacing-sm);border-top:1px solid var(--text-light);padding-top:var(--spacing-sm)}.selection-summary{background:linear-gradient(135deg,var(--accent-color),var(--accent-dark));color:var(--text-inverse);padding:var(--spacing-lg);border-radius:var(--radius-md);text-align:center;box-shadow:var(--shadow-md)}.selection-summary h4{margin-bottom:var(--spacing-sm);font-size:var(--font-lg)}.selection-summary p{margin:var(--spacing-xs) 0;color:var(--text-inverse)}.voltage-preview{font-size:var(--font-xl);margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid rgba(255,255,255,.3)}.voltage-preview strong{font-size:var(--font-2xl);text-shadow:0 2px 4px rgba(0,0,0,.2)}@media (max-width: 768px){.selector-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}}.galvanic-cell-container{background-color:var(--bg-secondary);padding:var(--spacing-md);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);margin:var(--spacing-lg) 0}.cell-layout{display:grid;grid-template-columns:140px 1fr 140px;gap:var(--spacing-sm);align-items:center;margin-bottom:var(--spacing-md)}.cell-layout-simple{display:flex;justify-content:center;align-items:center;margin-bottom:var(--spacing-md)}.cell-info{background-color:var(--bg-tertiary);padding:var(--spacing-md);border-radius:var(--radius-md);text-align:center;height:100%;display:flex;flex-direction:column;justify-content:center}.cell-info-left{border-left:4px solid var(--error-color)}.cell-info-right{border-left:4px solid var(--success-color)}.cell-info h4{color:var(--primary-color);margin-bottom:var(--spacing-xs);font-size:var(--font-md)}.cell-info h5{color:var(--text-secondary);margin-bottom:var(--spacing-sm);font-size:var(--font-xs);font-weight:400;font-style:italic}.cell-info .metal-name{font-size:var(--font-sm);color:var(--text-primary);margin:var(--spacing-xs) 0;font-weight:600}.cell-info .metal-symbol{font-size:var(--font-xl);color:var(--primary-color);margin:var(--spacing-xs) 0;font-weight:700}.cell-info .potential{font-size:var(--font-sm);color:var(--text-secondary);margin:var(--spacing-xs) 0}.cell-controls{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:2px solid var(--text-light);text-align:center}.voltage-display{font-size:var(--font-xl);color:var(--text-primary);margin:0}.voltage-display strong{color:var(--accent-color);font-size:var(--font-2xl);margin-left:var(--spacing-sm)}.particle-legend{margin-top:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--bg-tertiary);border-radius:var(--radius-sm);border-left:2px solid var(--accent-color)}.particle-legend h4{margin-bottom:var(--spacing-xs);color:var(--primary-color);font-size:11px;font-weight:600}.legend-items{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-xs)}.legend-item{display:flex;align-items:center;gap:4px;padding:2px 4px;background-color:var(--bg-secondary);border-radius:3px}.legend-item svg{flex-shrink:0;width:16px;height:16px}.legend-item span{font-size:10px;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 768px){.cell-layout{grid-template-columns:1fr;gap:var(--spacing-sm)}.cell-info{height:auto}.galvanic-cell-container canvas{max-width:100%;height:auto}}.electrode-magnifier{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:12px;padding:20px;box-shadow:0 4px 6px #0000001a;margin:20px auto;max-width:450px}.magnifier-header{display:flex;justify-content:center;align-items:center;margin-bottom:15px}.magnifier-header h3{margin:0;color:#2c3e50;font-size:1.2rem;-webkit-user-select:none;user-select:none}.magnifier-controls-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;gap:10px}.view-selector{display:flex;gap:10px}.view-selector button{padding:8px 16px;border:2px solid #3498db;background:#fff;color:#3498db;border-radius:8px;cursor:pointer;font-weight:700;transition:all .3s ease}.view-selector button:hover{background:#e3f2fd;transform:translateY(-2px)}.view-selector button.active{background:#3498db;color:#fff}.view-selector button:disabled{opacity:.4;cursor:not-allowed}.stromfluss-toggle{padding:8px 16px;border:2px solid #27ae60;background:#fff;color:#27ae60;border-radius:8px;cursor:pointer;font-weight:700;transition:all .3s ease}.stromfluss-toggle:hover{background:#e8f8f5;transform:translateY(-2px)}.stromfluss-toggle.active{background:#27ae60;color:#fff}.magnifier-title{text-align:center;margin-bottom:15px}.magnifier-title p{margin:0;font-size:1rem;color:#2c3e50;font-weight:700;background:#ffffffb3;padding:8px 12px;border-radius:8px;display:inline-block}.magnifier-controls{display:flex;justify-content:center;gap:15px;margin-top:15px;flex-wrap:wrap}.magnifier-controls button{padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:700;transition:all .3s ease}.magnifier-controls .btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.magnifier-controls .btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #667eea66}.magnifier-controls .btn-primary:disabled{opacity:.5;cursor:not-allowed}.magnifier-controls .btn-secondary{background:#95a5a6;color:#fff}.magnifier-controls .btn-secondary:hover{background:#7f8c8d;transform:translateY(-2px)}.magnifier-info{margin-top:15px;padding:12px;background:#fffc;border-left:4px solid #f39c12;border-radius:6px}.magnifier-info p{margin:0;font-size:.9rem;color:#2c3e50;line-height:1.5}@media (max-width: 600px){.electrode-magnifier{padding:15px}.magnifier-header{flex-direction:column;align-items:flex-start}.magnifier-header h3{font-size:1rem}.view-selector button{padding:6px 12px;font-size:.9rem}.magnifier-title p{font-size:.85rem}.magnifier-controls button{padding:8px 16px;font-size:.9rem}.magnifier-info p{font-size:.8rem}}.chemical-input-container{margin:15px 0}.chemical-input-label{display:block;font-weight:600;margin-bottom:8px;color:#333;font-size:.95em}.chemical-input-field-wrapper{display:flex;gap:8px;margin-bottom:10px}.chemical-input-field{flex:1;padding:12px;font-size:1.1em;border:2px solid #ddd;border-radius:8px;font-family:Courier New,monospace;transition:border-color .3s}.chemical-input-field:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.toggle-buttons-btn{padding:8px 12px;background:#f0f0f0;border:2px solid #ddd;border-radius:8px;cursor:pointer;font-size:1em;transition:all .2s;min-width:40px}.toggle-buttons-btn:hover{background:#e0e0e0;border-color:#ccc}.chemical-input-buttons{background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px}.button-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.button-group-label{font-size:.85em;color:#666;font-weight:600;min-width:80px;margin-right:8px}.chemical-btn{padding:8px 12px;background:#fff;border:2px solid #ddd;border-radius:6px;cursor:pointer;font-size:1em;font-family:Courier New,monospace;transition:all .2s;min-width:40px}.chemical-btn:hover{background:#667eea;color:#fff;border-color:#667eea;transform:translateY(-2px);box-shadow:0 2px 8px #667eea4d}.chemical-btn:active{transform:translateY(0)}.delete-btn{background:#fff3cd;border-color:#ffc107}.delete-btn:hover{background:#ffc107;border-color:#ffc107;color:#333}.clear-btn{background:#f8d7da;border-color:#dc3545}.clear-btn:hover{background:#dc3545;border-color:#dc3545;color:#fff}@media (max-width: 768px){.chemical-input-field{font-size:1em;padding:10px}.button-group-label{min-width:100%;margin-bottom:4px}.chemical-btn{padding:10px;font-size:.95em;min-width:50px;flex:1 1 calc(20% - 6px)}.button-group{gap:4px}}@media (max-width: 480px){.chemical-input-field{font-size:.95em}.chemical-btn{padding:8px;font-size:.9em;min-width:45px}.toggle-buttons-btn{min-width:35px;padding:6px 10px}}.basic-mode{max-width:1200px;margin:0 auto}.visualization-controls{background:linear-gradient(135deg,var(--accent-color),var(--accent-dark));padding:var(--spacing-md);border-radius:var(--radius-md);text-align:center;margin:var(--spacing-md) 0;box-shadow:var(--shadow-md)}.visualization-controls button{font-size:var(--font-lg);padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius-md);font-weight:700;transition:all var(--transition-normal);margin:0 var(--spacing-xs)}.visualization-controls button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-active{background-color:var(--success-color);color:#fff}.btn-active:hover{background-color:var(--success-light);transform:scale(1.05)}.btn-inactive{background-color:var(--bg-secondary);color:var(--primary-color);border:2px solid var(--primary-color)}.btn-inactive:hover{background-color:var(--primary-color);color:#fff;transform:scale(1.05)}.control-hint{color:#fff;margin-top:var(--spacing-sm);font-size:var(--font-sm);margin-bottom:0}.learning-section{background-color:var(--bg-secondary);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin:var(--spacing-xl) 0}.learning-section h3{text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-lg)}.explanation-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl)}.explanation-box{background-color:var(--bg-tertiary);padding:var(--spacing-lg);border-radius:var(--radius-md);border-left:4px solid var(--accent-color)}.explanation-box h4{color:var(--primary-color);margin-bottom:var(--spacing-md)}.explanation-box ul{list-style:none;padding:0}.explanation-box li{margin-bottom:var(--spacing-sm);padding-left:var(--spacing-lg);position:relative;color:var(--text-primary);line-height:1.6}.explanation-box li:before{content:"→";position:absolute;left:0;color:var(--accent-color);font-weight:700}.task-section{background-color:var(--bg-secondary);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin:var(--spacing-xl) 0}.task-section h3{text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-lg)}.task-box{background-color:var(--bg-tertiary);padding:var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg)}.task-box:last-child{margin-bottom:0}.task-box h4{color:var(--primary-color);margin-bottom:var(--spacing-md)}.task-box p{color:var(--text-secondary);margin-bottom:var(--spacing-md)}.task-input{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.task-input:last-child{margin-bottom:0}.task-input label{font-weight:600;color:var(--text-primary)}.task-input input{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--text-light);border-radius:var(--radius-md);font-size:var(--font-md);transition:border-color var(--transition-normal)}.task-input input:focus{border-color:var(--primary-color);outline:none}.unit{font-weight:600;color:var(--text-primary);margin-left:var(--spacing-sm)}.voltage-task{display:flex;flex-direction:column;gap:var(--spacing-md)}.voltage-task label{font-weight:600;color:var(--text-primary)}.voltage-input-group{display:flex;align-items:center;gap:var(--spacing-sm)}.voltage-input-group input{width:150px;padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--text-light);border-radius:var(--radius-md);font-size:var(--font-md);transition:border-color var(--transition-normal)}.voltage-input-group input:focus{border-color:var(--primary-color);outline:none}.check-button{background-color:var(--accent-color);color:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-weight:600;margin-top:var(--spacing-md);align-self:flex-start}.check-button:hover{background-color:var(--accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.feedback{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:600;margin-top:var(--spacing-sm);animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.feedback.correct{background-color:#28a74526;color:#28a745;border-left:4px solid #28a745}.feedback.incorrect{background-color:#dc354526;color:#dc3545;border-left:4px solid #dc3545}.placeholder p{font-size:var(--font-xl);color:var(--text-secondary);margin:0}.animation-paused-notice{text-align:center;padding:var(--spacing-xl);background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed var(--accent-color);border-radius:var(--radius-lg);margin:var(--spacing-lg) 0}.animation-paused-notice p{color:var(--text-primary);margin:var(--spacing-sm) 0;font-size:var(--font-md)}.animation-paused-notice p:first-child{font-size:var(--font-lg);font-weight:700;color:var(--accent-color)}.reaction-section{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--text-light)}.reaction-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.reaction-section h5{color:var(--accent-color);font-size:var(--font-md);margin-bottom:var(--spacing-sm);font-weight:700}.reaction-section.summary{background-color:#6741d90d;padding:var(--spacing-md);border-radius:var(--radius-sm);border:2px solid var(--accent-color);margin-top:var(--spacing-md)}.reaction-section.summary h5{color:var(--primary-color)}.highlight{background-color:#ffc10726;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-weight:600;border-left:3px solid #ffc107}@media (max-width: 768px){.explanation-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}.task-input{flex-direction:column;align-items:stretch}.task-input label{min-width:auto}}.tutor-container{position:fixed;display:flex;align-items:flex-end;gap:15px;z-index:1000;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease}.tutor-container.visible{opacity:1;transform:translateY(0)}.tutor-container.bottom-right{bottom:30px;right:30px;flex-direction:row-reverse}.tutor-container.bottom-left{bottom:30px;left:30px;flex-direction:row}.tutor-container.top-right{top:30px;right:30px;flex-direction:row-reverse;align-items:flex-start}.tutor-container.top-left{top:30px;left:30px;flex-direction:row;align-items:flex-start}.tutor-avatar{width:120px;height:120px;flex-shrink:0;border-radius:50%;overflow:hidden;box-shadow:0 4px 15px #0003;border:3px solid white;background-color:#fff;transition:transform .2s ease}.tutor-container:hover .tutor-avatar{transform:scale(1.05)}.tutor-avatar img{width:100%;height:100%;object-fit:cover}.tutor-speech-bubble{position:relative;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 20px;border-radius:20px;max-width:300px;box-shadow:0 4px 20px #00000026;animation:bubble-appear .3s ease}@keyframes bubble-appear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.tutor-container.bottom-right .tutor-speech-bubble:after,.tutor-container.top-right .tutor-speech-bubble:after{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-width:10px 0 10px 15px;border-color:transparent transparent transparent #764ba2}.tutor-container.bottom-left .tutor-speech-bubble:after,.tutor-container.top-left .tutor-speech-bubble:after{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-width:10px 15px 10px 0;border-color:transparent #764ba2 transparent transparent}.tutor-speech-bubble p{margin:0;font-size:15px;line-height:1.5}.tutor-close-btn{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background-color:#fff;color:#764ba2;border:none;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;transition:transform .2s ease}.tutor-close-btn:hover{transform:scale(1.1);background-color:#f0f0f0}.tutor-container[style*=pointer]{transition:all .2s ease}.tutor-container[style*=pointer]:hover{transform:translateY(-5px)}@media (max-width: 768px){.tutor-container{bottom:20px;right:20px}.tutor-avatar{width:80px;height:80px}.tutor-speech-bubble{max-width:200px;padding:12px 16px;font-size:14px}}.quiz-mode{max-width:900px;margin:0 auto}.quiz-intro{text-align:center;margin-bottom:var(--spacing-2xl)}.quiz-intro h2{color:var(--primary-color);margin-bottom:var(--spacing-md)}.quiz-intro p{color:var(--text-secondary);font-size:var(--font-lg);max-width:700px;margin:0 auto}.difficulty-selection{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg)}.difficulty-button{background-color:var(--bg-secondary);border:3px solid var(--text-light);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;transition:all var(--transition-normal);cursor:pointer}.difficulty-button:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.difficulty-button.easy{border-color:#27ae60}.difficulty-button.easy:hover{background-color:#27ae60;color:#fff}.difficulty-button.medium{border-color:#f39c12}.difficulty-button.medium:hover{background-color:#f39c12;color:#fff}.difficulty-button.hard{border-color:#e74c3c}.difficulty-button.hard:hover{background-color:#e74c3c;color:#fff}.difficulty-button.adaptive{border-color:var(--accent-color)}.difficulty-button.adaptive:hover{background-color:var(--accent-color);color:#fff}.difficulty-icon{font-size:48px;display:block;margin-bottom:var(--spacing-sm)}.difficulty-button h3{margin:var(--spacing-sm) 0;font-size:var(--font-xl)}.difficulty-button p{margin:var(--spacing-xs) 0;color:var(--text-secondary)}.difficulty-button:hover p,.difficulty-button:hover small{color:#ffffffe6}.difficulty-button small{display:block;margin-top:var(--spacing-sm);font-size:var(--font-sm);font-weight:600;color:var(--text-secondary)}.quiz-header{background-color:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);display:flex;justify-content:space-between;align-items:center}.quiz-progress{flex:1}.quiz-progress span{font-weight:600;color:var(--text-primary);display:block;margin-bottom:var(--spacing-xs)}.progress-bar{height:12px;background-color:var(--text-light);border-radius:6px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-color),var(--accent-light));transition:width .3s ease}.quiz-difficulty-badge{background-color:var(--accent-color);color:#fff;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);font-weight:700;font-size:var(--font-sm);text-transform:uppercase}.question-container{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-md)}.question-text{color:var(--primary-color);font-size:var(--font-xl);margin-bottom:var(--spacing-md);line-height:1.5}.multiple-choice-hint{background-color:#e3f2fd;color:#1976d2;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-lg);font-size:var(--font-sm);font-weight:600;border-left:4px solid #1976d2}.answers-list{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.answer-button{background-color:var(--bg-tertiary);border:2px solid var(--text-light);border-radius:var(--radius-md);padding:var(--spacing-lg);text-align:left;display:flex;align-items:center;gap:var(--spacing-md);transition:all var(--transition-normal);cursor:pointer}.answer-button:hover{border-color:var(--accent-color);background-color:var(--bg-secondary);transform:translate(4px)}.answer-button.selected{border-color:var(--accent-color);background-color:var(--accent-color);color:#fff}.answer-checkbox{width:24px;height:24px;border:2px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.answer-text{flex:1;font-size:var(--font-md)}.quiz-actions{display:flex;justify-content:center}.submit-answer-button{background-color:var(--accent-color);color:#fff;padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-md);font-size:var(--font-lg);font-weight:700;transition:all var(--transition-normal)}.submit-answer-button:hover:not(:disabled){background-color:var(--accent-dark);transform:scale(1.05)}.submit-answer-button:disabled{background-color:var(--text-light);cursor:not-allowed;opacity:.5}.feedback-screen{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);text-align:center;box-shadow:var(--shadow-lg)}.feedback-screen.correct{border:4px solid #27ae60}.feedback-screen.incorrect{border:4px solid #e74c3c}.feedback-icon{width:100px;height:100px;margin:0 auto var(--spacing-lg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:60px;font-weight:700}.feedback-screen.correct .feedback-icon{background-color:#27ae60;color:#fff}.feedback-screen.incorrect .feedback-icon{background-color:#e74c3c;color:#fff}.feedback-screen h2{margin-bottom:var(--spacing-lg)}.feedback-explanation{background-color:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-lg);margin:var(--spacing-xl) 0;text-align:left}.feedback-explanation h3{color:var(--primary-color);margin-bottom:var(--spacing-sm)}.feedback-explanation p{color:var(--text-primary);line-height:1.6}.continue-button{background-color:var(--accent-color);color:#fff;padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-md);font-size:var(--font-lg);font-weight:700}.continue-button:hover{background-color:var(--accent-dark)}.quiz-result{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg)}.quiz-result h2{text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-xl)}.result-score{text-align:center;margin-bottom:var(--spacing-2xl)}.score-circle{width:150px;height:150px;margin:0 auto var(--spacing-lg);border-radius:50%;display:flex;align-items:center;justify-content:center;border:8px solid var(--accent-color);background-color:var(--bg-tertiary)}.quiz-result.excellent .score-circle{border-color:#27ae60}.quiz-result.good .score-circle{border-color:#3498db}.quiz-result.ok .score-circle{border-color:#f39c12}.quiz-result.retry .score-circle{border-color:#e74c3c}.score-number{font-size:48px;font-weight:700;color:var(--primary-color)}.score-detail{font-size:var(--font-lg);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.grade-text{font-size:var(--font-2xl);margin:var(--spacing-lg) 0}.detailed-results{background-color:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.detailed-results h3{color:var(--primary-color);margin-bottom:var(--spacing-lg)}.result-item{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md)}.result-item.correct{background-color:#27ae601a;border-left:4px solid #27ae60}.result-item.incorrect{background-color:#e74c3c1a;border-left:4px solid #e74c3c}.result-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.result-item.correct .result-icon{background-color:#27ae60;color:#fff}.result-item.incorrect .result-icon{background-color:#e74c3c;color:#fff}.result-content{flex:1}.result-question{font-weight:600;margin-bottom:var(--spacing-xs);color:var(--text-primary)}.result-explanation{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.5}.restart-button{background-color:var(--accent-color);color:#fff;padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-md);font-size:var(--font-lg);font-weight:700;display:block;margin:0 auto}.restart-button:hover{background-color:var(--accent-dark);transform:scale(1.05)}@media (max-width: 768px){.difficulty-selection{grid-template-columns:1fr}.quiz-header{flex-direction:column;gap:var(--spacing-md)}.question-container{padding:var(--spacing-lg)}.question-text{font-size:var(--font-lg)}.answer-button{padding:var(--spacing-md)}.score-circle{width:120px;height:120px}.score-number{font-size:36px}.topic-selection{margin-bottom:var(--spacing-lg)}.topic-button{padding:var(--spacing-md)}}.topic-selection{margin-bottom:2rem}.topic-selection h3{margin-bottom:1rem;color:var(--text-primary);text-align:center}.topic-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.5rem;margin-bottom:.75rem;background:var(--bg-secondary);border:2px solid var(--text-light);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);font-size:var(--font-md)}.topic-button:hover{border-color:var(--accent-color);background:var(--bg-tertiary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.topic-button.selected{border-color:var(--accent-color);background:var(--accent-color);color:var(--text-inverse)}.topic-icon{font-size:1.5rem;margin-right:.5rem}.topic-label{flex:1;font-weight:600;text-align:left}.topic-count{font-size:var(--font-sm);opacity:.8;margin-left:.5rem}.topic-button.selected .topic-count{opacity:1}.difficulty-selection h3{margin-bottom:1.5rem;color:var(--text-primary);text-align:center;grid-column:1 / -1}.calculation-exercises{padding:var(--spacing-md)}.exercise-progress{text-align:center;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--spacing-md);font-weight:600}.exercise-card{background-color:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.exercise-question{color:var(--primary-color);font-size:var(--font-lg);margin-bottom:var(--spacing-lg);line-height:1.5}.answer-input-section{margin-bottom:var(--spacing-lg)}.answer-input-section label{display:block;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.input-with-unit{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-xs)}.answer-input{flex:1;padding:var(--spacing-md);font-size:var(--font-lg);border:2px solid var(--text-light);border-radius:var(--radius-sm);font-family:monospace;transition:border-color .2s}.answer-input:focus{outline:none;border-color:var(--accent-color)}.answer-input:disabled{background-color:var(--bg-tertiary);cursor:not-allowed}.unit-label{font-size:var(--font-lg);font-weight:600;color:var(--text-secondary);min-width:60px}.input-hint{font-size:var(--font-xs);color:var(--text-secondary);font-style:italic;margin:0}.hint-toggle-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-sm);background-color:#6741d91a;color:var(--accent-color);border:1px solid var(--accent-color);border-radius:var(--radius-sm);cursor:pointer;margin-bottom:var(--spacing-md);transition:all .2s}.hint-toggle-btn:hover{background-color:#6741d933}.hint-box{background-color:#3498db1a;border-left:4px solid #3498db;padding:var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md)}.hint-box p{color:var(--text-primary);line-height:1.6;margin:0}.feedback-box{padding:var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);text-align:center}.feedback-box.correct{background-color:#27ae601a;border:2px solid var(--success-color)}.feedback-box.incorrect{background-color:#e74c3c1a;border:2px solid var(--error-color)}.feedback-icon{font-size:48px;margin:0 0 var(--spacing-sm) 0}.feedback-box.correct .feedback-icon{color:var(--success-color)}.feedback-box.incorrect .feedback-icon{color:var(--error-color)}.feedback-text{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);margin:0 0 var(--spacing-sm) 0}.feedback-hint{font-size:var(--font-sm);color:var(--text-secondary);font-style:italic;margin:var(--spacing-sm) 0 0 0}.exercise-buttons{display:flex;justify-content:center;gap:var(--spacing-md)}.understanding-questions{padding:var(--spacing-md)}.question-progress{text-align:center;font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--spacing-md);font-weight:600}.question-card{background-color:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.question-text{color:var(--primary-color);font-size:var(--font-lg);margin-bottom:var(--spacing-md);line-height:1.5}.multiple-choice-hint{font-size:var(--font-sm);color:var(--accent-color);font-style:italic;margin-bottom:var(--spacing-md)}.answers-list{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.answer-option{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background-color:#fff;border:2px solid var(--text-light);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease}.answer-option:hover{background-color:#6741d90d;border-color:var(--accent-color)}.answer-option.selected{background-color:#6741d91a;border-color:var(--accent-color)}.answer-option.correct{background-color:#27ae601a;border-color:var(--success-color)}.answer-option.incorrect{background-color:#e74c3c1a;border-color:var(--error-color)}.answer-checkbox{font-size:var(--font-xl);color:var(--accent-color);flex-shrink:0}.answer-text{flex:1;color:var(--text-primary);line-height:1.4}.correctness-icon{font-size:var(--font-xl);font-weight:700;flex-shrink:0}.answer-option.correct .correctness-icon{color:var(--success-color)}.answer-option.incorrect .correctness-icon{color:var(--error-color)}.feedback-box{background-color:#6741d90d;border-left:4px solid var(--accent-color);padding:var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md)}.explanation{color:var(--text-primary);line-height:1.6;margin:0}.question-buttons{display:flex;justify-content:center;gap:var(--spacing-md)}.submit-btn,.next-btn,.reset-btn{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-md);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .3s ease}.submit-btn{background-color:var(--accent-color);color:#fff}.submit-btn:hover:not(:disabled){background-color:#5a3db8;transform:translateY(-2px);box-shadow:var(--shadow-md)}.submit-btn:disabled{background-color:var(--text-light);cursor:not-allowed;opacity:.5}.next-btn{background-color:var(--success-color);color:#fff}.next-btn:hover{background-color:#229954;transform:translateY(-2px);box-shadow:var(--shadow-md)}.reset-btn{background-color:var(--accent-color);color:#fff;padding:var(--spacing-md) var(--spacing-2xl)}.reset-btn:hover{background-color:#5a3db8;transform:translateY(-2px);box-shadow:var(--shadow-md)}.results-summary{text-align:center;padding:var(--spacing-xl)}.results-summary h3{color:var(--primary-color);font-size:var(--font-2xl);margin-bottom:var(--spacing-xl)}.score-display{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-md)}.score-number{font-size:48px;font-weight:700;color:var(--accent-color);margin:0 0 var(--spacing-sm) 0}.score-percentage{font-size:var(--font-xl);color:var(--text-secondary);margin:0}.result-message{font-size:var(--font-lg);padding:var(--spacing-md);border-radius:var(--radius-md);margin:var(--spacing-lg) 0;font-weight:600}.result-message.success{background-color:#27ae601a;color:var(--success-color)}.result-message.good{background-color:#3498db1a;color:#3498db}.result-message.needs-work{background-color:#e67e221a;color:#e67e22}.nernst-mode{max-width:1400px;margin:0 auto}.mode-intro{text-align:center;margin-bottom:var(--spacing-xl)}.mode-intro h2{color:var(--primary-color);margin-bottom:var(--spacing-md)}.mode-intro p{color:var(--text-secondary);font-size:var(--font-lg);max-width:800px;margin:0 auto}.visual-section{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-md);margin-bottom:var(--spacing-md);box-shadow:var(--shadow-md)}.visual-section h3{text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-lg)}.visual-section-header{display:flex;justify-content:center;align-items:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.visual-section-header h3{margin:0}.animation-toggle{font-size:var(--font-md);padding:var(--spacing-xs) var(--spacing-lg);border-radius:var(--radius-md);font-weight:600;transition:all var(--transition-normal)}.btn-active.animation-toggle{background-color:var(--success-color);color:#fff}.btn-active.animation-toggle:hover{background-color:var(--success-light);transform:scale(1.05)}.btn-inactive.animation-toggle{background-color:var(--bg-secondary);color:var(--primary-color);border:2px solid var(--primary-color)}.btn-inactive.animation-toggle:hover{background-color:var(--primary-color);color:#fff;transform:scale(1.05)}.controls-simulation-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--spacing-md);align-items:start;margin-bottom:var(--spacing-md)}.left-controls,.right-controls{display:flex;flex-direction:column;gap:var(--spacing-md)}.center-simulation{display:flex;justify-content:center;align-items:center}.animation-paused-notice{text-align:center;padding:var(--spacing-lg);background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed var(--accent-color);border-radius:var(--radius-lg);min-width:300px}.animation-paused-notice p{color:var(--text-primary);margin:var(--spacing-xs) 0;font-size:var(--font-sm)}.animation-paused-notice p:first-child{font-size:var(--font-md);font-weight:700;color:var(--accent-color)}.concentration-control{background-color:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-md);border:2px solid var(--text-light)}.concentration-control.anode-control{border-color:#e74c3c}.concentration-control.cathode-control{border-color:#27ae60}.concentration-control h4{color:var(--primary-color);margin-bottom:var(--spacing-md);text-align:center}.slider-container{margin-bottom:var(--spacing-lg)}.slider-container label{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--font-sm)}.concentration-value{background-color:var(--accent-color);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-family:monospace;font-size:var(--font-md)}.concentration-slider{width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,var(--text-light),var(--accent-color));outline:none;-webkit-appearance:none;margin-bottom:var(--spacing-xs)}.concentration-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent-color);cursor:pointer;border:3px solid white;box-shadow:0 2px 4px #0003}.concentration-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent-color);cursor:pointer;border:3px solid white;box-shadow:0 2px 4px #0003}.slider-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--text-secondary);margin-top:var(--spacing-xs)}.potential-display{background-color:#6741d90d;border-radius:var(--radius-sm);padding:var(--spacing-sm);border:1px solid var(--accent-color);text-align:center}.potential-display.anode-potential{border-color:#e74c3c}.potential-display.cathode-potential{border-color:#27ae60}.potential-display h5{font-size:var(--font-sm);color:var(--primary-color);margin-bottom:var(--spacing-xs);font-weight:600}.potential-display p{margin:2px 0;font-size:11px;color:var(--text-primary)}.nernst-result{font-weight:700;color:var(--accent-color);font-size:var(--font-sm);font-family:monospace}.voltage-display{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);background-color:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-md);border:2px solid var(--accent-color)}.voltage-box{background-color:#fff;border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);text-align:center;min-width:150px;box-shadow:var(--shadow-sm)}.voltage-box h4{color:var(--text-secondary);font-size:10px;margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.5px}.voltage-value{font-size:24px;font-weight:700;color:var(--primary-color);margin:var(--spacing-xs) 0;font-family:monospace}.voltage-value.highlight{color:var(--accent-color);font-size:28px}.voltage-box .formula{font-size:var(--font-xs);color:var(--text-secondary);font-style:italic}.voltage-arrow{font-size:48px;color:var(--accent-color);font-weight:700}.voltage-difference{background-color:#6741d91a;border-radius:var(--radius-sm);padding:var(--spacing-md);min-width:150px;text-align:center}.voltage-difference p{font-weight:700;color:var(--accent-color);font-size:var(--font-md)}.explanation-section{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-md)}.explanation-section h3{text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-lg)}.explanation-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg)}.explanation-card{background-color:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-lg);border-left:4px solid var(--accent-color)}.explanation-card h4{color:var(--accent-color);margin-bottom:var(--spacing-md)}.explanation-card p{color:var(--text-primary);line-height:1.6;margin-bottom:var(--spacing-sm)}.formula-display{background-color:#6741d91a;border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);font-family:Times New Roman,serif;font-size:var(--font-lg);text-align:center;margin:var(--spacing-md) 0;border:1px solid var(--accent-color)}.exercise-section{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-top:var(--spacing-xl);box-shadow:var(--shadow-md)}.exercise-section h3{text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-lg)}.exercise-mode-buttons{display:flex;gap:var(--spacing-md);justify-content:center;margin-bottom:var(--spacing-xl)}.mode-toggle-btn{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-md);font-weight:600;border:2px solid var(--accent-color);background-color:var(--bg-tertiary);color:var(--text-primary);border-radius:var(--radius-md);cursor:pointer;transition:all .3s ease}.mode-toggle-btn:hover{background-color:#6741d91a;transform:translateY(-2px)}.mode-toggle-btn.active{background-color:var(--accent-color);color:#fff;box-shadow:var(--shadow-md)}.exercise-content{background-color:var(--bg-tertiary);border-radius:var(--radius-md);padding:var(--spacing-lg);min-height:300px}.placeholder{text-align:center;padding:var(--spacing-2xl);background-color:var(--bg-tertiary);border-radius:var(--radius-lg);margin:var(--spacing-xl) 0}.placeholder p{font-size:var(--font-xl);color:var(--text-secondary)}@media (max-width: 1200px){.controls-simulation-layout{grid-template-columns:1fr;gap:var(--spacing-md)}.left-controls,.right-controls,.center-simulation{max-width:600px;margin:0 auto}.voltage-display{flex-direction:column;gap:var(--spacing-md)}.voltage-arrow{transform:rotate(90deg)}}@media (max-width: 768px){.explanation-grid{grid-template-columns:1fr}.voltage-value{font-size:24px}.voltage-value.highlight{font-size:28px}}.build-mode{max-width:1200px;margin:0 auto;padding:20px}.mode-intro h2{color:#667eea;font-size:2em;margin-bottom:10px}.mode-intro p{color:#666;font-size:1.1em}.task-description{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:12px;text-align:center;margin-bottom:30px;box-shadow:0 4px 12px #667eea4d}.task-description h3{margin:0 0 10px;font-size:1.5em}.task-description p{margin:0;font-size:1.1em}.build-container{display:grid;grid-template-columns:220px 1fr;gap:15px;min-height:500px}.pieces-palette{background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a}.pieces-palette h4{margin:0 0 15px;color:#333;font-size:1.2em;text-align:center}.pieces-grid{display:flex;flex-direction:column;gap:10px}.piece-button{padding:12px 16px;background:#fff;border:2px solid #667eea;border-radius:8px;cursor:grab;font-size:.95em;color:#333;transition:all .2s;text-align:left;font-weight:500;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.piece-button:hover:not(.used){background:#667eea;color:#fff;transform:translate(5px);box-shadow:0 2px 8px #667eea4d}.piece-button:active:not(.used){cursor:grabbing}.piece-button.used{background:#e9ecef;border-color:#dee2e6;color:#adb5bd;cursor:not-allowed;opacity:.5}.workspace{background:#fff;border:3px dashed #dee2e6;border-radius:12px;position:relative;min-height:500px;box-shadow:inset 0 2px 8px #0000000d;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}.workspace svg{width:100%;height:100%;min-height:500px}.workspace svg g{cursor:grab}.workspace svg g:active{cursor:grabbing}.workspace svg g:hover rect,.workspace svg g:hover circle,.workspace svg g:hover line{filter:brightness(.9)}.target-outline{animation:targetPulse 1.5s ease-in-out infinite}@keyframes targetPulse{0%,to{opacity:.3;stroke-width:.5}50%{opacity:.7;stroke-width:.8}}.success-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#4caf50f2;display:flex;align-items:center;justify-content:center;border-radius:12px;animation:fadeIn .5s ease}.success-message{text-align:center;color:#fff;padding:40px}.success-message h3{font-size:3em;margin:0 0 20px;animation:bounce .6s ease}.success-message p{font-size:1.5em;margin:10px 0}.bulb-glow{font-size:2em!important;animation:glow 1s ease-in-out infinite alternate}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes glow{0%{text-shadow:0 0 10px #FFD700,0 0 20px #FFD700,0 0 30px #FFD700}to{text-shadow:0 0 20px #FFD700,0 0 30px #FFD700,0 0 40px #FFD700}}.bulb-glow-animation{animation:bulbPulse 1.5s ease-in-out infinite alternate}@keyframes bulbPulse{0%{opacity:.7}to{opacity:1}}.bulb-ray-animation{animation:rayPulse 2s ease-in-out infinite}@keyframes rayPulse{0%,to{opacity:.3;stroke-width:.5}50%{opacity:1;stroke-width:1.2}}.build-controls{display:flex;justify-content:center;gap:20px;margin-top:30px}.btn-reset,.btn-next{padding:12px 24px;font-size:1.1em;border:none;border-radius:8px;cursor:pointer;transition:all .3s;font-weight:600}.btn-reset{background:#ff6b6b;color:#fff}.btn-reset:hover{background:#ee5a52;transform:scale(1.05)}.btn-next{background:#4caf50;color:#fff}.btn-next:hover{background:#45a049;transform:scale(1.05)}@media (max-width: 1024px){.build-container{grid-template-columns:1fr}.pieces-palette{order:2}.pieces-grid{flex-direction:row;flex-wrap:wrap}.piece-button{flex:1 1 calc(50% - 5px)}}@media (max-width: 768px){.mode-intro h2{font-size:1.5em}.task-description{padding:15px}.task-description h3{font-size:1.2em}.workspace{min-height:350px}.workspace svg{min-height:350px}.success-message h3{font-size:2em}.success-message p{font-size:1.2em}}@media (max-width: 480px){.build-mode{padding:10px}.piece-button{flex:1 1 100%;padding:10px 12px;font-size:.9em}.workspace{min-height:300px}.workspace svg{min-height:300px}.btn-reset,.btn-next{padding:10px 20px;font-size:1em}}.build-mode-selection{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:0 auto;padding:20px 0}.build-mode-button{display:flex;flex-direction:column;align-items:center;padding:30px 20px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border:3px solid transparent;border-radius:16px;cursor:pointer;transition:all .3s ease;text-align:center}.build-mode-button:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.build-mode-button.practice{background:linear-gradient(135deg,#a8edea,#fed6e3);border-color:#81d4fa}.build-mode-button.practice:hover{border-color:#4fc3f7}.build-mode-button.challenge-standard{background:linear-gradient(135deg,#fbc2eb,#a6c1ee);border-color:#ba68c8}.build-mode-button.challenge-standard:hover{border-color:#9c27b0}.build-mode-button.challenge-hardcore{background:linear-gradient(135deg,#fa709a,#fee140);border-color:#ff6f00}.build-mode-button.challenge-hardcore:hover{border-color:#e65100}.build-mode-button .mode-icon{font-size:3em;margin-bottom:15px}.build-mode-button h3{margin:0 0 10px;font-size:1.5em;color:#333}.build-mode-button p{margin:5px 0;font-size:.95em;color:#555;line-height:1.4}.build-mode-button small{display:block;margin-top:15px;font-weight:600;color:#667eea;font-size:.9em}.challenge-progress{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:12px;margin-bottom:20px;text-align:center}.challenge-progress h3{margin:0 0 15px;font-size:1.3em}.challenge-progress .progress-bar{background-color:#ffffff4d;height:30px;border-radius:15px;overflow:hidden;margin-bottom:15px}.challenge-progress .progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);transition:width .5s ease;display:flex;align-items:center;justify-content:center;font-weight:600}.btn-unlock{background:linear-gradient(135deg,#ffd89b,#19547b);color:#fff;border:none;padding:12px 30px;font-size:1.1em;font-weight:600;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.btn-unlock:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.btn-unlock:disabled{opacity:.5;cursor:not-allowed}.btn-back{background-color:#9e9e9e;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:1em;margin-top:15px;transition:background-color .3s ease}.btn-back:hover{background-color:#757575}.question-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.question-modal,.feedback-modal{background:#fff;padding:40px;border-radius:20px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d;animation:slideUp .3s ease}.question-modal h3{color:#667eea;margin:0 0 20px;font-size:1.5em}.question-text{font-size:1.1em;color:#333;margin-bottom:25px;line-height:1.6}.question-actions{margin-top:20px;text-align:center}.btn-submit-answer{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 40px;font-size:1.1em;font-weight:600;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d}.btn-submit-answer:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-submit-answer:disabled{opacity:.5;cursor:not-allowed}.feedback-modal{text-align:center}.feedback-modal.correct{border:4px solid #4caf50}.feedback-modal.incorrect{border:4px solid #f44336}.feedback-icon{width:80px;height:80px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3em;font-weight:700}.feedback-modal.correct .feedback-icon{background-color:#4caf50;color:#fff}.feedback-modal.incorrect .feedback-icon{background-color:#f44336;color:#fff}.feedback-modal h2{margin:0 0 20px;font-size:1.8em}.unlock-message,.lock-message{font-size:1.2em;margin:20px 0;padding:15px;border-radius:10px}.unlock-message{background-color:#e8f5e9;color:#2e7d32}.lock-message{background-color:#ffebee;color:#c62828}.feedback-explanation{background-color:#f5f5f5;padding:20px;border-radius:10px;margin:20px 0;text-align:left}.feedback-explanation h3{margin:0 0 10px;color:#667eea}.feedback-explanation p{margin:0;line-height:1.6;color:#555}.btn-continue{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 40px;font-size:1.1em;font-weight:600;border-radius:25px;cursor:pointer;transition:all .3s ease;margin-top:20px}.btn-continue:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.piece-button.locked{background-color:#e0e0e0;color:#9e9e9e;cursor:not-allowed;opacity:.6}.piece-button.locked:hover{transform:none;box-shadow:none}@media (max-width: 1024px){.build-mode-selection{grid-template-columns:1fr}.question-modal,.feedback-modal{padding:30px 20px}}.derivation-mode{max-width:900px;margin:0 auto;padding:20px}.mode-intro{text-align:center;margin-bottom:30px}.mode-intro h2{color:#667eea;font-size:2em;margin-bottom:5px}.subtitle{color:#666;font-size:1.1em;font-style:italic}.progress-container{margin-bottom:30px}.progress-bar{width:100%;height:8px;background:#e0e0e0;border-radius:10px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .5s ease;border-radius:10px}.progress-text{text-align:center;font-size:.9em;color:#666;font-weight:600}.step-container{background:#fff;border-radius:16px;padding:40px;box-shadow:0 4px 20px #0000001a;margin-bottom:30px;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.step-header{margin-bottom:30px;padding-bottom:20px;border-bottom:3px solid #667eea}.step-title{color:#333;font-size:1.8em;margin:0}.step-content{line-height:1.8;color:#444}.step-content h3{color:#667eea;margin-top:0;margin-bottom:20px;font-size:1.4em}.step-content p{margin:15px 0;font-size:1.05em}.intro-text{font-size:1.2em!important;color:#667eea;font-weight:600}.steps-overview{background:#f8f9fa;padding:20px 20px 20px 40px;border-radius:12px;border-left:4px solid #667eea;margin:20px 0}.steps-overview li{margin:10px 0;font-size:1.05em}.equation-box{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:12px;padding:20px;margin:20px 0;text-align:center;transition:all .3s}.equation-box:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26}.equation-box.highlight{background:linear-gradient(135deg,#667eea15,#764ba215);border-color:#667eea;border-width:3px}.equation-box.final{background:linear-gradient(135deg,#4caf5015,#66bb6a15);border-color:#4caf50;border-width:3px}.equation{font-size:1.3em;font-family:Courier New,Times New Roman,serif;font-weight:600;color:#333;display:inline-block}.equation.big{font-size:1.6em}.equation-line{font-size:1.3em;font-family:Courier New,Times New Roman,serif;font-weight:600;color:#333;margin:10px 0;display:block}.fraction{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 3px}.fraction .divider{width:100%;height:2px;background:#333;margin:2px 0}.reaction-box{background:#fff3cd;border:2px solid #ffc107;border-radius:12px;padding:15px;margin:20px 0;text-align:center}.definition-box{background:#e3f2fd;border-left:4px solid #2196F3;border-radius:8px;padding:15px 20px;margin:20px 0}.definition-box p{margin:8px 0;font-size:1em}.info-box{background:#fff9e6;border:2px solid #ffeb3b;border-radius:12px;padding:20px;margin:25px 0}.info-box p{margin:10px 0}.derivation-steps{margin:30px 0}.derivation-step{margin:25px 0;padding:20px;background:#fafafa;border-radius:12px;border-left:4px solid #667eea}.step-label{display:block;font-weight:600;color:#667eea;margin-bottom:15px;font-size:1.05em}.values-box{background:#f0f4ff;border:2px solid #667eea;border-radius:12px;padding:20px;margin:20px 0}.values-box p{margin:8px 0;font-family:Courier New,monospace;font-size:1.1em;font-weight:600}.calculation-box{background:#e8f5e9;border:2px solid #4CAF50;border-radius:12px;padding:20px;margin:20px 0;text-align:center}.success-box{background:linear-gradient(135deg,#4caf5020,#66bb6a20);border:3px solid #4CAF50;border-radius:16px;padding:30px;margin:30px 0;text-align:center}.success-box h4{color:#4caf50;font-size:1.5em;margin-top:0}.summary-box{background:#f8f9fa;border-radius:12px;padding:25px;margin:20px 0}.summary-box h4{color:#667eea;margin-top:0}.summary-steps{list-style:none;counter-reset:step-counter;padding-left:0}.summary-steps li{counter-increment:step-counter;margin:15px 0;padding-left:40px;position:relative}.summary-steps li:before{content:counter(step-counter);position:absolute;left:0;top:0;background:#667eea;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em}.final-equation-box{background:linear-gradient(135deg,#667eea15,#764ba215);border-radius:16px;padding:30px;margin:25px 0;text-align:center}.final-equation-box h4{color:#667eea;margin-top:0}.application-box{background:#e3f2fd;border-radius:12px;padding:25px;margin:20px 0}.application-box h4{color:#2196f3;margin-top:0}.application-box ul{margin:10px 0;padding-left:25px}.application-box li{margin:8px 0}.next-steps-box{background:linear-gradient(135deg,#764ba220,#667eea20);border-radius:12px;padding:25px;margin:20px 0;text-align:center}.next-steps-box h4{color:#764ba2;margin-top:0}.explanation{font-style:italic;color:#666;margin:15px 0!important}.navigation-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:30px}.btn-nav{padding:14px 32px;font-size:1.1em;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:all .3s;flex:1;max-width:200px}.btn-previous{background:#e0e0e0;color:#666}.btn-previous:hover:not(:disabled){background:#d0d0d0;transform:translate(-5px)}.btn-next{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-next:hover{transform:translate(5px);box-shadow:0 4px 15px #667eea66}.btn-reset{background:#4caf50;color:#fff}.btn-reset:hover{background:#45a049;transform:scale(1.05)}.btn-nav:disabled{opacity:.4;cursor:not-allowed}.nav-hint{flex:1;text-align:center;color:#666;font-style:italic}@media (max-width: 768px){.derivation-mode{padding:15px}.step-container{padding:25px}.mode-intro h2{font-size:1.5em}.step-title{font-size:1.4em}.equation{font-size:1.1em}.equation.big{font-size:1.3em}.navigation-controls{flex-direction:column}.btn-nav{max-width:100%;width:100%}.nav-hint{order:-1}}@media (max-width: 480px){.step-container{padding:20px}.equation-box,.info-box,.definition-box{padding:15px}.summary-steps li{padding-left:35px}.summary-steps li:before{width:24px;height:24px;font-size:.8em}}.beaker-electrolysis-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin:1.5rem 0}.beaker-legend{background:#f8f9fa;padding:1rem 1.5rem;border-radius:8px;border:2px solid #dee2e6;max-width:600px}.beaker-legend h4{margin:0 0 .75rem;color:#2c3e50;font-size:1rem;font-weight:600}.legend-items{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.legend-symbol{display:flex;align-items:center;justify-content:center;width:50px;height:30px;border-radius:6px;border:2px solid #2c3e50;font-weight:700;font-size:.85rem}.legend-symbol.zn-ion{background:#fff;color:#4a4a4a}.legend-symbol.i-ion{background:#fff;color:#ff8c00}.legend-symbol.zn-metal{background:#8b9dc3;color:#000}.legend-symbol.i2-gas{background:#8b4513;color:indigo;border-color:indigo}.beaker-controls{display:flex;gap:1rem;justify-content:center;margin:1rem 0}.btn-control{padding:.8rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #0000001a}.btn-control:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.btn-control:disabled{opacity:.5;cursor:not-allowed}.btn-pause{background:linear-gradient(135deg,#f39c12,#e67e22);color:#fff}.btn-play{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff}.btn-reset{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}@media (max-width: 768px){.legend-items{grid-template-columns:1fr}.beaker-controls{flex-direction:column;gap:.5rem}.btn-control{width:100%}}.electrolysis-mode{padding:1rem;max-width:1400px;margin:0 auto}.electrolysis-mode .card{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.electrolysis-mode h2{color:#2c3e50;margin-bottom:1.5rem;text-align:center}.intro-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem;border-radius:10px;margin-bottom:2rem}.intro-section h3{margin-top:0;margin-bottom:1rem}.intro-section p{margin:.5rem 0;line-height:1.6}.visualization-section{margin:2rem 0}.visualization-section h3{color:#2c3e50;margin-bottom:1rem;text-align:center}.control-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:900px;margin:0 auto 1.5rem}.voltage-control-compact{padding:1rem;background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000001a}.hint-small{font-size:.85rem;color:#7f8c8d;margin-top:.8rem;margin-bottom:0;text-align:center}.voltage-display{text-align:center;margin-bottom:.8rem;font-size:1.1rem}.voltage-label{color:#7f8c8d;margin-right:.5rem}.voltage-value{font-weight:700;color:#2c3e50;font-size:1.3rem;margin-right:.5rem}.voltage-threshold{color:#e67e22;font-size:.95rem}.slider-container-compact{position:relative}.voltage-slider-compact{width:100%;height:10px;border-radius:5px;background:#ddd;outline:none;-webkit-appearance:none;margin:.5rem 0}.voltage-slider-compact::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#3498db;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:transform .2s;border:3px solid white}.voltage-slider-compact::-webkit-slider-thumb:hover{transform:scale(1.15);background:#2980b9}.voltage-slider-compact::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#3498db;cursor:pointer;box-shadow:0 2px 8px #0000004d;border:3px solid white;transition:transform .2s}.voltage-slider-compact::-moz-range-thumb:hover{transform:scale(1.15);background:#2980b9}.slider-labels-compact{display:flex;justify-content:space-between;font-size:.85rem;color:#7f8c8d;margin-top:.3rem}.threshold-mark{color:#e67e22;font-weight:700;position:relative}.threshold-mark:before{content:"▼";position:absolute;top:-18px;left:50%;transform:translate(-50%);color:#e67e22;font-size:12px}.voltage-info-box{max-width:900px;margin:1.5rem auto}.voltage-info-box .hint{background:#3498db1a;padding:.8rem 1rem;border-radius:8px;border-left:4px solid #3498db;margin-bottom:1rem;text-align:center}.voltage-control{background:#f8f9fa;padding:1.5rem;border-radius:10px;margin:2rem 0}.voltage-control h3{color:#2c3e50;margin-top:0;margin-bottom:1rem}.voltage-info{background:#fff;padding:1rem;border-radius:8px;margin-bottom:1.5rem;border-left:4px solid #3498db}.voltage-info p{margin:.5rem 0}.voltage-info .hint{color:#7f8c8d;font-size:.95rem;margin-top:.8rem}.slider-container{margin:1.5rem 0}.slider-container label{display:block;margin-bottom:1rem;color:#2c3e50;font-size:1.1rem}.voltage-slider{width:100%;height:8px;border-radius:5px;background:#ddd;outline:none;-webkit-appearance:none}.voltage-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#3498db;cursor:pointer;box-shadow:0 2px 6px #0000004d;transition:transform .2s}.voltage-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.voltage-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#3498db;cursor:pointer;box-shadow:0 2px 6px #0000004d;border:none;transition:transform .2s}.voltage-slider::-moz-range-thumb:hover{transform:scale(1.2)}.slider-labels{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.9rem;color:#7f8c8d}.threshold-marker{color:#e67e22;font-weight:700}.status-box-compact{padding:1rem;border-radius:10px;border:3px solid;transition:all .3s ease;display:flex;flex-direction:column;justify-content:center;min-height:140px}.status-box-compact.inactive{background:#fff5f5;border-color:#e74c3c}.status-box-compact.active{background:#f0fff4;border-color:#27ae60;animation:pulse-border 2s infinite}@keyframes pulse-border{0%,to{border-color:#27ae60}50%{border-color:#2ecc71}}.status-box-compact h4{margin:0 0 .5rem;font-size:1.1rem;text-align:center}.status-box-compact p{margin:.4rem 0;line-height:1.4;text-align:center;font-size:.95rem}.explanation-wrapper{margin:2rem 0;background:#f8f9fa;border-radius:10px;overflow:hidden}.explanation-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;cursor:pointer}.explanation-header h3{margin:0;font-size:1.2rem}.btn-toggle{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.5);padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-weight:600;transition:all .3s ease}.btn-toggle:hover{background:#ffffff4d;transform:translateY(-1px)}.explanation-section{padding:1.5rem;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:2000px}}.explanation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:1rem}.explanation-card{background:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 4px #0000000d;border-left:4px solid #3498db}.explanation-card.warning{border-left-color:#e67e22;background:#fff9f5}.explanation-card h4{color:#2c3e50;margin-top:0;margin-bottom:1rem}.explanation-card p{margin:.6rem 0;line-height:1.6;color:#34495e}.explanation-card .equation{font-family:Georgia,serif;font-size:1.1rem;text-align:center;margin:1rem 0;padding:.8rem;background:#f8f9fa;border-radius:5px}.explanation-card .highlight{background:#fff3cd;padding:.8rem;border-radius:5px;border-left:3px solid #ffc107;margin-top:1rem;font-weight:500}.faraday-section{margin:2rem 0;padding:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:10px}.faraday-section h3{margin-top:0;margin-bottom:1rem}.faraday-section>p{margin-bottom:1.2rem;font-size:1.05rem}.formulas-compact{background:#ffffff26;padding:1rem;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.formula-row{display:grid;grid-template-columns:140px 1fr auto;gap:1rem;align-items:center;padding:.8rem;margin:.5rem 0;background:#ffffff1a;border-radius:6px}.formula-row.highlight{background:#ffffff40;border:2px solid rgba(255,255,255,.5);font-weight:600}.formula-label{font-weight:600;font-size:.95rem}.formula-eq{font-family:Georgia,serif;font-size:1.2rem;font-weight:700;text-align:center}.formula-units{font-size:.85rem;opacity:.9;text-align:right}.controls{margin-top:2rem;text-align:center}.btn-primary,.btn-secondary{padding:.8rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin:.5rem}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-secondary{background:#ecf0f1;color:#2c3e50}.btn-secondary:hover{background:#bdc3c7}.tabs-container{margin:1.5rem 0}.tabs-header{display:flex;gap:.5rem;border-bottom:3px solid #e0e0e0;margin-bottom:2rem}.tab-button{flex:1;padding:1rem 1.5rem;background:transparent;border:none;border-bottom:3px solid transparent;color:#7f8c8d;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;bottom:-3px}.tab-button:hover{color:#2c3e50;background:#667eea0d}.tab-button.active{color:#667eea;border-bottom-color:#667eea;background:#667eea1a}.tab-content{animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.electrolysis-mode .card{padding:1.5rem}.tabs-header{flex-direction:column;gap:.25rem}.tab-button{border-bottom:none;border-left:3px solid transparent;text-align:left;padding:.8rem 1rem;bottom:0}.tab-button.active{border-left-color:#667eea;border-bottom-color:transparent}.control-status-grid,.explanation-grid{grid-template-columns:1fr}.explanation-section>div[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}.formula-row{grid-template-columns:1fr;gap:.5rem}.formula-label{text-align:left}.formula-eq{text-align:left;font-size:1.1rem}.formula-units{text-align:left;font-size:.8rem}.voltage-display{font-size:1rem}.voltage-value{font-size:1.2rem}}.battery-mode{max-width:1200px;margin:0 auto;padding:20px}.battery-tabs{display:flex;gap:10px;margin:30px 0;justify-content:center}.battery-tab{padding:15px 30px;border:3px solid #3498db;background:#fff;color:#3498db;border-radius:10px;cursor:pointer;font-size:1.1rem;font-weight:700;transition:all .3s ease}.battery-tab:hover{background:#e3f2fd;transform:translateY(-2px)}.battery-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.battery-content{margin-top:30px}.battery-intro{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:25px;border-radius:15px;margin-bottom:30px}.battery-intro h3{margin-top:0;color:#2c3e50}.intro-with-image{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;margin-top:20px}.intro-image{text-align:center}.battery-image{width:100%;max-width:400px;height:auto;border-radius:10px;box-shadow:0 4px 8px #0003;border:3px solid #fff}.image-credit{font-size:.75rem;color:#666;margin-top:8px;font-style:italic}.battery-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-top:20px}.spec-item{background:#fffc;padding:15px;border-radius:8px;border-left:4px solid #3498db}.phase-section{margin-bottom:20px;border:2px solid #ddd;border-radius:10px;overflow:hidden}.phase-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px 20px;cursor:pointer;transition:all .3s ease}.phase-header:hover{background:linear-gradient(135deg,#764ba2,#667eea)}.phase-header h4{margin:0;font-size:1.2rem}.phase-content{padding:25px;background:#fff}.phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}.placeholder-box{background:linear-gradient(135deg,#e0e0e0,#f5f5f5);border:3px dashed #999;border-radius:10px;padding:60px 20px;text-align:center;color:#666;font-size:.95rem;line-height:1.8;min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center}.placeholder-box.small{min-height:150px;padding:30px 15px;font-size:.85rem}.phase-image{text-align:center}.phase-diagram{width:100%;max-width:100%;height:auto;border-radius:10px;background:#fff;padding:10px;box-shadow:0 2px 8px #0000001a;border:2px solid #ddd}.phase-description h5{margin-top:0;color:#2c3e50;font-size:1.2rem}.reaction-box{background:#f8f9fa;border-left:4px solid #3498db;padding:15px;margin:15px 0;border-radius:6px}.reaction-box.anode{border-left-color:#e74c3c}.reaction-box.cathode{border-left-color:#27ae60}.reaction-box h6{margin-top:0;color:#2c3e50}.reaction-box .equation{font-family:Courier New,monospace;font-size:1.1rem;font-weight:700;color:#2c3e50;background:#ffffffb3;padding:10px;border-radius:5px;display:block;margin:10px 0}.reaction-box .explanation{font-size:.95rem;color:#555;margin:5px 0 0}.gesamtreaktion-box{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:10px;margin:20px 0}.gesamtreaktion-box h6{margin-top:0;font-size:1.1rem}.gesamtreaktion-box .equation{background:#fff3;color:#fff;font-size:1.2rem;padding:15px;border-radius:8px}.info-note{background:#fff3cd;border:2px solid #ffc107;border-radius:8px;padding:15px;margin-top:20px}.info-note.success{background:#d4edda;border-color:#28a745}.info-note.warning{background:#f8d7da;border-color:#dc3545}.voltage-info{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;padding:20px;border-radius:10px;margin:20px 0;text-align:center}.voltage-info h6{margin-top:0}.big-voltage{font-size:2.5rem;font-weight:700;margin:10px 0}.voltage-info .explanation{font-size:.95rem;margin-top:10px}.overvoltage-section{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);padding:30px;border-radius:15px;margin-top:40px}.overvoltage-section h3{margin-top:0;color:#2c3e50}.overvoltage-explanation{background:#fffc;padding:20px;border-radius:10px;margin-top:20px}.answer-box{background:#fff;border:3px solid #f39c12;padding:20px;border-radius:10px;margin-top:15px}.answer-box h4{margin-top:0;color:#e67e22}.answer-box .highlight{background:#ffe0b2;padding:15px;border-radius:8px;font-weight:700;margin-top:15px}.lithium-simulation{background:linear-gradient(135deg,#a8edea,#fed6e3);padding:30px;border-radius:15px;margin:30px 0}.lithium-simulation h4{margin-top:0;color:#2c3e50}.charge-control{background:#ffffffe6;padding:20px;border-radius:10px;margin-bottom:30px}.charge-control label{display:block;margin-bottom:10px;font-size:1.1rem;color:#2c3e50}.charge-slider{width:100%;height:12px;background:linear-gradient(to right,#e74c3c,#f39c12,#27ae60);border-radius:10px;outline:none;-webkit-appearance:none;margin:15px 0}.charge-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background:#fff;border:3px solid #3498db;border-radius:50%;cursor:pointer;box-shadow:0 2px 5px #0000004d}.charge-slider::-moz-range-thumb{width:25px;height:25px;background:#fff;border:3px solid #3498db;border-radius:50%;cursor:pointer;box-shadow:0 2px 5px #0000004d}.charge-labels{display:flex;justify-content:space-between;font-size:.9rem;color:#666}.lithium-visualization{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;background:#ffffffe6;padding:30px;border-radius:15px;margin:20px 0}.electrode{display:flex;flex-direction:column;align-items:center}.electrode-label{text-align:center;margin-bottom:15px}.electrode-label h5{margin:0 0 5px;color:#2c3e50}.electrode-label p{margin:0;font-size:.9rem;color:#666}.electrode-body{width:200px;height:300px;border-radius:10px;display:flex;align-items:center;justify-content:center}.electrode-body.graphite{background:linear-gradient(135deg,#2c3e50,#34495e);border:3px solid #1a252f}.electrode-body.metal-oxide{background:linear-gradient(135deg,#e74c3c,#c0392b);border:3px solid #a93226}.electrolyte-separator{display:flex;flex-direction:column;align-items:center;gap:10px}.separator-line{width:3px;height:200px;background:repeating-linear-gradient(to bottom,#3498db,#3498db 10px,transparent 10px,transparent 20px)}.ion-flow{font-size:1.2rem;font-weight:700;color:#3498db;padding:10px 15px;background:#ffffffe6;border-radius:8px}.electrolyte-label{font-size:.9rem;color:#666}.process-explanation{background:#ffffffe6;padding:25px;border-radius:10px;margin-top:20px}.process-explanation h5{margin-top:0;color:#2c3e50;font-size:1.2rem}.discharge-info,.charge-info{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:15px}.comparison-section{margin-top:40px;padding:30px;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:15px}.comparison-section h4{margin-top:0;color:#2c3e50}.comparison-table{width:100%;border-collapse:collapse;margin-top:20px;background:#fff;border-radius:10px;overflow:hidden}.comparison-table thead{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.comparison-table th,.comparison-table td{padding:15px;text-align:left;border-bottom:1px solid #ddd}.comparison-table th{font-weight:700;font-size:1.05rem}.comparison-table tbody tr:hover{background:#f8f9fa}.comparison-table tbody tr:last-child td{border-bottom:none}.concept-explanation{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);padding:30px;border-radius:15px;margin:30px 0}.concept-explanation h4{margin-top:0;color:#2c3e50;font-size:1.3rem}.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}.concept-card{background:#ffffffe6;padding:20px;border-radius:10px;border:3px solid}.concept-card.highlight{border-color:#e74c3c;background:#ffe6e6}.concept-card.correct{border-color:#27ae60;background:#e8f8f5}.concept-card h5{margin-top:0;font-size:1.1rem}.formula-display{font-family:Courier New,monospace;font-size:1.1rem;font-weight:700;background:#0000000d;padding:10px;border-radius:5px;margin:10px 0}.concept-detail{background:#fffffff2;padding:20px;border-radius:10px}.concept-step{margin-bottom:15px}.concept-step h6{margin-top:0;color:#2c3e50;font-size:1.05rem}.concept-step ul{margin:10px 0;padding-left:20px}.concept-step li{margin:8px 0;line-height:1.6}.material-selection{background:linear-gradient(135deg,#a8edea,#fed6e3);padding:30px;border-radius:15px;margin:30px 0}.material-selection h4{margin-top:0;color:#2c3e50}.material-intro{font-size:1.05rem;color:#2c3e50;margin-bottom:20px}.cathode-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.cathode-button{background:#fff;border:3px solid #ddd;border-radius:12px;padding:20px 15px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:8px}.cathode-button:hover{transform:translateY(-3px);box-shadow:0 6px 12px #00000026}.cathode-button.active{border-width:4px;box-shadow:0 8px 20px #0003;background:linear-gradient(135deg,#fff,#f8f9fa)}.material-name{font-size:1.3rem;font-weight:700;color:#2c3e50}.material-fullname{font-size:.85rem;color:#7f8c8d}.properties-section{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:30px;border-radius:15px;margin:30px 0}.properties-section h4{margin-top:0;color:#2c3e50}.properties-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.property-item{background:#ffffffe6;padding:15px;border-radius:10px;border-left:4px solid #3498db}.property-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700;color:#2c3e50}.property-value{color:#7f8c8d;font-size:.95rem}.property-bar-container{width:100%;height:20px;background:#0000001a;border-radius:10px;overflow:hidden}.property-bar{height:100%;border-radius:10px;transition:width .5s ease}.property-note{font-size:.8rem;color:#95a5a6;margin-top:5px;display:block}.applications-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;border-radius:15px;margin:30px 0}.applications-section h4{margin-top:0}.applications-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}.applications-list,.applications-reason,.applications-environment{background:#ffffff26;padding:20px;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.applications-list h5,.applications-reason h5,.applications-environment h5{margin-top:0;font-size:1.05rem}.applications-list ul{list-style:none;padding:0;margin:10px 0 0}.applications-list li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.2)}.applications-list li:last-child{border-bottom:none}.lithium-visualization-section{background:#fff;padding:30px;border-radius:15px;margin:30px 0;border:2px solid #ddd}.lithium-visualization-section h4{margin-top:0;color:#2c3e50}.lithium-image-container{text-align:center;margin:20px 0;position:relative}.lithium-structure-img{max-width:600px;width:100%;height:auto;border-radius:10px;border:2px solid #ddd;transition:filter .5s ease}.lithium-animation-overlay{position:absolute;top:0;left:50%;transform:translate(-50%);width:600px;max-width:100%;height:100%;pointer-events:none;z-index:10}.lithium-animation-overlay.paused .li-ion,.lithium-animation-overlay.paused .electron-cable{animation-play-state:paused}.circuit-device{position:absolute;top:-13%;left:55%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:20;background:#fffffff2;padding:12px 20px;border-radius:12px;border:3px solid #1976d2;box-shadow:0 4px 12px #0003}.battery-symbol .battery-poles{display:flex;align-items:center;gap:8px;font-size:2rem;font-weight:700}.pole-plus{color:#e74c3c;font-size:2.5rem}.pole-minus{color:#3498db;font-size:2.5rem}.battery-body{color:#2c3e50;font-size:2rem}.lamp-symbol .lamp-bulb{font-size:3rem;transition:opacity .3s ease,filter .3s ease;text-shadow:0 0 20px rgba(255,215,0,.8)}.device-label{font-size:.95rem;font-weight:700;color:#1976d2;text-align:center}.stored-charge-anode{position:absolute;left:15%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:5}.stored-li-ion{font-size:1rem;font-weight:700;color:#27ae60;background:#27ae6026;border:2px solid #27ae60;border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px #27ae6066;animation:stored-li-fade-in .5s ease}@keyframes stored-li-fade-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.li-ion{position:absolute;font-size:1.2rem;font-weight:700;color:#3498db;background:#fffffff2;border:2px solid #3498db;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;animation:li-ion-move 8s linear infinite;box-shadow:0 0 10px #3498db99}.li-ion:nth-child(1){top:25%}.li-ion:nth-child(2){top:35%}.li-ion:nth-child(3){top:45%}.li-ion:nth-child(4){top:55%}.li-ion:nth-child(5){top:30%}.li-ion:nth-child(6){top:40%}.li-ion:nth-child(7){top:50%}.li-ion:nth-child(8){top:60%}@keyframes li-ion-move{0%{left:10%;opacity:0}10%{opacity:1}90%{opacity:1}to{left:85%;opacity:0}}.electron-cable{position:absolute;font-size:1rem;font-weight:700;color:#ff10f0;background:#ff10f033;border:2px solid #FF10F0;border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center;animation:electron-move 6s linear infinite;box-shadow:0 0 8px #ff10f0cc}@keyframes electron-move{0%{top:5%;left:10%;opacity:0}10%{opacity:1}25%{top:5%;left:50%}50%{top:5%;left:85%}75%{top:85%;left:85%}90%{opacity:1}to{top:85%;left:10%;opacity:0}}.lithium-controls{background:linear-gradient(135deg,#e3f2fd,#bbdefb);padding:25px;border-radius:12px;margin:25px 0;border:2px solid #90caf9}.lithium-controls h5{margin-top:0;margin-bottom:20px;color:#1565c0;font-size:1.2rem}.control-row{display:flex;gap:15px;margin-bottom:20px;justify-content:center}.control-button{padding:12px 30px;font-size:1.05rem;font-weight:700;background:linear-gradient(135deg,#42a5f5,#1976d2);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.control-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0003}.control-button:active{transform:translateY(0)}.mode-button.active{background:linear-gradient(135deg,#27ae60,#229954);box-shadow:0 6px 16px #27ae6066;transform:scale(1.05)}.mode-button.active:hover{transform:scale(1.05) translateY(-2px)}.control-hint{text-align:center;font-size:.95rem;color:#546e7a;margin:15px 0 10px;font-style:italic}.slider-container{margin:20px 0}.slider-container label{display:block;margin-bottom:12px;font-size:1.1rem;color:#1565c0;text-align:center}.charge-slider{width:100%;height:10px;background:linear-gradient(to right,#e74c3c,#f39c12,#27ae60);border-radius:5px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.charge-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;background:#1976d2;border:3px solid white;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d;transition:all .2s ease}.charge-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 10px #0006}.charge-slider::-moz-range-thumb{width:24px;height:24px;background:#1976d2;border:3px solid white;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000004d;transition:all .2s ease}.charge-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 4px 10px #0006}.slider-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:.9rem;color:#546e7a}.charge-status{text-align:center;margin-top:20px;padding:15px;border-radius:8px;font-size:1.05rem;font-weight:700}.status-warning{background:#ffebee;color:#c62828;border:2px solid #e74c3c}.status-neutral{background:#fff8e1;color:#f57f17;border:2px solid #f39c12}.status-good{background:#e8f5e9;color:#2e7d32;border:2px solid #27ae60}.lithium-labels{display:flex;justify-content:center;gap:30px;margin-top:20px;flex-wrap:wrap}.label-item{display:flex;align-items:center;gap:10px;font-size:1rem;color:#2c3e50}.label-marker{display:inline-block;width:30px;height:20px;border-radius:4px;border:1px solid #333}@media (max-width: 768px){.intro-with-image,.phase-grid{grid-template-columns:1fr}.battery-tabs{flex-direction:column}.battery-tab{width:100%}.lithium-visualization{grid-template-columns:1fr}.separator-line{height:3px;width:100%}.discharge-info,.charge-info{grid-template-columns:1fr}.comparison-table{font-size:.85rem}.comparison-table th,.comparison-table td{padding:10px 8px}.concept-grid,.cathode-buttons,.properties-grid,.applications-grid{grid-template-columns:1fr}.lithium-labels{flex-direction:column;align-items:flex-start}}.hybrid-input{width:100%}.hybrid-toggle{display:flex;gap:.5rem;margin-bottom:.75rem}.toggle-btn{flex:1;padding:.5rem 1rem;background-color:var(--bg-tertiary);border:2px solid var(--text-light);border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-size:.9rem;transition:all var(--transition-normal)}.toggle-btn:hover{border-color:var(--accent-color);background-color:var(--bg-secondary)}.toggle-btn.active{border-color:var(--accent-color);background-color:var(--accent-color);color:#fff}.text-mode{width:100%}.hybrid-textarea,.hybrid-input-field{width:100%;padding:var(--spacing-md);border:2px solid var(--text-light);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-md);transition:border-color var(--transition-normal)}.hybrid-textarea:focus,.hybrid-input-field:focus{outline:none;border-color:var(--accent-color)}.hybrid-textarea{resize:vertical;min-height:80px}.draw-mode{width:100%}.canvas-toolbar{display:flex;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}.canvas-btn{padding:.5rem 1rem;background-color:var(--bg-tertiary);border:2px solid var(--text-light);border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-size:.85rem;transition:all var(--transition-normal)}.canvas-btn:hover{border-color:var(--accent-color);background-color:var(--accent-color);color:#fff}.canvas-btn-clear{margin-left:auto}.canvas-btn-clear:hover{border-color:#e74c3c;background-color:#e74c3c;color:#fff}.canvas-container{width:100%;height:300px;position:relative;background-color:#fff;border-radius:var(--radius-md);overflow:hidden}.sketch-canvas{width:100%;height:100%;touch-action:none}.canvas-hint{margin-top:.5rem;font-size:.85rem;color:var(--text-secondary);font-style:italic;text-align:center}@media (max-width: 768px){.canvas-container{height:250px}.canvas-toolbar{flex-direction:column}.canvas-btn{width:100%}.canvas-btn-clear{margin-left:0}}.battery-info-mode{max-width:1200px;margin:0 auto}.intro-section{text-align:center;margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background-color:var(--bg-tertiary);border-radius:var(--radius-md)}.battery-selector{margin-bottom:var(--spacing-2xl)}.battery-selector h3{color:var(--primary-color);margin-bottom:var(--spacing-lg);text-align:center}.battery-category{margin-bottom:var(--spacing-xl)}.battery-category h4{color:var(--text-secondary);font-size:var(--font-md);margin-bottom:var(--spacing-md);padding-left:var(--spacing-sm);border-left:4px solid var(--accent-color)}.battery-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md)}.battery-button{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-lg);background-color:var(--bg-secondary);border:2px solid var(--text-light);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal)}.battery-button:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.battery-button.active{border-color:var(--accent-color);background-color:var(--accent-color);color:#fff}.battery-name{font-weight:600;font-size:var(--font-md);text-align:center}.battery-voltage{font-size:var(--font-sm);opacity:.8}.battery-button.active .battery-voltage{opacity:1}.battery-info-display{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);margin-bottom:var(--spacing-2xl);box-shadow:var(--shadow-md)}.info-grid{display:grid;grid-template-columns:400px 1fr;gap:var(--spacing-2xl)}.info-image{text-align:center}.info-image img{max-width:100%;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background-color:#fff;padding:var(--spacing-md)}.image-credit{font-size:var(--font-xs);color:var(--text-secondary);margin-top:var(--spacing-sm);font-style:italic}.info-details h3{color:var(--primary-color);margin-bottom:var(--spacing-lg);font-size:var(--font-xl)}.info-details h4{color:var(--primary-color);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm);font-size:var(--font-lg)}.info-row{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.info-label{font-weight:600;min-width:100px;color:var(--text-secondary)}.info-value{color:var(--text-primary)}.info-details ul{list-style:none;padding:0}.info-details ul li{padding:var(--spacing-xs) 0;color:var(--text-primary)}.reactions{background-color:var(--bg-tertiary);padding:var(--spacing-lg);border-radius:var(--radius-md);margin-top:var(--spacing-md)}.reaction-section{margin-bottom:var(--spacing-lg)}.reaction-section h5{color:var(--primary-color);margin-bottom:var(--spacing-sm)}.reaction-item{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.reaction-label{font-weight:600;min-width:80px;color:var(--text-secondary)}.reaction-item code{background-color:var(--bg-secondary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:4px;font-family:Courier New,monospace;font-size:.95rem}.reaction-note{margin-top:var(--spacing-md);padding:var(--spacing-sm);background-color:#667eea1a;border-left:3px solid var(--accent-color);border-radius:4px;font-size:var(--font-sm)}.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);margin-top:var(--spacing-lg)}.pros,.cons{padding:var(--spacing-md);border-radius:var(--radius-md)}.pros{background-color:#27ae601a;border-left:4px solid #27ae60}.cons{background-color:#e74c3c1a;border-left:4px solid #e74c3c}.pros h4,.cons h4{margin-top:0;font-size:var(--font-md)}.pros ul,.cons ul{margin:0;padding-left:var(--spacing-lg)}.pros li,.cons li{padding:var(--spacing-xs) 0;list-style:disc}.worksheet-section{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-md)}.worksheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);flex-wrap:wrap;gap:var(--spacing-md)}.worksheet-header h3{color:var(--primary-color);margin:0}.worksheet-controls{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-primary);border:2px solid var(--text-light);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:all var(--transition-normal)}.btn-secondary:hover{border-color:var(--accent-color);background-color:var(--accent-color);color:#fff}.btn-danger{background-color:#e74c3c;color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:all var(--transition-normal)}.btn-danger:hover{background-color:#c0392b}.worksheet-tabs{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);overflow-x:auto}.worksheet-tab{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-tertiary);border:2px solid var(--text-light);border-radius:var(--radius-md) var(--radius-md) 0 0;cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}.worksheet-tab:hover{background-color:var(--bg-secondary);border-color:var(--accent-color)}.worksheet-tab.active{background-color:#fff;border-color:var(--accent-color);border-bottom-color:#fff;font-weight:600}.delete-tab{background:none;border:none;font-size:1.5rem;color:#e74c3c;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;line-height:1}.delete-tab:hover{color:#c0392b}.worksheet-form{background-color:#fff;padding:var(--spacing-xl);border-radius:var(--radius-md)}.form-row{margin-bottom:var(--spacing-lg)}.form-row label{display:block;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.form-row input,.form-row textarea{width:100%;padding:var(--spacing-md);border:2px solid var(--text-light);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-md);transition:border-color var(--transition-normal)}.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--accent-color)}.form-row textarea{resize:vertical;min-height:80px}.worksheet-footer{margin-top:var(--spacing-lg);text-align:center}.save-hint{color:var(--text-secondary);font-size:var(--font-sm);font-style:italic}@media (max-width: 768px){.info-grid{grid-template-columns:1fr}.info-image img{max-width:300px}.pros-cons,.battery-buttons{grid-template-columns:1fr}.worksheet-header{flex-direction:column;align-items:stretch}.worksheet-controls{flex-direction:column}.worksheet-tabs{flex-wrap:wrap}}.abitur-mode{width:100%;max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.abitur-warning{display:flex;gap:1.5rem;align-items:flex-start;background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:3px solid #f39c12;border-radius:var(--radius-lg);padding:2rem;margin-bottom:2rem;box-shadow:0 4px 12px #f39c1233}.warning-icon{font-size:3rem;flex-shrink:0;animation:pulse-warning 2s ease-in-out infinite}@keyframes pulse-warning{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.warning-content{flex:1}.warning-content h3{color:#d35400;margin-top:0;margin-bottom:1rem;font-size:1.3rem}.warning-content p{color:#8b5a00;margin-bottom:1rem;line-height:1.6}.warning-content p:last-child{margin-bottom:0}.warning-tip{font-weight:600;color:#c0392b;margin-top:1.5rem!important;padding-top:1rem;border-top:2px dashed #f39c12}.intro-section{margin-bottom:2rem;padding:1.5rem;background:var(--bg-secondary);border-radius:var(--radius-md);border-left:4px solid var(--accent-color)}.intro-section p{margin-bottom:.75rem}.intro-section p:last-child{margin-bottom:0}.format-info{font-style:italic;color:var(--text-secondary);padding-top:.75rem;margin-top:.75rem;border-top:1px solid var(--text-light)}.task-selection{margin-bottom:2rem}.task-selection h3{margin-bottom:1.5rem;color:var(--text-primary)}.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.task-card{background:var(--bg-secondary);border:2px solid var(--text-light);border-radius:var(--radius-md);padding:1.5rem;cursor:pointer;transition:all var(--transition-normal);display:flex;flex-direction:column;gap:1rem}.task-card:hover{border-color:var(--accent-color);transform:translateY(-4px);box-shadow:0 8px 16px #0000001a}.task-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.task-header h4{margin:0;color:var(--text-primary);font-size:1.1rem;flex:1}.task-badge{background:var(--accent-color);color:#fff;padding:.4rem .8rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;white-space:nowrap}.task-description{color:var(--text-secondary);line-height:1.5;margin:0}.task-topics{display:flex;flex-direction:column;gap:.5rem}.task-topics strong{color:var(--text-primary);font-size:.9rem}.topic-tags{display:flex;flex-wrap:wrap;gap:.5rem}.topic-tag{background:var(--bg-tertiary);color:var(--text-primary);padding:.3rem .6rem;border-radius:var(--radius-sm);font-size:.85rem;border:1px solid var(--text-light)}.task-button{width:100%;padding:.75rem 1rem;background:var(--accent-color);color:#fff;border:none;border-radius:var(--radius-md);font-weight:600;font-size:1rem;cursor:pointer;transition:all var(--transition-normal);margin-top:auto}.task-button:hover{background:var(--accent-dark);transform:translateY(-2px)}.task-viewer{margin-top:2rem}.viewer-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid var(--text-light)}.back-button{padding:.75rem 1.5rem;background:var(--bg-secondary);border:2px solid var(--text-light);border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.back-button:hover{border-color:var(--accent-color);background:var(--accent-color);color:#fff}.viewer-header h3{margin:0;color:var(--text-primary);flex:1}.pdf-container{width:100%;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 12px #00000026}.pdf-viewer{display:block;border:none}.viewer-footer{margin-top:1.5rem;padding:1rem;background:var(--bg-secondary);border-radius:var(--radius-md);border-left:4px solid var(--accent-color)}.download-hint{margin:0;color:var(--text-secondary);font-style:italic}.future-feature{margin-top:3rem;padding:1.5rem;background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:2px dashed #4caf50;border-radius:var(--radius-md);text-align:center}.future-feature h4{color:#2e7d32;margin-top:0;margin-bottom:.5rem}.future-feature p{color:#558b2f;margin:0}@media (max-width: 768px){.abitur-mode{padding:var(--spacing-md)}.abitur-warning{flex-direction:column;gap:1rem;padding:1.5rem}.warning-icon{font-size:2rem;text-align:center}.task-grid{grid-template-columns:1fr}.viewer-header{flex-direction:column;align-items:stretch}.back-button{width:100%}.pdf-container{height:600px}}@media (max-width: 480px){.warning-content h3{font-size:1.1rem}.warning-content p{font-size:.9rem}.task-header{flex-direction:column}.task-badge{align-self:flex-start}}.mode-navigation{background-color:var(--bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md);box-shadow:var(--shadow-sm);flex-wrap:wrap}.mode-nav-label{font-weight:600;color:var(--text-secondary);font-size:var(--font-sm);white-space:nowrap}.mode-nav-buttons{display:flex;gap:var(--spacing-xs);flex-wrap:wrap;flex:1}.mode-nav-button{background-color:var(--bg-tertiary);color:var(--text-primary);border:2px solid var(--text-light);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-sm);font-weight:500;transition:all var(--transition-normal);white-space:nowrap}.mode-nav-button:hover{border-color:var(--accent-color);background-color:var(--bg-secondary);transform:translateY(-1px)}.mode-nav-button.active{background-color:var(--accent-color);color:var(--text-inverse);border-color:var(--accent-color);font-weight:700}.mode-nav-button.active:hover{background-color:var(--accent-dark);border-color:var(--accent-dark)}.mode-nav-short{display:none}@media (max-width: 768px){.mode-navigation{padding:var(--spacing-sm)}.mode-nav-label{width:100%;margin-bottom:var(--spacing-xs)}.mode-nav-buttons{width:100%}.mode-nav-button{padding:var(--spacing-xs);font-size:12px}.mode-nav-full{display:none}.mode-nav-short{display:inline}}.ai-tutor-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:3000;animation:fadeIn .3s ease}.ai-tutor-modal{background:#fff;border-radius:20px;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.ai-tutor-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:2px solid #e0e0e0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:20px 20px 0 0}.ai-tutor-header-content{display:flex;align-items:center;gap:15px}.ai-tutor-avatar{width:60px;height:60px;border-radius:50%;border:3px solid white;object-fit:cover;background:#fff}.ai-tutor-header h3{margin:0;font-size:1.3em}.ai-tutor-subtitle{margin:5px 0 0;font-size:.9em;opacity:.9}.ai-tutor-close{background:#fff3;border:none;color:#fff;font-size:2em;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1}.ai-tutor-close:hover{background:#ffffff4d;transform:scale(1.1)}.ai-tutor-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:15px;background:#f5f5f5}.ai-tutor-message{display:flex;gap:10px;align-items:flex-start}.ai-tutor-message.user{flex-direction:row-reverse}.message-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #667eea;background:#fff;flex-shrink:0}.message-bubble{max-width:70%;padding:12px 16px;border-radius:18px;line-height:1.5}.ai-tutor-message.assistant .message-bubble{background:#fff;border:2px solid #e0e0e0}.ai-tutor-message.user .message-bubble{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.message-bubble p{margin:0 0 .5em;word-wrap:break-word}.message-bubble p:last-child{margin-bottom:0}.message-bubble strong{font-weight:700}.message-bubble em{font-style:italic}.message-bubble ul,.message-bubble ol{margin:.5em 0;padding-left:1.5em}.message-bubble li{margin:.25em 0}.message-bubble h1,.message-bubble h2,.message-bubble h3{margin:.5em 0 .25em;font-weight:700}.message-bubble h1{font-size:1.3em}.message-bubble h2{font-size:1.15em}.message-bubble h3{font-size:1.05em}.message-bubble code{background:#00000014;padding:.15em .4em;border-radius:4px;font-family:SF Mono,Monaco,Courier New,monospace;font-size:.9em}.ai-tutor-message.user .message-bubble code{background:#fff3}.message-bubble pre{background:#0000000d;padding:.75em;border-radius:8px;overflow-x:auto;margin:.5em 0}.message-bubble pre code{background:none;padding:0}.message-bubble blockquote{border-left:3px solid #667eea;margin:.5em 0;padding-left:1em;color:#555}.message-bubble.loading{background:#fff;border:2px solid #e0e0e0;padding:16px}.typing-indicator{display:flex;gap:5px;align-items:center;justify-content:center}.typing-indicator span{width:8px;height:8px;background:#667eea;border-radius:50%;animation:typingBounce 1.4s infinite}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.7}30%{transform:translateY(-10px);opacity:1}}.ai-tutor-input-container{display:flex;gap:10px;padding:15px 20px;border-top:2px solid #e0e0e0;background:#fff;border-radius:0 0 20px 20px}.ai-tutor-input-container textarea{flex:1;border:2px solid #e0e0e0;border-radius:12px;padding:12px 15px;font-size:1em;font-family:inherit;resize:none;transition:border-color .2s}.ai-tutor-input-container textarea:focus{outline:none;border-color:#667eea}.ai-tutor-input-container textarea:disabled{background:#f5f5f5;cursor:not-allowed}.ai-tutor-send-btn{width:50px;height:50px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.5em;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ai-tutor-send-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 12px #667eea66}.ai-tutor-send-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.ai-tutor-modal{width:95%;max-height:90vh}.ai-tutor-avatar{width:50px;height:50px}.message-bubble{max-width:80%}.ai-tutor-header h3{font-size:1.1em}}.floating-chat-button{position:fixed;bottom:220px;right:30px;width:70px;height:70px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;box-shadow:0 4px 20px #667eea66;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:2000;color:#fff;animation:floatIn .5s ease}.floating-chat-button:hover{transform:scale(1.1);box-shadow:0 6px 30px #667eea99}.floating-chat-button:active{transform:scale(.95)}@keyframes floatIn{0%{opacity:0;transform:translateY(100px) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}.chat-bubble-icon{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.chat-bubble-icon svg{width:100%;height:100%}.chat-dots{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:3px;align-items:center}.chat-dots span{width:4px;height:4px;background:#fff;border-radius:50%;animation:dotPulse 1.5s infinite}.chat-dots span:nth-child(2){animation-delay:.2s}.chat-dots span:nth-child(3){animation-delay:.4s}@keyframes dotPulse{0%,60%,to{opacity:.4;transform:scale(1)}30%{opacity:1;transform:scale(1.3)}}.chat-button-label{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);background:#667eeae6;color:#fff;padding:5px 12px;border-radius:12px;font-size:.85em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease}.floating-chat-button:hover .chat-button-label{opacity:1}.floating-chat-button:before{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:50%;border:2px solid #667eea;opacity:0;animation:ringPulse 2s infinite}@keyframes ringPulse{0%{transform:scale(.8);opacity:0}50%{opacity:.5}to{transform:scale(1.2);opacity:0}}@media (max-width: 768px){.floating-chat-button{width:60px;height:60px;bottom:200px;right:20px}.chat-bubble-icon{width:35px;height:35px}.chat-button-label{display:none}}@media (max-width: 480px){.floating-chat-button{bottom:15px;right:15px}}.teacher-auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.teacher-auth-box{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:500px;width:100%;overflow:hidden}.teacher-auth-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:40px 30px;text-align:center}.teacher-auth-header h2{margin:0 0 10px;font-size:2rem}.teacher-auth-header p{margin:0;opacity:.9;font-size:1rem}.teacher-auth-tabs{display:flex;background:#f5f5f5}.tab-button{flex:1;padding:15px;border:none;background:transparent;cursor:pointer;font-size:1rem;font-weight:500;color:#666;transition:all .3s ease;border-bottom:3px solid transparent}.tab-button:hover{background:#667eea1a}.tab-button.active{color:#667eea;border-bottom-color:#667eea;background:#fff}.teacher-auth-form{padding:30px}.form-group{margin-bottom:20px}.form-group input,.form-group select{width:100%;padding:12px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .3s ease;box-sizing:border-box}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.field-hint{margin:8px 0 0;font-size:.85rem;color:#f57c00;line-height:1.4}.teacher-password-group{background:#fff3e0;padding:15px;border-radius:8px;border:2px solid #ffb74d;margin-bottom:25px}.teacher-password-group label{color:#e65100}.success-message{background:#e8f5e9;color:#2e7d32;padding:12px 15px;border-radius:8px;margin-bottom:20px;font-size:.95rem;border-left:4px solid #4caf50;font-weight:500}.submit-button{width:100%;padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.submit-button:active:not(:disabled){transform:translateY(0)}.submit-button:disabled{opacity:.6;cursor:not-allowed}.teacher-auth-footer{padding:20px 30px 30px;text-align:center}.info-text{margin:0;color:#666;font-size:.9rem;line-height:1.5}@media (max-width: 600px){.teacher-auth-header h2{font-size:1.5rem}.teacher-auth-form{padding:20px}}.kurs-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4facfe,#00f2fe);padding:20px}.kurs-login-box{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:450px;width:100%;overflow:hidden}.kurs-login-header{background:#fff;padding:40px 30px 30px;text-align:center}.tutor-image{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:20px;border:4px solid #4facfe;box-shadow:0 4px 12px #4facfe4d}.kurs-login-header h2{margin:0 0 10px;color:#2c3e50;font-size:1.8rem}.kurs-login-header p{margin:0;color:#7f8c8d;font-size:1rem}.kurs-login-form{padding:30px}.form-group{margin-bottom:25px}.form-group label{display:block;margin-bottom:8px;color:#333;font-weight:500;font-size:.95rem}.form-group input{width:100%;padding:12px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .3s ease;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.form-hint{display:block;margin-top:6px;color:#7f8c8d;font-size:.85rem;font-style:italic}.error-message{background:#ffebee;color:#c62828;padding:12px 15px;border-radius:8px;margin-bottom:20px;font-size:.95rem;border-left:4px solid #c62828}.login-button{width:100%;padding:14px;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #4facfe4d}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4facfe66}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{opacity:.6;cursor:not-allowed}.kurs-login-footer{padding:20px 30px 30px;text-align:center;border-top:1px solid #e0e0e0}.teacher-link{margin:0}.teacher-link a{color:#667eea;text-decoration:none;font-weight:500;transition:color .2s ease}.teacher-link a:hover{color:#764ba2;text-decoration:underline}@media (max-width: 600px){.kurs-login-header h2{font-size:1.5rem}.tutor-image{width:100px;height:100px}.kurs-login-form{padding:20px}}.teacher-dashboard{min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:20px}.dashboard-header{background:#fff;border-radius:15px;padding:30px;margin-bottom:30px;box-shadow:0 4px 6px #0000001a;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.dashboard-title h1{margin:0 0 5px;color:#2c3e50;font-size:2rem}.dashboard-title p{margin:0;color:#7f8c8d;font-size:1.1rem}.logout-button{padding:10px 20px;background:#e74c3c;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease}.logout-button:hover{background:#c0392b;transform:translateY(-2px)}.dashboard-section{background:#fff;border-radius:15px;padding:30px;margin-bottom:30px;box-shadow:0 4px 6px #0000001a}.dashboard-section h2{margin-top:0;color:#2c3e50}.create-kurs-button{width:100%;padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d}.create-kurs-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:15px;padding:30px;max-width:500px;width:100%;box-shadow:0 20px 60px #0000004d}.modal-content h2{margin-top:0;color:#2c3e50}.modal-buttons{display:flex;gap:10px;margin-top:20px}.btn-primary,.btn-secondary{flex:1;padding:12px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover{background:#5568d3}.btn-secondary{background:#e0e0e0;color:#333}.btn-secondary:hover{background:#d0d0d0}.kurs-created-info{text-align:center}.kurs-created-info h3{color:#27ae60;margin-bottom:20px}.kurs-credentials{background:#f8f9fa;border-radius:10px;padding:20px;margin:20px 0}.credential-item{display:flex;justify-content:space-between;align-items:center;margin:10px 0}.credential-item code{background:#fff;padding:8px 15px;border-radius:5px;font-size:1.1rem;font-weight:600;color:#667eea;border:2px solid #667eea}.warning-text{background:#fff3cd;border-left:4px solid #f39c12;padding:12px 15px;border-radius:5px;margin:15px 0;font-size:.95rem;text-align:left}.empty-state{text-align:center;padding:40px;color:#7f8c8d}.empty-state p{font-size:1.1rem;margin:10px 0}.kurse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px}.kurs-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;padding:20px;border:2px solid #dee2e6;transition:all .3s ease}.kurs-card:hover{box-shadow:0 6px 20px #0000001a;transform:translateY(-2px)}.kurs-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:15px;border-bottom:2px solid #dee2e6}.kurs-header h3{margin:0;color:#2c3e50}.delete-button{background:none;border:none;font-size:1.5rem;cursor:pointer;opacity:.6;transition:opacity .2s ease}.delete-button:hover{opacity:1}.kurs-info{margin-bottom:20px}.info-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.info-row code{background:#fff;padding:6px 12px;border-radius:5px;font-weight:600;color:#667eea}.modes-section h4{margin:15px 0 10px;color:#2c3e50;font-size:1rem}.modes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mode-checkbox{display:flex;align-items:center;padding:10px;background:#fff;border-radius:8px;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.mode-checkbox:hover{border-color:#667eea;background:#f8f9ff}.mode-checkbox input[type=checkbox]{width:18px;height:18px;margin-right:10px;cursor:pointer}.mode-checkbox span{font-size:.95rem;color:#2c3e50}.mode-checkbox input[type=checkbox]:checked+span{font-weight:600;color:#667eea}.ai-section{margin-top:20px;padding-top:20px;border-top:2px solid #dee2e6}.ai-section h4{margin:0 0 15px;color:#2c3e50;font-size:1rem}.ai-toggle{display:flex;align-items:center;padding:12px;background:#fff;border-radius:8px;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.ai-toggle:hover{border-color:#667eea;background:#f8f9ff}.ai-toggle input[type=checkbox]{width:20px;height:20px;margin-right:12px;cursor:pointer}.ai-toggle span{font-size:1rem;color:#2c3e50;font-weight:500}.ai-toggle input[type=checkbox]:checked+span{font-weight:600;color:#667eea}.ai-info{margin:10px 0 0;padding:10px 12px;background:#f8f9fa;border-radius:6px;font-size:.9rem;color:#555}.ai-guide{margin-top:12px}.ai-guide-toggle{background:none;border:none;color:#667eea;cursor:pointer;font-size:.9rem;padding:4px 0;font-weight:500}.ai-guide-toggle:hover{color:#4a5bd6;text-decoration:underline}.ai-guide-content{margin-top:10px;padding:16px;background:#f0f4ff;border-radius:8px;border:1px solid #d4daf0;font-size:.88rem;line-height:1.5}.ai-guide-block{margin-bottom:12px}.ai-guide-block:last-of-type{margin-bottom:8px}.ai-guide-block strong{display:block;margin-bottom:4px;color:#2c3e50}.ai-guide-block ul{margin:0;padding-left:20px;color:#444}.ai-guide-block ul li{margin-bottom:2px}.ai-guide-content a{color:#667eea}.ai-guide-contact{margin:8px 0 0;padding-top:8px;border-top:1px solid #d4daf0;font-size:.85rem;color:#666}.dashboard-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#7f8c8d}@media (max-width: 768px){.dashboard-header{flex-direction:column;align-items:flex-start}.dashboard-title h1{font-size:1.5rem}.kurse-grid,.modes-grid{grid-template-columns:1fr}.info-row{flex-direction:column;align-items:flex-start;gap:5px}}.app{min-height:100vh;display:flex;flex-direction:column;position:relative}.app:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(./hintergrund-Vn2OsoxE.png);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.15;z-index:-1;pointer-events:none}.app-header{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);color:var(--text-inverse);padding:var(--spacing-xl) var(--spacing-lg);text-align:center;box-shadow:var(--shadow-lg)}.app-header h1{color:var(--text-inverse);margin-bottom:var(--spacing-sm)}.subtitle{font-size:var(--font-lg);color:#ffffffe6;margin:0}.app-main{flex:1;padding:var(--spacing-2xl) var(--spacing-lg);max-width:1200px;width:100%;margin:0 auto}.app-footer{background-color:var(--primary-dark);color:var(--text-inverse);padding:var(--spacing-lg);text-align:center;margin-top:auto}.app-footer p{margin:0;font-size:var(--font-sm)}.menu-container{display:flex;justify-content:center;align-items:center}.menu-card{max-width:800px;width:100%}.menu-card h2{text-align:center;margin-bottom:var(--spacing-md)}.menu-card>p{text-align:center;color:var(--text-secondary);margin-bottom:var(--spacing-xl);font-size:var(--font-lg)}.mode-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.mode-button{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-lg);background-color:var(--bg-tertiary);border:2px solid var(--text-light);border-radius:var(--radius-lg);text-align:left;transition:all var(--transition-normal)}.mode-button:hover{border-color:var(--accent-color);background-color:var(--bg-secondary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.mode-button.primary{border-color:var(--accent-color);background-color:var(--accent-color);color:var(--text-inverse)}.mode-button.primary:hover{background-color:var(--accent-dark);border-color:var(--accent-dark)}.mode-number{display:inline-block;width:32px;height:32px;background-color:var(--accent-color);color:var(--text-inverse);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:var(--spacing-sm)}.mode-button.primary .mode-number{background-color:var(--text-inverse);color:var(--accent-color)}.mode-title{font-size:var(--font-xl);font-weight:600;margin-bottom:var(--spacing-xs);display:block}.mode-description{font-size:var(--font-sm);color:var(--text-secondary);display:block}.mode-button.primary .mode-description{color:#ffffffe6}.mode-container{max-width:1000px;margin:0 auto}.back-button{background-color:var(--bg-secondary);color:var(--primary-color);border:2px solid var(--text-light);padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-lg);font-weight:500}.back-button:hover{border-color:var(--primary-color);background-color:var(--bg-tertiary)}.kurs-info-header{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-md);flex-wrap:wrap}.kurs-name{background:#fff3;padding:8px 16px;border-radius:20px;font-weight:500;font-size:.95rem}.logout-button-small{background:#fff3;border:2px solid rgba(255,255,255,.4);color:#fff;padding:6px 16px;border-radius:20px;font-weight:500;cursor:pointer;transition:all .3s ease;font-size:.9rem}.logout-button-small:hover{background:#ffffff4d;border-color:#fff9}.kurs-info-banner{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-left:4px solid #2196f3;padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg)}.kurs-info-banner p{margin:0;color:#1565c0;font-weight:500}.mode-button.disabled{opacity:.5;cursor:not-allowed;background-color:#f5f5f5;border-color:#e0e0e0}.mode-button.disabled:hover{transform:none;box-shadow:none;border-color:#e0e0e0;background-color:#f5f5f5}.mode-button.disabled .mode-number{background-color:#bdbdbd}.mode-button.disabled .mode-title,.mode-button.disabled .mode-description{color:#9e9e9e}@media (max-width: 768px){.app-header,.app-main{padding:var(--spacing-lg) var(--spacing-md)}.mode-buttons{grid-template-columns:1fr}.mode-button{padding:var(--spacing-md)}.mode-title{font-size:var(--font-lg)}.kurs-info-header{flex-direction:column;gap:var(--spacing-sm)}}:root{--primary-color: #2c3e50;--primary-light: #34495e;--primary-dark: #1a252f;--accent-color: #3498db;--accent-light: #5dade2;--accent-dark: #2980b9;--secondary-color: #e67e22;--secondary-light: #f39c12;--secondary-dark: #d35400;--bg-primary: #ecf0f1;--bg-secondary: #ffffff;--bg-tertiary: #f8f9fa;--text-primary: #2c3e50;--text-secondary: #7f8c8d;--text-light: #95a5a6;--text-inverse: #ffffff;--success-color: #27ae60;--success-light: #2ecc71;--error-color: #e74c3c;--error-light: #ec7063;--warning-color: #f39c12;--info-color: #3498db;--electron-color: #3498db;--cation-color: #e67e22;--anion-sulfate: #f39c12;--anion-nitrate: #e74c3c;--anion-chloride: #95a5a6;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .15);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--font-xs: 12px;--font-sm: 14px;--font-md: 16px;--font-lg: 18px;--font-xl: 24px;--font-2xl: 32px;--font-3xl: 48px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-modal: 1000;--z-tooltip: 2000}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2c2c2c;--bg-tertiary: #363636;--text-primary: #ecf0f1;--text-secondary: #bdc3c7;--text-light: #95a5a6}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}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-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}#root{min-height:100vh;display:flex;flex-direction:column}h1{font-size:var(--font-3xl);font-weight:700;margin-bottom:var(--spacing-lg);color:var(--primary-color)}h2{font-size:var(--font-2xl);font-weight:600;margin-bottom:var(--spacing-md);color:var(--primary-color)}h3{font-size:var(--font-xl);font-weight:600;margin-bottom:var(--spacing-sm);color:var(--primary-light)}p{margin-bottom:var(--spacing-md);color:var(--text-primary)}a{color:var(--accent-color);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-dark);text-decoration:underline}button{font-family:inherit;font-size:var(--font-md);padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-weight:500}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{font-family:inherit;font-size:var(--font-md);padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--text-light);border-radius:var(--radius-md);background-color:var(--bg-secondary);color:var(--text-primary);transition:border-color var(--transition-fast)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-color)}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.card{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-center{display:flex;justify-content:center;align-items:center}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.text-center{text-align:center}.formula{font-family:Times New Roman,Times,serif;font-style:italic}.subscript{font-size:.75em;vertical-align:sub}.superscript{font-size:.75em;vertical-align:super}.background-container{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat}.background-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ffffffe6;z-index:0}.background-container>*{position:relative;z-index:1}@media (max-width: 768px){html{font-size:14px}.container{padding:var(--spacing-md)}h1{font-size:var(--font-2xl)}h2{font-size:var(--font-xl)}}