/* ═══════════════════════════════════════════════════════
   QUANTUM TIFFANY ENGINE · circuit platform styles
   ═══════════════════════════════════════════════════════ */

.q-panel{
  background:linear-gradient(180deg,var(--panel),var(--obsidian));
  border:1px solid var(--gold-line);border-radius:var(--radius);
  padding:clamp(16px,2.5vw,24px);position:relative;
}
.q-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.q-panel-title{font-family:var(--font-cinzel);font-size:1.05rem;letter-spacing:0.04em;color:var(--bone);}
.q-panel-title svg{width:16px;height:16px;vertical-align:-2px;margin-right:8px;color:var(--gold);}

.q-chips{display:flex;gap:8px;flex-wrap:wrap;}
.q-chip{font-family:var(--font-mono);font-size:0.52rem;letter-spacing:0.08em;color:var(--bone-soft);
  border:1px solid var(--gold-line);border-radius:999px;padding:5px 12px;background:rgba(201,168,76,0.05);}
.q-chip b{color:var(--gold-bright);font-weight:400;}
.q-chip.gold{border-color:var(--gold);color:var(--gold-bright);}
.q-chip.sky{border-color:rgba(0,212,255,0.4);}
.q-chip.sky b{color:var(--sky);}
.q-chip.violet{border-color:rgba(139,107,184,0.5);}
.q-chip.violet b{color:#b39ddb;}

/* control rows */
.q-control-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.q-control-row:last-child{margin-bottom:0;}
.q-run-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.q-label{font-family:var(--font-mono);font-size:0.54rem;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase;}
.q-select{
  background:rgba(255,255,255,0.03);border:1px solid var(--gold-line);color:var(--bone);
  padding:9px 12px;border-radius:8px;font-family:var(--font-mono);font-size:0.62rem;
  min-width:200px;outline:none;cursor:pointer;
}
.q-select option{background:var(--obsidian);}
.q-sep{width:1px;height:26px;background:var(--line);margin:0 4px;}

.q-stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--gold-line);border-radius:8px;overflow:hidden;}
.q-stepper button{width:32px;height:34px;background:transparent;border:none;color:var(--gold-bright);
  font-size:1.1rem;cursor:pointer;transition:background .25s;}
.q-stepper button:hover{background:var(--gold-dim);}
.q-stepper span{min-width:28px;text-align:center;font-family:var(--font-mono);font-size:0.85rem;color:var(--bone);}

.q-gates{display:flex;gap:6px;flex-wrap:wrap;}
.q-gate{
  min-width:40px;height:38px;padding:0 10px;border-radius:8px;
  font-family:var(--font-mono);font-size:0.72rem;font-weight:700;
  background:rgba(255,255,255,0.03);border:1px solid var(--gold-line);color:var(--bone-soft);
  cursor:pointer;transition:all .25s;
}
.q-gate:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px);}
.q-gate.active{background:var(--gold);border-color:var(--gold);color:var(--night);}
.q-gate.q-del{border-color:rgba(224,85,85,0.4);color:#ff8a8a;}
.q-gate.q-del.active{background:rgba(224,85,85,0.2);border-color:#ff8a8a;color:#ff8a8a;}

.q-hint{font-size:0.5rem;letter-spacing:0.08em;color:var(--muted-dim);margin-top:10px;}

/* circuit */
.q-circuit-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:rgba(5,2,12,0.5);}
#circuit-canvas{display:block;margin:0 auto;cursor:pointer;}

/* statevector */
.q-grid{display:grid;gap:18px;}
.q-grid-2{grid-template-columns:1fr 1fr;}
@media(max-width:860px){.q-grid-2{grid-template-columns:1fr;}}

.q-ket{font-family:var(--font-mono);font-size:0.78rem;line-height:2.1;padding:12px 14px;
  border:1px solid var(--line);border-radius:8px;background:rgba(5,2,12,0.6);min-height:64px;
  overflow-x:auto;white-space:nowrap;}
.ket-term{color:rgba(240,230,210,0.85);}
.ket-c{color:var(--gold-bright);}
.ket-term:nth-child(6n+1) .ket-c{color:var(--sky);}
.ket-term:nth-child(6n+2) .ket-c{color:#b39ddb;}
.ket-term:nth-child(6n+3) .ket-c{color:#7fb185;}
.ket-term:nth-child(6n+4) .ket-c{color:#d08aa8;}
.ket-term:nth-child(6n+5) .ket-c{color:var(--gold-bright);}

.q-bars{display:flex;gap:8px;align-items:flex-end;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.amp-cell{display:flex;flex-direction:column;align-items:center;gap:4px;}
.amp-bar-wrap{width:22px;height:110px;display:flex;align-items:flex-end;border-bottom:1px solid var(--gold-line);background:rgba(255,255,255,0.02);border-radius:3px;}
.amp-bar{width:100%;border-radius:2px 2px 0 0;transition:height .3s ease;}
.amp-label{font-family:var(--font-mono);font-size:0.5rem;color:var(--muted);}
.amp-phase{width:8px;height:8px;margin-top:2px;border-radius:50%;}

/* bloch */
.q-blochs{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.bloch-cell{text-align:center;border:1px solid var(--line);border-radius:10px;padding:10px;background:rgba(5,2,12,0.5);}
.bloch-label{font-family:var(--font-mono);font-size:0.55rem;color:var(--gold);letter-spacing:0.14em;margin-top:4px;}
.bloch-cell canvas{display:block;margin:0 auto;}

/* timelines */
.q-timeline-wrap{border:1px solid var(--line);border-radius:10px;background:rgba(5,2,12,0.6);overflow:hidden;}
#timeline-canvas{display:block;margin:0 auto;width:100%;}

/* histogram */
.q-hist{display:flex;gap:10px;align-items:flex-end;justify-content:center;flex-wrap:wrap;min-height:150px;padding-top:10px;}
.hist-cell{display:flex;flex-direction:column;align-items:center;gap:4px;}
.hist-bar-wrap{width:26px;height:96px;display:flex;align-items:flex-end;border-bottom:1px solid var(--gold-line);background:rgba(255,255,255,0.02);border-radius:3px;}
.hist-bar{width:100%;background:linear-gradient(180deg,var(--gold),rgba(201,168,76,0.4));border-radius:2px 2px 0 0;transition:height .3s ease;}
.hist-label{font-family:var(--font-mono);font-size:0.5rem;color:var(--muted);}
.hist-count{font-family:var(--font-mono);font-size:0.48rem;color:var(--gold-bright);}