/* KeyHole Social — additions on top of the shared KeyHole design system (final-ui → dark).
   Only new components live here; buttons, cards, rail, presets and ranges come from the shared files. */
main[hidden]{display:none!important}
.khs-wide{grid-column:1/-1}
.khs-desc{margin:2px 0 12px;color:var(--muted);font-size:12px;line-height:1.45}
.khs-hint{color:var(--muted);font-size:11px;margin-right:auto;align-self:center}
.apply-row{display:flex;gap:10px;align-items:center}
.apply-row .primary{width:auto;min-width:150px;padding:11px 18px}

/* toolbar selection pill */
.selection-pill{margin-left:auto;font-size:11px;color:var(--muted);padding:7px 12px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid var(--edge);max-width:62%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selection-pill.ok{color:var(--text)}
.selection-pill.ok:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2ed47a;margin-right:7px;vertical-align:1px}

/* preset list: small style hint under the name */
#presets button small,.khs-list button small{display:block;font-size:10px;opacity:.7;margin-top:2px;font-weight:400}
#presets .preset-copy strong,.khs-list .preset-copy strong{font-weight:600;font-size:12px}
.khs-list{display:flex;flex-direction:column;gap:8px}
.khs-list button{display:flex;align-items:center;gap:12px;min-height:48px;width:100%;padding:12px 14px;text-align:left;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 1px #fff}
.khs-list button.active{background:radial-gradient(ellipse at 0% 100%,#287aff,transparent 60%),radial-gradient(ellipse at 100% 0%,#2045be,transparent 65%),linear-gradient(110deg,#2155ff,#10235a);color:#fff;border-color:#76a7ff}
.khs-list button[disabled]{opacity:.5;cursor:default}

/* 9:16 video preview */
.khs-preview{position:relative;display:flex;justify-content:center;align-items:center;background:#0b1020;aspect-ratio:9/12;max-height:340px}
.khs-preview video{height:100%;max-height:340px;aspect-ratio:9/16;object-fit:cover;border-radius:12px;display:block}
.khs-preview span{color:#aab8d0;font-size:12px}

/* forms */
.khs-form{display:flex;flex-direction:column;gap:10px}
.khs-form>label{display:flex;flex-direction:column;gap:6px}
.segmented{display:flex;gap:4px;padding:3px;border-radius:12px;background:rgba(255,255,255,.5);border:1px solid var(--edge)}
.segmented button{flex:1;min-height:28px;padding:5px 8px;border-radius:9px;font-size:11px;border:0;background:transparent;box-shadow:none;color:var(--muted)}
.segmented button.on{background:var(--blue-fill);color:#fff;box-shadow:0 4px 12px #2155ff30}
.khs-color{display:flex;align-items:center;gap:10px}
.khs-color input[type=color]{width:56px;height:30px;border-radius:10px;border:1px solid var(--edge);padding:2px;background:#fff}
.khs-check{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;font-size:11px;color:var(--muted)}

/* UI kit grid */
.khs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.khs-card{border-radius:16px;padding:12px;background:rgba(255,255,255,.55);border:1px solid var(--edge);display:flex;flex-direction:column;gap:6px;min-height:92px}
.khs-card b{font-size:12px}.khs-card small{font-size:10px;color:var(--muted);line-height:1.4}
.khs-card i{font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#1250ff;font-weight:600}

/* about */
.khs-env{display:flex;flex-direction:column;gap:6px;font-size:11px}
.khs-env div{display:flex;justify-content:space-between;gap:10px}
.khs-env .ok{color:#14a35a}.khs-env .bad{color:#e0364f}
.khs-log{max-height:220px;overflow:auto;font-size:10px;line-height:1.5;white-space:pre-wrap;margin:0;color:var(--muted)}

/* progress overlay */
.khs-progress{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(238,245,255,.55);backdrop-filter:blur(6px);z-index:50}
.khs-progress[hidden]{display:none}
.khs-progress-card{min-width:260px;max-width:80%;padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.92);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.khs-progress-card b{font-size:13px}.khs-progress-card small{font-size:11px;color:var(--muted)}
.khs-progress-card i{display:block;height:6px;border-radius:6px;background:rgba(18,80,255,.12);overflow:hidden}
.khs-progress-card em{display:block;height:100%;width:30%;border-radius:6px;background:var(--blue-fill);animation:khs-indef 1.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes khs-indef{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}

html.dark-mode .selection-pill,html.dark-mode .segmented,html.dark-mode .khs-card,html.dark-mode .khs-list button{background:var(--dk-card,#2a2a2a);border-color:var(--dk-line-2,rgba(255,255,255,.12));color:var(--dk-text,#e4e4e4)}
html.dark-mode .khs-progress{background:rgba(20,20,20,.55)}
html.dark-mode .khs-progress-card{background:#2a2a2a;color:#e4e4e4}
/* layout fixes */
.preview-card .preview.khs-preview{width:100%!important;max-width:none;box-sizing:border-box;padding:10px}
.khs-form>label,#params>label,#params-asr>label{align-items:stretch!important;text-align:left}
.khs-form .field-label{justify-content:flex-start;text-align:left;font-size:11px;font-weight:600}
.segmented{align-self:stretch}
.section-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.section-title small{font-weight:400;color:var(--muted);font-size:10px}
#lang{font-size:11px;font-weight:600}

/* ===== KeyHole Social identity: same glass system, violet → pink accent instead of Animation blue ===== */
:root{--accent:#1457ff;--accent-2:#4b2fd6;
 --blue-fill:radial-gradient(ellipse at 15% 0%,rgba(120,210,255,.95),transparent 40%),radial-gradient(ellipse at 100% 100%,rgba(6,50,180,.85),transparent 52%),linear-gradient(135deg,#1457ff 0%,#8a3dff 50%,#2fc5fa 100%);
 --khs-active:radial-gradient(ellipse at 0% 100%,#2fc5fa,transparent 60%),radial-gradient(ellipse at 100% 0%,#2fc5fa,transparent 65%),linear-gradient(115deg,#1457ff,#3a1f9e)}
body{background:radial-gradient(ellipse at 0% 0%,#efe9ff,transparent 55%),radial-gradient(ellipse at 100% 100%,#ffe9f4,transparent 50%),#f6f4ff}
#presets button.active,.khs-list button.active,.tabs button.active{background:var(--khs-active)!important;border-color:#a891ff!important;box-shadow:0 7px 18px #1457ff2a!important;color:#fff}
.primary{border-color:#72b9ff!important;box-shadow:inset 0 1px #d3f5ff,0 8px 24px #1457ff2e!important}
.range-control input[type=range]{accent-color:#7b4dff}
.segmented button.on{box-shadow:0 4px 12px #1457ff38}
.toolbar{display:flex;align-items:center;gap:10px}
.khs-brand{font-size:13px;letter-spacing:-.01em;color:var(--text);padding-left:4px}
.khs-brand b{font-weight:700;background:linear-gradient(90deg,#1457ff,#2fc5fa);-webkit-background-clip:text;color:transparent}
.icon-only{min-width:34px;padding:6px 10px;font-size:14px}
.preview-card .preview.khs-preview{aspect-ratio:1/1;max-height:300px;padding:0;background:#000;border-radius:16px}
.khs-preview video{width:100%;height:100%;max-height:none;aspect-ratio:1/1;object-fit:contain;border-radius:16px}
.khs-input{width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.7);padding:9px 11px;font:inherit;font-size:12px;color:var(--text);resize:vertical}
html.dark-mode body{background:#1b1a22}
html.dark-mode .khs-input{background:#1a1a1a;border-color:rgba(255,255,255,.12);color:#e4e4e4}
.primary,#apply-captions,#apply-face,#apply-uikit{background:var(--blue-fill)!important}
.preview-card{display:flex;justify-content:center}
.preview-card .preview.khs-preview{width:min(100%,300px)!important;height:auto;flex:0 0 auto}
.khs-color input[type=color]{width:56px!important;flex:0 0 56px;min-width:0}
.khs-check{white-space:nowrap}
.toolbar #refresh{flex:0 0 auto;width:auto}
.toolbar .selection-pill{margin-left:auto}

/* ===== v6: premium red identity (wine → garnet → warm coral on warm ivory) — overrides the violet pass ===== */
:root{--accent:#1457ff;--accent-2:#0648e7;--text:#10235a;--muted:#5f6f9a;--edge:rgba(20,87,255,.16);
 --blue-fill:radial-gradient(ellipse at 18% 0%,rgba(120,210,255,.85),transparent 42%),radial-gradient(ellipse at 100% 100%,rgba(6,50,180,.9),transparent 55%),linear-gradient(135deg,#1f6fff 0%,#1457ff 48%,#0a2f9e 100%);
 --khs-active:radial-gradient(ellipse at 0% 100%,#2fc5fa,transparent 58%),radial-gradient(ellipse at 100% 0%,#0a2f9e,transparent 62%),linear-gradient(115deg,#1564ff,#0648e7)}
body{background:radial-gradient(ellipse at 0% 0%,#fff1ec,transparent 55%),radial-gradient(ellipse at 100% 100%,#fbe3e3,transparent 52%),#fbf6f4}
#presets button.active,.khs-list button.active,.tabs button.active{border-color:#72b9ff!important;box-shadow:0 8px 20px rgba(20,87,255,.22)!important}
.primary,#apply-captions,#apply-face,#apply-uikit{border-color:#72b9ff!important;box-shadow:inset 0 1px rgba(211,245,255,.9),0 10px 26px rgba(20,87,255,.28)!important}
.segmented button.on{box-shadow:0 4px 12px rgba(20,87,255,.3)}
.range-control input[type=range]{accent-color:#1457ff}
.khs-brand b{background:linear-gradient(90deg,#0648e7,#1f6fff 60%,#2fc5fa);-webkit-background-clip:text;color:transparent}
.selection-pill.ok:before{background:#1f6fff}
.khs-progress em{background:var(--blue-fill)}
html.dark-mode body{background:#1d1d1d}
/* scrollbars: neutral grey (owner request) */
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent!important}
*::-webkit-scrollbar-thumb{background:rgba(120,120,128,.38)!important;border-radius:6px!important;border:0!important;box-shadow:none!important}@media (hover:hover) and (pointer:fine){*::-webkit-scrollbar-thumb:hover{background:rgba(120,120,128,.6)!important}}
.kh-scrollable:after,.kh-scrollable:before{background:none!important}
*{scrollbar-color:rgba(120,120,128,.45) transparent!important;scrollbar-width:thin}
html.dark-mode *{scrollbar-color:rgba(255,255,255,.2) transparent!important}
/* range sliders: red fill on warm grey track */
input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#1457ff 0 var(--range-fill,0%),#dbe3f0 var(--range-fill,0%))!important}
input[type=range]::-webkit-slider-thumb{box-shadow:0 2px 8px rgba(6,50,180,.3),0 0 0 1px rgba(20,87,255,.2)!important}
html.dark-mode input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#1f6fff 0 var(--range-fill,0%),rgba(255,255,255,.14) var(--range-fill,0%))!important}
.khs-reset{align-self:flex-start;margin-top:4px;font-size:11px}
/* sticky preview: always visible while settings scroll under it */
.workspace-scroll>.preview-card{position:sticky;top:0;z-index:6;margin-bottom:12px;background:linear-gradient(180deg,#fbf6f4 82%,rgba(251,246,244,0));padding-bottom:10px;border:0;box-shadow:none}
html.dark-mode .workspace-scroll>.preview-card{background:linear-gradient(180deg,#222222 82%,rgba(34,34,34,0))}
.khs-preview{position:relative}
.preview-card .preview.khs-preview.khs-tall{aspect-ratio:9/16;width:min(100%,190px)!important;max-height:340px}
.khs-tall video{aspect-ratio:9/16;object-fit:cover}
.khs-spin{position:absolute;right:10px;top:10px;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;opacity:0;transition:opacity .2s;animation:khs-rot .8s linear infinite}
.khs-preview.loading .khs-spin{opacity:1}
.khs-preview.loading video{opacity:.55;transition:opacity .2s}
@keyframes khs-rot{to{transform:rotate(360deg)}}
/* account button at the top of the rail */
.khs-account{width:44px;height:44px;min-height:0;padding:0;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:2px auto 10px}
.khs-account svg{width:22px;height:22px}
.khs-account.on{color:#1457ff}
/* license dialog */
.khs-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(10,20,50,.25);backdrop-filter:blur(8px)}
.khs-modal[hidden]{display:none}
.khs-modal-card{width:min(86%,380px);padding:20px;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 20px 50px rgba(10,30,80,.25);display:flex;flex-direction:column;gap:12px}
.khs-modal-card b{font-size:15px}.khs-modal-card small{color:var(--muted);font-size:11px}
.khs-modal-row{display:flex;gap:8px;justify-content:flex-end}.khs-modal-row .primary{width:auto;min-width:120px;padding:9px 16px}
html.dark-mode .khs-modal-card{background:#262626;color:#eee}
/* colour swatches: one row, clean rounded chips (no white frame) */
.khs-swatches{display:flex;flex-wrap:wrap;gap:12px 14px}
.khs-swatch{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:10px;color:var(--muted)}
.khs-swatch input[type=color],.khs-color input[type=color]{-webkit-appearance:none;appearance:none;width:44px!important;height:30px;border:0!important;padding:0!important;border-radius:10px;background:none;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:10px}
.workspace-scroll>.preview-card{background:rgba(250,247,247,.97)!important;backdrop-filter:blur(14px);border-radius:18px;margin:0 -2px 12px;padding:10px 2px}
html.dark-mode .workspace-scroll>.preview-card{background:rgba(28,22,24,.97)!important}
.khs-swatch input[type=color],.khs-color input[type=color]{box-shadow:inset 0 0 0 1px rgba(60,20,28,.16)!important}
/* ===== v12: compact previews that take the element's own shape ===== */
.workspace-scroll>.preview-card{padding:8px 2px!important;margin-bottom:10px}
.preview-card .preview.khs-preview{width:min(100%,232px)!important;max-height:232px}
.khs-stage-card{display:flex;justify-content:center}
.khs-stage{--khs-aspect:.5625;aspect-ratio:var(--khs-aspect);width:min(100%,calc(250px * var(--khs-aspect)));max-height:250px;border-radius:16px;overflow:hidden;background:#0b0a0c;box-shadow:0 10px 26px rgba(10,30,80,.16),inset 0 0 0 1px rgba(0,0,0,.05)}
.khs-stage svg{display:block;width:100%;height:100%}
#uk-params textarea{min-height:84px;line-height:1.45}
/* chat editor */
.khs-chat{display:flex;flex-direction:column;gap:6px}
.khs-msg{display:flex;align-items:center;gap:6px}
.khs-msg .khs-input{flex:1;padding:8px 10px}
.khs-who{flex:0 0 58px;height:32px;border-radius:16px;border:0;font-size:11px;font-weight:600;background:#E9E9EB;color:#1c1c1e;cursor:pointer}
.khs-msg.me .khs-who{background:#0A7CFF;color:#fff}
.khs-msg.me .khs-input{text-align:right}
.khs-del{flex:0 0 26px;height:26px;border-radius:13px;border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer}@media (hover:hover) and (pointer:fine){.khs-del:hover{background:rgba(20,87,255,.1);color:#1457ff}}
.khs-add{display:inline-flex;width:auto!important;align-self:flex-start;font-size:11px;padding:6px 12px;margin-right:6px}
.khs-chat-add{display:flex;gap:6px;margin-top:2px}
html.dark-mode .khs-who{background:#3a3a3c;color:#eee}
.khs-stage-wrap{position:relative;display:flex;justify-content:center;width:100%}
.khs-guide{position:absolute;right:4px;top:4px;width:28px;height:28px;min-height:0;padding:4px;border-radius:9px;border:1px solid var(--edge);background:rgba(255,255,255,.75);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.khs-guide svg{width:16px;height:16px}
.khs-guide.on{background:#1457ff;color:#fff;border-color:#1457ff}
/* ===== v14: docked-panel layout (AE panels live at ~380–700 px): chips row → compact preview → settings → button ===== */
@media (max-width:720px){
 .content-column main:not([hidden]){display:flex!important;flex-direction:column!important;gap:8px!important;min-height:0!important;grid-template-columns:none!important}
 .content-column main>.preset-panel{flex:0 0 auto!important;padding:6px 4px!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
 .content-column main>.preset-panel>.panel-label{display:none!important}
 #presets,#uikit-list,#face-modes{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:6px!important;height:auto!important;max-height:none!important;padding:2px 4px 4px!important;scrollbar-width:none}
 #presets::-webkit-scrollbar,#uikit-list::-webkit-scrollbar,#face-modes::-webkit-scrollbar{display:none}
 #presets button,.khs-list button{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;min-height:32px!important;height:32px;padding:0 13px!important;margin:0!important;border-radius:11px!important;gap:0!important}
 #presets button .preset-icon,.khs-list button .preset-icon{display:none!important}
 #presets button:after,.khs-list button:after{display:none!important;content:none!important}
 #presets .preset-copy strong,.khs-list .preset-copy strong{font-size:11.5px!important;white-space:nowrap;-webkit-line-clamp:unset!important}
 .content-column main>article{flex:1 1 auto!important;min-height:0!important}
 .workspace-scroll>.title{display:none!important}
 .preview-card .preview.khs-preview{width:min(100%,190px)!important;max-height:190px}
 .khs-stage{width:min(100%,calc(200px * var(--khs-aspect)));max-height:200px}
 .khs-stage.khs-phone{width:min(100%,calc(240px * var(--khs-aspect)));max-height:240px}
 .parameters-card{padding:12px 12px 14px!important}
 .apply-row .primary{min-width:0;width:100%}
}
/* Reels frame toggle in the toolbar */
.toolbar .khs-frame-btn{margin-left:auto;width:34px;height:34px;min-height:0;padding:0;border-radius:11px;border:1px solid var(--edge);background:rgba(255,255,255,.7);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.toolbar .khs-frame-btn svg{width:18px;height:18px}
.toolbar .khs-frame-btn.on{background:#5b5ff5;border-color:#5b5ff5;color:#fff;box-shadow:0 6px 16px rgba(80,90,245,.35)}
.toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;grid-template-columns:none!important}
.toolbar .khs-frame-btn{margin-left:auto!important}
.toolbar .khs-frame-btn{width:34px!important;min-width:34px!important;max-width:34px!important;flex:0 0 34px!important}
.toolbar .khs-brand{flex:0 0 auto!important;white-space:nowrap}
.khs-cats{margin:0 4px 8px}
@media (max-width:720px){.khs-cats{margin:0 4px 6px}}
/* ===== v19: clean previews — one opaque sticky band, one rounded stage, no nested frames/outlines ===== */
.workspace-scroll>.preview-card,.workspace-scroll>.preview-card.khs-stage-card{position:sticky!important;top:0!important;z-index:6!important;margin:0 0 10px!important;padding:2px 0 12px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--khs-panel-bg,#fbf7f6)!important;-webkit-mask-image:none!important}
.workspace-scroll>.preview-card:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(var(--khs-panel-bg,#fbf7f6),rgba(251,247,246,0));pointer-events:none}
html.dark-mode .workspace-scroll>.preview-card{--khs-panel-bg:#222222}
.khs-stage-wrap{background:none!important}
.khs-stage{border-radius:14px!important;box-shadow:none!important;background:#141012!important;outline:0!important}
.preview-card .preview.khs-preview{border-radius:14px!important;box-shadow:none!important;border:0!important;padding:0!important}
.khs-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9a7a80 50%),linear-gradient(135deg,#9a7a80 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px!important;cursor:pointer}
.khs-msg{gap:5px!important}
.khs-grip{flex:0 0 12px;color:#b8a4a8;font-size:11px;letter-spacing:-2px;cursor:grab;user-select:none;line-height:1}
.khs-msg.dragging{opacity:.45}
.khs-react{flex:0 0 30px;height:30px;border-radius:15px;border:0;background:rgba(0,0,0,.04);color:#9a8a8e;font-size:12px;font-weight:700;cursor:pointer;padding:0}
.khs-react.on{background:#0A7CFF;color:#fff}
.khs-who{flex:0 0 52px!important}
.khs-paste-box{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.khs-paste-box[hidden]{display:none}
.khs-paste-box .primary{width:auto!important;min-width:90px;padding:7px 14px}
/* one solid surface for the working card, so the sticky preview band matches it exactly */
.content-column main>article{background:#f8f7f9!important;--khs-panel-bg:#f8f7f9}
html.dark-mode .content-column main>article{background:#222222!important;--khs-panel-bg:#222222}
.workspace-scroll>.preview-card:after{background:linear-gradient(var(--khs-panel-bg),transparent)!important}
.workspace-scroll{scrollbar-width:thin}
/* transcript editor */
.khs-tr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.khs-tr-head .soft-button{width:auto!important;padding:6px 12px;font-size:11px}
.khs-transcript{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.khs-tr-row{display:flex!important;flex-direction:row!important;align-items:center;gap:8px}
.khs-tr-time{flex:0 0 40px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.khs-tr-row .khs-input{padding:7px 10px;font-size:12px}
.khs-tr-empty{color:var(--muted);font-size:11px;line-height:1.45}
.khs-clean{margin-top:12px;padding-top:10px;border-top:1px solid var(--edge)}
/* ===== v25: controls never overflow, at any panel width ===== */
.segmented{display:flex!important;flex-wrap:wrap!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;overflow:hidden}
.segmented button{flex:1 1 0!important;min-width:46px!important;padding:5px 4px!important;font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.khs-form>label,.parameters-card,.khs-form{min-width:0!important;max-width:100%!important}
.parameters-card{box-sizing:border-box!important;overflow:hidden}
.range-control{min-width:0!important}
.range-control input[type=range]{min-width:0!important;flex:1 1 auto!important}
.khs-msg .khs-input{min-width:0!important}
@media (max-width:720px){.content-column main>.preset-panel{padding:4px 2px 2px!important}#presets,#uikit-list,#face-modes{padding:2px 4px 2px!important}}
.segmented{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(54px,1fr))!important;gap:3px!important}
.segmented button{min-width:0!important}
/* v27 colour dialog (ported from KeyHole Animation, red theme) */
.kh-color-shade{position:fixed;inset:0;z-index:9000;background:rgba(20,8,12,.42);display:flex;align-items:center;justify-content:center;padding:14px}
.kh-color-dialog{width:272px;max-width:100%;box-sizing:border-box;padding:16px;border-radius:18px;background:#f8f7f9;border:1px solid rgba(20,87,255,.14);box-shadow:0 16px 40px rgba(40,10,18,.28);color:var(--text,#10235a);display:grid;gap:12px;-webkit-user-select:none;user-select:none}
.kh-color-dialog strong{font-size:13px;font-weight:700}
.kh-color-palette-wrap{position:relative;overflow:hidden;border-radius:12px;cursor:crosshair;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.kh-color-palette{display:block;width:100%;height:170px;touch-action:none}
.kh-color-marker{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none;box-sizing:border-box}
input.kh-color-hue{-webkit-appearance:none;appearance:none;width:100%;height:14px;margin:0;border-radius:8px;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)!important}
input.kh-color-hue::-webkit-slider-runnable-track{background:transparent!important;height:14px}
input.kh-color-hue::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-1px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 1px 4px rgba(0,0,0,.3)}
.kh-color-hex-row{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:8px}
.kh-color-hex-row input{min-width:0;box-sizing:border-box;height:36px;padding:0 10px;border-radius:10px;border:1px solid rgba(20,87,255,.18);background:#fff;color:inherit;font:600 12px/1 ui-monospace,Menlo,monospace;-webkit-user-select:text;user-select:text}
.kh-color-sampler{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:10px;border:1px solid rgba(20,87,255,.18);background:#fff;color:var(--accent,#1457ff);cursor:pointer}
.kh-color-status{margin:0;font-size:11px;color:var(--accent,#1457ff)}.kh-color-status:empty{display:none}
.kh-color-dialog footer{display:flex;gap:8px;padding:0}
.kh-color-dialog footer button{flex:1;min-height:34px;margin:0;border-radius:10px;font-size:12px;font-weight:600;border:1px solid rgba(20,87,255,.18);background:#fff;color:inherit;cursor:pointer}
.kh-color-dialog footer button.primary{background:var(--accent,#1457ff);border-color:transparent;color:#fff}
.kh-color-sampling-hint{position:fixed;left:12px;right:12px;bottom:12px;z-index:10000;padding:10px 12px;border-radius:10px;background:rgba(20,10,14,.92);color:#fff;font-size:12px;text-align:center}
html.dark-mode .kh-color-shade{background:rgba(0,0,0,.6)}
html.dark-mode .kh-color-dialog{background:#222222;border-color:rgba(255,255,255,.1);color:#e8e8e8;box-shadow:0 18px 50px rgba(0,0,0,.6)}
html.dark-mode .kh-color-hex-row input,html.dark-mode .kh-color-sampler,html.dark-mode .kh-color-dialog footer button:not(.primary){background:#2c2c2c;border-color:rgba(255,255,255,.12);color:#e8e8e8}
html.dark-mode .kh-color-sampler{color:#5aa2ff}

/* v28 Remove next to every Apply (KeyHole Animation pattern) */
.apply-row .khs-remove{flex:0 0 auto;min-width:96px;padding:11px 16px;border-radius:14px;border:1px solid rgba(20,87,255,.22);background:transparent;color:var(--accent,#1457ff);font-weight:600;cursor:pointer}@media (hover:hover) and (pointer:fine){.apply-row .khs-remove:hover{background:rgba(20,87,255,.08)}}
html.dark-mode .apply-row .khs-remove{border-color:rgba(255,255,255,.14);color:#5aa2ff}
@media (max-width:720px){.apply-row .primary{flex:1 1 auto;width:auto}.apply-row .khs-remove{min-width:84px}}

/* native caption preview canvas */
#cap-canvas{display:block;width:100%;height:100%;border-radius:inherit}

/* Track: pick a point on the frame */
.khs-pick{position:relative;border-radius:12px;overflow:hidden;background:#000;margin:4px 0 8px;cursor:crosshair}
.khs-pick canvas{display:block;width:100%;height:auto}
.khs-pick i{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px rgba(20,87,255,.9);pointer-events:none;display:none}
.khs-ghost{width:100%;padding:9px 12px;border-radius:12px;border:1px solid rgba(20,87,255,.22);background:transparent;color:inherit;font-weight:600;cursor:pointer}
/* v29 sticky preview band is solid — controls scroll under it cleanly, no see-through fade */
.workspace-scroll>.preview-card,.workspace-scroll>.preview-card.khs-stage-card{background:var(--khs-panel-bg,#fbf7f6)!important;backdrop-filter:none!important}
html.dark-mode .workspace-scroll>.preview-card,html.dark-mode .workspace-scroll>.preview-card.khs-stage-card{background:#222222!important}
.workspace-scroll>.preview-card:after{display:none!important}
.workspace-scroll>.preview-card{box-shadow:0 1px 0 rgba(0,0,0,.06)!important}
html.dark-mode .workspace-scroll>.preview-card{box-shadow:0 1px 0 rgba(255,255,255,.06)!important}
/* own avatar / logo picker */
.khs-avatar{display:flex;gap:12px;align-items:center}
.khs-av-thumb{position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#2fc5fa,#0648e7);cursor:grab;touch-action:none}
.khs-av-thumb img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:none;pointer-events:none}
.khs-av-side{flex:1;min-width:0;display:grid;gap:8px}
.khs-av-row{display:flex;gap:8px}.khs-av-row .khs-ghost{width:auto;flex:1;padding:8px 10px}
/* v30 our look everywhere: no blue rings/glows from the shared kit, red focus, account button in the red theme */
*:focus,*:focus-visible{outline:none!important}
button:focus,button:focus-visible{box-shadow:none}
.khs-input:focus,input[type=text]:focus,textarea:focus{border-color:rgba(20,87,255,.55)!important;box-shadow:0 0 0 3px rgba(20,87,255,.16)!important}
.khs-account{background:#fff!important;border:1px solid rgba(20,87,255,.16)!important;box-shadow:0 2px 8px rgba(10,30,80,.08)!important;color:var(--accent,#1457ff)!important}
.khs-account svg,.khs-account svg *{stroke:var(--accent,#1457ff)!important}
html.dark-mode .khs-account{background:#2c2c2c!important;border-color:rgba(255,255,255,.08)!important;box-shadow:none!important}
html.dark-mode .khs-account svg,html.dark-mode .khs-account svg *{stroke:#5aa2ff!important}
.khs-account.on{background:linear-gradient(180deg,#1f6fff,#0a4fe0)!important;border-color:transparent!important}
.khs-account.on svg,.khs-account.on svg *{stroke:#fff!important}
/* custom dropdown (replaces the native select popup) */
select.khs-native{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}
.khs-dd{position:relative;width:100%}
.khs-dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(20,87,255,.16);background:#fff;color:inherit;font:inherit;font-weight:600;cursor:pointer;text-align:left}
.khs-dd-btn:after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);opacity:.55;flex:none}
.khs-dd.open .khs-dd-btn{border-color:rgba(20,87,255,.5);box-shadow:0 0 0 3px rgba(20,87,255,.14)}
.khs-dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;max-height:240px;overflow:auto;padding:6px;border-radius:14px;background:#fff;border:1px solid rgba(20,87,255,.14);box-shadow:0 14px 34px rgba(40,10,18,.22);display:none}
.khs-dd.open .khs-dd-list{display:block}
.khs-dd-opt{padding:9px 10px;border-radius:9px;cursor:pointer;font-weight:500}@media (hover:hover) and (pointer:fine){.khs-dd-opt:hover{background:rgba(20,87,255,.08)}}
.khs-dd-opt.sel{background:linear-gradient(180deg,#1f6fff,#0a4fe0);color:#fff;font-weight:600}
html.dark-mode .khs-dd-btn{background:#1a1416;border-color:rgba(255,255,255,.1);color:#e8e8e8}
html.dark-mode .khs-dd-list{background:#262626;border-color:rgba(255,255,255,.1);box-shadow:0 16px 40px rgba(0,0,0,.6);color:#e8e8e8}@media (hover:hover) and (pointer:fine){html.dark-mode .khs-dd-opt:hover{background:rgba(255,255,255,.06)}}
.khs-transcript-card[hidden],section[hidden]{display:none!important}
/* v31 — no blue left from the shared kit: neutral shadows (the blue glow under every button came from --shadow),
   red/neutral hover, our own ghost buttons, file rows, hints */
:root{--shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(60,20,28,.08);--accent-2:#0648e7;--active-fill:var(--blue-fill)}
html.dark-mode{--shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.28);--surface:#2a2a2a}@media (hover:hover) and (pointer:fine){button:hover{background:#fff4f4;box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(6,50,180,.1)}}@media (hover:hover) and (pointer:fine){html.dark-mode button:hover{background:#333;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.3)}}
html.dark-mode .preview-card>.preview{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important}@media (hover:hover) and (pointer:fine){.segmented button:hover:not(.on){background:rgba(20,87,255,.06);box-shadow:none}}@media (hover:hover) and (pointer:fine){html.dark-mode .segmented button:hover:not(.on){background:rgba(255,255,255,.05)}}@media (hover:hover) and (pointer:fine){.segmented button.on:hover{background:var(--blue-fill)}}.khs-ghost{background:#fff;color:var(--text);border:1px solid rgba(20,87,255,.2);box-shadow:none}@media (hover:hover) and (pointer:fine){.khs-ghost:hover{background:#fff;color:var(--text);border:1px solid rgba(20,87,255,.2);box-shadow:none}}@media (hover:hover) and (pointer:fine){.khs-ghost:hover{border-color:rgba(20,87,255,.45)}}
html.dark-mode .khs-ghost{background:linear-gradient(180deg,#363636,#2e2e2e);color:#e4e4e4;border-color:rgba(255,255,255,.12)}@media (hover:hover) and (pointer:fine){html.dark-mode .khs-ghost:hover{background:linear-gradient(180deg,#3d3d3d,#333);border-color:rgba(31,111,255,.5)}}
.khs-file{display:grid;grid-template-columns:95px minmax(0,1fr);align-items:center;gap:10px;margin:10px 0;font-size:12px}
.khs-file-row{display:flex;align-items:center;gap:8px;min-width:0}
.khs-file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.khs-file-row .khs-ghost{width:auto;flex:none;padding:7px 14px}
.parameters-card .khs-hint{display:block;margin:-4px 2px 8px;font-size:11px;line-height:1.4;color:var(--muted)}
#tk-pick-row .khs-hint{margin:6px 0}
/* dropdown list: a fixed layer on <body>, above the sticky preview */
.khs-dd-list{position:fixed!important;right:auto!important;z-index:1000!important;display:none;box-sizing:border-box;overscroll-behavior:contain}
.khs-dd-list.open{display:block!important}
.khs-dd-list{padding:6px;border-radius:14px;background:#fff;border:1px solid rgba(20,87,255,.14);box-shadow:0 14px 34px rgba(40,10,18,.22);overflow:auto;font-size:12px;color:var(--text)}
html.dark-mode .khs-dd-list{background:#262626;border-color:rgba(255,255,255,.1);box-shadow:0 16px 40px rgba(0,0,0,.6);color:#e8e8e8}
.khs-stage canvas.khs-bg{display:block;width:100%;height:100%}
/* v33 — text editor: one collapsed card, rows load only when opened */
.khs-text-card>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;font-weight:650;padding:2px 0;user-select:none}
.khs-text-card>summary::-webkit-details-marker{display:none}
.khs-text-card>summary:before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.55;transition:transform .15s;margin:0 2px}
.khs-text-card[open]>summary:before{transform:rotate(45deg)}
.khs-text-card>summary small{margin-left:auto;font-weight:500;color:var(--muted);font-size:11px}
.khs-text-body{display:grid;gap:10px;margin-top:10px}
.khs-transcript{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;padding-right:2px}
.khs-tr-row{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;align-items:center;gap:8px;margin:0!important}
.khs-tr-row .khs-input{padding:6px 9px;font-size:12px;border-radius:9px;min-width:0;width:100%;box-sizing:border-box}
.khs-tr-time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.khs-tr-empty{color:var(--muted);font-size:11px;line-height:1.5}
.khs-text-tools{display:flex;gap:8px}.khs-text-tools .khs-ghost{width:auto;flex:1;padding:7px 10px;font-size:11px}
.khs-sub>summary{cursor:pointer;font-size:11px;color:var(--muted);list-style:none}.khs-sub>summary::-webkit-details-marker{display:none}
.khs-sub>summary:after{content:" ›"}.khs-sub[open]>summary:after{content:" ⌄"}
#reset-tr{align-self:flex-start}
/* edit mode: a slim pill right above the action buttons */
.khs-editbar{position:fixed;z-index:40;display:flex;align-items:center;gap:7px;height:28px;padding:0 6px 0 10px;border-radius:14px;background:#10235a;color:#fff;font-size:11px;box-shadow:0 6px 18px rgba(10,30,80,.25);max-width:calc(100vw - 32px);box-sizing:border-box}
.khs-editbar i{width:7px;height:7px;border-radius:50%;background:#4d96ff;box-shadow:0 0 0 3px rgba(77,150,255,.25);flex:none}
.khs-editbar span{opacity:.7}
.khs-editbar b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.khs-editbar button{margin-left:4px;height:20px;padding:0 9px;border-radius:10px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:10px;box-shadow:none;flex:none}@media (hover:hover) and (pointer:fine){.khs-editbar button:hover{background:rgba(255,255,255,.24)}}
html.dark-mode .khs-editbar{background:#2e2e2e}
/* UI Kit categories: one row that scrolls sideways, never wraps */
#uk-cats.khs-cats{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
#uk-cats.khs-cats::-webkit-scrollbar{display:none}
#uk-cats.khs-cats button{flex:0 0 auto!important;padding:5px 11px!important;white-space:nowrap}
/* v35 — our own small controls: Reset, account, colour rows */
.khs-reset-btn{width:auto!important;align-self:flex-start;margin-top:6px;padding:7px 14px!important;font-size:11px!important;border-radius:10px!important}
html.dark-mode .khs-reset-btn{background:linear-gradient(180deg,#363636,#2e2e2e)!important;color:#cfcfcf!important;border:1px solid rgba(255,255,255,.1)!important}@media (hover:hover) and (pointer:fine){html.dark-mode .khs-reset-btn:hover{color:#fff!important;border-color:rgba(31,111,255,.55)!important}}
.khs-account{width:44px;height:44px;margin:2px auto 6px;display:flex;align-items:center;justify-content:center;border-radius:14px!important;padding:0!important;cursor:pointer}
.khs-account svg{width:20px;height:20px}
html.dark-mode .khs-account{background:linear-gradient(180deg,#363636,#2e2e2e)!important;border:1px solid rgba(255,255,255,.1)!important;color:#d9d9d9!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.25)!important}@media (hover:hover) and (pointer:fine){html.dark-mode .khs-account:hover{color:#fff!important;border-color:rgba(31,111,255,.5)!important}}
.khs-account.on{color:#4d96ff!important}
#tabs .tab-icon svg{width:22px;height:22px}
.khs-color-row .khs-swatches{display:flex;flex-wrap:wrap;gap:10px}
.khs-color-row .khs-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--muted)}
.khs-color-row .khs-swatch input[type=color]{width:44px!important;height:30px!important;border-radius:10px}
.khs-fonts{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:10px 0;border-top:1px solid rgba(127,127,127,.18)}
.khs-fonts .field-label{grid-column:1/3}
.khs-fonts small{color:var(--muted);font-size:11px}
.khs-fonts .khs-ghost{width:auto;padding:7px 12px;font-size:11px}
/* v37 — motion-designer pass: grouped cards, pairs on one row, readable primary action */
.khs-card-head{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#8b8b8b);margin:0 0 10px}
.khs-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.khs-pair>label{display:flex;flex-direction:column;gap:6px;min-width:0}
.khs-pair .segmented{min-width:0}
.khs-more>summary small{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khs-more>.khs-form{margin-top:12px}
.apply-row .primary,#apply-captions,#apply-face,#apply-uikit{font-size:13px!important;font-weight:650!important;letter-spacing:.01em}
.khs-form .khs-hint{text-align:left!important;margin:-2px 0 2px}
.khs-ease{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:10px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06)}
.khs-ease canvas{width:96px;height:64px;display:block}
.khs-ease .khs-ease-frame{position:relative;height:64px;border-radius:8px;overflow:hidden;background:#141414}
.khs-ease .khs-ease-frame i{position:absolute;inset:0;margin:auto;border-radius:6px;background:linear-gradient(135deg,#3c3c40,#1e1e20);transform-origin:var(--fx,50%) var(--fy,40%)}
.khs-ease .khs-ease-frame b{position:absolute;width:12px;height:12px;border-radius:50%;left:calc(var(--fx,50%) - 6px);top:calc(var(--fy,40%) - 6px);background:#e9c9b9;opacity:.9}
@media (max-width:360px){.khs-pair{grid-template-columns:1fr}}
.khs-pair>label{align-items:stretch!important;text-align:left!important}
.khs-pair .field-label{justify-content:flex-start!important;text-align:left!important;font-size:11px;font-weight:600}
#energy-hint,.khs-form p.khs-hint{text-align:left!important}
/* zoom preview frame: a tiny talking-head shot so the move reads like footage */
.khs-ease .khs-ease-frame i{background:radial-gradient(ellipse 13% 22% at var(--fx,50%) var(--fy,40%),#d9b2a0 0 92%,transparent 100%),radial-gradient(ellipse 34% 30% at var(--fx,50%) 100%,#2e2e33 0 96%,transparent 100%),linear-gradient(160deg,#3c3c42,#1c1c1f 70%)!important}
.khs-ease .khs-ease-frame b{display:none}
.khs-ease{grid-template-columns:1fr 60px!important;padding:8px 10px!important}
.khs-ease canvas{width:100%!important;height:96px!important}
.khs-ease .khs-ease-frame{height:106px!important;width:60px;border-radius:9px}
.khs-ease .khs-ease-frame i{background:radial-gradient(ellipse 22% 13% at var(--fx,50%) var(--fy,40%),#d9b2a0 0 92%,transparent 100%),radial-gradient(ellipse 55% 17% at var(--fx,50%) 66%,#3b2a2e 0 96%,transparent 100%),linear-gradient(0deg,#3b2a2e 0 34%,transparent 34%),linear-gradient(160deg,#4a2730,#1c1517 70%)!important}
#zm-ease.khs-off{opacity:.35;pointer-events:none}

/* Text Behind preview: a drawn studio bust (no footage), the text rising
   behind the head with the current text, font, colour, size and height. */
.khs-bt-preview{position:relative;height:180px;margin:0 0 10px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:#2b2b30}
.khs-bt-preview svg{width:100%;height:100%;display:block}
.khs-bt-preview .bt-word-g{animation:khsBtRise 3.4s cubic-bezier(.16,.84,.24,1) infinite;transform-box:fill-box}
@keyframes khsBtRise{0%,5%{opacity:0;transform:translateY(12px) scale(.94)}20%{opacity:1}24%{transform:translateY(0) scale(.96)}86%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0;transform:translateY(0) scale(1)}}
.khs-tr-preview canvas{width:100%;height:100%;display:block}