#video-studio[hidden], #image-studio[hidden], #image-page-heading[hidden] { display: none !important; }
.video-studio { min-width: 0; padding-bottom: 28px; }
.video-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 34px 0 26px; }
.video-page-heading h1 { margin: 12px 0 8px; font: 48px/.99 var(--serif); letter-spacing: -1.4px; }
.video-page-heading .eyebrow { display: flex; align-items: center; gap: 8px; }
.video-page-heading .eyebrow span { width: 18px; height: 1px; background: #b6c2b9; }
.video-back-link { flex: 0 0 auto; margin-bottom: 4px; color: var(--green); font-size: 11px; font-weight: 700; text-decoration: none; }
.video-back-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.video-grid { display: grid; grid-template-columns: minmax(330px, .84fr) minmax(0, 1.16fr); align-items: start; gap: 22px; min-width: 0; }
.video-grid > *, .video-controls-panel > * { min-width: 0; }
.video-controls-panel, .video-preview-panel { border: 1px solid #e5e9e4; border-radius: 8px; background: var(--paper); }
.video-controls-panel { padding: 3px 23px 17px; }
.video-control-section { padding: 18px 0; border-bottom: 1px solid #edf0ec; }
.video-control-section:last-child { padding-bottom: 12px; border-bottom: 0; }
.video-control-section .section-heading { margin-bottom: 13px; }
.video-control-section .section-heading h2 { font-size: 13px; }
.video-control-section .section-heading p { font-size: 10px; }
.video-source-preview { display: grid; grid-template-columns: 46px minmax(0,1fr) 8px; align-items: center; gap: 10px; min-height: 63px; padding: 8px 10px; border: 1px solid #e7ece7; border-radius: 6px; background: #fafbf9; }
.video-source-thumb { display: grid; width: 44px; height: 48px; place-items: center; overflow: hidden; border-radius: 4px; background: #e8eee8; }
.video-source-thumb canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.video-source-preview strong, .video-source-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-source-preview strong { color: #34443a; font-size: 11px; font-weight: 700; }
.video-source-preview small { margin-top: 4px; color: #8a958d; font-size: 9px; }
.source-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #68a77c; }
.video-inline-error { min-height: 0; margin: 0; color: var(--red); font-size: 10px; line-height: 1.45; }
.video-inline-error:not(:empty) { margin-top: 6px; }
.video-choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.video-style-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.video-style-option { display: grid; min-width: 0; gap: 5px; padding: 7px; border: 1px solid #e5e9e4; border-radius: 6px; color: #657168; cursor: pointer; }
.video-style-option:has(input:checked) { border-color: #72a283; background: #f5f9f5; color: var(--green-dark); }
.video-style-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.video-style-option strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.video-style-option small { overflow: hidden; color: #929b94; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.video-style-preview { position: relative; display: block; height: 42px; overflow: hidden; border-radius: 3px; }
.video-style-preview i { position: absolute; display: block; border-radius: 2px; }
.video-modern-preview { background: #e5eee4; }.video-modern-preview i:nth-child(1) { inset: 6px auto auto 8px; width: 24px; height: 6px; background: #315e43; }.video-modern-preview i:nth-child(2) { right: 9px; top: 6px; width: 20px; height: 29px; background: #abc9a4; }.video-modern-preview i:nth-child(3) { left: 9px; bottom: 7px; width: 37px; height: 7px; background: #fff; }
.video-offer-preview { background: #173f30; }.video-offer-preview i:nth-child(1) { inset: 7px auto auto 7px; width: 17px; height: 24px; background: #f1c554; }.video-offer-preview i:nth-child(2) { right: 8px; top: 8px; width: 21px; height: 22px; background: #f7efe3; }.video-offer-preview i:nth-child(3) { left: 7px; bottom: 5px; width: 31px; height: 4px; background: #e77959; }
.video-premium-preview { background: #f0ece2; }.video-premium-preview i:nth-child(1) { left: 8px; top: 8px; width: 30px; height: 4px; background: #a68c60; }.video-premium-preview i:nth-child(2) { right: 10px; top: 7px; width: 17px; height: 28px; background: #d9d0bf; }.video-premium-preview i:nth-child(3) { left: 8px; bottom: 7px; width: 38px; height: 3px; background: #9b8359; }
.video-select-row { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 10px; }
.video-field { display: grid; min-width: 0; gap: 6px; margin-bottom: 10px; }
.video-field label, .video-audio-options label { color: #46534a; font-size: 10px; font-weight: 650; }
.video-field select { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid #dfe5df; border-radius: 5px; background: #fff; color: #38463d; font-size: 10px; }
.video-field select:focus-visible, .audio-upload-button:focus-visible, .video-style-option:has(input:focus-visible) { outline: 3px solid #82b99a; outline-offset: 2px; }
.video-fps-field { margin-bottom: 4px; }
.video-help-text { display: block; color: #89938c; font-size: 9px; line-height: 1.45; }
.audio-upload-button { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 10px; border: 1px dashed #cbd5ce; border-radius: 5px; background: #fbfcfa; color: #526259; font-size: 10px; font-weight: 650; cursor: pointer; }
.audio-upload-button:hover { border-color: var(--green); background: #f4f8f4; }
.audio-upload-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.audio-control-section > .video-help-text { margin-top: 6px; }
.video-audio-options { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 10px; margin-top: 10px; }
.video-audio-options[hidden] { display: none; }
.video-audio-options output { color: #6f7a72; font-size: 10px; font-variant-numeric: tabular-nums; }
.video-audio-options input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--green); }
.text-button { justify-self: end; padding: 2px 0; border: 0; background: transparent; color: #738078; font-size: 9px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.video-format-status { display: flex; align-items: center; gap: 7px; color: #53645a; font-size: 10px; font-weight: 700; }
.format-pulse { width: 7px; height: 7px; border-radius: 50%; background: #69a67c; }
.video-format-status.is-unsupported .format-pulse { background: #d39148; }
.video-format-note { margin: 7px 0 12px; color: #89938c; font-size: 9px; line-height: 1.5; }
.video-actions { display: flex; gap: 8px; }
.video-actions .button-primary { min-width: 0; }
.video-actions .button-quiet { min-width: 75px; }
.video-actions [hidden], #video-download-link[hidden], #video-progress[hidden] { display: none; }
#video-progress { display: block; width: 100%; height: 6px; margin-top: 12px; accent-color: var(--green); }
.video-export-status { min-height: 15px; margin: 8px 0 0; color: #7d8981; font-size: 9px; line-height: 1.45; }
.video-export-status.is-error { color: var(--red); }
.video-download-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 7px 9px; border: 1px solid #dce5dd; border-radius: 4px; background: #f8fbf8; color: var(--green-dark); font-size: 10px; font-weight: 700; text-decoration: none; }
.video-download-link:hover { background: #eff6ef; }
.video-download-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.video-preview-column { display: grid; min-width: 0; gap: 12px; }
.video-preview-panel { min-width: 0; padding: 19px 18px 0; }
.video-preview-header { display: flex; align-items: center; justify-content: space-between; }
.video-preview-header h2 { margin: 5px 0 0; font-size: 15px; }
.video-duration-pill { padding: 5px 8px; border: 1px solid #e7ebe6; border-radius: 4px; color: #7b867e; font-size: 9px; font-variant-numeric: tabular-nums; }
.video-monitor { position: relative; display: grid; min-width: 0; min-height: 390px; max-height: min(72vh, 760px); margin: 15px 0 0; padding: 12px; place-items: center; overflow: hidden; border-radius: 5px 5px 0 0; background-color: #f4f5f1; background-image: radial-gradient(#dfe4dd .8px, transparent .8px); background-size: 13px 13px; }
#video-preview-canvas, #video-rendered-preview { display: block; max-width: 100%; max-height: min(68vh, 720px); width: auto; height: auto; aspect-ratio: 9 / 16; background: #eaf1e8; box-shadow: 0 8px 26px #243a2a1c; }
#video-preview-canvas[hidden], #video-rendered-preview[hidden] { display: none; }
#video-rendered-preview { object-fit: contain; }
.video-preview-placeholder { position: absolute; inset: 12px; display: grid; align-content: center; justify-items: center; gap: 9px; color: #627067; text-align: center; pointer-events: none; }
.video-preview-placeholder[hidden] { display: none; }
.video-preview-placeholder strong { font: 18px var(--serif); }
.video-preview-placeholder > span:last-child { max-width: 210px; color: #89938c; font-size: 10px; line-height: 1.5; }
.video-play-mark { display: grid; width: 42px; height: 42px; place-items: center; padding-left: 3px; border: 1px solid #d7e3d7; border-radius: 50%; background: #fffefa; color: var(--green); font-size: 13px; }
.video-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; border-top: 1px solid #ebefea; color: #879189; font-size: 9px; }
.video-preview-footer > span:first-child { display: flex; align-items: center; gap: 7px; }
.video-preview-footer #video-output-detail { text-align: right; }
.video-preview-actions { display: flex; gap: 8px; padding: 0 0 14px; }
.video-preview-actions .button { min-height: 34px; padding: 0 10px; font-size: 10px; }
.video-preview-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.video-disclosure { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: #8d978f; font-size: 9px; line-height: 1.5; }
.video-disclosure svg { flex: 0 0 auto; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
@media (max-width: 1120px) {
  .video-grid { grid-template-columns: minmax(0, 1fr); }
  .video-preview-column { grid-row: 1; }
  .video-monitor { min-height: 350px; }
}
@media (max-width: 850px) {
  .main-nav { display: flex; align-items: center; gap: 4px; }
  .nav-item { min-height: 36px; padding: 0 8px; font-size: 11px; }
  .video-page-heading { padding: 28px 0 21px; }
  .video-page-heading h1 { font-size: 40px; }
  .video-grid { gap: 14px; }
  .video-controls-panel { padding-right: 18px; padding-left: 18px; }
}
@media (max-width: 650px) {
  .video-page-heading { align-items: flex-start; flex-direction: column; gap: 9px; padding: 24px 0 18px; }
  .video-page-heading h1 { font-size: 35px; line-height: 1.02; }
  .video-page-heading .page-subtitle { max-width: 320px; }
  .video-back-link { margin: 0; }
  .video-controls-panel { padding: 1px 15px 14px; }
  .video-control-section { padding: 16px 0; }
  .video-preview-panel { padding: 15px 13px 0; }
  .video-monitor { min-height: clamp(350px, 100vw, 480px); max-height: 72vh; padding: 10px; }
  #video-preview-canvas, #video-rendered-preview { max-height: calc(72vh - 44px); }
  .video-preview-placeholder { inset: 10px; }
  .video-style-option { padding: 6px; }
  .video-style-preview { height: 36px; }
  .video-style-option strong { font-size: 8px; }
  .video-style-option small { font-size: 7px; }
}
@media (max-width: 390px) {
  .brand-copy { display: none; }
  .brand { margin-left: 0; }
  .main-nav { gap: 2px; }
  .nav-label { display: none; }
  .nav-item { justify-content: center; width: 37px; padding: 0; }
  .video-controls-panel { padding-right: 12px; padding-left: 12px; }
  .video-style-options { gap: 5px; }
  .video-preview-footer { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .video-style-option, .video-download-link { transition: none; } }