/* ═══════════════════════════════════════════════════════════════
   ShopBot Labs — Shared Component Styles
   Targets standard sb-* classes. Apps either use these classes
   directly, or alias them in a thin bridge.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base: apply tokens to body ── */

[class*="theme-"] {
  font-family: var(--t-font-main) !important;
  color: var(--t-text);
  background: var(--t-bg-primary);
}
[class*="theme-"] *,
[class*="theme-"] input,
[class*="theme-"] select,
[class*="theme-"] button,
[class*="theme-"] textarea {
  font-family: inherit !important;
}

/* ── Bare form-element catch-alls ──
   Theme any <select>, <textarea>, or standalone <input> inside a
   themed container that doesn't carry an sb-* class.
   Placed early so more-specific sb-* rules below win by source order. */

[class*="theme-"] select {
  background: var(--t-input-bg);
  border: var(--t-border-width) solid var(--t-input-border);
  border-radius: var(--t-radius);
  color: var(--t-text);
  font-size: var(--t-fs-input);
  padding: 0.3rem 0.5rem;
}
[class*="theme-"] select:focus {
  border-color: var(--t-accent);
  box-shadow: var(--t-shadow-halo, none);
  outline: none;
}
[class*="theme-"] select option {
  background: var(--t-input-bg);
  color: var(--t-text);
}

[class*="theme-"] textarea {
  background: var(--t-input-bg);
  border: var(--t-border-width) solid var(--t-input-border);
  border-radius: var(--t-radius);
  color: var(--t-text);
  font-size: var(--t-fs-input);
  padding: 0.5rem;
  resize: vertical;
}
[class*="theme-"] textarea:focus {
  border-color: var(--t-accent);
  box-shadow: var(--t-shadow-halo, none);
  outline: none;
}

[class*="theme-"] input[type="text"],
[class*="theme-"] input[type="number"] {
  background: var(--t-input-bg);
  border: var(--t-border-width) solid var(--t-input-border);
  border-radius: var(--t-radius);
  color: var(--t-text);
  font-size: var(--t-fs-input);
  padding: 0.3rem 0.5rem;
}
[class*="theme-"] input[type="text"]:focus,
[class*="theme-"] input[type="number"]:focus {
  border-color: var(--t-accent);
  box-shadow: var(--t-shadow-halo, none);
  outline: none;
}

[class*="theme-"] input[type="color"] {
  border: var(--t-border-width) solid var(--t-input-border);
  border-radius: var(--t-radius);
  background: var(--t-input-bg);
  padding: 2px;
  cursor: pointer;
}

/* ── Section ── */

[class*="theme-"] .sb-section {
  border-bottom: 1px solid var(--t-border);
  padding: 0.75rem 1rem;
}

[class*="theme-"] .sb-section-title {
  font-size: var(--t-fs-section);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-text-dim);
  margin-bottom: 0.6rem;
  text-shadow: var(--t-text-glow, none);
}

/* ── Labels ── */

[class*="theme-"] .sb-label,
[class*="theme-"] .sb-section .sb-label {
  font-size: var(--t-fs-label);
  color: var(--t-text-dim);
  font-weight: var(--t-label-weight, 400);
  text-shadow: var(--t-text-glow, none);
}

/* ── Input row (input + unit) ── */

[class*="theme-"] .sb-input-row {
  display: flex;
  align-items: center;
  background: var(--t-input-bg);
  border: var(--t-border-width) solid var(--t-input-border);
  border-radius: var(--t-radius);
  overflow: hidden;
  box-shadow: var(--t-input-shadow, none);
}
[class*="theme-"] .sb-input-row:focus-within {
  border-color: var(--t-accent);
  box-shadow: var(--t-shadow-halo, none);
}
[class*="theme-"] .sb-input-row input {
  flex: 1; min-width: 0; border: none; background: transparent;
  color: var(--t-text);
  font-size: var(--t-fs-input);
  text-shadow: var(--t-text-glow, none);
  padding: 0.3rem 0.5rem;
  outline: none;
}
[class*="theme-"] .sb-input-row input:focus {
  border: none; box-shadow: none;
}
[class*="theme-"] .sb-input-row .sb-unit {
  font-size: var(--t-fs-unit);
  color: var(--t-text-dim);
  background: var(--t-bg-tertiary);
  border-left: 1px solid var(--t-border);
  padding: 0.3rem 0.5rem;
  text-shadow: var(--t-text-glow, none);
}

/* ── Textarea ── */

[class*="theme-"] .sb-textarea {
  background: var(--t-input-bg);
  border: var(--t-border-width) solid var(--t-input-border);
  border-radius: var(--t-radius);
  color: var(--t-text);
  font-size: var(--t-fs-input);
  padding: 0.5rem;
  resize: vertical;
}
[class*="theme-"] .sb-textarea:focus {
  border-color: var(--t-accent);
  box-shadow: var(--t-shadow-halo, none);
  outline: none;
}

/* ── Select ── */

[class*="theme-"] .sb-select {
  background: var(--t-input-bg);
  border: var(--t-border-width) solid var(--t-input-border);
  border-radius: var(--t-radius);
  color: var(--t-text);
  font-size: var(--t-fs-input);
  padding: 0.3rem 0.5rem;
}

/* ── Buttons ── */

[class*="theme-"] .sb-btn-primary {
  background: var(--t-accent);
  color: var(--t-accent-text);
  border: var(--t-border-width) solid var(--t-border);
  border-radius: var(--t-radius);
  font-size: var(--t-fs-btn);
  font-weight: 700;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-shadow: var(--t-text-glow, none);
  box-shadow: var(--t-shadow-btn, none);
  transition: all 0.15s;
}
[class*="theme-"] .sb-btn-primary:hover {
  box-shadow: var(--t-shadow-btn-hover, none);
}
[class*="theme-"] .sb-btn-primary:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--t-border);
}

[class*="theme-"] .sb-btn-secondary {
  background: var(--t-input-bg);
  color: var(--t-text);
  border: var(--t-border-width) solid var(--t-border);
  border-radius: var(--t-radius);
  font-size: var(--t-fs-btn);
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  box-shadow: var(--t-shadow-btn, none);
  transition: all 0.15s;
}
[class*="theme-"] .sb-btn-secondary:hover {
  border-color: var(--t-accent);
  color: var(--t-accent);
}
[class*="theme-"] .sb-btn-secondary:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--t-border);
}

/* ── Button: Setting (config/preference selectors) ── */

[class*="theme-"] .sb-btn-setting {
  background: var(--t-btn-setting-bg);
  color: var(--t-btn-setting-text);
  border: var(--t-border-width) solid var(--t-btn-setting-border);
  border-radius: var(--t-radius);
  font-size: var(--t-fs-btn);
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}
[class*="theme-"] .sb-btn-setting:hover {
  border-color: var(--t-accent);
  color: var(--t-text);
}
[class*="theme-"] .sb-btn-setting.active {
  background: var(--t-accent);
  color: var(--t-accent-text);
  border-color: var(--t-accent);
}

/* ── Button: Action (generate, compute, center) ── */

[class*="theme-"] .sb-btn-action {
  background: var(--t-btn-action-bg);
  color: var(--t-btn-action-text);
  border: var(--t-border-width) solid var(--t-btn-action-border);
  border-radius: var(--t-radius);
  font-size: var(--t-fs-btn);
  font-weight: 700;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-shadow: var(--t-text-glow, none);
  box-shadow: var(--t-shadow-btn, none);
  transition: all 0.15s;
}
[class*="theme-"] .sb-btn-action:hover {
  box-shadow: var(--t-shadow-btn-hover, none);
  filter: brightness(1.1);
}
[class*="theme-"] .sb-btn-action:active {
  transform: translate(1px, 1px);
  filter: brightness(0.95);
}
[class*="theme-"] .sb-btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* ── Button: Output (export SBP, G-code, DXF) ── */

[class*="theme-"] .sb-btn-output {
  background: var(--t-btn-output-bg);
  color: var(--t-btn-output-text);
  border: var(--t-border-width) solid var(--t-btn-output-border);
  border-radius: var(--t-radius);
  font-size: var(--t-fs-btn);
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.03em;
}
[class*="theme-"] .sb-btn-output:hover {
  filter: brightness(1.15);
  box-shadow: var(--t-shadow-btn-hover, none);
}
[class*="theme-"] .sb-btn-output:active {
  transform: translate(1px, 1px);
  filter: brightness(0.9);
}
[class*="theme-"] .sb-btn-output:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}

/* ── Button row / group helpers ── */

[class*="theme-"] .sb-btn-row {
  display: flex;
  gap: 0.5rem;
}
[class*="theme-"] .sb-btn-row > * {
  flex: 1;
}
[class*="theme-"] .sb-btn-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Scrollbars ── */

[class*="theme-"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[class*="theme-"] ::-webkit-scrollbar-track {
  background: var(--t-bg-secondary);
}
[class*="theme-"] ::-webkit-scrollbar-thumb {
  background: var(--t-border);
  border-radius: var(--t-radius);
}
[class*="theme-"] ::-webkit-scrollbar-thumb:hover {
  background: var(--t-text-dim);
}
[class*="theme-"] * {
  scrollbar-width: thin;
  scrollbar-color: var(--t-border) var(--t-bg-secondary);
}

/* ── Toggle group ── */

[class*="theme-"] .sb-toggle {
  display: flex;
  border: var(--t-border-width) solid var(--t-border);
  border-radius: var(--t-radius);
  overflow: hidden;
}
[class*="theme-"] .sb-toggle-btn {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-size: var(--t-fs-label);
  background: var(--t-input-bg);
  color: var(--t-text-dim);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
[class*="theme-"] .sb-toggle-btn + .sb-toggle-btn {
  border-left: 1px solid var(--t-border);
}
[class*="theme-"] .sb-toggle-btn.active {
  background: var(--t-accent);
  color: var(--t-accent-text);
}

/* ── Checkbox ── */

[class*="theme-"] .sb-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-fs-checkbox);
  color: var(--t-text-dim);
  text-shadow: var(--t-text-glow, none);
  cursor: pointer;
}
[class*="theme-"] .sb-checkbox input[type="checkbox"] {
  accent-color: var(--t-accent);
}

/* ── Slider value ── */

[class*="theme-"] .sb-slider-val {
  font-size: var(--t-fs-slider-val);
  color: var(--t-text-dim);
  text-shadow: var(--t-text-glow, none);
}

/* ── Slider (range input) ── */

[class*="theme-"] input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--t-border);
  border-radius: var(--t-radius);
  outline: none; cursor: pointer;
}
[class*="theme-"] input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: var(--t-border); border-radius: var(--t-radius);
}
[class*="theme-"] input[type="range"]::-moz-range-track {
  height: 4px; background: var(--t-border); border-radius: var(--t-radius);
}
[class*="theme-"] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; margin-top: -5px;
  border-radius: 50%;
  background: var(--t-accent);
  border: var(--t-border-width) solid var(--t-border);
  cursor: pointer;
}
[class*="theme-"] input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--t-accent);
  border: var(--t-border-width) solid var(--t-border);
  cursor: pointer;
}

/* ── Header ── */

[class*="theme-"] .sb-header {
  background: var(--t-bg-header);
  padding: 0.6rem 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
[class*="theme-"] .sb-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
[class*="theme-"] .sb-brand-logo {
  height: 24px;
  width: auto;
  align-self: flex-start;
  filter: brightness(0) invert(1);
}
[class*="theme-"] .sb-brand-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}
[class*="theme-"] .app-version {
  font-size: 0.6rem;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  margin-left: 6px;
  white-space: nowrap;
}

/* ── Top bar (theme picker) ── */

[class*="theme-"] .sb-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 32px;
  background: var(--t-bg-header);
  border-bottom: 1px solid var(--t-border);
  z-index: 200;
  display: flex;
  align-items: center;
}

/* ── Status bar ── */

[class*="theme-"] .sb-statusbar {
  background: var(--t-bg-secondary);
  border-top: 1px solid var(--t-border);
  color: var(--t-text-dim);
  font-size: 0.75rem;
  padding: 0.4rem 1rem;
}

/* ── Collapsible / Details ── */

[class*="theme-"] .sb-collapsible {
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
}
[class*="theme-"] .sb-collapsible summary {
  cursor: pointer;
  font-size: var(--t-fs-label);
  color: var(--t-text-dim);
  padding: 0.4rem 0.75rem;
  user-select: none;
}

/* ── Sidebar header (app-name bar with logo) ── */

[class*="theme-"] .sidebar-header {
  background: var(--t-bg-header);
  border-bottom: 1px solid var(--t-border);
}
[class*="theme-"] .sidebar-logo {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* ── Unit toggle container (in / mm wrapper) ── */

[class*="theme-"] .unit-toggle {
  border: var(--t-border-width) solid var(--t-border);
  border-radius: var(--t-radius);
  overflow: hidden;
}

/* ── Input-with-unit (input + unit span as single bordered field) ── */

[class*="theme-"] .input-with-unit {
  display: flex;
  align-items: center;
  background: var(--t-input-bg);
  border: var(--t-border-width) solid var(--t-input-border);
  border-radius: var(--t-radius);
  overflow: hidden;
  gap: 0;
  box-shadow: var(--t-input-shadow, none);
}
[class*="theme-"] .input-with-unit:focus-within {
  border-color: var(--t-accent);
  box-shadow: var(--t-shadow-halo, none);
}
[class*="theme-"] .input-with-unit input {
  flex: 1; min-width: 0; border: none; background: transparent;
  color: var(--t-text);
  font-size: var(--t-fs-input);
  text-shadow: var(--t-text-glow, none);
  padding: 0.3rem 0.5rem;
  outline: none;
}
[class*="theme-"] .input-with-unit input:focus {
  border: none; box-shadow: none;
}
[class*="theme-"] .input-with-unit span,
[class*="theme-"] .input-with-unit .unit-label {
  font-size: var(--t-fs-unit);
  color: var(--t-text-dim);
  background: var(--t-bg-tertiary);
  border-left: 1px solid var(--t-border);
  padding: 0.3rem 0.5rem;
  text-shadow: var(--t-text-glow, none);
  white-space: nowrap;
}

/* ── Drop zone (drag-and-drop upload) ── */

[class*="theme-"] .drop-zone {
  border: 2px dashed var(--t-border);
  border-radius: var(--t-radius);
  background: var(--t-input-bg);
  color: var(--t-text-dim);
  text-align: center;
  padding: 1.5rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
[class*="theme-"] .drop-zone:hover {
  border-color: var(--t-accent);
}
[class*="theme-"] .drop-zone.dragover {
  border-color: var(--t-accent);
  background: var(--t-hover-bg);
}
[class*="theme-"] .drop-zone p {
  margin: 0.25rem 0;
  color: var(--t-text-dim);
}
[class*="theme-"] .drop-zone-or {
  font-size: var(--t-fs-unit);
  opacity: 0.6;
}

/* ── File-input label (styled browse button) ── */

[class*="theme-"] .file-input-label {
  display: inline-block;
  background: var(--t-btn-action-bg, var(--t-accent));
  color: var(--t-btn-action-text, #fff);
  border: var(--t-border-width) solid var(--t-btn-action-border, var(--t-border));
  border-radius: var(--t-radius);
  font-size: var(--t-fs-btn);
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: filter 0.15s;
}
[class*="theme-"] .file-input-label:hover {
  filter: brightness(1.1);
}

/* ── File info display ── */

[class*="theme-"] .file-info {
  background: var(--t-bg-tertiary);
  border-radius: var(--t-radius);
  color: var(--t-text);
  font-size: var(--t-fs-label);
  padding: 0.4rem 0.75rem;
}

/* ── Info block (stats / generation results) ── */

[class*="theme-"] .info-block {
  background: var(--t-bg-tertiary);
  border-radius: var(--t-radius);
  color: var(--t-text-dim);
  font-size: var(--t-fs-label);
  padding: 0.5rem 0.75rem;
}
[class*="theme-"] .info-block span {
  color: var(--t-text);
}

/* ── Hint / info-note (inline help text) ── */

[class*="theme-"] .hint,
[class*="theme-"] .info-note {
  color: var(--t-text-dim);
  font-size: var(--t-fs-unit);
  font-style: italic;
}

/* ── Unit toggle (in / mm) ── */

[class*="theme-"] .unit-btn {
  background: var(--t-btn-setting-bg);
  color: var(--t-btn-setting-text);
  border: var(--t-border-width) solid var(--t-btn-setting-border);
  border-radius: var(--t-radius);
  font-size: var(--t-fs-btn);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}
[class*="theme-"] .unit-btn:hover {
  border-color: var(--t-accent);
  color: var(--t-text);
}
[class*="theme-"] .unit-btn.active {
  background: var(--t-accent);
  color: var(--t-accent-text);
  border-color: var(--t-accent);
}

/* ── Header button (settings gear, etc. inside sb-header) ── */

[class*="theme-"] .sb-btn-header {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--t-radius);
  color: rgba(255,255,255,0.8);
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  font-size: var(--t-fs-btn);
  line-height: 1;
  transition: all 0.15s;
}
[class*="theme-"] .sb-btn-header:hover {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* ── Checkbox label (label wrapping a checkbox + text) ── */

[class*="theme-"] .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-fs-checkbox);
  color: var(--t-text);
  cursor: pointer;
}
[class*="theme-"] .checkbox-label input[type="checkbox"] {
  accent-color: var(--t-accent);
}

/* ── Viewport (3D canvas container) ── */

[class*="theme-"] .sb-viewport,
[class*="theme-"] #canvasContainer,
[class*="theme-"] .main-area {
  background: var(--t-canvas-bg, var(--t-bg-primary));
}

/* ── Icon button (small toolbar / canvas control) ── */

[class*="theme-"] .icon-btn {
  background: var(--t-bg-secondary);
  color: var(--t-text);
  border: var(--t-border-width) solid var(--t-border);
  border-radius: var(--t-radius);
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
[class*="theme-"] .icon-btn:hover {
  border-color: var(--t-accent);
  color: var(--t-accent);
}
[class*="theme-"] .icon-btn.active {
  background: var(--t-accent);
  color: var(--t-accent-text);
  border-color: var(--t-accent);
}

/* ── Toggle switch (pill-shaped on/off slider) ── */

[class*="theme-"] .toggle-switch {
  position: relative;
  width: 44px;
  height: 22px;
  background: var(--t-border);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.3s;
  border: var(--t-border-width) solid var(--t-border);
}
[class*="theme-"] .toggle-switch input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
[class*="theme-"] .toggle-switch input:checked + .toggle-slider {
  transform: translateX(22px);
}
[class*="theme-"] .toggle-switch:has(input:checked) {
  background: var(--t-accent);
  border-color: var(--t-accent);
}
[class*="theme-"] .toggle-slider {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--t-accent-text, #fff);
  border-radius: 50%;
  transition: transform 0.3s;
}

/* ── Icon toggle (lock, pin, etc.) ── */

[class*="theme-"] .icon-toggle {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--t-border-width) solid var(--t-input-border);
  border-radius: var(--t-radius);
  background: var(--t-input-bg);
  color: var(--t-text-dim);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
[class*="theme-"] .icon-toggle:hover {
  border-color: var(--t-accent);
  color: var(--t-text);
}
[class*="theme-"] .icon-toggle.active,
[class*="theme-"] .icon-toggle.linked {
  background: var(--t-accent);
  color: var(--t-accent-text);
  border-color: var(--t-accent);
}

/* ── Modal / dialog ── */

[class*="theme-"] .modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}
[class*="theme-"] .modal-panel {
  background: var(--t-bg-secondary);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[class*="theme-"] .modal-header {
  border-bottom: 1px solid var(--t-border);
  color: var(--t-text);
}
[class*="theme-"] .modal-close {
  background: none;
  border: none;
  color: var(--t-text-dim);
  cursor: pointer;
}
[class*="theme-"] .modal-close:hover {
  color: var(--t-text);
}
[class*="theme-"] .modal-body {
  color: var(--t-text);
}

/* ── Advanced settings (collapsible details) ── */

[class*="theme-"] details.advanced-settings {
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  background: var(--t-input-bg);
}
[class*="theme-"] details.advanced-settings summary {
  cursor: pointer;
  font-size: var(--t-fs-label);
  color: var(--t-text-dim);
  padding: 0.4rem 0.75rem;
  user-select: none;
}

/* ── Stats bar / inline stats ── */

[class*="theme-"] .stats-bar,
[class*="theme-"] .stats {
  font-size: var(--t-fs-unit);
  color: var(--t-text-dim);
}
[class*="theme-"] .stat-value,
[class*="theme-"] .stats span {
  color: var(--t-text);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   Per-theme component specializations
   ════════════════════════════════════════════════════════════ */

/* ── SB 1.0: text checkboxes, scanlines ── */

.theme-shopbot1 .sb-checkbox input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 0; height: 0; margin: 0; padding: 0; border: none;
}
.theme-shopbot1 .sb-checkbox input[type="checkbox"] + *::before {
  content: '[ ] '; font-family: 'VT323', monospace; color: #a05818;
}
.theme-shopbot1 .sb-checkbox input[type="checkbox"]:checked + *::before {
  content: '[X] '; color: #f09040; text-shadow: 0 0 6px rgba(240,144,64,0.4);
}
/* SB 1.0 section titles: bright amber, glow, // prefix */
.theme-shopbot1 .sb-section-title {
  color: #f09040;
  text-shadow: 0 0 6px rgba(240,144,64,0.35);
}
.theme-shopbot1 .sb-section-title::before {
  content: '// ';
  color: #a05818;
}

/* SB 1.0 button overrides */
.theme-shopbot1 .sb-btn-setting { text-shadow: var(--t-text-glow); }
.theme-shopbot1 .sb-btn-setting.active { text-shadow: none; }
.theme-shopbot1 .sb-btn-action { text-shadow: none; }
.theme-shopbot1 .sb-btn-output { text-shadow: 0 0 6px rgba(240,144,64,0.3); }

.theme-shopbot1 .sb-brand-logo {
  filter: invert(1) sepia(1) saturate(3) hue-rotate(335deg) brightness(0.7)
          drop-shadow(0 0 3px rgba(240,144,64,0.5)) !important;
}
.theme-shopbot1 .sb-brand-name { color: #f09040 !important; }
.theme-shopbot1::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px);
  pointer-events: none; z-index: 9999;
}

/* SB 1.0: square sliders on thin amber track */
.theme-shopbot1 input[type="range"] {
  height: 1px; background: #502808;
}
.theme-shopbot1 input[type="range"]::-webkit-slider-runnable-track {
  height: 1px; background: #502808; border-radius: 0;
}
.theme-shopbot1 input[type="range"]::-moz-range-track {
  height: 1px; background: #502808; border-radius: 0;
}
.theme-shopbot1 input[type="range"]::-webkit-slider-thumb {
  margin-top: -6px;
  width: 12px; height: 12px; border-radius: 0;
  background: #f09040; border-color: #a05818;
  box-shadow: 0 0 5px rgba(240,144,64,0.55);
}
.theme-shopbot1 input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 0;
  background: #f09040; border-color: #a05818;
  box-shadow: 0 0 5px rgba(240,144,64,0.55);
}
/* SB 1.0: hide number input spinners */
.theme-shopbot1 input[type="number"]::-webkit-inner-spin-button,
.theme-shopbot1 input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.theme-shopbot1 input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── SB Light: light header, black logo ── */

.theme-shopbot-light .sb-topbar,
.theme-shopbot-light .sb-header {
  background: #e0e0e0 !important;
  border-bottom: 1px solid #ccc;
}
.theme-shopbot-light .sb-brand-logo { filter: brightness(0) !important; }
.theme-shopbot-light .sb-brand-name { color: #222 !important; }
.theme-shopbot-light .sb-section-title {
  padding-bottom: 6px; border-bottom: 1px dotted #999;
}
.theme-shopbot-light .sb-topbar .sb-tp-label { color: #666; }
.theme-shopbot-light .sb-topbar .sb-tp-btn {
  border: 1px solid #aaa; color: #444; background: #fff;
}
.theme-shopbot-light .sb-topbar .sb-tp-btn:hover { background: #ddd; color: #111; }
.theme-shopbot-light .sb-topbar .sb-tp-btn.active {
  background: #333; color: #fff; border-color: #333;
}

/* SB Light: square sliders on thin gray track */
.theme-shopbot-light input[type="range"] {
  height: 1px; background: #aaa;
}
.theme-shopbot-light input[type="range"]::-webkit-slider-runnable-track {
  height: 1px; background: #aaa; border-radius: 0;
}
.theme-shopbot-light input[type="range"]::-moz-range-track {
  height: 1px; background: #aaa; border-radius: 0;
}
.theme-shopbot-light input[type="range"]::-webkit-slider-thumb {
  margin-top: -6px;
  width: 12px; height: 12px; border-radius: 0;
  background: #333; border-color: #aaa; box-shadow: none;
}
.theme-shopbot-light input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 0;
  background: #333; border-color: #aaa; box-shadow: none;
}
/* SB Light: hide number input spinners */
.theme-shopbot-light input[type="number"]::-webkit-inner-spin-button,
.theme-shopbot-light input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.theme-shopbot-light input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── SB Color: rainbow accents ── */

.theme-shopbot-color .sb-topbar {
  background: var(--t-rainbow-gradient) !important;
  border-bottom: 2px solid #222;
}
.theme-shopbot-color .sb-topbar .sb-tp-btn {
  border: 1px solid rgba(255,255,255,0.5); color: #fff; background: rgba(0,0,0,0.2);
}
.theme-shopbot-color .sb-topbar .sb-tp-btn:hover { background: rgba(0,0,0,0.4); color: #fff; }
.theme-shopbot-color .sb-topbar .sb-tp-btn.active { background: #fff; color: #222; border-color: #fff; }
.theme-shopbot-color .sb-topbar .sb-tp-label { color: #fff; }
.theme-shopbot-color .sb-brand-logo { filter: brightness(0) invert(1) !important; }
.theme-shopbot-color .sb-header { background: #d05820 !important; border-bottom: 2px solid #222; }

/* Rainbow left borders */
.theme-shopbot-color .sb-section { border-left: 4px solid transparent; }
.theme-shopbot-color .sb-section:nth-child(1) { border-left-color: var(--t-rainbow-1); }
.theme-shopbot-color .sb-section:nth-child(1) .sb-section-title { color: var(--t-rainbow-1); }
.theme-shopbot-color .sb-section:nth-child(2) { border-left-color: var(--t-rainbow-2); }
.theme-shopbot-color .sb-section:nth-child(2) .sb-section-title { color: var(--t-rainbow-2); }
.theme-shopbot-color .sb-section:nth-child(3) { border-left-color: var(--t-rainbow-3); }
.theme-shopbot-color .sb-section:nth-child(3) .sb-section-title { color: var(--t-rainbow-3); }
.theme-shopbot-color .sb-section:nth-child(4) { border-left-color: var(--t-rainbow-4); }
.theme-shopbot-color .sb-section:nth-child(4) .sb-section-title { color: var(--t-rainbow-4); }
.theme-shopbot-color .sb-section:nth-child(5) { border-left-color: var(--t-rainbow-5); }
.theme-shopbot-color .sb-section:nth-child(5) .sb-section-title { color: var(--t-rainbow-5); }
.theme-shopbot-color .sb-section:nth-child(6) { border-left-color: var(--t-rainbow-6); }
.theme-shopbot-color .sb-section:nth-child(6) .sb-section-title { color: var(--t-rainbow-6); }
.theme-shopbot-color .sb-section:nth-child(7) { border-left-color: var(--t-rainbow-7); }
.theme-shopbot-color .sb-section:nth-child(7) .sb-section-title { color: var(--t-rainbow-7); }
.theme-shopbot-color .sb-section:nth-child(8) { border-left-color: var(--t-rainbow-8); }
.theme-shopbot-color .sb-section:nth-child(8) .sb-section-title { color: var(--t-rainbow-8); }

/* SB Color: hide number input spinners */
.theme-shopbot-color input[type="number"]::-webkit-inner-spin-button,
.theme-shopbot-color input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.theme-shopbot-color input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* SB Color: square slider with blue thumb */
.theme-shopbot-color input[type="range"] { height: 4px; background: #ddd; border-radius: 0; }
.theme-shopbot-color input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #ddd; border-radius: 0; }
.theme-shopbot-color input[type="range"]::-moz-range-track { height: 4px; background: #ddd; border-radius: 0; }
.theme-shopbot-color input[type="range"]::-webkit-slider-thumb { border-radius: 0; background: #3080d0; border-color: #3080d0; }
.theme-shopbot-color input[type="range"]::-moz-range-thumb { border-radius: 0; background: #3080d0; border-color: #3080d0; }

/* ── Binbows: glossy gradients ── */

.theme-binbows .sb-btn-setting {
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(0,0,0,0.1);
}
.theme-binbows .sb-btn-setting:active { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; }
.theme-binbows .sb-btn-setting.active {
  background: var(--t-btn-active-bg) !important; color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}
.theme-binbows .sb-btn-action {
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 2px rgba(0,0,0,0.2);
}
.theme-binbows .sb-btn-action:hover { filter: brightness(1.05); }
.theme-binbows .sb-btn-action:active { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; }
.theme-binbows .sb-btn-output {
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 2px rgba(0,0,0,0.2);
}
.theme-binbows .sb-btn-output:active { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; }

.theme-binbows .sb-btn-primary {
  background: var(--t-btn-primary-bg) !important;
  border-color: #3E8E3E; color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 2px rgba(0,0,0,0.2);
}
.theme-binbows .sb-btn-secondary {
  background: var(--t-btn-secondary-bg) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(0,0,0,0.1);
}
.theme-binbows .sb-btn-secondary:active,
.theme-binbows .sb-btn-primary:active {
  transform: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}
.theme-binbows .sb-toggle-btn.active {
  background: var(--t-btn-active-bg) !important;
  color: #fff;
}
.theme-binbows .sb-input-row {
  box-shadow: var(--t-input-shadow);
}

/* ── SB Web: bold weights, green accent ── */

.theme-sbweb { font-weight: var(--t-font-weight, 400); }
.theme-sbweb .sb-label { font-weight: var(--t-label-weight, 600); }
.theme-sbweb .sb-btn-primary,
.theme-sbweb .sb-btn-secondary,
.theme-sbweb .sb-btn-setting,
.theme-sbweb .sb-btn-action,
.theme-sbweb .sb-btn-output {
  text-transform: uppercase; letter-spacing: 0.05em;
}
.theme-sbweb .sb-input-row:focus-within {
  background: rgb(222,233,244);
}
.theme-sbweb .sb-input-row .sb-unit {
  background: rgb(222,233,244) !important;
}

/* ── ShopBot 3: Legal Pad ── */

/* Sidebar panel — apps should apply .sb-panel to the scrollable body container */
.sb-panel { flex: 1; overflow-y: auto; }

/* Ruled yellow paper with red left margin */
.theme-shopbot3 .sb-panel {
  background-color: #fef9c3;
  background-image:
    linear-gradient(to right,  transparent 44px, #e06060 44px, #e06060 46px, transparent 46px),
    repeating-linear-gradient(to bottom, transparent 0px, transparent 29px, #aecfea 29px, #aecfea 30px);
  background-attachment: local;
}

/* Sections transparent so ruled lines show through; indent past margin line */
.theme-shopbot3 .sb-section {
  background: transparent;
  border-bottom: none;
  padding-left: 54px;
}
.theme-shopbot3 .sb-section-title {
  color: #000;
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* Header: faux leather binding */
.theme-shopbot3 .sb-header {
  background: var(--t-bg-header) !important;
  border-bottom: 3px solid #5a3010;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}
.theme-shopbot3 .sb-brand-name { color: rgba(255,240,200,0.9) !important; }
.theme-shopbot3 .sb-brand-logo { filter: brightness(0) invert(1) !important; }

/* Inputs: transparent with thin black rectangular border */
.theme-shopbot3 .sb-input-row {
  background: transparent;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
}
.theme-shopbot3 .sb-input-row:focus-within {
  border-color: #000;
  box-shadow: none;
}
.theme-shopbot3 .sb-input-row .sb-unit {
  background: transparent;
  border-left: 1px solid #000;
  color: #444;
}
.theme-shopbot3 .sb-textarea { background: transparent; border: 1px solid #000; border-radius: 0; }
.theme-shopbot3 .sb-select   { background: transparent; border: 1px solid #000; border-radius: 0; }

/* Sliders: cyan thumb */
.theme-shopbot3 input[type="range"] { background: #c8ddf0; }
.theme-shopbot3 input[type="range"]::-webkit-slider-runnable-track { background: #c8ddf0; border-radius: 0; }
.theme-shopbot3 input[type="range"]::-moz-range-track               { background: #c8ddf0; border-radius: 0; }
.theme-shopbot3 input[type="range"]::-webkit-slider-thumb { background: #00acc1; border-color: #0097a7; border-radius: 2px; }
.theme-shopbot3 input[type="range"]::-moz-range-thumb     { background: #00acc1; border-color: #0097a7; border-radius: 2px; }

/* Spinner suppression */
.theme-shopbot3 input[type="number"]::-webkit-inner-spin-button,
.theme-shopbot3 input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.theme-shopbot3 input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Status bar */
.theme-shopbot3 .sb-statusbar { background: #fef3a5 !important; border-top-color: #aecfea; color: #7a5830; }

/* Snap sb-* elements to ruling grid: buttons 22px, centered in 30px rows; raised bevel */
.theme-shopbot3 .sb-btn-action,
.theme-shopbot3 .sb-btn-output,
.theme-shopbot3 .sb-btn-setting,
.theme-shopbot3 .sb-btn-primary,
.theme-shopbot3 .sb-btn-secondary { height: 22px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; border-radius: 0; box-shadow: var(--sb3-bevel); }
.theme-shopbot3 .sb-btn-action:active,
.theme-shopbot3 .sb-btn-output:active,
.theme-shopbot3 .sb-btn-setting:active,
.theme-shopbot3 .sb-btn-primary:active,
.theme-shopbot3 .sb-btn-secondary:active { box-shadow: var(--sb3-bevel-pressed); }
.theme-shopbot3 .sb-toggle-btn { border-radius: 0; box-shadow: var(--sb3-bevel); }
.theme-shopbot3 .sb-toggle-btn.active   { box-shadow: var(--sb3-bevel-pressed); }
.theme-shopbot3 .sb-btn-row       { height: 30px; align-items: center; }
.theme-shopbot3 .sb-btn-group     { gap: 0; align-items: stretch; }
.theme-shopbot3 .sb-btn-group > * { height: 30px; display: flex; align-items: center; }
.theme-shopbot3 .sb-toggle        { height: 22px; }
.theme-shopbot3 .sb-toggle-btn    { height: 22px; padding-top: 0; padding-bottom: 0; }
.theme-shopbot3 .sb-section .sb-checkbox { height: 30px; margin: 0; }

/* ── SBcode: syntax coloring for new button types ── */

.theme-devdark .sb-btn-setting { color: var(--t-syntax-param); border-color: #3c3c3c; }
.theme-devdark .sb-btn-setting.active { background: #3c3c3c; color: var(--t-syntax-keyword); border-color: var(--t-syntax-keyword); }
.theme-devdark .sb-btn-action { background: var(--t-btn-action-bg); }
.theme-devdark .sb-btn-output { color: var(--t-syntax-type); border-color: var(--t-syntax-type); }
.theme-devdark .sb-btn-output:hover { background: rgba(78,201,176,0.1); }

/* ── SBcode: syntax coloring ── */

.theme-devdark .sb-section-title::before { content: '// '; color: var(--t-syntax-comment); }
.theme-devdark .sb-section:nth-child(1) .sb-section-title { color: var(--t-section-1); }
.theme-devdark .sb-section:nth-child(2) .sb-section-title { color: var(--t-section-2); }
.theme-devdark .sb-section:nth-child(3) .sb-section-title { color: var(--t-section-3); }
.theme-devdark .sb-section:nth-child(4) .sb-section-title { color: var(--t-section-4); }
.theme-devdark .sb-section:nth-child(5) .sb-section-title { color: var(--t-section-5); }
.theme-devdark .sb-section:nth-child(6) .sb-section-title { color: var(--t-section-6); }
.theme-devdark .sb-section:nth-child(7) .sb-section-title { color: var(--t-section-7); }
.theme-devdark .sb-section:nth-child(8) .sb-section-title { color: var(--t-section-8); }
.theme-devdark .sb-label { color: var(--t-syntax-param); }
.theme-devdark .sb-input-row input { color: var(--t-syntax-number); }
.theme-devdark .sb-input-row .sb-unit { color: var(--t-syntax-keyword) !important; background: #252526 !important; }
.theme-devdark .sb-checkbox { color: var(--t-syntax-string); }
.theme-devdark .sb-slider-val { color: var(--t-syntax-number); }
.theme-devdark .sb-textarea { color: var(--t-syntax-string); }
.theme-devdark .sb-statusbar { background: var(--t-statusbar-bg) !important; color: #fff; }

/* ════════════════════════════════════════════════════════════
   Per-theme overrides for shared component patterns
   ════════════════════════════════════════════════════════════ */

/* ── SB 1.0: amber terminal ── */

.theme-shopbot1 .drop-zone { border-color: #502808; }
.theme-shopbot1 .drop-zone:hover,
.theme-shopbot1 .drop-zone.dragover {
  border-color: #f09040;
  box-shadow: var(--t-shadow-halo);
}
.theme-shopbot1 .info-block { border: 1px solid #502808; }
.theme-shopbot1 .unit-btn { text-shadow: var(--t-text-glow); }
.theme-shopbot1 .unit-btn.active { text-shadow: none; }
.theme-shopbot1 .file-input-label { text-shadow: none; }
.theme-shopbot1 .toggle-switch {
  background: #000; border: 2px solid #502808;
}
.theme-shopbot1 .toggle-switch:has(input:checked) {
  background: #000; border-color: #f09040;
  box-shadow: 0 0 8px rgba(240,144,64,0.4);
}
.theme-shopbot1 .toggle-slider {
  background: #502808;
}
.theme-shopbot1 .toggle-switch:has(input:checked) .toggle-slider {
  background: #f09040;
  box-shadow: 0 0 6px rgba(240,144,64,0.6);
}
.theme-shopbot1 .icon-toggle {
  background: #000; border: 2px solid #502808; color: #502808;
}
.theme-shopbot1 .icon-toggle:hover { border-color: #a05818; color: #a05818; }
.theme-shopbot1 .icon-toggle.active,
.theme-shopbot1 .icon-toggle.linked {
  background: #000; border-color: #f09040; color: #f09040;
  box-shadow: 0 0 8px rgba(240,144,64,0.5), inset 0 0 6px rgba(240,144,64,0.15);
  text-shadow: 0 0 6px rgba(240,144,64,0.6);
}
.theme-shopbot1 .sb-btn-header {
  border-color: #502808; color: #a05818;
  text-shadow: var(--t-text-glow);
}
.theme-shopbot1 .sb-btn-header:hover { border-color: #f09040; color: #f09040; }
.theme-shopbot1 .sidebar-logo {
  filter: invert(1) sepia(1) saturate(3) hue-rotate(335deg) brightness(0.7)
          drop-shadow(0 0 3px rgba(240,144,64,0.5)) !important;
}
.theme-shopbot1 .sidebar-header { border-bottom-color: #502808; }
.theme-shopbot1 .sidebar-header h1 { color: #f09040 !important; }
.theme-shopbot1 .unit-toggle { border-color: #502808; }
.theme-shopbot1 .input-with-unit span,
.theme-shopbot1 .input-with-unit .unit-label {
  background: #000; border-left-color: #502808;
}

/* SB 1.0: terminal-style [X] / [ ] checkboxes for .checkbox-label */
.theme-shopbot1 .checkbox-label input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 0; height: 0; margin: 0; padding: 0; border: none;
}
.theme-shopbot1 .checkbox-label::before {
  content: '[ ] '; font-family: 'VT323', monospace; color: #a05818;
}
.theme-shopbot1 .checkbox-label:has(input:checked)::before {
  content: '[X] '; color: #f09040; text-shadow: 0 0 6px rgba(240,144,64,0.4);
}

/* ── SB Light ── */

.theme-shopbot-light .sb-btn-header {
  border-color: #aaa; color: #444; background: transparent;
}
.theme-shopbot-light .sb-btn-header:hover { border-color: #333; color: #111; }
.theme-shopbot-light .unit-btn {
  background: #fff; color: #444; border-color: #aaa;
}
.theme-shopbot-light .unit-btn.active {
  background: #333; color: #fff; border-color: #333;
}
.theme-shopbot-light .drop-zone { border-color: #aaa; }
.theme-shopbot-light .file-input-label { box-shadow: 4px 4px 0 #000; }
.theme-shopbot-light .icon-btn { background: #fff; }
.theme-shopbot-light .toggle-switch { background: #ccc; border: 2px solid #999; }
.theme-shopbot-light .toggle-switch:has(input:checked) { background: #333; border-color: #333; }
.theme-shopbot-light .toggle-slider { background: #fff; }
.theme-shopbot-light .icon-toggle { background: #fff; border-color: #999; color: #999; }
.theme-shopbot-light .icon-toggle.active,
.theme-shopbot-light .icon-toggle.linked { background: #333; color: #fff; border-color: #333; }
.theme-shopbot-light .sidebar-header { background: #e0e0e0 !important; border-bottom: 1px solid #ccc; }
.theme-shopbot-light .sidebar-logo { filter: brightness(0) !important; }
.theme-shopbot-light .sidebar-header h1 { color: #222 !important; }
.theme-shopbot-light .unit-toggle { border-color: #aaa; }
.theme-shopbot-light .input-with-unit span,
.theme-shopbot-light .input-with-unit .unit-label { background: #eaeaea; }

/* SB Light: bare form overrides */
.theme-shopbot-light select { border-color: #999; }

/* ── SB Color ── */

.theme-shopbot-color .drop-zone:hover,
.theme-shopbot-color .drop-zone.dragover { border-color: #d05820; }

/* ── Binbows XP ── */

/* Binbows: XP-style raised slider */
.theme-binbows input[type="range"] {
  height: 6px;
  background: linear-gradient(180deg, #D0CEC3 0%, #ECE9D8 100%);
  border: 1px solid #ACA899; border-radius: 3px;
}
.theme-binbows input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.theme-binbows input[type="range"]::-moz-range-track { height: 6px; background: transparent; }
.theme-binbows input[type="range"]::-webkit-slider-thumb {
  width: 11px; height: 20px; margin-top: -8px;
  background: linear-gradient(180deg, #fff 0%, #ECE9D8 100%);
  border: 1px solid #7F9DB9; border-radius: 3px;
}
.theme-binbows input[type="range"]::-moz-range-thumb {
  width: 11px; height: 20px;
  background: linear-gradient(180deg, #fff 0%, #ECE9D8 100%);
  border: 1px solid #7F9DB9; border-radius: 3px;
}
.theme-binbows .file-input-label {
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 2px rgba(0,0,0,0.2);
}
.theme-binbows .file-input-label:active {
  transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}
.theme-binbows .unit-btn {
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(0,0,0,0.1);
}
.theme-binbows .unit-btn:active { box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; }
.theme-binbows .unit-btn.active {
  background: var(--t-btn-active-bg) !important; color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}
.theme-binbows .sb-btn-header {
  border-color: rgba(255,255,255,0.4); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 2px rgba(0,0,0,0.2);
}
.theme-binbows .sb-btn-header:active { box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset; }
.theme-binbows .icon-btn {
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(0,0,0,0.1);
}
.theme-binbows .toggle-switch {
  background: linear-gradient(180deg, #D0CEC3 0%, #ECE9D8 100%);
  border: 1px solid #ACA899; border-radius: 11px;
}
.theme-binbows .toggle-switch:has(input:checked) {
  background: linear-gradient(180deg, #3C8CF5 0%, #0054E3 100%);
  border-color: #003BB5;
}
.theme-binbows .toggle-slider {
  background: linear-gradient(180deg, #fff 0%, #ECE9D8 100%);
  border: 1px solid #7F9DB9;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.theme-binbows .icon-toggle {
  background: linear-gradient(180deg, #fff 0%, #ECE9D8 100%);
  border: 1px solid #ACA899; border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(0,0,0,0.1);
  color: #666;
}
.theme-binbows .icon-toggle:hover { border-color: #0054E3; color: #0054E3; }
.theme-binbows .icon-toggle.active,
.theme-binbows .icon-toggle.linked {
  background: linear-gradient(180deg, #3C8CF5 0%, #0054E3 100%);
  border-color: #003BB5; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}
.theme-binbows .modal-panel {
  border: 2px solid var(--t-accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* ── SB Web ── */

.theme-sbweb .unit-btn,
.theme-sbweb .file-input-label,
.theme-sbweb .icon-btn {
  text-transform: uppercase; letter-spacing: 0.05em;
}
.theme-sbweb .toggle-switch { background: rgba(23,27,96,0.15); border: 1px solid rgba(23,27,96,0.25); border-radius: 11px; }
.theme-sbweb .toggle-switch:has(input:checked) { background: rgb(165,206,66); border-color: rgb(140,180,50); }
.theme-sbweb .toggle-slider { background: #fff; border: 1px solid rgba(23,27,96,0.2); }
.theme-sbweb .icon-toggle { background: #fff; border: 1px solid rgba(23,27,96,0.25); border-radius: 0; color: rgba(23,27,96,0.4); }
.theme-sbweb .icon-toggle:hover { border-color: rgb(23,27,96); color: rgb(23,27,96); }
.theme-sbweb .icon-toggle.active,
.theme-sbweb .icon-toggle.linked { background: rgb(165,206,66); border-color: rgb(165,206,66); color: rgb(23,27,96); }
/* SB Web: green thumb, navy border, square */
.theme-sbweb input[type="range"] { height: 4px; background: rgba(23,27,96,0.15); border-radius: 0; }
.theme-sbweb input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: rgba(23,27,96,0.15); border-radius: 0; }
.theme-sbweb input[type="range"]::-moz-range-track { height: 4px; background: rgba(23,27,96,0.15); border-radius: 0; }
.theme-sbweb input[type="range"]::-webkit-slider-thumb {
  background: rgb(165,206,66); border: 2px solid rgb(23,27,96); border-radius: 0;
}
.theme-sbweb input[type="range"]::-moz-range-thumb {
  background: rgb(165,206,66); border: 2px solid rgb(23,27,96); border-radius: 0;
}
.theme-sbweb .input-with-unit:focus-within { background: rgb(222,233,244); }
.theme-sbweb .input-with-unit span,
.theme-sbweb .input-with-unit .unit-label { background: rgb(222,233,244) !important; }

/* ── ShopBot 3: Legal Pad ── */

.theme-shopbot3 .sb-btn-header {
  border-color: rgba(255,240,200,0.3); color: rgba(255,240,200,0.7);
  border-radius: 0;
  box-shadow: var(--sb3-bevel);
}
.theme-shopbot3 .sb-btn-header:hover { color: rgba(255,240,200,1); border-color: rgba(255,240,200,0.5); }
.theme-shopbot3 .sb-btn-header:active { box-shadow: var(--sb3-bevel-pressed); }
.theme-shopbot3 .drop-zone {
  background: transparent;
  border: 1px dashed #000;
  border-radius: 0;
}
.theme-shopbot3 .drop-zone.dragover {
  background: rgba(0,172,193,0.06);
}
.theme-shopbot3 .file-input-label {
  border-radius: 0;
  box-shadow: var(--sb3-bevel);
  height: 22px;
  display: inline-flex; align-items: center;
}
.theme-shopbot3 .file-input-label:active { box-shadow: var(--sb3-bevel-pressed); }
.theme-shopbot3 .file-info {
  background: transparent; border: 1px solid #aecfea; border-radius: 0;
}
.theme-shopbot3 .info-block {
  background: transparent; border: 1px solid #aecfea; border-radius: 0;
}
.theme-shopbot3 .unit-btn {
  border-radius: 0;
  box-shadow: var(--sb3-bevel);
  height: 22px; padding-top: 0; padding-bottom: 0;
}
.theme-shopbot3 .unit-btn:active { box-shadow: var(--sb3-bevel-pressed); }
.theme-shopbot3 .icon-btn {
  border-radius: 0; box-shadow: var(--sb3-bevel);
}
.theme-shopbot3 .icon-btn:active { box-shadow: var(--sb3-bevel-pressed); }
.theme-shopbot3 details.advanced-settings {
  background: transparent; border-color: #000; border-radius: 0;
}
.theme-shopbot3 .toggle-switch { background: transparent; border: 1px solid #aecfea; border-radius: 11px; }
.theme-shopbot3 .toggle-switch:has(input:checked) { background: #00acc1; border-color: #0097a7; }
.theme-shopbot3 .toggle-slider { background: #aecfea; }
.theme-shopbot3 .toggle-switch:has(input:checked) .toggle-slider { background: #fff; }
.theme-shopbot3 .icon-toggle { background: transparent; border-color: #aecfea; color: #444; border-radius: 0; }
.theme-shopbot3 .icon-toggle.active,
.theme-shopbot3 .icon-toggle.linked { background: #00acc1; color: #fff; border-color: #0097a7; }
.theme-shopbot3 .checkbox-label { height: 30px; }
.theme-shopbot3 .modal-panel {
  background: #fef9c3; border: 2px solid #000;
  border-radius: 0; box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}
.theme-shopbot3 .modal-header { border-bottom-color: #000; }
.theme-shopbot3 .unit-toggle { border-color: #000; border-radius: 0; }
.theme-shopbot3 .input-with-unit {
  background: transparent; border: 1px solid #000; border-radius: 0; box-shadow: none;
}
.theme-shopbot3 .input-with-unit:focus-within { border-color: #000; box-shadow: none; }
.theme-shopbot3 .input-with-unit span,
.theme-shopbot3 .input-with-unit .unit-label {
  background: transparent; border-left: 1px solid #000; color: #444;
}

/* Legal pad: bare form overrides (transparent for ruled paper) */
.theme-shopbot3 select { background: transparent; border: 1px solid #000; border-radius: 0; }
.theme-shopbot3 textarea { background: transparent; border: 1px solid #000; border-radius: 0; }
.theme-shopbot3 input[type="text"],
.theme-shopbot3 input[type="number"] {
  background: transparent; border: 1px solid #000; border-radius: 0;
}

/* ── SBcode (Dev Dark) ── */

.theme-devdark .sb-btn-header {
  border-color: #3c3c3c; color: #808080;
}
.theme-devdark .sb-btn-header:hover { border-color: var(--t-accent); color: var(--t-accent); }
/* Devdark: subtle track, blue rounded thumb */
.theme-devdark input[type="range"] { height: 4px; background: #333; }
.theme-devdark input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #333; }
.theme-devdark input[type="range"]::-moz-range-track { height: 4px; background: #333; }
.theme-devdark input[type="range"]::-webkit-slider-thumb {
  background: #569cd6; border: none; border-radius: 2px;
}
.theme-devdark input[type="range"]::-moz-range-thumb {
  background: #569cd6; border: none; border-radius: 2px;
}
.theme-devdark .info-block { background: #252526; border: 1px solid #3c3c3c; }
.theme-devdark .info-block span { color: var(--t-syntax-number); }
.theme-devdark .hint,
.theme-devdark .info-note { color: var(--t-syntax-comment); }
.theme-devdark .drop-zone { border-color: #3c3c3c; }
.theme-devdark .unit-btn { color: var(--t-syntax-param); }
.theme-devdark .unit-btn.active {
  background: #3c3c3c; color: var(--t-syntax-keyword); border-color: var(--t-syntax-keyword);
}
.theme-devdark .toggle-switch { background: #2d2d2d; border: 1px solid #3c3c3c; }
.theme-devdark .toggle-switch:has(input:checked) { background: #094771; border-color: #569cd6; }
.theme-devdark .toggle-slider { background: #808080; }
.theme-devdark .toggle-switch:has(input:checked) .toggle-slider { background: #569cd6; }
.theme-devdark .icon-toggle { background: #2d2d2d; border: 1px solid #3c3c3c; color: #808080; }
.theme-devdark .icon-toggle:hover { border-color: #569cd6; color: #569cd6; }
.theme-devdark .icon-toggle.active,
.theme-devdark .icon-toggle.linked { background: #094771; border-color: #569cd6; color: #569cd6; }
.theme-devdark .checkbox-label { color: var(--t-syntax-string); }
.theme-devdark .modal-panel { background: #1e1e1e; border-color: #3c3c3c; }
.theme-devdark .modal-header { background: #252526; border-bottom-color: #3c3c3c; }
.theme-devdark .input-with-unit input { color: var(--t-syntax-number); }
.theme-devdark .input-with-unit span,
.theme-devdark .input-with-unit .unit-label { color: var(--t-syntax-keyword) !important; background: #252526 !important; }