:root{--bg-primary: #080c14;--text-primary: #f8fafc;--text-muted: #94a3b8;--accent-cyan: #06b6d4;--accent-blue: #3b82f6;--accent-purple: #8b5cf6;--status-green: #10b981;--status-yellow: #f59e0b;--status-red: #ef4444;--font-family: "Outfit", system-ui, -apple-system, sans-serif;--panel-bg: rgba(13, 20, 35, .65);--panel-border: rgba(255, 255, 255, .08);--radius-md: 12px;--shadow-md: 0 10px 25px -5px rgba(0, 0, 0, .4), 0 8px 10px -6px rgba(0, 0, 0, .4)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden;user-select:none}#app-canvas{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:1}.ui-layer{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:10;pointer-events:none}.glass-panel,.glass-btn,.modal-backdrop,.segmented-control{pointer-events:auto}.glass-panel{background:var(--panel-bg);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid var(--panel-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:1.5rem}.glass-btn{background:#ffffff0d;border:1px solid var(--panel-border);color:var(--text-primary);padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-family:var(--font-family);font-weight:600;transition:all .2s ease;display:inline-block;text-align:center}.glass-btn:hover{background:#ffffff26;transform:translateY(-1px)}.glass-btn.active{background:var(--accent-cyan);border-color:var(--accent-blue);color:#fff;box-shadow:0 0 15px #06b6d466}.glass-btn.disabled,.glass-btn:disabled,.glass-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;background:#ffffff05;border-color:#ffffff0a;color:var(--text-muted);box-shadow:none;transform:none}.glass-btn.disabled:hover,.glass-btn:disabled:hover,.glass-btn[disabled]:hover,.glass-btn-disabled:hover{background:#ffffff05;transform:none;box-shadow:none}.hidden{display:none!important}.top-left-container{position:absolute;top:20px;left:20px;width:280px;display:flex;flex-direction:column;gap:1rem;z-index:50}.top-left-hud{width:100%}.top-left-hud h2{font-size:1.2rem;margin-bottom:1rem;color:var(--accent-cyan)}.hud-stat{margin-bottom:.8rem}.hud-stat label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.toggle-switch{position:relative;display:inline-block;width:34px;height:18px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#ffffff1a;transition:.4s;border-radius:18px;border:1px solid var(--panel-border)}.toggle-slider:before{position:absolute;content:"";height:12px;width:12px;left:2px;bottom:1px;background-color:var(--text-muted);transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:var(--status-green);border-color:var(--status-green)}input:checked+.toggle-slider:before{transform:translate(16px);background-color:#fff}.progress-bar{width:100%;height:8px;background:#00000080;border-radius:4px;margin-top:4px;overflow:hidden}.progress-bar .fill{height:100%;background:var(--accent-cyan);transition:width .1s linear}.top-right-btn{position:absolute;top:20px;right:20px;border-radius:50%;width:45px;height:45px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}.sidebar{display:flex;flex-direction:column;gap:1.5rem}.sidebar h3{font-size:.9rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}.tool-group,.scenario-group{display:flex;flex-direction:column;gap:.5rem}.custom-upload{margin-top:.5rem}.custom-upload label{width:100%}.debug-panel{position:absolute;bottom:20px;right:20px;max-height:80vh;overflow-y:auto}.debug-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}.debug-grid label{font-size:.85rem;display:flex;align-items:center;gap:.5rem;cursor:pointer}.debug-sliders{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}.debug-sliders label{display:flex;flex-direction:column;font-size:.85rem;gap:.5rem}.modal-backdrop{position:absolute;top:0;left:0;width:100vw;height:100vh;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{min-width:400px;text-align:center}.modal-content.danger{border-color:var(--status-red);box-shadow:0 0 30px #ef44444d}.modal-content.danger h2{color:var(--status-red);margin-bottom:1rem}.modal-content p{margin-bottom:.8rem;line-height:1.5}.modal-content button{margin-top:1.5rem}#loading-screen{position:absolute;top:0;left:0;width:100vw;height:100vh;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;z-index:999;transition:opacity .5s ease;pointer-events:none;opacity:0}#loading-screen.active{opacity:1;pointer-events:auto}.loader-content{text-align:center}.loader-content h1{font-size:3rem;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2rem}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--accent-cyan);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.segmented-control{display:flex;background:#0006;border-radius:8px;padding:2px;border:1px solid var(--panel-border);margin-top:8px}.segmented-control label{flex:1;text-align:center;padding:4px 8px;font-size:.8rem;color:var(--text-muted);cursor:pointer;border-radius:6px;transition:all .2s ease;user-select:none}.segmented-control input[type=radio]{display:none}.segmented-control input[type=radio]:checked+label{background:var(--accent-cyan);color:#fff;box-shadow:0 1px 3px #0000004d}#mode-nav{flex-direction:column;gap:4px}#mode-nav label{padding:8px 12px;text-align:center}.mode-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;max-width:90vw;z-index:60}#ppe-panel{left:20px;top:210px;transform:none;width:320px}#assessment-panel{top:50%;left:50%;transform:translate(-50%,-50%);z-index:65}.exam-option-card{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease;user-select:none}.exam-option-card:hover{background:#06b6d41a;border-color:#06b6d466}.exam-option-card input[type=radio]{accent-color:var(--accent-cyan);width:16px;height:16px;cursor:pointer}.exam-option-card.selected{background:#06b6d426;border-color:var(--accent-cyan)}.exam-option-card.correct{background:#22c55e26;border-color:#22c55e}.exam-option-card.incorrect{background:#ef444426;border-color:#ef4444}.exam-feedback-box.correct-bg{background:#22c55e26;border:1px solid #22c55e;color:#4ade80}.exam-feedback-box.incorrect-bg{background:#ef444426;border:1px solid #ef4444;color:#f87171}#ppe-detail-panel{left:auto;right:20px;top:100px;transform:none;width:340px}.mode-panel h2{margin-bottom:1.5rem;color:var(--accent-cyan);text-align:center}.mode-content{line-height:1.6}.mode-content ul,.mode-content ol{padding-left:1.5rem}.mode-content li{margin-bottom:.8rem}.ppe-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.ppe-item-btn{display:flex;align-items:center;background:#ffffff08;border:1px solid var(--panel-border);border-radius:8px;padding:.6rem .8rem;cursor:pointer;transition:all .2s ease;text-align:left;user-select:none}.ppe-item-btn:hover{background:#ffffff14;border-color:#fff3}.ppe-item-btn.selected{background:#06b6d426;border-color:var(--accent-cyan);box-shadow:0 0 12px #06b6d440}.ppe-item-btn input[type=checkbox]{margin-right:.75rem;width:18px;height:18px;cursor:pointer;accent-color:var(--accent-cyan);flex-shrink:0}.ppe-item-label{font-weight:600;font-size:.9rem;color:var(--text-primary);flex-grow:1}.ppe-preview-container{width:100%;height:160px;background:#00000059;border-radius:8px;margin-bottom:1rem;position:relative;overflow:hidden;border:1px solid var(--panel-border)}#ppe-preview-canvas{width:100%;height:100%;display:block}