/* VibeQ: the quantum side reuses style.css; this file holds only what the circuit page adds */
.circuit-wrap { position: absolute; inset: 0; overflow: auto; background: #070a0e; }
.legend-box { position: absolute; left: 10px; right: 10px; top: 54px; z-index: 3; background: rgba(16, 22, 32, .96); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.legend-box.hidden { display: none; }
.legend-box .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; }
.legend-box a { color: var(--accent); }
#circuit { display: block; min-width: 100%; }
.circuit-ascii { position: absolute; inset: 0; margin: 0; padding: 54px 16px 16px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.25; color: var(--text); background: #070a0e; }
.wire { stroke: #4b5a6e; stroke-width: 1.5; }
.cwire { stroke: #4b5a6e; stroke-width: 1; }
.qlabel { fill: #8b9bb0; font-family: var(--mono); font-size: 12px; }
.gate rect { stroke-width: 1.2; rx: 5; }
.gate text { fill: #0b0f14; font-family: var(--mono); font-size: 12px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.gate.fam-h rect { fill: #64d2ff; stroke: #2aa5d8; }
.gate.fam-pauli rect { fill: #f28c8c; stroke: #c45a5a; }
.gate.fam-rot rect { fill: #f2c46b; stroke: #c99a3a; }
.gate.fam-phase rect { fill: #b59cf2; stroke: #8465d6; }
.gate.fam-meas rect { fill: #4ade80; stroke: #2aa85c; }
.gate.fam-other rect { fill: #cfd8e3; stroke: #8b9bb0; }
.gate.fam-reset rect { fill: #e2e8f0; stroke: #94a3b8; }
.ctrl { fill: #64d2ff; }
.cline { stroke: #64d2ff; stroke-width: 2; }
.targ circle { fill: none; stroke: #64d2ff; stroke-width: 2; }
.targ line { stroke: #64d2ff; stroke-width: 2; }
.swapx line { stroke: #f2c46b; stroke-width: 2.2; }
.barrier { stroke: #8b9bb0; stroke-width: 1.2; stroke-dasharray: 4 4; }
.mline { stroke: #4ade80; stroke-width: 1.4; stroke-dasharray: 2 3; }
.bars { display: flex; flex-direction: column; gap: 5px; padding: 8px 12px; }
.bar { display: grid; grid-template-columns: 110px 1fr 70px; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; }
.bar .track { height: 12px; background: #1a2230; border-radius: 6px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--accent); border-radius: 6px; }
.bar.sampled .fill { background: #4ade80; }
.bar .v { color: var(--muted); text-align: right; }
.bloch { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 12px 12px; }
.bloch-q { width: 112px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bloch-q svg { display: block; margin: 0 auto 4px; }
h4.sec { margin: 10px 12px 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qasm { margin: 0 12px 12px; padding: 10px; background: #0b0f14; border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 11px; white-space: pre; overflow: auto; max-height: 260px; }
.amp { display: grid; grid-template-columns: 90px 1fr 1fr 70px; gap: 8px; padding: 2px 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.amp.head { color: var(--text); }
.topbar-right a.btn { text-decoration: none; display: inline-flex; align-items: center; color: var(--text); }