/* ============================================================
   ORBIT POLISH — loaded last

   Small fixes found by rendering every tab at 900x700 and 380x760,
   plus the styling for js/orbit-polish.js (Quick Find, Interface
   size, logo fallback).
   ============================================================ */

/* ---- Library: the shelf row carries three shelves now ---- */
#app #panel-sfx > .asset-type-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ---- Library TEXT: the 44px box under the cards was a placeholder
   for a dock that lives at the bottom of the panel now. ---- */
#app #panel-sfx > #textAnimView::after {
  display: none !important;
  content: none !important;
}

/* ---- Rail: on short panels the tabs no longer fit and Settings /
   Logout fell off the bottom. Tighter tabs keep them on screen. ---- */
@media (max-height: 780px) {
  #app #appTabsRow {
    gap: 1px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  #app #appTabsRow .app-tab,
  #app #appTabsRow .rail-account {
    height: 36px !important;
    min-height: 36px !important;
    gap: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
}
@media (max-height: 640px) {
  #app #appTabsRow .app-tab,
  #app #appTabsRow .rail-account {
    height: 30px !important;
    min-height: 30px !important;
  }
  #app #appTabsRow .orbit-tab-label,
  #app #appTabsRow .rail-account-label {
    display: none !important;
  }
}

/* ---- Native checkboxes, radios and sliders in the theme colour ---- */
#app input[type="checkbox"],
#app input[type="radio"],
#app input[type="range"] {
  accent-color: #3cff5f;
}

/* ---- Logo fallback (assets/compx-mark.png missing) ---- */
.orbit-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 7px;
  background: radial-gradient(circle at 35% 30%, #1d3a26 0%, #0a120c 70%);
  box-shadow: inset 0 0 0 1px #2a4a34, 0 0 10px rgba(60, 255, 95, 0.18);
}
.orbit-logo-fallback svg {
  width: 72%;
  height: 72%;
  fill: none;
  stroke: #3cff5f;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.orbit-logo-fallback svg circle.core {
  fill: #3cff5f;
  stroke: none;
}

/* ---- Quick Find button in the title bar ---- */
#app .orbit-find-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 8px !important;
  border: 1px solid #22322a !important;
  border-radius: 7px !important;
  background: rgba(8, 14, 10, 0.85) !important;
  color: #8ba295 !important;
  font: 500 10px/1 "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
#app .orbit-find-btn:hover,
#app .orbit-find-btn:focus-visible {
  border-color: #3cff5f !important;
  color: #eafff0 !important;
  outline: none !important;
}
#app .orbit-find-btn svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
#app .orbit-find-btn kbd {
  padding: 1px 4px;
  border: 1px solid #22322a;
  border-radius: 4px;
  color: #6d7f74;
  font: 600 8px/1.2 "Segoe UI", sans-serif;
}
@media (max-width: 520px) {
  #app .orbit-find-btn span,
  #app .orbit-find-btn kbd {
    display: none !important;
  }
  #app .orbit-find-btn {
    width: 26px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

/* ---- Quick Find palette ---- */
.orbit-find {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 12px 12px;
  background: rgba(2, 5, 3, 0.62);
}
.orbit-find[hidden] {
  display: none;
}
.orbit-find-box {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: min(460px, calc(100vh - 80px));
  border: 1px solid #22322a;
  border-radius: 12px;
  background: #0a110c;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(60, 255, 95, 0.06);
  overflow: hidden;
}
.orbit-find-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #1b2720;
}
.orbit-find-head svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #3cff5f;
  stroke-width: 2;
  stroke-linecap: round;
}
.orbit-find-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eafff0;
  font: 500 13px/1 "Segoe UI", sans-serif;
  outline: none;
}
.orbit-find-input::placeholder {
  color: #6d7f74;
}
.orbit-find-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 5px;
  overflow-y: auto;
  list-style: none;
}
.orbit-find-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
}
.orbit-find-item b {
  overflow: hidden;
  color: #eafff0;
  font: 600 11px/1.25 "Segoe UI", sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.orbit-find-item b mark {
  background: none;
  color: #3cff5f;
}
.orbit-find-item small {
  grid-column: 1;
  overflow: hidden;
  color: #6d7f74;
  font: 500 9.5px/1.3 "Segoe UI", sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.orbit-find-item em {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 2px 6px;
  border: 1px solid #22322a;
  border-radius: 5px;
  color: #8ba295;
  font: 600 9px/1.2 "Segoe UI", sans-serif;
  font-style: normal;
  white-space: nowrap;
}
.orbit-find-item.is-on {
  background: #13221a;
  box-shadow: inset 2px 0 0 #3cff5f;
}
.orbit-find-empty {
  padding: 18px 10px;
  color: #6d7f74;
  font: 500 11px/1.4 "Segoe UI", sans-serif;
  text-align: center;
}
.orbit-find-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 7px 12px;
  border-top: 1px solid #1b2720;
  color: #6d7f74;
  font: 500 9px/1.3 "Segoe UI", sans-serif;
}
.orbit-find-foot kbd {
  padding: 0 4px;
  border: 1px solid #22322a;
  border-radius: 3px;
  color: #8ba295;
  font: 600 8.5px/1.4 "Segoe UI", sans-serif;
}

/* The control Quick Find took you to */
.orbit-find-flash {
  outline: 2px solid #3cff5f !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(60, 255, 95, 0.18), 0 0 16px rgba(60, 255, 95, 0.35) !important;
  transition: outline-color 0.2s ease !important;
}

/* ---- Interface size card (Plugin Settings) ---- */
.orbit-uiscale-card {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #22322a;
  border-radius: 10px;
  background: #0b120d;
}
.orbit-uiscale-card h4 {
  margin: 0 0 3px;
  color: #eafff0;
  font: 700 11px/1.3 "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
}
.orbit-uiscale-card p {
  margin: 0 0 8px;
  color: #6d7f74;
  font: 500 9.5px/1.4 "Segoe UI", sans-serif;
}
.orbit-uiscale-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.orbit-uiscale-row button {
  height: 26px;
  min-height: 26px;
  margin: 0;
  padding: 0;
  border: 1px solid #22322a;
  border-radius: 6px;
  background: #070c08;
  color: #8ba295;
  font: 600 10px/1 "Segoe UI", sans-serif;
  cursor: pointer;
}
.orbit-uiscale-row button:hover {
  color: #eafff0;
  border-color: #2f4a39;
}
.orbit-uiscale-row button[aria-pressed="true"] {
  border-color: #3cff5f;
  background: #12251a;
  color: #eafff0;
}

/* ============================================================
   Caption Studio: step-by-step flow
   01 Source > 02 Timing > 03 Animation (optional) > 04 Text
   ============================================================ */
#flexAutoCaptions .cx-simple-step-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 8px;
}
#flexAutoCaptions .cx-simple-step-title b {
  color: #eafff0;
  font: 700 12px/1.25 "Segoe UI", sans-serif;
}
#flexAutoCaptions .cx-simple-step-title small {
  color: #8ba295;
  font: 500 10px/1.35 "Segoe UI", sans-serif;
}
#flexAutoCaptions .cx-simple-step-nav {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 10px;
}
#flexAutoCaptions .cx-simple-step-nav .tool-btn {
  flex: 0 1 auto;
  min-width: 90px;
  font-size: 10px !important;
}
#flexAutoCaptions .cx-simple-step-nav .tool-btn.primary {
  margin-left: auto;
}
#flexAutoCaptions .cx-cap-stepbar-step small {
  white-space: nowrap;
}

/* Timing report and cue list */
#flexAutoCaptions .cx-srt-timing {
  margin: 8px 0 6px;
  padding: 7px 9px;
  border: 1px solid #22322a;
  border-radius: 7px;
  font: 500 10px/1.4 "Segoe UI", sans-serif;
}
#flexAutoCaptions .cx-srt-timing:empty {
  display: none;
}
#flexAutoCaptions .cx-srt-timing.is-ok {
  color: #9ff5b3;
  background: rgba(60, 255, 95, 0.06);
}
#flexAutoCaptions .cx-srt-timing.has-warn {
  color: #ffd98a;
  border-color: rgba(255, 193, 77, 0.35);
  background: rgba(255, 193, 77, 0.07);
}
#flexAutoCaptions .cx-srt-cues {
  max-height: 180px;
  margin: 0 0 8px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid #1b2720;
  border-radius: 7px;
  background: #070c08;
}
#flexAutoCaptions .cx-srt-cues:empty {
  display: none;
}
#flexAutoCaptions .cx-srt-cues li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 10px;
  padding: 5px 8px;
  border-bottom: 1px solid #111a14;
}
#flexAutoCaptions .cx-srt-cues li:last-child {
  border-bottom: 0;
}
#flexAutoCaptions .cx-srt-cues time {
  color: #6d7f74;
  font: 600 9.5px/1.4 Consolas, "Segoe UI", monospace;
  white-space: nowrap;
}
#flexAutoCaptions .cx-srt-cues span {
  overflow: hidden;
  color: #d8eadc;
  font: 500 10.5px/1.4 "Segoe UI", "Hind Siliguri", sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#flexAutoCaptions .cx-srt-cues em {
  grid-column: 2;
  color: #ffc14d;
  font: 600 9px/1.3 "Segoe UI", sans-serif;
  font-style: normal;
}
#flexAutoCaptions .cx-srt-cues li.has-warn time {
  color: #ffc14d;
}
#flexAutoCaptions .cx-simple-timing-base {
  margin-top: 4px;
}

/* Step 3: "None" is a real choice now */
#flexAutoCaptions #btnSimpleTemplateClear {
  min-width: 52px;
}

/* Step 4: numbered fields and a recap of every choice */
#flexAutoCaptions [data-simple-stage-panel="text"] .cx-quickstyle-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}
#flexAutoCaptions [data-simple-stage-panel="text"] .cx-cap-field > span {
  color: #cfe9d6 !important;
  font-weight: 700 !important;
}
#flexAutoCaptions .cx-simple-recap {
  margin: 8px 0 0;
  padding: 7px 9px;
  border: 1px dashed #2a382f;
  border-radius: 7px;
  color: #9fb4a6;
  font: 500 10px/1.45 "Segoe UI", sans-serif;
}
#flexAutoCaptions .cx-simple-recap:empty {
  display: none;
}
#flexAutoCaptions .cx-simple-replace-note {
  display: block;
  margin-top: 6px;
  color: #6d7f74;
  font: 500 9px/1.35 "Segoe UI", sans-serif;
}

/* Source: model advice for Bangla */
#flexAutoCaptions .cx-simple-lang-hint {
  margin: 6px 0 8px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 193, 77, 0.35);
  border-radius: 7px;
  background: rgba(255, 193, 77, 0.07);
  color: #ffd98a;
  font: 500 10px/1.45 "Segoe UI", sans-serif;
}
#flexAutoCaptions .cx-simple-lang-hint[hidden] {
  display: none;
}
#flexAutoCaptions .cx-simple-lang-hint b {
  color: #fff1cc;
}

/* Guide Grid modal: the close button sat right against the title */
#guideGridModal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
#guideGridModal #btnGuideGridClose {
  margin-left: auto !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* ============================================================
   Colors tab: same visual language as the rest of the panel
   (line icons in the theme green, one primary-button style)
   ============================================================ */
#panel-colors .cx-color-card-icon {
  background: #0d150f !important;
  border: 1px solid #22322a !important;
  color: #3cff5f !important;
}
#panel-colors .cx-color-card-icon svg,
#panel-colors .cx-eyedropper-btn svg,
#panel-colors .cx-stop-eyedropper svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#panel-colors .cx-color-card-icon svg circle[r=".9"] {
  fill: currentColor;
  stroke: none;
}
#panel-colors .cx-eyedropper-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0b120d !important;
  border: 1px solid #2a382f !important;
  color: #79f0a2 !important;
}
#panel-colors .cx-eyedropper-btn:hover,
#panel-colors .cx-eyedropper-btn.is-active {
  border-color: #3cff5f !important;
  color: #eafff0 !important;
}
#panel-colors .cx-stop-eyedropper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #79f0a2 !important;
}
#panel-colors .cx-stop-eyedropper svg {
  width: 12px;
  height: 12px;
}
/* The one primary action matches the other tabs' primary buttons
   instead of a bright gradient block. */
#panel-colors .cx-btn.cx-btn-primary {
  background: linear-gradient(180deg, #16301f, #0e1f14) !important;
  border: 1px solid #3cff5f !important;
  color: #dfffe6 !important;
  box-shadow: 0 0 10px rgba(60, 255, 95, 0.14) !important;
  text-shadow: none !important;
}
#panel-colors .cx-btn.cx-btn-primary:hover {
  background: linear-gradient(180deg, #1c3d27, #12281a) !important;
  color: #ffffff !important;
}
#panel-colors .cx-stop-eyedropper {
  gap: 5px !important;
}
#panel-colors .cx-stop-eyedropper span {
  font: 700 8.5px/1 "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
}

/* ============================================================
   Caption Studio: fit narrow panels
   The simple-caption grid sized its column from content, so the
   step bar and source cards ran past the right edge below ~450px.
   ============================================================ */
#flexAutoCaptions .cx-simple-srt { grid-template-columns: minmax(0, 1fr) !important; }
#flexAutoCaptions .cx-simple-srt > * { min-width: 0; }
#flexAutoCaptions .cx-cap-stepbar-step { min-width: 0 !important; }
#flexAutoCaptions .cx-cap-stepbar-step small { font-size: 7.5px !important; }
#flexAutoCaptions .cx-cap-sources { margin-bottom: 10px; }
#flexAutoCaptions .cx-cap-source-card { min-width: 0; }
#flexAutoCaptions .cx-cap-source-icon svg { width: 15px; height: 15px; }
@media (max-width: 460px) {
  #flexAutoCaptions .cx-cap-stepbar { gap: 2px !important; padding: 5px !important; }
  #flexAutoCaptions .cx-cap-stepbar-arrow { display: none; }
  #flexAutoCaptions .cx-cap-stepbar-step { padding: 5px 1px !important; }
  #flexAutoCaptions .cx-cap-stepbar-step small { display: none; }
  #flexAutoCaptions .cx-cap-stepbar-step b { font-size: 7.5px !important; letter-spacing: 0.06em !important; }
  #flexAutoCaptions .cx-cap-sources { grid-template-columns: minmax(0, 1fr) !important; }
  #flexAutoCaptions .cx-cap-source-or { justify-self: center; }
  #flexAutoCaptions .cx-cap-source-card {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas: "icon title" "icon sub" "btn btn" "file file";
    column-gap: 9px !important; row-gap: 3px !important;
    align-items: center !important;
    text-align: left !important;
  }
  #flexAutoCaptions .cx-cap-source-icon { grid-area: icon; margin: 0 !important; }
  #flexAutoCaptions .cx-cap-source-card strong { grid-area: title; }
  #flexAutoCaptions .cx-cap-source-card > span { grid-area: sub; }
  #flexAutoCaptions .cx-cap-source-card .tool-btn { grid-area: btn; margin-top: 4px; }
  #flexAutoCaptions .cx-cap-source-card .cx-simple-srt-file { grid-area: file; text-align: center; }
  #flexAutoCaptions .cx-simple-srt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* MOGRT library toolbar: line icons instead of letters */
#sfxMogrtView [data-orbit-lib-ico] { font-size: 0 !important; }
#sfxMogrtView [data-orbit-lib-ico] svg.orbit-lib-ico {
  width: 14px; height: 14px;
  display: block;
  pointer-events: none;
}
#sfxMogrtView .lib-view-btn[data-orbit-lib-ico] svg.orbit-lib-ico,
#sfxMogrtView #btnRefreshView svg.orbit-lib-ico { width: 13px; height: 13px; }


/* ============================================================
   Top dock: Reverse Keys (replaces the Quick FX flyout)
   ============================================================ */
#app :is(#panel-tools,#orbitGlobalDock,#orbitBottomDock) [data-orbit-icon="reverse-keys"] { --orbit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233cff5f%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209.5l2.5%202.5L6%2014.5%203.5%2012z%22%2F%3E%3Cpath%20d%3D%22M18%209.5l2.5%202.5-2.5%202.5-2.5-2.5z%22%2F%3E%3Cpath%20d%3D%22M8%205.5h8.5M14%203l2.5%202.5L14%208%22%2F%3E%3Cpath%20d%3D%22M16%2018.5H7.5M10%2016l-2.5%202.5L10%2021%22%2F%3E%3C%2Fsvg%3E"); }
#app #orbitGlobalDock:not(.is-scrollable) .gdock-key-grid.gdock-flip-grid {
  flex: 1 0 auto !important;
  grid-template-columns: minmax(var(--gd-btn), 1fr) !important;
}
#app #orbitGlobalDock .gdock-key-grid.gdock-flip-grid { grid-template-columns: var(--gd-btn, 28px) !important; }
#app #orbitGlobalDock #orbitDockReverseKeys.is-busy { opacity: 0.5 !important; pointer-events: none !important; }

/* ============================================================
   Tools > TEXT / MASK TOOLS: Quick FX row fills the empty half
   ============================================================ */
#app #panel-tools .subgroup-textmask .tools-quickfx-title { margin-top: 8px !important; }
#app #panel-tools .subgroup-textmask .tools-quickfx-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
#app #panel-tools .subgroup-textmask .tools-quickfx-grid .tool-btn {
  min-width: 0 !important;
  font-size: 9.5px !important;
  padding: 4px 2px !important;
}
#app #panel-tools .subgroup-textmask .tools-quickfx-grid .tool-btn[data-orbit-icon]::before {
  flex-basis: 15px !important;
  width: 15px !important;
  height: 15px !important;
}
#app #panel-tools .subgroup-textmask .tools-quickfx-title { --section-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20color%3D%22%233cff5f%22%20stroke%3D%22%233cff5f%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m14%202-9%2012h7l-2%208%209-12h-7l2-8Z%22%2F%3E%3C%2Fsvg%3E"); }