:root{--primary:#2563eb;--primary-dark:#1d4ed8;--secondary:#10b981;--background:#f8fafc;--text:#1e293b;--gray-light:#e2e8f0;--gray:#94a3b8;--gray-dark:#64748b;--danger:#ef4444;--success:#10b981;--warning:#f59e0b}.spatialint-app{min-height:100vh;width:100%;background-color:#f0f2f5;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial}header{background-color:#1a1a2e;color:white;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,.2)}header h1{margin:0;font-size:1.5rem}.controls{display:flex;gap:1rem}.back-button,.voice-button{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s}.back-button{background-color:transparent;color:white;border:1px solid rgba(255,255,255,.3)}.back-button:hover{background-color:rgba(255,255,255,.1)}.voice-button{background-color:#16213e;color:white}.voice-button.active{background-color:#4caf50}main{padding:2rem}.webxr-support{background-color:#f8f9fa;border-radius:4px;margin-bottom:12px;border-left:4px solid #0066cc}.ar-warning,.webxr-support{padding:8px 12px;color:#000}.ar-warning{background-color:#fff3cd;border-left:4px solid #ffc107}.ar-small-text{font-size:.85rem;opacity:.8;color:#000}.webxr-container{position:relative;width:100%;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;background-color:#000}.webxr-instructions{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background-color:rgba(255,255,255,.9);color:#000;padding:1rem;border-radius:8px;text-align:center;max-width:400px;z-index:10}.webxr-canvas{height:100%;width:100%}.ar-device-check{font-style:italic;color:#666}.device-warning{background-color:rgba(255,193,7,.2);padding:5px 10px;border-radius:4px;font-size:.9rem;margin-top:10px}main{flex:1;background-color:var(--background);overflow-y:auto;height:calc(100vh - 60px);display:flex;flex-direction:column}button{padding:.5rem 1rem;border-radius:.5rem;font-weight:500;cursor:pointer;transition:all .3s ease;border:1px solid transparent;font-size:.95rem}.primary-button{background-color:var(--primary);color:white;font-size:1rem;padding:.7rem 1.5rem;box-shadow:0 4px 8px rgba(37,99,235,.3);letter-spacing:.02em}.primary-button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 15px rgba(37,99,235,.4)}.primary-button:disabled{background-color:var(--gray);cursor:not-allowed;box-shadow:none;transform:none}.voice-button{background-color:white;border:1px solid var(--gray-light);color:var(--text);padding:.6rem 1.2rem;display:flex;align-items:center;gap:.5rem}.voice-button.active{background-color:var(--secondary);color:white;border-color:var(--secondary);box-shadow:0 2px 8px rgba(16,185,129,.3)}.back-button{background-color:white;border:1px solid var(--gray-light);color:var(--text);padding:.6rem 1.2rem;display:flex;align-items:center;gap:.5rem}.training-hub{max-width:1000px;width:100%;margin:0 auto;padding:1.5rem 1rem;display:flex;flex-direction:column;flex:1}.training-hub h2{margin-bottom:1.5rem;font-size:1.75rem;text-align:center;color:var(--text);font-weight:600}.hololens-detected{background-color:#e8f5ff;border-left:4px solid #0078d7;padding:1rem;margin-bottom:2rem;border-radius:4px}.hololens-icon{margin-right:1rem}.hololens-message{flex:1}.hololens-message h3{margin:0 0 .5rem}.hololens-message p{line-height:1.4}.hololens-button-text{margin-left:.5rem;font-size:.9em;opacity:.8}.module-grid{display:grid;grid-template-columns:repeat(2,1fr);max-width:900px;gap:1.5rem;margin:0 auto 2rem}.module-card{background-color:white;border-radius:.75rem;padding:1.5rem;box-shadow:0 4px 10px rgba(0,0,0,.08);cursor:pointer;transition:all .3s ease;border:2px solid transparent;display:flex;flex-direction:column}.module-card:hover{transform:translateY(-4px);box-shadow:0 8px 15px rgba(0,0,0,.1)}.module-card.selected{border-color:var(--primary);box-shadow:0 0 0 2px rgba(37,99,235,.2)}.module-card h3{margin-bottom:.5rem;font-size:1.25rem;color:var(--primary)}.module-card p{font-size:.95rem;color:var(--gray-dark)}.module-info{margin-top:1rem;display:flex;justify-content:space-between}.module-info span{font-size:.9rem;color:var(--text);font-weight:500}.action-buttons{display:flex;justify-content:center;gap:1.5rem;margin-top:1.5rem}.ar-environment{display:flex;flex-direction:column}.ar-environment,.ar-training-environment{position:relative;height:100%;width:100%;background-color:#000;overflow:hidden;flex:1}.ar-training-environment{color:white}.ar-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:linear-gradient(180deg,#111,#000)}.ar-scene{position:relative;width:100%;height:100%}.ar-overlay{position:absolute;top:20px;left:20px;width:calc(100% - 40px);z-index:10}.ar-instructions{background-color:rgba(255,255,255,.9);padding:1.25rem;border-radius:.75rem;max-width:450px;backdrop-filter:blur(5px);border:1px solid rgba(0,0,0,.1);color:#000}.ar-canvas{width:100%;height:100%;background-color:#222}.ar-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem;text-align:center;color:#000}.highlight-info{margin-top:1rem;padding:.75rem;background-color:rgba(255,255,255,.8);border-radius:.5rem;color:#000}.voice-command-system{position:absolute;bottom:20px;right:20px;background-color:rgba(0,0,0,.8);padding:1.25rem;border-radius:.75rem;width:320px;color:white;box-shadow:0 5px 20px rgba(0,0,0,.25);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);z-index:20}.voice-status{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.voice-indicator{width:12px;height:12px;border-radius:50%;background-color:var(--gray)}.voice-indicator.active{background-color:var(--success);animation:pulse 2s infinite}.voice-toggle{margin-left:auto;padding:.25rem .5rem;font-size:.875rem}.voice-feedback{margin-top:.5rem;border-top:1px solid var(--gray-dark);padding-top:.5rem}.command{font-size:.875rem;color:var(--gray);margin-bottom:.25rem}.response{font-weight:500}.task-tracker{position:absolute;top:20px;right:20px;background-color:rgba(255,255,255,.95);padding:1.25rem;border-radius:.75rem;width:380px;max-height:calc(100% - 160px);overflow-y:auto;color:var(--text);box-shadow:0 5px 20px rgba(0,0,0,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}.task-tracker h3{margin-bottom:.75rem;font-size:1.1rem}.progress-bar{height:8px;background-color:var(--gray-light);border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background-color:var(--success);border-radius:4px;transition:width .3s ease}.progress-text{font-size:.875rem;color:var(--gray-dark);margin-bottom:1rem}.steps-list{flex-direction:column}.step,.steps-list{display:flex;gap:.75rem}.step{padding-bottom:.75rem;border-bottom:1px solid var(--gray-light)}.step-indicator{width:24px;height:24px;border-radius:50%;background-color:var(--gray-light);color:var(--gray-dark);display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:500;flex-shrink:0}.step.completed .step-indicator{background-color:var(--success);color:white}.step.current .step-indicator{background-color:var(--primary);color:white}.step-content{flex:1}.step-text{margin-bottom:.5rem;font-size:.95rem}.step-complete-btn{background-color:var(--primary);color:white;border:none;padding:.3rem .75rem;font-size:.8rem;border-radius:.25rem}.ai-tutor{position:absolute;bottom:20px;left:20px;background-color:rgba(255,255,255,.95);border-radius:.75rem;width:380px;box-shadow:0 5px 20px rgba(0,0,0,.15);color:var(--text);transition:all .3s ease;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);z-index:20}.ai-tutor.minimized{width:auto}.tutor-header{padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--gray-light)}.tutor-header h3{font-size:1.1rem;margin:0}.tutor-toggle{background:none;border:none;color:var(--primary);cursor:pointer;font-size:.875rem;padding:0}.tutor-content{padding:1rem}.thinking{display:flex;flex-direction:column;align-items:center;padding:1rem 0}.thinking-dots{display:flex;gap:.25rem}.thinking-dots span{width:10px;height:10px;border-radius:50%;background-color:var(--primary);animation:bounce 1.4s ease-in-out infinite both}.thinking-dots span:first-child{animation-delay:-.32s}.thinking-dots span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.thinking-text{margin-top:.5rem;font-size:.875rem;color:var(--gray-dark)}.tutor-message{background-color:var(--background);border-radius:.5rem;padding:1rem;line-height:1.5;margin-bottom:1rem;border-left:4px solid var(--primary)}.tutor-actions{display:flex;gap:.5rem}.tutor-action-btn{background-color:white;border:1px solid var(--gray-light);color:var(--text);padding:.5rem .75rem;font-size:.875rem;border-radius:.25rem;flex:1}.tutor-action-btn:hover{background-color:var(--gray-light)}.selection-notice{background-color:rgba(255,193,7,.2);border-left:3px solid #ff9800;padding:10px 15px;margin-bottom:15px;border-radius:4px;color:#774d00;font-size:.9rem;text-align:center}.module-card.selected{border:4px solid #0078d7!important;box-shadow:0 0 20px rgba(0,120,215,.5)!important;transform:scale(1.05)}.flash-selection{animation:flash-border .5s ease}@keyframes flash-border{0%{border-color:#ffffff;box-shadow:0 0 20px rgba(255,255,255,.9)}50%{border-color:#00ff00;box-shadow:0 0 30px rgba(0,255,0,.9)}to{border-color:#0078d7;box-shadow:0 0 20px rgba(0,120,215,.5)}}.primary-button:not([disabled]){animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,120,215,.7)}70%{box-shadow:0 0 0 15px rgba(0,120,215,0)}to{box-shadow:0 0 0 0 rgba(0,120,215,0)}}.primary-button[disabled]{opacity:.6;background-color:#666;cursor:not-allowed}.hololens-detected{margin-bottom:20px;padding:15px;background-color:#e3f2fd;border-radius:8px;display:flex;align-items:center}.hololens-icon{font-size:2.5rem;margin-right:15px}.hololens-mode .module-card,.hololens-optimized .module-card{padding:20px;min-height:180px;position:relative;cursor:pointer;transition:all .3s ease;min-width:300px;margin:15px;border:3px solid #666;background-color:rgba(255,255,255,.9)}.hololens-mode .module-card.hololens-dwelling,.hololens-mode .module-card.hovered,.hololens-mode .module-card:hover,.hololens-optimized .module-card.hololens-dwelling,.hololens-optimized .module-card.hovered,.hololens-optimized .module-card:hover{border-color:#0078d7;transform:scale(1.05);box-shadow:0 0 15px rgba(0,120,215,.7)}.hololens-mode .module-card h3,.hololens-optimized .module-card h3{font-size:1.4rem;margin-bottom:15px;color:#0078d7;font-weight:700}.hololens-optimized .module-card.selected{border:4px solid #0078d7!important;box-shadow:0 0 20px rgba(0,120,215,.5)!important;transform:scale(1.05)}.hololens-optimized .module-card .selection-check{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background-color:#4CAF50;color:white;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;font-weight:700}.hololens-mode .module-card.selected .selection-check,.hololens-optimized .module-card.selected .selection-check{opacity:1}#hololens-dwell-progress{position:absolute;height:8px;bottom:0;left:0;background-color:#00AAFF;transition:width .1s linear;z-index:9999;border-radius:0 4px 4px 0}.hololens-selected{animation:selectedPulse .5s}@keyframes selectedPulse{0%{box-shadow:0 0 0 0 rgba(0,255,0,.7)}50%{box-shadow:0 0 0 20px rgba(0,255,0,.5)}to{box-shadow:0 0 0 0 rgba(0,255,0,0)}}.hololens-mode .module-card,.hololens-mode .primary-button,.hololens-mode button{border:3px solid rgba(255,255,255,.8);box-shadow:0 4px 8px rgba(0,0,0,.2)}.hololens-optimized .primary-button{padding:16px 30px;font-size:1.2rem;min-width:250px}.hololens-optimized .gaze-indicator{position:fixed;width:20px;height:20px;border-radius:50%;border:2px solid white;background-color:rgba(0,120,215,.5);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(0,120,215,.7)}.hololens-message h3{margin-top:0;margin-bottom:8px;color:#0078d7}.hololens-message p{margin:0}.hololens-message strong{color:#0078d7;font-weight:600}.hololens-button-text{font-size:.9rem;opacity:.9;font-style:italic}