/* Core layout */
.lab-page {
  background: #04020a;
  color: #cbd5e1;
  font-family: 'Kanit', sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.lab-container {
  display: flex;
  flex: 1;
  width: 100%;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  height: calc(100vh - 70px);
  overflow: hidden;
  box-sizing: border-box;
}

/* Dashboard Panels Layout */
.component-tray-panel {
  width: 250px;
  background: rgba(15, 12, 38, 0.8);
  border-right: 1.5px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 10;
}

.workspace-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #090715;
}

.inspector-panel {
  width: 320px;
  background: rgba(15, 12, 38, 0.8);
  border-left: 1.5px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 10;
}

/* Workspace Panning and Grid */
.workspace-container {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: grab;
  overflow: hidden;
}

.workspace-container:active {
  cursor: grabbing;
}

.workspace-viewport {
  width: 3000px;
  height: 3000px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1.2px, transparent 1.2px);
  background-size: 30px 30px;
}

/* SVG overlay for wires */
.workspace-wires-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Component drawer items */
.tray-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 15px;
  color: #fff;
  border-bottom: 1.5px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.tray-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tray-item-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  text-align: left;
}

.tray-item-btn:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

.tray-item-icon {
  font-size: 1.5rem;
}

.tray-item-info strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
}

.tray-item-info span {
  font-size: 0.72rem;
  color: #94a3b8;
}

/* Circuit Components styling */
.circuit-component {
  position: absolute;
  width: 90px;
  height: 60px;
  z-index: 2;
  user-select: none;
  touch-action: none;
}

.circuit-component.type-battery {
  width: 120px;
}

.comp-body {
  width: 100%;
  height: 100%;
  background: #1e293b;
  border: 2px solid #475569;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
}

.circuit-component.selected .comp-body {
  border-color: #8b5cf6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}

/* Specific Component Designs */
.battery-body {
  background: linear-gradient(135deg, #ef4444 0%, #1e293b 100%);
  border-color: #ef4444;
  justify-content: space-between;
  padding: 0 15px;
}

.bat-lbl {
  font-size: 0.7rem;
  opacity: 0.85;
}

.sign-plus, .sign-minus {
  font-size: 1.1rem;
  font-weight: 900;
}

.lamp-filament {
  width: 26px;
  height: 26px;
  position: relative;
  z-index: 2;
  transition: filter .18s ease, color .18s ease;
}

/* Stronger visual feedback while keeping intensity tied to real lamp power. */
.lamp-body {
  --lamp-glow: 0;
  overflow: visible;
  isolation: isolate;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.lamp-body::before {
  content: "";
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(255, 251, 214, .78) 0%,
    rgba(250, 204, 21, .46) 25%,
    rgba(245, 158, 11, .20) 52%,
    rgba(245, 158, 11, 0) 76%);
  transform: scale(.76);
  transition: opacity .18s ease, transform .18s ease;
}

.lamp-body.glowing {
  background: radial-gradient(circle at 48% 42%, #fffde8 0%, #fef08a 24%, #facc15 57%, #b45309 100%);
  border-color: #fde047;
  box-shadow:
    0 0 calc(12px + var(--lamp-glow) * 18px) rgba(254, 240, 138, calc(.42 + var(--lamp-glow) * .42)),
    0 0 calc(30px + var(--lamp-glow) * 38px) rgba(250, 204, 21, calc(.24 + var(--lamp-glow) * .34)),
    0 0 calc(56px + var(--lamp-glow) * 54px) rgba(245, 158, 11, calc(.10 + var(--lamp-glow) * .22));
  filter: saturate(calc(1.08 + var(--lamp-glow) * .34)) brightness(calc(1.04 + var(--lamp-glow) * .16));
}

.lamp-body.glowing::before {
  opacity: calc(.28 + var(--lamp-glow) * .62);
  transform: scale(calc(.90 + var(--lamp-glow) * .24));
}

.lamp-body.glowing .lamp-filament {
  color: #fffef2;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.95))
    drop-shadow(0 0 10px rgba(253,224,71,.95));
}

.resistor-zig {
  width: 60px;
  height: 20px;
  color: #f97316;
}

.switch-lever {
  position: absolute;
  top: 12px;
  left: 20px;
  width: 45px;
  height: 4px;
  background: #ef4444;
  transform-origin: 0 50%;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.gauge-face {
  width: 68px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(180deg, #07111f 0%, #0f172a 100%);
  border: 1.5px solid #64748b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.35);
}

.gauge-symbol {
  font-size: 0.62rem;
  opacity: 0.72;
  letter-spacing: 0.08em;
}

.gauge-reading {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.meter-terminal {
  font-size: 0.7rem;
}

.ammeter-body .gauge-face {
  color: #06b6d4;
  border-color: #06b6d4;
}

.voltmeter-body .gauge-face {
  color: #eab308;
  border-color: #eab308;
}

.comp-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.68rem;
  background: rgba(0,0,0,0.6);
  padding: 2px 6px;
  border-radius: 4px;
  color: #94a3b8;
  pointer-events: none;
}

/* Terminals */
.terminal-node {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #fff;
  z-index: 5;
  transform: translate(-50%, -50%);
  cursor: crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.15s;
  pointer-events: auto;
}

.terminal-node:hover {
  transform: translate(-50%, -50%) scale(1.3);
  background: #60a5fa;
}

/* Wires styling */
.circuit-wire {
  stroke: #4f46e5;
  stroke-width: 4.5;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke 0.15s, stroke-width 0.15s;
}

.circuit-wire:hover {
  stroke: #f43f5e;
  stroke-width: 6;
  filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.8));
}

.draft-wire {
  stroke: #10b981;
  stroke-width: 3.5;
  stroke-dasharray: 4 4;
  fill: none;
  pointer-events: none;
}

/* Particle flows */
.flow-particle-path {
  stroke: transparent;
  fill: none;
}

.flow-dot {
  filter: drop-shadow(0 0 4px #fbbf24);
}

/* Inspector pane styling */
.inspector-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 1.5px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.inspector-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 15px;
}

.inspector-card h3 {
  font-size: 1rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 4px;
  color: #fff;
}

.comp-id-sub {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 0;
  margin-bottom: 15px;
}

.inspector-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 15px;
}

.inspector-section h4 {
  font-size: 0.8rem;
  font-weight: bold;
  color: #94a3b8;
  margin-top: 0;
  margin-bottom: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 6px;
}

.info-row span {
  color: #94a3b8;
}

.control-group label {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 8px;
  color: #cbd5e1;
}

.control-group input[type="range"] {
  width: 100%;
  cursor: pointer;
}

/* Warning & Alerts */
.warnings-panel {
  margin-top: auto;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.1);
  padding-top: 15px;
}

.warnings-panel h4 {
  font-size: 0.85rem;
  margin-top: 0;
  margin-bottom: 8px;
  color: #e2e8f0;
}

.warning-item {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  margin-bottom: 8px;
  line-height: 1.4;
}

.warning-none {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #34d399;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
}

/* Toolbar & settings */
.workspace-toolbar {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 12, 38, 0.85);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  padding: 8px;
  border-radius: 12px;
  z-index: 5;
}

.btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.btn-danger {
  width: 100%;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
  padding: 8px;
}

.btn-danger:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

.btn-switch {
  width: 100%;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.btn-switch:hover {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

.btn-danger, .btn-switch {
  font-weight: bold;
}

.preset-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 12px;
}

.preset-select-wrap label {
  font-size: 0.78rem;
  color: #94a3b8;
}

.preset-select {
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 6px;
  border-radius: 8px;
  font-size: 0.78rem;
  outline: none;
}

.check-flow-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #cbd5e1;
  margin-left: 8px;
  cursor: pointer;
}

.check-flow-wrap input {
  cursor: pointer;
}

.text-neon-cyan {
  color: #06b6d4;
  text-shadow: 0 0 6px rgba(6, 182, 212, 0.5);
}

.text-neon-yellow {
  color: #eab308;
  text-shadow: 0 0 6px rgba(234, 179, 8, 0.5);
}

/* Mobile Responsiveness styling */
@media screen and (max-width: 860px) {
  .lab-container {
    flex-direction: column;
    height: calc(100vh - 60px);
  }

  .component-tray-panel {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
    padding: 10px 15px;
    overflow-y: visible;
  }

  .tray-title {
    display: none; /* hide label on mobile horizontal tray */
  }

  .tray-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
    gap: 8px;
  }

  .tray-item-btn {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 8px;
  }

  .tray-item-icon {
    font-size: 1.2rem;
  }

  .tray-item-info span {
    display: none; /* hide desc on mobile horizontal list */
  }

  .workspace-panel {
    flex: 1;
    height: 40%;
  }

  .workspace-toolbar {
    top: 10px;
    left: 10px;
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
    padding: 6px;
  }

  .preset-select-wrap {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 4px;
    width: 100%;
  }

  .preset-select {
    width: 100%;
  }

  .inspector-panel {
    width: 100%;
    height: 35%;
    border-left: none;
    border-top: 1.5px solid rgba(255, 255, 255, 0.08);
    padding: 15px;
  }
}

/* === Circuit manipulation controls: rotate / flip / duplicate / editable wires === */
.circuit-component.is-flipped.type-battery .battery-body {
  flex-direction: row-reverse;
}

.circuit-component.is-flipped.type-switch .switch-lever {
  left: auto;
  right: 20px;
  transform-origin: 100% 50%;
}

.terminal-node.wire-source {
  background: #10b981;
  border-color: #d1fae5;
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.15), 0 0 14px rgba(16, 185, 129, 0.8);
}

.terminal-node.wire-target {
  background: #fbbf24;
  border-color: #fff7cc;
  transform: translate(-50%, -50%) scale(1.55);
  box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.18), 0 0 16px rgba(251, 191, 36, 0.9);
}

.circuit-wire.selected {
  stroke: #fbbf24;
  stroke-width: 6.5;
  filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.7));
}

.component-context-toolbar,
.wire-context-toolbar {
  position: absolute;
  z-index: 12;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(9, 7, 21, 0.94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  white-space: nowrap;
}

.mini-action {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mini-action:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(129, 140, 248, 0.6);
}

.mini-action.danger:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(248, 113, 113, 0.7);
}

.wire-toolbar-hint {
  color: #cbd5e1;
  font-size: 0.68rem;
  padding: 0 4px;
}

.wire-endpoint-handle {
  position: absolute;
  z-index: 11;
  width: 26px;
  height: 26px;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid #fef3c7;
  background: rgba(245, 158, 11, 0.85);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14), 0 0 12px rgba(245, 158, 11, 0.65);
  cursor: grab;
  touch-action: none;
}

.wire-endpoint-handle:hover {
  transform: translate(-50%, -50%) scale(1.12);
}

.wire-endpoint-handle.dragging {
  pointer-events: none;
  cursor: grabbing;
  opacity: 0.45;
}

.component-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.component-action-btn {
  width: 100%;
  padding: 8px 6px;
  font-size: 0.76rem;
}

.component-action-btn.danger-soft {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.08);
}

.transform-status {
  margin-top: 9px;
  color: #94a3b8;
  font-size: 0.72rem;
  text-align: center;
}

.inspector-tip {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.45;
}

.wire-endpoint-row {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.wire-endpoint-row span {
  font-size: 0.7rem;
  color: #64748b;
}

.wire-endpoint-row strong {
  font-size: 0.72rem;
  color: #e2e8f0;
  overflow-wrap: anywhere;
}

.wire-edit-help {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.18);
  color: #fde68a;
  font-size: 0.75rem;
  line-height: 1.45;
}

.wire-edit-help p {
  margin: 5px 0 0;
  color: #cbd5e1;
}

@media screen and (max-width: 860px) {
  .component-context-toolbar {
    gap: 4px;
    padding: 4px;
  }

  .mini-action {
    width: 34px;
    height: 34px;
  }

  .wire-toolbar-hint {
    display: none;
  }

  .wire-endpoint-handle {
    width: 32px;
    height: 32px;
  }
}

.wire-hit-area {
  stroke: rgba(0, 0, 0, 0.001);
  stroke-width: 20;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}

.circuit-wire.hovered {
  stroke: #f43f5e;
  stroke-width: 6;
  filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.75));
}

.tray-item-btn.dragging-from-tray {
  opacity: 0.55;
  transform: scale(0.98);
}

.workspace-container.tray-drop-active::after {
  content: 'วางอุปกรณ์ตรงตำแหน่งที่ต้องการ';
  position: absolute;
  inset: 74px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(96, 165, 250, 0.45);
  border-radius: 18px;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.035);
  pointer-events: none;
  z-index: 4;
  font-size: 0.9rem;
}

/* === Circuit Lab polish: live properties, meter guidance, safety and save/load === */
.workspace-toolbar {
  flex-wrap: wrap;
  max-width: calc(100% - 30px);
}

.range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 0.65rem;
  color: #64748b;
}

.inspector-heading-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex-wrap: wrap;
}

.inspector-heading-row h3 {
  flex: 1;
  min-width: 160px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
}

.status-chip.danger {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.meter-guidance {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.18);
  color: #bfdbfe;
  font-size: 0.72rem;
  line-height: 1.5;
}

.meter-guidance.success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(52, 211, 153, 0.2);
  color: #a7f3d0;
}

.meter-guidance.danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(248, 113, 113, 0.28);
  color: #fecaca;
}

.warning-item.info {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(96, 165, 250, 0.22);
  color: #bfdbfe;
}

.warning-item.warn {
  background: rgba(245, 158, 11, 0.09);
  border-color: rgba(251, 191, 36, 0.28);
  color: #fde68a;
}

.warning-item.danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(248, 113, 113, 0.36);
  color: #fecaca;
}

.circuit-component.electrical-overload .comp-body {
  border-color: rgba(245, 158, 11, 0.95);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12), 0 0 18px rgba(245, 158, 11, 0.25);
}

.circuit-component.electrical-danger .comp-body {
  border-color: rgba(239, 68, 68, 0.95);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.13), 0 0 20px rgba(239, 68, 68, 0.3);
}

.circuit-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: #d1fae5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 0.8rem;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.circuit-toast.info {
  border-color: rgba(96, 165, 250, 0.3);
  color: #dbeafe;
}

.circuit-toast.error {
  border-color: rgba(248, 113, 113, 0.35);
  color: #fee2e2;
}

.circuit-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.workspace-container.wiring-mode::before {
  content: 'แตะหรือลากไปยังขั้วปลายทาง · แตะพื้นที่ว่างหรือกด Esc เพื่อยกเลิก';
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9;
  pointer-events: none;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: #a7f3d0;
  font-size: 0.72rem;
  white-space: nowrap;
}

@media screen and (max-width: 860px) {
  .workspace-toolbar {
    max-height: 112px;
    overflow-y: auto;
    align-content: flex-start;
    scrollbar-width: thin;
  }

  .workspace-toolbar .btn:not(.btn-icon) {
    padding: 6px 8px;
    font-size: 0.72rem;
  }

  .check-flow-wrap {
    margin-left: 0;
  }

  .workspace-container.wiring-mode::before {
    bottom: 10px;
    max-width: calc(100% - 24px);
    white-space: normal;
    text-align: center;
  }

  .terminal-node {
    min-width: 26px;
    min-height: 26px;
  }

  .inspector-panel {
    min-height: 210px;
  }
}

/* ===== Numeric value entry + robust current-flow particles ===== */
.flow-dot {
  fill: #fbbf24;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #fbbf24);
  will-change: cx, cy;
}

.control-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.value-mode-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.value-mode-btn {
  border: 0;
  border-radius: 7px;
  padding: 5px 8px;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.value-mode-btn:hover {
  color: #e2e8f0;
  background: rgba(99, 102, 241, 0.12);
}

.value-mode-btn.active {
  color: #fff;
  background: rgba(99, 102, 241, 0.72);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.22);
}

.value-mode-panel[hidden] {
  display: none !important;
}

.numeric-entry-row {
  display: flex;
  align-items: stretch;
  margin-top: 8px;
  border: 1px solid rgba(99, 102, 241, 0.45);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.72);
}

.numeric-entry-row input[type="number"] {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 10px 11px;
  color: #f8fafc;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.numeric-entry-row input[type="number"]:focus {
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.8);
}

.numeric-entry-row input[type="number"].input-clamped {
  color: #fbbf24;
}

.numeric-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 10px;
  border-left: 1px solid rgba(148, 163, 184, 0.14);
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.12);
  font-size: 0.78rem;
  font-weight: 800;
}

.numeric-help {
  margin-top: 6px;
  color: #64748b;
  font-size: 0.67rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .control-title-row {
    align-items: stretch;
  }

  .value-mode-toggle {
    width: 100%;
  }

  .value-mode-btn {
    flex: 1;
    min-height: 34px;
  }

  .numeric-entry-row input[type="number"] {
    min-height: 42px;
    font-size: 16px; /* prevent iOS auto zoom */
  }
}

/* === Extended component library: Cell / LED / Motor / Rheostat === */
.circuit-component.type-cell {
  width: 120px;
}

.tray-section-divider {
  margin: 8px 2px 2px;
  padding: 9px 8px 5px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  color: #c7d2fe;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.tray-section-divider span {
  font-size: 0.74rem;
  font-weight: 900;
}

.tray-section-divider small {
  color: #64748b;
  font-size: 0.62rem;
  line-height: 1.25;
}

.tray-item-extra {
  border-color: rgba(129, 140, 248, 0.22);
}

.cell-body {
  justify-content: space-between;
  padding: 0 8px;
  border-color: #22c55e;
  background: linear-gradient(180deg, #162033 0%, #0f172a 100%);
  overflow: hidden;
}

.cell-cylinder {
  position: relative;
  width: 76px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e5e7eb 0%, #94a3b8 18%, #334155 20%, #1e293b 78%, #64748b 80%, #cbd5e1 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell-voltage {
  font-size: 0.72rem;
  font-weight: 900;
  color: #dcfce7;
  text-shadow: 0 0 8px rgba(34,197,94,0.35);
}

.cell-label {
  position: absolute;
  bottom: 2px;
  right: 5px;
  font-size: 0.45rem;
  color: #94a3b8;
  letter-spacing: 0.08em;
}

.cell-cap, .cell-flat {
  width: 18px;
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
}

.cell-cap { color: #86efac; }
.cell-flat { color: #cbd5e1; }
.circuit-component.is-flipped.type-cell .cell-body { flex-direction: row-reverse; }

.led-body {
  --led-rgb: 239, 68, 68;
  --led-glow: 0;
  border-color: rgba(var(--led-rgb), 0.65);
  background: linear-gradient(180deg, rgba(var(--led-rgb), 0.08), #111827 80%);
  overflow: visible;
}

.led-red { --led-rgb: 239, 68, 68; }
.led-yellow { --led-rgb: 250, 204, 21; }
.led-green { --led-rgb: 34, 197, 94; }
.led-blue { --led-rgb: 59, 130, 246; }
.led-white { --led-rgb: 241, 245, 249; }

.led-dome {
  width: 30px;
  height: 34px;
  border-radius: 50% 50% 42% 42%;
  border: 2px solid rgba(var(--led-rgb), 0.72);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.65), rgba(var(--led-rgb), 0.22) 34%, rgba(var(--led-rgb), 0.07) 70%);
  position: relative;
  transition: box-shadow .18s ease, filter .18s ease, background .18s ease;
}

.led-core {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    rgba(255,255,255,calc(.18 + var(--led-glow) * .74)) 0%,
    rgba(var(--led-rgb),calc(.26 + var(--led-glow) * .72)) 32%,
    rgba(var(--led-rgb),calc(.10 + var(--led-glow) * .46)) 72%);
  transition: background .16s ease, box-shadow .16s ease, filter .16s ease;
}

.led-body::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  background: radial-gradient(circle,
    rgba(var(--led-rgb), .56) 0%,
    rgba(var(--led-rgb), .25) 38%,
    rgba(var(--led-rgb), 0) 73%);
  transform: scale(.76);
  transition: opacity .16s ease, transform .16s ease;
}

.led-body.glowing {
  box-shadow:
    0 0 calc(10px + var(--led-glow) * 16px) rgba(var(--led-rgb), calc(.38 + var(--led-glow) * .46)),
    0 0 calc(26px + var(--led-glow) * 38px) rgba(var(--led-rgb), calc(.20 + var(--led-glow) * .38)),
    0 0 calc(48px + var(--led-glow) * 58px) rgba(var(--led-rgb), calc(.08 + var(--led-glow) * .24));
}

.led-body.glowing::before {
  opacity: calc(.24 + var(--led-glow) * .62);
  transform: scale(calc(.94 + var(--led-glow) * .24));
}

.led-body.glowing .led-dome {
  filter: saturate(calc(1.18 + var(--led-glow) * .48)) brightness(calc(1.08 + var(--led-glow) * .82));
  box-shadow:
    inset 0 0 8px rgba(255,255,255,calc(.24 + var(--led-glow) * .48)),
    0 0 calc(9px + var(--led-glow) * 24px) rgba(var(--led-rgb), calc(.40 + var(--led-glow) * .52)),
    0 0 calc(22px + var(--led-glow) * 32px) rgba(var(--led-rgb), calc(.18 + var(--led-glow) * .35));
}

.led-body.glowing .led-core {
  box-shadow:
    0 0 5px rgba(255,255,255,calc(.36 + var(--led-glow) * .56)),
    0 0 calc(8px + var(--led-glow) * 13px) rgba(var(--led-rgb), .92);
}

.led-body.reversed { border-color: #64748b; opacity: .78; }
.led-body.overcurrent { animation: ledDangerPulse .55s ease-in-out infinite alternate; }
@keyframes ledDangerPulse { from { filter: none; } to { filter: brightness(1.35) saturate(1.7); } }

.led-polarity {
  position: absolute;
  top: 4px;
  font-size: .48rem;
  color: #94a3b8;
}
.led-anode { left: 5px; }
.led-cathode { right: 5px; }
.circuit-component.is-flipped.type-led .led-anode { left: auto; right: 5px; }
.circuit-component.is-flipped.type-led .led-cathode { right: auto; left: 5px; }
.led-terminal { font-size: .55rem; font-weight: 900; }

.motor-body {
  border-color: #38bdf8;
  background: radial-gradient(circle at center, #172554 0%, #0f172a 72%);
}

.motor-rotor {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(56, 189, 248, .48);
}
.motor-rotor span {
  position: absolute;
  left: 17px;
  top: 3px;
  width: 5px;
  height: 16px;
  border-radius: 999px;
  transform-origin: 2.5px 16px;
  background: linear-gradient(180deg, #67e8f9, #2563eb);
}
.motor-rotor span:nth-child(2) { transform: rotate(120deg); }
.motor-rotor span:nth-child(3) { transform: rotate(240deg); }
.motor-rotor.running { animation-name: motorSpin; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes motorSpin { to { transform: rotate(360deg); } }
.motor-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0f172a;
  border: 1px solid #67e8f9;
  color: #e0f2fe;
  font-size: .5rem;
  display: grid;
  place-items: center;
  z-index: 2;
}
.motor-body.overvoltage { border-color: #f97316; box-shadow: 0 0 18px rgba(249,115,22,.38); }

.rheostat-body {
  border-color: #a78bfa;
  background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%);
}
.rheostat-zig { width: 62px; height: 28px; color: #c4b5fd; }
.rheostat-wiper { color: #fbbf24; }

.component-select-control {
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(129, 140, 248, .38);
  border-radius: 9px;
  color: #e2e8f0;
  background: #0f172a;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .tray-section-divider {
    min-width: 110px;
    justify-content: center;
    border-top: 0;
    border-left: 1px solid rgba(148,163,184,.16);
    padding: 4px 10px;
  }
  .tray-section-divider small { display: none; }
}

/* ===== Screen-space current-flow overlay =====
   These particles are positioned from the wire's real screen CTM so they stay
   visually locked to the wire even while the 3000x3000 viewport is zoomed/panned. */
.flow-dot-screen {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.95), 0 0 16px rgba(251, 191, 36, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  will-change: left, top;
}

/* === Extended component catalog + classroom devices === */
.tray-category {
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
  overflow: hidden;
}
.tray-category-header {
  width: 100%;
  border: 0;
  background: rgba(99,102,241,.08);
  color: #dbeafe;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: inherit;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.tray-category-chevron { transition: transform .16s ease; opacity: .7; }
.tray-category.collapsed .tray-category-chevron { transform: rotate(-90deg); }
.tray-category-body { display: flex; flex-direction: column; gap: 7px; padding: 7px; }
.tray-category.collapsed .tray-category-body { display: none; }
.tray-category .tray-item-btn { padding: 9px 10px; border-radius: 9px; }
.tray-category .tray-item-icon { font-size: 1.2rem; min-width: 22px; text-align: center; }
.tray-category .tray-item-info strong { font-size: .78rem; }
.tray-category .tray-item-info span { font-size: .65rem; line-height: 1.25; }

/* Push button */
.pushbutton-body { background: linear-gradient(180deg,#1e293b,#0f172a); border-color:#64748b; }
.pushbutton-plunger {
  width: 40px; height: 32px; border: 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg,#fb7185,#be123c); box-shadow: 0 5px 0 #881337, 0 8px 14px rgba(0,0,0,.35);
  transform: translateY(-2px); transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
  touch-action: none;
}
.pushbutton-plunger span { display:block; width:17px; height:17px; margin:auto; border-radius:50%; border:2px solid rgba(255,255,255,.7); }
.pushbutton-body.pressed .pushbutton-plunger { transform: translateY(4px); box-shadow: 0 1px 0 #881337, 0 3px 7px rgba(0,0,0,.3); filter: brightness(1.18); }
.btn-pushbutton { width:100%; background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.35); color:#fecdd3; touch-action:none; }

/* Fuse */
.fuse-body { background:linear-gradient(180deg,#172033,#111827); border-color:#94a3b8; }
.fuse-glass { width:60px; height:20px; border-radius:12px; border:2px solid #cbd5e1; background:linear-gradient(180deg,rgba(224,242,254,.25),rgba(125,211,252,.05)); position:relative; overflow:hidden; }
.fuse-glass::before,.fuse-glass::after { content:""; position:absolute; top:2px; bottom:2px; width:8px; background:#94a3b8; border-radius:3px; }
.fuse-glass::before { left:2px; } .fuse-glass::after { right:2px; }
.fuse-wire { position:absolute; left:10px; right:10px; top:8px; height:2px; background:#f8fafc; box-shadow:0 0 6px rgba(255,255,255,.7); }
.fuse-body.blown { border-color:#f97316; }
.fuse-body.blown .fuse-wire { left:15px; right:auto; width:14px; transform:rotate(20deg); background:#fb923c; box-shadow:none; }
.fuse-body.blown .fuse-wire::after { content:""; position:absolute; left:24px; top:0; width:14px; height:2px; background:#fb923c; transform:rotate(-35deg); }

/* Buzzer */
.buzzer-body { --buzzer-level:0; background:radial-gradient(circle at 50% 42%,#24324a,#111827 70%); border-color:#38bdf8; overflow:visible; }
.buzzer-face { width:44px; height:44px; border-radius:50%; border:2px solid #38bdf8; display:flex; align-items:center; justify-content:center; color:#7dd3fc; position:relative; }
.buzzer-face strong { font-size:1.25rem; }
.buzzer-wave { position:absolute; right:-8px; font-size:1.2rem; opacity:0; color:#67e8f9; }
.buzzer-wave.w2 { right:-16px; }
.buzzer-body.active { box-shadow:0 0 calc(12px + var(--buzzer-level)*22px) rgba(56,189,248,.35); }
.buzzer-body.active .buzzer-wave { animation:buzzerWave .75s ease-out infinite; }
.buzzer-body.active .buzzer-wave.w2 { animation-delay:.18s; }
.buzzer-body.overvoltage { border-color:#f97316; }
@keyframes buzzerWave { 0%{opacity:.9; transform:scale(.65)} 100%{opacity:0; transform:translateX(8px) scale(1.2)} }

/* LDR + thermistor */
.ldr-body { --light-level:.5; background:linear-gradient(145deg,#172033,#101827); border-color:#eab308; overflow:visible; }
.ldr-symbol { width:58px; height:27px; color:#f59e0b; }
.ldr-sun { position:absolute; right:4px; top:2px; font-size:16px; opacity:calc(.25 + var(--light-level)*.75); filter:drop-shadow(0 0 calc(2px + var(--light-level)*8px) rgba(250,204,21,.9)); }
.thermistor-body { --temp-level:.4; background:linear-gradient(145deg,#172033,#101827); border-color:#38bdf8; }
.thermistor-symbol { width:55px; height:25px; color:#38bdf8; }
.thermometer-icon { position:absolute; right:4px; top:1px; font-size:16px; filter:saturate(calc(.7 + var(--temp-level)*1.2)); }

/* Diode */
.diode-body { background:linear-gradient(145deg,#172033,#101827); border-color:#a78bfa; color:#c4b5fd; }
.diode-symbol { width:60px; height:30px; }
.diode-body.conducting { border-color:#22c55e; color:#86efac; box-shadow:0 0 14px rgba(34,197,94,.3); }
.diode-body.reversed { opacity:.72; border-color:#64748b; color:#94a3b8; }
.diode-terminal { font-size:.55rem; }

/* Mini breadboard — functional node groups */
.circuit-component.type-breadboard { width:360px; height:210px; }
.breadboard-body {
  width:360px; height:210px; border-radius:16px; border:2px solid #cbd5e1;
  background:linear-gradient(180deg,#f8fafc,#e5e7eb); color:#334155;
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.6);
  overflow:hidden;
}
.circuit-component.type-breadboard.selected .breadboard-body { border-color:#8b5cf6; box-shadow:0 0 18px rgba(139,92,246,.45), 0 10px 28px rgba(0,0,0,.35); }
.breadboard-trench { position:absolute; left:174px; top:51px; width:12px; height:112px; background:linear-gradient(90deg,#cbd5e1,#fff,#cbd5e1); border-left:1px solid #94a3b8; border-right:1px solid #94a3b8; }
.breadboard-rail { position:absolute; left:43px; right:42px; height:2px; opacity:.85; }
.rail-top-plus { top:22px; background:#ef4444; } .rail-top-minus { top:40px; background:#3b82f6; }
.rail-bottom-plus { top:170px; background:#ef4444; } .rail-bottom-minus { top:188px; background:#3b82f6; }
.breadboard-label { position:absolute; left:18px; font-weight:900; font-size:13px; }
.breadboard-label.plus { color:#dc2626; } .breadboard-label.minus { color:#2563eb; }
.breadboard-label.top.plus { top:14px; } .breadboard-label.top.minus { top:32px; }
.breadboard-label.bottom.plus { top:162px; } .breadboard-label.bottom.minus { top:180px; }
.breadboard-title { position:absolute; right:13px; bottom:4px; font-size:8px; letter-spacing:.12em; color:#64748b; }
.breadboard-terminal {
  width:11px; height:11px; padding:0; background:#334155; border:2px solid #94a3b8; box-shadow:inset 0 0 0 2px #0f172a, 0 1px 2px rgba(0,0,0,.25);
  z-index:7;
}
.breadboard-terminal:hover,.breadboard-terminal.wire-source,.breadboard-terminal.wire-target { transform:translate(-50%,-50%) scale(1.6); }
.breadboard-rail-hole.rail-plus { border-color:#f87171; }
.breadboard-rail-hole.rail-minus { border-color:#60a5fa; }

@media screen and (max-width:860px) {
  .tray-list { align-items:stretch; }
  .tray-category { min-width:210px; flex:0 0 auto; }
  .tray-category-body { flex-direction:row; overflow-x:auto; }
  .tray-category .tray-item-btn { min-width:150px; }
  .circuit-component.type-breadboard { transform-origin:center center; }
}
.breadboard-col-labels { position:absolute; left:47px; top:47px; width:266px; display:grid; grid-template-columns:repeat(10,1fr); font-size:7px; font-weight:800; color:#64748b; text-align:center; pointer-events:none; }
.breadboard-row-labels { position:absolute; left:30px; top:55px; height:101px; display:grid; grid-template-rows:repeat(8,1fr); align-items:center; font-size:7px; font-weight:800; color:#64748b; pointer-events:none; }

/* ========================================================================== 
   Breadboard mounting system + Wire Focus + scalable component catalog
   ========================================================================== */

/* Layering: breadboard below jumper wires; ordinary parts above wires; holes
   and editing handles stay on top so the board is still easy to wire. */
.workspace-wires-svg { z-index: 3; }
.circuit-component { z-index: 4; }
.circuit-component.type-breadboard { z-index: 1; width: 420px; height: 320px; }
.circuit-component.is-mounted { z-index: 5; width: var(--mount-span, 40px); height: 44px; }
.breadboard-hole-overlay { z-index: 8 !important; }
.flow-dot-screen { z-index: 6; }

/* --- Wire Focus ---------------------------------------------------------- */
.circuit-wire {
  transition: stroke .14s ease, stroke-width .14s ease, opacity .14s ease, filter .14s ease;
}
.workspace-container.wire-mode-dim .circuit-wire:not(.selected):not(.hovered) {
  stroke: #818cf8;
  stroke-width: 3.2;
  stroke-dasharray: 7 8;
  opacity: .38;
  filter: none;
}
.workspace-container.wire-mode-normal .circuit-wire:not(.selected):not(.hovered) {
  stroke: #6366f1;
  stroke-width: 4.2;
  stroke-dasharray: none;
  opacity: .82;
}
.workspace-container.wire-mode-hidden .circuit-wire:not(.selected):not(.hovered) {
  opacity: 0;
}
.workspace-container.wire-mode-hidden .wire-hit-area { pointer-events: none; }
.workspace-container.wire-mode-hidden .flow-dot-screen { display: none !important; }
.workspace-container.wire-mode-dim .flow-dot-screen { opacity: .62; }
.workspace-container.has-wire-selection .circuit-wire:not(.selected):not(.hovered) {
  opacity: .16;
  stroke-dasharray: 5 10;
}
.circuit-wire.selected,
.workspace-container .circuit-wire.selected {
  stroke: #fbbf24;
  stroke-width: 6.5;
  stroke-dasharray: none;
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(251,191,36,.72));
}
.circuit-wire.hovered,
.workspace-container .circuit-wire.hovered {
  stroke: #fb7185;
  stroke-width: 5.5;
  stroke-dasharray: none;
  opacity: .9;
  filter: drop-shadow(0 0 6px rgba(244,63,94,.55));
}
.draft-wire {
  stroke-width: 4;
  stroke-dasharray: none;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(16,185,129,.55));
}

.wire-display-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(15,23,42,.76);
  color: #94a3b8;
  font-size: .7rem;
  white-space: nowrap;
}
.wire-display-select {
  border: 0;
  outline: 0;
  border-radius: 6px;
  padding: 4px 23px 4px 7px;
  background: #111827;
  color: #e2e8f0;
  font: inherit;
  cursor: pointer;
}

/* --- Component catalog: searchable accordion/drop-list ------------------ */
.tray-search-wrap {
  position: sticky;
  top: -20px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(129,140,248,.18);
  background: rgba(15,12,38,.96);
  box-shadow: 0 7px 18px rgba(0,0,0,.18);
}
.tray-search-icon { color:#818cf8; font-size:1rem; }
.tray-search-input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: #e2e8f0;
  background: transparent;
  font: inherit;
  font-size: .76rem;
}
.tray-search-input::placeholder { color:#64748b; }
.tray-list { gap: 8px; }
.tray-category-header { gap: 7px; }
.tray-category-header > span:first-child { flex: 1; }
.tray-category-count {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a5b4fc;
  background: rgba(99,102,241,.13);
  font-size: .62rem;
}
.tray-category.search-expanded .tray-category-body { display: flex !important; }
.tray-item-btn[hidden], .tray-category[hidden] { display: none !important; }

/* --- Larger, pitch-locked breadboard ------------------------------------ */
.breadboard-body {
  width: 420px;
  height: 320px;
  border-radius: 18px;
  border: 2px solid #cbd5e1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(241,245,249,.96)),
    repeating-linear-gradient(90deg, rgba(148,163,184,.05) 0 1px, transparent 1px 8px);
  color: #334155;
  box-shadow: 0 12px 32px rgba(0,0,0,.38), inset 0 0 0 4px rgba(255,255,255,.72);
  overflow: hidden;
}
.circuit-component.type-breadboard.mount-target .breadboard-body {
  border-color: #34d399;
  box-shadow: 0 0 0 4px rgba(52,211,153,.13), 0 0 28px rgba(52,211,153,.28), 0 12px 32px rgba(0,0,0,.38);
}
.breadboard-trench {
  left: 201px;
  top: 67px;
  width: 18px;
  height: 194px;
  border-left: 1px solid #94a3b8;
  border-right: 1px solid #94a3b8;
  background: linear-gradient(90deg,#cbd5e1,#f8fafc 45%,#fff 55%,#cbd5e1);
}
.breadboard-rail { left: 54px; right: 54px; height: 2px; opacity: .82; }
.rail-top-plus { top:28px; }
.rail-top-minus { top:52px; }
.rail-bottom-plus { top:272px; }
.rail-bottom-minus { top:296px; }
.breadboard-label { left: 22px; }
.breadboard-label.top.plus { top:18px; }
.breadboard-label.top.minus { top:42px; }
.breadboard-label.bottom.plus { top:262px; }
.breadboard-label.bottom.minus { top:286px; }
.breadboard-title { right: 15px; bottom: 6px; font-size: 9px; }
.breadboard-col-labels {
  left: 54px;
  top: 64px;
  width: 312px;
  grid-template-columns: repeat(10,1fr);
  font-size: 8px;
}
.breadboard-row-labels {
  left: 37px;
  top: 72px;
  height: 192px;
  grid-template-rows: repeat(8,24px);
  font-size: 8px;
}
.breadboard-terminal,
.breadboard-hole-overlay {
  width: 13px;
  height: 13px;
  padding: 0;
  background: #334155;
  border: 2px solid #94a3b8;
  box-shadow: inset 0 0 0 2px #0f172a, 0 1px 3px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.breadboard-hole-overlay:hover { transform: translate(-50%,-50%) scale(1.5); }
.breadboard-hole-overlay.mount-candidate {
  background: #10b981;
  border-color: #ecfdf5;
  transform: translate(-50%,-50%) scale(1.55);
  box-shadow: 0 0 0 6px rgba(16,185,129,.18), 0 0 17px rgba(16,185,129,.85);
}
.breadboard-hole-overlay.occupied-by-part:not(.mount-candidate) {
  border-color: #fbbf24;
  box-shadow: inset 0 0 0 2px #422006, 0 0 0 2px rgba(251,191,36,.16);
}
.breadboard-hole-overlay.occupied-by-wire:not(.mount-candidate) {
  border-color: #818cf8;
  box-shadow: inset 0 0 0 2px #1e1b4b, 0 0 0 2px rgba(129,140,248,.14);
}

/* --- Through-hole parts mounted on the breadboard ----------------------- */
.circuit-component.is-mounted {
  pointer-events: auto;
  --mounted-body-bg: #111827;
}
.circuit-component.is-mounted .terminal-node { display: none !important; }
.circuit-component.is-mounted .comp-label,
.circuit-component.is-mounted .led-polarity { display: none !important; }
.circuit-component.is-mounted::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,#94a3b8,#e2e8f0 15%,#e2e8f0 85%,#94a3b8);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  z-index: -1;
}
.circuit-component.is-mounted .comp-body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin: 0;
  box-sizing: border-box;
}
.circuit-component.is-mounted.selected .comp-body {
  box-shadow: 0 0 0 2px rgba(139,92,246,.32), 0 0 14px rgba(139,92,246,.45);
}

.circuit-component.type-resistor.is-mounted .resistor-body,
.circuit-component.type-diode.is-mounted .diode-body {
  width: clamp(30px, calc(var(--mount-span, 72px) * .66), 52px);
  height: 17px;
  border-radius: 8px;
  padding: 0 4px;
}
.circuit-component.type-resistor.is-mounted .resistor-body {
  background: linear-gradient(180deg,#d6b06f,#a87533);
  border-color: #f5d08a;
  color: #5b3513;
}
.circuit-component.type-resistor.is-mounted .resistor-zig { width: 100%; height: 13px; }
.circuit-component.type-diode.is-mounted .diode-body {
  background: linear-gradient(180deg,#1f2937,#030712);
  border-color: #c4b5fd;
  color: #e9d5ff;
}
.circuit-component.type-diode.is-mounted .diode-symbol { width: 100%; height: 14px; }

.circuit-component.type-led.is-mounted { height: 48px; }
.circuit-component.type-led.is-mounted::before { top: 73%; }
.circuit-component.type-led.is-mounted .led-body {
  width: 30px;
  height: 37px;
  top: 42%;
  border-radius: 14px 14px 7px 7px;
  padding: 0;
  background: transparent;
  border: 0;
}
.circuit-component.type-led.is-mounted .led-dome { width: 26px; height: 30px; }
.circuit-component.type-led.is-mounted .led-core { inset: 7px; }
.circuit-component.type-led.is-mounted .led-body::after {
  content: 'A  K';
  position: absolute;
  left: 50%;
  top: 29px;
  transform: translateX(-50%);
  color: #64748b;
  font-size: 6px;
  letter-spacing: 7px;
  white-space: nowrap;
}

.circuit-component.type-ldr.is-mounted .ldr-body,
.circuit-component.type-thermistor.is-mounted .thermistor-body {
  width: 34px;
  height: 26px;
  border-radius: 12px;
  padding: 0;
}
.circuit-component.type-ldr.is-mounted .ldr-symbol,
.circuit-component.type-thermistor.is-mounted .thermistor-symbol { width: 29px; height: 16px; }
.circuit-component.type-ldr.is-mounted .ldr-sun,
.circuit-component.type-thermistor.is-mounted .thermometer-icon { display:none; }

.circuit-component.type-pushbutton.is-mounted { height: 42px; }
.circuit-component.type-pushbutton.is-mounted::before { top: 64%; }
.circuit-component.type-pushbutton.is-mounted .pushbutton-body {
  width: 36px;
  height: 32px;
  border-radius: 8px;
  padding: 0;
}
.circuit-component.type-pushbutton.is-mounted .pushbutton-plunger {
  width: 25px;
  height: 21px;
  border-radius: 7px;
  box-shadow: 0 3px 0 #881337,0 5px 8px rgba(0,0,0,.28);
}
.circuit-component.type-pushbutton.is-mounted .pushbutton-plunger span { width: 10px; height: 10px; }

.mini-action:disabled,
.component-action-btn:disabled { opacity:.35; cursor:not-allowed; filter:grayscale(.7); }
.mini-action.unmount { color:#a7f3d0; border-color:rgba(52,211,153,.32); background:rgba(16,185,129,.10); }
.mount-status-card {
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  margin:0 0 12px;
  border-radius:10px;
  border:1px solid rgba(52,211,153,.22);
  background:rgba(16,185,129,.07);
}
.mount-status-card > div { min-width:0; flex:1; display:grid; gap:2px; }
.mount-status-card strong { color:#a7f3d0; font-size:.74rem; }
.mount-status-card span { color:#94a3b8; font-size:.68rem; }
.mount-unplug-btn { padding:6px 8px; font-size:.68rem; color:#d1fae5; border-color:rgba(52,211,153,.3); }

@media screen and (max-width: 860px) {
  .tray-search-wrap {
    position: static;
    min-width: 190px;
    margin: 0 8px 0 0;
    padding: 7px 8px;
    flex: 0 0 auto;
  }
  .tray-list { gap: 7px; }
  .tray-category { min-width: 190px; max-width: 220px; }
  .tray-category-body { flex-direction: column; max-height: 190px; overflow-y: auto; overflow-x: hidden; }
  .tray-category .tray-item-btn { min-width: 0; width: 100%; }
  .wire-display-control span { display:none; }
  .circuit-component.type-breadboard { transform-origin:center center; }
}
.breadboard-hole-overlay.wire-endpoint-selected,
.terminal-node.wire-endpoint-selected {
  background:#fbbf24;
  border-color:#fff7cc;
  transform:translate(-50%,-50%) scale(1.55);
  box-shadow:0 0 0 6px rgba(251,191,36,.16),0 0 18px rgba(251,191,36,.82);
}
.breadboard-hole-overlay.mounted-leg-selected {
  border-color:#c4b5fd;
  box-shadow:0 0 0 5px rgba(139,92,246,.16),0 0 14px rgba(139,92,246,.6);
}
/* Keep current particles below the floating toolbar. */
.flow-dot-screen { z-index: 4; }

/* ========================================================================== 
   Breadboard reliable wiring + Play/Stop animation control
   ========================================================================== */

/* A whole metal strip glows softly while a breadboard hole is used as the
   source/target. This makes the hidden internal connection obvious without
   cluttering the board with permanent lines. */
.breadboard-hole-overlay.breadboard-node-source {
  border-color: #34d399;
  background: #14532d;
  box-shadow: inset 0 0 0 2px #052e16, 0 0 0 3px rgba(52,211,153,.16), 0 0 10px rgba(52,211,153,.38);
}
.breadboard-hole-overlay.breadboard-node-target {
  border-color: #fbbf24;
  background: #713f12;
  box-shadow: inset 0 0 0 2px #422006, 0 0 0 3px rgba(251,191,36,.18), 0 0 11px rgba(251,191,36,.42);
}
.breadboard-hole-overlay.wire-source,
.breadboard-hole-overlay.wire-target {
  z-index: 12 !important;
  transform: translate(-50%,-50%) scale(1.7);
}

/* Compact animation transport. It pauses visual motion only; the electrical
   solution and meter readings remain intact. */
.simulation-toggle {
  min-width: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  border-color: rgba(52,211,153,.28) !important;
  background: rgba(6,78,59,.28) !important;
  color: #d1fae5 !important;
}
.simulation-toggle.is-paused {
  border-color: rgba(96,165,250,.3) !important;
  background: rgba(30,64,175,.24) !important;
  color: #dbeafe !important;
}
.workspace-container.simulation-paused .motor-rotor.running,
.workspace-container.simulation-paused .buzzer-body.active .buzzer-wave,
.workspace-container.simulation-paused .led-body.overcurrent {
  animation-play-state: paused !important;
}

@media screen and (max-width: 860px) {
  .simulation-toggle { min-width: 44px; padding-left: 8px; padding-right: 8px; }
}

/* =======================================================================
   Breadboard orientation correction — real solderless-board layout
   Numbers run left→right, A–E / F–J run vertically, center trench horizontal.
   Electrical grouping remains A1–E1 and F1–J1 for each number.
   ======================================================================= */
.breadboard-trench {
  left: 48px;
  right: 48px;
  top: 154px;
  width: auto;
  height: 14px;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid #94a3b8;
  border-bottom: 1px solid #94a3b8;
  background: linear-gradient(180deg,#cbd5e1,#f8fafc 45%,#fff 55%,#cbd5e1);
}
.breadboard-number-labels {
  position: absolute;
  left: 52px;
  top: 62px;
  width: 320px;
  display: grid;
  grid-template-columns: repeat(8, 40px);
  font-size: 8px;
  font-weight: 800;
  color: #64748b;
  text-align: center;
  pointer-events: none;
}
.breadboard-letter-labels {
  position: absolute;
  left: 48px;
  width: 14px;
  display: grid;
  grid-template-rows: repeat(5, 16px);
  align-items: center;
  justify-items: center;
  font-size: 8px;
  font-weight: 800;
  color: #64748b;
  pointer-events: none;
}
.breadboard-letter-labels.upper { top: 70px; }
.breadboard-letter-labels.lower { top: 170px; }
/* Hide obsolete label containers if an older render is briefly present while
   hot-reloading. */
.breadboard-col-labels,
.breadboard-row-labels { display: none; }


/* ===== Circuit health / learning diagnostics ===== */
.circuit-health-toggle {
  min-width: 92px;
  gap: 6px;
  font-weight: 800;
  white-space: nowrap;
}

.circuit-health-toggle .health-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  border: 1px solid currentColor;
}

.circuit-health-toggle.status-success { color: #86efac; border-color: rgba(74, 222, 128, 0.35); background: rgba(22, 163, 74, 0.10); }
.circuit-health-toggle.status-warning { color: #fde68a; border-color: rgba(251, 191, 36, 0.38); background: rgba(245, 158, 11, 0.10); }
.circuit-health-toggle.status-danger { color: #fecaca; border-color: rgba(248, 113, 113, 0.42); background: rgba(239, 68, 68, 0.12); }
.circuit-health-toggle.status-info { color: #bfdbfe; border-color: rgba(96, 165, 250, 0.30); background: rgba(59, 130, 246, 0.08); }

.circuit-health-card {
  border-radius: 11px;
  padding: 10px 11px;
  margin-bottom: 9px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(15, 23, 42, 0.72);
}

.circuit-health-card.status-success { border-color: rgba(52, 211, 153, 0.30); background: rgba(16, 185, 129, 0.08); }
.circuit-health-card.status-warning { border-color: rgba(251, 191, 36, 0.32); background: rgba(245, 158, 11, 0.08); }
.circuit-health-card.status-danger { border-color: rgba(248, 113, 113, 0.36); background: rgba(239, 68, 68, 0.10); }
.circuit-health-card.status-info { border-color: rgba(96, 165, 250, 0.25); background: rgba(59, 130, 246, 0.07); }

.circuit-health-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f8fafc;
  font-size: 0.78rem;
  line-height: 1.35;
}

.circuit-health-detail {
  color: #aab6c9;
  font-size: 0.69rem;
  line-height: 1.45;
  margin-top: 4px;
}

.warning-item.diagnostic-item {
  width: 100%;
  display: block;
  text-align: left;
  appearance: none;
  font-family: inherit;
}

.diagnostic-title {
  display: block;
  color: inherit;
  font-weight: 800;
  font-size: 0.74rem;
  line-height: 1.35;
}

.diagnostic-detail {
  display: block;
  margin-top: 3px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 0.68rem;
  line-height: 1.45;
}

.diagnostic-jump {
  display: block;
  margin-top: 5px;
  opacity: 0.7;
  font-size: 0.63rem;
  font-weight: 700;
}

.diagnostic-item.is-clickable {
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

.diagnostic-item.is-clickable:hover {
  transform: translateX(-2px);
  filter: brightness(1.12);
}

.warnings-panel.diagnostics-pulse {
  animation: diagnosticsPanelPulse 620ms ease-out;
}

@keyframes diagnosticsPanelPulse {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

@media (max-width: 1180px) {
  .circuit-health-toggle .health-label { display: none; }
  .circuit-health-toggle { min-width: 38px; padding-left: 8px; padding-right: 8px; }
}


/* ===== Diagnostic Neon Focus =====
   Clicking a learner diagnostic temporarily isolates the faulty part so a dense
   workspace remains readable. Selection remains after this 3.2 s cue ends. */
.workspace-container.diagnostic-focus-mode .circuit-component {
  transition: opacity 180ms ease, filter 180ms ease;
}
.workspace-container.diagnostic-focus-mode .circuit-component:not(.diagnostic-focus):not(.diagnostic-related) {
  opacity: .24;
  filter: saturate(.45) brightness(.66);
}
.workspace-container.diagnostic-focus-mode .circuit-component.diagnostic-related {
  opacity: .62;
  filter: saturate(.75) brightness(.88);
}
.workspace-container.diagnostic-focus-mode .circuit-wire:not(.diagnostic-focus-wire):not(.diagnostic-related-wire) {
  opacity: .10 !important;
  transition: opacity 160ms ease;
}
.workspace-container.diagnostic-focus-mode .circuit-wire.diagnostic-related-wire {
  opacity: .52 !important;
  stroke-width: 3.4 !important;
  filter: drop-shadow(0 0 5px rgba(125,211,252,.55));
}
.workspace-container.diagnostic-focus-mode .circuit-wire.diagnostic-focus-wire {
  opacity: 1 !important;
  stroke-dasharray: none !important;
  stroke-width: 5 !important;
  filter: drop-shadow(0 0 5px rgba(103,232,249,.95)) drop-shadow(0 0 12px rgba(59,130,246,.72));
  animation: diagnosticWirePulse 720ms ease-in-out 3;
}

.circuit-component.diagnostic-focus {
  z-index: 12 !important;
  opacity: 1 !important;
  filter: none !important;
}
.circuit-component.diagnostic-focus .comp-body {
  position: relative;
  isolation: isolate;
  animation: diagnosticNeonPulse 720ms ease-in-out 3;
}
.circuit-component.diagnostic-focus .comp-body::before,
.circuit-component.diagnostic-focus .comp-body::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 14px;
  inset: -8px;
  z-index: -1;
  border: 3px solid var(--diagnostic-neon, #22d3ee);
  box-shadow: 0 0 8px var(--diagnostic-neon, #22d3ee),
              0 0 20px var(--diagnostic-neon, #22d3ee),
              0 0 38px color-mix(in srgb, var(--diagnostic-neon, #22d3ee) 60%, transparent);
  animation: diagnosticRing 720ms ease-out 3;
}
.circuit-component.diagnostic-focus .comp-body::after {
  inset: -15px;
  opacity: .38;
  border-width: 2px;
  animation-delay: 100ms;
}
.circuit-component.diagnostic-focus.severity-danger { --diagnostic-neon: #fb7185; }
.circuit-component.diagnostic-focus.severity-warning { --diagnostic-neon: #facc15; }
.circuit-component.diagnostic-focus.severity-info { --diagnostic-neon: #38bdf8; }

/* Breadboard is much larger than ordinary components; keep the cue around the
   board itself instead of relying only on the small generic selection shadow. */
.circuit-component.type-breadboard.diagnostic-focus .breadboard-body {
  box-shadow: 0 0 0 3px var(--diagnostic-neon, #22d3ee),
              0 0 20px var(--diagnostic-neon, #22d3ee),
              0 0 46px color-mix(in srgb, var(--diagnostic-neon, #22d3ee) 52%, transparent),
              0 10px 28px rgba(0,0,0,.35) !important;
}

.diagnostic-focus-label {
  position: absolute;
  z-index: 18;
  transform: translate(-50%, -100%);
  min-width: 132px;
  max-width: 270px;
  padding: 8px 11px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(3,7,18,.94);
  color: #f8fafc;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 18px var(--diagnostic-label-glow, rgba(56,189,248,.55));
  animation: diagnosticLabelPop 220ms ease-out, diagnosticLabelGlow 720ms ease-in-out 3;
}
.diagnostic-focus-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(3,7,18,.94);
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.diagnostic-focus-label.severity-danger { --diagnostic-label-glow: rgba(251,113,133,.72); border-color: rgba(251,113,133,.72); }
.diagnostic-focus-label.severity-warning { --diagnostic-label-glow: rgba(250,204,21,.66); border-color: rgba(250,204,21,.66); }
.diagnostic-focus-label.severity-info { --diagnostic-label-glow: rgba(56,189,248,.66); border-color: rgba(56,189,248,.66); }
.diagnostic-focus-kicker {
  display: block;
  margin-bottom: 2px;
  color: #cbd5e1;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.diagnostic-focus-label strong {
  display: block;
  font-size: .70rem;
  line-height: 1.35;
}

@keyframes diagnosticNeonPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.07); }
}
@keyframes diagnosticRing {
  0% { opacity: .25; transform: scale(.92); }
  45% { opacity: 1; transform: scale(1.05); }
  100% { opacity: .34; transform: scale(1.13); }
}
@keyframes diagnosticWirePulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(103,232,249,.65)); }
  50% { filter: drop-shadow(0 0 7px rgba(103,232,249,1)) drop-shadow(0 0 15px rgba(59,130,246,.9)); }
}
@keyframes diagnosticLabelPop {
  from { opacity: 0; transform: translate(-50%, -84%) scale(.92); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
@keyframes diagnosticLabelGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.28); }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-component.diagnostic-focus .comp-body,
  .circuit-component.diagnostic-focus .comp-body::before,
  .circuit-component.diagnostic-focus .comp-body::after,
  .workspace-container.diagnostic-focus-mode .circuit-wire.diagnostic-focus-wire,
  .diagnostic-focus-label { animation: none !important; }
}


/* ===== Junction nodes + Node Inspector ================================== */
/* A junction is an electrical connection dot, not a resistor-like component.
   Several wires may terminate on the same single terminal. Crossed wires without
   this dot remain electrically separate, matching textbook schematics. */
.circuit-component.type-junction {
  /* Large interaction target, small visual dot. This prevents a 2–3 px miss
     from turning into workspace panning. */
  width: 44px;
  height: 44px;
  z-index: 7;
}
.junction-body {
  position: absolute;
  inset: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: grab;
  touch-action: none;
}
.circuit-component.type-junction.junction-dragging .junction-body { cursor: grabbing; }
.junction-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(148,163,184,.52);
  border-radius: 50%;
  background: rgba(15,23,42,.72);
  transition: .15s ease;
  pointer-events: none;
}
.junction-grip {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-54%);
  font-size:13px; line-height:1; color:#e2e8f0; pointer-events:none;
  text-shadow:0 0 8px rgba(103,232,249,.35);
}
.circuit-component.type-junction:hover .junction-ring,
.circuit-component.type-junction.selected .junction-ring {
  border-color: #67e8f9;
  box-shadow: 0 0 0 3px rgba(34,211,238,.13), 0 0 15px rgba(34,211,238,.42);
}
.junction-terminal {
  /* Electrical target at the exact node centre. Pointer interaction for moving
     is owned by .junction-body, so this can stay visually unobtrusive. */
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: transparent !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.junction-wire-handle {
  position:absolute !important;
  width:10px !important; height:10px !important;
  min-width:10px !important; min-height:10px !important;
  padding:0 !important; border-radius:50% !important;
  border:1px solid rgba(103,232,249,.82) !important;
  background:#0f172a !important; color:transparent !important;
  box-shadow:0 0 0 2px rgba(15,23,42,.72),0 0 9px rgba(34,211,238,.25) !important;
  transform:translate(-50%,-50%) !important;
  opacity:0; pointer-events:none; cursor:crosshair !important;
  transition:opacity .12s ease, box-shadow .12s ease, transform .12s ease;
  z-index:4;
}
.circuit-component.type-junction:hover .junction-wire-handle,
.circuit-component.type-junction.selected .junction-wire-handle {
  opacity:1; pointer-events:auto;
}
.junction-wire-handle:hover, .junction-wire-handle.wire-source, .junction-wire-handle.wire-target {
  background:#22d3ee !important; border-color:#ecfeff !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.22),0 0 16px rgba(34,211,238,.95) !important;
}
.jwh-n{left:22px !important;top:3px !important}.jwh-e{left:41px !important;top:22px !important}
.jwh-s{left:22px !important;top:41px !important}.jwh-w{left:3px !important;top:22px !important}
.circuit-component.type-junction.selected .junction-wire-handle,
.junction-wire-handle:hover,
.junction-wire-handle.wire-source,
.junction-wire-handle.wire-target {
  background: #22d3ee !important;
  border-color: #ecfeff !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.22), 0 0 16px rgba(34,211,238,.9) !important;
}

.junction-action {
  font-size: 1rem !important;
  color: #67e8f9 !important;
}

/* Node Inspect is deliberately a separate mode so normal clicks can keep
   creating wires. N toggles the mode from the keyboard. */
.node-inspect-toggle.is-active {
  border-color: rgba(34,211,238,.9) !important;
  background: rgba(8,145,178,.22) !important;
  color: #cffafe !important;
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.16), 0 0 14px rgba(34,211,238,.2);
}
.workspace-container.node-inspect-mode .terminal-node,
.workspace-container.node-inspect-mode .breadboard-hole-overlay {
  cursor: crosshair !important;
}
.workspace-container.node-inspect-mode::after {
  content: 'NODE MODE · คลิกขั้วหรือรูเพื่อดูการเชื่อมต่อ';
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 20;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid rgba(34,211,238,.32);
  border-radius: 999px;
  background: rgba(8,15,31,.82);
  color: #a5f3fc;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .025em;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.node-inspection-active .circuit-component:not(.node-inspect-component):not(.selected) {
  opacity: .58;
}
.node-inspection-active .circuit-wire:not(.node-inspect-wire):not(.selected) {
  opacity: .18 !important;
}
.terminal-node.node-inspect-terminal,
.breadboard-hole-overlay.node-inspect-terminal {
  z-index: 14 !important;
  transform: translate(-50%,-50%) scale(1.62) !important;
  border-color: #ecfeff !important;
  background: #22d3ee !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.2), 0 0 12px #22d3ee, 0 0 24px rgba(14,165,233,.75) !important;
}
.circuit-component.node-inspect-component .comp-body:not(.junction-body) {
  border-color: rgba(103,232,249,.8) !important;
  box-shadow: 0 0 0 1px rgba(34,211,238,.2), 0 0 15px rgba(34,211,238,.28) !important;
}
.circuit-wire.node-inspect-wire {
  opacity: 1 !important;
  stroke-width: 4px !important;
  stroke-dasharray: none !important;
  filter: drop-shadow(0 0 4px rgba(34,211,238,.9)) drop-shadow(0 0 9px rgba(59,130,246,.55)) !important;
}

.node-inspector-card {
  position: absolute;
  top: 58px;
  right: 12px;
  z-index: 24;
  width: min(255px, calc(100% - 24px));
  padding: 11px 12px 12px;
  border: 1px solid rgba(34,211,238,.48);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(8,15,31,.96), rgba(15,23,42,.94));
  color: #e2e8f0;
  box-shadow: 0 14px 34px rgba(0,0,0,.38), 0 0 22px rgba(34,211,238,.16);
  backdrop-filter: blur(12px);
}
.node-card-close {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #94a3b8;
  font-size: 1rem;
  cursor: pointer;
}
.node-card-close:hover { background: rgba(148,163,184,.12); color: #fff; }
.node-card-kicker {
  color: #67e8f9;
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.node-card-voltage {
  margin-top: 3px;
  color: #f8fafc;
  font-size: 1.38rem;
  font-weight: 900;
  line-height: 1.15;
}
.node-card-meta {
  margin-top: 4px;
  color: #94a3b8;
  font-size: .67rem;
}
.node-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.node-card-list span {
  padding: 3px 6px;
  border: 1px solid rgba(103,232,249,.18);
  border-radius: 6px;
  background: rgba(8,145,178,.1);
  color: #cbd5e1;
  font-size: .61rem;
}

@media (max-width: 720px) {
  .node-inspect-toggle { min-width: 42px; padding-left: 7px !important; padding-right: 7px !important; }
  .node-inspector-card { top: 54px; right: 8px; width: min(235px, calc(100% - 16px)); }
  .workspace-container.node-inspect-mode::after { bottom: 8px; font-size: .57rem; }
}

@media (max-width: 600px) {
  .component-tray-panel { padding: 6px 10px; }
  .tray-list { gap: 6px; }
  .tray-item-btn { padding: 6px 10px; border-radius: 6px; }
  .workspace-panel { height: 65%; }
  .node-inspector-card { right: 6px; top: 48px; }
}



/* Per-wire routing style -------------------------------------------------- */
.wire-style-picker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.wire-style-action {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
}

.wire-style-action.active {
  background: rgba(99, 102, 241, .32);
  border-color: rgba(165, 180, 252, .9);
  color: #eef2ff;
  box-shadow: 0 0 0 1px rgba(129,140,248,.22) inset, 0 0 12px rgba(99,102,241,.24);
}

.wire-toolbar-divider {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  margin: 2px 1px;
  background: rgba(255,255,255,.13);
}

@media (max-width: 720px) {
  .wire-context-toolbar .wire-toolbar-hint { display: none; }
  .wire-context-toolbar { gap: 3px; padding: 4px; }
  .wire-style-picker { gap: 2px; }
}


/* Live voltage probes ---------------------------------------------------- */
.voltage-probe-dock {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 28;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 7px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(8,15,31,.94), rgba(15,23,42,.91));
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
  backdrop-filter: blur(11px);
  color: #e2e8f0;
  user-select: none;
}
.voltage-probe-dock.is-active {
  border-color: rgba(56,189,248,.45);
  box-shadow: 0 12px 30px rgba(0,0,0,.34), 0 0 20px rgba(14,165,233,.12);
}
.probe-mode-toggle, .probe-pick, .probe-clear {
  height: 30px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  color: #cbd5e1;
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.probe-mode-toggle { padding: 0 9px; white-space: nowrap; }
.probe-mode-toggle.is-active {
  border-color: rgba(56,189,248,.7);
  background: rgba(14,165,233,.16);
  color: #e0f2fe;
}
.probe-pick-group { display: inline-flex; gap: 3px; }
.probe-pick { min-width: 48px; padding: 0 6px; }
.probe-pick[data-probe-color="red"] { color: #fb7185; }
.probe-pick[data-probe-color="black"] { color: #cbd5e1; }
.probe-pick.is-active {
  transform: translateY(-1px);
  border-color: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent), 0 0 12px color-mix(in srgb, currentColor 28%, transparent);
}
.probe-pick.has-point::after { content: '✓'; margin-left: 3px; font-size: .62rem; }
.probe-reading-wrap {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 7px;
  min-width: 142px;
  padding: 0 5px;
  line-height: 1.05;
}
.probe-reading-label { align-self: end; color: #64748b; font-size: .53rem; font-weight: 800; }
.probe-reading {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 950;
  white-space: nowrap;
}
.voltage-probe-dock.has-reading .probe-reading { color: #fde68a; text-shadow: 0 0 11px rgba(250,204,21,.22); }
.voltage-probe-dock.same-node .probe-reading { color: #67e8f9; }
.probe-reading-detail {
  grid-column: 1;
  max-width: 190px;
  overflow: hidden;
  color: #94a3b8;
  font-size: .55rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.probe-clear { width: 29px; padding: 0; color: #94a3b8; font-size: 1rem; }
.probe-clear:hover { color: #fff; background: rgba(244,63,94,.13); border-color: rgba(244,63,94,.32); }

.workspace-container.voltage-probe-mode .terminal-node,
.workspace-container.voltage-probe-mode .breadboard-hole-overlay,
.workspace-container.voltage-probe-mode .circuit-component.type-junction {
  cursor: crosshair !important;
}
.workspace-container.voltage-probe-mode::before {
  content: 'V PROBE · แตะโพรบแดงและดำที่ขั้วหรือรู Breadboard';
  position: absolute;
  left: 50%;
  bottom: 66px;
  z-index: 21;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid rgba(56,189,248,.28);
  border-radius: 999px;
  background: rgba(8,15,31,.78);
  color: #bae6fd;
  font-size: .61rem;
  font-weight: 850;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

/* Subtle glow shows the whole electrical node; the exact point touched by the
   probe is intentionally much stronger, which keeps dense breadboards readable. */
.terminal-node.probe-red-node, .breadboard-hole-overlay.probe-red-node {
  border-color: rgba(251,113,133,.66) !important;
  box-shadow: 0 0 0 2px rgba(244,63,94,.12), 0 0 8px rgba(244,63,94,.32) !important;
}
.terminal-node.probe-black-node, .breadboard-hole-overlay.probe-black-node {
  border-color: rgba(226,232,240,.68) !important;
  box-shadow: 0 0 0 2px rgba(148,163,184,.12), 0 0 8px rgba(203,213,225,.25) !important;
}
.terminal-node.probe-red-terminal, .breadboard-hole-overlay.probe-red-terminal {
  z-index: 18 !important;
  background: #f43f5e !important;
  border-color: #ffe4e6 !important;
  box-shadow: 0 0 0 4px rgba(244,63,94,.22), 0 0 14px #f43f5e, 0 0 28px rgba(244,63,94,.62) !important;
}
.terminal-node.probe-black-terminal, .breadboard-hole-overlay.probe-black-terminal {
  z-index: 18 !important;
  background: #0f172a !important;
  border-color: #f8fafc !important;
  box-shadow: 0 0 0 4px rgba(226,232,240,.18), 0 0 13px rgba(248,250,252,.8), 0 0 25px rgba(148,163,184,.44) !important;
}

.wire-current-readout {
  padding: 3px 6px;
  border: 1px solid rgba(34,211,238,.22);
  border-radius: 7px;
  background: rgba(8,145,178,.1);
  color: #67e8f9;
  font-size: .61rem;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .voltage-probe-dock { left: 7px; right: 7px; bottom: 7px; gap: 4px; padding: 5px; }
  .probe-mode-toggle { padding: 0 7px; }
  .probe-pick { min-width: 34px; }
  .probe-pick span { display: none; }
  .probe-reading-wrap { min-width: 0; flex: 1; }
  .probe-reading-detail { max-width: 112px; }
  .workspace-container.voltage-probe-mode::before { bottom: 58px; font-size: .54rem; }
}


/* =======================================================================
   Reactive components + DMM + immediate lamp/LED state refresh
   ======================================================================= */
.circuit-component.type-lamp.is-powered .lamp-body,
.circuit-component.type-lamp.lamp-on .lamp-body {
  border-color: #fde047;
  outline: 1px solid rgba(253,224,71,.45);
}
.circuit-component.type-lamp.is-powered {
  filter: drop-shadow(0 0 10px rgba(250,204,21,.28));
}
.circuit-component.type-led.is-powered .led-body,
.circuit-component.type-led.led-on .led-body {
  border-color: rgba(var(--led-rgb), .98);
  outline: 1px solid rgba(var(--led-rgb), .38);
}
.circuit-component.type-led.is-powered {
  filter: drop-shadow(0 0 9px rgba(var(--led-rgb), .34));
}
/* Selection remains visible on top of the powered border. */
.circuit-component.selected.type-lamp .lamp-body,
.circuit-component.selected.type-led .led-body {
  outline: 2px solid rgba(167,139,250,.78);
  outline-offset: 2px;
}

.capacitor-body,
.inductor-body {
  background: linear-gradient(180deg,#182135,#0f172a);
  position: relative;
  overflow: visible;
}
.capacitor-body { border-color:#22d3ee; color:#67e8f9; }
.inductor-body { border-color:#a78bfa; color:#c4b5fd; }
.capacitor-symbol { width:64px; height:30px; }
.inductor-symbol { width:68px; height:30px; }
.reactive-value {
  position:absolute; top:4px; right:5px; padding:2px 4px; border-radius:5px;
  font-size:.45rem; font-weight:900; letter-spacing:.02em;
  background:rgba(2,6,23,.72); color:#e2e8f0; border:1px solid rgba(148,163,184,.16);
}
.capacitor-body.charged { box-shadow:0 0 18px rgba(34,211,238,.24); }
.capacitor-body.overvoltage { border-color:#fb7185; box-shadow:0 0 18px rgba(244,63,94,.4); }
.inductor-body.energized { box-shadow:0 0 18px rgba(167,139,250,.26); }
.inductor-body.overcurrent { border-color:#fb7185; box-shadow:0 0 18px rgba(244,63,94,.4); }

.multimeter-body {
  width:104px;
  min-height:68px;
  border-color:#f59e0b;
  background:linear-gradient(155deg,#292014,#111827 48%,#090f1d);
  padding-top:14px;
  overflow:visible;
}
.circuit-component.type-multimeter { width:104px; }
.circuit-component.type-multimeter .terminal-node:last-child { left:104px !important; }
.multimeter-body .gauge-face { width:80px; height:36px; color:#fef08a; border-color:#f59e0b; }
.dmm-topline { position:absolute; top:3px; left:8px; right:8px; display:flex; justify-content:space-between; font-size:.48rem; font-weight:900; color:#fbbf24; }
.dmm-mode { min-width:18px; text-align:center; padding:1px 4px; border-radius:4px; background:rgba(245,158,11,.16); }
.dmm-red-terminal { border-color:#fb7185 !important; color:#fecdd3 !important; }
.dmm-black-terminal { border-color:#94a3b8 !important; color:#e2e8f0 !important; }
.multimeter-big-reading {
  margin:2px 0 10px; padding:13px 8px; border-radius:10px; text-align:center;
  font-size:1.35rem; font-weight:900; font-variant-numeric:tabular-nums;
  color:#fef08a; background:#07111f; border:1px solid rgba(245,158,11,.55);
  box-shadow:inset 0 0 16px rgba(0,0,0,.38),0 0 12px rgba(245,158,11,.12);
}
.circuit-component.is-mounted.type-capacitor,
.circuit-component.is-mounted.type-inductor { height:44px; }
.circuit-component.is-mounted.type-capacitor .reactive-value,
.circuit-component.is-mounted.type-inductor .reactive-value { display:none; }


/* =========================================================
   Crop / Marquee group move
   ========================================================= */
.workspace-container.marquee-select-mode {
  cursor: crosshair;
}
.workspace-container.marquee-select-mode:active {
  cursor: crosshair;
}
.workspace-container.marquee-select-mode .wire-hit-area {
  cursor: crosshair;
}
.workspace-container.marquee-select-mode .terminal-node,
.workspace-container.marquee-select-mode .breadboard-hole-overlay {
  cursor: move;
}
.workspace-container.marquee-select-mode .circuit-component {
  cursor: move;
}

.marquee-selection-box {
  position: absolute;
  z-index: 80;
  pointer-events: none;
  border: 2px solid rgba(56, 189, 248, .95);
  background: rgba(56, 189, 248, .10);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, .22) inset, 0 0 22px rgba(56, 189, 248, .18);
  border-radius: 7px;
}
.workspace-container.marquee-drawing::after {
  content: 'ปล่อยเมาส์เพื่อเลือกอุปกรณ์ในกรอบ';
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 81;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 12, 28, .88);
  border: 1px solid rgba(56, 189, 248, .35);
  color: #bae6fd;
  font-size: .64rem;
  font-weight: 700;
  white-space: nowrap;
}

.circuit-component.group-selected .comp-body {
  outline: 2px solid rgba(34, 211, 238, .92);
  outline-offset: 4px;
  box-shadow: 0 0 0 1px rgba(103, 232, 249, .22), 0 0 16px rgba(34, 211, 238, .32);
}
.circuit-component.group-selected.type-lamp .lamp-body,
.circuit-component.group-selected.type-led .led-body {
  outline-color: rgba(103, 232, 249, .95);
}

.group-selection-box {
  position: absolute;
  z-index: 9;
  pointer-events: none;
  border: 2px dashed rgba(34, 211, 238, .88);
  border-radius: 12px;
  background: rgba(34, 211, 238, .025);
  box-shadow: 0 0 18px rgba(34, 211, 238, .10);
}
.group-selection-toolbar {
  position: absolute;
  z-index: 24;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(103, 232, 249, .36);
  border-radius: 10px;
  background: rgba(7, 12, 28, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .36), 0 0 18px rgba(34, 211, 238, .12);
  pointer-events: auto;
  white-space: nowrap;
}
.group-move-handle,
.group-clear-action {
  border: 0;
  color: #ecfeff;
  background: transparent;
  font: inherit;
  cursor: grab;
}
.group-move-handle {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(6, 182, 212, .13);
  font-size: .67rem;
  font-weight: 800;
}
.group-move-handle:hover { background: rgba(6, 182, 212, .24); }
.group-move-handle:active { cursor: grabbing; }
.group-clear-action {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #fca5a5;
  font-size: 1rem;
}
.group-clear-action:hover { background: rgba(239, 68, 68, .16); }
.workspace-container.group-dragging,
.workspace-container.group-dragging .circuit-component,
.workspace-container.group-dragging .group-move-handle { cursor: grabbing !important; }

.crop-mode-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.crop-mode-toggle.is-active {
  border-color: rgba(34, 211, 238, .70) !important;
  background: rgba(6, 182, 212, .18) !important;
  color: #cffafe !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, .16);
}
.crop-select-all {
  display: none !important;
  padding-inline: 8px !important;
  color: #a5f3fc !important;
}
.crop-select-all.is-visible { display: inline-flex !important; }
.crop-select-all:disabled { opacity: .45; pointer-events: none; }

@media (max-width: 720px) {
  .workspace-container.marquee-drawing::after { bottom: 64px; font-size: .55rem; }
  .group-selection-toolbar { transform: translate(-50%, -50%) scale(.92); transform-origin: center; }
  .group-move-handle span { display: none; }
  .crop-mode-toggle span { display: none; }
  .crop-select-all { font-size: .55rem !important; }
}


/* ======================================================================
   Mobile Shell · Phase 1
   Same circuit model + solver as desktop. On phones/tablets the canvas owns
   the screen while the parts tray / inspector become temporary sheets.
   ====================================================================== */
.mobile-circuit-dock,
.mobile-circuit-scrim,
.mobile-sheet-header,
.mobile-more-sheet,
.mobile-fit-circuit { display: none; }

@media screen and (max-width: 860px) {
  html.circuit-mobile-layout,
  html.circuit-mobile-layout body { overscroll-behavior: none; }
  body.circuit-mobile-layout {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.circuit-mobile-layout .lab-container {
    position: relative;
    display: block;
    height: calc(100dvh - 60px);
    min-height: 420px;
    overflow: hidden;
  }
  body.circuit-mobile-layout .workspace-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    z-index: 1;
  }
  body.circuit-mobile-layout .workspace-container {
    width: 100%;
    height: 100%;
    touch-action: none;
  }

  body.circuit-mobile-layout .circuit-mobile-sheet {
    position: fixed !important;
    left: 8px;
    right: 8px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: auto !important;
    height: min(68dvh, 620px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top)) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    border: 1px solid rgba(129, 140, 248, .28) !important;
    border-radius: 22px !important;
    background: rgba(10, 8, 27, .97) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255,255,255,.03) inset;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 72 !important;
    transform: translateY(calc(100% + 92px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .24s cubic-bezier(.2,.75,.25,1), opacity .18s ease, visibility 0s linear .24s;
  }
  body.circuit-mobile-layout .circuit-mobile-sheet.mobile-sheet-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  body.circuit-mobile-layout .mobile-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 58px;
    padding: 10px 12px 9px 16px;
    border-bottom: 1px solid rgba(148,163,184,.12);
    background: linear-gradient(180deg, rgba(30,27,75,.58), rgba(15,12,38,.12));
  }
  .mobile-sheet-header > div { min-width: 0; display: grid; gap: 1px; }
  .mobile-sheet-header strong { color: #f8fafc; font-size: .88rem; }
  .mobile-sheet-header span { color: #94a3b8; font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-sheet-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 12px;
    background: rgba(15,23,42,.72);
    color: #cbd5e1;
    font: 700 1.25rem/1 'Kanit', sans-serif;
  }

  body.circuit-mobile-layout .component-tray-panel > :not(.mobile-sheet-header),
  body.circuit-mobile-layout .inspector-panel > :not(.mobile-sheet-header) { flex-shrink: 0; }
  body.circuit-mobile-layout .component-tray-panel .tray-search-wrap {
    position: static;
    width: auto;
    min-width: 0;
    margin: 12px 12px 8px;
    flex: 0 0 auto;
  }
  body.circuit-mobile-layout .component-tray-panel .tray-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 12px 18px;
    gap: 8px;
    overscroll-behavior: contain;
  }
  body.circuit-mobile-layout .component-tray-panel .tray-category {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
  }
  body.circuit-mobile-layout .component-tray-panel .tray-category-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    gap: 7px;
  }
  body.circuit-mobile-layout .component-tray-panel .tray-item-btn {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 8px 9px;
    gap: 8px;
  }
  body.circuit-mobile-layout .component-tray-panel .tray-item-info { min-width: 0; }
  body.circuit-mobile-layout .component-tray-panel .tray-item-info strong {
    font-size: .72rem;
    white-space: normal;
    line-height: 1.25;
  }
  body.circuit-mobile-layout .component-tray-panel .tray-item-info span { display: none; }

  body.circuit-mobile-layout .inspector-panel {
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.circuit-mobile-layout .inspector-panel #inspector-panel-content,
  body.circuit-mobile-layout .inspector-panel .inspector-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 18px;
    overscroll-behavior: contain;
  }
  body.circuit-mobile-layout .inspector-panel .warnings-panel {
    flex: 0 0 auto;
    margin: 0 12px 14px;
  }

  .mobile-circuit-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 68;
    border: 0;
    padding: 0;
    background: rgba(2, 1, 10, .38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
  .mobile-circuit-scrim.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .mobile-circuit-dock {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    left: 8px;
    right: 8px;
    bottom: max(7px, env(safe-area-inset-bottom));
    height: 58px;
    padding: 4px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 18px;
    background: rgba(8, 6, 23, .94);
    box-shadow: 0 13px 36px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.025) inset;
    backdrop-filter: blur(16px);
    z-index: 78;
  }
  .mobile-circuit-dock button {
    position: relative;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #94a3b8;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-family: inherit;
  }
  .mobile-circuit-dock button > span { font-size: .96rem; line-height: 1; font-weight: 850; }
  .mobile-circuit-dock button small { font-size: .56rem; font-weight: 700; white-space: nowrap; }
  .mobile-circuit-dock button.is-active,
  .mobile-circuit-dock button:active { background: rgba(99,102,241,.17); color: #c4b5fd; }
  .mobile-circuit-dock button.has-selection { color: #ddd6fe; }
  .mobile-selected-dot {
    position: absolute;
    right: calc(50% - 18px);
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 8px rgba(139,92,246,.8);
    opacity: 0;
  }
  .mobile-circuit-dock button.has-selection .mobile-selected-dot { opacity: 1; }
  .mobile-health-count {
    position: absolute;
    top: 3px;
    right: calc(50% - 22px);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .51rem;
    line-height: 1;
  }
  .mobile-circuit-dock [data-status="success"] .mobile-health-icon { color:#86efac; }
  .mobile-circuit-dock [data-status="warning"] .mobile-health-icon { color:#fde68a; }
  .mobile-circuit-dock [data-status="danger"] .mobile-health-icon { color:#fca5a5; }
  .mobile-circuit-dock [data-status="info"] .mobile-health-icon { color:#93c5fd; }

  body.circuit-mobile-layout .workspace-toolbar {
    top: max(7px, env(safe-area-inset-top));
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 18px);
    min-height: 44px;
    max-height: none;
    overflow: visible;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(8,6,23,.88);
    backdrop-filter: blur(12px);
  }
  body.circuit-mobile-layout .workspace-toolbar > * { display: none !important; }
  body.circuit-mobile-layout .workspace-toolbar #btn-undo,
  body.circuit-mobile-layout .workspace-toolbar #btn-redo,
  body.circuit-mobile-layout .workspace-toolbar .simulation-toggle,
  body.circuit-mobile-layout .workspace-toolbar .mobile-fit-circuit {
    display: inline-flex !important;
    width: 38px;
    min-width: 38px;
    height: 36px;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: .78rem;
  }
  body.circuit-mobile-layout .workspace-toolbar .simulation-toggle { width: 44px; min-width: 44px; }
  body.circuit-mobile-layout .workspace-toolbar .simulation-toggle > span { margin: 0; }
  body.circuit-mobile-layout .workspace-toolbar .simulation-toggle { font-size: 0 !important; }
  body.circuit-mobile-layout .workspace-toolbar .simulation-toggle > span { font-size: .9rem; }
  .mobile-fit-circuit { display: none; }
  body.circuit-mobile-layout .mobile-fit-circuit { display: inline-flex !important; }

  .mobile-more-sheet { display: flex; }
  .mobile-more-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 18px;
  }
  .mobile-more-field { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; gap: 8px; margin-bottom: 9px; }
  .mobile-more-field > span { color:#94a3b8; font-size:.68rem; font-weight:750; }
  .mobile-more-field select {
    width: 100%;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(15,23,42,.78);
    color: #e2e8f0;
    padding: 0 9px;
    font-family: inherit;
  }
  .mobile-more-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
  .mobile-more-grid button {
    min-height: 44px;
    padding: 7px 9px;
    border-radius: 11px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(255,255,255,.035);
    color:#dbeafe;
    font-family:inherit;
    font-size:.7rem;
    font-weight:750;
  }
  .mobile-more-grid button.is-active { border-color:rgba(52,211,153,.38); background:rgba(16,185,129,.11); color:#a7f3d0; }
  .mobile-more-grid button.danger { border-color:rgba(248,113,113,.24); color:#fecaca; }

  body.circuit-mobile-layout .voltage-probe-dock {
    left: 50% !important;
    right: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: min(560px, calc(100% - 18px));
    max-width: calc(100% - 18px);
    box-sizing: border-box;
    transform: translateX(-50%) scale(.92);
    transform-origin: bottom center;
  }
  body.circuit-mobile-layout .node-inspector-card { bottom: calc(76px + env(safe-area-inset-bottom)); top: auto; }
  body.circuit-mobile-layout .circuit-toast { bottom: calc(78px + env(safe-area-inset-bottom)); }

  body.circuit-mobile-layout .workspace-container.wiring-mode::before {
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
}

@media screen and (max-width: 430px) {
  body.circuit-mobile-layout .component-tray-panel .tray-category-body { grid-template-columns: 1fr; }
  body.circuit-mobile-layout .circuit-mobile-sheet { left: 5px; right: 5px; border-radius: 18px !important; }
  .mobile-circuit-dock { left:5px; right:5px; }
}

@media screen and (orientation: landscape) and (max-width: 1024px) and (pointer: coarse) {
  body.circuit-mobile-layout .circuit-mobile-sheet {
    top: 8px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    height: auto !important;
    max-height: none !important;
    width: min(340px, 42vw) !important;
    border-radius: 18px !important;
  }
  body.circuit-mobile-layout .mobile-component-sheet {
    left: 8px;
    right: auto;
    transform: translateX(calc(-100% - 20px));
  }
  body.circuit-mobile-layout .mobile-inspector-sheet,
  body.circuit-mobile-layout .mobile-more-sheet {
    left: auto;
    right: 8px;
    transform: translateX(calc(100% + 20px));
  }
  body.circuit-mobile-layout .circuit-mobile-sheet.mobile-sheet-open { transform: translateX(0); }
  body.circuit-mobile-layout .component-tray-panel .tray-category-body { grid-template-columns: 1fr; }
}


/* Phase 1 mobile polish · header/sheet/probe safety ----------------------- */
@media screen and (max-width: 860px) {
  /* Do not trap the page at the lab scroll position. The shared/global header lives
     outside the lab and must remain reachable on mobile. */
  html.circuit-mobile-layout { overflow-x: hidden; overflow-y: auto; }
  body.circuit-mobile-layout.mobile-circuit-sheet-active { overflow: hidden; }

  /* Common shared-header hooks used around the site: never let the Circuit canvas
     sit above them. This does not change their layout/display mode. */
  body.circuit-mobile-layout :is(.global-header, .site-header, #global-header, #site-header, [data-global-header]) {
    z-index: 120;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Fixed translucent layers + backdrop-filter are blurry on several mobile Chromium
     compositors. Use opaque-ish surfaces and a plain dim scrim instead. */
  body.circuit-mobile-layout .circuit-mobile-sheet,
  body.circuit-mobile-layout .mobile-circuit-scrim {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.circuit-mobile-layout .circuit-mobile-sheet {
    background: #0a081b !important;
    contain: layout paint;
  }

  /* Keep floating teaching tools inside the safe area without changing their
     existing anchoring logic. */
  body.circuit-mobile-layout .node-inspector-card,
  body.circuit-mobile-layout .circuit-toast {
    max-width: calc(100% - 18px);
    box-sizing: border-box;
  }
}


/* Desktop safety guard: Phase 1 must be invisible above the phone breakpoint. */
@media screen and (min-width: 861px) {
  .mobile-circuit-dock,
  .mobile-circuit-scrim,
  .mobile-sheet-header,
  .mobile-more-sheet,
  .mobile-fit-circuit { display: none !important; }
}

/* ======================================================================
   Mobile polish · full global header + draggable inspector popup
   ====================================================================== */
@media screen and (max-width: 860px) {
  /* Restore the shared header as a true site header, then add lightweight
     proxy controls that forward clicks to the existing theme/profile/menu
     controls. This keeps Circuit Lab from owning global navigation logic. */
  body.circuit-mobile-layout .circuit-global-header-mobile-restored {
    position: relative !important;
    z-index: 140 !important;
    overflow: visible !important;
  }
  body.circuit-mobile-layout .circuit-mobile-global-actions {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 4;
  }
  body.circuit-mobile-layout .circuit-mobile-global-actions[hidden] { display: none !important; }
  body.circuit-mobile-layout .circuit-mobile-global-proxy:not([hidden]) {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 10px;
    background: rgba(15,23,42,.72);
    color: #e2e8f0;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    font: 800 .9rem/1 'Kanit', sans-serif;
  }
  body.circuit-mobile-layout .circuit-mobile-global-proxy:active {
    transform: translateY(1px);
    background: rgba(99,102,241,.18);
    color: #ddd6fe;
  }

  /* Inspector is intentionally NOT a modal bottom sheet. It floats above the
     circuit, can be dragged by its title bar, and leaves the workspace clickable. */
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup.circuit-mobile-sheet {
    left: 10px;
    right: auto;
    top: 104px;
    bottom: auto;
    width: min(78vw, 430px) !important;
    height: auto !important;
    min-height: 190px !important;
    max-height: min(58dvh, 590px) !important;
    border-radius: 18px !important;
    transform: translate3d(0, -8px, 0) scale(.985) !important;
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .18s cubic-bezier(.2,.75,.25,1), visibility 0s linear .18s;
    box-shadow: 0 20px 55px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.025) inset;
    z-index: 76 !important;
  }
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup.circuit-mobile-sheet.mobile-sheet-open {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup .mobile-inspector-drag-handle {
    min-height: 50px;
    padding: 8px 9px 8px 12px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    background:
      linear-gradient(180deg, rgba(49,46,129,.34), rgba(15,12,38,.08));
  }
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup .mobile-inspector-drag-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 5px;
    width: 36px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 99px;
    background: rgba(196,181,253,.44);
  }
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup .mobile-inspector-drag-handle > div {
    padding-right: 4px;
  }
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup.mobile-inspector-dragging {
    transition: none !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.68), 0 0 0 1px rgba(167,139,250,.28) inset;
  }
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup.mobile-inspector-dragging .mobile-inspector-drag-handle {
    cursor: grabbing;
  }
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup #inspector-panel-content,
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup .inspector-content {
    max-height: calc(min(58dvh, 590px) - 52px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The floating inspector must never activate the page-wide modal dimmer. */
  body.circuit-mobile-layout:has(.mobile-inspector-popup.mobile-sheet-open) .mobile-circuit-scrim:not(.is-active) {
    pointer-events: none;
  }
}

@media screen and (max-width: 520px) {
  body.circuit-mobile-layout .circuit-mobile-global-actions { right: 7px; gap: 4px; }
  body.circuit-mobile-layout .circuit-mobile-global-proxy:not([hidden]) {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    font-size: .82rem;
  }
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup.circuit-mobile-sheet {
    width: min(84vw, 360px) !important;
    max-height: 54dvh !important;
  }
}

@media screen and (orientation: landscape) and (max-width: 860px) {
  body.circuit-mobile-layout .inspector-panel.mobile-inspector-popup.circuit-mobile-sheet {
    width: min(390px, 44vw) !important;
    max-height: calc(100dvh - 92px) !important;
  }
}

@media screen and (min-width: 861px) {
  .circuit-mobile-global-actions { display: none !important; }
}

/* ======================================================================
   Circuit Lab · real global header controls (desktop + mobile)
   Replaces the old proxy-only rail with functional Theme / Profile / Menu.
   ====================================================================== */
.circuit-mobile-global-actions { display: none !important; }

.circuit-global-header-ready {
  position: relative !important;
  overflow: visible !important;
  z-index: 160 !important;
}

.circuit-site-actions {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 180;
}
.circuit-site-actions[hidden] { display: none !important; }
.circuit-header-popover-wrap { position: relative; }
.circuit-header-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 12px;
  background: rgba(15,23,42,.82);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 1rem/1 'Kanit', sans-serif;
  cursor: pointer;
  box-shadow: 0 7px 20px rgba(0,0,0,.22);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.circuit-header-btn:hover,
.circuit-header-btn:focus-visible {
  border-color: rgba(167,139,250,.58);
  background: rgba(67,56,202,.2);
  outline: none;
}
.circuit-header-btn:active { transform: translateY(1px); }
.circuit-member-orb {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ede9fe, #c4b5fd);
  color: #312e81;
  font-size: .76rem;
  font-weight: 900;
}
.circuit-header-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(310px, calc(100vw - 24px));
  padding: 9px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 16px;
  background: #0c0a1d;
  color: #e2e8f0;
  box-shadow: 0 22px 60px rgba(0,0,0,.62);
  z-index: 1200;
}
.circuit-header-popover[hidden] { display: none !important; }
.circuit-member-head {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 6px 9px;
}
.circuit-member-head > div:last-child { min-width: 0; display: grid; gap: 1px; }
.circuit-member-head strong { color: #f8fafc; font-size: .86rem; }
.circuit-member-head span { color: #94a3b8; font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circuit-member-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ede9fe, #c4b5fd);
  color: #312e81;
  font-weight: 900;
}
.circuit-popover-sep { height: 1px; margin: 2px 4px 6px; background: rgba(148,163,184,.14); }
.circuit-popover-item,
button.circuit-popover-item {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  text-decoration: none;
  font: 750 .76rem/1.25 'Kanit', sans-serif;
  cursor: pointer;
}
.circuit-popover-item:hover,
.circuit-popover-item:focus-visible { background: rgba(129,140,248,.12); outline: none; color: #fff; }
.circuit-site-nav-popover {
  width: min(330px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
}
.circuit-site-nav-popover a {
  padding: 10px 11px;
  border-radius: 10px;
  color: #dbeafe;
  text-decoration: none;
  font: 800 .73rem/1.2 'Kanit', sans-serif;
}
.circuit-site-nav-popover a:hover,
.circuit-site-nav-popover a.active { background: rgba(139,92,246,.16); color: #fff; }

/* The circuit canvas remains dark for readability, but the actual page/global
   theme state still follows the shared toa-theme preference. */
:root[data-theme="light"] .circuit-global-header-ready .circuit-header-btn {
  background: rgba(255,255,255,.92);
  color: #172554;
  border-color: rgba(71,85,105,.2);
}
:root[data-theme="light"] .circuit-header-popover {
  background: #fff;
  color: #172554;
  border-color: rgba(71,85,105,.18);
  box-shadow: 0 18px 46px rgba(15,23,42,.18);
}
:root[data-theme="light"] .circuit-member-head strong,
:root[data-theme="light"] .circuit-popover-item,
:root[data-theme="light"] button.circuit-popover-item,
:root[data-theme="light"] .circuit-site-nav-popover a { color: #172554; }
:root[data-theme="light"] .circuit-member-head span { color: #64748b; }

@media screen and (max-width: 860px) {
  .circuit-site-actions {
    right: 10px;
    gap: 5px;
  }
  .circuit-header-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 11px;
    font-size: .9rem;
  }
  .circuit-member-orb { width: 25px; height: 25px; font-size: .7rem; }
  .circuit-header-popover {
    position: fixed;
    top: max(72px, calc(env(safe-area-inset-top) + 62px));
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - 92px - env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .circuit-site-nav-popover { width: auto; }

  /* Component/inspector sheets are moved to body in JS while mobile is active.
     This prevents the lab-container overflow from clipping the Components panel. */
  body.circuit-mobile-layout > .component-tray-panel.circuit-mobile-sheet,
  body.circuit-mobile-layout > .inspector-panel.circuit-mobile-sheet {
    z-index: 82 !important;
  }
  body.circuit-mobile-layout > .component-tray-panel.circuit-mobile-sheet.mobile-sheet-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

@media screen and (max-width: 520px) {
  .circuit-site-actions { right: 7px; gap: 4px; }
  .circuit-header-btn { width: 33px; height: 33px; min-width: 33px; border-radius: 10px; }
  .circuit-site-nav-popover { grid-template-columns: 1fr 1fr; }
}


/* ======================================================================
   Circuit Lab · global header normalization v2
   - Desktop uses the same full-width tab language as normal site pages.
   - Hamburger is mobile-only.
   - Mobile popovers are viewport-safe and Thai labels never break per syllable.
   ====================================================================== */
.circuit-global-header-ready,
.circuit-global-header-ready * {
  font-family: 'Kanit', 'Noto Sans Thai', system-ui, sans-serif;
}

.circuit-global-main-nav {
  min-width: 0;
}
.circuit-global-main-nav a,
.circuit-site-nav-popover a,
.circuit-popover-item,
.circuit-popover-item span {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.circuit-account-btn .circuit-account-label {
  display: none;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (min-width: 861px) {
  .circuit-global-header-ready {
    min-height: 58px;
  }

  .circuit-global-main-nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.35vw, 24px);
    margin-inline: auto;
    padding-inline: 14px 170px;
    white-space: nowrap;
  }
  .circuit-global-main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 16px;
    color: #ddd6fe;
    text-decoration: none;
    font-size: clamp(.72rem, .78vw, .88rem);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition: background .14s ease, color .14s ease, transform .14s ease;
  }
  .circuit-global-main-nav a:hover,
  .circuit-global-main-nav a:focus-visible {
    color: #fff;
    background: rgba(139,92,246,.13);
    outline: none;
  }
  .circuit-global-main-nav a.active {
    color: #35256d;
    background: #c4b5fd;
    box-shadow: 0 6px 18px rgba(124,58,237,.16);
  }

  /* Normal desktop pages expose the full nav; hamburger is reserved for mobile. */
  .circuit-site-actions .circuit-nav-wrap {
    display: none !important;
  }
  .circuit-site-actions {
    right: 18px;
    gap: 8px;
  }
  .circuit-account-btn {
    width: auto;
    min-width: 42px;
    padding: 0 12px 0 7px;
    gap: 7px;
  }
  .circuit-account-btn .circuit-account-label {
    display: inline-block;
    color: inherit;
    font-size: .75rem;
    font-weight: 850;
  }
}

@media screen and (max-width: 860px) {
  .circuit-global-main-nav {
    display: none !important;
  }
  .circuit-site-actions .circuit-nav-wrap {
    display: block !important;
  }
  .circuit-site-actions {
    right: max(10px, env(safe-area-inset-right));
    gap: 6px;
  }
  .circuit-header-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 13px;
  }
  .circuit-account-btn {
    padding: 0;
  }
  .circuit-account-btn .circuit-account-label {
    display: none !important;
  }

  /* Fixed to the viewport, not to the narrow icon wrapper.  This removes the
     clipped panel + horizontal scrollbar seen on mobile. */
  .circuit-header-popover,
  .circuit-site-nav-popover,
  .circuit-member-dropdown {
    position: fixed !important;
    top: max(76px, calc(env(safe-area-inset-top) + 66px)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom)) !important;
  }
  .circuit-site-nav-popover {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 10px !important;
  }
  .circuit-site-nav-popover a {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 10px 13px !important;
    font-size: .8rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .circuit-member-dropdown {
    padding: 10px !important;
  }
  .circuit-member-head strong,
  .circuit-member-head span,
  .circuit-popover-item,
  button.circuit-popover-item {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

@media screen and (max-width: 520px) {
  .circuit-site-nav-popover {
    grid-template-columns: 1fr !important;
  }
}