/**
 * popup.css — Popup UI styles
 * Includes: theme variables, form controls, action lists, modals,
 *           tabs, status bar, collapsible cards, toast, hotkeys
 */

:root {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --danger: #ef4444;
  --danger-dark: #dc2626;
  --success: #10b981;
  --success-dark: #059669;
  --secondary: #8b5cf6;
  --secondary-dark: #7c3aed;
  --bg: #f9fafb;
  --card: #ffffff;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --secondary-bg: #f3f4f6;
  --secondary-text: #111827;
  --list-bg: #f3f4f6;
  /* Highlight tab inner surfaces */
  --hl-pill-bg:   rgba(0,0,0,0.025);
  --hl-inner-bg:  rgba(0,0,0,0.035);
  /* Modal backdrop — unified */
  --modal-backdrop: rgba(0, 0, 0, 0.52);
  /* Code block / toolbar (light mode) */
  --code-bg: #f1f5f9;
  --code-text: #334155;
  --code-toolbar-bg: #e2e8f0;
  --code-toolbar-border: #cbd5e1;
  --code-toolbar-label: #475569;
  --code-toolbar-btn-bg: #f8fafc;
  --code-toolbar-btn-border: #cbd5e1;
  --code-toolbar-btn-text: #475569;
}

[data-theme="dark"] {
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --danger: #f87171;
  --danger-dark: #ef4444;
  --success: #34d399;
  --success-dark: #10b981;
  --secondary: #a78bfa;
  --secondary-dark: #8b5cf6;
  --bg: #050f1f;
  --card: #0d1829;
  --border: #2d4157;
  --text: #f5f7fa;
  --muted: #b8c8da;
  --secondary-bg: #1a2938;
  --secondary-text: #f5f7fa;
  --list-bg: #0d1829;
  /* Highlight tab inner surfaces — must be lighter than card (#0d1829) */
  --hl-pill-bg:   rgba(255,255,255,0.06);
  --hl-inner-bg:  rgba(0,0,0,0.22);
  /* Code block / toolbar (dark mode) */
  --code-bg: #1e2231;
  --code-text: #abb2bf;
  --code-toolbar-bg: #1a2938;
  --code-toolbar-border: #2d4157;
  --code-toolbar-label: #6b7280;
  --code-toolbar-btn-bg: rgba(255, 255, 255, 0.05);
  --code-toolbar-btn-border: rgba(255, 255, 255, 0.1);
  --code-toolbar-btn-text: #9ca3af;
  color-scheme: dark;
}

/* === Row Item Sizing Utilities === */
.flex-1 { flex: 1 1 0; }
.w-auto { width: auto; flex: 0 0 auto; }
.w-100 { width: 100px; flex: 0 0 auto; }
.w-140 { width: 140px; flex: 0 0 auto; }

* {
  box-sizing: border-box;
}

body {
  width: 480px;
  min-height: 600px;
  max-height: 600px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}
body:has(#tabHighlight.active) {
  overflow: hidden;
}

h3 {
  font-size: 12px;
  margin: 0 0 6px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}

button,
input,
select,
textarea {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 2px solid var(--border);
  font-size: 13px;
}

input,
select,
textarea {
  background: var(--card);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.6;
  font-size: 12px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

input.required-error,
textarea.required-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  border: none;
  padding: 0;
  background: linear-gradient(to right,
    var(--primary) 0%,
    var(--primary) var(--pct, 0%),
    var(--border)  var(--pct, 0%),
    var(--border)  100%
  );
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: none;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Dark-friendly file input */
input[type="file"] {
  padding: 6px 10px;
}

input[type="file"]::file-selector-button {
  background: var(--secondary-bg);
  color: var(--secondary-text);
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  margin-right: 8px;
}

input[type="file"]:hover::file-selector-button {
  filter: brightness(0.95);
}

button {
  cursor: pointer;
  font-weight: 500;
  background: var(--primary);
  color: white;
  border: 2px solid var(--primary);
  transition: all 0.2s ease;
  box-shadow: none;
}

button:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

button.secondary {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--border);
  box-shadow: none;
}

button.secondary:hover:not(:disabled) {
  background: var(--secondary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

button.success {
  background: var(--success);
  border-color: var(--success);
  box-shadow: none;
}

button.success:hover:not(:disabled) {
  background: var(--success-dark);
  border-color: var(--success-dark);
}

button.primary-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

button.primary-gradient:hover:not(:disabled) {
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
  filter: brightness(1.05);
}

button.danger {
  background: var(--card);
  color: var(--danger);
  border: 2px solid var(--danger);
  box-shadow: none;
}

button.danger:hover:not(:disabled) {
  background: var(--danger);
  color: white;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

.row {
  display: flex;
  gap: 6px;
}

/* Equalize child widths in paired rows (select + button) */
.row.equalize > * {
  flex: 1 1 0;
}

/* === Scrollbars — hidden globally, restored for list containers === */
*::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* Thin scrollbar on action/variable lists so users know more items exist */
.actions,
.var-list {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.actions::-webkit-scrollbar,
.var-list::-webkit-scrollbar { display: block; width: 5px; }
.actions::-webkit-scrollbar-track,
.var-list::-webkit-scrollbar-track { background: transparent; }
.actions::-webkit-scrollbar-thumb,
.var-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.actions::-webkit-scrollbar-thumb:hover,
.var-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* === Preview Actions === */

.actions {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 10px;
}

.actions li {
  padding: 5px 6px 5px 10px;
  margin-bottom: 3px;
  border-radius: 5px;
  background: var(--list-bg);
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: grab;
  transition: all 0.15s ease;
  position: relative;
  border-left-width: 3px;
}

.actions li:hover {
  background: var(--secondary-bg);
}

.actions li::before {
  content: '⋮⋮';
  position: absolute;
  left: 2px;
  color: var(--muted);
  font-size: 12px;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

.actions li:hover::before {
  opacity: 0.5;
}

.actions .index {
  color: var(--muted);
  width: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.actions .type {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
}

.actions .value {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
}

/* fix type column to equal size */
.actions .type {
  flex: 0 0 70px;
  min-width: 70px;
  max-width: 70px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 110px fits "screenshot_element" (the longest action type, 18 chars) without truncation.
   Sequence/Schedule lists use the 70px default because .type shows shorter scenario names. */
#actions .type {
  flex: 0 0 110px;
  min-width: 110px;
  max-width: 110px;
}

/* Buttons trong list */
.actions .btn-row {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.actions li button {
  width: auto !important;
  font-size: 9px !important;
  height: 20px !important;
  padding: 1px 6px !important;
  margin-top: 0 !important;
  border-radius: 3px !important;
}

.action-click {
  border-left: 4px solid var(--primary);
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
}
.action-click .type { color: #60a5fa; }

.action-input {
  border-left: 4px solid var(--success);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
}
.action-input .type { color: #34d399; }

.action-navigate {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, transparent 100%);
}
.action-navigate .type { color: #fbbf24; }

.action-script {
  border-left: 4px solid var(--secondary);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.08) 0%, transparent 100%);
}
.action-script .type { color: #a78bfa; }

.action-hover {
  border-left: 4px solid #c084fc;
  background: linear-gradient(90deg, rgba(192, 132, 252, 0.08) 0%, transparent 100%);
}
.action-hover .type { color: #c084fc; }

.action-wait {
  border-left: 4px solid #94a3b8;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.06) 0%, transparent 100%);
}
.action-wait .type { color: #94a3b8; }

.action-dragdrop {
  border-left: 4px solid #fb923c;
  background: linear-gradient(90deg, rgba(251, 146, 60, 0.08) 0%, transparent 100%);
}
.action-dragdrop .type { color: #fb923c; }

.action-readdom {
  border-left: 4px solid #2dd4bf;
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.08) 0%, transparent 100%);
}
.action-readdom .type { color: #2dd4bf; }

.action-screenshot {
  border-left: 4px solid #06b6d4;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.08) 0%, transparent 100%);
}
.action-screenshot .type { color: #22d3ee; }

.action-screenshot_full {
  border-left: 4px solid #0891b2;
  background: linear-gradient(90deg, rgba(8, 145, 178, 0.12) 0%, transparent 100%);
}
.action-screenshot_full .type { color: #38bdf8; }

.action-screenshot_element {
  border-left: 4px solid #0ea5e9;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.08) 0%, transparent 100%);
}
.action-screenshot_element .type { color: #7dd3fc; }

.action-screenshot_tovar {
  border-left: 4px solid #818cf8;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0.08) 0%, transparent 100%);
}
.action-screenshot_tovar .type { color: #a5b4fc; }

.action-condition {
  border-left: 4px solid #f97316;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.08) 0%, transparent 100%);
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.action-condition .type { color: #fb923c; }

.action-switch {
  border-left: 4px solid #e879f9;
  background: linear-gradient(90deg, rgba(232, 121, 249, 0.08) 0%, transparent 100%);
}
.action-switch .type { color: #e879f9; }

.action-dropdown {
  border-left: 4px solid #f472b6;
  background: linear-gradient(90deg, rgba(244, 114, 182, 0.08) 0%, transparent 100%);
}
.action-dropdown .type { color: #f472b6; }

/* Disabled action styling */
.action-disabled {
  opacity: 0.5;
  background: var(--list-bg) !important;
  border-left-color: #9ca3af !important;
}

.action-disabled .type,
.action-disabled .value {
  text-decoration: line-through;
  color: var(--secondary-text);
}

.action-disabled .index::after {
  content: ' ⏸';
  font-size: 10px;
}

/* Undo/Redo button styles */
.undo-redo-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.undo-redo-row button {
  flex: 1;
  font-size: 11px;
  padding: 4px 8px;
}

.action-script .value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Segoe UI Mono', 'Roboto Mono', 'Courier New', monospace;
  white-space: nowrap;
}

.empty {
  text-align: center;
  color: #9ca3af;
  padding: 10px;
}

/* === Drag & Drop === */
.actions li { cursor: grab; }
.actions li:active { cursor: grabbing; }
.actions li.dragging { opacity: 0.5; transform: scale(0.98); }
.actions li.drag-over { border-top: 3px solid var(--primary); margin-top: 8px; }

/* === Variables List (Action Row Mirror) === */

/* Fixed-size icon box — guarantees S / R / P badges render at identical size
   regardless of glyph source (letter vs Unicode symbol) */
.vt-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
  font-style: normal;
}
.vt-i.s { background: rgba(148,163,184,.2); color: #94a3b8; }
.vt-i.r { background: rgba(245,158,11,.2);  color: #f59e0b; }
.vt-i.p { background: rgba(96,165,250,.2);  color: #60a5fa; }
.vt-i.f { background: rgba(45,212,191,.2);  color: #2dd4bf; }

/* List container — mirrors .actions */
.var-list {
  list-style: none;
  padding: 4px;
  margin: 6px 0 4px;
  max-height: 210px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Individual row — mirrors .actions li */
.var-list .var-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  margin-bottom: 2px;
  border-radius: 5px;
  background: var(--list-bg);
  border: 1px solid transparent;
  border-left-width: 3px;
  position: relative;
  cursor: default;
  transition: background 0.1s;
}
.var-list .var-row:last-child { margin-bottom: 0; }

.var-list .var-row::before {
  content: '⋮⋮';
  position: absolute;
  left: 2px;
  color: var(--muted);
  font-size: 12px;
  opacity: 0.25;
  cursor: grab;
  transition: opacity 0.2s;
}
.var-list .var-row:hover::before { opacity: 0.5; }
.var-list .var-row:hover { background: var(--secondary-bg); }

/* Type-specific border + gradient */
.var-list .var-row.t-s {
  border-left-color: #94a3b8;
  background: linear-gradient(90deg, rgba(148,163,184,.07) 0%, transparent 100%);
}
.var-list .var-row.t-r {
  border-left-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245,158,11,.08) 0%, transparent 100%);
}
.var-list .var-row.t-p {
  border-left-color: #60a5fa;
  background: linear-gradient(90deg, rgba(96,165,250,.08) 0%, transparent 100%);
}
.var-list .var-row.t-f {
  border-left-color: #2dd4bf;
  background: linear-gradient(90deg, rgba(45,212,191,.08) 0%, transparent 100%);
}
.var-list .var-row.t-s:hover { background: linear-gradient(90deg, rgba(148,163,184,.13), rgba(255,255,255,.02)); }
.var-list .var-row.t-r:hover { background: linear-gradient(90deg, rgba(245,158,11,.13),  rgba(255,255,255,.02)); }
.var-list .var-row.t-p:hover { background: linear-gradient(90deg, rgba(96,165,250,.13),  rgba(255,255,255,.02)); }
.var-list .var-row.t-f:hover { background: linear-gradient(90deg, rgba(45,212,191,.13),  rgba(255,255,255,.02)); }

/* Index number */
.var-list .vr-idx {
  color: var(--muted);
  width: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  text-align: center;
  font-size: 10px;
}

/* Type column — fixed width, uppercase, mirrors .actions .type */
.var-list .vr-type {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  flex: 0 0 76px;
  min-width: 76px;
  max-width: 76px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}
.var-list .var-row.t-s .vr-type { color: #94a3b8; }
.var-list .var-row.t-r .vr-type { color: #f59e0b; }
.var-list .var-row.t-p .vr-type { color: #60a5fa; }
.var-list .var-row.t-f .vr-type { color: #2dd4bf; }

/* Key display — purple, fixed width */
.var-list .vr-key {
  font-size: 10px;
  font-weight: 700;
  color: #c084fc;
  flex: 0 0 72px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Arrow separator */
.var-list .vr-arr {
  color: var(--muted);
  font-size: 9px;
  flex: 0 0 10px;
  text-align: center;
}

/* Value display — mirrors .actions .value */
.var-list .vr-val {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 10px;
  min-width: 0;
}
.var-list .var-row.t-r .vr-val { color: #f59e0b; font-style: italic; }
.var-list .var-row.t-p .vr-val { color: #60a5fa; font-style: italic; }
.var-list .var-row.t-f .vr-val { color: #2dd4bf; font-style: italic; }

/* Sub-label below value */
.var-list .vr-sub {
  display: block;
  font-size: 9px;
  font-style: italic;
  opacity: 0.6;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.var-list .var-row.t-s .vr-sub { color: #94a3b8; }
.var-list .var-row.t-r .vr-sub { color: #f59e0b; }
.var-list .var-row.t-p .vr-sub { color: #60a5fa; }
.var-list .var-row.t-f .vr-sub { color: #2dd4bf; }

/* Button row — mirrors .actions .btn-row */
.var-list .var-btn-row {
  display: flex;
  gap: 3px;
  margin-left: auto;
  flex-shrink: 0;
}

.var-list .var-btn-row button {
  width: auto !important;
  font-size: 9px !important;
  height: 20px !important;
  padding: 1px 6px !important;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.var-list .var-btn-row button:hover     { background: var(--border); color: var(--text); }
.var-list .var-btn-row .vr-edit:hover   { background: rgba(59,130,246,.2); color: #60a5fa; border-color: rgba(59,130,246,.4); }
.var-list .var-btn-row .vr-delete       { color: #f87171; border-color: rgba(248,113,113,.3); }
.var-list .var-btn-row .vr-delete:hover { background: rgba(239,68,68,.2); }

/* Empty state */
.var-list-empty {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* Modal tab icon — stacked above label */
.rnd-mode-tab .vt-i {
  width: 16px;
  height: 16px;
  font-size: 9px;
  pointer-events: none;
}
.rnd-mode-tab.active .vt-i {
  background: rgba(255,255,255,.25) !important;
  color: #fff !important;
}

/* Readonly variable name in "edit row" modal mode */
.random-modal input[readonly] {
  opacity: 0.65;
  cursor: default;
  background: var(--secondary-bg, #f3f4f6);
}

/* === Random Modal === */
.random-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--modal-backdrop);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.random-modal.show { display: flex; }

.random-modal-content {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  width: 320px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.random-modal h4 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.random-modal label {
  display: block;
  margin: 8px 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.random-modal input,
.random-modal select {
  margin-top: 0;
}

/* === Random Modal — Mode Tabs === */
.rnd-mode-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 0 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.rnd-mode-tab {
  flex: 1;
  padding: 6px 4px 5px;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 5px;
  background: transparent;
  color: var(--secondary-text);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.rnd-mode-tab.active {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-color: var(--accent, #3b82f6);
}

/* === Random Modal — Pick List === */
.pick-value-row {
  display: flex;
  gap: 4px;
  margin-bottom: 5px;
  align-items: center;
}

.pick-value-row input {
  flex: 1;
  margin: 0;
  font-size: 12px;
}

.del-pick-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 15px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger, #ef4444);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.del-pick-btn:hover {
  background: var(--danger, #ef4444);
  color: #fff;
}

/* === Variables Table — Type Badge === */
.var-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 5px;
  vertical-align: middle;
  white-space: nowrap;
  pointer-events: none;
}

.var-type-badge.pick {
  background: var(--accent, #3b82f6);
  color: #fff;
}

.var-type-badge.rand {
  background: var(--warning, #f59e0b);
  color: #fff;
}

/* Variable value input becomes read-only when it holds a special format */
.variables-table input.var-value[readonly] {
  opacity: 0.75;
  cursor: default;
  background: var(--secondary-bg, #f3f4f6);
  font-style: italic;
  font-size: 11px;
}

/* === Unified List Item Styling === */
.list-item {
  padding: 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: var(--list-bg);
  display: flex;
  gap: 8px;
  align-items: center;
  border: 2px solid var(--border);
  transition: all 0.2s ease;
}

.list-item:hover {
  border-color: var(--primary);
  background: var(--secondary-bg);
}

.list-item-content {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.list-item-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.list-item-btn {
  width: auto !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  margin: 0 !important;
  flex: 0 0 auto;
  border-radius: 4px !important;
}

.list-item-btn.secondary {
  background: var(--secondary-bg);
  color: var(--text);
  border: 2px solid var(--border) !important;
  box-shadow: none !important;
}

.list-item-btn.secondary:hover:not(:disabled) {
  background: var(--primary);
  color: white;
  border-color: var(--primary) !important;
}

.list-item-btn.danger {
  background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
  color: white;
  border: none !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3) !important;
}

.list-item-btn.danger:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4) !important;
}

/* === Collapsible Cards === */
.card.collapsible h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  gap: 6px;
  padding: 4px 6px;
  margin: -4px -6px 6px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.card.collapsible h3:hover {
  background: var(--secondary-bg);
}

.card.collapsible h3:active {
  background: var(--border);
}

.card.collapsible .caret {
  font-size: 14px;
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--primary);
  opacity: 0.7;
}

.card.collapsible h3:hover .caret {
  opacity: 1;
}

.card.collapsible:not(.collapsed) .caret {
  transform: rotate(90deg);
  color: var(--primary);
  opacity: 1;
}

.card.collapsible.collapsed > *:not(h3) {
  display: none !important;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card.collapsible:not(.collapsed) > *:not(h3) {
  animation: fadeSlideIn 0.18s ease forwards;
}

/* === Nested Collapsible Sub-cards === */
.sub-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  margin: 8px 0;
  background: var(--secondary-bg);
}

.sub-card h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px;
  margin: -4px -4px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.sub-card h4:hover {
  background: var(--border);
}

.sub-card .sub-caret {
  font-size: 12px;
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--primary);
  opacity: 0.6;
}

.sub-card h4:hover .sub-caret {
  opacity: 1;
}

.sub-card:not(.collapsed) .sub-caret {
  transform: rotate(90deg);
  color: var(--primary);
  opacity: 1;
}

.sub-card.collapsed > *:not(h4) {
  display: none;
}

/* === Hidden Elements === */
.hidden-by-default {
  display: none;
}

/* === Action List Loading State === */
.action-loading {
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
  padding: 8px;
  opacity: 0.7;
  animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.4; }
  to   { opacity: 0.9; }
}

/* === Field Validation Error Message === */
.field-error {
  color: var(--danger);
  font-size: 11px;
  margin-top: 3px;
  animation: fadeSlideIn 0.15s ease forwards;
}

/* === Picked Selectors / Dragdrop Target Panel (shared) === */
#pickedSelectorsWrap,
#pickedDragdropTargetWrap {
  margin-top: 4px;
  flex-direction: column;
  gap: 4px;
}

#pickedSelectorsInfo,
#pickedDragdropTargetInfo {
  padding: 6px;
  background: var(--list-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  max-height: 100px;
  overflow-y: auto;
}

#pickedSelectorsInfo .selector-option,
#pickedDragdropTargetInfo .selector-option {
  cursor: pointer;
  padding: 2px 4px;
  margin: 2px 0;
  border-radius: 3px;
  transition: background 0.15s;
}

#pickedDragdropTargetInfo .selector-option:hover {
  background: var(--secondary-bg);
}

#clearPickedSelectorsBtn,
#clearDragdropTargetBtn {
  align-self: flex-end;
  font-size: 11px;
  padding: 2px 10px;
  height: 24px;
  border-radius: 4px;
  opacity: 0.75;
}

#clearPickedSelectorsBtn:hover:not(:disabled),
#clearDragdropTargetBtn:hover:not(:disabled) {
  opacity: 1;
  border-color: var(--danger);
  color: var(--danger);
  background: var(--bg);
}

/* === Dangerous Actions Separator === */
.danger-zone {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px dashed var(--danger);
  opacity: 0.6;
}

.danger-zone:hover {
  opacity: 1;
}

/* === Helper Text === */
.helper-text {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}

.helper-text.error {
  color: var(--danger);
}

/* === Child Condition collapsible === */
.child-cond-outer {
  border: 1px dashed var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.child-cond-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--secondary-bg);
  border: none;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: background .15s;
}

.child-cond-toggle:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--secondary-bg));
}

.child-cond-caret {
  font-size: 10px;
  transition: transform .2s;
  flex: 0 0 auto;
}

.child-cond-toggle[aria-expanded="true"] .child-cond-caret {
  transform: rotate(90deg);
}

.child-cond-subtitle {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}

.child-cond-badge {
  color: var(--primary);
  font-size: 10px;
  margin-left: auto;
  flex: 0 0 auto;
}

.child-cond-body {
  padding: 8px;
}

/* === Child Condition match mode radio pills === */
.cond-match-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  padding: 3px 10px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--secondary-bg);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.cond-match-label:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--secondary-bg));
  color: var(--primary);
}
.cond-match-label input[type="radio"] {
  accent-color: var(--primary);
  margin: 0;
  cursor: pointer;
}

/* === Main Content Visibility === */
.main-content {
  display: block;
}

.main-content.hidden {
  display: none;
}

/* === QUICK-BAR (persistent top bar) === */
.quick-bar {
  background: var(--card);
  border-bottom: 2px solid var(--border);
  padding: 8px 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.quick-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-bar-row + .quick-bar-row {
  margin-top: 6px;
}

.quick-bar select {
  margin: 0;
  padding: 5px 8px;
  font-size: 12px;
}

.quick-bar button {
  margin: 0;
  padding: 5px 10px;
  font-size: 12px;
  width: auto;
  flex: 0 0 auto;
}

.quick-bar .qb-status {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === TAB NAVIGATION === */
.tab-nav {
  display: flex;
  background: var(--card);
  padding: 0 4px;
}

.tab-btn {
  flex: 1;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0;
  white-space: nowrap;
}

.tab-btn:hover:not(:disabled) {
  color: var(--text);
  background: var(--secondary-bg);
  transform: none;
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: transparent;
}

.tab-btn.active:hover:not(:disabled) {
  background: transparent;
  transform: none;
}

.tab-btn.tab-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.tab-btn.tab-drag-over {
  background: var(--secondary-bg);
  box-shadow: inset 2px 0 0 var(--primary);
}

.tab-btn[draggable="true"] {
  cursor: grab;
}

/* === TAB PANELS === */
.tab-panel {
  display: none;
  padding: 10px 12px;
  position: relative;
}

.tab-panel.active {
  display: block;
}

/* === Hotkey Rows === */
.hotkey-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.hotkey-label {
  flex: 1;
  font-size: 12px;
  color: var(--text);
}

.hotkey-badge {
  font-family: ui-monospace, 'Segoe UI Mono', monospace;
  font-size: 11px;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--text);
  min-width: 64px;
  text-align: center;
  white-space: nowrap;
}

.hotkey-set-btn {
  width: auto !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  margin: 0 !important;
}

.hotkey-set-btn.capturing {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
  animation: pulse-border 1s ease infinite;
}

/* Disabled state for hotkeys requiring tab activation */
[data-requires-activation] {
  transition: opacity 0.25s ease;
}

body:not([data-activation="active"]) [data-requires-activation] {
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}

/* Hatch pattern on badge to reinforce "unavailable" without blur */
body:not([data-activation="active"]) [data-requires-activation] .hotkey-badge {
  background: repeating-linear-gradient(
    -45deg,
    var(--secondary-bg), var(--secondary-bg) 4px,
    var(--border) 4px, var(--border) 6px
  );
  color: var(--muted);
}

/* Hide Set button; JS adds aria-hidden + tabindex="-1" on the row */
body:not([data-activation="active"]) [data-requires-activation] .hotkey-set-btn {
  display: none;
}

/* Notice shown below hotkey list when not activated */
.activation-required-notice {
  display: none;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  align-items: center;
  gap: 6px;
}

body:not([data-activation="active"]) .activation-required-notice {
  display: flex;
}

@keyframes pulse-border {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* === Scroll Lock khi modal === */
body.modal-open {
  overflow: hidden;
}

/* === Playback Progress Bar === */
.playback-progress-wrap {
  display: none;
  margin-top: 4px;
}
.playback-progress-wrap.show { display: block; }
.playback-progress-bar {
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.playback-progress-fill {
  height: 100%; border-radius: 2px;
  background: var(--primary);
  transition: width 0.25s ease-out;
}

/* === Card Help Button === */
.card-help-btn {
  width: auto; flex: 0 0 auto; margin: 0;
  padding: 2px 8px; font-size: 12px; font-weight: 700;
  border-radius: 50%; min-width: 22px; height: 22px;
  line-height: 1; cursor: pointer;
  background: var(--secondary-bg); color: var(--muted);
  border: 1px solid var(--border);
}
.card-help-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.confirm-modal.show,
.condition-help-modal.show,
.random-modal.show {
  overscroll-behavior: contain;
}

/* === Custom Time Picker === */
.schedule-time-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.schedule-time-picker input[type="number"] {
  width: 54px;
  text-align: center;
  padding: 6px 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--secondary-bg);
  color: var(--text);
  outline: none;
  -webkit-appearance: textfield;
  appearance: textfield;
}
.schedule-time-picker input[type="number"]::-webkit-inner-spin-button {
  opacity: 0.5;
}
.schedule-time-picker input[type="number"]:focus {
  border-color: var(--accent, #4f8ef7);
}
.st-colon {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  user-select: none;
  margin: 0 -2px;
}
#stAmPm {
  font-size: 17px;
  font-weight: 700;
  padding: 6px 10px;
  width: auto;
  border-radius: 6px;
  margin-left: 2px;
  letter-spacing: 0.03em;
  align-self: stretch;
}

/* === Condition Help Modal === */
.condition-help-modal {
  display: flex;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--modal-backdrop);
  z-index: 2000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.condition-help-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.condition-help-modal .condition-help-content {
  transform: translateY(-8px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.condition-help-modal.show .condition-help-content {
  transform: translateY(0) scale(1);
}

.condition-help-content {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 10px;
  width: 456px;
  max-height: 576px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  overflow: hidden;
}

.condition-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}
.condition-help-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.condition-help-header button {
  width: auto;
  margin: 0;
  padding: 4px 10px;
  font-size: 12px;
}
#condLangToggle {
  font-weight: 600;
  min-width: 34px;
  letter-spacing: 0.02em;
}

.condition-help-body {
  overflow-y: auto;
  padding: 10px 14px 14px;
}

.ch-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--list-bg);
}
.ch-item:last-child { margin-bottom: 0; }

.ch-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ch-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.ch-badge-elem   { background: rgba(59,130,246,0.15); color: var(--primary); }
.ch-badge-text   { background: rgba(16,185,129,0.15); color: var(--success); }
.ch-badge-value  { background: rgba(139,92,246,0.15); color: var(--secondary); }
.ch-badge-url    { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.ch-badge-attr   { background: rgba(249,115,22,0.15);  color: #f97316; }

.ch-title { font-size: 13px; font-weight: 600; color: var(--text); }
.ch-desc { font-size: 12px; color: var(--muted); margin: 3px 0 6px; line-height: 1.5; }
.ch-fields { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ch-field {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--muted); background: var(--secondary-bg);
}
.ch-field.required { color: var(--text); border-color: var(--primary); }

.ch-example {
  background: var(--secondary-bg); border-radius: 6px; padding: 7px 10px;
  font-size: 11px; font-family: ui-monospace, 'Segoe UI Mono', monospace;
  color: var(--text); line-height: 1.6;
}
.ch-example .ex-label {
  font-size: 10px; color: var(--muted); font-family: system-ui, sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  display: block; margin-bottom: 3px;
}
.ch-example .ex-key   { color: var(--primary); }
.ch-example .ex-val   { color: var(--success); }
.ch-example .ex-note  { color: var(--muted); font-style: italic; }

/* === Confirm / Alert Modal === */
.confirm-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--modal-backdrop);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.confirm-modal.show { display: flex; }

.confirm-modal-content {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  width: 300px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.confirm-modal-content h4 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.confirm-modal-content p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* === Toast Notification === */
.toast {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  padding: 7px 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.toast-success { background: var(--success); color: #fff; }
.toast.toast-error   { background: var(--danger);  color: #fff; }
.toast.toast-info    { background: var(--primary);  color: #fff; }

/* Recording badge */
.recording-badge {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  padding: 3px 10px;
  border-radius: 10px;
  animation: pulse-text 1s ease infinite;
}
.recording-badge.show { display: inline-block; }

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Count badge on Preview button */
.count-badge {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  vertical-align: middle;
  min-width: 18px;
  text-align: center;
}

/* Step labels in Add Manual Action */
.step-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 8px 0 2px;
  padding: 0 2px;
}

.step-label.step-label-optional {
  color: var(--muted);
  font-weight: 600;
}

/* Thin separator before the first optional field */
.step-label.step-label-divider-top {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Recording top bar */
#recordingTopBar {
  display: none;
  background: linear-gradient(90deg, var(--danger) 0%, var(--danger-dark) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 5px 12px;
  animation: pulse-text 1.5s ease infinite;
  letter-spacing: 0.03em;
}
#recordingTopBar.show { display: block; }

/* Keyboard focus indicators */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Picker instruction bar */
#pickerInstructionBar {
  display: none;
  background: rgba(79, 70, 229, 0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 6px 12px;
}
#pickerInstructionBar.show { display: block; }

/* === Picker Active State === */
#pickElement.picker-active {
  background: var(--success) !important;
  color: #fff !important;
  border-color: var(--success-dark) !important;
}

/* === Switch-case row layout === */
.sw-case-row-edit {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--secondary-bg);
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 6px;
}
.sw-case-row-view {
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
}
.sw-case-label {
  font-size: 12px;
  color: #e879f9;
  font-weight: 600;
  min-width: 70px;
  white-space: nowrap;
}
.sw-case-target {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sw-case-btn {
  width: auto !important;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
}
.sw-inline-row {
  display: flex;
  gap: 5px;
  align-items: center;
}
.sw-inline-row-end {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}
.sw-edit-input {
  flex: 1;
  margin: 0 !important;
  font-size: 12px !important;
}
.sw-edit-btn {
  width: auto !important;
  margin: 0 !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
}
.sw-edit-btn-cancel {
  width: auto !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
}

/* === Paste row in action/sequence list === */
.action-paste-li {
  justify-content: center;
  cursor: default;
  gap: 6px;
}
.action-paste-btn {
  width: auto !important;
  font-size: 11px !important;
  margin: 0 !important;
}

/* === Loop Controls Row === */
.loop-controls-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

.loop-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 8px;
  padding: 3px 8px;
  flex: 0 0 auto;
}

.loop-chip-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  white-space: nowrap;
}

.loop-chip #loopCount {
  width: 42px;
  margin: 0;
  font-size: 12px;
  padding: 2px 5px;
  border-color: transparent;
  background: var(--card);
  border-radius: 5px;
}

.loop-chip-x {
  font-size: 11px;
  color: var(--primary);
  opacity: 0.7;
  font-weight: 600;
}

.loop-delay-lbl {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

.loop-delay-select {
  flex: 1;
  margin: 0;
  font-size: 12px;
  padding: 3px 6px;
}

.loop-delay-custom {
  flex: 1;
  margin: 0;
  font-size: 12px;
  padding: 3px 6px;
}

.loop-actions {
  display: flex;
  gap: 3px;
  flex: 0 0 auto;
}

.loop-action-btn {
  width: auto !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* === CSV Data-Driven Run — Group 2 UI === */

/* Format label */
.csv-format-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Feature 3: locked format warning row */
.csv-format-locked {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius: 8px;
  padding: 5px 8px;
}
.csv-format-lock-icon { font-size: 13px; flex: 0 0 auto; }
.csv-format-lock-text {
  flex: 1;
  font-size: 11px;
  color: var(--danger);
}
.csv-format-clear-btn {
  background: transparent;
  border: 1.5px solid var(--danger);
  border-radius: 6px;
  color: var(--danger);
  font-size: 11px;
  padding: 3px 9px !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap;
  flex: 0 0 auto;
}
.csv-format-clear-btn:hover {
  background: var(--danger);
  color: #fff;
  transform: none;
}

/* Feature 1: Progress wrap */
.csv-progress-wrap { margin-top: 8px; }

.csv-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.csv-prog-text {
  flex: 1;
  font-size: 11px;
  color: var(--muted);
}
.csv-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1.5px solid;
  flex: 0 0 auto;
}
.csv-badge-ok {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
.csv-badge-fail {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  opacity: 0.35;
  transition: opacity 0.2s;
}
.csv-badge-fail.has-fail { opacity: 1; }

.csv-dual-bar {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.csv-bar-ok {
  height: 100%;
  background: var(--success);
  transition: width 0.4s ease;
}
.csv-bar-fail {
  height: 100%;
  background: var(--danger);
  transition: width 0.4s ease;
}

/* Feature 4: Countdown */
.csv-countdown-wrap { margin-top: 5px; }
.csv-cd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.csv-countdown-text {
  font-size: 11px;
  color: var(--secondary);
  font-style: italic;
}
.csv-cd-next-label {
  font-size: 10px;
  color: var(--muted);
}
.csv-cd-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.csv-cd-bar {
  height: 100%;
  width: 100%;
  background: var(--secondary);
  border-radius: 2px;
}

/* Feature 2: Split stop button — height matches Start button */
.csv-action-row { align-items: stretch; }
.csv-action-row > button { margin-top: 0; }

.csv-stop-split {
  display: flex;
  align-self: stretch;
  border: 2px solid var(--danger);
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
}
.csv-stop-split button {
  background: var(--card);
  color: var(--danger);
  border: none;
  border-radius: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 600;
  white-space: nowrap;
  height: 100%;
}
.csv-stop-split button:first-child {
  border-right: 1.5px solid var(--danger);
}
.csv-stop-split button:hover {
  background: var(--danger);
  color: #fff;
  transform: none;
}

/* === Screenshot Grid (legacy, kept for compatibility) === */
.screenshot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.screenshot-grid button {
  font-size: 11px;
  padding: 8px 4px;
  margin: 0;
}

/* === Capture Tab — Version A (pill tabs + grouped rows) === */
.capture-tab-nav {
  display: flex;
  gap: 3px;
  padding: 8px 0 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.capture-tab-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  margin: 0;
  width: auto;
  transition: all 0.12s;
}

.capture-tab-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
  transform: none;
}

.capture-tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.capture-tab-btn.active:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: none;
}

.capture-group-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}

.capture-group-row:last-child {
  border-bottom: none;
}

.capture-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 56px;
  flex-shrink: 0;
}

.capture-btn-row {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}

.cap-save-btn {
  flex: 1;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1.5px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  color: var(--primary);
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  transition: background 0.12s, border-color 0.12s;
}

.cap-save-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
  transform: none;
}

.cap-edit-btn {
  flex: 1;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1.5px dashed color-mix(in srgb, var(--secondary) 50%, transparent);
  background: color-mix(in srgb, var(--secondary) 6%, transparent);
  color: var(--secondary);
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, border-style 0.12s;
}

.cap-edit-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--secondary) 13%, transparent);
  border-color: var(--secondary);
  border-style: solid;
  transform: none;
}

.capture-tools-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 0 0;
  border-top: 2px solid var(--border);
  margin-top: 4px;
}

.btn-img-editor {
  font-size: 11px;
  margin: 0;
  padding: 5px 12px;
  border: 1.5px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.15s;
  text-align: center;
}
.btn-img-editor:hover {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Image Editor drop zone */
.img-editor-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 22px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--secondary-bg);
  margin-bottom: 10px;
}
.img-editor-drop-zone:hover,
.img-editor-drop-zone.drag-over {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.img-editor-dz-icon { font-size: 28px; margin-bottom: 7px; }
.img-editor-dz-title { font-size: 13px; font-weight: 700; color: var(--text); }
.img-editor-dz-sub { font-size: 11px; color: var(--muted); margin-top: 5px; }
.img-editor-dz-sub kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  background: var(--secondary-bg);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: monospace;
}


.settings-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 12px 0 6px;
}

.settings-section-title:first-child {
  margin-top: 0;
}

/* === Fixed Header (Status + Tabs) === */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--card);
  border-bottom: 2px solid var(--border);
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  min-height: 30px;
}

/* === Now Playing bar === */
.now-playing-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--success) 10%, var(--card));
  border-bottom: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
  cursor: pointer;
  user-select: none;
  min-height: 28px;
  transition: background .15s;
}

.now-playing-bar:hover {
  background: color-mix(in srgb, var(--success) 18%, var(--card));
}

.now-playing-bar.switched {
  background: color-mix(in srgb, var(--secondary) 12%, var(--card));
  border-bottom-color: color-mix(in srgb, var(--secondary) 30%, var(--border));
}

.now-playing-bar.switched:hover {
  background: color-mix(in srgb, var(--secondary) 20%, var(--card));
}

.now-playing-bar.csv-done {
  background: color-mix(in srgb, var(--success) 8%, var(--card));
  border-bottom-color: color-mix(in srgb, var(--success) 25%, var(--border));
  opacity: 0.85;
}

.now-playing-bar.csv-done:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--success) 14%, var(--card));
}

.now-playing-icon {
  font-size: 11px;
  color: var(--success);
  flex: 0 0 auto;
}

.now-playing-bar.switched .now-playing-icon {
  color: var(--secondary);
}

.now-playing-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing-step {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

.now-playing-caret {
  font-size: 11px;
  color: var(--muted);
  flex: 0 0 auto;
  transition: transform .2s;
}

.now-playing-bar[aria-expanded="true"] .now-playing-caret {
  transform: rotate(180deg);
}

/* === Playback mini panel === */
.playback-panel {
  background: var(--card);
  border-bottom: 2px solid var(--border);
  padding: 8px 10px;
  animation: pb-panel-in .15s ease;
}

@keyframes pb-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pb-panel-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.pb-panel-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  width: 62px;
  flex: 0 0 62px;
}

.pb-panel-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-panel-orig {
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
}

.pb-panel-progress {
  height: 5px;
  border-radius: 3px;
  background: var(--secondary-bg);
  overflow: hidden;
  margin: 6px 0 4px;
}

.pb-panel-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--success);
  transition: width .3s ease;
}

.pb-panel-fill-csv {
  background: var(--primary);
}

.pb-panel-csv-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pb-panel-csv-stop {
  display: flex;
  border: 2px solid var(--danger);
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.pb-panel-csv-stop button {
  flex: 1;
  background: var(--card);
  color: var(--danger);
  border: none;
  border-radius: 0;
  margin: 0 !important;
  padding: 5px 0 !important;
  font-size: 12px !important;
  font-weight: 600;
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
}
.pb-panel-csv-stop button:first-child {
  border-right: 1.5px solid var(--danger);
}
.pb-panel-csv-stop button:hover {
  background: var(--danger);
  color: #fff;
  transform: none;
}

.status-bar .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 8px;
  transition: background 0.2s;
}

.status-bar .status-dot.active {
  background: var(--success);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.status-bar .status-dot.inactive {
  background: var(--danger);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.status-bar .status-dot.recording {
  background: var(--danger);
  animation: pulse-dot 1s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
  50% { opacity: 0.4; box-shadow: 0 0 2px rgba(239, 68, 68, 0.2); }
}

.status-bar .status-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-bar .status-spacer {
  flex: 1;
}

.status-bar .status-progress {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.status-bar .status-scenario-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.status-bar .status-scenario-name.switched {
  color: var(--secondary);
  border-color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
}

.status-bar .status-scenario-name.switched::before {
  content: '→ ';
  opacity: 0.7;
}

.status-bar button {
  margin: 0;
  padding: 3px 8px;
  font-size: 10px;
  width: auto;
  flex: 0 0 auto;
}

.status-bar .icon-btn {
  background: transparent;
  border: none;
  padding: 2px 6px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
  line-height: 1;
}

.status-bar .icon-btn:hover {
  background: var(--secondary-bg);
  color: var(--text);
  transform: none;
}

/* === Resume Banner === */
.resume-banner {
  display: none;
  position: fixed;
  bottom: 48px;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1e40af;
  color: #fff;
  padding: 10px 14px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}
.resume-banner-msg { flex: 1; }
.resume-banner-btn {
  background: #22c55e;
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  width: auto;
  margin: 0;
}
.resume-banner-dismiss {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  width: auto;
  margin: 0;
}

/* === Tab panel entrance animation === */
@keyframes tabPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-panel.active {
  animation: tabPanelIn 0.18s ease-out;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== EXPORT BOOKMARKLET MODAL ===== */

.export-bm-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--modal-backdrop);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 10px;
}

.export-bm-modal.show {
  display: flex;
}

.export-bm-content {
  background: var(--card);
  border-radius: 12px;
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

/* ── Header ── */
.export-bm-header {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.export-bm-accent-bar {
  height: 3px;
}

.export-bm-accent-js {
  background: linear-gradient(90deg, #f59e0b, #ef4444 50%, #f59e0b);
}

.export-bm-accent-py {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #3b82f6);
}

.export-bm-header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.export-bm-lang-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.export-bm-lang-badge-js {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  border: 1.5px solid rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .export-bm-lang-badge-js {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.export-bm-lang-badge-py {
  background: rgba(59, 130, 246, 0.1);
  color: #1e40af;
  border: 1.5px solid rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .export-bm-lang-badge-py {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}

.export-bm-header-text {
  flex: 1;
  min-width: 0;
}

.export-bm-header-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.export-bm-header-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.export-bm-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.export-bm-icon-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border) !important;
  background: var(--secondary-bg) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: all 0.15s !important;
  box-shadow: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.export-bm-icon-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: none !important;
}

.export-bm-icon-btn-danger:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

/* ── Tabs (pill style) ── */
.export-bm-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--secondary-bg);
}

.export-bm-tab {
  padding: 5px 12px !important;
  border-radius: 20px !important;
  border: 1.5px solid transparent !important;
  font-size: 11px !important;
  font-weight: 600;
  cursor: pointer;
  background: transparent !important;
  color: var(--muted) !important;
  transition: all 0.15s !important;
  width: auto !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
}

.export-bm-tab:hover {
  color: var(--text) !important;
  background: var(--card) !important;
  border-color: var(--border) !important;
  transform: none !important;
}

.export-bm-tab.active {
  background: var(--card) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2) !important;
}

.export-bm-tab-count {
  display: inline-block;
  margin-left: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary);
  border-radius: 8px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
}

/* ── Warning bar ── */
.export-bm-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(234, 157, 0, 0.08);
  border-bottom: 1px solid rgba(234, 157, 0, 0.2);
  color: #b45309;
  font-size: 11px;
  padding: 7px 14px;
  flex-shrink: 0;
  line-height: 1.5;
}

[data-theme="dark"] .export-bm-warning {
  background: rgba(234, 157, 0, 0.06);
  color: #f0a800;
}

.export-bm-warning-icon {
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Tab panel ── */
.export-bm-tab-panel {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Code toolbar ── */
.export-bm-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 5px 14px;
  background: var(--code-toolbar-bg);
  border-bottom: 1px solid var(--code-toolbar-border);
  flex-shrink: 0;
}

.export-bm-code-label {
  font-size: 10px;
  color: var(--code-toolbar-label);
  font-family: 'Consolas', monospace;
}

.export-bm-code-toolbar-btns {
  display: flex;
  gap: 4px;
}

.export-bm-code-toolbar-btn {
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid var(--code-toolbar-btn-border) !important;
  background: var(--code-toolbar-btn-bg) !important;
  color: var(--code-toolbar-btn-text) !important;
  font-size: 10px !important;
  cursor: pointer;
  font-family: monospace;
  transition: all 0.12s !important;
  width: auto !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.export-bm-code-toolbar-btn:hover {
  background: var(--secondary-bg) !important;
  color: var(--text) !important;
  transform: none !important;
}

/* ── Code block ── */
.export-bm-code {
  margin: 0;
  padding: 12px 14px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  color: var(--code-text);
  background: var(--code-bg);
  min-height: 180px;
  max-height: 300px;
  overflow-y: auto;
}

.export-bm-code::-webkit-scrollbar { width: 6px; height: 6px; }
.export-bm-code::-webkit-scrollbar-track { background: transparent; }
.export-bm-code::-webkit-scrollbar-thumb { background: var(--code-toolbar-border); border-radius: 3px; }

/* ── Variables — row layout ── */
.export-bm-no-vars {
  padding: 24px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.export-bm-var-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.export-bm-var-row:hover {
  background: var(--secondary-bg);
}

.export-bm-var-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.export-bm-var-icon.static { background: rgba(59, 130, 246, 0.1); }
.export-bm-var-icon.rand   { background: rgba(245, 130, 32, 0.1); }

.export-bm-var-name {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  font-weight: 600;
  flex: 0 0 100px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.export-bm-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.export-bm-badge.static {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary);
}

.export-bm-badge.rand {
  background: rgba(245, 130, 32, 0.12);
  color: #e07800;
}

[data-theme="dark"] .export-bm-badge.rand { color: #f0a032; }

.export-bm-preview {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 11px;
  color: var(--muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Settings tab ── */
.export-bm-setting-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}

.export-bm-setting-label {
  flex: 1;
  font-size: 12px;
  color: var(--text);
}

.export-bm-setting-label small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}

.export-bm-setting-input {
  width: 80px !important;
  flex: 0 0 80px;
  text-align: right;
  padding: 5px 8px !important;
  border-radius: 7px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--secondary-bg) !important;
  font-size: 12px !important;
  color: var(--text) !important;
  font-family: 'Consolas', monospace;
  margin: 0 !important;
  box-shadow: none !important;
}

.export-bm-setting-select {
  padding: 5px 8px;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  background: var(--secondary-bg);
  font-size: 12px;
  color: var(--text);
  flex-shrink: 0;
}

.export-bm-setting-unit {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.export-bm-regen-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 10px 14px;
  padding: 7px;
  border-radius: 8px;
  border: 1.5px dashed var(--border) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s !important;
  box-shadow: none !important;
}

.export-bm-regen-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(59, 130, 246, 0.04) !important;
  transform: none !important;
}

/* ── Stats pills row ── */
.export-bm-stats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  background: var(--secondary-bg);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.export-bm-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.export-bm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-blue   { background: #3b82f6; }
.dot-green  { background: #22c55e; }
.dot-orange { background: #f59e0b; }

/* ── Footer ── */
.export-bm-footer {
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.export-bm-footer-spacer { flex: 1; }

.export-bm-footer-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.export-bm-nf-btn {
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s !important;
  border: 1.5px solid var(--border) !important;
  background: var(--secondary-bg) !important;
  color: var(--text) !important;
  width: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.export-bm-nf-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: none !important;
}

.export-bm-nf-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

.export-bm-nf-btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

@keyframes export-copy-pop {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.07); }
}

.export-bm-nf-btn.copied {
  animation: export-copy-pop 0.3s ease !important;
  background: var(--success) !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

.export-bm-icon-btn.copied {
  background: var(--success) !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

/* === File label styled as button (mirrors button + button.secondary) === */
.file-label-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 2px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  background: var(--card);
  color: var(--text);
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  line-height: normal;
  text-align: center;
}

.file-label-btn:hover {
  background: var(--secondary-bg);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.file-label-btn:active {
  transform: translateY(0);
}

.file-label-btn input[type="file"] {
  display: none;
}

/* === LOCK OVERLAY (Variant B — frosted blur) === */
.lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  background: rgba(255, 255, 255, 0.52);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

body[data-active-tab="tabRecord"] #lockOverlayRecord.is-visible,
body[data-active-tab="tabData"] #lockOverlayData.is-visible {
  opacity: 1;
  pointer-events: all;
}

.lock-overlay-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 30px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  max-width: 248px;
  width: 100%;
}

.lock-overlay-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 10px;
}

.lock-overlay-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.lock-overlay-sub {
  margin: 0 0 18px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.lock-overlay-activate-btn {
  display: inline-block;
  padding: 7px 22px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.lock-overlay-activate-btn:hover { opacity: 0.82; }

[data-theme="dark"] .lock-overlay {
  background: rgba(0, 0, 0, 0.48);
}

/* === Export Code Card (Data tab) === */
.export-code-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.export-code-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 10px 12px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  width: 100%;
  margin: 0 !important;
  box-shadow: none !important;
}

.export-code-btn:hover { transform: translateY(-1px); }
.export-code-btn:active { transform: translateY(0); }

.export-code-icon {
  font-size: 24px;
  line-height: 1;
}

.export-code-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.export-code-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.export-code-desc {
  font-size: 10px;
  opacity: 0.65;
  line-height: 1.2;
}

/* JS = amber */
.export-code-js {
  border-color: rgba(217, 119, 6, 0.3);
  background: rgba(245, 158, 11, 0.06);
  color: #92400e !important;
}
.export-code-js:hover {
  background: rgba(245, 158, 11, 0.13) !important;
  border-color: rgba(217, 119, 6, 0.5);
}
[data-theme="dark"] .export-code-js {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.06);
}
[data-theme="dark"] .export-code-js:hover {
  background: rgba(251, 191, 36, 0.12) !important;
}

/* PY = blue */
.export-code-py {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(59, 130, 246, 0.06);
  color: #1d4ed8 !important;
}
.export-code-py:hover {
  background: rgba(59, 130, 246, 0.13) !important;
  border-color: rgba(59, 130, 246, 0.45);
}
[data-theme="dark"] .export-code-py {
  color: #60a5fa !important;
  border-color: rgba(96, 165, 250, 0.25);
  background: rgba(96, 165, 250, 0.06);
}
[data-theme="dark"] .export-code-py:hover {
  background: rgba(96, 165, 250, 0.12) !important;
}

/* === Export modal — top accent strip & lang chip === */
#exportBmModal .export-bm-content {
  border-top: 3px solid #d97706;
}

/* Python modal tabs — same pill style as .export-bm-tab */
.export-py-tab {
  padding: 5px 12px !important;
  border-radius: 20px !important;
  border: 1.5px solid transparent !important;
  font-size: 11px !important;
  font-weight: 600;
  cursor: pointer;
  background: transparent !important;
  color: var(--muted) !important;
  transition: all 0.15s !important;
  width: auto !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
}

.export-py-tab:hover {
  color: var(--text) !important;
  background: var(--card) !important;
  border-color: var(--border) !important;
  transform: none !important;
}

.export-py-tab.active {
  background: var(--card) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2) !important;
}

/* ── Tab count — warn variant (orange) ── */
.export-bm-tab-count.warn {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}
[data-theme="dark"] .export-bm-tab-count.warn { color: #fbbf24; }

/* ── Stats dot — red ── */
.dot-red { background: #ef4444; }

/* ───────────────────────────────────────────────
   ACTIONS REVIEW TAB
─────────────────────────────────────────────── */

/* Summary bar */
.export-bm-act-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--secondary-bg);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.export-bm-act-sum-label {
  font-size: 10px;
  color: var(--muted);
  margin-right: 2px;
}

.export-bm-act-sum-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid transparent;
}

.act-sum-ok   { background: rgba(34,197,94,.12);  color: #15803d; border-color: rgba(34,197,94,.2); }
.act-sum-skip { background: rgba(245,158,11,.12); color: #b45309; border-color: rgba(245,158,11,.2); }
.act-sum-warn { background: rgba(239,68,68,.12);  color: #b91c1c; border-color: rgba(239,68,68,.15); }
[data-theme="dark"] .act-sum-ok   { color: #4ade80; }
[data-theme="dark"] .act-sum-skip { color: #fbbf24; }
[data-theme="dark"] .act-sum-warn { color: #f87171; }

/* Action row */
.export-bm-action-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
  min-height: 34px;
}

.export-bm-action-row:last-child { border-bottom: none; }
.export-bm-action-row:hover      { background: var(--secondary-bg); }
.export-bm-action-row.row-skip   { opacity: 0.55; }
.export-bm-action-row.row-warn   { background: rgba(239,68,68,.03); }

/* Step number badge */
.export-bm-action-step {
  min-width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 3px;
}

/* Action type badge */
.export-bm-action-type {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 72px;
  justify-content: center;
}

.abt-nav        { background: rgba(59,130,246,.12);  color: #1d4ed8; }
.abt-click      { background: rgba(99,102,241,.12);  color: #4338ca; }
.abt-input      { background: rgba(6,182,212,.12);   color: #0e7490; }
.abt-hover      { background: rgba(20,184,166,.12);  color: #0f766e; }
.abt-wait       { background: rgba(107,114,128,.12); color: #4b5563; }
.abt-screenshot { background: rgba(168,85,247,.12);  color: #7e22ce; }
.abt-script     { background: rgba(239,68,68,.12);   color: #b91c1c; }
.abt-condition  { background: rgba(234,179,8,.12);   color: #854d0e; }
.abt-dragdrop   { background: rgba(249,115,22,.12);  color: #c2410c; }
.abt-readdom    { background: rgba(34,197,94,.12);   color: #15803d; }

[data-theme="dark"] .abt-nav        { color: #60a5fa; }
[data-theme="dark"] .abt-click      { color: #a5b4fc; }
[data-theme="dark"] .abt-input      { color: #22d3ee; }
[data-theme="dark"] .abt-hover      { color: #2dd4bf; }
[data-theme="dark"] .abt-screenshot { color: #c084fc; }
[data-theme="dark"] .abt-script     { color: #f87171; }
[data-theme="dark"] .abt-condition  { color: #fcd34d; }
[data-theme="dark"] .abt-dragdrop   { color: #fb923c; }
[data-theme="dark"] .abt-readdom    { color: #4ade80; }

/* Action description */
.export-bm-action-desc {
  flex: 1;
  font-family: monospace;
  font-size: 10px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Action status badge */
.export-bm-action-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.ast-ok   { background: rgba(34,197,94,.1);  color: #15803d; }
.ast-skip { background: rgba(245,158,11,.1); color: #b45309; }
.ast-warn { background: rgba(239,68,68,.1);  color: #b91c1c; }
[data-theme="dark"] .ast-ok   { color: #4ade80; }
[data-theme="dark"] .ast-skip { color: #fbbf24; }
[data-theme="dark"] .ast-warn { color: #f87171; }

/* ── URL auto-fill badge (Selenium Settings tab) ── */
.export-bm-url-from-tab {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(34,197,94,.1);
  color: #15803d;
  border: 1px solid rgba(34,197,94,.25);
  flex-shrink: 0;
  white-space: nowrap;
}
[data-theme="dark"] .export-bm-url-from-tab {
  color: #4ade80;
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.2);
}

/* ===== HIGHLIGHT TAB ===== */

/*
 * ── GLOBAL CSS TRAPS — đọc trước khi thêm element mới vào HL tab ──────────
 *
 * Ba rules toàn cục bên trên ảnh hưởng MỌI button/input/select trong file:
 *
 *  ① button, input, select {
 *       width: 100%;          ← button/select chiếm toàn hàng, đẩy siblings ra
 *       margin-top: 6px;      ← tạo khoảng cách thừa trong flex row
 *       padding: 8px 10px;    ← padding quá lớn cho compact UI
 *       border: 2px solid var(--border);
 *    }
 *
 *  ② button {
 *       background: var(--primary);   ← mọi button mặc định màu xanh
 *       color: white;
 *    }
 *
 *  ③ button:hover:not(:disabled) {
 *       background: var(--primary-dark);     ← hover → xanh đậm
 *       border-color: var(--primary-dark);
 *       transform: translateY(-1px);         ← hover → nhấc lên
 *    }
 *
 * ── SCOPED RESET (tự động cho mọi button/input/select trong .card của HL tab):
 *    Dùng :where() → specificity 0,0,1 (element only).
 *    Đủ để beat trap ① (cùng specificity 0,0,1, nhưng khai báo SAU nên thắng
 *    theo cascade).  Bất kỳ .hl-* class rule nào (≥0,1,0) sẽ tự ghi đè.
 * ────────────────────────────────────────────────────────────────────────────
 *
 * CHECKLIST khi thêm button/input/select MỚI vào HL tab:
 *   button  → ① width/margin OK (reset bên dưới xử lý)
 *             ② PHẢI khai báo background + color trong base rule
 *             ③ PHẢI khai báo background + transform:none trong :hover rule
 *             (ngoại lệ: .hl-pattern-add-btn là primary button, giữ nguyên)
 *   input/select → ① width/margin OK (reset bên dưới xử lý)
 *                  Nếu dùng flex: thêm min-width:0 để tránh overflow
 */
:where(#tabHighlight .card) button,
:where(#tabHighlight .card) select,
:where(#tabHighlight .card) input:not([type="checkbox"]) {
  width: auto;
  min-width: 0;
  margin-top: 0;
}

/* ── Header: mode pill + export + toggle ── */
.hl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.hl-mode-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 20px;
  border: 1.5px solid color-mix(in srgb, var(--success) 30%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  transition: background 0.2s, border-color 0.2s;
  min-width: 0;
}
.hl-mode-pill--off {
  border-color: var(--border);
  background: var(--secondary-bg);
}
.hl-mode-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  animation: hl-pulse 2s ease-in-out infinite;
}
.hl-mode-pill--off .hl-mode-dot {
  background: var(--muted);
  animation: none;
}
@keyframes hl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 40%, transparent); }
  50%       { box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 0%, transparent); }
}
.hl-mode-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  white-space: nowrap;
}
.hl-mode-pill--off .hl-mode-label { color: var(--muted); }
.hl-export-btn {
  flex-shrink: 0;
  width: auto;
  margin-top: 0;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hl-export-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  transform: none;
}
/* toggle switch (unchanged) */
.hl-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.hl-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.hl-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border);
  border-radius: 10px;
  transition: background 0.2s;
}
.hl-toggle-slider::before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.hl-toggle-switch input:checked + .hl-toggle-slider { background: var(--success); }
.hl-toggle-switch input:checked + .hl-toggle-slider::before { transform: translateX(16px); }
.hl-toggle-switch:focus-within .hl-toggle-slider {
  outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: 1px;
}

/* ── Stats grid (3 separate raised pills) ── */
.hl-stats-grid {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.hl-stat-pill {
  flex: 1;
  text-align: center;
  padding: 7px 4px 6px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--hl-pill-bg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hl-stat-pill:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 10%, transparent);
}
.hl-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hl-stat-lbl {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}
.hl-stat-colorbar {
  display: flex;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
  gap: 1px;
}
.hl-stat-colorbar-seg { border-radius: 1px; }

/* ── Page context card (current tab) ── */
.hl-page-ctx {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--hl-inner-bg);
  cursor: pointer;
  margin-bottom: 5px;
  transition: border-color 0.15s;
}
.hl-page-ctx:hover { border-color: var(--primary); }
.hl-page-favicon {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}
.hl-page-domain {
  flex: 1;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hl-page-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  background: var(--primary);
  color: white;
  border-radius: 10px;
  padding: 1px 7px;
}

/* ── Other pages row (select only) ── */
.hl-page-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.hl-url-select {
  flex: 1;
  width: auto;
  min-width: 0;
  margin-top: 0;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--secondary-bg);
}
.hl-url-clear-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 0;
  padding: 0;
  font-size: 13px;
  border-radius: 7px;
  line-height: 1;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hl-url-clear-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  transform: none;
}

/* ── Unified search + color filter (one row) ── */
.hl-search-filter {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px 4px 10px;
  background: var(--secondary-bg);
  margin-bottom: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hl-search-filter:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 10%, transparent);
}
.hl-search-icon {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  line-height: 1;
}
.hl-search {
  flex: 1;
  width: auto;
  margin-top: 0;
  padding: 3px 0;
  font-size: 11px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  box-shadow: none;
}
.hl-search:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
.hl-search::placeholder {
  color: var(--muted);
  opacity: 0.65;
  font-size: 11px;
}
/* ── Inline color filter chips ── */
.hl-filter-row {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.hl-pill-all {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0;
}
.hl-pill-all:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  transform: none;
}
.hl-pill-all.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
.hl-pill-all.active:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}
/* keep swatch-divider for any legacy usage */
.hl-swatch-divider {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
}
.hl-swatches {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hl-swatch {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  outline: none;
  margin-top: 0;
  padding: 0;
}
/* custom props store the swatch color so hover and active rules can reference it */
.hl-swatch[data-color="yellow"] { background: #fde047; --swatch-bg: #fde047; --swatch-ring: #ca8a04; }
.hl-swatch[data-color="green"]  { background: #86efac; --swatch-bg: #86efac; --swatch-ring: #16a34a; }
.hl-swatch[data-color="pink"]   { background: #f9a8d4; --swatch-bg: #f9a8d4; --swatch-ring: #db2777; }
.hl-swatch[data-color="blue"]   { background: #93c5fd; --swatch-bg: #93c5fd; --swatch-ring: #3b82f6; }
.hl-swatch[data-color="orange"] { background: #fdba74; --swatch-bg: #fdba74; --swatch-ring: #ea580c; }
.hl-swatch:hover:not(:disabled) {
  background: var(--swatch-bg);
  border-color: transparent;
  color: transparent;
  transform: scale(1.18);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.hl-swatch.active {
  background: var(--swatch-bg);
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--swatch-ring);
  transform: scale(1.08);
}
.hl-swatch-badge:empty { display: none; }
.hl-swatch-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 2px;
  pointer-events: none;
  transition: border-color 0.15s;
}
.hl-swatch.active .hl-swatch-badge {
  border-color: var(--swatch-ring);
  color: var(--primary);
}

/* ── Tab panel layout ── */
#tabHighlight.active {
  height: calc(600px - var(--header-h, 72px));
  overflow-y: auto;
  overflow-x: hidden;
}
#tabHighlight.active .main-content {
  display: flex;
  flex-direction: column;
}
#tabHighlight.active .card:first-child {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: visible;
  margin-bottom: 10px;
}
#tabHighlight.active .hl-pattern-card {
  flex-shrink: 0;
  margin-bottom: 0;
}

/* ── Fixed-height list slot (empty state + list share this space) ── */
.hl-list-slot {
  height: 210px;
  flex-shrink: 0;
  overflow: hidden;
}

/* ── Empty state ── */
.hl-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 12px;
  color: var(--muted);
  font-size: 12px;
}
.hl-empty-icon {
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.4;
}

/* ── Highlight list ── */
.hl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.hl-list::-webkit-scrollbar { display: block; width: 5px; }
.hl-list::-webkit-scrollbar-track { background: transparent; }
.hl-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.hl-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── List items (accent bar + excerpt + hover actions) ── */
.hl-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px 8px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--secondary-bg);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.hl-list-item:hover {
  background: var(--card);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.hl-list-accent {
  width: 3px;
  min-height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
  margin-top: 1px;
}
.hl-list-body {
  flex: 1;
  min-width: 0;
}
.hl-list-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.hl-list-excerpt {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hl-list-excerpt mark {
  background: transparent;
  font-weight: 600;
  color: var(--text);
  padding: 0;
}
.hl-list-meta {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hl-list-meta-sep { opacity: 0.4; }
.hl-list-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
  align-items: flex-start;
  padding-top: 1px;
}
.hl-list-item:hover .hl-list-actions { opacity: 1; }
.hl-list-del {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  font-family: inherit;
  margin-top: 0;
  padding: 0;
}
.hl-list-del:hover { background: var(--danger); color: white; transform: none; }
.hl-list-item--remote {
  cursor: default;
  opacity: 0.85;
}

/* ── Pattern card ── */
.hl-pattern-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}
.hl-pattern-icon {
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}
.hl-pattern-title {
  flex: 1;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hl-pattern-caret {
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.15s;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--secondary-bg);
  flex-shrink: 0;
}
.hl-pattern-caret--open { transform: rotate(180deg); }
.hl-pattern-body {
  margin-top: 8px;
}
.hl-pattern-hint {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.5;
  padding: 6px 8px;
  background: var(--secondary-bg);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.hl-pattern-hint code {
  font-size: 10px;
  background: var(--card);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: monospace;
}
.hl-pattern-input-row {
  display: flex;
  gap: 5px;
  margin-bottom: 6px;
}
.hl-pattern-input {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-top: 0;
  padding: 5px 8px;
  font-size: 11px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--secondary-bg);
  color: var(--text);
  font-family: monospace;
  transition: border-color 0.12s;
}
.hl-pattern-input:focus {
  outline: none;
  border-color: var(--primary);
}
.hl-pattern-add-btn {
  width: auto;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.hl-pattern-add-btn:hover { background: var(--primary-dark); }
.hl-pattern-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hl-pattern-empty {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
}
.hl-pattern-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--secondary-bg);
}
.hl-pattern-item-text {
  flex: 1;
  font-size: 10px;
  font-family: monospace;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-pattern-wildcard { color: var(--primary); font-weight: 700; }
.hl-pattern-item-count {
  font-size: 9px;
  font-weight: 600;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hl-pattern-item-del {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  font-family: inherit;
  margin-top: 0;
  padding: 0;
}
.hl-pattern-item-del:hover { background: var(--danger); color: white; }

/* ── Copy-all button in pattern header ── */
.hl-pattern-copy-all {
  width: auto;
  margin-top: 0;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}
.hl-pattern-copy-all:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: none;
}

/* ── Quick-insert template chips ── */
.hl-pattern-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.hl-tpl-chip {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-top: 0;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.hl-tpl-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  transform: none;
}

/* ── Validation message ── */
.hl-val-msg {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 5px;
  margin-bottom: 5px;
  border-left: 3px solid currentColor;
}
.hl-val-msg--success { color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
.hl-val-msg--warn    { color: #f59e0b; background: color-mix(in srgb, #f59e0b 8%, transparent); }
.hl-val-msg--error   { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }

/* ── Test URL section ── */
.hl-test-section {
  margin-bottom: 6px;
}
.hl-test-result {
  font-size: 10px;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 5px;
  display: none;
}
.hl-test-result:not(:empty) { display: block; }
.hl-test-result--match {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
.hl-test-result--no-match {
  color: var(--muted);
  background: var(--secondary-bg);
}

/* ── Copy button in highlight list item ── */
.hl-list-copy {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  font-family: inherit;
  margin-top: 0;
  padding: 0;
}
.hl-list-copy:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); transform: none; }

/* ══════════════════════════════════════════
   URL PATTERN BUILDER (from current tab)
   ══════════════════════════════════════════ */
.hl-url-builder {
  margin-bottom: 7px;
}

/* Collapsed trigger button — shows tab hostname */
.hl-builder-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-top: 0;
  padding: 6px 9px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--hl-inner-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.12s, color 0.12s;
}
.hl-builder-trigger:hover { border-color: var(--primary); color: var(--text); transform: none; }
.hl-builder-trigger.open  { border-color: var(--primary); color: var(--text); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.hl-builder-trigger-icon  { font-size: 12px; flex-shrink: 0; }
.hl-builder-trigger-host  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-builder-trigger-caret { font-size: 9px; flex-shrink: 0; transition: transform 0.15s; }
.hl-builder-trigger.open .hl-builder-trigger-caret { transform: rotate(180deg); }

/* Expanded panel */
.hl-builder-panel {
  padding: 8px 9px 9px;
  border: 1.5px solid var(--primary);
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: var(--hl-inner-bg);
}

/* Hint row with inline sample chips */
.hl-builder-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ── Segment chips ── */
.hl-builder-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  margin-bottom: 7px;
  min-height: 24px;
}
.hl-seg-sep {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.45;
  font-family: monospace;
  flex-shrink: 0;
  user-select: none;
}
.hl-seg {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  font-family: monospace;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.1s;
  user-select: none;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Domain — always literal, not clickable */
.hl-seg--domain {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
  color: var(--primary);
  cursor: default;
  font-weight: 600;
}
/* Exact: blue solid */
.hl-seg--exact {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
}
.hl-seg--exact:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); transform: none; }
/* Wildcard: amber dashed */
.hl-seg--any {
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  border-color: #f59e0b;
  border-style: dashed;
  color: #b45309;
}
[data-theme="dark"] .hl-seg--any { color: #fcd34d; }
.hl-seg--any:hover { background: color-mix(in srgb, #f59e0b 18%, transparent); transform: none; }
/* End/off: muted, strikethrough, still clickable to re-include */
.hl-seg--end {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
  opacity: 0.4;
  text-decoration: line-through;
}
.hl-seg--end:hover { opacity: 0.7; background: var(--secondary-bg); transform: none; }
/* Small variant for hint row */
.hl-seg--sm { padding: 0px 5px; font-size: 9px; }

/* Preview + Use button */
.hl-builder-footer {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hl-builder-preview {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-family: monospace;
  color: var(--text);
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-builder-use {
  flex-shrink: 0;
  width: auto;
  margin-top: 0;
  padding: 4px 11px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s;
}
.hl-builder-use:hover { background: var(--primary-dark); transform: none; }

/* ══════════════════════════════════════════════════════════════════
   HIGHLIGHT TAB — v2 redesign (action-list template)
   ══════════════════════════════════════════════════════════════════ */

/* ── Compact stats bar (replaces 3-pill grid) ── */
.hl-stats-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--hl-inner-bg);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.hl-stats-bar-val { font-weight: 700; color: var(--text); }
.hl-stats-bar-sep { color: var(--border); user-select: none; }
.hl-stats-detail-btn {
  margin-left: auto;
  width: auto;
  margin-top: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.hl-stats-detail-btn:hover { background: var(--secondary-bg); color: var(--text); transform: none; }

.hl-stats-detail {
  display: none;
  gap: 6px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.hl-stats-detail.open { display: flex; }

/* ── Highlight list — action-list template overrides ── */
#hlList {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#hlList::-webkit-scrollbar { display: block; width: 5px; }
#hlList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Suppress drag-handle pseudo-element */
#hlList li::before { display: none !important; }

/* Color variants — border-left + gradient (mirrors action-click/input pattern) */
#hlList .hl-yellow {
  border-left: 4px solid #fde047;
  background: linear-gradient(90deg, rgba(253,224,71,0.10) 0%, transparent 100%);
}
#hlList .hl-yellow:hover { background: linear-gradient(90deg, rgba(253,224,71,0.18) 0%, var(--secondary-bg) 100%); }
#hlList .hl-yellow .type { color: #ca8a04; }
[data-theme="dark"] #hlList .hl-yellow .type { color: #fde047; }

#hlList .hl-green {
  border-left: 4px solid #86efac;
  background: linear-gradient(90deg, rgba(134,239,172,0.10) 0%, transparent 100%);
}
#hlList .hl-green:hover { background: linear-gradient(90deg, rgba(134,239,172,0.18) 0%, var(--secondary-bg) 100%); }
#hlList .hl-green .type { color: #16a34a; }
[data-theme="dark"] #hlList .hl-green .type { color: #86efac; }

#hlList .hl-pink {
  border-left: 4px solid #f9a8d4;
  background: linear-gradient(90deg, rgba(249,168,212,0.10) 0%, transparent 100%);
}
#hlList .hl-pink:hover { background: linear-gradient(90deg, rgba(249,168,212,0.18) 0%, var(--secondary-bg) 100%); }
#hlList .hl-pink .type { color: #db2777; }
[data-theme="dark"] #hlList .hl-pink .type { color: #f9a8d4; }

#hlList .hl-blue {
  border-left: 4px solid #93c5fd;
  background: linear-gradient(90deg, rgba(147,197,253,0.10) 0%, transparent 100%);
}
#hlList .hl-blue:hover { background: linear-gradient(90deg, rgba(147,197,253,0.18) 0%, var(--secondary-bg) 100%); }
#hlList .hl-blue .type { color: #2563eb; }
[data-theme="dark"] #hlList .hl-blue .type { color: #93c5fd; }

#hlList .hl-orange {
  border-left: 4px solid #fdba74;
  background: linear-gradient(90deg, rgba(253,186,116,0.10) 0%, transparent 100%);
}
#hlList .hl-orange:hover { background: linear-gradient(90deg, rgba(253,186,116,0.18) 0%, var(--secondary-bg) 100%); }
#hlList .hl-orange .type { color: #ea580c; }
[data-theme="dark"] #hlList .hl-orange .type { color: #fdba74; }

/* Disabled state */
#hlList .hl-disabled {
  opacity: 0.5;
  background: var(--list-bg) !important;
  border-left-color: var(--muted) !important;
}
#hlList .hl-disabled .type,
#hlList .hl-disabled .value { text-decoration: line-through; color: var(--muted); }
#hlList .hl-disabled .index::after { content: ' ⏸'; font-size: 9px; }

/* Manual badge */
.hl-manual-badge {
  display: inline-flex;
  align-items: center;
  font-size: 8px;
  font-weight: 600;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 13px;
  flex-shrink: 0;
}

/* ── Color picker sub-row (shown below an item on Edit) ── */
.hl-color-picker-row {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 34px;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 5px 5px;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 2px;
}
.hl-color-picker-row .hl-add-cdot {
  width: 16px;
  height: 16px;
}
.hl-color-picker-row.open { display: flex; }
.hl-cpicker-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.hl-cpicker-dot:hover { transform: scale(1.2); }
.hl-cpicker-dot.sel { border-color: var(--text); }
.hl-cpicker-dot.yellow { background: #fde047; }
.hl-cpicker-dot.green  { background: #86efac; }
.hl-cpicker-dot.pink   { background: #f9a8d4; }
.hl-cpicker-dot.blue   { background: #93c5fd; }
.hl-cpicker-dot.orange { background: #fdba74; }
.hl-color-picker-row .hl-cpicker-close {
  margin-left: auto;
  width: auto;
  margin-top: 0;
  padding: 0 5px;
  font-size: 9px;
  height: 16px;
  border-radius: 3px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  flex-shrink: 0;
}
.hl-color-picker-row .hl-cpicker-close:hover { border-color: var(--danger); color: var(--danger); transform: none; }

/* ── Copy-to-URL sub-row ── */
.hl-copy-url-row {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 34px;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 5px 5px;
  font-size: 10px;
  margin-bottom: 2px;
}
.hl-copy-url-row.open { display: flex; }
.hl-copy-url-row .lbl { color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.hl-copy-url-row select {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-top: 0;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.hl-copy-url-row button {
  width: auto !important;
  margin-top: 0 !important;
  font-size: 9px !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 3px !important;
  flex-shrink: 0;
}

/* ── Edit sub-row: colour swatches + note (column layout) ── */
.hl-color-picker-row.hl-edit-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px 8px 6px 34px;
}
.hl-edit-line {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hl-edit-line.hl-edit-note { align-items: flex-start; }
.hl-edit-line .hl-note-input {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding: 4px 6px;
  font-size: 10px;
  font-family: inherit;
  line-height: 1.4;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  resize: vertical;
  min-height: 34px;
}
.hl-edit-line button {
  width: auto !important;
  margin-top: 0 !important;
  font-size: 9px !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 3px !important;
  flex-shrink: 0;
}
.hl-note-flag {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.85;
  cursor: help;
}

/* ── Color dots (edit color picker) ── */
.hl-add-cdot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.hl-add-cdot:hover { transform: scale(1.15); }
.hl-add-cdot.sel { border-color: var(--text); }
.hl-add-cdot.yellow { background: #fde047; }
.hl-add-cdot.green  { background: #86efac; }
.hl-add-cdot.pink   { background: #f9a8d4; }
.hl-add-cdot.blue   { background: #93c5fd; }
.hl-add-cdot.orange { background: #fdba74; }

/* ── Pattern item — domain badge ── */
.hl-pattern-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
}
.hl-pattern-badge--local {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success);
}
.hl-pattern-badge--wildcard {
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
  color: #b45309;
}
[data-theme="dark"] .hl-pattern-badge--wildcard { color: #fcd34d; }

/* ── Domain analysis panel ── */
.hl-domain-analysis {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 7px;
  padding: 9px 11px;
  margin-top: 4px;
}
.hl-domain-analysis.open { display: flex; }
.hl-domain-analysis-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.hl-analysis-row {
  display: flex;
  gap: 8px;
  font-size: 10px;
  align-items: baseline;
}
.hl-analysis-key { color: var(--muted); min-width: 76px; flex-shrink: 0; }
.hl-analysis-val { color: var(--text); font-family: monospace; flex: 1; min-width: 0; }
.hl-analysis-val code {
  background: var(--secondary-bg);
  padding: 0 3px;
  border-radius: 3px;
  color: var(--primary);
  font-family: monospace;
  font-size: 10px;
}
.hl-analysis-ok   { font-size: 9px; background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); padding: 0 4px; border-radius: 3px; }
.hl-analysis-warn { font-size: 9px; background: color-mix(in srgb, #f59e0b 12%, transparent); color: #b45309; padding: 0 4px; border-radius: 3px; }
[data-theme="dark"] .hl-analysis-warn { color: #fcd34d; }
.hl-analysis-divider { height: 1px; background: color-mix(in srgb, var(--primary) 15%, transparent); margin: 2px 0; }

/* Wildcard suggestion box */
.hl-wc-suggest {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: color-mix(in srgb, #f59e0b 7%, var(--card));
  border: 1.5px solid color-mix(in srgb, #f59e0b 35%, transparent);
  border-radius: 6px;
  padding: 8px 10px;
}
.hl-wc-suggest.show { display: flex; }
.hl-wc-title { font-size: 9px; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: 0.05em; }
[data-theme="dark"] .hl-wc-title { color: #fcd34d; }
.hl-wc-pattern { font-size: 11px; font-family: monospace; color: var(--text); }
.hl-wc-pattern code { background: var(--secondary-bg); padding: 1px 5px; border-radius: 3px; color: #b45309; font-size: 11px; }
[data-theme="dark"] .hl-wc-pattern code { color: #fcd34d; }
.hl-wc-note { font-size: 10px; color: var(--muted); line-height: 1.5; }
.hl-env-preview { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.hl-env-preview .lbl { font-size: 9px; color: var(--muted); flex-shrink: 0; }
.hl-env-tag {
  font-size: 9px;
  font-family: monospace;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--secondary-bg);
  white-space: nowrap;
}
.hl-env-tag.current { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.hl-env-tag.matched { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
.hl-wc-actions { display: flex; gap: 5px; }
.hl-wc-actions button {
  width: auto !important;
  margin-top: 0 !important;
  font-size: 9px !important;
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 3px !important;
}