*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d1117;--surface: #161b22;--surface2: #1e2433;--surface3: #252d3d;--border: #30363d;--accent: #a78bfa;--accent-dim: #7c3aed;--up: #60a5fa;--down: #f87171;--green: #34d399;--orange: #fb923c;--text: #e6edf3;--text-dim: #8b949e;--text-muted:#4b5563;--radius: 10px;--radius-sm: 6px;--shadow: 0 4px 24px rgba(0,0,0,.5)}html,body{height:100%;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}#root{height:100%}@keyframes beamFlow{0%{stroke-dashoffset:26}to{stroke-dashoffset:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.app-root{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{background:linear-gradient(135deg,#13111c,#1a1533);border-bottom:1px solid var(--border);padding:0 20px;flex-shrink:0;box-shadow:0 2px 16px #0006}.header-content{display:flex;align-items:center;justify-content:space-between;height:56px}.app-title{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.3px}.app-subtitle{font-size:12px;color:var(--text-dim);margin-left:10px}.header-badge{background:#a78bfa26;color:var(--accent);border:1px solid rgba(167,139,250,.3);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.3px}.app-layout{display:flex;flex:1;overflow:hidden;gap:0}.toolbox{width:168px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;padding:14px 10px;display:flex;flex-direction:column;gap:4px}.toolbox-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);padding:0 4px 6px}.toolbox-hint{font-size:10px;color:var(--text-muted);padding:0 4px 10px;border-bottom:1px solid var(--border);margin-bottom:8px}.toolbox-section{margin-bottom:10px}.toolbox-section-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;padding:4px}.toolbox-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border);cursor:grab;-webkit-user-select:none;user-select:none;transition:all .15s;font-size:12px;color:var(--text);margin-bottom:4px}.toolbox-item:hover{background:var(--surface3);border-color:var(--accent);box-shadow:0 0 0 1px #a78bfa33;transform:translate(2px)}.toolbox-item:active{cursor:grabbing}.toolbox-item-dragging{opacity:.4}.toolbox-item-icon{font-size:16px}.toolbox-item-label{font-size:11px;font-weight:500}.pipeline-column{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}.pipeline-column-header{padding:12px 20px 10px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:10px;flex-shrink:0}.pipeline-column-title{font-size:13px;font-weight:600;color:var(--text)}.pipeline-column-hint{font-size:11px;color:var(--text-dim)}.pipeline-container{flex:1;overflow-y:auto;padding:20px;display:flex;justify-content:center;transition:background .2s}.pipeline-container.pipeline-drop-over{background:#a78bfa0a}.pipeline-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);font-size:13px;text-align:center;padding:60px 20px;border:2px dashed var(--border);border-radius:var(--radius);width:100%;max-width:340px;margin:auto}.pipeline-empty-icon{font-size:28px;opacity:.4}.pipeline-inner{position:relative;width:300px;min-width:300px}.beam-canvas{position:absolute;top:0;left:50%;transform:translate(-50%);pointer-events:none;z-index:0}.pipeline-slot{position:relative;display:flex;align-items:center;justify-content:center;z-index:1}.pipeline-drop-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#a78bfa33;border:1px dashed var(--accent);color:var(--accent);padding:6px 16px;border-radius:20px;font-size:11px;font-weight:500;pointer-events:none;white-space:nowrap}.pipeline-item{display:flex;align-items:stretch;gap:0;width:100%;position:relative;border-radius:var(--radius);transition:box-shadow .15s;animation:fadeIn .2s ease}.pipeline-item-dragging{box-shadow:0 8px 32px #00000080}.drag-handle{display:flex;align-items:center;justify-content:center;width:20px;font-size:14px;color:var(--text-muted);cursor:grab;border-radius:var(--radius) 0 0 var(--radius);background:#ffffff05;border:1px solid var(--border);border-right:none;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color .15s,background .15s}.drag-handle:hover{color:var(--accent);background:#a78bfa14}.drag-handle:active{cursor:grabbing}.pipeline-block-wrapper{flex:1;min-width:0}.remove-btn{display:flex;align-items:center;justify-content:center;width:22px;background:#f871710f;border:1px solid var(--border);border-left:none;border-radius:0 var(--radius) var(--radius) 0;color:var(--text-muted);font-size:16px;cursor:pointer;line-height:1;flex-shrink:0;transition:all .15s;padding:0}.remove-btn:hover{background:#f8717126;color:var(--down);border-color:#f871714d}.block{background:var(--surface2);border:1.5px solid var(--border);border-radius:0;padding:10px 12px;position:relative;transition:border-color .15s,box-shadow .15s;width:100%}.block-selected{border-color:var(--accent)!important;box-shadow:inset 0 0 0 1px #a78bfa26}.block-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.block-icon{font-size:16px}.block-title{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}.block-body{display:flex;flex-direction:column;gap:6px}.block-label{font-size:11px;color:var(--text-dim);display:flex;flex-direction:column;gap:4px}.block-hint{font-size:10px;color:var(--text-muted);line-height:1.4}.block-select{background:var(--surface3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:4px 8px;font-size:12px;cursor:pointer;width:100%}.block-select:focus{outline:none;border-color:var(--accent)}.block-slider{width:100%;accent-color:var(--accent);margin-top:2px}.block-port{position:absolute;left:50%;transform:translate(-50%);width:10px;height:10px;border-radius:50%;background:var(--surface3);border:2px solid var(--border)}.block-port-in{top:-5px}.block-port-out{bottom:-5px}.block-source{border-left:3px solid var(--green);background:linear-gradient(135deg,#162520 0%,var(--surface2) 100%)}.block-magnet{border-left:3px solid var(--accent);background:linear-gradient(135deg,#1a1530 0%,var(--surface2) 100%)}.magnet-axis-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;color:#0d1117}.axis-presets{display:flex;gap:3px;flex-wrap:wrap}.axis-btn{background:var(--surface3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}.axis-btn:hover{border-color:var(--accent);color:var(--text)}.axis-btn-active{color:#0d1117!important;border-color:transparent}.axis-advanced{background:#0003;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;display:flex;flex-direction:column;gap:6px;animation:fadeIn .15s ease}.block-ports-dual{display:flex;justify-content:space-between;padding:0 20px;margin-top:4px}.block-port-label{font-size:12px;font-weight:700}.up-label{color:var(--up)}.down-label{color:var(--down)}.block-filter{border-left:3px solid var(--orange);background:linear-gradient(135deg,#1e1910 0%,var(--surface2) 100%)}.filter-toggle-row{display:flex;align-items:center;gap:8px}.filter-label{font-size:11px;color:var(--text-dim);flex-shrink:0}.filter-toggle{padding:4px 14px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .15s;letter-spacing:.5px}.filter-up{background:#60a5fa33;color:var(--up);border:1px solid rgba(96,165,250,.4)}.filter-up:hover{background:#60a5fa4d}.filter-down{background:#f8717133;color:var(--down);border:1px solid rgba(248,113,113,.4)}.filter-down:hover{background:#f871714d}.block-detector{border-left:3px solid var(--up);background:linear-gradient(135deg,#111820 0%,var(--surface2) 100%)}.no-result{font-style:italic;opacity:.7}.detector-histogram{display:flex;flex-direction:column;gap:5px}.hist-row{display:flex;align-items:center;gap:6px;animation:fadeIn .3s ease}.hist-label{font-size:13px;font-weight:700;width:14px;text-align:center;flex-shrink:0}.spin-up-label{color:var(--up)}.spin-down-label{color:var(--down)}.hist-bar-bg{flex:1;height:14px;background:#ffffff0d;border-radius:3px;overflow:hidden}.hist-bar{height:100%;border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1);min-width:2px}.hist-bar-up{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.hist-bar-down{background:linear-gradient(90deg,#dc2626,#f87171)}.hist-bar-other{background:linear-gradient(90deg,#7c3aed,#a78bfa)}.hist-pct{font-size:11px;font-weight:700;color:var(--text);width:30px;text-align:right;flex-shrink:0}.detector-total{font-size:10px;color:var(--text-dim);border-top:1px solid var(--border);padding-top:5px;margin-top:2px}.right-panel{width:260px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}.controls-panel{display:flex;flex-direction:column;gap:0}.controls-section{padding:14px 16px;border-bottom:1px solid var(--border)}.controls-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-dim);margin-bottom:10px}.controls-buttons{display:flex;flex-direction:column;gap:7px}.btn{width:100%;padding:9px 14px;border-radius:var(--radius-sm);border:none;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:.3px}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-run{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;box-shadow:0 2px 12px #7c3aed66}.btn-run:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#9361f0);box-shadow:0 4px 16px #7c3aed80;transform:translateY(-1px)}.btn-run:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--surface3);border:1px solid var(--border);color:var(--text-dim)}.btn-secondary:hover:not(:disabled){background:var(--surface2);border-color:var(--accent);color:var(--text)}.preset-list{display:flex;flex-direction:column;gap:5px}.preset-btn{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);cursor:pointer;text-align:left;transition:all .15s;width:100%}.preset-btn:hover{border-color:#a78bfa66;background:var(--surface3)}.preset-btn-active{border-color:var(--accent);background:#a78bfa14}.preset-emoji{font-size:16px;flex-shrink:0;margin-top:1px}.preset-text{flex:1}.preset-name{font-size:11px;font-weight:600;color:var(--text);margin-bottom:1px}.preset-desc{font-size:10px;color:var(--text-dim);line-height:1.4}.toggle-list{display:flex;flex-direction:column;gap:8px}.toggle-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-row:hover{color:var(--text)}.toggle-row input[type=checkbox]{accent-color:var(--accent);width:13px;height:13px;cursor:pointer}.preset-info{background:#a78bfa0f;border:1px solid rgba(167,139,250,.2);border-radius:var(--radius-sm);padding:10px 12px}.preset-info-title{font-size:12px;font-weight:600;color:var(--accent);margin-bottom:4px}.preset-info-detail{font-size:11px;color:var(--text-dim);line-height:1.5}.bloch-panel{padding:14px 16px;border-top:1px solid var(--border)}.bloch-panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-dim);margin-bottom:4px}.bloch-panel-hint{font-size:10px;color:var(--text-muted);margin-bottom:10px}.bloch-spheres-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.bloch-sphere-wrapper{display:flex;flex-direction:column;align-items:center;gap:4px}.bloch-label{font-size:10px;font-weight:600;color:var(--accent);text-align:center}.bloch-sphere-svg{border-radius:50%;background:#0d1117}.bloch-coords{display:flex;gap:6px;font-size:9px;font-family:monospace}.bloch-coord{font-weight:600}.drag-overlay-card{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface3);border:1px solid var(--accent);border-radius:var(--radius);font-size:13px;font-weight:600;color:var(--text);box-shadow:var(--shadow);cursor:grabbing;white-space:nowrap}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media(max-width:768px){.app-layout{flex-direction:column}.toolbox{width:100%;flex-direction:row;flex-wrap:wrap;height:auto;border-right:none;border-bottom:1px solid var(--border);padding:10px}.right-panel{width:100%;border-left:none;border-top:1px solid var(--border)}}