/* ══ THEME: DEEP SPACE QUANTUM (space) ══
   深空量子实验室 — 量子青蓝 + 深邃暗底
   Accent: #00d4ff (quantum cyan) · #7b61ff (quantum purple)
   ══════════════════════════════════════════ */

:root[data-theme="space"] {
  color-scheme: dark;

  --sq-bg-root:    #06080f;
  --sq-bg-top:     #0a0e1a;
  --sq-bg-panel:   #0f1422;
  --sq-bg-panel-2: #141a2e;
  --sq-bg-panel-3: #1a2138;
  --sq-bg-elevated:#1e2640;
  --sq-bg-accent:  #0f1630;

  --sq-text-strong: #e0e8ff;
  --sq-text-main:   #94a3c4;
  --sq-text-soft:   #5e7099;
  --sq-text-dim:    #3a4a6b;

  --sq-cyan-1: #00d4ff;
  --sq-cyan-2: #3dbfff;
  --sq-cyan-3: #0099cc;
  --sq-purple-1: #7b61ff;
  --sq-purple-2: #9b87ff;

  --sq-line-soft:   rgba(0, 212, 255, 0.08);
  --sq-line-mid:    rgba(0, 212, 255, 0.16);
  --sq-line-strong: rgba(0, 212, 255, 0.30);
  --sq-glow-soft:   rgba(0, 212, 255, 0.06);
  --sq-glow-mid:    rgba(0, 212, 255, 0.12);
  --sq-glow-strong: rgba(0, 212, 255, 0.22);

  --sq-shadow-panel:
    0 0 0 1px rgba(0, 212, 255, 0.07),
    0 16px 38px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(0, 212, 255, 0.03);
  --sq-shadow-button:
    0 0 0 1px rgba(0, 212, 255, 0.10),
    0 8px 18px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(0, 212, 255, 0.04);

  /* ── remap existing variables ── */
  --navy:       var(--sq-cyan-1);
  --navy-mid:   var(--sq-cyan-2);
  --navy-lt:    rgba(0, 212, 255, 0.10);
  --navy-sub:   rgba(0, 212, 255, 0.06);
  --navy-xs:    rgba(0, 212, 255, 0.03);
  --purple:     var(--sq-purple-1);
  --purple-lt:  rgba(123, 97, 255, 0.14);
  --teal:       #00d4d4;
  --teal-lt:    rgba(0, 212, 212, 0.12);
  --green:      #00ffb2;
  --green-lt:   rgba(0, 255, 178, 0.14);
  --amber:      #ffb444;
  --amber-lt:   rgba(255, 180, 68, 0.14);
  --red:        #ff4d6a;
  --red-lt:     rgba(255, 77, 106, 0.14);

  --bg:       var(--sq-bg-top);
  --white:    var(--sq-bg-panel);
  --surf:     var(--sq-bg-panel-2);
  --surface:  var(--sq-bg-panel-2);
  --surf3:    var(--sq-bg-panel-3);
  --b1:       var(--sq-line-soft);
  --b2:       var(--sq-line-mid);
  --t9:       var(--sq-text-strong);
  --t7:       var(--sq-text-main);
  --t5:       var(--sq-text-soft);
  --t3:       var(--sq-text-dim);
}

[data-theme="space"] body,
[data-theme="space"] {
  background:
    radial-gradient(circle at 18% 82%, rgba(0, 212, 255, 0.09), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(123, 97, 255, 0.07), transparent 18%),
    linear-gradient(180deg, #06080f 0%, #0a0e1a 100%);
  color: var(--sq-text-main);
}

/* ── TOPBAR ── */
[data-theme="space"] .aq-topbar {
  position: relative;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0.98), rgba(6, 8, 15, 0.98));
  border-bottom: 1px solid var(--sq-line-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.52);
}

[data-theme="space"] .aq-topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.40), transparent);
}

[data-theme="space"] .aq-brand {
  color: var(--sq-text-strong);
  letter-spacing: 0.02em;
}

[data-theme="space"] .aq-brand-badge,
[data-theme="space"] .logo-ring {
  border-color: rgba(0, 212, 255, 0.20);
  color: var(--sq-text-strong);
  background: linear-gradient(180deg, #1a2440 0%, #0f1422 100%);
  box-shadow: var(--sq-shadow-button);
}

/* ── NAV TABS ── */
[data-theme="space"] .aq-nav-tab,
[data-theme="space"] .ntab,
[data-theme="space"] .sp-tab {
  color: var(--sq-text-main);
  border: 1px solid transparent;
  transition: 180ms ease;
}

[data-theme="space"] .aq-nav-tab:hover,
[data-theme="space"] .ntab:hover,
[data-theme="space"] .sp-tab:hover {
  color: var(--sq-text-strong);
  border-color: rgba(0, 212, 255, 0.14);
  background: rgba(0, 212, 255, 0.05);
}

[data-theme="space"] .aq-nav-tab.on,
[data-theme="space"] .aq-nav-tab.is-active,
[data-theme="space"] .ntab.on,
[data-theme="space"] .sp-tab.on {
  color: var(--sq-text-strong);
  border-color: rgba(0, 212, 255, 0.22);
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.10), rgba(0, 212, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(0, 212, 255, 0.06);
}

[data-theme="space"] .hbadge {
  color: var(--sq-text-soft);
  border-color: var(--sq-line-soft);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(0, 212, 255, 0.03);
}

/* ── BUTTONS ── */
[data-theme="space"] .aq-console-btn,
[data-theme="space"] .hbtn,
[data-theme="space"] .cfb,
[data-theme="space"] .pbtn,
[data-theme="space"] .qsb,
[data-theme="space"] .bloch-sz-btn,
[data-theme="space"] .seg-btn,
[data-theme="space"] .expb,
[data-theme="space"] .qgbtn,
[data-theme="space"] .guide-prev,
[data-theme="space"] .guide-next {
  border-radius: 10px;
  border: 1px solid rgba(0, 212, 255, 0.16);
  background: linear-gradient(180deg, #1a2240 0%, #0f1422 100%);
  color: var(--sq-text-main);
  box-shadow: var(--sq-shadow-button);
}

[data-theme="space"] .aq-console-btn:hover,
[data-theme="space"] .hbtn:hover,
[data-theme="space"] .cfb:hover,
[data-theme="space"] .pbtn:hover,
[data-theme="space"] .qsb:hover,
[data-theme="space"] .bloch-sz-btn:hover,
[data-theme="space"] .seg-btn:hover,
[data-theme="space"] .expb:hover,
[data-theme="space"] .qgbtn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 212, 255, 0.30);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.14),
    0 10px 22px rgba(0, 0, 0, 0.52),
    0 0 18px rgba(0, 212, 255, 0.08),
    inset 0 1px 0 rgba(0, 212, 255, 0.06);
}

[data-theme="space"] .aq-console-btn-primary,
[data-theme="space"] .hbtn.hi,
[data-theme="space"] .crun,
[data-theme="space"] #aisnd,
[data-theme="space"] .vrun,
[data-theme="space"] .auth-submit,
[data-theme="space"] .share-copy-btn,
[data-theme="space"] .cpybtn,
[data-theme="space"] .tp-confirm,
[data-theme="space"] .save-confirm {
  background: linear-gradient(180deg, #0f3a50 0%, #071a26 100%);
  border-color: rgba(0, 212, 255, 0.32);
  color: #b0eeff;
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.52),
    0 0 20px rgba(0, 212, 255, 0.10),
    inset 0 1px 0 rgba(0, 212, 255, 0.08);
}

[data-theme="space"] .aq-console-btn-primary:hover,
[data-theme="space"] .hbtn.hi:hover,
[data-theme="space"] .crun:hover,
[data-theme="space"] #aisnd:hover,
[data-theme="space"] .vrun:hover,
[data-theme="space"] .auth-submit:hover,
[data-theme="space"] .share-copy-btn:hover,
[data-theme="space"] .cpybtn:hover,
[data-theme="space"] .tp-confirm:hover,
[data-theme="space"] .save-confirm:hover {
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.24),
    0 12px 28px rgba(0, 0, 0, 0.56),
    0 0 24px rgba(0, 212, 255, 0.16),
    inset 0 1px 0 rgba(0, 212, 255, 0.10);
}

[data-theme="space"] .aq-console-btn-accent {
  background: linear-gradient(180deg, #1e1640 0%, #0f1020 100%) !important;
}

/* ── PANELS / MODALS ── */
[data-theme="space"] .aq-panel,
[data-theme="space"] .panel,
[data-theme="space"] .vqecol,
[data-theme="space"] .qaoa-col,
[data-theme="space"] .algo-card,
[data-theme="space"] .modal,
[data-theme="space"] .settings-box,
[data-theme="space"] .profile-box,
[data-theme="space"] .auth-box,
[data-theme="space"] .share-box,
[data-theme="space"] .save-box,
[data-theme="space"] .tp-box,
[data-theme="space"] .intro-box,
[data-theme="space"] #guide-box,
[data-theme="space"] .aprev-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 26, 46, 0.98), rgba(10, 14, 26, 0.98));
  border: 1px solid var(--sq-line-soft);
  box-shadow: var(--sq-shadow-panel);
}

[data-theme="space"] .aq-panel::before,
[data-theme="space"] .panel::before,
[data-theme="space"] .vqecol::before,
[data-theme="space"] .qaoa-col::before,
[data-theme="space"] .algo-card::before,
[data-theme="space"] .modal::before,
[data-theme="space"] .settings-box::before,
[data-theme="space"] .profile-box::before,
[data-theme="space"] .auth-box::before,
[data-theme="space"] .share-box::before,
[data-theme="space"] .save-box::before,
[data-theme="space"] .tp-box::before,
[data-theme="space"] .intro-box::before,
[data-theme="space"] #guide-box::before,
[data-theme="space"] .aprev-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 212, 255, 0.04), transparent 18%),
    radial-gradient(circle at 0% 100%, rgba(0, 212, 255, 0.07), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(123, 97, 255, 0.05), transparent 18%);
}

/* ── PANEL HEADERS ── */
[data-theme="space"] .aq-panel-head,
[data-theme="space"] .ph,
[data-theme="space"] .settings-hd,
[data-theme="space"] .profile-hd,
[data-theme="space"] .auth-hd,
[data-theme="space"] .share-hd,
[data-theme="space"] .save-hd,
[data-theme="space"] .mhd,
[data-theme="space"] .tp-hd,
[data-theme="space"] .guide-ft,
[data-theme="space"] .guide-prog,
[data-theme="space"] .aprev-hd {
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.07), rgba(0, 212, 255, 0.02) 34%, transparent 100%);
  color: var(--sq-cyan-1);
  border-bottom-color: rgba(0, 212, 255, 0.08);
}

[data-theme="space"] .aq-panel-head,
[data-theme="space"] .ph {
  letter-spacing: 0.14em;
}

/* ── SIDEBARS ── */
[data-theme="space"] #tb,
[data-theme="space"] #lv {
  background: linear-gradient(180deg, #0f1422 0%, #06080f 100%);
}

[data-theme="space"] #ca,
[data-theme="space"] #sp,
[data-theme="space"] #at {
  backdrop-filter: blur(4px);
}

/* ── SECTION LABELS / SUBTITLES ── */
[data-theme="space"] .gcat,
[data-theme="space"] .sv-ttl,
[data-theme="space"] .prob-lbl,
[data-theme="space"] .bloch-sz-lbl,
[data-theme="space"] .settings-row-sub,
[data-theme="space"] .guide-ft-note,
[data-theme="space"] .tp-hint,
[data-theme="space"] .auth-sub,
[data-theme="space"] .profile-hd-sub,
[data-theme="space"] .algo-page-sub {
  color: var(--sq-text-dim);
}

/* ── GATE GRID ── */
[data-theme="space"] .aq-gate-grid {
  gap: 10px;
}

[data-theme="space"] .aq-gate-card,
[data-theme="space"] .gi {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0, 212, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(20, 28, 50, 0.98), rgba(10, 14, 26, 0.98));
  box-shadow: var(--sq-shadow-button);
}

[data-theme="space"] .aq-gate-card::before,
[data-theme="space"] .gi::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 212, 255, 0.07), rgba(0, 212, 255, 0.00) 35%),
    radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.09), transparent 38%);
}

[data-theme="space"] .aq-gate-card:hover,
[data-theme="space"] .gi:hover {
  border-color: rgba(0, 212, 255, 0.30);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.14),
    0 12px 24px rgba(0, 0, 0, 0.56),
    0 0 24px rgba(0, 212, 255, 0.10),
    inset 0 1px 0 rgba(0, 212, 255, 0.07);
}

[data-theme="space"] .gsym,
[data-theme="space"] .aq-gate-card .gsym {
  color: var(--sq-text-strong);
  font-weight: 700;
}

[data-theme="space"] .glbl {
  color: var(--sq-text-soft);
}

/* ── CANVAS / CIRCUIT AREA ── */
[data-theme="space"] .aq-canvas-frame,
[data-theme="space"] #cc {
  background: linear-gradient(180deg, rgba(15, 20, 38, 0.98), rgba(6, 8, 15, 0.98));
}

[data-theme="space"] .aq-canvas-grid,
[data-theme="space"] .ci {
  background-color: #080c18;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 20% 78%, rgba(0, 200, 255, 0.07), transparent 18%),
    radial-gradient(circle at 85% 18%, rgba(123, 97, 255, 0.06), transparent 12%);
  background-size: 54px 54px, 54px 54px, auto, auto;
}

[data-theme="space"] .wl {
  background: linear-gradient(to right, transparent, rgba(0, 212, 255, 0.22) 10%, rgba(0, 212, 255, 0.22) 90%, transparent);
}

[data-theme="space"] .circ-connector {
  background: linear-gradient(180deg, var(--sq-cyan-1), var(--sq-cyan-3));
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.14);
}

/* ── TITLES / HEADINGS ── */
[data-theme="space"] .qlbl,
[data-theme="space"] .qcount-d,
[data-theme="space"] .cfstats,
[data-theme="space"] .vh,
[data-theme="space"] .th-name,
[data-theme="space"] .guide-title,
[data-theme="space"] .intro-title,
[data-theme="space"] .settings-sec-label,
[data-theme="space"] .profile-hd-title,
[data-theme="space"] .auth-logo,
[data-theme="space"] .mhd-title,
[data-theme="space"] .algo-name,
[data-theme="space"] .aq-brand {
  color: var(--sq-text-strong);
}

/* ── DROP SLOT ── */
[data-theme="space"] .ds {
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.38);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.08), 0 0 6px rgba(0, 212, 255, 0.04);
}

[data-theme="space"] .ds.dov {
  background: rgba(0, 212, 255, 0.10);
  border-color: rgba(0, 212, 255, 0.60);
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.18);
}

/* ── GATE BLOCKS ── */
[data-theme="space"] .gb {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(0, 212, 255, 0.05);
}

[data-theme="space"] .gb.H  { background: rgba(0,212,255,.12); border-color: #00d4ff; color: #7aeaff; }
[data-theme="space"] .gb.X,
[data-theme="space"] .gb.Y,
[data-theme="space"] .gb.Z  { background: rgba(123,97,255,.12); border-color: #7b61ff; color: #9b87ff; }
[data-theme="space"] .gb.S,
[data-theme="space"] .gb.T,
[data-theme="space"] .gb.Rx,
[data-theme="space"] .gb.Ry,
[data-theme="space"] .gb.Rz { background: rgba(0,153,204,.12); border-color: #0099cc; color: #00d4ff; }
[data-theme="space"] .gb.CNOT,
[data-theme="space"] .gb.CZ,
[data-theme="space"] .gb.SWAP{ background: rgba(0,212,255,.10); border-color: #3dbfff; color: #00d4ff; }
[data-theme="space"] .gb.M  { background: rgba(0,255,178,.10); border-color: #00ffb2; color: #7affd4; }

/* ── EDIT CONTROLS ── */
[data-theme="space"] .delg,
[data-theme="space"] .editp,
[data-theme="space"] .qb {
  border-color: rgba(0, 212, 255, 0.22);
  background: linear-gradient(180deg, #1a2440 0%, #0f1422 100%);
  color: var(--sq-cyan-1);
}

/* ── TOOLBARS / BARS ── */
[data-theme="space"] #cf,
[data-theme="space"] #airw,
[data-theme="space"] .mtbar,
[data-theme="space"] .mft,
[data-theme="space"] .settings-divider,
[data-theme="space"] .profile-tabs,
[data-theme="space"] .auth-tabs,
[data-theme="space"] .sp-tabs,
[data-theme="space"] .qsel-bar,
[data-theme="space"] .prob-hdr,
[data-theme="space"] #sv-sec,
[data-theme="space"] .bloch-formula,
[data-theme="space"] .bloch-interp,
[data-theme="space"] .bloch-sz-ctrl {
  background: linear-gradient(180deg, #0f1422 0%, #0a0e1a 100%);
  border-color: rgba(0, 212, 255, 0.08);
}

/* ── BLOCH SPHERE ── */
[data-theme="space"] .aq-bloch-wrap,
[data-theme="space"] #bloch-wrap {
  padding: 10px;
}

[data-theme="space"] .aq-bloch-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  border-radius: 16px;
  border: 1px solid rgba(0, 212, 255, 0.08);
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 212, 255, 0.06), transparent 36%),
    linear-gradient(180deg, rgba(15, 20, 38, 0.98), rgba(6, 8, 15, 0.98));
  box-shadow: inset 0 1px 0 rgba(0, 212, 255, 0.03);
}

[data-theme="space"] #bloch-cv {
  width: 100%;
  height: 230px;
}

[data-theme="space"] .bloch-multi-row {
  background: linear-gradient(180deg, rgba(15, 20, 38, 0.6), rgba(6, 8, 15, 0.4));
  border-radius: 10px;
  margin: 6px;
}

[data-theme="space"] .bloch-sphere-slot:hover {
  background: rgba(0, 212, 255, 0.06);
}

[data-theme="space"] .bloch-sphere-slot.focused {
  background: rgba(0, 212, 255, 0.10);
  outline-color: rgba(0, 212, 255, 0.40);
}

[data-theme="space"] .bloch-sphere-qlbl {
  color: #3a4a6b;
}

[data-theme="space"] .bloch-sphere-slot.focused .bloch-sphere-qlbl {
  color: #00d4ff;
}

[data-theme="space"] .bloch-zoom-btn {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.18);
  color: #5e7099;
}
[data-theme="space"] .bloch-zoom-btn:hover {
  background: #00d4ff;
  color: #06080f;
}
[data-theme="space"] .bloch-zoom-box {
  background: #0f1422;
  box-shadow: 0 8px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(0,212,255,.10);
}
[data-theme="space"] .bloch-zoom-nav-btn,
[data-theme="space"] .bloch-zoom-close {
  background: rgba(255,255,255,.03);
  border-color: rgba(0,212,255,.16);
  color: #5e7099;
}
[data-theme="space"] .bloch-zoom-nav-btn:hover {
  border-color: #00d4ff;
  color: #00d4ff;
  background: rgba(0,212,255,.09);
}
[data-theme="space"] .bloch-zoom-qlbl { color: #00d4ff; }
[data-theme="space"] .bloch-zoom-hint { color: #3a4a6b; }
[data-theme="space"] .bloch-zoom-stat { background: #0a0e1a; border-color: rgba(0,212,255,.08); }
[data-theme="space"] .bloch-zoom-stat-val { color: #00d4ff; }

/* ── LIST / BUBBLE ITEMS ── */
[data-theme="space"] .bsc,
[data-theme="space"] .vsc,
[data-theme="space"] .aq-assistant-bubble,
[data-theme="space"] .ilog,
[data-theme="space"] .ansb,
[data-theme="space"] .algo-circuit,
[data-theme="space"] .state-card,
[data-theme="space"] .qaoa-sc,
[data-theme="space"] .hist-row,
[data-theme="space"] .circ-row,
[data-theme="space"] .circ-card,
[data-theme="space"] .auth-field input,
[data-theme="space"] .auth-field select,
[data-theme="space"] .share-url-inp,
[data-theme="space"] .carea,
[data-theme="space"] .save-body input,
[data-theme="space"] select,
[data-theme="space"] input[type="text"],
[data-theme="space"] input[type="email"],
[data-theme="space"] input[type="password"] {
  background: linear-gradient(180deg, #141a2e 0%, #0a0e1a 100%);
  border-color: rgba(0, 212, 255, 0.10);
  color: var(--sq-text-main);
  box-shadow: inset 0 1px 0 rgba(0, 212, 255, 0.03);
}

[data-theme="space"] .bsc,
[data-theme="space"] .vsc,
[data-theme="space"] .aq-assistant-bubble {
  border-radius: 12px;
}

/* ── TEXT HIERARCHY ── */
[data-theme="space"] .bslbl,
[data-theme="space"] .sl,
[data-theme="space"] .algo-desc,
[data-theme="space"] .algo-meta,
[data-theme="space"] .th-desc,
[data-theme="space"] .guide-desc,
[data-theme="space"] .intro-sub,
[data-theme="space"] .intro-what,
[data-theme="space"] .mbody,
[data-theme="space"] .sbi,
[data-theme="space"] .ms,
[data-theme="space"] .settings-about-line,
[data-theme="space"] .profile-empty,
[data-theme="space"] .auth-field label {
  color: var(--sq-text-main);
}

[data-theme="space"] .bsval,
[data-theme="space"] .sv,
[data-theme="space"] .emask,
[data-theme="space"] .mav,
[data-theme="space"] .mf,
[data-theme="space"] .vsc .sv,
[data-theme="space"] .emain,
[data-theme="space"] .aq-assistant-body {
  color: var(--sq-text-strong);
}

/* ── QUBIT STATE CHIPS ── */
[data-theme="space"] .bi-chip-0 { background: rgba(0,212,255,.14); color: #7aeaff; }
[data-theme="space"] .bi-chip-1 { background: rgba(123,97,255,.14); color: #b0a0ff; }
[data-theme="space"] .bi-chip-sup,
[data-theme="space"] .bi-chip-gen { background: rgba(0,255,178,.12); color: #7affd4; }

/* ── ACCENT CHIP / TAG / BADGE ── */
[data-theme="space"] .mav,
[data-theme="space"] .fm,
[data-theme="space"] .algo-tag,
[data-theme="space"] .hist-badge,
[data-theme="space"] .diff-amber,
[data-theme="space"] .diff-green,
[data-theme="space"] .diff-red {
  background: rgba(0, 212, 255, 0.09);
  border-color: rgba(0, 212, 255, 0.16);
  color: var(--sq-cyan-1);
}

[data-theme="space"] .aq-console-chip,
[data-theme="space"] .chip {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(0, 212, 255, 0.12);
  color: var(--sq-text-main);
}

[data-theme="space"] .aq-console-chip:hover,
[data-theme="space"] .chip:hover {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.30);
  color: var(--sq-cyan-1);
}

/* ── AI ASSISTANT ── */
[data-theme="space"] .aq-assistant-shell,
[data-theme="space"] .aq-assistant-body {
  background: transparent;
}

[data-theme="space"] .aq-mascot-panel,
[data-theme="space"] .ai-mascot {
  border-right: 1px solid rgba(0, 212, 255, 0.10);
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.05) 0%, rgba(0, 212, 255, 0.02) 100%);
}

[data-theme="space"] .mascot-name {
  color: var(--sq-text-strong);
}

[data-theme="space"] .mascot-status {
  color: var(--sq-text-soft);
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.10);
}

[data-theme="space"] .mascot-status.thinking {
  color: var(--sq-cyan-1);
  background: rgba(0, 212, 255, 0.10);
}

[data-theme="space"] .mascot-status.offline {
  color: var(--red);
  background: var(--red-lt);
  border-color: transparent;
}

[data-theme="space"] .aq-mascot-svg [fill="#1B3A6B"],
[data-theme="space"] .aq-mascot-svg [fill="#2D5AA0"] {
  fill: #141a2e !important;
}

[data-theme="space"] .aq-mascot-svg [fill="#60A5FA"],
[data-theme="space"] .aq-mascot-svg [fill="#BFDBFE"],
[data-theme="space"] .aq-mascot-svg [fill="#2563EB"] {
  fill: #00d4ff !important;
}

[data-theme="space"] .aq-mascot-svg [stroke="#93C5FD"],
[data-theme="space"] .aq-mascot-svg [stroke="#60A5FA"] {
  stroke: #00d4ff !important;
}

[data-theme="space"] .aq-mascot-svg #ant-tip,
[data-theme="space"] .aq-mascot-svg #mascot-electron {
  filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.30));
}

/* ── INPUTS / FOCUS ── */
[data-theme="space"] #aiinp,
[data-theme="space"] .aq-assistant-input,
[data-theme="space"] .share-url-inp,
[data-theme="space"] .save-body input,
[data-theme="space"] .auth-field input,
[data-theme="space"] .auth-field select,
[data-theme="space"] select {
  background: #0a0e1a;
  border: 1px solid rgba(0, 212, 255, 0.12);
  color: var(--sq-text-main);
}

[data-theme="space"] #aiinp::placeholder,
[data-theme="space"] input::placeholder {
  color: rgba(94, 112, 153, 0.55);
}

[data-theme="space"] #aiinp:focus,
[data-theme="space"] input:focus,
[data-theme="space"] select:focus {
  outline: none;
  border-color: rgba(0, 212, 255, 0.26);
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.16),
    0 0 0 4px rgba(0, 212, 255, 0.05),
    inset 0 1px 0 rgba(0, 212, 255, 0.04);
}

/* ── POPUPS / PICKERS ── */
[data-theme="space"] .tq-picker,
[data-theme="space"] .ppop,
[data-theme="space"] .share-modal.op .share-box {
  background: linear-gradient(180deg, #141a2e 0%, #0a0e1a 100%);
  border: 1px solid rgba(0, 212, 255, 0.12);
  box-shadow: var(--sq-shadow-panel);
}

/* ── LABEL / TAB COLORS ── */
[data-theme="space"] .tq-title,
[data-theme="space"] .ppop-label,
[data-theme="space"] .settings-row-lbl,
[data-theme="space"] .save-note,
[data-theme="space"] .profile-tab,
[data-theme="space"] .auth-tab,
[data-theme="space"] .mt,
[data-theme="space"] .guide-step-tab,
[data-theme="space"] .tp-card-name,
[data-theme="space"] .th-name,
[data-theme="space"] .aprev-info-lbl {
  color: var(--sq-text-main);
}

/* ── STATUS BAR ── */
[data-theme="space"] #sb,
[data-theme="space"] .aq-statusbar {
  background: linear-gradient(to right, #04050a 0%, #08090f 100%);
  border-top: 1px solid rgba(0, 212, 255, 0.08);
  color: var(--sq-text-soft);
}

[data-theme="space"] .sbd.sg,
[data-theme="space"] .sbd.sb2,
[data-theme="space"] .sbd.sy {
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.20);
}

[data-theme="space"] #sbm {
  color: var(--sq-cyan-1);
}

/* ── RESIZE HANDLES ── */
[data-theme="space"] .rz-pip {
  background: rgba(0, 212, 255, 0.20);
}

[data-theme="space"] .rz-col:hover .rz-pip,
[data-theme="space"] .rz-col.dragging .rz-pip,
[data-theme="space"] .rz-row:hover .rz-pip,
[data-theme="space"] .rz-row.dragging .rz-pip {
  background: var(--sq-cyan-2);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.18);
}

/* ── ACTIVE / SELECTED STATE ── */
[data-theme="space"] .tp-card.on,
[data-theme="space"] .th-card.on,
[data-theme="space"] .guide-dot.on,
[data-theme="space"] .seg-btn.on,
[data-theme="space"] .mt.on,
[data-theme="space"] .profile-tab.on,
[data-theme="space"] .auth-tab.on,
[data-theme="space"] .qgbtn.active {
  border-color: #00d4ff;
  color: var(--sq-cyan-1);
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.20), 0 6px 18px rgba(0, 0, 0, 0.32);
}

/* ── CARDS (theme picker, guide, etc.) ── */
[data-theme="space"] .tp-card,
[data-theme="space"] .th-card,
[data-theme="space"] .guide-slide,
[data-theme="space"] .intro-feat,
[data-theme="space"] .profile-pane,
[data-theme="space"] .auth-form-pane,
[data-theme="space"] .qaoa-ep,
[data-theme="space"] .aprev-info-sec {
  background: linear-gradient(180deg, rgba(20, 26, 46, 0.98), rgba(10, 14, 26, 0.98));
  border: 1px solid rgba(0, 212, 255, 0.08);
}

[data-theme="space"] .tp-card-prev,
[data-theme="space"] .th-prev,
[data-theme="space"] .tp-card-body,
[data-theme="space"] .th-prev-body,
[data-theme="space"] .tp-card-sb,
[data-theme="space"] .tp-card-cn,
[data-theme="space"] .tp-card-rp,
[data-theme="space"] .th-prev-sb,
[data-theme="space"] .th-prev-cn,
[data-theme="space"] .th-prev-rp {
  border-color: rgba(0, 212, 255, 0.18) !important;
}

/* ── HERO / PICKER HEADER ── */
[data-theme="space"] .intro-hero,
[data-theme="space"] .theme-pick-hd,
[data-theme="space"] .tp-hd {
  background: linear-gradient(135deg, #06080f 0%, #0a1020 55%, #0f1830 100%);
}

/* ── ALGO CARDS ── */
[data-theme="space"] .algo-card:hover {
  border-color: rgba(0, 212, 255, 0.28);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(0, 212, 255, 0.09),
    inset 0 1px 0 rgba(0, 212, 255, 0.05);
}

[data-theme="space"] .algo-prev-btn,
[data-theme="space"] .algo-load-btn,
[data-theme="space"] .intro-btn-pri,
[data-theme="space"] .intro-btn-sec,
[data-theme="space"] .aprev-load-btn,
[data-theme="space"] .aprev-anim-btn,
[data-theme="space"] .aprev-spd {
  border-color: rgba(0, 212, 255, 0.16);
  color: var(--sq-text-main);
  background: linear-gradient(180deg, #1a2240 0%, #0f1422 100%);
}

[data-theme="space"] .algo-load-btn,
[data-theme="space"] .intro-btn-pri,
[data-theme="space"] .aprev-load-btn {
  background: linear-gradient(180deg, #0f3a50 0%, #071a26 100%);
  color: #b0eeff;
}

/* ── RANGE INPUT ── */
[data-theme="space"] input[type="range"] {
  accent-color: var(--sq-cyan-2);
}

/* ── SCROLLBARS ── */
[data-theme="space"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.20);
}

[data-theme="space"] ::-webkit-scrollbar-track {
  background: rgba(0, 212, 255, 0.04);
}

/* ── VQE / QAOA OVERRIDES ── */
[data-theme="space"] #vqe3d-status { background: rgba(6, 8, 15, 0.80); color: #94a3c4; }
[data-theme="space"] #vqe3d-wrap   { background: #0a0e1a; border-color: rgba(0, 212, 255, 0.12); }
[data-theme="space"] #vqe3d-hint   { color: #94a3c4; }
[data-theme="space"] .qaoa-zoom-box { background: linear-gradient(180deg, #0f1422, #0a0e1a); border-color: rgba(0, 212, 255, 0.16); }

/* ── STEP / REPLAY ACTIVE BUTTONS ── */
[data-theme="space"] .classroom-toggle.active,
[data-theme="space"] #replay-btn.active,
[data-theme="space"] #step-btn.active {
  background: linear-gradient(180deg, #0f3a50 0%, #071a26 100%);
  border-color: rgba(0, 212, 255, 0.32);
  color: #00d4ff;
  box-shadow:
    0 0 0 1px rgba(0, 212, 255, 0.18),
    0 0 16px rgba(0, 212, 255, 0.12);
}

/* ── STEP-MODE CIRCUIT HIGHLIGHTS ── */
[data-theme="space"] .step-cursor .gb {
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.28), inset 0 0 6px rgba(0, 212, 255, 0.10);
}

[data-theme="space"] .step-past .gb {
  opacity: 0.48;
}

/* ── VALIDATOR / ERROR ── */
[data-theme="space"] .eerr { color: #ff4d6a; }
[data-theme="space"] .bwarn { background: rgba(255, 77, 106, 0.08); border-color: #ff4d6a; color: #ff4d6a; }

/* ── SETTINGS ICON BADGE ── */
[data-theme="space"] .settings-sec-icon.amber { background: rgba(0, 212, 255, 0.10); color: var(--sq-cyan-1); }

/* ── GUIDE DOTS ── */
[data-theme="space"] .guide-prev { border-color: rgba(0, 212, 255, 0.20); color: #5e7099; background: #0f1422; }
[data-theme="space"] .guide-next { border-color: rgba(0, 212, 255, 0.30); color: #b0eeff; background: linear-gradient(180deg, #0f3a50, #071a26); }

/* ── DIFF COLORS ── */
[data-theme="space"] .diff-green { background: rgba(0, 255, 178, 0.10); border-color: rgba(0,255,178,.22); color: #7affd4; }
[data-theme="space"] .diff-red   { background: rgba(255, 77, 106, 0.10); border-color: rgba(255,77,106,.22); color: #ff9aab; }

/* ── HOME PAGE OVERRIDES ── */
[data-theme="space"] .home-hero {
  background:
    radial-gradient(circle at 30% 60%, rgba(0, 212, 255, 0.10), transparent 30%),
    radial-gradient(circle at 75% 30%, rgba(123, 97, 255, 0.08), transparent 25%),
    linear-gradient(180deg, #06080f 0%, #0a0e1a 100%);
}

[data-theme="space"] .home-feature-card {
  background: linear-gradient(180deg, rgba(20, 26, 46, 0.98), rgba(10, 14, 26, 0.98));
  border: 1px solid rgba(0, 212, 255, 0.10);
}

[data-theme="space"] .home-feature-card:hover {
  border-color: rgba(0, 212, 255, 0.24);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50), 0 0 16px rgba(0, 212, 255, 0.08);
}

/* ── GRADIENT BORDER VARIABLES (used by .gi gradient border-box trick) ── */
[data-theme="space"] {
  --grad-from: #00d4ff;
  --grad-to:   #7b61ff;
  --gi-bg:     #141a2e;
  --gi-bg2:    #0f1422;
}

/* ── HEADER (native element, not just .aq-topbar) ── */
[data-theme="space"] header {
  background: linear-gradient(180deg, #0a0e1a 0%, #06080f 100%);
  border-color: rgba(0, 212, 255, 0.10);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.64), 0 0 0 0.5px rgba(0, 212, 255, 0.07);
}

/* ── GATE CARD (gradient border-box override from styles.css pattern) ── */
[data-theme="space"] .gi {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #141a2e, #0a0e1a) padding-box,
    linear-gradient(135deg, rgba(0, 212, 255, 0.60), rgba(123, 97, 255, 0.50)) border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(0, 212, 255, 0.05);
}
[data-theme="space"] .gi:hover {
  border-color: transparent;
  background:
    linear-gradient(180deg, #1a2240, #0f1422) padding-box,
    linear-gradient(135deg, rgba(0, 212, 255, 0.85), rgba(123, 97, 255, 0.75)) border-box;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 212, 255, 0.12), inset 0 1px 0 rgba(0, 212, 255, 0.09);
}

/* ── ACTIVE NAV TAB ── */
[data-theme="space"] .ntab.on {
  background: rgba(0, 212, 255, 0.12);
  box-shadow: inset 0 -2px 0 rgba(0, 212, 255, 0.50);
}

/* ── AI ASSISTANT MESSAGES ── */
[data-theme="space"] #aim { background: transparent; }
[data-theme="space"] .mbody {
  background: linear-gradient(180deg, #141a2e, #0f1422);
  border-color: rgba(0, 212, 255, 0.10);
  color: #94a3c4;
  box-shadow: inset 0 1px 0 rgba(0, 212, 255, 0.03);
}
[data-theme="space"] .mur .mbody {
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.09), rgba(0, 212, 255, 0.05));
  border-color: rgba(0, 212, 255, 0.18);
}

/* ── ACTIVE BLOCH SIZE BUTTON ── */
[data-theme="space"] .bloch-sz-btn.on {
  background: linear-gradient(135deg, #00d4ff, #7b61ff);
  border-color: transparent;
  color: #06080f;
}

/* ── QUANTUM STATE SELECTOR (active) ── */
[data-theme="space"] .qsb.on {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(0, 212, 255, 0.10));
  border-color: #00d4ff;
  color: #7aeaff;
}

/* ── VQE ENERGY CARD ── */
[data-theme="space"] .ecard {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(0, 212, 255, 0.05));
  border-color: rgba(0, 212, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(0, 212, 255, 0.04);
}

/* ── ACTIVE THEME / PICKER CARDS ── */
[data-theme="space"] .tp-card.on {
  border-color: #00d4ff;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.34);
}
[data-theme="space"] .th-card.on {
  border-color: #00d4ff;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.28);
}

/* ── AUTH / SHARE / CONFIRM BUTTONS ── */
[data-theme="space"] .auth-submit,
[data-theme="space"] .share-copy-btn,
[data-theme="space"] .cpybtn,
[data-theme="space"] .tp-confirm {
  background: linear-gradient(135deg, #00d4ff, #7b61ff);
  color: #06080f;
}

/* ── ALGO LIST BACKGROUND ── */
[data-theme="space"] #lv { background: linear-gradient(180deg, #0a0e1a, #06080f); }
[data-theme="space"] .algo-card {
  background: linear-gradient(180deg, #141a2e, #0f1422);
  border-color: rgba(0, 212, 255, 0.10);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(0, 212, 255, 0.03);
}
[data-theme="space"] .algo-circuit { background: #0a0e1a; color: #94a3c4; }
[data-theme="space"] .algo-tag {
  background: rgba(0, 212, 255, 0.10);
  color: #00d4ff;
  border: 1px solid rgba(0, 212, 255, 0.22);
}

/* ── MODAL OVERRIDES ── */
[data-theme="space"] .modal {
  background: linear-gradient(180deg, #141a2e, #0f1422);
  border-color: rgba(0, 212, 255, 0.12);
}
[data-theme="space"] .mhd {
  background: linear-gradient(180deg, #1a2138, #141a2e);
  border-bottom-color: rgba(0, 212, 255, 0.08);
  color: #e0e8ff;
}
[data-theme="space"] .carea { background: #0a0e1a; color: #94a3c4; }
[data-theme="space"] .mtbar { background: #0a0e1a; border-bottom-color: rgba(0, 212, 255, 0.08); }
[data-theme="space"] .mft  { background: #080c18; border-top-color: rgba(0, 212, 255, 0.08); }

/* ── CIRCUIT CONTROL BAR ── */
[data-theme="space"] #cf {
  background: linear-gradient(to bottom, #141a2e, #0f1422);
  border-top-color: rgba(0, 212, 255, 0.08);
}

/* ── AI PANEL ── */
[data-theme="space"] #at {
  background: linear-gradient(180deg, #141a2e, #0a0e1a);
  border-top: 1px solid rgba(0, 212, 255, 0.08);
}
[data-theme="space"] #airw { background: #0a0e1a; border-top-color: rgba(0, 212, 255, 0.08); }
[data-theme="space"] #aisnd {
  background: linear-gradient(135deg, #00d4ff, #7b61ff);
  color: #06080f;
  box-shadow: 0 4px 14px rgba(0, 212, 255, 0.28);
}

/* ── TOOLBAR ── */
[data-theme="space"] #tb {
  background: linear-gradient(180deg, #0f1422, #06080f);
  border-right: 1px solid rgba(0, 212, 255, 0.08);
}
[data-theme="space"] .pbtn { background: rgba(255,255,255,.03); border-color: rgba(0,212,255,.10); color: rgba(0,212,255,.60); }
[data-theme="space"] .pbtn:hover { background: rgba(0,212,255,.08); border-color: rgba(0,212,255,.30); color: #7aeaff; }

/* ── BLOCH SPHERE PANEL ── */
[data-theme="space"] .bsc {
  background: linear-gradient(180deg, #141a2e, #0f1422);
  border-color: rgba(0, 212, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(0, 212, 255, 0.03);
}
[data-theme="space"] .bslbl { color: #3a4a6b; }
[data-theme="space"] .bsval { color: #e0e8ff; font-weight: 700; }
[data-theme="space"] .bloch-formula { background: #0a0e1a; border-top-color: rgba(0, 212, 255, 0.08); }

/* ── VQE / QAOA COLUMNS ── */
[data-theme="space"] .vqecol,
[data-theme="space"] .qaoa-col {
  background: linear-gradient(180deg, #141a2e, #0a0e1a);
  border-color: rgba(0, 212, 255, 0.10);
}
[data-theme="space"] .ilog { background: #0a0e1a; border-color: rgba(0, 212, 255, 0.10); }
[data-theme="space"] .ansb { background: #0a0e1a; border-color: rgba(0, 212, 255, 0.10); }

/* ── RUN BUTTON ── */
[data-theme="space"] .crun {
  background: linear-gradient(180deg, #0f3a50, #071a26);
  border: 1px solid rgba(0, 212, 255, 0.32);
  color: #b0eeff;
  box-shadow: 0 0 0 1px rgba(0,212,255,.16), 0 8px 20px rgba(0,0,0,.52), 0 0 20px rgba(0,212,255,.10), inset 0 1px 0 rgba(0,212,255,.07);
}
[data-theme="space"] .crun:hover {
  box-shadow: 0 0 0 1px rgba(0,212,255,.26), 0 10px 24px rgba(0,0,0,.56), 0 0 28px rgba(0,212,255,.16), inset 0 1px 0 rgba(0,212,255,.10);
  transform: translateY(-1px);
}