/* ============================================================
   Terminal Scheme Editor — Modern Dark Theme
   ============================================================ */

:root {
  --bg-primary: #0d0d12;
  --bg-secondary: #15151e;
  --bg-tertiary: #1c1c28;
  --bg-elevated: #1e1e2c;
  --bg-hover: #252535;
  --bg-active: #2a2a3e;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);

  --text-primary: #e2e2e8;
  --text-secondary: #9898a8;
  --text-tertiary: #686878;
  --text-muted: #4a4a58;

  --accent-blue: #5b9cf5;
  --accent-green: #3ecf7a;
  --accent-red: #e55555;
  --accent-yellow: #e5b555;
  --accent-purple: #b477ef;

  /* Out-of-scope warning ring colors. Distinct from --accent-red /
     --accent-yellow so the ring can be tuned independently and stays
     slightly desaturated vs the rest of the UI red/yellow accents.
     Tuned for readability over both dark and bright swatches. */
  --warning-red: #ff0000;     /* full red (matches computeWarningAccent fallback) */
  --warning-yellow: #ffda14;  /* vibrant yellow (matches computeWarningAccent fallback) */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(91, 156, 245, 0.15);

  --font-mono: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;

  --transition-fast: 0.12s ease;
  --transition-normal: 0.2s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

/* ============================================================
   HEADER
   ============================================================ */

header {
  flex-shrink: 0;
  padding: 18px 24px 0;
}

.header-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

header .sub {
  color: var(--text-tertiary);
  font-size: 13px;
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   TOOLBAR
   ============================================================ */

.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  padding: 10px 16px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--border-default);
  border-bottom: none;
  box-shadow: var(--shadow-sm);
}

/* Scheme bar sits directly below the toolbar */
.scheme-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  padding: 8px 16px 12px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border: 1px solid var(--border-default);
  border-top: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.toolbar .btn {
  padding: 7px 14px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  transition: all var(--transition-fast);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.btn-save {
  background: linear-gradient(135deg, #2d7e3b 0%, #3a9e4a 100%);
  color: #fff;
  box-shadow: 0 1px 4px rgba(62, 207, 122, 0.2);
}
.btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(62, 207, 122, 0.3);
}
.btn-save:active {
  transform: translateY(0);
}

.btn-restore {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.btn-restore:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-restore:active {
  background: var(--bg-active);
}

.btn-discard {
  background: linear-gradient(135deg, #5a2020 0%, #7e2d2d 100%);
  color: #f0c0c0;
}
.btn-discard:hover {
  background: linear-gradient(135deg, #7e2d2d 0%, #9e3a3a 100%);
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   SCHEME TABS
   ============================================================ */

.scheme-tabs {
  display: flex;
  gap: 0;
  align-items: stretch;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-default);
  min-height: 36px;
  flex-wrap: wrap;
  background: var(--bg-tertiary);
}

.scheme-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  position: relative;
  /* Width grows with content so the larger swatch cluster fits.
     min-width ~ accommodates name + 4 swatches + close button. */
  min-width: 130px;
}
.scheme-tab:hover {
  filter: brightness(1.2);
}
.scheme-tab.active {
  filter: brightness(1.3);
  box-shadow: inset 0 -2px 0 currentColor;
  background: rgba(255, 255, 255, 0.04);
}

.scheme-tab .close {
  font-size: 11px;
  opacity: 0.4;
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.2;
  margin-left: 2px;
  transition: all var(--transition-fast);
}
.scheme-tab .close:hover {
  opacity: 1;
  background: rgba(229, 85, 85, 0.2);
  color: var(--accent-red);
}

.scheme-tab .tab-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
  align-items: center;
}
.scheme-tab .tab-dots .td {
  /* Larger rounded-square swatch — the 7px circular dot was too
     small to read at glance. 14×14 with radius-3 corners reads as
     "color swatch" not "icon dot", and the stronger border gives
     the swatch a periodic-table tile feel that survives against
     the tab's own bg/fg colors. */
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* The "+" tab opts out of the wide .scheme-tab min-width (130px) so it
   stays as a tight icon-button-style tap target. Without this override
   the inherited .scheme-tab sizing made it look like a full-weight tab. */
.scheme-tab-add {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  min-width: 0 !important;
  width: 26px;
  padding: 0 !important;
  border-right: none !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scheme-tab-add:hover {
  color: var(--text-primary) !important;
  filter: brightness(1.5) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Axis-hit chips on each dropdown row, rendered by buildHitChipsHtml() in
   scheme-tabs.js. The chip background shows the swatch that satisfied
   the constraint, the keyword label names the axis, and a small slot
   abbreviation caps the chip ("red:red" / "dark:bg"). Compact so 2-3
   chips fit on a single row without blowing out the dropdown width. */
.dd-hit-chips {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.dd-hit-chip {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-family: inherit;
}
.dd-hit-slot {
  font-size: 9px;
  opacity: 0.75;
  margin-left: 4px;
  text-transform: uppercase;
}

/* Scheme dropdown */
.scheme-dropdown {
  display: none;
  position: fixed;
  z-index: 200;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 460px;
  overflow-y: auto;
  min-width: 320px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}

/* Static header row that holds the filter input. The input lives in
   here across every keystroke (built once by ensureDropdownShell),
   so its focus is preserved without any innerHTML swap dance. */
.scheme-dropdown .dd-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
}

/* Pinned favorites section above the filtered results. Hidden when
   the user has no favorites (set by _renderSchemeDropdown). */
.scheme-dropdown .dd-favorites {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
}
.scheme-dropdown .dd-section-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent-yellow);
  background: rgba(229, 181, 85, 0.06);
  border-bottom: 1px solid rgba(229, 181, 85, 0.18);
}
.scheme-dropdown .dd-section-header .dd-count {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: none;
}

/* No-matches state shown when the filter rejects everything AND no
   favorites are pinned. */
.scheme-dropdown .dd-empty {
  padding: 18px 16px 22px;
  text-align: center;
  color: var(--text-muted);
}
.scheme-dropdown .dd-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.scheme-dropdown .dd-empty-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Star button — left-aligned on each dropdown row. Triggers
   toggleFavorite, which both updates state.favoriteNames and fires a
   POST /api/favorites. */
.scheme-dropdown .dd-star {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 2px 8px 0 4px;
  transition: all var(--transition-fast);
}
.scheme-dropdown .dd-star:hover {
  color: var(--accent-yellow);
  background: rgba(229, 181, 85, 0.12);
  border-color: rgba(229, 181, 85, 0.3);
  transform: scale(1.15);
}
.scheme-dropdown .dd-star.dd-star-on {
  color: var(--accent-yellow);
  text-shadow: 0 0 6px rgba(229, 181, 85, 0.4);
}
.scheme-dropdown .dd-star.dd-star-on:hover {
  color: var(--text-tertiary);
  text-shadow: none;
  background: rgba(255, 85, 85, 0.08);
  border-color: rgba(229, 85, 85, 0.25);
}
.scheme-dropdown .dd-item.dd-fav-item {
  /* Subtle gold left border so favorite rows read as pinned even
     before the star's filled state. */
  border-left: 2px solid var(--accent-yellow);
}

/* ⭐ badge that appears on .scheme-tab (active history) when that
   scheme is favorited. Sits to the left of the name and is purely
   decorative — the dropdown's star button is the actual toggle. */
.scheme-tab-star {
  font-size: 10px;
  color: var(--accent-yellow);
  margin-right: 5px;
  text-shadow: 0 0 4px rgba(229, 181, 85, 0.35);
  flex-shrink: 0;
}

/* The active-tab name used to be a bare <span>; now it has the class
   .scheme-tab-name so layout adjustments don't have to use a bare-
   element selector. No styling change here — placeholder for future
   polish like truncation when the name string is too long. */
/* Note: there is intentionally NO `.scheme-tab .scheme-tab-name`
   selector. The original markup used a bare `<span>` for the scheme
   name, sized by its content, and the parent `.scheme-tab` provides
   `min-width: 130px` so the name + 14px swatches + close × all fit
   on one line. Adding `flex: 1` here with ellipsis would shrink any
   long name (e.g. "Tokyo Night Storm") to fit a narrower window — the
   whole point of widening .scheme-tab in earlier work was the opposite. */

.scheme-dropdown .dd-filter {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.scheme-dropdown .dd-filter:focus {
  background: var(--bg-tertiary);
}

.scheme-dropdown .dd-item {
  padding: 8px 14px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}
.scheme-dropdown .dd-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.scheme-dropdown .dd-item.muted {
  color: var(--text-muted);
}
.scheme-dropdown .dd-item.muted:hover {
  color: var(--text-tertiary);
}

.scheme-dropdown .dd-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.scheme-dropdown .dd-swatch-row {
  display: flex;
  gap: 3px;
}

.scheme-dropdown .dd-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0;
}

.scheme-dropdown .dd-item:hover .dd-swatch {
  border-color: rgba(255, 255, 255, 0.18);
}

.scheme-dropdown .dd-swatch {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  transition: border-color var(--transition-fast);
}

.scheme-dropdown .dd-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.scheme-dropdown .dd-check {
  color: var(--text-muted);
  font-size: 11px;
}

/* Terminal export format dropdown */
.toolbar-select {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  max-width: 110px;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast);
}
.toolbar-select:focus {
  border-color: var(--accent-blue);
}
.toolbar-select:hover {
  border-color: var(--border-strong);
}

/* ============================================================
   LOCAL FILE INDICATOR
   ============================================================ */

.local-file-mark {
  font-size: 14px;
  margin-right: 2px;
}

.local-file-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(62, 207, 122, 0.12);
  color: #8cc8a0;
  border: 1px solid rgba(62, 207, 122, 0.2);
  margin-left: 4px;
  vertical-align: middle;
}

/* ============================================================
   STATUS
   ============================================================ */

.status {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.status .dirty {
  color: var(--accent-yellow);
}
.status .clean {
  color: var(--accent-green);
}
.status .imported-note {
  color: #c8a060;
  font-size: 12px;
  margin-left: 6px;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.main {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0 24px 16px;
  overflow: hidden;
}

/* LEFT COLUMN — Terminal Preview */
.left-col {
  overflow-y: auto;
  flex-shrink: 0;
  min-width: 400px;
}

.term-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.term-box .bd {
  padding: 12px;
}

#termView {
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.55;
  border: 1px solid var(--border-subtle);
}
#termView .l {
  white-space: pre;
  min-height: 1.2em;
}

/* ============================================================
   RIGHT COLUMN — Editor
   ============================================================ */

.right-col {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  max-width: 780px;
}

/* Info bar (chips row) */
.info-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  font-size: 13px;
  border: 1px solid var(--border-subtle);
}

.info-bar .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.info-bar .chip:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.info-bar .chip .sw {
  width: 28px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.info-bar .contrast {
  font-family: var(--font-mono);
  margin-left: auto;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ============================================================
   CONTRAST METER
   ============================================================ */

.contrast-meter {
  margin-bottom: 12px;
  padding: 6px 12px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-blue);
}

/* PS1 meter: distinct left-border accent */
.contrast-meter.cm-ps1 {
  border-left: 3px solid var(--accent-purple);
}

/* Meter labels */
.contrast-meter .cm-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.contrast-meter .cm-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 1px 6px;
  border-radius: 3px;
}

.contrast-meter .cm-tag-fgbg {
  background: rgba(91, 156, 245, 0.12);
  color: var(--accent-blue);
}

.contrast-meter .cm-tag-ps1 {
  background: rgba(180, 119, 239, 0.12);
  color: var(--accent-purple);
}

.contrast-meter .cm-desc {
  font-size: 10px;
  color: var(--text-muted);
}

.contrast-meter .bar-wrap {
  position: relative;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-primary);
}

.contrast-meter .bar {
  display: flex;
  height: 100%;
  width: 100%;
}

.contrast-meter .seg {
  height: 100%;
}
.contrast-meter .seg-fail {
  background: linear-gradient(135deg, #5a2020, #7e2d2d);
}
.contrast-meter .seg-aa-lg {
  background: linear-gradient(135deg, #5a5020, #7e6d2d);
}
.contrast-meter .seg-aa {
  background: linear-gradient(135deg, #1d5a2d, #2d7e3d);
}
.contrast-meter .seg-aaa {
  background: linear-gradient(135deg, #1d4d6e, #2d6d9e);
}

.contrast-meter .marker {
  position: absolute;
  top: -2px;
  width: 3px;
  height: calc(100% + 4px);
  background: #fff;
  border-radius: 2px;
  transition: left 0.1s ease;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.contrast-meter .labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
  padding: 0 1px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contrast-meter .thresh-labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.contrast-meter .thresh-labels span {
  position: absolute;
  top: 12px;
  font-size: 8px;
  color: var(--text-muted);
  transform: translateX(-50%);
}

/* ============================================================
   COLOR EDITOR
   ============================================================ */

.ed-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.ed-box .hd {
  background: var(--bg-tertiary);
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
}

.ed-box .bd {
  padding: 8px 8px;
}

.grplbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 10px 0 6px 0;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.grplbl:first-child {
  margin-top: 0;
}

/* Color row */
.crow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 1px;
  background: transparent;
  transition: background var(--transition-fast);
}
.crow:hover {
  background: rgba(255, 255, 255, 0.02);
}

.crow .sw {
  width: 80px;
  height: 22px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.crow .sw:hover {
  transform: scaleY(1.15);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Contrast warning borders on swatches — out-of-visibility-scope swatches.
   Single 3 px inset box-shadow using the dedicated `--warning-red` /
   `--warning-yellow` CSS variables (`:root` defaults are slightly
   desaturated vs the rest of the UI red/yellow accents so the ring
   reads as UI chrome rather than as accent). The per-swatch JS
   path (computeWarningAccent() in color.js) ADAPTIVELY rewrites
   the variable in place when the swatch sits in the same hue
   family as the ring family — a yellow swatch gets a
   lightness-flipped yellow ring, a red swatch gets a
   lightness-flipped red ring, so the ring stays perceivably
   yellow/red while still being clearly distinct from the swatch.
   `border: 0` collapses the base 1px rgba border so the ring sits
   flush at the outer edge with no hairline.                   */
.crow.contrast-fail .sw {
  outline: none;
  border: 0;
  box-shadow: inset 0 0 0 3px var(--warning-red, #c55854);
}
.crow.contrast-aa-lg .sw {
  outline: none;
  border: 0;
  box-shadow: inset 0 0 0 3px var(--warning-yellow, #d6b458);
}

/* When ring↔swatch contrast is critically low (same-hue-family
   lum ratios below LUM-RATIO FLOOR), add a 1px separator between
   the inner swatch body and the outer ring so the two stop
   blending. The sep color is `--ring-sep` (set by JS to either
   `#000` or `#fff` depending on which has higher WCAG contrast
   against the swatch — a black-sep on a black swatch would be
   invisible).

   Layer-order trap to avoid: in CSS box-shadow, the FIRST listed
   shadow paints ON TOP. If the 1px sep were listed first with a
   larger spread, it'd cover the outer edge of the ring instead of
   sitting between ring and swatch. To put the sep on the INNER
   edge (touching both the ring and the swatch body), list the
   RED ring first with the SMALLER spread (3px / 2.5px for chip)
   so it stays on top at 0-spred, then list the sep second with
   spread+1 so it's visible only at radii [spred → spred+1].       */
.crow.contrast-fail.ring-close .sw {
  outline: none;
  box-shadow:
    inset 0 0 0 3px var(--warning-red, #ff0000),
    inset 0 0 0 4px var(--ring-sep, #000000);
}
.crow.contrast-aa-lg.ring-close .sw {
  outline: none;
  box-shadow:
    inset 0 0 0 3px var(--warning-yellow, #ffda14),
    inset 0 0 0 4px var(--ring-sep, #000000);
}

.crow .lbl {
  width: 72px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.crow input[type="text"] {
  width: 82px;
  flex-shrink: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 5px;
  text-align: center;
  transition: border-color var(--transition-fast);
}
.crow input[type="text"]:focus {
  border-color: var(--accent-blue);
  outline: none;
  background: #0a0a14;
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.15);
}

.crow .sldrs {
  display: flex;
  gap: 3px;
  align-items: center;
  flex: none;
  min-width: 0;
}

.crow .sldrs label {
  font-size: 10px;
  color: var(--text-muted);
  width: 14px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 600;
}

.crow input[type="range"] {
  width: 60px;
  flex: none;
  height: 14px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.crow input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  transition: background var(--transition-fast);
}

.crow input[type="range"]:hover::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.12);
}

.crow input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-tertiary);
  border: none;
  margin-top: -4.5px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.crow input[type="range"]:hover::-webkit-slider-thumb {
  background: var(--text-secondary);
  transform: scale(1.15);
}

.crow input[type="range"]::-moz-range-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.crow input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-tertiary);
  border: none;
}

.crow .sv {
  font-size: 10px;
  color: var(--text-muted);
  width: 26px;
  text-align: right;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.crow .sv-ed {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  outline: none;
  cursor: text;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.crow .sv-ed:hover {
  border-color: rgba(255, 255, 255, 0.06);
}
.crow .sv-ed:focus {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.crow .sldrs .master-lbl {
  color: var(--accent-blue) !important;
  font-weight: 700 !important;
}

.crow .ansi-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.crow .reset-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 1px 5px;
  line-height: 1.3;
  flex-shrink: 0;
  font-family: monospace;
  transition: all var(--transition-fast);
}
/* Contrast warning borders on info-bar chip swatches. Same single
   inset shadow strategy as the row swatches, scaled down to 2.5 px
   for the smaller 28×16 chip. JS rewrites the warning-* variable
   adaptively per chip so the ring stays perceivably red/yellow
   against same-hue-family chip colors. */
.info-bar .chip.contrast-fail .sw {
  outline: none;
  border: 0;
  box-shadow: inset 0 0 0 2.5px var(--warning-red, #c55854);
}
.info-bar .chip.contrast-aa-lg .sw {
  outline: none;
  border: 0;
  box-shadow: inset 0 0 0 2.5px var(--warning-yellow, #d6b458);
}

/* Chip-level ring-close separator — same logic as the .crow rules
   above, scaled down to the 28×16 chip's 2.5px ring thickness.
   Listed first: 2.5px warning ring (top layer); listed below: 3.5px
   sep (visible only at radii 2.5–3.5 so it sits flush between the
   chip's outer ring and its inner body). */
.info-bar .chip.contrast-fail.ring-close .sw {
  outline: none;
  box-shadow:
    inset 0 0 0 2.5px var(--warning-red, #ff0000),
    inset 0 0 0 3.5px var(--ring-sep, #000000);
}
.info-bar .chip.contrast-aa-lg.ring-close .sw {
  outline: none;
  box-shadow:
    inset 0 0 0 2.5px var(--warning-yellow, #ffda14),
    inset 0 0 0 3.5px var(--ring-sep, #000000);
}

/* ============================================================
   PS1 SAVE (chip in the PS1 info bar)
   ============================================================ */

#ps1SaveScheme {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 12px;
  font-weight: 600;
  color: #8cc8a0;
  background: rgba(62, 207, 122, 0.1);
  border: 1px solid rgba(62, 207, 122, 0.15);
}
#ps1SaveScheme:hover {
  background: rgba(62, 207, 122, 0.2);
  color: #b0e8c0;
  border-color: rgba(62, 207, 122, 0.3);
}

/* ============================================================
   PS1 QUICK SAVE (inside the editor box)
   ============================================================ */

.ps1-quick-save {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  background: rgba(62, 207, 122, 0.04);
  border-bottom: 1px solid rgba(62, 207, 122, 0.08);
}

.ps1-quick-save .btn-save-ps1 {
  background: linear-gradient(135deg, #1d6e2d 0%, #2d8e3d 100%);
  color: #b0e8c0;
  border: 1px solid rgba(62, 207, 122, 0.15);
  border-radius: var(--radius-sm);
  padding: 4px 14px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all var(--transition-fast);
  letter-spacing: 0.3px;
}
.ps1-quick-save .btn-save-ps1:hover {
  background: linear-gradient(135deg, #2d8e3d 0%, #3aae4a 100%);
  color: #fff;
  box-shadow: 0 1px 6px rgba(62, 207, 122, 0.2);
}
.ps1-quick-save .btn-save-ps1:active {
  transform: translateY(0);
}

/* ============================================================
   PS1 PRESET BAR
   ============================================================ */

.ps1-preset-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.ps1-preset-bar select {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  outline: none;
  max-width: 160px;
}
.ps1-preset-bar select:focus {
  border-color: var(--accent-blue);
}

.ps1-preset-bar .btn-mini {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all var(--transition-fast);
}
.ps1-preset-bar .btn-mini:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.ps1-preset-bar .btn-mini:active {
  background: var(--bg-active);
}

.ps1-preset-bar .btn-mini-del {
  color: var(--accent-red);
  background: rgba(229, 85, 85, 0.08);
  border-color: rgba(229, 85, 85, 0.15);
}
.ps1-preset-bar .btn-mini-del:hover {
  background: rgba(229, 85, 85, 0.15);
  color: var(--accent-red);
}

.crow .reset-btn:hover {
  background: rgba(255, 85, 85, 0.08);
  color: var(--accent-red);
  border-color: rgba(229, 85, 85, 0.2);
}
.crow .reset-btn:active {
  background: rgba(255, 85, 85, 0.15);
}

/* ============================================================
   POPUP CONTRAST METER
   ============================================================ */

.popup-contrast {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 2px;
}

.popup-contrast-bar {
  flex: 1;
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-primary);
  position: relative;
}

.popup-contrast-bar .contrast-seg {
  height: 100%;
}
.popup-contrast-bar .seg-fail    { background: linear-gradient(135deg, #5a2020, #7e2d2d); flex: 3; }
.popup-contrast-bar .seg-aa-lg   { background: linear-gradient(135deg, #5a5020, #7e6d2d); flex: 1.5; }
.popup-contrast-bar .seg-aa      { background: linear-gradient(135deg, #1d5a2d, #2d7e3d); flex: 2.5; }
.popup-contrast-bar .seg-aaa     { background: linear-gradient(135deg, #1d4d6e, #2d6d9e); flex: 14; }

.popup-contrast-marker {
  position: absolute;
  top: -1.5px;
  width: 2px;
  height: calc(100% + 3px);
  background: #fff;
  border-radius: 1px;
  transition: left 0.08s ease;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.popup-contrast-label {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

/* ============================================================
   POPUP / COLOR PICKER
   ============================================================ */

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.overlay.on {
  display: flex;
}

/* Popup always on top of other overlays (e.g. theme manager modal) */
#popupOverlay {
  z-index: 200;
}

.popup {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  width: 420px;
  box-shadow: var(--shadow-lg);
  animation: popupIn 0.15s ease-out;
}

@keyframes popupIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.popup h3 {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.popup .pr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.popup .pr label {
  width: 18px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: right;
  font-weight: 600;
}

.popup .pr input[type="range"] {
  flex: 1;
  height: 18px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.popup .pr input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.popup .pr input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-secondary);
  border: none;
  margin-top: -4px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.popup .pr input[type="range"]:hover::-webkit-slider-thumb {
  background: var(--text-primary);
  transform: scale(1.1);
}

.popup .pr input[type="range"]::-moz-range-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.popup .pr input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-secondary);
  border: none;
}

.popup .pr .sv {
  font-size: 12px;
  color: var(--text-secondary);
  width: 32px;
  text-align: right;
  font-family: var(--font-mono);
}

.popup .pr .sv-ed {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  outline: none;
  cursor: text;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.popup .pr .sv-ed:hover {
  border-color: rgba(255, 255, 255, 0.06);
}
.popup .pr .sv-ed:focus {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.popup .hexin {
  width: 110px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 6px 8px;
  text-align: center;
  transition: border-color var(--transition-fast);
}

.popup .hexin:focus {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.15);
}

/* Color name input — sits to the right of the hex/picker at the
   bottom of the popup. Same look as .hexin but expands to fill
   remaining row width. */
.popup .namein {
  flex: 1;
  min-width: 140px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 10px;
  transition: border-color var(--transition-fast);
}

.popup .namein:focus {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.15);
}

.popup .picker {
  width: 42px;
  height: 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px;
  cursor: pointer;
  background: none;
}

.popup .sv-wrap {
  margin-bottom: 12px;
  text-align: center;
}

.popup .sv-wrap canvas {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  display: block;
  margin: 0 auto;
  cursor: crosshair;
  width: 200px;
  height: 200px;
}

.popup .hue-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  cursor: pointer;
  background: transparent;
  border-radius: 4px;
}

.popup .hue-slider::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important;
}

/* L slider: dynamic track gradient set via JS --l-track variable */
#popL::-webkit-slider-runnable-track {
  background: var(--l-track, rgba(255, 255, 255, 0.08)) !important;
}
#popL::-moz-range-track {
  background: var(--l-track, rgba(255, 255, 255, 0.08)) !important;
}

/* R/G/B sliders: dynamic track gradients set via JS */
#popR::-webkit-slider-runnable-track { background: var(--r-track, rgba(255, 255, 255, 0.08)) !important; }
#popR::-moz-range-track { background: var(--r-track, rgba(255, 255, 255, 0.08)) !important; }
#popG::-webkit-slider-runnable-track { background: var(--g-track, rgba(255, 255, 255, 0.08)) !important; }
#popG::-moz-range-track { background: var(--g-track, rgba(255, 255, 255, 0.08)) !important; }
#popB::-webkit-slider-runnable-track { background: var(--b-track, rgba(255, 255, 255, 0.08)) !important; }
#popB::-moz-range-track { background: var(--b-track, rgba(255, 255, 255, 0.08)) !important; }

.popup .hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.3);
  margin-top: -2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.popup .hue-slider::-moz-range-track {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important;
}

.popup .hue-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.3);
}

/* Popup reference chips */
.pop-chips {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.pop-chips .ref-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.pop-chips .ref-chip:hover {
  opacity: 0.85;
}

.pop-chips .ref-chip .ref-swat {
  width: 44px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255, 255, 255, 0.08);
  transition: border-color var(--transition-fast);
}

.pop-chips .ref-chip .ref-lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pop-chips .ref-chip .ref-hex {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

.pop-chips .ref-chip:hover .ref-hex {
  display: block;
}

.pop-chips .ref-chip.orig .ref-swat {
  border: 2px solid #d4a000;
}

.pop-chips .ref-chip.prev .ref-swat {
  border: 2px dashed rgba(255, 255, 255, 0.2);
}

.pop-chips .ref-chip.active-chip .ref-swat {
  border: 2px solid var(--accent-blue);
}

.pop-chips .ref-chip.active-chip .ref-lbl {
  color: var(--accent-blue);
}

.pop-chips .pop-cur {
  flex: 1;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.pop-chips .pop-cur .pop-cur-lbl {
  position: absolute;
  bottom: 2px;
  right: 6px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.popup .btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.popup .btns button {
  padding: 8px 22px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.popup .btns .done {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.popup .btns .done:hover {
  background: var(--bg-active);
}

.popup .btns .cancel-btn {
  background: rgba(255, 85, 85, 0.1);
  color: var(--accent-red);
}
.popup .btns .cancel-btn:hover {
  background: rgba(255, 85, 85, 0.2);
}

/* ============================================================
   CONFIRM MODAL
   ============================================================ */

.cmodal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: popupIn 0.15s ease-out;
}

.cmodal h3 {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
}

.cmodal p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.cmodal .list {
  margin: 8px 0;
  padding-left: 24px;
  color: var(--accent-yellow);
  font-size: 14px;
}

.cmodal .btns {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

.cmodal .btns button {
  padding: 10px 28px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.cmodal .confirm {
  background: linear-gradient(135deg, #2d7e3b 0%, #3a9e4a 100%);
  color: #fff;
}
.cmodal .confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(62, 207, 122, 0.3);
}

.cmodal .cancel {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.cmodal .cancel:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

/* ============================================================
   BACKUP PANEL
   ============================================================ */

.bak-box {
  margin-top: 14px;
  font-size: 13px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}

.bak-box table {
  width: 100%;
  border-collapse: collapse;
}

.bak-box th,
.bak-box td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.bak-box th {
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rbtn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all var(--transition-fast);
}
.rbtn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ============================================================
   PALETTE GRID
   ============================================================ */

.palette-wrap {
  margin-bottom: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: none;
  box-shadow: var(--shadow-sm);
}

.palette-hd {
  background: var(--bg-tertiary);
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 4px;
  padding: 8px;
}

.psw {
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 6px 4px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--transition-fast);
}
.psw:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.psw-sw {
  width: 100%;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 3px;
}

.psw-lbl {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.psw-ansi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
}

.psw-hex {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ============================================================
   BATCH MODAL
   ============================================================ */

.batch-term {
  margin: 8px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.45;
}

.batch-term .bt-tab {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 14px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.batch-term .bt-body {
  padding: 10px 14px;
}

.batch-term .bt-body .btl {
  white-space: pre;
  min-height: 1.2em;
}

.batch-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 3px;
  max-height: 260px;
  overflow-y: auto;
  margin: 6px 0;
  padding: 6px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
}

.bpsw {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.bpsw-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.bpsw-sw {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.bpsw-old {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.bpsw-arr {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.bpsw-new {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

/* Batch contrast */
.batch-contrast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.batch-contrast .bc-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-primary);
  position: relative;
  display: flex;
}

.batch-contrast .bc-bar .seg {
  height: 100%;
}
.batch-contrast .bc-bar .seg-fail {
  background: linear-gradient(135deg, #5a2020, #7e2d2d);
  flex: 3;
}
.batch-contrast .bc-bar .seg-aa-lg {
  background: linear-gradient(135deg, #5a5020, #7e6d2d);
  flex: 1.5;
}
.batch-contrast .bc-bar .seg-aa {
  background: linear-gradient(135deg, #1d5a2d, #2d7e3d);
  flex: 2.5;
}
.batch-contrast .bc-bar .seg-aaa {
  background: linear-gradient(135deg, #1d4d6e, #2d6d9e);
  flex: 14;
}

.batch-contrast .bc-marker {
  position: absolute;
  top: -2px;
  width: 3px;
  height: calc(100% + 4px);
  background: #fff;
  border-radius: 2px;
  transition: left 0.08s ease;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.batch-contrast .bc-label {
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

/* ============================================================
   THEME MODAL
   ============================================================ */

#themeList {
  max-height: 260px;
  overflow-y: auto;
  margin: 10px 0;
}

.theme-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

.theme-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.02);
  transition: background var(--transition-fast);
}
.theme-item:hover {
  background: var(--bg-hover);
}

.theme-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-name {
  font-size: 14px;
  color: var(--text-primary);
}

.theme-values {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.theme-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.theme-btn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all var(--transition-fast);
}
.theme-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.theme-apply {
  background: rgba(62, 207, 122, 0.08);
  color: #8cc8a0;
  border-color: rgba(62, 207, 122, 0.15);
}
.theme-apply:hover {
  background: rgba(62, 207, 122, 0.15);
  color: #b0e8c0;
}

.theme-edit {
  background: rgba(91, 156, 245, 0.08);
  color: #8cb4f5;
  border-color: rgba(91, 156, 245, 0.15);
}
.theme-edit:hover {
  background: rgba(91, 156, 245, 0.15);
}

.theme-del {
  color: var(--accent-red);
  background: rgba(229, 85, 85, 0.08);
  border-color: rgba(229, 85, 85, 0.15);
  padding: 3px 8px;
}
.theme-del:hover {
  background: rgba(229, 85, 85, 0.15);
}

.theme-create-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.theme-create-hd {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 8px;
}

.theme-create-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.theme-input {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.theme-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.15);
}

/* Theme live preview */
.theme-live-preview {
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.theme-preview-hd {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  margin-bottom: 6px;
}

.theme-term {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  white-space: nowrap;
}

.theme-term-line {
  white-space: pre;
  min-height: 1.2em;
}

.theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.tpsw {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tpsw-sw {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.tpsw-arr {
  color: var(--text-muted);
  font-size: 8px;
  flex-shrink: 0;
}

/* Default theme badge */
.theme-def-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(91, 156, 245, 0.12);
  color: var(--accent-blue);
  margin-left: 4px;
  vertical-align: middle;
}

/* Restore defaults bar */
.theme-restore-bar {
  padding: 6px 0;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 6px;
}

.theme-restore {
  background: rgba(91, 156, 245, 0.08);
  color: #8cb4f5;
  border-color: rgba(91, 156, 245, 0.15);
  font-size: 11px;
}
.theme-restore:hover {
  background: rgba(91, 156, 245, 0.15);
  color: #b0d0ff;
}

/* Duplicate button */
.theme-dup {
  background: rgba(180, 119, 239, 0.08);
  color: #b8a0e8;
  border-color: rgba(180, 119, 239, 0.15);
}
.theme-dup:hover {
  background: rgba(180, 119, 239, 0.15);
  color: #d0c0f0;
}

/* ============================================================
   UI THEME MANAGER
   ============================================================ */

#uitList {
  max-height: 240px;
  overflow-y: auto;
  margin: 10px 0;
}

.uit-modal-hdr {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.uit-modal-hdr h3 {
  margin-bottom: 0 !important;
  white-space: nowrap;
}

.uit-modal-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.uit-restore-bar {
  padding: 6px 0;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 6px;
}

.uit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.02);
  transition: background var(--transition-fast);
}
.uit-item:hover {
  background: var(--bg-hover);
}
.uit-item.uit-item-active {
  background: rgba(91, 156, 245, 0.12);
  border: 1px solid rgba(91, 156, 245, 0.3);
  box-shadow: inset 3px 0 0 var(--accent-blue);
}
.uit-item.uit-item-active .uit-item-name {
  color: #fff;
}
.uit-item.uit-item-active .uit-chip {
  border-color: rgba(255, 255, 255, 0.25);
}

.uit-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.uit-info-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.uit-item-name {
  font-size: 13px;
  color: var(--text-primary);
}

.uit-item-check {
  font-size: 10px;
  color: var(--accent-blue);
  font-weight: 600;
}

.uit-chips {
  display: flex;
  gap: 3px;
}

.uit-chip {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}



.uit-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.uit-btn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.uit-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.uit-apply {
  background: rgba(62, 207, 122, 0.08);
  color: #8cc8a0;
  border-color: rgba(62, 207, 122, 0.15);
  padding: 5px 14px;
  font-size: 12px;
}
.uit-apply:hover {
  background: rgba(62, 207, 122, 0.15);
  color: #b0e8c0;
}

.uit-edit {
  background: rgba(91, 156, 245, 0.08);
  color: #8cb4f5;
  border-color: rgba(91, 156, 245, 0.15);
  padding: 5px 12px;
  font-size: 12px;
}
.uit-edit:hover {
  background: rgba(91, 156, 245, 0.15);
}

.uit-dup {
  background: rgba(180, 119, 239, 0.08);
  color: #b8a0e8;
  border-color: rgba(180, 119, 239, 0.15);
  padding: 5px 12px;
  font-size: 12px;
}
.uit-dup:hover {
  background: rgba(180, 119, 239, 0.15);
}

.uit-del {
  color: var(--accent-red);
  background: rgba(229, 85, 85, 0.08);
  border-color: rgba(229, 85, 85, 0.15);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 700;
}
.uit-del:hover {
  background: rgba(229, 85, 85, 0.15);
}

.uit-restore {
  background: rgba(91, 156, 245, 0.08);
  color: #8cb4f5;
  border-color: rgba(91, 156, 245, 0.15);
}
.uit-restore:hover {
  background: rgba(91, 156, 245, 0.15);
}

.uit-save {
  background: linear-gradient(135deg, #2d7e3b 0%, #3a9e4a 100%);
  color: #fff;
  border: none;
  padding: 4px 16px;
  font-size: 11px;
}
.uit-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(62, 207, 122, 0.3);
}

.uit-cancel {
  background: rgba(229, 85, 85, 0.08);
  color: var(--accent-red);
  border-color: rgba(229, 85, 85, 0.15);
}
.uit-cancel:hover {
  background: rgba(229, 85, 85, 0.15);
}

/* Editor section */
#uitEditor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.uit-editor-hd {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 8px;
}

.uit-input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--transition-fast);
  margin-bottom: 8px;
}
.uit-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.15);
}

.uit-crow-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

/* Mini preview in theme editor */
#uitMiniPreview {
  margin-bottom: 12px;
}

.uit-preview-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  margin-bottom: 4px;
}

.uit-preview-wrap {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 11px;
}

.uit-preview-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
}

.uit-preview-hdr-title {
  font-weight: 700;
  font-size: 12px;
}

.uit-preview-hdr-sub {
  font-size: 10px;
}

.uit-preview-tbar {
  display: flex;
  gap: 4px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.uit-preview-btn {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.uit-preview-btn-accent {
  background: rgba(91, 156, 245, 0.08) !important;
}

.uit-preview-body {
  display: flex;
  gap: 6px;
  padding: 6px;
}

.uit-preview-term {
  flex: 1;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.55;
  min-height: 60px;
}

.uit-preview-term-line {
  white-space: pre;
  min-height: 1.2em;
}

.uit-preview-swatches {
  width: 175px;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.uit-preview-swatch-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.uit-preview-swatch-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

.uit-preview-swatch {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid;
  flex-shrink: 0;
}

.uit-preview-acclbls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -3px;
}
.uit-preview-acclbls span {
  width: 24px;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.3px;
  font-weight: 600;
  flex-shrink: 0;
}

.uit-preview-surface {
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.uit-preview-surface-lbl {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.uit-preview-surface-text {
  font-size: 10px;
  font-weight: 500;
}

.uit-preview-text-samples {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.uit-preview-ts {
  font-size: 10px;
  font-weight: 600;
}

/* ── Theme editor rows (matching COLOR EDITOR .crow style) ── */
.uit-crow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background var(--transition-fast);
}
.uit-crow:hover {
  background: rgba(255, 255, 255, 0.02);
}

.uit-crow-swatch {
  width: 36px;
  height: 18px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.uit-crow-swatch:hover {
  transform: scaleY(1.15);
  border-color: rgba(255, 255, 255, 0.2);
}

.uit-crow-lbl {
  width: 48px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.uit-crow-hex {
  width: 70px;
  flex-shrink: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 4px;
  text-align: center;
  outline: none;
  transition: border-color var(--transition-fast);
}
.uit-crow-hex:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.15);
}

.uit-crow-sldrs {
  display: flex;
  gap: 2px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.uit-crow-sldrs label {
  font-size: 9px;
  color: var(--text-muted);
  width: 11px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 600;
}

.uit-crow-sldrs input[type="range"] {
  width: 40px;
  flex: none;
  height: 12px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.uit-crow-sldrs input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  transition: background var(--transition-fast);
}
.uit-crow-sldrs input[type="range"]:hover::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.12);
}
.uit-crow-sldrs input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-tertiary);
  border: none;
  margin-top: -3.5px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.uit-crow-sldrs input[type="range"]:hover::-webkit-slider-thumb {
  background: var(--text-secondary);
  transform: scale(1.15);
}
.uit-crow-sldrs input[type="range"]::-moz-range-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}
.uit-crow-sldrs input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-tertiary);
  border: none;
}

.uit-crow-sv {
  font-size: 9px;
  color: var(--text-muted);
  width: 22px;
  text-align: right;
  font-family: var(--font-mono);
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  outline: none;
  cursor: text;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  padding: 0 2px;
}
.uit-crow-sv:hover {
  border-color: rgba(255, 255, 255, 0.06);
}
.uit-crow-sv:focus {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.uit-editor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Editor header row: label + name input on same line */
.uit-editor-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.uit-editor-hd {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  white-space: nowrap;
}

.uit-input-inline {
  flex: 1;
  max-width: 280px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  padding: 4px 10px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.uit-input-inline:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(91, 156, 245, 0.15);
}

/* Batch sliders — shared .pr slider styles also used in the theme
   create section, so selectors are comma-joined. */
.batch-sliders,
.theme-create-fields {
  padding: 0;
}

.batch-sliders .pr,
.theme-create-fields .pr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.theme-create-fields .pr {
  margin-bottom: 6px;
}

.batch-sliders .pr label,
.theme-create-fields .pr label {
  width: 20px;
  font-size: 14px;
  color: var(--text-tertiary);
  text-align: right;
  flex-shrink: 0;
}

.batch-sliders .pr input[type="range"],
.theme-create-fields .pr input[type="range"] {
  flex: 1;
  height: 18px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.batch-sliders .pr input[type="range"]::-webkit-slider-runnable-track,
.theme-create-fields .pr input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

.batch-sliders .pr input[type="range"]::-webkit-slider-thumb,
.theme-create-fields .pr input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-secondary);
  border: none;
  margin-top: -6px;
}

.batch-sliders .pr input[type="range"]::-moz-range-track,
.theme-create-fields .pr input[type="range"]::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

.batch-sliders .pr input[type="range"]::-moz-range-thumb,
.theme-create-fields .pr input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-secondary);
  border: none;
}

.batch-sliders .pr .sv,
.theme-create-fields .pr .sv {
  font-size: 13px;
  color: var(--text-secondary);
  width: 40px;
  text-align: right;
  font-family: var(--font-mono);
}

/* ============================================================
   BATCH SLIDER TRACK GRADIENTS
   Each batch slider affects the whole scheme at once, so the
   track shows what the *dimension* does across its full range
   (static gradient) rather than anchoring to the current color
   like the per-color popup does.
   - Bright     : black → mid-gray → white   (lightness sweep)
   - Saturation : desaturated → mid → vivid  (saturation sweep)
   - Hue        : full rainbow               (hue rotation preview)
   - R/G/B      : black → channel mid → pure (channel sweep)
   - Contrast   : black → mid-gray → white   (matches contrast meter)
   ============================================================ */

#batchBright::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #000 0%, #777 50%, #fff 100%) !important;
}
#batchBright::-moz-range-track {
  background: linear-gradient(to right, #000 0%, #777 50%, #fff 100%) !important;
}

#batchSat::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #3a3a3a 0%, #888 50%, #5b9cf5 100%) !important;
}
#batchSat::-moz-range-track {
  background: linear-gradient(to right, #3a3a3a 0%, #888 50%, #5b9cf5 100%) !important;
}

#batchHue::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
    #00f 67%, #f0f 83%, #f00 100%) !important;
}
#batchHue::-moz-range-track {
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
    #00f 67%, #f0f 83%, #f00 100%) !important;
}

#batchR::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #000 0%, #800000 50%, #f00 100%) !important;
}
#batchR::-moz-range-track {
  background: linear-gradient(to right, #000 0%, #800000 50%, #f00 100%) !important;
}

#batchG::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #000 0%, #008000 50%, #0f0 100%) !important;
}
#batchG::-moz-range-track {
  background: linear-gradient(to right, #000 0%, #008000 50%, #0f0 100%) !important;
}

#batchB::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #000 0%, #000080 50%, #00f 100%) !important;
}
#batchB::-moz-range-track {
  background: linear-gradient(to right, #000 0%, #000080 50%, #00f 100%) !important;
}

/* Contrast slider sweeps black→gray→white to mirror the contrast
   meter below it; sits next to the existing batch-contrast bar. */
#batchContrast::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #000 0%, #777 50%, #fff 100%) !important;
}
#batchContrast::-moz-range-track {
  background: linear-gradient(to right, #000 0%, #777 50%, #fff 100%) !important;
}

/* ============================================================
   UNIFIED IMPORT MODAL
   ============================================================ */
.imp-cmodal { max-width: 720px; }

.imp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
}
.imp-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--text-tertiary);
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.imp-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.imp-tab-active {
  background: var(--bg-elevated);
  border-color: var(--border-default);
  color: var(--text-primary);
  position: relative;
  bottom: -1px;
}

.imp-panels { margin-bottom: 14px; }
.imp-panel { /* toggled by JS */ }

.imp-help {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.imp-action-btn { font-size: 13px; padding: 8px 18px; }

.imp-url-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.imp-url-input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.imp-url-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(91,156,245,0.15);
}
.imp-error {
  color: var(--accent-red);
  font-size: 12px;
  margin-top: 8px;
  font-family: var(--font-mono);
}

.imp-textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.imp-textarea:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(91,156,245,0.15);
}

.imp-preview-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 14px;
  min-height: 100px;
}
.imp-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 20px 0;
}
.imp-preview-error {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--accent-yellow);
  padding: 8px 0;
  line-height: 1.5;
}
.imp-preview-hdr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.imp-preview-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.imp-preview-fmt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(91,156,245,0.12);
  color: var(--accent-blue);
  flex-shrink: 0;
}
.imp-preview-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.imp-preview-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.imp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.imp-sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px;
  width: 56px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.imp-sw-big { width: 64px; }
.imp-sw:hover { transform: translateY(-1px); }
.imp-sw-fill {
  width: 100%;
  height: 24px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 3px;
}
.imp-sw-ansi .imp-sw-fill { height: 20px; }
.imp-sw span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.imp-override {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-secondary);
}
.imp-override label { font-weight: 600; }
.imp-format-select { flex: 1; max-width: 280px; }