/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #FAFAFC;
  --card:        #ffffff;
  --border:      #EAE8EF;
  --border-str:  #DDD9E6;
  --text:        #161019;
  --muted:       #6A6478;
  --surface-alt: #FCFBFE;
  --surface2:    #F3ECFC;
  --blue:        #5B21B6;
  --blue-h:      #6D28D9;
  --green:       #0E7C57;
  --red:         #B23A48;
  --amber:       #B07A12;
  --radius:      12px;
  --shadow:      0 24px 56px -30px rgba(46,16,101,.25), 0 1px 3px rgba(24,20,31,.04);
}

body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 14px;
  /* Dot-grid canvas, same treatment as the admin panel. Uses var(--border)
     so it re-tints itself in dark mode along with everything else. */
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Header ── */
header {
  background: rgba(250,250,252,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
}
.header-inner { display: flex; align-items: center; gap: 14px; width: 100%; }
header h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-logo-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #5B21B6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -3px rgba(91,33,182,.45);
}
.subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.client-badge {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  background: #F1EBFB;
  color: #5B21B6;
  border: 1px solid #E4D8F8;
  border-radius: 6px;
  padding: 2px 9px;
  letter-spacing: .04em;
}
.sub-plan-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #F3ECFC;
  color: var(--muted);
  border: 1px solid #E4D8F8;
}
.sub-status-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sub-status-inactive { background: #FEE7EA; color: #B23A48; border: 1px solid #F5BAC1; }
.subscription-banner {
  background: #FEE7EA;
  border: 1px solid #F5BAC1;
  border-left: 3px solid #B23A48;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.5;
}
.subscription-banner.banner-amber { background: #FBF1DC; border-color: #F0D699; border-left-color: #B07A12; color: #B07A12; }
[data-theme="dark"] .subscription-banner.banner-amber {
  background: rgba(224,181,99,.12); border-color: rgba(224,181,99,.35);
  border-left-color: #E0B563; color: #E0B563;
}

/* ── Main ── */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Card ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.card h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

/* ── Store selector ── */
.store-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.store-btns { display: flex; gap: 8px; }

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.store-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  user-select: none;
}
.store-card:hover {
  border-color: #B79CF2;
  box-shadow: 0 0 0 3px rgba(91,33,182,.08);
  transform: translateY(-1px);
}
.store-card:has(.store-cb:checked) {
  border-color: #5B21B6;
  border-width: 1.5px;
  background: #FBF8FE;
}

.store-cb { cursor: pointer; margin-top: 2px; flex-shrink: 0; accent-color: #5B21B6; }

.store-card-body      { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.store-card-name-row  { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.store-card-name      { font-size: 13px; font-weight: 600; color: var(--text); }
.store-enabled-dot {
  font-size: 10px;
  cursor: pointer;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.store-enabled-dot.dot-on  { color: #0E7C57; }
.store-enabled-dot.dot-off { color: #DDD9E6; }
.store-card.store-disabled { opacity: .5; }
.store-card-status { display: flex; gap: 4px; flex-wrap: wrap; }

.status-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 7px;
  border: 1px solid transparent;
  font-weight: 500;
  white-space: nowrap;
}
.pill-ok      { background: #E7F4EE; color: #0E7C57; border-color: #B3DFCC; }
.pill-no      { background: #F3ECFC; color: #9B94A6; border-color: #E4D8F8; }
.pill-unknown { background: var(--bg); color: #A39BAE; border-color: var(--border); }

/* ── Actions grid ──
   Flexbox instead of CSS grid: with only 4 cards, a leftover card on the
   last row would otherwise stretch to fill the whole row (grid) or hug the
   left edge — flex-wrap + justify-content:center keeps every row, including
   a lone last card, visually centered instead of looking orphaned. */
.actions-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.action-card {
  position: relative;
  display: flex;
  flex: 1 1 250px;
  max-width: 300px;
  min-height: 230px;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #FCFBFE;
  transition: box-shadow .15s, transform .15s;
}
.action-card:hover {
  box-shadow: 0 8px 24px -12px rgba(46,16,101,.18);
  transform: translateY(-2px);
}
/* Small gap: hint rows are usually empty, so a big gap here would add dead
   space between the button and the card's bottom edge that scales with how
   many hint placeholders a card happens to have. */
.action-footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.action-card.action-warn { border-color: #F0D699; background: #FFFBEB; }

/* Step order cue — cards are meant to be worked left to right, top to bottom */
.step-badge {
  position: absolute;
  top: -9px;
  left: -9px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #5B21B6;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(46,16,101,.35);
}
.action-header { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.action-header strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.action-desc { font-size: 12px; color: var(--muted); }
.action-opts { display: flex; flex-direction: column; gap: 6px; }
.action-opts label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.action-opts select,
.action-opts input[type=text] {
  padding: 7px 10px;
  border: 1px solid var(--border-str);
  border-radius: 10px;
  font-size: 13px;
  background: white;
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.action-opts select:focus,
.action-opts input[type=text]:focus {
  outline: none;
  border-color: #5B21B6;
  box-shadow: 0 0 0 3px rgba(91,33,182,.12);
}
.checkbox-label {
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  color: var(--muted);
}
.hint { font-size: 11px; color: var(--muted); }

.warning-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 6px 10px;
  background: #FBF1DC;
  color: #B07A12;
  border: 1px solid #F0D699;
  border-radius: 8px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Hanken Grotesk', inherit;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  background: #5B21B6;
  color: white;
  box-shadow: 0 1px 2px rgba(24,20,31,.06);
  transition: background .15s, transform .15s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover  { background: #6D28D9; transform: translateY(-1px); }
.btn:active { opacity: .88; transform: none; }
.btn-sm     { padding: 5px 11px; font-size: 12px; }
.btn-outline {
  background: white;
  color: var(--text);
  border-color: var(--border-str);
}
.btn-outline:hover { border-color: #5B21B6; color: #5B21B6; transform: translateY(-1px); }
.btn-secondary       { background: #EDE4FB; color: #5B21B6; border-color: #D9C7F5; }
.btn-secondary:hover { background: #E1D2F7; color: #5B21B6; transform: translateY(-1px); }
.btn-warn            { background: #B07A12; }
.btn-warn:hover      { background: #956412; }
.btn-danger          { background: #B23A48; }
.btn-danger:hover    { background: #952F3B; }
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Job-in-progress button spinner — same two-dot motif as the site logo */
.btn-spinner { display: inline-flex; align-items: center; justify-content: center; }
.btn-spinner-dot { animation: btn-spinner-pulse 1s ease-in-out infinite; }
.btn-spinner-dot-a { fill-opacity: .95; }
.btn-spinner-dot-b { fill-opacity: .5; animation-delay: .3s; }
@keyframes btn-spinner-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* ── Jobs ── */
#jobs-section h2 { display: flex; align-items: center; }
#jobs-list { display: flex; flex-direction: column; gap: 10px; }
#jobs-list.collapsed { display: none; }
.jobs-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 6px;
}

.job-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  background: #FCFBFE;
}
.job-card.jstatus-running { border-color: #B79CF2; background: #FBF8FE; }
.job-card.jstatus-success { border-color: #B3DFCC; background: #F4FAF7; }
.job-card.jstatus-failed  { border-color: #F5BAC1; background: #FEF5F6; }

.job-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.job-action { font-weight: 600; font-size: 13px; color: var(--text); }
.job-stores { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-meta   { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin: 5px 0 8px; }

.badge {
  font-family: 'JetBrains Mono', monospace;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.badge-green   { background: #E7F4EE; color: #0E7C57; }
.badge-red     { background: #FEE7EA; color: #B23A48; }
.badge-amber   { background: #FBF1DC; color: #B07A12; }
.badge-blue    { background: #F1EBFB; color: #5B21B6; }
.badge-gray    { background: #F3ECFC; color: #6A6478; }
.badge-running { background: #F1EBFB; color: #5B21B6; }
.badge-success { background: #E7F4EE; color: #0E7C57; }
.badge-failed  { background: #FEE7EA; color: #B23A48; }

/* Progress bar (indeterminate) */
.progress-bar {
  height: 3px;
  background: #E4D8F8;
  border-radius: 2px;
  overflow: hidden;
  margin: 6px 0;
}
.progress-bar-inner {
  height: 100%;
  width: 35%;
  background: #5B21B6;
  border-radius: 2px;
  animation: slide 1.3s ease-in-out infinite;
}
@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(370%); }
}

/* ── Files ── */
.global-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.file-subhead {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.store-files { display: flex; flex-direction: column; gap: 6px; }
.store-files details {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.store-files summary {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}
.store-files summary::before { content: "▶"; font-size: 9px; color: var(--muted); }
.store-files details[open] summary::before { content: "▼"; }
.store-files summary::-webkit-details-marker { display: none; }
.store-files details[open] summary { border-bottom: 1px solid var(--border); background: var(--bg); }
.file-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
.file-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid transparent;
}
.file-exists  { background: #E7F4EE; border-color: #B3DFCC; color: #0E7C57; }
.file-missing { background: var(--bg); border-color: var(--border); color: var(--muted); }

/* ── Modal ── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(22,16,25,.6); }
.modal-box {
  position: relative;
  z-index: 101;
  background: #1C1626;
  border: 1px solid #2C2638;
  border-radius: 14px;
  width: min(920px, 95vw);
  height: min(620px, 90vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(22,16,25,.6);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid #2C2638;
  color: #B79CF2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.modal-close { color: #9B94A6; border-color: #2C2638; background: transparent; }
.modal-close:hover { background: #2C2638; transform: none; }
.log-pre {
  flex: 1;
  padding: 14px 18px;
  overflow: auto;
  font-family: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.65;
  color: #B79CF2;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(22,16,25,.2);
  max-width: 360px;
}
.toast.hidden { display: none; }
.toast-ok    { background: #0E7C57; color: white; }
.toast-error { background: #B23A48; color: white; }

/* ── Misc ── */
.empty-msg { color: var(--muted); font-size: 13px; }

/* ── Store freshness badges ── */
.store-fresh-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 2px;
}
.store-fresh { background: #E7F4EE; color: #0E7C57; border: 1px solid #B3DFCC; }
.store-never { background: #FBF1DC; color: #B07A12; border: 1px solid #F0D699; }

/* ── Command preview box ── */
.cmd-preview {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  word-break: break-all;
  min-height: 28px;
}
.cmd-preview-warn { color: #B07A12; background: #FBF1DC; border-color: #F0D699; }

/* ── File open button ── */
.file-open-btn {
  margin-left: 4px;
  padding: 1px 7px;
  font-size: 11px;
  border: 1px solid #B3DFCC;
  border-radius: 5px;
  background: white;
  color: #0E7C57;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s;
}
.file-open-btn:hover { background: #E7F4EE; }
a.file-open-btn { text-decoration: none; display: inline-block; line-height: 1.6; }

/* ── Store limit hints ── */
.store-limit-hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #B07A12; min-height: 0; }

/* ── Action card limit hints ── */
.limit-hint              { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); min-height: 0; }
.limit-hint.hint-blocked { color: #B07A12; font-weight: 500; }
.limit-hint.hint-ok      { color: #0E7C57; font-weight: 500; }

/* ── Disabled store ── */
.store-card.store-disabled .store-cb { pointer-events: none; }

/* ── File row extras ── */
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-mtime {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Global folder buttons ── */
.global-folder-btns { display: flex; gap: 6px; margin-top: 8px; margin-bottom: 4px; }

/* ── Light/dark theme switch ──
   A checkbox styled as a pill switch; toggleTheme() (static/theme.js) flips
   document.documentElement[data-theme] and localStorage on change. The
   checked-state visuals below are pure CSS (sibling selectors), so the
   track/thumb reflect state immediately without waiting on JS. */
/* user-select:none is load-bearing, not cosmetic: the track's ☀/☾ glyphs are
   pseudo-element TEXT, so clicking the label dropped a blinking text caret as
   if the switch were an input field. */
.theme-switch {
  display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0;
  user-select: none; -webkit-user-select: none;
}
.theme-switch-input { display: none; }
.theme-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-str);
  transition: background .18s;
  flex-shrink: 0;
}
.theme-switch-track::before {
  content: "\2600";
  position: absolute; left: 5px; top: 2px;
  font-size: 10px; line-height: 1; opacity: .7;
  transition: opacity .18s;
}
.theme-switch-track::after {
  content: "\263E";
  position: absolute; right: 5px; top: 2px;
  font-size: 10px; line-height: 1; opacity: .35;
  transition: opacity .18s;
}
.theme-switch-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(24,20,31,.3);
  transition: transform .18s;
}
.theme-switch-input:checked + .theme-switch-track { background: #5B21B6; }
.theme-switch-input:checked + .theme-switch-track .theme-switch-thumb { transform: translateX(18px); }
.theme-switch-input:checked + .theme-switch-track::before { opacity: .35; }
.theme-switch-input:checked + .theme-switch-track::after  { opacity: .9; }

/* ── Dark theme ──
   Toggled via [data-theme="dark"] on <html> (default/unset = light, the
   theme above). Re-declaring the custom properties re-themes every var()
   consumer in this file automatically; explicit selector overrides below
   cover the rules that hardcode a literal colour instead of a variable. */
[data-theme="dark"] {
  --bg:          #1B1626;
  --card:        #241E33;
  --border:      #362B4D;
  --border-str:  #4A3D68;
  --text:        #EDE9F7;
  --muted:       #B3A9C6;
  --surface-alt: #2A2338;
  --surface2:    #2E2740;
  --blue:        #9B85DE;
  --blue-h:      #B29CEB;
  --green:       #7FC29B;
  --red:         #E38B95;
  --amber:       #E0B563;
  --shadow:      0 2px 8px rgba(0,0,0,.35);
}
[data-theme="dark"] header { background: rgba(27,22,38,.88); }
[data-theme="dark"] .header-logo-icon,
[data-theme="dark"] .step-badge { background: #6D4FD1; }
[data-theme="dark"] .client-badge {
  background: rgba(155,133,222,.18); color: #C9B8F5; border-color: rgba(155,133,222,.35);
}
[data-theme="dark"] .sub-plan-badge { background: rgba(255,255,255,.06); border-color: var(--border); }
[data-theme="dark"] .sub-status-inactive {
  background: rgba(227,139,149,.16); color: #E38B95; border-color: rgba(227,139,149,.4);
}
[data-theme="dark"] .subscription-banner {
  background: rgba(227,139,149,.12); border-color: rgba(227,139,149,.35);
  border-left-color: #E38B95; color: #F0AAB4;
}
[data-theme="dark"] .store-card { background: var(--card); }
[data-theme="dark"] .store-card:hover { border-color: #9B85DE; box-shadow: 0 0 0 3px rgba(155,133,222,.15); }
[data-theme="dark"] .store-card:has(.store-cb:checked) { border-color: #9B85DE; background: rgba(155,133,222,.12); }
[data-theme="dark"] .store-enabled-dot.dot-on  { color: #7FC29B; }
[data-theme="dark"] .store-enabled-dot.dot-off { color: var(--border-str); }
[data-theme="dark"] .pill-ok { background: rgba(127,194,155,.16); color: #7FC29B; border-color: rgba(127,194,155,.35); }
[data-theme="dark"] .pill-no { background: rgba(255,255,255,.06); border-color: var(--border); }
[data-theme="dark"] .pill-unknown { color: var(--muted); }
[data-theme="dark"] .action-card { background: var(--surface-alt); }
[data-theme="dark"] .action-card:hover { box-shadow: 0 8px 24px -12px rgba(155,133,222,.25); }
[data-theme="dark"] .action-card.action-warn { border-color: rgba(224,181,99,.4); background: rgba(224,181,99,.08); }
[data-theme="dark"] .action-opts select,
[data-theme="dark"] .action-opts input[type=text] { background: #1F1A2B; }
[data-theme="dark"] .action-opts select:focus,
[data-theme="dark"] .action-opts input[type=text]:focus {
  border-color: #9B85DE; box-shadow: 0 0 0 3px rgba(155,133,222,.22);
}
[data-theme="dark"] .warning-badge {
  background: rgba(224,181,99,.14); color: #E0B563; border-color: rgba(224,181,99,.35);
}
[data-theme="dark"] .btn-outline { background: var(--card); }
[data-theme="dark"] .btn-outline:hover { border-color: #9B85DE; color: #C9B8F5; }
[data-theme="dark"] .btn-secondary { background: rgba(155,133,222,.18); color: #C9B8F5; border-color: rgba(155,133,222,.35); }
[data-theme="dark"] .btn-secondary:hover { background: rgba(155,133,222,.28); }
[data-theme="dark"] .job-card { background: var(--surface-alt); }
[data-theme="dark"] .job-card.jstatus-running { border-color: #6D4FD1; background: rgba(155,133,222,.12); }
[data-theme="dark"] .job-card.jstatus-success { border-color: rgba(127,194,155,.4); background: rgba(127,194,155,.1); }
[data-theme="dark"] .job-card.jstatus-failed  { border-color: rgba(227,139,149,.4); background: rgba(227,139,149,.1); }
[data-theme="dark"] .badge-green,
[data-theme="dark"] .badge-success { background: rgba(127,194,155,.16); color: #7FC29B; }
[data-theme="dark"] .badge-red,
[data-theme="dark"] .badge-failed  { background: rgba(227,139,149,.16); color: #E38B95; }
[data-theme="dark"] .badge-amber   { background: rgba(224,181,99,.16);  color: #E0B563; }
[data-theme="dark"] .badge-blue,
[data-theme="dark"] .badge-running { background: rgba(155,133,222,.2); color: #C9B8F5; }
[data-theme="dark"] .badge-gray    { background: rgba(255,255,255,.06); color: var(--muted); }
[data-theme="dark"] .file-exists,
[data-theme="dark"] .store-fresh {
  background: rgba(127,194,155,.14); border-color: rgba(127,194,155,.35); color: #7FC29B;
}
[data-theme="dark"] .store-never {
  background: rgba(224,181,99,.14); border-color: rgba(224,181,99,.35); color: #E0B563;
}
[data-theme="dark"] .cmd-preview-warn {
  color: #E0B563; background: rgba(224,181,99,.14); border-color: rgba(224,181,99,.35);
}
[data-theme="dark"] .file-open-btn { background: transparent; border-color: rgba(127,194,155,.4); color: #7FC29B; }
[data-theme="dark"] .file-open-btn:hover { background: rgba(127,194,155,.14); }
[data-theme="dark"] .store-limit-hint,
[data-theme="dark"] .limit-hint.hint-blocked { color: #E0B563; }
[data-theme="dark"] .limit-hint.hint-ok { color: #7FC29B; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4A3D68; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #9B85DE; }