/* Dense creator workspace. One visual hierarchy shared by captions and elements. */
body .workspace .khs-form,body .workspace .field-label{font-weight:450!important}
body .workspace .khs-form>label{grid-template-columns:88px minmax(0,1fr)!important;gap:8px!important}
body .workspace main[data-pane=captions] .khs-form>label{grid-template-columns:88px minmax(0,1fr)!important}
body .workspace .field-label{font-size:11px!important;line-height:16px!important;white-space:nowrap}
body .workspace .controls-label{font-size:11px;font-weight:600;margin:0 0 10px;color:#c2c2c2;letter-spacing:.02em}
#caption-controls-head,#element-controls-head{display:flex;align-items:center;gap:8px;height:30px;flex:0 0 auto}
#caption-controls-head[hidden],#element-controls-head[hidden]{display:none!important}
#caption-controls-head>div{margin-left:auto}
#caption-controls-head strong,#element-controls-head strong{font-size:12px!important;font-weight:500!important;line-height:18px}
#element-controls-head strong{margin-left:auto}
#caption-back,#element-back{border:0!important;background:transparent!important;box-shadow:none!important;padding:3px 1px!important;font-size:11px!important;color:#bdbdbd;min-height:26px!important}
body .workspace .parameters-card{background:#252525!important;border:1px solid #343434!important;box-shadow:none!important;border-radius:9px!important;padding:10px!important}
body .workspace .segmented{background:#1d1d1d!important;border:1px solid #363636!important;border-radius:7px!important}
body .workspace .segmented button{font-weight:500!important;box-shadow:none!important;background:transparent!important;color:#aaa!important}
body .workspace .segmented button.on{background:#1457ff!important;color:#fff!important;border:0!important}
body .workspace .khs-dd-btn,.font-select{background:#191919!important;border:1px solid #3b3b3b!important;box-shadow:none!important;border-radius:6px!important;font-weight:450!important;min-height:29px!important;font-size:11px!important}
.font-control{min-width:0;display:flex}.font-select{width:100%;text-align:left;padding:6px 8px!important;color:#e4e4e4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.font-select::after{content:'⌕';float:right;color:#969696}
body .workspace details>summary{list-style:none;font-weight:500!important;font-size:11px!important;min-height:24px!important;display:flex;align-items:center;gap:8px;cursor:pointer}
body .workspace details>summary::-webkit-details-marker{display:none}
body .workspace details>summary::before{content:''!important;display:inline-block!important;width:5px!important;height:5px!important;border-right:1.5px solid #9c9c9c;border-bottom:1.5px solid #9c9c9c;transform:rotate(-45deg);background:none!important;flex:0 0 5px!important;margin:0 2px 0 1px!important}
body .workspace details[open]>summary::before{transform:rotate(45deg)}
body .workspace .khs-reset-btn{background:transparent!important;border:0!important;color:#999!important;font-weight:450!important;justify-self:end;font-size:10px!important}
#caption-style-options{border-bottom:0!important;padding-bottom:0!important;margin-bottom:0!important}
#caption-style-options>.khs-swatches{padding:0 0 8px 96px}
#params-asr{border-top:1px solid #373737!important;margin-top:8px!important;padding-top:8px!important}
#params-asr .khs-pair{display:grid;grid-template-columns:1fr!important;gap:8px!important}
#params-asr .khs-pair>label{display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;align-items:center}
#caption-reading button{padding:4px 2px!important}
#text-card .khs-text-body>p,.khs-transcript-empty{font-size:10px!important;line-height:15px!important}
#caption-language{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
#caption-language>label{display:grid!important;grid-template-columns:88px minmax(0,1fr)!important}
#element-gallery{flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 2px 8px;scrollbar-gutter:stable}
#element-gallery[hidden]{display:none!important}
#element-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body .workspace main[data-pane=uikit] .preset-panel #uikit-list,main[data-pane=uikit] .kh-strip-rail{display:none!important}
.element-tile{padding:0!important;width:100%!important;aspect-ratio:1;min-width:0;height:auto!important;display:flex;flex-direction:column;overflow:hidden;position:relative;background:#000!important;border:1px solid #363636!important;border-radius:9px!important;box-shadow:none!important;color:#bbb;cursor:pointer}
.element-tile-stage{position:absolute;inset:2px 2px 23px;background:#000;overflow:hidden;border-radius:7px;pointer-events:none}
.element-tile-stage>svg,.element-tile-stage>canvas{width:100%;height:100%;display:block}
.element-tile>span{margin-top:auto;z-index:1;font-size:10px!important;font-weight:450!important;line-height:15px;padding:2px 4px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;box-sizing:border-box;background:#000}
.element-tile[aria-selected=true]{border-color:#1f6fff!important}
.element-tile:focus-visible{outline:2px solid #2f7bff;outline-offset:2px}
.font-picker{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.58);display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box}
.font-sheet{width:min(420px,100%);height:min(500px,92vh);display:flex;flex-direction:column;background:#242424;border:1px solid #444;border-radius:12px;box-shadow:0 16px 40px #0008;padding:12px;box-sizing:border-box}
.font-sheet-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:10px}.font-sheet-head strong{font-weight:500}.font-sheet-head button{border:0;background:transparent;color:#ddd;font-size:11px;padding:4px 8px;cursor:pointer}
.font-search{width:100%;box-sizing:border-box;background:#151515;border:1px solid #454545;color:#eee;border-radius:7px;padding:8px 10px;font-size:12px;outline:none}.font-search:focus{border-color:#1457ff}
.font-results{overflow:auto;min-height:0;margin-top:8px;display:flex;flex-direction:column;gap:2px}
.font-result{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;border:0;border-radius:6px;background:transparent;color:#ddd;padding:8px;font-size:12px;text-align:left;min-height:38px;cursor:pointer;gap:12px}
.font-result>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font-result small{font:10px sans-serif;color:#999;white-space:nowrap}@media (hover:hover) and (pointer:fine){.font-result:hover{background:#333}}.font-result[aria-selected=true]{background:#1457ff;color:#fff}.font-results p{font-size:11px;color:#aaa}
@media(max-width:360px){body .workspace .khs-form>label,body .workspace main[data-pane=captions] .khs-form>label{grid-template-columns:70px minmax(0,1fr)!important;gap:5px!important}.element-tile>span{font-size:9px!important}#element-grid{gap:5px}#caption-style-options>.khs-swatches{padding-left:75px}}/* Neutral, symmetric previews in every element state. */
body .workspace .element-tile,body .workspace .element-tile:focus,body .workspace .element-tile:active,body .workspace .element-tile>span{color:#bdbdbd!important;text-align:left!important}@media (hover:hover) and (pointer:fine){body .workspace .element-tile:hover{color:#bdbdbd!important;text-align:left!important}}
body .workspace .element-tile[aria-selected=true]>span{color:#f2f2f2!important}
body .workspace main[data-pane=uikit]>article{padding:6px!important;overflow:hidden!important;box-sizing:border-box!important}
/* CEP Chromium clips content under a both-edges gutter; reserve the 11px
   scrollbar on the right only and mirror it with left padding. */
body .workspace main[data-pane=uikit] .workspace-scroll{padding:0 4px 0 15px!important;scrollbar-gutter:stable;box-sizing:border-box!important}
html body .workspace main[data-pane=uikit] .workspace-scroll>.preview-card.khs-stage-card{background:#222!important;--khs-panel-bg:#222;position:relative!important;margin:0 0 10px!important;padding:4px 0 10px!important;border:0!important;box-shadow:none!important}
html body .workspace main[data-pane=uikit] .khs-stage-wrap{display:block!important;width:min(100%,180px,30vh)!important;max-width:none!important;padding:0!important;margin:0 auto!important;overflow:hidden!important;background:#000!important;border-radius:9px!important;aspect-ratio:1!important;flex:none!important}
html body .workspace main[data-pane=uikit] .khs-stage,html body .workspace main[data-pane=uikit] .khs-stage.khs-phone{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:1!important;padding:0!important;margin:0!important;overflow:hidden!important;background:#000!important;box-sizing:border-box!important;flex:none!important}
html body .workspace main[data-pane=uikit] .khs-stage>svg,html body .workspace main[data-pane=uikit] .khs-stage>canvas{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;background:#000!important}

html body .workspace main[data-pane=uikit]>article,html body .workspace main[data-pane=uikit] .workspace-scroll,html body .workspace main[data-pane=uikit] .apply-row{background:#222!important;box-shadow:none!important}

html body .workspace main[data-pane=uikit] .parameters-card{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
html body .workspace main[data-pane=uikit] .khs-form,html body .workspace main[data-pane=uikit] .khs-form>label,html body .workspace main[data-pane=uikit] .khs-pair,html body .workspace main[data-pane=uikit] .khs-pair>label{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
html body .workspace main[data-pane=uikit] input,html body .workspace main[data-pane=uikit] textarea{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}

.element-group-heading{grid-column:1/-1;margin:6px 0 0;padding:0 1px;font-size:10px;font-weight:500;line-height:16px;color:#949494;letter-spacing:.025em}

/* Camera modes read as one segmented control, the same as the UI Kit
   categories: equal height, one type size, the selected mode in the accent. */
body .workspace #face-modes{display:flex!important;flex-wrap:nowrap!important;gap:2px!important;padding:2px!important;margin:0 4px 8px!important;border-radius:7px!important;overflow:hidden!important;border:1px solid #e3e3e3!important;background:#f3f3f3!important}
html.dark-mode body .workspace #face-modes{border-color:#363636!important;background:#1d1d1d!important}
body .workspace #face-modes button{flex:1 1 auto!important;width:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;height:25px!important;min-height:25px!important;padding:4px 5px!important;border-radius:6px!important;border:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;color:#6e6e73!important}
html.dark-mode body .workspace #face-modes button{color:#aaa!important}
body .workspace #face-modes button.active{background:#1457ff!important;color:#fff!important}
body .workspace #face-modes .preset-icon{display:none!important}
body .workspace #face-modes .preset-copy strong{font-size:10px!important;font-weight:500!important;color:inherit!important;white-space:nowrap}
/* element search: one field over every category */
#element-search{display:block;width:100%;box-sizing:border-box;height:30px;margin:0 0 10px;padding:0 12px 0 30px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px 50%;color:#f2f2f2;font:500 12px/30px -apple-system,"SF Pro Text","Segoe UI",sans-serif;outline:none;transition:border-color .15s,background-color .15s}
#element-search::placeholder{color:rgba(255,255,255,.38)}
body #element-search,html.dark-mode body #element-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:10px 50%!important;padding-left:30px!important}
#element-search:focus{border-color:rgba(47,123,255,.55);background-color:rgba(255,255,255,.08)}
#element-search::-webkit-search-cancel-button{filter:invert(.6)}
html:not(.dark-mode) #element-search{border-color:rgba(0,0,0,.1);background-color:rgba(0,0,0,.04);color:#1d1d1f}
html:not(.dark-mode) #element-search::placeholder{color:rgba(0,0,0,.4)}
#element-grid .element-empty{grid-column:1/-1;margin:24px 0;text-align:center;color:rgba(255,255,255,.4);font-size:12px}
/* one-click reel card on top of the caption gallery */
.khs-reel-card{display:grid;gap:8px;margin:0 0 14px;padding:12px;border-radius:14px;background:linear-gradient(180deg,rgba(47,123,255,.14),rgba(47,123,255,.05));border:1px solid rgba(47,123,255,.28)}
.khs-reel-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.khs-reel-head strong{font-size:13px;color:#fff;letter-spacing:-.01em}
.khs-reel-head span{font-size:10.5px;color:rgba(255,255,255,.5)}
.khs-reel-card .segmented{display:flex}
.khs-reel-card .segmented button{flex:1 1 0}
.khs-reel-card .khs-reel-go{width:100%;min-height:34px}
html:not(.dark-mode) .khs-reel-head strong{color:#1d1d1f}
html:not(.dark-mode) .khs-reel-head span{color:rgba(0,0,0,.5)}
/* Light theme: the control cards stay dark (same product look), so their text and fields use the dark-theme ink */
html:not(.dark-mode) body .workspace .parameters-card summary,html:not(.dark-mode) body .workspace .parameters-card .field-label,html:not(.dark-mode) body .workspace .parameters-card label>span,html:not(.dark-mode) body .workspace .parameters-card .khs-dd-btn{color:#dcdcdc!important}
html:not(.dark-mode) body .workspace .parameters-card .khs-input,html:not(.dark-mode) body .workspace .parameters-card select,html:not(.dark-mode) body .workspace .parameters-card textarea{background:#191919!important;color:#ededed!important;border:1px solid #3b3b3b!important;box-shadow:none!important}
html:not(.dark-mode) body .workspace .parameters-card select option{background:#191919;color:#ededed}
html:not(.dark-mode) body .workspace .parameters-card output{color:#9a9a9a!important}
html:not(.dark-mode) body .workspace main[data-pane=uikit] .apply-row .khs-remove{border-color:rgba(255,255,255,.14)!important;color:#5aa2ff!important}
/* modal buttons: one height, one type size; Close is a quiet outline next to the primary action */
.khs-modal-row{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.khs-modal-row button{height:40px!important;min-height:40px!important;padding:0 18px!important;border-radius:11px!important;font-size:13px!important;font-weight:600!important;line-height:1!important;margin:0!important;transform:none!important}
.khs-modal-row #lic-close{background:transparent!important;border:1px solid rgba(255,255,255,.16)!important;color:#e8e8e8!important;box-shadow:none!important;flex:0 0 auto}
.khs-modal-row #lic-save{flex:1 1 auto;max-width:240px}
html:not(.dark-mode) .khs-modal-row #lic-close{border-color:rgba(255,255,255,.16)!important;color:#e8e8e8!important}
/* an active license: Deactivate is a quiet outline (destructive, never the loud primary); the masked key reads as set */
.khs-modal-row #lic-save.is-quiet{background:transparent!important;background-image:none!important;border:1px solid rgba(106,174,255,.38)!important;color:#6aaeff!important;box-shadow:none!important;flex:0 0 auto}
#lic-key:disabled{opacity:1!important;color:#bdbdbd!important;font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* narrow panels: the six Camera tools never squeeze into each other — two rows of three equal cells */
@media (max-width:420px){
  html body .workspace #face-modes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px!important}
  html body .workspace #face-modes button{min-width:0!important;padding:0 4px!important;overflow:hidden!important}
  html body .workspace #face-modes .preset-copy{min-width:0;overflow:hidden}
  html body .workspace #face-modes .preset-copy strong{display:block;overflow:hidden;text-overflow:ellipsis}
}
/* light theme: every settings card is the same dark card (Captions had a pale card with pale labels — unreadable) */
html:not(.dark-mode) body .workspace main .parameters-card{background:#252525!important;border:1px solid #343434!important;color:#e8e8e8!important}
html:not(.dark-mode) body .workspace main .parameters-card .khs-card-head,html:not(.dark-mode) body .workspace main .parameters-card .khs-card-head *{color:#9a9a9a!important}