:root {
  --bg: #090d16;
  --bg-gradient: radial-gradient(circle at center, #0f172a 0%, #070a12 100%);
  --panel: rgba(17, 24, 39, 0.7);
  --panel-hover: rgba(30, 41, 59, 0.8);
  --panel-border: rgba(255, 255, 255, 0.08);
  
  --ink: #f3f4f6;
  --muted: #94a3b8;
  --line: rgba(255, 255, 255, 0.08);
  
  --blue: #3b82f6;
  --blue-hover: #60a5fa;
  --blue-glow: rgba(59, 130, 246, 0.35);
  
  --green: #10b981;
  --green-glow: rgba(16, 185, 129, 0.45);
  
  --red: #ef4444;
  --red-hover: #f87171;
  --red-glow: rgba(239, 68, 68, 0.45);
  
  --amber: #f59e0b;
  --amber-glow: rgba(245, 158, 11, 0.55);
  
  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  --glass-blur: blur(12px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image: var(--bg-gradient);
  color: var(--ink);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  transform-origin: top center;
  width: var(--app-scaled-width, 100%);
}

body.resolution-scaled {
  zoom: var(--app-resolution-scale, 1);
}

@supports not (zoom: 1) {
  body.resolution-scaled {
    transform: scale(var(--app-resolution-scale, 1));
  }
}

/* Header Styling */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 14px 28px;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header-brand-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.header-title-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.app-header h1 {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
  margin: 0;
}

.app-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.resolution-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 5px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.resolution-picker select {
  width: auto;
  min-width: 98px;
  height: 30px;
  padding: 4px 8px;
  font-size: 12px;
  margin: 0;
  border-radius: 6px;
}

/* Save/Load Header Bar */
.header-save-load {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-border);
  padding: 4px 10px;
  border-radius: 8px;
  backdrop-filter: blur(5px);
}

.header-save-load input,
.header-save-load select {
  height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  width: auto;
  min-width: 130px;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 0;
  box-sizing: border-box;
}

.header-save-load select {
  min-width: 140px;
}

.header-save-load button {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 6px;
}

.save-load-separator {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}

.header-actions,
.split-actions,
.example-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons */
button {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  padding: 10px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--blue-hover);
  box-shadow: 0 0 10px var(--blue-glow);
  transform: translateY(-1px);
}

button:active {
  transform: translateY(1px);
}

button.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}

button.primary:hover {
  background: var(--blue-hover);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 12px var(--blue-glow);
}

button.danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

button.danger:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 15px var(--red-glow);
}

button.danger.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 15px var(--red-glow);
}

/* Layout */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
}

.workspace,
.side-panel,
.physical {
  min-width: 0;
}

.workspace {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  position: sticky;
  top: 100px;
}

.side-panel {
  grid-column: 2;
  grid-row: 2;
  max-height: calc(100vh - 502px);
  overflow-y: auto;
  position: sticky;
  top: 482px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  flex-shrink: 0;
}

.toolbar button {
  padding: 8px 14px;
  font-size: 13px;
}

.toolbar .move-tool {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.toolbar .move-tool:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
}

.editor-shell,
.panel,
.physical {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 20px;
  transition: border-color 0.3s ease;
}

.editor-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-shell:hover,
.panel:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.editor-title {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 16px;
}

.editor-title h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

#scanStatus {
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.2);
  font-family: 'Fira Code', monospace;
}

.ladder-editor {
  padding: 10px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  flex: 1;
  min-height: 0;
}

/* Custom scrollbar for ladder editor and side panel */
.ladder-editor::-webkit-scrollbar,
.side-panel::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ladder-editor::-webkit-scrollbar-track,
.side-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.ladder-editor::-webkit-scrollbar-thumb,
.side-panel::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.5);
  border-radius: 4px;
}

.ladder-editor::-webkit-scrollbar-thumb:hover,
.side-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.8);
}

/* Rung Grid System */
.rung {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(720px, 1fr) 24px;
  align-items: center;
  min-height: 145px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.02);
  padding: 0 4px;
}

.rail {
  height: auto;
  align-self: stretch;
  min-height: 130px;
  margin: 6px 0;
  border-left: 5px solid #475569;
  box-shadow: 0 0 10px rgba(71, 85, 105, 0.3);
  border-radius: 2px;
}

.rung-body {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(76px, 1fr));
  grid-auto-rows: 58px;
  column-gap: 10px;
  row-gap: 14px;
  align-items: center;
  min-height: 130px;
  padding: 12px;
}

.rung-body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  border-top: 3px solid #334155;
  z-index: 0;
}

/* Slots */
.slot {
  position: relative;
  z-index: 1;
  min-height: 56px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.6);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 2px;
  cursor: pointer;
}

.slot:hover {
  border-color: var(--blue-hover);
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 8px var(--blue-glow);
}

.slot.output-slot {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(15, 23, 42, 0.85);
}

.slot.or-slot {
  border-style: solid;
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(30, 58, 138, 0.2);
}

.slot.or-slot::before,
.slot.or-slot::after {
  display: none;
}

.slot.series-or-slot::before,
.slot.series-or-slot::after {
  display: none;
}

/* Parallel wires - vertical lines on left and right sides */
.parallel-wire-left,
.parallel-wire-right {
  position: relative;
  z-index: 0;
  pointer-events: none;
  align-self: stretch;
}

.parallel-wire-left::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 28px;
  bottom: 28px;
  width: 3px;
  background: #475569;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(71, 85, 105, 0.5);
}

.parallel-wire-right::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 28px;
  bottom: 28px;
  width: 3px;
  background: #475569;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(71, 85, 105, 0.5);
}

/* Horizontal wire for each branch row */
.parallel-wire-h {
  position: relative;
  z-index: 0;
  pointer-events: none;
  align-self: stretch;
}

.parallel-wire-h::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 3px solid #334155;
}

/* Old bridge (no longer used but kept for compat) */
.parallel-bridge {
  position: relative;
  z-index: 0;
  pointer-events: none;
  align-self: stretch;
}

.parallel-bridge::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: -43px;
  bottom: 27px;
  border-left: 3px solid #334155;
  border-right: 3px solid #334155;
  border-bottom: 3px solid #334155;
}

.slot.selected {
  outline: 2px solid var(--blue-hover);
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.08);
}

.slot.multi-selected {
  outline: 2px solid #fbbf24;
  outline-offset: 5px;
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.1);
}

.slot.selected.multi-selected {
  outline-color: #fbbf24;
}

/* Power Flow state */
.slot.powered {
  background: rgba(16, 185, 129, 0.08);
  border-color: var(--green);
  box-shadow: 0 0 14px var(--green-glow);
}

.slot.powered .symbol {
  color: #34d399;
}

.slot.powered .symbol .draw {
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.slot.off {
  background: rgba(15, 23, 42, 0.65);
}

/* Symbol Display */
.symbol {
  position: relative;
  min-width: 62px;
  text-align: center;
  color: var(--ink);
  transition: color 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.command-led {
  position: absolute;
  top: -8px;
  right: -9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111827;
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.slot.commanded .command-led {
  background: #ef4444;
  border-color: #fca5a5;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.85), inset 0 0 3px rgba(255, 255, 255, 0.35);
}

.or-slot .symbol::before,
.or-slot .symbol::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 23px;
  border-top: 3px solid #334155;
  transform: translateY(-50%);
  z-index: -1;
}

.or-slot .symbol::before {
  right: calc(100% + 4px);
}

.or-slot .symbol::after {
  left: calc(100% + 4px);
}

/* Parallel wire tool button */
button[data-tool="parallel-wire"],
.parallel-btn {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

button[data-tool="parallel-wire"]:hover,
.parallel-btn:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
}

button[data-tool="parallel-wire"].active,
.parallel-btn.active {
  background: var(--amber);
  border-color: var(--amber);
  color: #000;
  box-shadow: 0 0 12px var(--amber-glow);
}

.symbol .draw {
  display: block;
  direction: ltr;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.5px;
  font-family: 'Fira Code', monospace;
}

.symbol .draw.long-label {
  font-size: 11px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.component-label {
  display: block;
  margin-bottom: 4px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.symbol .tag {
  display: block;
  margin-top: 2px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 600;
}

.symbol .logic {
  display: inline-block;
  margin-top: 3px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.symbol .branch-note {
  display: block;
  margin-top: 2px;
  color: #bfdbfe;
  font-size: 9px;
  font-weight: 700;
}

.symbol .live-value {
  display: inline-block;
  margin-top: 3px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.symbol .live-value.done {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.25);
  text-shadow: 0 0 5px rgba(16, 185, 129, 0.4);
}

.remove-rung {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border-color: transparent;
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  transition: all 0.2s ease;
  font-size: 14px;
}

.remove-rung:hover {
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 0 10px var(--red-glow);
  border-color: var(--red);
}

/* Side Panel styling */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel {
  padding: 18px;
}

.panel h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  color: #60a5fa;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 8px;
}

.symbol-properties-panel {
  padding: 10px 12px;
}

.symbol-properties-panel h2 {
  margin-bottom: 7px;
  padding-bottom: 5px;
  font-size: 15px;
}

.symbol-properties-panel label {
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.15;
}

.symbol-properties-panel input,
.symbol-properties-panel select {
  min-height: 26px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 12px;
}

.symbol-properties-panel button {
  width: 100%;
  min-height: 28px;
  padding: 4px 12px;
  margin-top: 3px;
  border-radius: 6px;
  font-size: 12px;
}

.symbol-properties-panel #selectionHint {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.2;
}

label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--ink);
  outline: none;
  transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue-hover);
  box-shadow: 0 0 8px var(--blue-glow);
  background: rgba(0, 0, 0, 0.35);
}

/* Autocomplete/Assembly Editor */
textarea {
  direction: ltr;
  text-align: left;
  min-height: 220px;
  resize: vertical;
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.asm-editor-wrap {
  position: relative;
}

.asm-autocomplete {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 10;
  display: grid;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  direction: ltr;
  text-align: left;
}

.asm-suggestion {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}

.asm-suggestion:hover,
.asm-suggestion.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  box-shadow: none;
  transform: none;
}

.asm-suggestion code {
  font-family: 'Fira Code', monospace;
  font-weight: 700;
  color: var(--ink);
}

.asm-suggestion span {
  color: var(--muted);
  font-size: 11px;
}

/* IO Toggle Banks */
.io-bank,
.terminal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.io-toggle,
.terminal {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}

.io-toggle {
  min-height: 32px;
  font-size: 11px;
  border-radius: 6px;
}

.input-control {
  display: grid;
  gap: 4px;
}

.input-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.input-mode input {
  width: 13px;
  height: 13px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.io-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--blue-hover);
  color: var(--ink);
}

.io-toggle.on,
.terminal.on {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--green);
  color: #34d399;
  box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.2), 0 0 8px rgba(16, 185, 129, 0.1);
  text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
}

/* Physical Board Styling */
.physical {
  grid-column: 2;
  grid-row: 1;
  max-height: 350px;
  overflow-y: auto;
  position: sticky;
  top: 100px;
  padding: 14px;
}

.physical-header-row {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 8px;
}

.physical-header-row h2 {
  font-size: 15px;
  font-weight: 800;
  color: #60a5fa;
  margin: 0;
  border: none;
  padding: 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--muted);
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.physical .checkbox-label {
  display: none;
}

body.no-wire-animations .wire-layer path.on {
  animation: none !important;
  stroke-dasharray: none !important;
  filter: none !important;
}

.plc-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  min-height: 0;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.plc-box {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #f3f4f6;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  padding: 10px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05), var(--shadow);
  border: 3px solid #020617;
}

.plc-brand {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  color: #94a3b8;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 4px;
  margin-bottom: 0;
}

.plc-screen {
  grid-column: 1 / -1;
  margin: 8px 0;
  padding: 7px;
  border-radius: 8px;
  background: #061512;
  border: 2px solid rgba(34, 197, 94, 0.3);
  color: #10b981;
  text-align: center;
  font-weight: 700;
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  box-shadow: inset 0 0 12px rgba(16, 185, 129, 0.3), 0 0 10px rgba(16, 185, 129, 0.15);
  letter-spacing: 0.5px;
}

.io-section {
  margin-top: 10px;
}

.io-section h3 {
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.terminal {
  min-height: 28px;
  background: #020617;
  border-color: #334155;
  color: #94a3b8;
  font-size: 11px;
  font-family: 'Fira Code', monospace;
  cursor: default;
}

.terminal.on {
  background: #10b981;
  color: #022c22;
  border-color: #34d399;
}

/* Wires Layer (Active glowing wiring) */
.wire-layer {
  display: none;
}

.wire-layer path {
  fill: none;
  stroke: rgba(71, 85, 105, 0.5);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke 0.3s ease, filter 0.3s ease;
}

.wire-layer path.on {
  stroke: var(--amber);
  stroke-dasharray: 8 8;
  animation: flow 1s linear infinite;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
}

@keyframes flow {
  to {
    stroke-dashoffset: -16;
  }
}

/* Lamps Board (Realistic 3D styling) */
.lamp-board {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.lamp {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 5px 3px;
  min-height: 56px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.lamp:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.lamp-name {
  font-weight: 700;
  font-size: 9px;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.bulb {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 35%, #475569 0%, #1e293b 80%, #0f172a 100%);
  border: 2px solid #334155;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.1);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Distinct glowing color profiles for different lamps */
.lamp[data-lamp="0"] .bulb.on { /* Green Bulb */
  background: radial-gradient(circle at 35% 35%, #a7f3d0 0%, #10b981 70%, #047857 100%);
  border-color: #34d399;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.7);
}

.lamp[data-lamp="1"] .bulb.on { /* Red Bulb */
  background: radial-gradient(circle at 35% 35%, #fecaca 0%, #ef4444 70%, #b91c1c 100%);
  border-color: #f87171;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.7);
}

.lamp[data-lamp="2"] .bulb.on { /* Amber Bulb */
  background: radial-gradient(circle at 35% 35%, #fde68a 0%, #f59e0b 70%, #b45309 100%);
  border-color: #fbbf24;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.7);
}

.lamp[data-lamp="3"] .bulb.on { /* Blue Bulb */
  background: radial-gradient(circle at 35% 35%, #bfdbfe 0%, #3b82f6 70%, #1d4ed8 100%);
  border-color: #60a5fa;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.7);
}

.lamp-base {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.lamp label {
  position: absolute;
  inset-inline: 2px;
  top: calc(100% + 2px);
  z-index: 5;
  display: none;
  padding: 4px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.96);
  box-shadow: var(--shadow);
  font-size: 0;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
}

.lamp:hover label,
.lamp:focus-within label {
  display: block;
}

.lamp select {
  font-size: 8px;
  padding: 0 2px;
  margin-top: 0;
  height: 19px;
}

/* Color profiles for lamps 4–7 */
.lamp[data-lamp="4"] .bulb.on { /* Cyan Bulb */
  background: radial-gradient(circle at 35% 35%, #a5f3fc 0%, #06b6d4 70%, #0e7490 100%);
  border-color: #22d3ee;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.7);
}

.lamp[data-lamp="5"] .bulb.on { /* Purple Bulb */
  background: radial-gradient(circle at 35% 35%, #e9d5ff 0%, #a855f7 70%, #7e22ce 100%);
  border-color: #c084fc;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.7);
}

.lamp[data-lamp="6"] .bulb.on { /* Pink Bulb */
  background: radial-gradient(circle at 35% 35%, #fbcfe8 0%, #ec4899 70%, #9d174d 100%);
  border-color: #f472b6;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.7);
}

.lamp[data-lamp="7"] .bulb.on { /* Orange Bulb */
  background: radial-gradient(circle at 35% 35%, #fed7aa 0%, #f97316 70%, #c2410c 100%);
  border-color: #fb923c;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.7);
}

/* Save Load Styles */
.save-load-grid {
  display: flex;
  flex-direction: column;
}

/* Responsive queries */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 16px;
  }

  .workspace,
  .physical,
  .side-panel {
    grid-column: 1;
    grid-row: auto;
    position: static;
    max-height: none;
  }
  
  .plc-stage {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .lamp-board {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  
  .wire-layer {
    display: none;
  }
}

@media (max-width: 640px) {
  .app-header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  
  .header-title-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .header-save-load {
    flex-wrap: wrap;
    justify-content: center;
  }

  .resolution-picker {
    justify-content: space-between;
    width: 100%;
  }
  
  .rung {
    grid-template-columns: 14px minmax(680px, 1fr) 14px;
  }
  
  .lamp-board {
    grid-template-columns: 1fr;
  }
}

/* Counter-paired rungs: collapse gap between them */
.rung.counter-pair-top {
  margin-bottom: 0;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.rung.counter-pair-bottom {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 2;
}

/* ==========================================
   Counter Block (CTU) Visual Styling
   ========================================== */
.counter-top-block,
.counter-bottom-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.98);
  font-family: 'Outfit', sans-serif;
  border: 2px solid rgba(96, 165, 250, 0.75);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.counter-top-block {
  border-radius: 8px 8px 0 0;
  border-bottom: 1px dashed rgba(96, 165, 250, 0.4) !important;
}

.counter-bottom-block {
  border-radius: 0 0 8px 8px;
  border-top: none !important;
  position: relative;
}

/* Visually bridge the internal padding gap between counter blocks */
.counter-bottom-block::before {
  content: "";
  position: absolute;
  top: -28px;
  left: -2px;
  right: -2px;
  height: 30px;
  background: rgba(15, 23, 42, 0.98);
  border-left: 2px solid rgba(96, 165, 250, 0.75);
  border-right: 2px solid rgba(96, 165, 250, 0.75);
  z-index: 2;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Center connector accent showing blocks are linked */
.counter-bottom-block::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 14px;
  background: rgba(96, 165, 250, 0.85);
  border-radius: 1px;
  z-index: 3;
  pointer-events: none;
}

.counter-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  padding: 5px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-family: 'Fira Code', monospace;
}

.counter-io {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  flex-grow: 1;
  justify-content: center;
}

.io-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

.io-row .led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #334155;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.io-row .led.on.cu-led { /* CU (Count Up) LED - Green glow */
  background: #10b981;
  box-shadow: 0 0 8px #10b981, inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.io-row .led.on.reset-led { /* R (Reset) LED - Red glow */
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444, inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.counter-footer {
  background: rgba(0, 0, 0, 0.3);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 5px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Fira Code', monospace;
}

/* Counter output slot - ensure it renders above rung backgrounds and stretches to full height */
.slot.output-slot:has(.counter-top-block),
.slot.output-slot:has(.counter-bottom-block) {
  z-index: 5;
  overflow: visible;
  border-color: transparent;
  background: transparent;
  align-self: stretch;
  display: block;
}

/* Selected state highlight for counter blocks */
.slot.selected .counter-top-block,
.slot.selected .counter-bottom-block {
  border-color: var(--blue-hover);
  box-shadow: 0 0 15px var(--blue-glow);
}

.slot.selected .counter-bottom-block::before {
  border-left-color: var(--blue-hover);
  border-right-color: var(--blue-hover);
}

/* Rung with counter-bottom needs higher stacking to show bridge above previous rung */
.rung:has(.counter-bottom-block) {
  z-index: 2;
}

/* Done state glowing profiles */
.counter-top-block.done-block,
.counter-bottom-block.done-block {
  border-color: var(--green);
}

.counter-bottom-block.done-block::before {
  border-left-color: var(--green);
  border-right-color: var(--green);
  background: rgba(15, 23, 42, 0.98);
}

.counter-top-block.done-block {
  box-shadow: 0 -4px 12px var(--green-glow), inset 0 0 15px rgba(16, 185, 129, 0.1);
}

.counter-bottom-block.done-block {
  box-shadow: 0 4px 12px var(--green-glow), inset 0 0 15px rgba(16, 185, 129, 0.1);
}

.counter-top-block.done-block .counter-header {
  background: linear-gradient(135deg, #064e3b 0%, #0f172a 100%);
  color: #34d399;
}

/* Read only io-toggles for Markers */
.io-toggle.read-only {
  cursor: default !important;
}

.io-toggle.read-only:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--panel-border) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

.io-toggle.read-only.on:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: var(--green) !important;
  color: #34d399 !important;
  box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.2), 0 0 8px rgba(16, 185, 129, 0.1) !important;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
}

.modal-box {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 28px;
  min-width: 340px;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  backdrop-filter: var(--glass-blur);
}

.modal-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 10px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.modal-actions button {
  flex: 1;
  padding: 12px;
}

#markerBank {
  grid-template-columns: repeat(6, 1fr);
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

#markerBank::-webkit-scrollbar {
  width: 6px;
}

#markerBank::-webkit-scrollbar-track {
  background: transparent;
}

#markerBank::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

#markerBank::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   Server Sharing & Toast Styling
   ========================================== */

button.share-btn {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  border-color: rgba(168, 85, 247, 0.4);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

button.share-btn:hover {
  background: linear-gradient(135deg, #c084fc 0%, #8b5cf6 100%);
  border-color: #a855f7;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
  transform: translateY(-1px);
}

button.server-load-btn {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

button.server-load-btn:hover {
  background: rgba(168, 85, 247, 0.25);
  border-color: #a855f7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
  transform: translateY(-1px);
}

button.server-delete-btn {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

button.server-delete-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
  transform: translateY(-1px);
}

#shareLinkInput {
  direction: ltr;
  text-align: left;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  color: var(--blue-hover);
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(124, 58, 237, 0.3);
}

#shareLinkInput:focus {
  border-color: #c084fc;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.toast-container {
  position: fixed;
  top: 24px;
  left: 24px; /* RTL context - show on top-left or top-right, let's keep top-left to avoid overlaps */
  z-index: 2000;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--panel-border);
  color: var(--ink);
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: var(--glass-blur);
  transform: translateX(-120%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  border-right: 4px solid var(--blue);
  direction: rtl;
}

.toast.show {
  transform: translateX(0);
}

.toast.success {
  border-right-color: var(--green);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 12px rgba(16, 185, 129, 0.2);
}

.toast.error {
  border-right-color: var(--red);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 12px rgba(239, 68, 68, 0.2);
}

.toast.info {
  border-right-color: var(--blue);
}

/* ==========================================
   Block Grouping & Row Selection Styles
   ========================================== */

.rung-select-checkbox {
  position: absolute;
  inset-inline-start: 10px;
  top: 50%;
  margin: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #a855f7;
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border-radius: 4px;
  border: 2px solid var(--panel-border);
  transform: translateY(-50%);
  z-index: 5;
}

.rung-select-checkbox:hover {
  opacity: 0.8;
  transform: translateY(-50%) scale(1.1);
}

.rung-select-checkbox:checked {
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
}

.rung.selected-for-block {
  border-color: #a855f7 !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.25) !important;
  background: rgba(168, 85, 247, 0.03) !important;
}

.floating-panel {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: rgba(15, 23, 42, 0.94);
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  border-radius: 12px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.25);
  backdrop-filter: var(--glass-blur);
  z-index: 1000;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.floating-panel.show {
  transform: translateX(-50%) translateY(0);
}

.floating-panel span {
  font-size: 13px;
  font-weight: 700;
  color: #c084fc;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.floating-panel input {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  border-radius: 6px;
  padding: 6px 12px;
}

.floating-panel input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

.floating-panel button {
  height: 36px;
  padding: 0 16px;
  font-size: 12px;
  border-radius: 6px;
}

/* Block Rung styling */
.rung.block-rung {
  min-height: 90px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
  box-shadow: inset 0 0 15px rgba(168, 85, 247, 0.05), var(--shadow);
  grid-template-columns: 24px minmax(720px, 1fr) 24px;
}

.rung.block-rung .rail {
  min-height: 70px;
  border-left-color: #8b5cf6;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.rung-block-body {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  width: 100%;
  min-height: 70px;
}

.block-info-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.block-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
  animation: pulse-glow 2s infinite alternate;
}

.block-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.block-details .block-name {
  font-size: 16px;
  font-weight: 700;
  color: #c084fc;
  text-shadow: 0 0 5px rgba(168, 85, 247, 0.3);
  text-align: right;
}

.block-details .block-count {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

button.explode-block-btn {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
  font-weight: 600;
}

button.explode-block-btn:hover {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  border-color: #a855f7;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}

@keyframes pulse-glow {
  from {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.4));
  }
  to {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.7));
  }
}

/* Performance mode: keep the UI responsive by removing costly blur/glow effects. */
body.fast-ui {
  --shadow: none;
  --glass-blur: none;
  --blue-glow: transparent;
  --green-glow: transparent;
  --red-glow: transparent;
  --amber-glow: transparent;
  --panel: rgba(17, 24, 39, 0.92);
}

body.fast-ui *,
body.fast-ui *::before,
body.fast-ui *::after {
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  transition: none !important;
}

body.fast-ui .app-header,
body.fast-ui .editor-shell,
body.fast-ui .panel,
body.fast-ui .physical,
body.fast-ui .asm-autocomplete,
body.fast-ui .modal-overlay,
body.fast-ui .modal-box,
body.fast-ui .toast,
body.fast-ui .floating-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

body.fast-ui button:hover,
body.fast-ui .slot:hover,
body.fast-ui input:focus,
body.fast-ui select:focus,
body.fast-ui textarea:focus {
  box-shadow: none !important;
  transform: none !important;
}

body.fast-ui .slot.selected,
body.fast-ui .slot.multi-selected,
body.fast-ui .slot.powered,
body.fast-ui .io-toggle.on,
body.fast-ui .terminal.on,
body.fast-ui .slot.selected .counter-top-block,
body.fast-ui .slot.selected .counter-bottom-block {
  box-shadow: none !important;
}

body.fast-ui .wire-layer {
  display: none !important;
}

body.fast-ui .bulb.on {
  box-shadow: none !important;
}

/* ==========================================
   Analog Inputs & PWM Outputs V20.03
   ========================================== */

/* Analog Inputs Panel in side panel */
.analog-bank {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0;
}

.analog-control {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-border);
  padding: 8px 12px;
  border-radius: 8px;
}

.analog-control:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.analog-control .analog-label {
  font-family: 'Fira Code', monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--blue-hover);
  width: 32px;
}

.analog-control .analog-slider {
  flex-grow: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  outline: none;
  accent-color: var(--blue);
  cursor: pointer;
  border: 1px solid var(--panel-border);
  transition: all 0.2s ease;
}

.analog-control .analog-slider:hover {
  accent-color: var(--blue-hover);
}

.analog-control .analog-value-display {
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  color: var(--ink);
  min-width: 44px;
  text-align: left;
  font-weight: 600;
}

/* Analog sections on physical PLC */
.analog-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.physical-analog-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: 'Fira Code', monospace;
}

.physical-analog-channel span {
  color: #94a3b8;
  font-weight: 700;
  width: 28px;
}

.plc-analog-slider {
  flex-grow: 1;
  height: 6px;
  border-radius: 3px;
  background: #020617;
  outline: none;
  accent-color: var(--blue);
  cursor: pointer;
  border: none;
}

.plc-analog-val {
  color: var(--blue-hover);
  font-weight: 700;
  width: 36px;
  text-align: left;
}

.physical-pwm-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: 'Fira Code', monospace;
}

.physical-pwm-channel span {
  color: #94a3b8;
  font-weight: 700;
  width: 28px;
}

.pwm-bar-container {
  flex-grow: 1;
  height: 8px;
  background: #020617;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.pwm-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  width: 0%;
  transition: width 0.15s ease;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.plc-pwm-val {
  color: #34d399;
  font-weight: 700;
  width: 36px;
  text-align: left;
}

body.fast-ui .pwm-bar {
  transition: none !important;
  box-shadow: none !important;
}

button.recover-pw-btn {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 11px;
  height: 32px;
  padding: 0 8px;
}

button.recover-pw-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border-color: var(--blue-hover);
}