/* ============================================================
   AUTO CAPTIONS — studio redesign (matches the mockup)
   Green console accents + purple preview glow, step-based layout
   ============================================================ */
#flexAutoCaptions.cx-caption-studio-card {
  background: linear-gradient(180deg, #121517, #0e1113) !important;
  border: 1px solid rgba(34, 255, 111, .16) !important;
  border-radius: 10px !important;
  padding: 10px !important;
}

/* ---------- Header ---------- */
.cx-cap-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 2px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  margin-bottom: 10px;
}
.cx-cap-header-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(34, 255, 111, .12);
  border: 1px solid rgba(34, 255, 111, .3);
  font-size: 15px;
}
.cx-cap-header-copy { flex: 1; min-width: 0; }
.cx-cap-title { font: 800 15px/1.2 Arial, sans-serif; color: #eef4ff; }
.cx-cap-sub { font: 400 10px/1.4 Arial, sans-serif; color: #8a95a5; margin-top: 2px; }
.cx-cap-ready {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  background: #0a0e0b;
  border: 1px solid #26362c;
  color: #b8c4bc;
  font: 800 9px/1 Arial, sans-serif;
  letter-spacing: .1em;
}
.cx-cap-ready i { width: 6px; height: 6px; border-radius: 50%; background: #22ff6f; box-shadow: 0 0 5px #22ff6f; }

/* ---------- Three-stage workflow ---------- */
#flexAutoCaptions [data-cap-stage-panel][hidden] { display: none; }
.cx-cap-stage-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 7px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 9px;
  background: rgba(0,0,0,.22);
}
.cx-cap-stage-nav button {
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #7d8898;
  font: 800 10px/1 Arial, sans-serif;
  cursor: pointer;
}
.cx-cap-stage-nav button span {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #8d98a8;
  font-size: 9px;
}
.cx-cap-stage-nav button:hover { color: #d8e2ec; background: rgba(255,255,255,.025); }
.cx-cap-stage-nav button:disabled { opacity: .38; cursor: default; background: transparent; }
.cx-cap-stage-nav button.active {
  border-color: rgba(34,255,111,.42);
  background: rgba(34,255,111,.09);
  color: #ecfff2;
  box-shadow: inset 0 0 12px rgba(34,255,111,.035);
}
.cx-cap-stage-nav button.active span { background: #22ff6f; color: #06120a; }
.cx-cap-stage-nav button.has-content:not(.active) { color: #aeb8c5; }
.cx-cap-stage-nav button.has-content:not(.active) span { background: rgba(34,255,111,.13); color: #22ff6f; }
.cx-cap-stage-summary {
  margin: 0 2px 8px;
  color: #778393;
  font: 600 10px/1.45 Arial, sans-serif;
}
.cx-cap-continue { margin-top: 8px; min-height: 30px; }
.cx-cap-advanced-tools,
.cx-cap-fine-tuning {
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 8px;
  background: rgba(0,0,0,.13);
}
.cx-cap-advanced-tools > summary,
.cx-cap-fine-tuning > summary {
  padding: 8px 9px;
  color: #8d98a8;
  font: 800 10px/1 Arial, sans-serif;
  letter-spacing: .05em;
  cursor: pointer;
  list-style: none;
}
.cx-cap-advanced-tools > summary::-webkit-details-marker,
.cx-cap-fine-tuning > summary::-webkit-details-marker { display: none; }
.cx-cap-advanced-tools > summary::after,
.cx-cap-fine-tuning > summary::after { content: "+"; float: right; color: #22ff6f; }
.cx-cap-advanced-tools[open] > summary::after,
.cx-cap-fine-tuning[open] > summary::after { content: "−"; }
.cx-cap-advanced-tools .cx-cap-rules { margin: 0 8px 8px; }
.cx-cap-fine-tuning[open] { padding-bottom: 8px; }
.cx-cap-fine-tuning .cx-cap-slider-row { margin-left: 8px; margin-right: 8px; }

/* ---------- Step blocks ---------- */
.cx-cap-step {
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
}
.cx-cap-step-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cx-caption-studio-card .cx-cap-step-num {
  display: none;
}
.cx-cap-step-num {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #22ff6f;
  color: #06120a;
  font: 800 9px/1 Arial, sans-serif;
}
.cx-cap-step-label { font: 800 11px/1 Arial, sans-serif; letter-spacing: .12em; color: #b6bfcc; }

/* ---------- Step 1: SOURCE ---------- */
.cx-cap-src-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#flexAutoCaptions .cx-cap-src-btn { min-height: 32px; padding: 6px 8px; font-size: 10px; border-radius: 7px; }
.cx-cap-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(123, 97, 255, .35);
  border-radius: 8px;
  background: rgba(123, 97, 255, .07);
}
.cx-cap-file-icon { font-size: 13px; flex: 0 0 auto; }
.cx-cap-file-name { flex: 1; min-width: 0; font: 700 10px/1.3 Arial, sans-serif; color: #d8c6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-cap-file-check { color: #22ff6f; font-size: 11px; flex: 0 0 auto; }
.cx-cap-file-clear {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #9aa3b2;
  font-size: 9px;
  cursor: pointer;
}
.cx-cap-file-clear:hover { background: rgba(255, 92, 92, .25); color: #ff7b83; }

/* ---------- Step 2: TRANSCRIPTION SETTINGS ---------- */
.cx-cap-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cx-cap-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-cap-field > span { font: 700 10px/1 Arial, sans-serif; letter-spacing: .08em; color: #7d8898; text-transform: uppercase; }
.cx-cap-field .counter-select,
.cx-cap-field .counter-input { width: 100%; min-height: 26px; min-width: 0; font-size: 10px; padding: 3px 5px; box-sizing: border-box; }
.cx-cap-toggles { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.cx-cap-toggles .caption-toggle,
.cx-cap-effect-toggles .caption-toggle { font-size: 10px; }
.cx-cap-toggles input[type=checkbox],
.cx-cap-effect-toggles input[type=checkbox] { accent-color: #22ff6f; }
.cx-cap-glossary { width: 100%; min-height: 26px; font-size: 10px; box-sizing: border-box; }
#flexAutoCaptions .cx-cap-transcribe { min-height: 36px; margin-top: 8px; font-size: 11px; letter-spacing: .04em; }
.cx-cap-auto-gen { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 10px; color: #9aa3b2; cursor: pointer; }
.cx-cap-auto-gen input[type=checkbox] { accent-color: #22ff6f; }
.cx-cap-status-wrap { margin-top: 7px; }
.cx-cap-status-wrap .hint { font-size: 9px; color: #7d8898; }

/* ---------- Step 3: CAPTION CLEANUP ---------- */
.cx-cap-clean-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.cx-cap-clean-toggle { font-size: 10px; }
.cx-cap-clean-toggle input[type=checkbox] { accent-color: #22ff6f; }
.cx-cap-words-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.cx-cap-words-label { font: 700 10px/1 Arial, sans-serif; letter-spacing: .08em; color: #7d8898; }
.cx-cap-words-seg { display: flex; gap: 2px; }
.cx-cap-words-seg button {
  min-width: 26px;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  color: #9aa3b2;
  font: 800 10px/1 Arial, sans-serif;
}
.cx-cap-words-seg button.active {
  border-color: rgba(34, 255, 111, .55);
  background: rgba(34, 255, 111, .14);
  color: #22ff6f;
  box-shadow: 0 0 8px rgba(34, 255, 111, .18);
}
.cx-cap-clean-btn { min-height: 28px; margin-top: 9px; font-size: 10px; }
.cx-cap-clean-hint { font-size: 10px; color: #6d7788; margin-top: 6px; line-height: 1.5; }
.cx-cap-engine-field { margin-top: 8px; padding: 8px; border: 1px solid rgba(34,255,111,.16); border-radius: 7px; background: rgba(7,15,11,.55); }
.cx-cap-engine-field small { color: #788494; font: 500 9px/1.45 Arial, sans-serif; }

/* ---------- Step 4: CAPTION EDITOR ---------- */
#flexAutoCaptions .cx-caption-editor { min-height: 90px !important; width: 100%; box-sizing: border-box; border-radius: 8px; font-size: 10px; resize: vertical; }
.cx-cap-editor-count { text-align: right; font: 700 9px/1 var(--mono, Consolas, monospace); letter-spacing: .06em; color: #7d8898; margin-top: 4px; }
.cx-cap-editor-count.has-issues { color: #ffb347; }
.cx-cap-editor-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cx-cue-list-btn { min-height: 24px; padding: 0 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 6px; background: rgba(255,255,255,.03); color: #aeb7c4; font: 800 10px/1 Arial, sans-serif; cursor: pointer; }
.cx-cue-list-btn:hover { border-color: rgba(34,255,111,.45); color: #22ff6f; }
.cx-cue-list-hint { margin-left: auto; font: 600 10px/1 Arial, sans-serif; color: #6d7788; }
.cx-caption-live-preview .cx-preview-word-keyword { color: var(--caption-active, #ffe600); text-shadow: 0 0 12px var(--caption-active, #ffe600); }
.cx-cue-list { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(0,0,0,.25); }
.cx-cue-empty { color: #6d7788; font: 600 10px/1.6 Arial, sans-serif; text-align: center; padding: 14px 6px; }
.cx-cue-row { display: flex; align-items: flex-start; gap: 6px; padding: 4px 5px; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; background: rgba(255,255,255,.02); cursor: pointer; }
.cx-cue-row:hover { border-color: rgba(34,255,111,.25); }
.cx-cue-row.selected { border-color: rgba(123,97,255,.6); background: rgba(123,97,255,.12); box-shadow: 0 0 10px rgba(123,97,255,.15); }
.cx-cue-row.timing-warning { border-color: rgba(255,179,71,.55); background: rgba(255,179,71,.07); }
.cx-cue-row.timing-warning .cx-cue-times { color: #ffb347; }
.cx-cue-num { flex: 0 0 17px; font: 800 9px/1.6 Consolas, monospace; color: #7d8898; text-align: center; padding-top: 3px; }
.cx-cue-times { display: flex; align-items: center; gap: 3px; font: 700 9px/1.6 Consolas, monospace; color: #22ff6f; }
.cx-cue-times-dash { color: #5d6675; }
.cx-cue-time { display: inline-block; width: 56px; min-height: 17px; padding: 2px 3px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; background: rgba(0,0,0,.35); color: #22ff6f; font: 700 9px/1.4 Consolas, monospace; outline: none; text-align: center; }
.cx-cue-time:focus { border-color: rgba(34,255,111,.5); box-shadow: 0 0 5px rgba(34,255,111,.15); }
.cx-cue-text { flex: 1; min-width: 0; color: #e6e9ef; font: 600 10px/1.5 Arial, sans-serif; outline: none; word-break: break-word; white-space: pre-wrap; }
.cx-cue-text:focus { box-shadow: 0 0 0 1px rgba(34,255,111,.35); border-radius: 3px; }
.cx-cue-actions { display: flex; gap: 2px; padding-top: 1px; }
.cx-cue-actions button { min-width: 18px; min-height: 18px; padding: 0 3px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; background: rgba(255,255,255,.03); color: #8b94a3; font: 700 9px/1 Arial, sans-serif; cursor: pointer; }
.cx-cue-actions button:hover { border-color: rgba(34,255,111,.4); color: #22ff6f; }
.cx-cue-actions .cx-cue-del:hover { border-color: rgba(255,77,109,.5); color: #ff4d6d; }

/* ---------- Step 5: STYLE PRESETS ---------- */
.cx-preset-suggest {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(34, 255, 111, .35);
  border-radius: 8px;
  background: rgba(34, 255, 111, .07);
}
.cx-preset-suggest[hidden] { display: none; }
.cx-preset-suggest-emoji { font-size: 14px; flex: 0 0 auto; }
.cx-preset-suggest-text { flex: 1; min-width: 0; font: 600 10px/1.4 Arial, sans-serif; color: #cfe8d8; }
.cx-preset-suggest-apply {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 12px;
  border: 1px solid rgba(34, 255, 111, .5);
  border-radius: 6px;
  background: rgba(34, 255, 111, .15);
  color: #22ff6f;
  font: 800 10px/1 Arial, sans-serif;
  cursor: pointer;
}
.cx-preset-suggest-apply:hover { background: rgba(34, 255, 111, .28); }
.cx-caption-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.cx-caption-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  color: #aeb7c4;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  min-width: 0;
}
.cx-caption-preset:hover { border-color: rgba(34, 255, 111, .35); color: #eef4ff; }
.cx-caption-preset.active {
  color: #eef4ff;
  background: rgba(34, 255, 111, .08);
  box-shadow: 0 0 8px rgba(34, 255, 111, .15);
}
/* The console theme's #app button.active rule pins a muted border — override it
   with the bright green selection border used across the redesigned panels. */
#app #flexAutoCaptions .cx-caption-preset.active,
#app #flexAutoCaptions .cx-layout-btn.active {
  border-color: #22ff6f !important;
}
.cx-cap-preset-glyph { font-size: 19px; font-weight: 800; line-height: 1; color: #c8d3cb; }
.cx-caption-preset.active .cx-cap-preset-glyph { color: #22ff6f; }
.cx-cap-preset-name { font-size: 10px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
.cx-cap-preset-dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 5px; }
.cx-cap-more { font-size: 10px; color: #6d7788; margin-top: 6px; text-align: center; font-style: italic; }
.cx-cap-save-row { display: flex; margin-top: 6px; }
.cx-cap-save-preset { flex: 1; min-height: 24px; border: 1px dashed rgba(34, 255, 111, .35); border-radius: 6px; background: rgba(34, 255, 111, .06); color: #22ff6f; font: 800 10px/1 Arial, sans-serif; cursor: pointer; }
.cx-cap-save-preset:hover { background: rgba(34, 255, 111, .14); border-color: #22ff6f; }
.cx-caption-preset-custom { border-style: dashed; border-color: rgba(34, 255, 111, .45); position: relative; }
.cx-caption-preset-custom .cx-cap-preset-glyph { color: #22ff6f; }
.cx-cap-preset-del { position: absolute; top: 1px; right: 2px; width: 12px; height: 12px; border: 0; background: none; color: #6d7788; font-size: 9px; line-height: 1; cursor: pointer; padding: 0; }
.cx-cap-preset-del:hover { color: #ff5c5c; }

/* ---------- Live preview banner ---------- */
.cx-caption-live-preview {
  position: relative;
  height: 92px;
  border-radius: 9px;
  margin-bottom: 8px;
  background:
    radial-gradient(circle at 50% 62%, rgba(123, 97, 255, .22), transparent 55%),
    linear-gradient(180deg, #12151a, #0c0f12);
  border: 1px solid rgba(123, 97, 255, .18);
}
.cx-caption-live-preview .cx-caption-preview-words span { font-weight: 800; }
#flexCaptionPreviewStage.active-enabled .cx-caption-preview-words span:nth-child(2) {
  color: #0a0612;
  background: var(--caption-active, #7b61ff);
  border-radius: 5px;
  padding: 1px 6px;
  box-shadow: 0 0 12px rgba(123, 97, 255, .55);
}
#flexCaptionPreviewStage.active-enabled .cx-caption-preview-words span:nth-child(n+3) {
  color: var(--caption-pending, #7d8590);
}
.cx-caption-live-preview.active-enabled .cx-caption-preview-words span {
  animation: none;
}
.cx-cap-preview-play {
  position: absolute;
  bottom: 6px;
  right: 8px;
  min-width: 24px;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(34,255,111,.3);
  border-radius: 5px;
  background: rgba(5,10,8,.72);
  color: #7fe8ab;
  font: 800 10px/1 Arial, sans-serif;
  cursor: pointer;
  z-index: 2;
}
.cx-cap-preview-play:hover { background: rgba(34,255,111,.18); color: #22ff6f; }
.cx-cap-preview-play.is-playing { color: #22ff6f; box-shadow: 0 0 8px rgba(34,255,111,.35); }
.cx-caption-live-preview.is-playing .cx-caption-preview-words span { transition: color .12s ease, transform .12s ease, background-color .12s ease, box-shadow .12s ease, border-color .12s ease; }
.cx-caption-live-preview.is-playing .cx-caption-preview-words span.cx-preview-word-pending { color: var(--caption-pending, #7d8590); transform: scale(1); }
.cx-caption-live-preview.is-playing .cx-caption-preview-words span.cx-preview-word-active {
  color: #0a0612;
  background: var(--caption-active, #7b61ff);
  border-radius: 5px;
  padding: 1px 6px;
  box-shadow: 0 0 12px rgba(123,97,255,.55);
  transform: scale(var(--caption-pop, 1.12));
}
.cx-caption-live-preview.is-playing .cx-caption-preview-words span.cx-preview-word-done { color: var(--caption-normal, #fff); background: transparent; box-shadow: none; transform: scale(1); }
/* --- Active Word style presets: underline / highlighter --- */
.cx-cap-active-style-row { margin-top: 7px; }
#flexCaptionPreviewStage.active-enabled.active-style-underline .cx-caption-preview-words span:nth-child(2) {
  color: var(--caption-active, #7b61ff);
  background: transparent;
  border-radius: 0;
  padding: 0 1px;
  box-shadow: none;
  border-bottom: 2px solid var(--caption-active, #7b61ff);
}
#flexCaptionPreviewStage.active-enabled.active-style-highlight .cx-caption-preview-words span:nth-child(2) {
  color: var(--caption-normal, #fff);
  background: transparent;
  border-radius: 0;
  padding: 0 1px;
  box-shadow: none;
  position: relative;
}
#flexCaptionPreviewStage.active-enabled.active-style-highlight .cx-caption-preview-words span:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border-radius: 4px;
  background: var(--caption-active, #7b61ff);
  opacity: .28;
  z-index: -1;
}
.cx-caption-live-preview.is-playing.active-style-underline .cx-caption-preview-words span.cx-preview-word-active {
  color: var(--caption-active, #7b61ff);
  background: transparent;
  border-radius: 0;
  padding: 0 1px;
  box-shadow: none;
  border-bottom: 2px solid var(--caption-active, #7b61ff);
  transform: scale(1);
}
.cx-caption-live-preview.is-playing.active-style-highlight .cx-caption-preview-words span.cx-preview-word-active {
  color: var(--caption-normal, #fff);
  background: transparent;
  border-radius: 0;
  padding: 0 1px;
  box-shadow: none;
  position: relative;
}
.cx-caption-live-preview.is-playing.active-style-highlight .cx-caption-preview-words span.cx-preview-word-active::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border-radius: 4px;
  background: var(--caption-active, #7b61ff);
  opacity: .28;
  z-index: -1;
  transition: opacity .12s ease;
}
.cx-caption-live-preview .ffx-preview-tag {
  position: absolute;
  top: 6px;
  right: 7px;
  bottom: auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(5, 10, 8, .7);
  border: 1px solid rgba(34, 255, 111, .25);
  color: #7fe8ab;
  font: 800 8px/1 var(--mono, Consolas, monospace);
  letter-spacing: .1em;
}

/* ---------- Step 5: LAYOUT & OUTPUT ---------- */
#flexAutoCaptions .cx-layout-btn { min-height: 30px; font-size: 10px; border-radius: 7px; }
.cx-cap-output-row { margin-top: 10px; }
#flexCaptionOutputSeg button {
  min-width: 0;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  color: #9aa3b2;
  font: 800 10px/1 Arial, sans-serif;
  cursor: pointer;
}
#flexCaptionOutputSeg button.active {
  border-color: rgba(34, 255, 111, .55);
  background: rgba(34, 255, 111, .14);
  color: #22ff6f;
  box-shadow: 0 0 8px rgba(34, 255, 111, .18);
}
#flexAutoCaptions .cx-layout-btn.active {
  color: #eef4ff;
  background: rgba(34, 255, 111, .08);
  box-shadow: 0 0 8px rgba(34, 255, 111, .15);
}
.cx-cap-layout-selects { margin-top: 7px; }

/* ---------- Step 6: TYPOGRAPHY & EFFECTS ---------- */
.cx-cap-font-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
#flexAutoCaptions .cx-cap-font-row .counter-select { flex: 1; min-width: 0; min-height: 26px; font-size: 10px; }
#flexAutoCaptions .cx-cap-icon-btn { min-height: 26px; padding: 4px 9px; font-size: 10px; border-radius: 7px; white-space: nowrap; }
.cx-cap-font-hint { font-size: 10px; color: #6d7788; margin: 3px 0 7px; }
.cx-cap-size { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.cx-cap-size .counter-input { width: 46px; min-height: 26px; font-size: 10px; }
.cx-cap-size em, .cx-cap-px em { font-style: normal; font-size: 9px; color: #7d8898; }
.cx-cap-active-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.cx-cap-active-row .counter-select { flex: 1; min-width: 0; min-height: 26px; font-size: 10px; }
.cx-cap-px { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.cx-cap-px .counter-input { width: 42px; min-height: 26px; font-size: 10px; }
.cx-cap-colors { display: flex; align-items: center; gap: 6px; margin: 7px 0; }
.cx-cap-color-label { font: 700 10px/1 Arial, sans-serif; letter-spacing: .1em; color: #7d8898; margin-right: 2px; }
.cx-cap-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  display: inline-block;
  padding: 0;
}
.cx-cap-swatch input { width: 26px; height: 26px; margin: -3px 0 0 -3px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.cx-cap-swatch-active { border-color: rgba(34, 255, 111, .6); box-shadow: 0 0 6px rgba(34, 255, 111, .25); }
.cx-cap-swatch-add {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .25);
  background: transparent;
  color: #9aa3b2;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.cx-cap-swatch-add:hover { color: #22ff6f; border-color: #22ff6f; }
.cx-cap-effect-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.cx-cap-effect-toggles > input[type=color] {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 5px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* ---------- Step 7: FINE TUNING ---------- */
.cx-cap-slider-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cx-cap-slider-label { flex: 0 0 56px; font: 700 10px/1 Arial, sans-serif; color: #aeb7c4; letter-spacing: .06em; }
.cx-cap-slider-row input[type=range] { flex: 1; min-width: 0; accent-color: #22ff6f; }
.cx-cap-slider-val { flex: 0 0 36px; text-align: right; font: 800 10px/1 var(--mono, Consolas, monospace); color: #22ff6f; }

/* ---------- Bottom action bar ---------- */
.cx-cap-bottom { display: flex; align-items: stretch; gap: 6px; margin-top: 2px; }
.cx-cap-bottom .cx-cap-generate { flex: 1; min-width: 0; min-height: 40px; font-size: 12px; margin: 0; }
.cx-cap-bottom-side { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; justify-content: center; }
.cx-cap-build-progress { position: relative; height: 24px; margin-top: 6px; overflow: hidden; border: 1px solid rgba(34,255,111,.24); border-radius: 6px; background: rgba(6,12,9,.86); }
.cx-cap-build-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(34,255,111,.22), rgba(0,224,255,.2)); transition: width .2s ease; }
.cx-cap-build-progress span { position: relative; z-index: 1; display: flex; height: 100%; align-items: center; justify-content: center; color: #c8d2dd; font: 800 9px/1 Arial, sans-serif; letter-spacing: .05em; }

/* ---------- Settings modal: download cards ---------- */
.lg-settings-body { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; overflow-y: auto; }
.lg-plugin-card progress {
  width: 100%;
  height: 5px;
  accent-color: #22ff6f;
}
.lg-plugin-card .hint { font-size: 8px; color: #6b7686; line-height: 1.5; margin: 0; }
#flexRuntimeConsent, #aiBgRuntimeConsent { display: flex; flex-direction: column; gap: 10px; }
.stg-card-highlight {
  border-color: #22ff6f;
  box-shadow: 0 0 14px rgba(34, 255, 111, .35);
}
.cx-cap-font-settings-hint {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: .6;
  cursor: help;
}

/* ---------- Highlight rules (ZH-style auto-highlight) ---------- */
.cx-cap-rules { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); }
.cx-cap-rules-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cx-cap-rules-add { display: flex; align-items: center; gap: 6px; }
.cx-cap-rule-input { flex: 1; min-width: 0; }
.cx-cap-rule-swatches { display: flex; gap: 4px; }
.cx-cap-rule-swatches button { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cx-cap-rule-swatches button.active { border-color: #ffffff; box-shadow: 0 0 8px rgba(34,255,111,.5); }
.cx-cap-rules-list { display: flex; flex-wrap: wrap; gap: 5px; min-height: 0; }
.cx-cap-rule-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); font: 700 10px/1 Arial, sans-serif; color: #cfd6e1; }
.cx-cap-rule-chip .cx-cap-rule-dot { width: 8px; height: 8px; border-radius: 50%; }
.cx-cap-rule-chip button { background: none; border: 0; color: #6b7686; cursor: pointer; font-size: 10px; padding: 0 2px; }
.cx-cap-rule-chip button:hover { color: #ff5c5c; }

/* ---------- Preset treatments in the live preview (neon / chrome / spotlight) ---------- */
.cx-caption-live-preview .cx-preview-word-neon { text-shadow: 0 0 8px var(--caption-normal, #5fffa6), 0 0 20px rgba(95, 255, 166, .5); }
.cx-caption-live-preview .cx-preview-word-chrome {
  background: linear-gradient(180deg, #f6f8fb 0%, #a9b2c0 55%, #d9dde4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cx-caption-live-preview .cx-preview-word-spotlight { text-shadow: 0 0 6px rgba(255, 255, 255, .28); }
.cx-caption-live-preview.is-playing .cx-caption-preview-words span.cx-preview-word-spotlight.cx-preview-word-active {
  color: var(--caption-active, #22ff6f);
  text-shadow: 0 0 14px var(--caption-active, #22ff6f), 0 0 30px var(--caption-active, #22ff6f);
  transform: scale(1.28);
}
#flexAutoCaptions > :not(.cx-simple-srt) { display: none !important; }
.cx-simple-srt { display: grid; gap: 10px; width: 100%; }
.cx-simple-template-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.cx-simple-template-head > span { color: #c8d2cc; font: 800 9px/1 Arial,sans-serif; letter-spacing: .11em; }
.cx-simple-template-head > small { color: #5d7165; font: 700 8px/1 Arial,sans-serif; letter-spacing: .07em; }
.cx-simple-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  grid-auto-rows: max-content;
  align-content: start;
  min-height: 0;
  gap: 7px;
  max-height: 320px;
  padding: 2px 3px 3px 1px;
  overflow-y: auto;
  scrollbar-color: rgba(34,255,111,.34) rgba(5,12,8,.7);
}
.cx-simple-template-card {
  position: relative;
  min-width: 0;
  min-height: 128px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(91,121,102,.28);
  border-radius: 8px;
  background: #08100c;
  color: #d8e1db;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.cx-simple-template-card:hover { border-color: rgba(34,255,111,.58); transform: translateY(-1px); }
.cx-simple-template-card.active { border-color: #22ff6f; box-shadow: 0 0 0 1px rgba(34,255,111,.18),0 0 14px rgba(34,255,111,.13); }
.cx-simple-template-preview { position: relative; display: grid; place-items: center; height: 96px; overflow: hidden; background: #101211; }
.cx-caption-ffx-preview { display: block; width: 100%; height: 96px; object-fit: contain; }
.cx-caption-ffx-preview[hidden] { display: none; }
.cx-caption-preview-error { color: #a3aba6; font: 10px/1.4 Arial,sans-serif; }
.cx-simple-template-meta { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; padding: 6px 7px 7px; }
.cx-simple-template-meta > span { min-width: 0; display: grid; gap: 2px; }
.cx-simple-template-meta strong { overflow: hidden; color: #dce7df; font: 800 9px/1 Arial,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.cx-simple-template-meta small { overflow: hidden; color: #607367; font: 700 7px/1 Arial,sans-serif; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.cx-simple-template-meta > em { padding: 2px 4px; border: 1px solid rgba(34,255,111,.23); border-radius: 4px; color: #69c98b; font: 800 7px/1 Arial,sans-serif; font-style: normal; }
.cx-simple-template-selected { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 6px 8px; border: 1px solid rgba(34,255,111,.2); border-radius: 7px; background: rgba(34,255,111,.035); }
.cx-simple-template-selected strong { flex: 0 0 auto; color: #42ff82; font: 800 9px/1 Arial,sans-serif; }
.cx-simple-template-selected span { min-width: 0; flex: 1; color: #718179; font: 500 8px/1.35 Arial,sans-serif; }
.cx-simple-template-selected button { flex: 0 0 auto; padding: 4px 6px; border: 1px solid rgba(120,150,130,.25); border-radius: 4px; background: rgba(255,255,255,.025); color: #718179; font: 800 7px/1 Arial,sans-serif; cursor: pointer; }
.cx-simple-template-selected button:hover { border-color: rgba(34,255,111,.55); color: #42ff82; }
.cx-simple-transcribe { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(56,255,125,.24); border-radius: 9px; background: rgba(8,15,11,.55); }
.cx-simple-transcribe-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cx-simple-transcribe-head > div { display: grid; gap: 2px; }
.cx-simple-transcribe-head strong { color: var(--text-main,#e8eee9); font-size: 11px; letter-spacing: .08em; }
.cx-simple-transcribe-head span:not(.cx-cap-ready) { color: var(--text-dim,#829087); font-size: 9px; }
.cx-simple-divider { display: flex; align-items: center; gap: 8px; color: var(--text-dim,#829087); font-size: 8px; letter-spacing: .08em; }
.cx-simple-divider::before,.cx-simple-divider::after { content:""; height: 1px; flex: 1; background: rgba(100,130,110,.2); }
.cx-simple-srt-drop { min-height: 86px; display: grid; place-content: center; gap: 5px; width: 100%; border: 1px dashed rgba(56,255,125,.42); border-radius: 10px; background: rgba(8,18,12,.62); color: var(--text-main,#e8eee9); cursor: pointer; }
.cx-simple-srt-drop strong { color: #34ff78; font-size: 12px; letter-spacing: .08em; }
.cx-simple-srt-drop span,.cx-simple-srt-file,.cx-simple-srt-count { color: var(--text-dim,#829087); font-size: 10px; }
.cx-simple-srt-drop.dragover { border-color: #34ff78; background: rgba(30,255,105,.08); }
.cx-simple-srt-file { padding: 7px 9px; border: 1px solid rgba(100,130,110,.22); border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-simple-srt-editor { display: block !important; min-height: 190px; max-height: 330px; resize: vertical; }
.cx-simple-srt-count.has-error { color: #ff7b7b; }
.cx-simple-srt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-simple-srt-grid .cx-cap-field { min-width: 0; }
.cx-simple-srt-options { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 8px; border: 1px solid rgba(100,130,110,.2); border-radius: 8px; }
.cx-simple-srt-options > span { flex: 1 1 220px; color: var(--text-dim,#829087); font-size: 9px; }
.cx-simple-srt-generate { min-height: 36px; }
.cx-simple-transcribe-progress[hidden] { display: none !important; }
.cx-simple-transcribe-progress {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(34,255,111,.35);
  border-radius: 8px;
  background: linear-gradient(135deg,rgba(7,20,13,.96),rgba(7,14,11,.9));
  box-shadow: inset 0 0 18px rgba(34,255,111,.04),0 0 14px rgba(34,255,111,.05);
}
.cx-simple-transcribe-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.cx-simple-transcribe-progress-head > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cx-simple-transcribe-progress-head span > i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid rgba(34,255,111,.25);
  border-top-color: #22ff6f;
  border-radius: 50%;
  animation: cx-caption-transcribe-spin .75s linear infinite;
}
.cx-simple-transcribe-progress-head b { overflow: hidden; color: #d7f7e2; font: 700 9px/1.25 Arial,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.cx-simple-transcribe-progress-head em { color: #22ff6f; font: 800 9px/1 Arial,sans-serif; font-style: normal; letter-spacing: .08em; }
.cx-simple-transcribe-progress-track { position: relative; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(95,125,105,.18); }
.cx-simple-transcribe-progress-track > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#14c95a,#22ff6f,#62ff9d); box-shadow: 0 0 9px rgba(34,255,111,.55); transition: width .22s ease; }
.cx-simple-transcribe-progress.is-indeterminate .cx-simple-transcribe-progress-track > i { width: 34% !important; animation: cx-caption-transcribe-scan 1.1s ease-in-out infinite; }
.cx-simple-transcribe-progress.is-error { border-color: rgba(255,91,91,.42); background: rgba(27,9,10,.92); }
.cx-simple-transcribe-progress.is-error .cx-simple-transcribe-progress-head span > i { border-color: #ff6464; animation: none; }
.cx-simple-transcribe-progress.is-error .cx-simple-transcribe-progress-head em { color: #ff7c7c; }
.cx-simple-transcribe-progress.is-complete .cx-simple-transcribe-progress-head span > i { border: 0; background: #22ff6f; box-shadow: 0 0 8px rgba(34,255,111,.6); animation: none; }
.cx-simple-transcribe-progress.is-complete .cx-simple-transcribe-progress-track > i { width: 100% !important; }
.cx-simple-srt.is-transcribing #btnSimpleTranscribe { color: #d8ffe5; border-color: rgba(34,255,111,.6); background: rgba(14,76,38,.55); }
@keyframes cx-caption-transcribe-spin { to { transform: rotate(360deg); } }
@keyframes cx-caption-transcribe-scan { 0% { transform: translateX(-115%); } 50% { transform: translateX(100%); } 100% { transform: translateX(285%); } }
/* Caption Studio system-font control */
.cx-simple-font-control{display:grid;grid-template-columns:minmax(0,1fr) 26px;gap:4px;align-items:center}
.cx-simple-font-control input{min-width:0}
#btnSimpleLoadSystemFonts{height:26px;min-width:0;padding:0 5px;border:1px solid rgba(34,255,111,.22);border-radius:6px;background:rgba(6,14,10,.82);color:#a9b9ae;font:800 7px/1 inherit;letter-spacing:.04em;cursor:pointer}
#btnSimpleLoadSystemFonts{font-size:14px;color:#22ff6f}
#btnSimpleLoadSystemFonts:hover{border-color:rgba(34,255,111,.72);color:#22ff6f;background:rgba(34,255,111,.08)}
#btnSimpleLoadSystemFonts:disabled{opacity:.5;cursor:wait}
.cx-simple-font-field small{display:block;min-height:9px;margin-top:2px;color:#66756c;font-size:6px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}