/* CastFlow v100 — Features-first responsive workspace */

/* Top bar brand */
body.yvStandalone .yvBar {
  min-height: 38px;
  box-sizing: border-box;
  padding-inline: 10px;
}
.cfTopBrand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: auto;
  height: 25px;
  max-width: 180px;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
.cfSrOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
.cfUserGlyph {
  width: 14px;
  height: 14px;
  display: inline-block;
  position: relative;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
.cfUserGlyph::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  left: 3.5px;
  top: 2px;
}
.cfUserGlyph span {
  position: absolute;
  width: 8px;
  height: 4px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  left: 1.5px;
  bottom: 1px;
}

/* Features owns navigation; no duplicate tabs in Flow */
.cfC-menu .cfCellBody {
  align-items: stretch !important;
  justify-content: flex-start;
  padding: 7px !important;
  gap: 0 !important;
}
.cfC-menu .cfHeroLogo { display: none !important; }
.cfC-menu .projRail { flex: 1 1 auto; min-height: 0; }
.cfC-lyric #projTabs { display: none !important; }
.cfC-lyric .projSearchRow { display: none !important; }
.cfC-lyric .cfGSIcon { display: none !important; }
.cfC-lyric .cfGSWrap { padding: 7px 10px; }
.cfC-lyric .cfGSWrap input { padding-left: 9px; }
.cfC-lyric:not([data-flow-mode="lagu"]) .cfGSWrap,
.cfC-lyric:not([data-flow-mode="lagu"]) #projFilters { display: none !important; }
.cfC-lyric[data-flow-mode="lagu"] #cfBibleVer { display: none !important; }
.cfC-lyric[data-flow-mode="alkitab"] #cfBibleVer { display: block !important; margin-top: 8px; }
.cfViewToggle[hidden] { display: none !important; }
.cfLyricTitle { color: #fff !important; }

/* Mini Preview cards */
body.yvStandalone .projDeckGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 9px !important;
  align-items: start;
}
body.yvStandalone .projSlideCard {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-height: 0 !important;
  padding: 7px !important;
  text-align: left;
  overflow: hidden;
}
body.yvStandalone .projSlideCard .projSlideNo {
  order: 1;
  min-height: 18px;
}
body.yvStandalone .projSlideCard .cfMiniPreview {
  order: 2;
}
body.yvStandalone .projSlideCard .projSlideBody {
  display: none !important;
}
.cfMiniPreview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 72px;
  overflow: hidden;
  border: 1px solid #34343a;
  border-radius: 7px;
  background: #121214 center/cover no-repeat;
  box-sizing: border-box;
}
.cfMiniPreview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.cfMiniPreview.empty {
  background-color: #19191c !important;
  background-image:
    linear-gradient(45deg, #29292e 25%, transparent 25%),
    linear-gradient(-45deg, #29292e 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #29292e 75%),
    linear-gradient(-45deg, transparent 75%, #29292e 75%) !important;
  background-size: 12px 12px !important;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0 !important;
}
.cfMiniPreview.empty::after { display: none; }
.cfMiniPreviewText {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 86%;
  color: #fff;
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
  white-space: pre-line;
  text-shadow: 0 2px 6px rgba(0,0,0,.9);
}
.cfMiniMotionBadge {
  display: none;
  position: absolute;
  z-index: 3;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(18,130,162,.85);
  color: #fff;
  font: 400 7px/1 inherit;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.cfMiniPreview.has-motion .cfMiniMotionBadge { display: block; }
.projSlideCard.on .cfMiniPreview { border-color: #1282a2; box-shadow: 0 0 0 1px #1282a2; }

/* Professional Design Panel */
.cfC-design .projPaneR { overflow-y: auto !important; overflow-x: hidden; }
.cfC-design .projPaneHead { position: sticky; top: 0; z-index: 8; background: #232326; }
.cfNativeFontSelect {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cfFontPickerBtn {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #3a3a40;
  border-radius: 8px;
  background: #19191c;
  color: #fff;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
}
.cfFontPickerBtn:hover { border-color: #1282a2; }
.cfFontSample {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 9px;
  align-items: center;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid #303035;
  border-radius: 8px;
  background: #1b1b1e;
  color: #fff;
}
.cfFontSample > span { font-size: 23px; line-height: 1; text-align: center; }
.cfFontSample div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfFontSample b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 500; }
.cfFontSample small { color: #8f949f; font-size: 8px; }
.cfFontMenu {
  position: fixed;
  z-index: 2800;
  max-height: 350px;
  padding: 7px;
  border: 1px solid #3a3a40;
  border-radius: 10px;
  background: #1b1b1e;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  box-sizing: border-box;
}
.cfFontMenu[hidden] { display: none !important; }
.cfFontMenu > input { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.cfFontList { max-height: 290px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.cfFontOption {
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e8eaef;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}
.cfFontOption:hover, .cfFontOption.on { background: #2b2b31; color: #fff; }
.cfDesignPro { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.cfDesignGroup {
  border: 1px solid #303035;
  border-radius: 9px;
  background: #1d1d20;
  overflow: hidden;
}
.cfDesignGroup summary {
  padding: 8px 10px;
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid transparent;
}
.cfDesignGroup[open] summary { border-bottom-color: #303035; }
.cfDesignGroup summary::-webkit-details-marker { display: none; }
.cfDesignGroup summary::after { content: "+"; float: right; color: #7d8494; }
.cfDesignGroup[open] summary::after { content: "−"; }
.cfDesignGroupBody { display: flex; flex-direction: column; gap: 8px; padding: 9px; }
.cfDesignRow { display: grid !important; grid-template-columns: 92px minmax(0,1fr); gap: 8px; align-items: center; margin: 0 !important; }
.cfDesignRow > span:first-child { color: #a8adb8; font-size: 9px; }
.cfDesignRow input[type="color"] { width: 100%; height: 28px; padding: 2px; }
.cfRangeWithValue { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 6px; align-items: center; }
.cfRangeWithValue output { color: #7fd4e8; font-size: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.cfMotionGrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
.cfMotionChoice {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  padding: 6px;
  border: 1px solid #34343a;
  border-radius: 7px;
  background: #171719;
  color: #a8adb8;
  cursor: pointer;
}
.cfMotionChoice:hover, .cfMotionChoice.on { border-color: #1282a2; color: #fff; background: #20272a; }
.cfMotionChoice b { font-size: 7.5px; font-weight: 400; text-align: center; }
.cfMotionDemo { display: block; height: 18px; border-radius: 4px; background: linear-gradient(90deg,#1282a2,#7fd4e8); opacity: .8; }
.cfMotionChoice:hover .cfMotionDemo, .cfMotionChoice.on .cfMotionDemo { animation: cfDemo .7s ease both; }
.cfDesignPreviewBtn { border: 1px solid #1282a2; border-radius: 7px; background: rgba(18,130,162,.15); color: #7fd4e8; padding: 7px; cursor: pointer; }
@keyframes cfDemo { from { opacity: 0; transform: translateY(6px) scale(.9); filter: blur(3px); } }

/* Edit / Live / Dual Preview */
.cfPreviewModes {
  display: inline-flex;
  border: 1px solid #3a3a40;
  border-radius: 7px;
  overflow: hidden;
  flex: 0 0 auto;
}
.cfPreviewModes button {
  border: 0;
  border-right: 1px solid #3a3a40;
  background: #1b1b1e;
  color: #8f949f;
  padding: 5px 10px;
  font-size: 8px;
  cursor: pointer;
}
.cfPreviewModes button:last-child { border-right: 0; }
.cfPreviewModes button.on { background: #1282a2; color: #fff; }
.cfLiveFrame {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 4;
}
.cfPreviewPaneLabel {
  display: none;
  position: absolute;
  z-index: 8;
  top: 7px;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,.68);
  color: #fff;
  font: 500 7px/1 inherit;
  letter-spacing: .8px;
  pointer-events: none;
}
.cfEditLabel { left: 7px; }
.cfLiveLabel { right: 7px; }
#cfPrevStage[data-preview-mode="live"] #projPreview { display: none !important; }
#cfPrevStage[data-preview-mode="live"] .cfLiveFrame { display: block; }
#cfPrevStage[data-preview-mode="live"] .cfLiveLabel { display: block; }
#cfPrevStage[data-preview-mode="live"] .cfPrevDrop { display: none !important; }
#cfPrevStage[data-preview-mode="dual"] #projPreview {
  display: flex !important;
  position: absolute !important;
  left: 1% !important;
  top: 50% !important;
  width: 48% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%) !important;
  inset: auto !important;
}
#cfPrevStage[data-preview-mode="dual"] .cfLiveFrame {
  display: block;
  left: 51%;
  right: 1%;
  top: 50%;
  bottom: auto;
  width: 48%;
  height: auto;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
  border: 1px solid #34343a;
  border-radius: 7px;
}
#cfPrevStage[data-preview-mode="dual"] .cfEditLabel,
#cfPrevStage[data-preview-mode="dual"] .cfLiveLabel { display: block; }
#cfPrevStage[data-preview-mode="dual"] .cfLiveLabel { left: 52%; right: auto; }
#cfPrevStage[data-preview-mode="dual"] .cfPrevDrop { display: none !important; }

/* Preview text design controls */
#projPreviewText[data-position="top"] { align-self: flex-start; margin-top: 8%; }
#projPreviewText[data-position="bottom"] { align-self: flex-end; margin-bottom: 8%; }
.cfTextAnim-fade { animation: cfTextFade var(--cf-motion-duration,.55s) ease both; }
.cfTextAnim-rise { animation: cfTextRise var(--cf-motion-duration,.55s) cubic-bezier(.2,.8,.2,1) both; }
.cfTextAnim-slide-left { animation: cfTextSlide var(--cf-motion-duration,.55s) cubic-bezier(.2,.8,.2,1) both; }
.cfTextAnim-zoom { animation: cfTextZoom var(--cf-motion-duration,.55s) cubic-bezier(.2,.8,.2,1) both; }
.cfTextAnim-blur { animation: cfTextBlur var(--cf-motion-duration,.55s) ease both; }
.cfTextAnim-pop { animation: cfTextPop var(--cf-motion-duration,.55s) cubic-bezier(.2,1.4,.3,1) both; }
.cfTextAnim-typewriter { animation: cfTextType var(--cf-motion-duration,.55s) steps(16,end) both; overflow: hidden; white-space: nowrap; }
@keyframes cfTextFade { from { opacity: 0; } }
@keyframes cfTextRise { from { opacity:0; transform:translateY(24px); } }
@keyframes cfTextSlide { from { opacity:0; transform:translateX(-36px); } }
@keyframes cfTextZoom { from { opacity:0; transform:scale(.82); } }
@keyframes cfTextBlur { from { opacity:0; filter:blur(12px); } }
@keyframes cfTextPop { from { opacity:0; transform:scale(.65); } }
@keyframes cfTextType { from { width:0; } to { width:100%; } }

/* Live output extended typography */
#displayScreen .dispTextBlock {
  color: var(--yv-color, #fff);
  font-weight: var(--yv-weight, 500);
  letter-spacing: var(--yv-spacing, 0px);
  line-height: var(--yv-line-height, 1.2);
  opacity: var(--yv-opacity, 1);
  text-transform: var(--yv-transform, none);
}
.tlAnim-rise { animation: cfTextRise var(--yv-motion-duration,.55s) cubic-bezier(.2,.8,.2,1) both; }
.tlAnim-slide-left { animation: cfTextSlide var(--yv-motion-duration,.55s) cubic-bezier(.2,.8,.2,1) both; }
.tlAnim-blur { animation: cfTextBlur var(--yv-motion-duration,.55s) ease both; }
.tlAnim-pop { animation: cfTextPop var(--yv-motion-duration,.55s) cubic-bezier(.2,1.4,.3,1) both; }
.tlAnim-typewriter { animation: cfTextType var(--yv-motion-duration,.55s) steps(16,end) both; overflow:hidden; white-space:nowrap; }

/* Flexible 100% zoom layout */
body.yvStandalone .projPage.open {
  height: calc(100dvh - 38px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.yvStandalone .projGrid.cfWork {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.cfCell, .cfCell > .projPane, .cfCell > .cfCellBody { min-height: 0; min-width: 0; }
.cfC-lyric .projPaneC, .cfC-playlist .projPaneL, .cfC-design .projPaneR { overflow: auto !important; }

@media (max-width: 1280px) {
  .cfTopBrand { height: 22px; max-width: 140px; }
  body.yvStandalone .yvBarNote { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cfDesignRow { grid-template-columns: 78px minmax(0,1fr); }
  .cfMotionGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.yvStandalone .projDeckGrid { grid-template-columns: repeat(auto-fill, minmax(145px,1fr)) !important; }
}
@media (max-height: 760px) and (min-width: 901px) {
  body.yvStandalone .yvBar { min-height: 32px; padding-block: 2px; }
  body.yvStandalone .projPage.open { height: calc(100dvh - 32px) !important; }
  body.yvStandalone .projGrid.cfWork { padding: 5px; }
  .cfCell > .cfCellHead { padding: 5px 8px; }
  .cfC-menu .cfCellBody { padding: 4px !important; }
  .cfC-menu .projRailBtn { padding-block: 5px !important; }
  .cfC-preview .cfPrevStage { margin: 5px; }
  .cfC-design .projPaneR { padding-bottom: 12px; }
  .cfFontSample { padding: 5px; }
}
@media (max-width: 900px) {
  .cfTopBrand { display: none; }
  body.yvStandalone .projPage.open { height: auto !important; min-height: calc(100dvh - 38px) !important; overflow: auto !important; }
  body.yvStandalone .projGrid.cfWork { overflow: visible; }
  .cfCell { min-height: 260px; }
  .cfC-menu { min-height: 220px; }
  .cfC-preview { min-height: 360px; }
  .cfC-lyric { min-height: 420px; }
  .cfC-design { min-height: 520px; }
}