body,html{background-color:#f0f0f0;width:100%;height:100%;margin:0;padding:0;font-family:Inter,sans-serif;overflow:hidden}#loader,#miniControls,.toolbar,#viewport,#sidePanel{transition:opacity .3s,transform .3s}body.empty-state{background:radial-gradient(circle at top,#ededed 0%,#e4e4e5 45%,#cbcbcb 100%);justify-content:center;align-items:center;display:flex;overflow-y:auto}body.empty-state #loader,body.empty-state #miniControls,body.empty-state .toolbar,body.empty-state #viewport,body.empty-state #sidePanel,body.empty-state #safetyModal{display:none}#viewport{cursor:grab;background-color:#f4f4f9;width:100vw;height:100vh;position:relative}#viewport:active{cursor:grabbing}#world{transform-origin:0 0;background-image:radial-gradient(#ccc 1px,#0000 1px);background-size:20px 20px;width:100%;height:100%;position:absolute}#loader{z-index:10000;color:#fff;background:#1e1e23;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s;display:flex;position:fixed;top:0;left:0}.spinner{border:4px solid #ffffff4d;border-top-color:#007acc;border-radius:50%;width:40px;height:40px;margin-bottom:20px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#loadSubMsg{color:#888;margin-top:10px;font-size:12px}body.moving iframe{pointer-events:none}iframe{background:#fff;border:none;display:block}.toolbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;background:#141417f2;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:20px;width:450px;padding:10px 20px;transition:opacity .3s,transform .3s;display:flex;position:fixed;bottom:30px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0006}body.recording-mode .toolbar{opacity:0;pointer-events:none;transform:translate(-50%)translateY(20px)}#miniControls{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:9999;opacity:0;pointer-events:none;background:#141417e6;border:1px solid #ffffff1a;border-radius:12px;gap:10px;padding:8px;transition:opacity .3s,transform .3s;display:flex;position:fixed;top:20px;right:20px;transform:translateY(-20px)}body.recording-mode #miniControls{opacity:1;pointer-events:auto;transform:translateY(0)}.btn-icon{color:#ccc;cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s;display:flex}.btn-icon:hover{color:#fff;background:#555;transform:scale(1.05)}.btn-play{color:#2ecc71;background:#2ecc7126}.btn-pause{color:#e74c3c;background:#e74c3c26;display:none}.btn-rec{color:#ff5f56;border:1px solid #ff5f56}.btn-rec.recording{color:#fff;background:#ff5f56;animation:2s infinite pulse}.btn-safety{color:#3498db;background:#3498db26}.mini-stop{color:#fff;background:#ff5f56;border-radius:6px;width:36px;height:36px}.mini-play{color:#fff;background:#ffffff1a;border-radius:6px;width:36px;height:36px}@keyframes pulse{0%{box-shadow:0 0 #ff5f56b3}70%{box-shadow:0 0 0 10px #ff5f5600}to{box-shadow:0 0 #ff5f5600}}.timeline-container{flex-direction:column;flex-grow:1;display:flex}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%}input[type=range]::-webkit-slider-runnable-track{background:#444;border-radius:4px;width:100%;height:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;width:20px;height:20px;margin-top:-6px;transition:transform .1s;box-shadow:0 0 10px #ffffff80}.time-display{color:#888;text-align:right;-webkit-user-select:none;user-select:none;font-family:Consolas,monospace;font-size:10px}.time-display span{color:#fff;font-weight:700}.banner-card{cursor:auto;background:#fff;border:1px solid #e0e0e0;border-radius:6px;flex-direction:column;transition:box-shadow .2s,border-color .2s;display:flex;position:absolute;overflow:hidden;box-shadow:0 4px 10px #0000001a}.banner-card.dragging{opacity:.9;cursor:grabbing;box-shadow:0 20px 40px #0000004d;z-index:1000!important}.banner-header{color:#555;cursor:grab;-webkit-user-select:none;user-select:none;background:#f1f1f1;border-bottom:1px solid #ddd;justify-content:space-between;padding:6px 10px;font-size:11px;font-weight:700;display:flex}.banner-header:active{cursor:grabbing}#sidePanel{z-index:15000;background:#1e1e23;border-left:1px solid #444;flex-direction:column;width:0;height:100%;transition:width .3s;display:flex;position:fixed;top:0;right:0;box-shadow:-10px 0 30px #00000080}#sidePanel.open{width:450px}#dragHandle{cursor:ew-resize;z-index:15001;background:0 0;width:10px;position:absolute;top:0;bottom:0;left:-5px}#dragHandle:hover{background:#3498db4d}.panel-header{white-space:nowrap;background:#25252b;border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.panel-header h2{color:#fff;margin:0;font-size:16px;font-weight:600}.btn-close-panel{color:#888;cursor:pointer;background:0 0;border:none;font-size:20px}.btn-close-panel:hover{color:#fff}.panel-content{opacity:0;flex-grow:1;padding:20px;transition:opacity .2s;overflow-y:auto}#sidePanel.open .panel-content{opacity:1}.analysis-card{background:#2a2a30;border:1px solid #333;border-radius:8px;margin-bottom:10px;overflow:hidden}.ac-header{cursor:pointer;background:#333;justify-content:space-between;align-items:center;padding:12px 15px;transition:background .2s;display:flex}.ac-header:hover{background:#3b3b42}.ac-title{color:#ddd;font-size:13px;font-weight:700}.ac-arrow{color:#888;transition:transform .2s;transform:rotate(0)}.analysis-card.collapsed .ac-body{display:none}.analysis-card.collapsed .ac-arrow{transform:rotate(-90deg)}.ac-body{background:#2a2a30;border-top:1px solid #444;padding:15px}.ac-status{border-radius:4px;margin-left:10px;padding:2px 6px;font-size:10px}.status-pass{color:#2ecc71;background:#2ecc7133;border:1px solid #2ecc71}.status-fail{color:#e74c3c;background:#e74c3c33;border:1px solid #e74c3c}.diff-text{color:#ddd;white-space:pre-wrap;word-break:break-word;background:#111;border-radius:4px;padding:10px;font-family:Consolas,monospace;font-size:12px;line-height:1.6}.diff-word-ok{color:#666}.diff-word-missing{color:#fff;background:#e74c3c;border-radius:2px;padding:0 2px;font-weight:700;text-decoration:underline}.modal-overlay{z-index:20000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal-overlay.open{display:flex}.modal-box{color:#fff;background:#1e1e23;border:1px solid #444;border-radius:12px;flex-direction:column;gap:15px;width:500px;padding:25px;display:flex;box-shadow:0 20px 50px #00000080}.modal-box h3{color:#fff;margin:0;font-size:18px}.modal-box textarea{color:#ddd;resize:none;background:#111;border:1px solid #333;border-radius:6px;height:120px;padding:10px;font-family:monospace;font-size:13px}.modal-box textarea:focus{border-color:#007acc;outline:none}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.btn-std{cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:700}.btn-cancel{color:#888;background:0 0}.btn-cancel:hover{color:#fff}.btn-confirm{color:#fff;background:#007acc}.btn-confirm:hover{background:#006abc}.upload-wrapper{z-index:12000;max-width:340px;position:fixed;top:24px;left:24px}body:not(.empty-state) .upload-wrapper{left:24px;right:auto}body.empty-state .upload-wrapper{max-width:min(420px,90vw);position:static}.upload-card{color:#f4f4f9;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#14141ceb;border:1px solid #ffffff14;border-radius:18px;padding:24px 28px;box-shadow:0 24px 60px #00000059}.upload-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.upload-card h1{margin:0;font-size:15px;font-weight:600}.upload-collapse-btn{color:#ffffff8c;cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:14px;display:flex}.upload-collapse-btn:hover{color:#fff;background:#ffffff14}.upload-subtitle{color:#ffffffb3;margin:12px 0 20px;font-size:14px;line-height:1.5}.upload-alert{color:#ffb3a6;background:#e74c3c26;border:1px solid #e74c3c66;border-radius:10px;margin-bottom:18px;padding:12px 14px;font-size:13px}.upload-form{flex-direction:column;gap:12px;display:flex}.upload-form label{letter-spacing:.3px;color:#fff9;text-transform:uppercase;font-size:12px}.upload-form input[type=file],.upload-form input[type=number]{color:#fff;background:#0c0c12e6;border:1px solid #ffffff14;border-radius:10px;padding:10px 12px;font-size:14px}.upload-form input[type=file]::file-selector-button{color:#dcefff;cursor:pointer;background:#3498db40;border:1px solid #3498db80;border-radius:6px;margin-right:12px;padding:6px 12px}.upload-form button{cursor:pointer;color:#fff;letter-spacing:.3px;background:linear-gradient(120deg,#3f87ff,#7c5cff);border:none;border-radius:10px;margin-top:8px;padding:12px 16px;font-size:14px;font-weight:600;transition:transform .15s,box-shadow .15s,filter .15s}.upload-form button:hover{filter:brightness(1.05);transform:translateY(-1px)}.upload-form button:active{transform:translateY(0)}body:not(.empty-state) .upload-wrapper.collapsed .upload-card{cursor:pointer;padding:10px 12px}body:not(.empty-state) .upload-wrapper.collapsed .upload-subtitle,body:not(.empty-state) .upload-wrapper.collapsed .upload-form,body:not(.empty-state) .upload-wrapper.collapsed .upload-alert{display:none}body:not(.empty-state) .upload-wrapper.collapsed .upload-collapse-btn{transform:rotate(45deg)}