:root{--upwardly-navy: #1e3a5f;--upwardly-navy-dark: #152a45;--upwardly-navy-light: #2a4a73;--upwardly-teal: #20b2aa;--upwardly-teal-dark: #1a9089;--upwardly-teal-light: #3fc9c1;--upwardly-cyan: #22d3ee;--upwardly-green-light: #4ade80;--upwardly-green: #22c55e;--upwardly-lime: #a3e635;--upwardly-gold: #f5a623;--upwardly-gold-dark: #d4900e;--upwardly-gold-light: #fbbf24;--upwardly-gradient: linear-gradient(135deg, var(--upwardly-navy) 0%, var(--upwardly-teal) 100%);--upwardly-gradient-reverse: linear-gradient(135deg, var(--upwardly-teal) 0%, var(--upwardly-navy) 100%);--upwardly-gradient-rise: linear-gradient(180deg, var(--upwardly-gold) 0%, var(--upwardly-lime) 20%, var(--upwardly-green-light) 50%, var(--upwardly-cyan) 80%, var(--upwardly-teal) 100%);--upwardly-gradient-progress: linear-gradient(90deg, var(--upwardly-teal) 0%, var(--upwardly-green) 100%);--color-success: #22c55e;--color-success-bg: #dcfce7;--color-error: #ef4444;--color-error-bg: #fef2f2;--color-warning: var(--upwardly-gold);--color-warning-bg: #fffbeb;--color-info: var(--upwardly-teal);--color-info-bg: #f0fdfa;--color-text-primary: #1f2937;--color-text-secondary: #6b7280;--color-text-muted: #9ca3af;--color-border: #e5e7eb;--color-border-light: #f3f4f6;--color-bg-light: #f9fafb;--color-bg-white: #ffffff;--color-primary: var(--upwardly-navy);--color-primary-hover: var(--upwardly-navy-dark);--color-primary-light: #e0f2fe;--color-secondary: var(--upwardly-teal);--color-secondary-hover: var(--upwardly-teal-dark);--color-accent: var(--upwardly-gold);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-brand: 0 10px 30px rgba(30, 58, 95, .3);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--cursor-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23374151' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z'/%3E%3Cpath fill='%23374151' d='M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") 2 22, crosshair}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1e3a5f,#20b2aa);min-height:100vh;padding:20px}.container{max-width:900px;margin:0 auto}.header{background:#fff;border-radius:15px;padding:30px;margin-bottom:20px;box-shadow:0 10px 30px #0003;text-align:center}h1{color:#1e3a5f;margin-bottom:10px;font-size:2em}.subtitle{color:#666;font-size:1.1em}.progress-bar{background:#fff;border-radius:10px;padding:15px 20px;margin-bottom:20px;box-shadow:0 5px 15px #0000001a;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.progress-text{font-weight:700;color:#1e3a5f;font-size:1.1em}.solutions-used{color:#6b7280;font-size:.95em}.question-card{background:#fff;border-radius:15px;padding:25px;margin-bottom:20px;box-shadow:0 10px 30px #0000001a;transition:transform .3s ease}.question-card:hover{transform:translateY(-5px)}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;gap:10px}.question-number{font-weight:700;color:#1e3a5f;font-size:1.2em}.solution-badge{background:#fff;color:#6b7280;padding:5px 12px;border-radius:20px;font-size:.85em;font-weight:600;border:1.5px solid #d1d5db}.question-text{font-size:1.1em;margin-bottom:15px;line-height:1.6;color:#333}.answer-input{width:100%;padding:12px;font-size:1em;border:2px solid #ddd;border-radius:8px;margin-bottom:15px;transition:border-color .3s}.answer-input:focus{outline:none;border-color:#1e3a5f}.answer-input.correct{border-color:#27ae60;background:#d5f4e6}.answer-input.incorrect{border-color:#e74c3c;background:#fadbd8}.radio-group,.checkbox-group{margin-bottom:15px}.radio-option,.checkbox-option{display:block;padding:12px;margin-bottom:8px;border:2px solid #ddd;border-radius:8px;cursor:pointer;transition:all .3s}.radio-option:hover,.checkbox-option:hover{background:#f8f9fa;border-color:#1e3a5f}.radio-option.selected{background:#e8eaf6;border-color:#1e3a5f}.radio-option.correct{background:#d5f4e6;border-color:#27ae60}.radio-option.incorrect{background:#fadbd8;border-color:#e74c3c}.checkbox-option.selected{background:#e8eaf6;border-color:#1e3a5f}.checkbox-option.correct{background:#d5f4e6;border-color:#27ae60}.checkbox-option.incorrect{background:#fadbd8;border-color:#e74c3c}input[type=radio],input[type=checkbox]{margin-right:10px}.work-area{margin-bottom:15px}.toggle-buttons{display:flex;gap:10px;margin-bottom:15px}.toggle-btn{flex:1;padding:10px;border:2px solid #1e3a5f;background:#fff;color:#1e3a5f;border-radius:8px;cursor:pointer;font-weight:700;transition:all .3s}.toggle-btn.active{background:#1e3a5f;color:#fff}.toggle-btn:hover{transform:translateY(-2px)}.type-work{width:100%;min-height:150px;padding:12px;font-size:1em;border:2px solid #ddd;border-radius:8px;resize:vertical;font-family:inherit}.draw-work{width:100%;border:2px solid #ddd;border-radius:8px;cursor:crosshair;display:block;background:#fff}.canvas-controls{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.canvas-btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-weight:700;transition:all .3s}.clear-canvas-btn{background:#e74c3c;color:#fff}.canvas-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.work-area-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.work-area-header h4{margin:0;color:#1e3a5f;font-size:1.1em}.canvas-container{overflow:visible}.canvas-wrapper{position:relative!important;display:inline-block;width:100%}.canvas-wrapper>.canvas-resize-btn{position:absolute!important;bottom:8px!important;right:8px!important;left:auto!important;top:auto!important;width:40px;height:40px;border:none;border-radius:8px;background:#1e3a5fb3;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10;padding:8px}.canvas-wrapper>.canvas-resize-btn:hover{background:#1e3a5fe6;transform:scale(1.05)}.canvas-wrapper>.canvas-resize-btn:active{transform:scale(.95)}.canvas-container .canvas-resize-btn .expand-icon{display:block}.canvas-container .canvas-resize-btn .collapse-icon,.canvas-container.height-expanded .canvas-resize-btn .expand-icon{display:none}.canvas-container.height-expanded .canvas-resize-btn .collapse-icon{display:block}.canvas-carousel-control{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;background:linear-gradient(135deg,#1e3a5f,#20b2aa);border-radius:50px;box-shadow:0 4px 15px #1e3a5f4d;width:240px;height:50px;overflow:hidden;border:2px solid #1e3a5f;margin-left:auto}.carousel-btn{background:none;border:none;cursor:pointer;height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease;color:#ffffffe6;outline:none}.carousel-btn:hover{background-color:#fff3;transform:scale(1.1)}.carousel-btn:active{background-color:#ffffff4d;transform:scale(.95)}.arrow{border:solid white;border-width:0 4px 4px 0;display:inline-block;padding:8px}.arrow-left{transform:rotate(135deg);margin-left:4px}.arrow-right{transform:rotate(-45deg);margin-right:4px}.carousel-btn:before{font-size:20px;font-weight:700;color:#fff}.carousel-prev:empty:before{content:"‹"}.carousel-next:empty:before{content:"›"}.carousel-label{text-align:center;font-weight:600;color:#fff;font-size:.95em;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}.drawing-tools-container{display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;gap:8px;background-color:#fff;padding:8px 12px;border-radius:30px;box-shadow:0 4px 12px #0000001a,0 1px 3px #00000014;border:1px solid #e5e7eb}.drawing-tools-container .tool-btn{width:40px;height:40px;min-width:40px;min-height:40px;border:none!important;outline:none;background:transparent;border-radius:10px;cursor:pointer;color:#374151;display:flex;justify-content:center;align-items:center;transition:all .2s ease;padding:0;box-sizing:border-box}.drawing-tools-container .tool-btn:hover{background-color:#f3f4f6}.drawing-tools-container .tool-btn.active{background-color:#e0e7ff;color:#4f46e5}.drawing-tools-container .tool-divider{width:1px;height:24px;background-color:#e5e7eb;margin:0 4px;flex-shrink:0}.drawing-tools-container .tool-btn.pen-btn svg{width:24px;height:24px}.drawing-tools-container .tool-btn.eraser-btn svg{width:24px;height:24px}.drawing-tools-container .tool-btn.eraser-btn circle{transition:stroke .2s ease}.drawing-tools-container .tool-btn.eraser-btn.active circle{stroke:#4f46e5}.canvas-btn.eraser-btn{background:#9b59b6;color:#fff}.canvas-btn.eraser-btn.active{background:#8e44ad;box-shadow:inset 0 2px 4px #0003}.button-group{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}.btn{flex:1;min-width:120px;padding:12px 20px;border:none;border-radius:8px;font-size:1em;font-weight:700;cursor:pointer;transition:all .3s}.check-btn{background:#1e3a5f;color:#fff}.check-btn:hover{background:#152a45;transform:translateY(-2px)}.solution-btn{background:#95a5a6;color:#fff}.solution-btn:hover:not(:disabled){background:#7f8c8d;transform:translateY(-2px)}.solution-btn:disabled{opacity:.5;cursor:not-allowed}.feedback{padding:12px;border-radius:8px;margin-top:15px;font-weight:700;display:none}.feedback.correct{background:#d5f4e6;color:#27ae60;display:block}.feedback.incorrect{background:#fadbd8;color:#e74c3c;display:block}.solution{background:#fff9e6;border-left:4px solid #f39c12;padding:20px;margin-top:15px;border-radius:8px;display:none}.solution.show{display:block}.solution h4{color:#f39c12;margin-bottom:15px;font-size:1.1em}.solution-step{background:#fff;padding:15px;margin-bottom:10px;border-radius:8px;border-left:4px solid #3498db}.solution-step:last-child{margin-bottom:0}.step-label{font-weight:700;color:#3498db;margin-bottom:8px}.step-content{color:#333;line-height:1.6}.highlight-box{background:#e8f4f8;border:2px solid #3498db;padding:10px;margin:10px 0;border-radius:6px;font-weight:700}table{width:100%;border-collapse:collapse;margin:15px 0}th,td{padding:12px;text-align:left;border:2px solid #ddd}th{background:#1e3a5f;color:#fff;font-weight:700}tr:nth-child(2n){background:#f8f9fa}@media (max-width: 600px){body{padding:10px}.header{padding:20px}h1{font-size:1.5em}.question-card{padding:15px}.button-group{flex-direction:column}.btn{min-width:100%}table{font-size:.9em}th,td{padding:8px}}.attempts-info{font-size:.9em;color:#666;margin-top:10px}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1000;justify-content:center;align-items:center}.modal-overlay.show{display:flex}.modal-content{background:#fff;border-radius:20px;padding:40px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.modal-header{text-align:center;margin-bottom:30px}.modal-header h2{color:#1e3a5f;margin-bottom:10px}.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px;margin:20px 0}.user-btn{padding:15px;border:2px solid #1e3a5f;background:#fff;color:#1e3a5f;border-radius:10px;cursor:pointer;font-size:1em;font-weight:700;transition:all .3s}.user-btn:hover{background:#1e3a5f;color:#fff;transform:translateY(-3px);box-shadow:0 5px 15px #1e3a5f4d}.user-info{background:#e8f4f8;border-radius:10px;padding:10px 20px;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center}.user-name{font-weight:700;color:#1e3a5f}.user-actions{display:flex;gap:10px}.switch-btn,.report-btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:.9em;font-weight:700;transition:all .3s}.switch-btn{background:#95a5a6;color:#fff}.switch-btn:hover{background:#7f8c8d}.report-btn{background:#3498db;color:#fff}.report-btn:hover{background:#2980b9}.report-section{margin:20px 0}.report-section h3{color:#1e3a5f;margin-bottom:15px;border-bottom:2px solid #667eea;padding-bottom:10px}.student-report{background:#f8f9fa;border-radius:10px;padding:15px;margin-bottom:15px}.student-report h4{color:#1e3a5f;margin-bottom:10px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:10px 0}.stat-item{background:#fff;padding:10px;border-radius:6px;border-left:4px solid #667eea}.stat-label{font-size:.85em;color:#666;margin-bottom:5px}.stat-value{font-size:1.2em;font-weight:700;color:#333}.question-detail{margin:10px 0;padding:10px;background:#fff;border-radius:6px}.question-detail-header{font-weight:700;margin-bottom:5px;color:#1e3a5f}.close-modal{background:#e74c3c;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:1em;font-weight:700;margin-top:20px;width:100%}.close-modal:hover{background:#c0392b}.time-badge{background:#3498db;color:#fff;padding:4px 8px;border-radius:4px;font-size:.85em;margin-left:10px}