*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--ns-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);background-color:var(--ns-bg-main, #f8fafc);color:var(--ns-text-main, #1e293b);line-height:1.5;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}.lab-header{height:64px;background:var(--ns-bg-surface, #ffffff);border-bottom:1px solid var(--ns-border-glass, #e2e8f0);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;box-shadow:var(--ns-shadow-sm, 0 1px 3px rgba(0,0,0,.08));z-index:50;position:sticky;top:0}.header-brand{display:flex;align-items:center;gap:.75rem}.portal-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none;font-size:1.25rem;font-weight:700;color:var(--ns-primary, #1e40af);border-radius:var(--ns-radius-md, 12px);background:var(--ns-bg-main, #f8fafc);border:1px solid var(--ns-border-glass, #e2e8f0);transition:var(--ns-transition-fast, .15s ease)}.portal-link:hover{background:var(--ns-bg-glass-hover, #f1f5f9);color:var(--ns-primary-hover, #1d4ed8)}.brand-logo{height:36px;width:auto;display:block}.header-title-wrap{display:flex;align-items:center;gap:.5rem}.lab-title{font-size:var(--ns-font-xl, 20px);font-weight:800;color:var(--ns-text-title, #0f172a)}.lab-badge{font-size:var(--ns-font-xs, 12px);font-weight:700;background:#eff6ff;color:var(--ns-primary, #1e40af);border:1px solid #bfdbfe;padding:.2rem .6rem;border-radius:var(--ns-radius-full, 9999px)}.header-actions{display:flex;align-items:center;gap:.5rem}.btn-icon{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--ns-radius-md, 12px);border:1px solid var(--ns-border-glass, #e2e8f0);background:var(--ns-bg-surface, #ffffff);color:var(--ns-text-main, #1e293b);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--ns-transition-fast, .15s ease)}.btn-icon:hover{background:var(--ns-bg-glass-hover, #f1f5f9);border-color:var(--ns-border-glass-hover, #cbd5e1)}.btn-icon.active{background:#eff6ff;color:var(--ns-primary, #1e40af);border-color:#93c5fd}.btn-reset-main{padding:0 .85rem;gap:.4rem}.workspace{flex:1;display:grid;grid-template-columns:360px 1fr;gap:1rem;padding:1rem;height:calc(100vh - 64px);overflow:hidden}@media(max-width:1024px){.workspace{grid-template-columns:1fr;height:auto;overflow-y:auto}}.sidebar-panel{background:var(--ns-bg-surface, #ffffff);border:1px solid var(--ns-border-glass, #e2e8f0);border-radius:var(--ns-radius-lg, 18px);box-shadow:var(--ns-shadow-sm, 0 1px 3px rgba(0,0,0,.08));display:flex;flex-direction:column;overflow:hidden}.panel-tabs{display:flex;border-bottom:1px solid var(--ns-border-glass, #e2e8f0);background:#f8fafc}.tab-btn{flex:1;min-height:48px;background:none;border:none;font-size:var(--ns-font-sm, 14px);font-weight:600;color:var(--ns-text-muted, #475569);cursor:pointer;border-bottom:2px solid transparent;transition:var(--ns-transition-fast, .15s ease)}.tab-btn:hover{color:var(--ns-primary, #1e40af)}.tab-btn.active{color:var(--ns-primary, #1e40af);border-bottom-color:var(--ns-primary, #1e40af);background:#fff}.panel-body{flex:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.section-label{font-size:var(--ns-font-xs, 12px);font-weight:700;letter-spacing:.05em;color:var(--ns-text-dim, #64748b);text-transform:uppercase;margin-bottom:.5rem}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.item-card{background:#fff;border:1px solid var(--ns-border-glass, #e2e8f0);border-radius:var(--ns-radius-md, 12px);padding:.65rem;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:grab;-webkit-user-select:none;user-select:none;transition:var(--ns-transition-fast, .15s ease)}.item-card:hover{border-color:var(--ns-border-brand-glow, rgba(242, 153, 74, .5));box-shadow:var(--ns-shadow-md, 0 4px 16px rgba(0,0,0,.08));transform:translateY(-2px)}.item-card.dragging{opacity:.5;cursor:grabbing}.item-visual{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:.25rem}.weight-knob{width:10px;height:10px;border-radius:50%;margin-bottom:2px}.weight-body{padding:2px 8px;border-radius:6px;color:#fff;font-size:11px;font-weight:700}.item-emoji{font-size:2.2rem;line-height:1;margin-bottom:.25rem}.item-info{margin-bottom:.5rem;display:flex;flex-direction:column;gap:2px}.item-name{font-size:var(--ns-font-sm, 14px);font-weight:700;color:var(--ns-text-title, #0f172a)}.item-mass{font-size:12px;font-weight:600;color:var(--ns-primary, #1e40af)}.item-actions{display:flex;gap:.35rem;width:100%}.btn-add-side{flex:1;min-height:44px;font-size:12px;font-weight:700;border:1px solid var(--ns-border-glass, #e2e8f0);background:#f8fafc;border-radius:var(--ns-radius-sm, 8px);cursor:pointer;color:var(--ns-text-main, #1e293b);transition:var(--ns-transition-fast, .15s ease)}.btn-add-side:hover{background:#eff6ff;border-color:#93c5fd;color:var(--ns-primary, #1e40af)}.quests-container{display:flex;flex-direction:column;gap:.75rem}.quest-card{background:#fff;border:1px solid var(--ns-border-glass, #e2e8f0);border-radius:var(--ns-radius-md, 12px);padding:.85rem;display:flex;flex-direction:column;gap:.5rem;transition:var(--ns-transition-fast, .15s ease)}.quest-card.active{border-color:var(--ns-accent, #f2994a);background:#fffbeb}.quest-title{font-size:var(--ns-font-sm, 14px);font-weight:800;color:var(--ns-text-title, #0f172a)}.quest-desc{font-size:13px;color:var(--ns-text-muted, #475569);line-height:1.4}.btn-start-quest{min-height:44px;background:var(--ns-accent, #f2994a);color:#fff;border:none;border-radius:var(--ns-radius-sm, 8px);font-size:13px;font-weight:700;cursor:pointer;transition:var(--ns-transition-fast, .15s ease)}.btn-start-quest:hover{background:var(--ns-accent-hover, #eb8c3a)}.option-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#f8fafc;border:1px solid var(--ns-border-glass, #e2e8f0);border-radius:var(--ns-radius-md, 12px)}.option-text strong{display:block;font-size:var(--ns-font-sm, 14px);color:var(--ns-text-title, #0f172a)}.option-text span{font-size:12px;color:var(--ns-text-dim, #64748b)}.switch{position:relative;display:inline-block;width:48px;height:26px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#cbd5e1;transition:.2s;border-radius:26px}.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;transition:.2s;border-radius:50%}input:checked+.slider{background-color:var(--ns-primary, #1e40af)}input:checked+.slider:before{transform:translate(22px)}.experiment-stage{display:flex;flex-direction:column;gap:.75rem;position:relative;min-height:0}.stage-top-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.status-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem;border-radius:var(--ns-radius-full, 9999px);font-size:var(--ns-font-sm, 14px);font-weight:700;box-shadow:var(--ns-shadow-sm, 0 1px 3px rgba(0,0,0,.08))}.status-badge.balanced{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}.status-badge.tilted{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}.status-badge.locked{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}.live-indicator{width:8px;height:8px;border-radius:50%;background-color:currentColor}.viewport-container{flex:1;min-height:380px;background:#f1f5f9;border:1px solid var(--ns-border-glass, #e2e8f0);border-radius:var(--ns-radius-lg, 18px);overflow:hidden;position:relative;box-shadow:inset 0 2px 6px #0000000a}.viewport-container canvas{width:100%!important;height:100%!important;display:block;touch-action:none}.hud-telemetry-bar{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;pointer-events:none;z-index:10}.hud-pill{background:var(--ns-bg-glass, rgba(255, 255, 255, .9));-webkit-backdrop-filter:var(--ns-backdrop-blur, blur(12px));backdrop-filter:var(--ns-backdrop-blur, blur(12px));border:1px solid var(--ns-border-glass, #e2e8f0);border-radius:var(--ns-radius-md, 12px);padding:.5rem .85rem;box-shadow:var(--ns-shadow-md, 0 4px 16px rgba(0,0,0,.08));display:flex;flex-direction:column;min-width:110px;text-align:center;pointer-events:auto}.hud-pill-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--ns-text-dim, #64748b)}.hud-pill-val{font-size:var(--ns-font-lg, 18px);font-weight:800;color:var(--ns-text-title, #0f172a)}.hud-pill-val.balanced{color:var(--ns-success, #10b981)}.hud-pill-val.tilted{color:var(--ns-danger, #ef4444)}.quest-banner{position:absolute;top:5.2rem;left:1.5rem;right:1.5rem;background:#fffffff5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:2px solid var(--ns-accent, #f2994a);border-radius:var(--ns-radius-md, 14px);padding:1rem 1.25rem;box-shadow:0 10px 30px #0f172a26;z-index:20;animation:slideDown .3s cubic-bezier(.16,1,.3,1);pointer-events:auto}.quest-banner.success{border-color:var(--ns-success, #10b981);background:#f0fdf4fa}.quest-banner-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.quest-banner-badge{font-size:13px;font-weight:800;text-transform:uppercase;color:var(--ns-accent, #f2994a);letter-spacing:.5px}.quest-banner.success .quest-banner-badge{color:var(--ns-success, #059669)}.btn-close-quest{background:none;border:none;font-size:1.4rem;line-height:1;color:var(--ns-text-dim, #64748b);cursor:pointer;padding:.2rem .5rem;border-radius:6px;transition:.15s ease}.btn-close-quest:hover{background:#0000000f;color:var(--ns-text-title, #0f172a)}.quest-banner-body{font-size:14px;color:var(--ns-text-title, #1e293b);line-height:1.5}.quest-card.completed{border-color:var(--ns-success, #10b981);background:#f0fdf4}.quest-card.completed .quest-title:after{content:" ✓ Hoàn thành";font-size:11px;font-weight:800;color:#059669;background:#dcfce7;padding:2px 6px;border-radius:4px;margin-left:6px}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.arrestment-bar{background:var(--ns-bg-surface, #ffffff);border:1px solid var(--ns-border-glass, #e2e8f0);border-radius:var(--ns-radius-md, 12px);padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--ns-shadow-sm, 0 1px 3px rgba(0,0,0,.08))}.lever-info{display:flex;flex-direction:column}.lever-title{font-size:var(--ns-font-sm, 14px);font-weight:800;color:var(--ns-text-title, #0f172a)}.lever-sub{font-size:12px;color:var(--ns-text-muted, #475569)}.btn-lock-toggle{min-height:48px;min-width:160px;padding:0 1.25rem;border-radius:var(--ns-radius-md, 12px);border:none;font-size:var(--ns-font-sm, 14px);font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:var(--ns-transition-fast, .15s ease)}.btn-lock-toggle.locked{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.btn-lock-toggle.locked:hover{background:#fee2e2}.btn-lock-toggle.released{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.btn-lock-toggle.released:hover{background:#d1fae5}.pans-shelf{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.pan-zone-card{background:var(--ns-bg-surface, #ffffff);border:2px dashed var(--ns-border-glass, #e2e8f0);border-radius:var(--ns-radius-md, 12px);padding:.75rem;display:flex;flex-direction:column;gap:.5rem;min-height:100px;transition:var(--ns-transition-fast, .15s ease)}.pan-zone-card.drag-over{border-color:var(--ns-primary, #1e40af);background:#eff6ff}.pan-zone-header{display:flex;align-items:center;justify-content:space-between}.pan-zone-title{font-size:var(--ns-font-sm, 14px);font-weight:800;color:var(--ns-text-title, #0f172a)}.btn-clear-pan{min-height:36px;padding:0 .5rem;font-size:11px;font-weight:700;background:none;border:1px solid var(--ns-border-glass, #e2e8f0);border-radius:var(--ns-radius-sm, 8px);cursor:pointer;color:var(--ns-text-muted, #475569);transition:var(--ns-transition-fast, .15s ease)}.btn-clear-pan:hover{background:#fef2f2;color:#ef4444;border-color:#fca5a5}.chips-container{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.empty-hint{font-size:12px;color:var(--ns-text-dim, #64748b);font-style:italic}.pan-item-chip{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:var(--ns-radius-full, 9999px);padding:.2rem .6rem;display:inline-flex;align-items:center;gap:.35rem;font-size:12px;font-weight:600}.chip-remove{background:#0000000d;border:none;font-size:16px;font-weight:800;color:#64748b;cursor:pointer;line-height:1;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;transition:all .15s ease}.chip-remove:hover{background:#fee2e2;color:#ef4444;transform:scale(1.1)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal-overlay.open{display:flex}.modal-card{background:#fff;border-radius:var(--ns-radius-lg, 18px);box-shadow:var(--ns-shadow-lg, 0 10px 30px rgba(0,0,0,.12));width:100%;max-width:640px;max-height:85vh;overflow-y:auto;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem;border-bottom:1px solid var(--ns-border-glass, #e2e8f0)}.modal-title{font-size:var(--ns-font-xl, 20px);font-weight:800;color:var(--ns-text-title, #0f172a)}.btn-close-modal{min-width:44px;min-height:44px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ns-text-muted, #475569);border-radius:var(--ns-radius-md, 12px)}.btn-close-modal:hover{background:#f1f5f9}.modal-content{padding:1.25rem;display:flex;flex-direction:column;gap:1rem;font-size:var(--ns-font-sm, 14px);color:var(--ns-text-main, #1e293b);line-height:1.6}.modal-content h3{font-size:var(--ns-font-md, 16px);color:var(--ns-primary, #1e40af);margin-top:.5rem}.modal-content ol,.modal-content ul{padding-left:1.25rem}.modal-footer{padding:1rem 1.25rem;border-top:1px solid var(--ns-border-glass, #e2e8f0);display:flex;justify-content:flex-end}.btn-primary{min-height:44px;padding:0 1.5rem;background:var(--ns-primary, #1e40af);color:#fff;border:none;border-radius:var(--ns-radius-md, 12px);font-size:var(--ns-font-sm, 14px);font-weight:700;cursor:pointer;transition:var(--ns-transition-fast, .15s ease)}.btn-primary:hover{background:var(--ns-primary-hover, #1d4ed8)}