/* V10 video presentation, isolated in the existing video editor's shadow root.
   Real model controls, generation, materials and user storage remain authoritative. */
:host {
  --v10-surface: #fffffff0;
  --v10-editor: linear-gradient(115deg,#c8f4e612,transparent 53%,#e8c4dd10),#ffffffb8;
  --v10-control: #f8fcfbba;
  --v10-control-hover: #e8f3f0;
  --v10-text: #24444d;
  --v10-muted: #536d77;
  --v10-soft: #5f7881;
  --v10-border: #2c777d24;
  --v10-shadow: 0 14px 45px #28596512;
  --v10-primary: #162a2c;
  --v10-spectrum: linear-gradient(105deg,#a5e4d1,#bbd9f0 55%,#e3bed4);
  --v10-title-gradient: linear-gradient(105deg,#187f6a,#4c6eab 52%,#a35278);
  --v10-title-dot: #187f6a;
  --v10-control-border: #2c777d24;
  --v10-control-ink: #536d77;
  overflow: visible;
  color: var(--v10-text);
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.5; font-synthesis:none;
}
:host([data-ui-theme="dark"]) {
  --video-studio-background: #171b1e;
  --v10-surface: #293238fa;
  --v10-editor: linear-gradient(115deg,#c8f4e605,transparent 53%,#e8c4dd04),#262e32b3;
  --v10-control: #ffffff04;
  --v10-control-hover: #ffffff0c;
  --v10-text: #edf5f1;
  --v10-muted: #abc1c9;
  --v10-soft: #a2bac4;
  --v10-border: #bfd6dc24;
  --v10-shadow: 0 14px 45px #0a10151a;
  --v10-title-gradient: linear-gradient(105deg,#9ce6d3,#b4d4f5 52%,#eac4cf);
  --v10-title-dot: #9ae3d0;
  --v10-control-border: #ffffff0d;
  --v10-control-ink: #bdd1d6;
  --ink: var(--v10-text);
  --muted: var(--v10-muted);
  --line: var(--v10-border);
  --glass: var(--v10-editor);
  --shadow: var(--v10-shadow);
  --accent: #a7e5d3;
  --accent-dark: #c5e1d8;
}
/* Keep retained catalog dialogs and controls in the same charcoal palette. */
:host([data-ui-theme="dark"]) :is(.colour-control,.icon-button,.long-video-button,.model-select,.select-input,.prompt-input,.option-button,.searchbox,.chip,.dialog-close,.waiting-icon,.preview-motion-toggle) { background:var(--v10-control); color:var(--v10-text); border-color:var(--v10-border); }
:host([data-ui-theme="dark"]) :is(.colour-control,.icon-button,.long-video-button,.dialog-close):hover { background:var(--v10-control-hover); color:var(--accent); }
:host([data-ui-theme="dark"]) :is(.option-button,.chip).active,
:host([data-ui-theme="dark"]) :is(.option-button,.chip)[aria-pressed="true"] { background:var(--v10-control-hover); color:var(--accent-dark); border-color:var(--accent); }
:host([data-ui-theme="dark"]) .preview-stage { background:linear-gradient(138deg,#20282d,#192125); border-color:var(--v10-border); }
:host([data-ui-theme="dark"]) :is(.selected-template,.preview-tags span,.generation-progress,.reference-chip,.prompt-block) { background:var(--v10-control-hover); color:var(--v10-text); border-color:var(--v10-border); }
:host .workspace { container-name: video-v10; container-type: inline-size; }
:host main { width:100%; max-width:1640px; padding:8px 42px 24px; }
:host .ambient { position:absolute; inset:0 0 auto; z-index:0; height:570px; background:transparent; overflow:hidden; pointer-events:none; -webkit-mask-image:none; mask-image:none; }
:host .ambient::before,:host .ambient::after {
  content:""; position:absolute; inset:-15%;
  background:radial-gradient(ellipse 58% 90% at 8% -10%,#25bfa43f,transparent 80%),radial-gradient(ellipse 50% 85% at 54% -12%,#508bec29,transparent 85%),radial-gradient(ellipse 50% 85% at 98% -6%,#ef996c38,transparent 86%);
  background:radial-gradient(ellipse 58% 90% at 8% -10%,color-mix(in srgb,var(--orb-one,#25bfa4) 25%,transparent),transparent 80%),radial-gradient(ellipse 50% 85% at 54% -12%,color-mix(in srgb,var(--orb-two,#508bec) 16%,transparent),transparent 85%),radial-gradient(ellipse 50% 85% at 98% -6%,color-mix(in srgb,var(--orb-three,#ef996c) 22%,transparent),transparent 86%);
  animation:video-v10-ambient-flow 9s ease-in-out infinite alternate;
}
:host .ambient::after {
  background:radial-gradient(ellipse 55% 90% at 12% -5%,#3299e539,transparent 80%),radial-gradient(ellipse 50% 85% at 50% -12%,#bd7ee122,transparent 85%),radial-gradient(ellipse 50% 85% at 98% -6%,#ed838738,transparent 86%);
  background:radial-gradient(ellipse 55% 90% at 12% -5%,color-mix(in srgb,var(--orb-three,#3299e5) 22%,transparent),transparent 80%),radial-gradient(ellipse 50% 85% at 50% -12%,color-mix(in srgb,var(--orb-one,#bd7ee1) 13%,transparent),transparent 85%),radial-gradient(ellipse 50% 85% at 98% -6%,color-mix(in srgb,var(--orb-two,#ed8387) 22%,transparent),transparent 86%);
  animation-delay:-9s;
}
:host([data-palette="studio-reference"]) .ambient::after {
  background:radial-gradient(ellipse 55% 90% at 12% -5%,#3299e539,transparent 80%),radial-gradient(ellipse 50% 85% at 50% -12%,#bd7ee122,transparent 85%),radial-gradient(ellipse 50% 85% at 98% -6%,#ed838738,transparent 86%);
}
:host .workspace :is(button,input,textarea,select) { font-family:inherit; }

.page-heading {
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; min-height:0; margin:16px 0 25px;
  padding:12px 0 3px; text-align:center;
}
.page-heading .heading-copy { max-width:700px; min-width:0; }
.page-heading .studio-signature { display:flex; align-items:center; justify-content:center; margin:0 0 13px; }
.page-heading .studio-signature img { display:block; width:94px; height:30px; object-fit:contain; }
.page-heading h1 { font-size:39px; line-height:1.14; font-weight:650; letter-spacing:-1.4px; color:var(--v10-text); }
.page-heading h1>[data-i18n="headline"] { color:inherit; }
.page-heading .gradient-text { color:var(--v10-title-dot); background:var(--v10-title-gradient); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.page-heading .title-dot { color:var(--v10-title-dot); }
.page-heading p { max-width:none; color:var(--v10-muted); font-size:13px; line-height:1.6; margin-top:11px; }
.intro-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:23px; min-width:0; }
.intro-actions :is(.long-video-button,.history-link) {
  display:inline-flex; align-items:center; gap:7px; min-height:0; margin:0;
  padding:4px 0; border:0; background:transparent; box-shadow:none;
  color:var(--v10-muted); font-size:11px; line-height:1.5; font-weight:500;
}
.intro-actions :is(.long-video-button,.history-link):hover { background:transparent; color:var(--accent-dark); }
:host([data-ui-theme="dark"]) .intro-actions :is(.long-video-button,.history-link) { background:transparent; color:var(--v10-muted); }
:host([data-ui-theme="dark"]) .intro-actions :is(.long-video-button,.history-link):hover { background:transparent; color:var(--accent-dark); }
.intro-actions svg { width:15px; height:15px; }
.studio-tools { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px 24px; margin-top:24px; padding-top:16px; border-top:1px solid var(--v10-border); }
.studio-tools .theme-controls { position:static; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
:host .studio-tools :is(.colour-control,.icon-button) { min-height:30px; border:0; background:transparent; color:var(--v10-muted); }
.studio-tools .colour-control { padding:5px 7px; gap:6px; font-size:9px; }
.studio-tools .icon-button { width:30px; height:30px; }
:host .studio-tools :is(.colour-control,.icon-button):hover { background:var(--v10-control-hover); color:var(--accent-dark); }
.studio-tools .icon-button svg { width:14px; height:14px; }
.studio-tools .colour-dots i { width:6px; height:6px; }

#editor.editor-v10 {
  position:relative; isolation:isolate; width:100%; max-width:1080px; margin-inline:auto;
  padding:21px 24px 13px; border:0; border-radius:22px;
  background:var(--v10-editor); box-shadow:var(--v10-shadow); backdrop-filter:blur(20px);
  scroll-margin-top:92px;
}
#editor.editor-v10::after {
  content:""; position:absolute; inset:0; z-index:-1; padding:1px; border-radius:inherit;
  pointer-events:none; background:conic-gradient(from var(--video-v10-flow-angle,0deg),#52bcf7,#8c79f4,#f778a5,#ff9c6b,#ebd15d,#5dcca1,#52bcf7); opacity:.36;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:video-v10-outline-flow 6s linear infinite;
}
#editor.editor-v10:focus-within::after { opacity:.66; }
#editor.editor-v10:focus { outline:none; }
#editor.editor-v10 .editor-grid { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; gap:0 18px; min-width:0; }
#editor.editor-v10 #uploadButton.simple-upload-button {
  position:relative; display:grid; place-items:center; grid-column:1; grid-row:1; align-self:start;
  width:42px; min-width:42px; height:42px; min-height:42px; margin:4px 0 0; padding:0;
  border:1px solid var(--v10-border); border-radius:13px; background:var(--v10-control); color:var(--accent-dark);
}
#editor.editor-v10 #uploadButton.simple-upload-button:hover { background:var(--v10-control-hover); border-color:var(--accent); }
#editor.editor-v10 #uploadButton.simple-upload-button svg { width:21px; height:21px; }
#uploadCount { position:absolute; right:-5px; top:-5px; min-width:17px; height:17px; padding:0 4px; border:2px solid var(--video-studio-background,#f8fbfc); border-radius:9px; background:#b3dfd0; color:#23413d; font-size:9px; line-height:13px; font-weight:600; }
#editor.editor-v10 #promptPane { grid-column:2; grid-row:1; min-width:0; }
#editor.editor-v10 .prompt-shell { position:relative; min-width:0; background:transparent; border:0; border-radius:0; }
#editor.editor-v10 #promptInput {
  display:block; width:100%; height:var(--simple-prompt-height,116px); min-height:88px;
  max-height:600px; padding:8px 26px 22px 0; border:0; border-radius:0;
  background:transparent; color:var(--v10-text); box-shadow:none; resize:none;
  font-size:17px; font-weight:400; line-height:1.75; overflow:auto;
  scrollbar-width:thin; scrollbar-color:#70878f transparent;
}
#editor.editor-v10 #promptInput::placeholder { color:var(--v10-muted); opacity:1; }
#editor.editor-v10 #promptInput:focus-visible { outline:none; }
#promptHeightHandle {
  position:absolute; right:0; bottom:1px; display:grid; place-items:center; width:22px; height:22px;
  padding:3px; border:0; border-radius:4px; background:transparent; color:var(--v10-soft);
  cursor:ns-resize; touch-action:none; user-select:none;
}
#promptHeightHandle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
#promptHeightHandle>span { font-size:22px; line-height:1; transform:rotate(-45deg); }
#promptHeightHandle:hover,#promptHeightHandle:focus-visible { color:var(--accent-dark); background:var(--v10-control-hover); }
#editor .prompt-meta { margin-top:0; padding:4px 0 0; gap:15px; color:var(--v10-soft); font-size:9px; }
#editor .prompt-meta kbd { font:inherit; font-size:8px; }
#charCount { white-space:nowrap; font-variant-numeric:tabular-nums; }
#editor .selected-template { margin:0 0 17px; padding:0 0 13px; border:0; border-bottom:1px solid var(--v10-border); border-radius:0; background:transparent; }
#editor .selected-info strong { color:var(--v10-text); }
#editor .selected-info small { color:var(--v10-soft); }
#editor #detachTemplate { flex:none; width:28px; min-height:28px; height:28px; padding:5px; border:0; background:transparent; color:var(--v10-muted); }
#editor #detachTemplate svg { width:15px; height:15px; }

#uploadPane { grid-column:1/-1; min-width:0; margin:16px 0 0; padding:18px 0 1px; border-top:1px solid var(--v10-border); }
#uploadPane .reference-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:24px; margin-bottom:10px; color:var(--v10-muted); font-size:11px; }
#uploadPane .reference-list { display:flex; flex-wrap:wrap; align-items:flex-start; gap:18px; min-height:0; margin:0; padding:5px 4px 0; }
#uploadPane :is(.reference-chip,.reference-tile) { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:0; width:auto; max-width:calc(25% - 14px); min-width:0; padding:0; border:0; border-radius:0; background:transparent; }
#uploadPane .reference-view { order:1; display:block; width:auto; max-width:100%; padding:0; border:1px solid transparent; background:transparent; border-radius:8px; overflow:hidden; cursor:zoom-in; }
#uploadPane .reference-view img,#uploadPane .reference-view video { display:block; width:auto; height:auto; max-width:100%; max-height:175px; object-fit:contain; border-radius:8px; }
#uploadPane .reference-name { order:2; display:block; width:100%; max-width:190px; margin:0; padding-top:7px; font-size:10px; color:var(--v10-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#uploadPane .reference-retained { order:3; display:block; max-width:190px; padding-top:4px; color:var(--v10-soft); font-size:9px; line-height:1.5; overflow-wrap:anywhere; }
#uploadPane .reference-tile[data-active="true"] .reference-view { border-color:var(--accent); }
#uploadPane .reference-tile[data-active="false"] .reference-view { border-color:var(--v10-border); }
#uploadPane .reference-view:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#uploadPane .remove-reference { position:absolute; top:-7px; right:-7px; width:25px; height:25px; border:1px solid var(--v10-border); border-radius:50%; color:var(--v10-text); background:var(--v10-surface); box-shadow:0 2px 6px #183b3b15; }
#uploadPane .remove-reference svg { width:13px; height:13px; }
#uploadPane .reference-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding-top:12px; font-size:10px; }
#addReferences { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:5px 0; background:transparent; color:var(--accent-dark); font-size:11px; }
#addReferences svg { width:14px; height:14px; }
#referenceNote { flex:1 1 170px; color:var(--v10-soft); font-size:10px; line-height:1.6; overflow-wrap:anywhere; text-align:right; }
#editor[data-dragging="true"],#editor.drag-over,#editor.simple-dragging { background:var(--v10-control-hover); }
#editor :is([data-reference-handoff-error],.reference-error) { grid-column:1/-1; }

#editor .editor-footer { display:flex; align-items:center; flex-wrap:nowrap; gap:9px; min-width:0; margin-top:18px; padding-top:0; border:0; }
#editor :is(.simple-control,.v10-select-trigger) { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; min-height:38px; padding:0 12px; border:1px solid var(--v10-control-border); border-radius:10px; background:var(--v10-control); color:var(--v10-control-ink); font-size:11px; line-height:1.5; white-space:nowrap; }
#editor :is(.simple-control,.v10-select-trigger):hover,#editor :is(.simple-control,.v10-select-trigger)[aria-expanded="true"] { background:var(--v10-control-hover); border-color:var(--accent); }
#editor :is(.simple-control,.v10-select-trigger) svg { width:15px; height:15px; }
#editor :is(#modeIcon,.control-icon,.control-chevron),.v10-select-arrow { display:inline-flex; align-items:center; flex:none; }
#editor :is(.simple-control,#generateButton)>[data-icon] { display:inline-flex; align-items:center; flex:none; }
#modeButton { flex:0 1 auto; min-width:0; max-width:200px; }
#modeValue { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; }
#editor .model-setting { display:flex; flex:0 1 auto; width:max-content; max-width:285px; min-width:0; margin:0; }
#editor .model-setting>.field,#editor .model-setting>label { width:100%; min-width:0; margin:0; }
#editor .model-setting .field-label,#editor .model-setting .field-help { display:none; }
#editor #modelSelect { width:100%; min-width:0; max-width:100%; min-height:38px; height:38px; padding:0 10px; border:1px solid var(--v10-border); background:var(--v10-control); color:var(--v10-text); font-size:11px; text-overflow:ellipsis; }
#editor #modelSelect.v10-native-select { position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
#editor #modelButton { justify-content:flex-start; width:auto; max-width:100%; min-width:0; color:var(--v10-text); }
#editor .v10-model-value { display:block; flex:0 1 auto; min-width:0; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-weight:550; }
#editor .v10-select-arrow { flex:none; }
#editor .v10-select-arrow svg { width:14px; height:14px; }
#settingsButton { flex:0 1 auto; min-width:0; max-width:245px; }
#settingsSummary { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#editor #generateButton { position:relative; isolation:isolate; overflow:hidden; flex:0 0 auto; width:auto; min-width:151px; min-height:42px; height:42px; margin:0 0 0 auto; padding:0 17px; border-radius:11px; gap:9px; background:var(--v10-spectrum)!important; color:var(--v10-primary)!important; box-shadow:0 4px 14px #1c625313!important; font-size:12px; }
#editor #generateButton::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,#bdd8f5,#edc3ce 55%,#ead2a7); animation:video-v10-button-flow 7s ease-in-out infinite alternate; }
#editor #generateButton:hover { background:var(--v10-spectrum)!important; box-shadow:0 0 0 2px #80baa23d!important; }
#editor #generateButton:disabled { background:var(--v10-control-hover)!important; color:var(--v10-muted)!important; box-shadow:none!important; }
#editor #generateButton:disabled::before { display:none; }
#editor #generateButton svg { width:17px; height:17px; }
#editor .preview-note { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin:9px 0 0; padding:0; color:var(--v10-soft); font-size:8px; line-height:1.5; text-align:right; }
#editor .preview-note::before { content:""; flex:none; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.7; }

/* Sibling menus are viewport positioned; the workspace alone owns size containment. */
.simple-popover {
  box-sizing:border-box; position:fixed; z-index:80; width:min(340px,calc(100vw - 24px));
  max-width:calc(100vw - 24px); max-height:min(500px,calc(100dvh - 24px));
  overflow:auto; overscroll-behavior:contain; padding:9px; border:1px solid var(--v10-border);
  border-radius:15px; background:var(--v10-surface); color:var(--v10-text);
  box-shadow:0 18px 55px #04161e33; backdrop-filter:blur(22px);
  scrollbar-width:thin; scrollbar-color:#70878f transparent;
}
.simple-popover[hidden] { display:none!important; }
#modeMenu { width:245px; padding:7px; }
#modelMenu { width:min(420px,calc(100vw - 24px)); padding:8px; }
.v10-self-selected-action { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:43px; margin-top:8px; padding:10px 12px; border:1px solid var(--v10-border); border-radius:9px; background:var(--v10-control); color:var(--v10-text); text-align:left; font-size:12px; font-weight:600; line-height:1.5; cursor:pointer; }
.v10-self-selected-action::after { content:'↗'; flex:none; font-size:16px; }
.v10-self-selected-action:hover { background:var(--v10-control-hover); border-color:var(--accent); }
.v10-self-selected-action:focus-visible,.v10-settings-model-action:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.v10-self-selected-action:disabled,.v10-settings-model-action:disabled { opacity:.5; cursor:not-allowed; }
#modeMenu [data-video-workflow],.v10-model-option { position:relative; display:flex; align-items:center; gap:11px; width:100%; min-height:42px; padding:10px 12px; border:1px solid transparent; border-radius:9px; text-align:left; background:transparent; color:var(--v10-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
#modeMenu [data-video-workflow] svg { width:17px; height:17px; flex:none; }
#modeMenu [data-video-workflow]:hover,.v10-model-option:hover { background:var(--v10-control-hover); color:var(--v10-text); }
#modeMenu [aria-selected="true"],.v10-model-option[aria-selected="true"] { background:var(--v10-control-hover); color:var(--v10-text); border-color:var(--v10-border); }
#modeMenu [aria-selected="true"]::before,.v10-model-option[aria-selected="true"]::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:2px; background:var(--v10-spectrum); }
#modeMenu button:disabled,.v10-model-option:disabled,.v10-model-option[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
#settingsPanel { padding:15px; }
#settingsPanel .simple-panel-head { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:0 0 13px; }
#settingsPanel .simple-panel-head :is(h2,h3,strong) { margin:0; color:var(--v10-text); font-size:13px; line-height:1.4; font-weight:550; }
#settingsClose { display:grid; place-items:center; flex:none; width:27px; height:27px; min-height:27px; padding:5px; border:0; border-radius:8px; background:transparent; color:var(--v10-muted); }
#settingsClose:hover { background:var(--v10-control-hover); }
#settingsClose svg { width:16px; height:16px; }
#settingsPanel .field { margin:15px 0 0; }
#settingsPanel .field:first-child { margin-top:0; }
#settingsPanel .field-label { margin-bottom:8px; color:var(--v10-muted); font-size:11px; }
#settingsPanel .v10-settings-model-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
#settingsPanel .v10-settings-model-action { min-width:0; min-height:40px; padding:9px 11px; border:1px solid var(--v10-border); border-radius:9px; background:var(--v10-control); color:var(--v10-text); font-size:12px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; cursor:pointer; }
#settingsPanel .v10-settings-model-action:hover { background:var(--v10-control-hover); border-color:var(--accent); }
#settingsPanel .select-input { color:var(--v10-text); background:var(--v10-control); border-color:var(--v10-border); font-size:12px; }
#settingsPanel .option-button { flex:1 1 auto; min-height:38px; color:var(--v10-muted); background:var(--v10-control); border-color:var(--v10-border); }
#settingsPanel .option-button[aria-pressed="true"] { background:var(--v10-control-hover); color:var(--accent-dark); border-color:var(--accent); box-shadow:none; }
#settingsPanel .advanced-settings { margin-top:17px; padding-top:10px; border-color:var(--v10-border); }
#settingsPanel .advanced-settings summary { color:var(--v10-muted); }
#settingsPanel .check-option { color:var(--v10-text); }
#editSettingsNote { color:var(--v10-muted); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }

#videoOutput.video-output { max-width:1080px; width:100%; margin:24px auto 0; padding:21px; border-radius:18px; border-color:var(--v10-border); background:var(--v10-editor); }
#videoOutput .preview-stage { max-width:100%; min-height:0; aspect-ratio:16/9; flex:none; }
#videoOutput .video-result-actions { flex-wrap:wrap; }
#videoOutput .video-result-actions a { flex:1 1 170px; }
#videoOutput .preview-description { align-items:center; flex-wrap:wrap; }
#videoOutput .preview-description .preview-empty-note { color:var(--v10-muted); }
#videoOutput .panel-heading { margin-bottom:16px; }

/* The original catalog supplies every ID, source frame, category and prompt. */
.gallery-section { margin-top:36px; padding-top:0; border-top:0; }
.gallery-heading { align-items:center; gap:28px; margin-bottom:18px; }
.gallery-title>.eyebrow { display:none; }
.gallery-title h2 { color:var(--v10-text); font-size:25px; font-weight:580; line-height:1.5; letter-spacing:-.7px; }
.gallery-title p { margin-top:6px; color:var(--v10-muted); font-size:12px; }
.gallery-heading .searchbox { width:320px; min-width:0; min-height:0; padding:10px 13px; gap:11px; border-radius:11px; border-color:var(--v10-control-border); background:var(--v10-control); }
.gallery-heading .searchbox input { height:auto; line-height:1.5; color:var(--v10-text); }
.gallery-heading .searchbox svg { width:18px; height:18px; }
.gallery-heading .searchbox input::placeholder { color:var(--v10-soft); opacity:1; }
.gallery-filterbar { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.gallery-toolbar { flex:none; gap:0; margin:0; }
.gallery-tabs { gap:8px; flex-wrap:wrap; }
.gallery-tabs button { position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:8px; min-height:0; padding:8px 13px; border:1px solid transparent; border-radius:11px; background:var(--v10-control); color:var(--v10-muted); font-size:11px; line-height:1.5; }
.gallery-tabs button.active { color:var(--accent-dark); border-color:transparent; background:var(--v10-control-hover); }
.gallery-tabs [data-icon] { display:inline-flex; flex:none; }
.gallery-tabs svg { width:15px; height:15px; }
#savedCount { padding:1px 6px; border-radius:6px; background:var(--v10-control-hover); font-size:10px; line-height:1.5; }
.gallery-playback-controls { min-width:0; gap:12px; }
.preview-motion-toggle { min-height:34px; color:var(--v10-muted); border-color:var(--v10-border); background:var(--v10-control); font-size:10px; }
.category-row { flex:1; min-width:0; gap:8px; margin:0; }
.category-row .chip { min-height:32px; padding:6px 11px; border-color:var(--v10-border); background:var(--v10-control); color:var(--v10-muted); font-size:11px; }
.category-row .chip.active { color:var(--accent-dark); background:var(--v10-control-hover); border-color:transparent; }
.gallery-tabs button.active::after,.category-row .chip.active::after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--video-v10-flow-angle,0deg),#52bcf7,#8c79f4,#f778a5,#ff9c6b,#ebd15d,#5dcca1,#52bcf7); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:video-v10-outline-flow 6s linear infinite; }
.category-row .chip { position:relative; isolation:isolate; }
#gallery.gallery-grid { --gallery-gap:16px; --gallery-row-gap:22px; --gallery-caption-height:64px; display:block; position:relative; width:100%; overflow-anchor:none; }
#gallery .template-card { position:absolute; width:180px; min-width:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; transition:none; }
#gallery .template-card:hover,#gallery .template-card:focus-within { box-shadow:none; }
#gallery .media-button { width:100%; border:0; border-radius:14px; background:transparent; }
#gallery .media-button img,#gallery .media-button video { width:100%; height:100%; object-fit:contain; transform:none; transition:none; background:transparent; }
#gallery .template-card:hover .media-button img { transform:none; }
#gallery .card-caption { height:var(--gallery-caption-height); padding:11px 1px 8px; justify-content:flex-start; }
#gallery .card-caption h3,#gallery .template-card[data-size="large"] .card-caption h3 { color:var(--v10-text); font-size:12px; line-height:1.5; }
#gallery .card-category,#gallery .template-card[data-size="large"] .card-category { display:block; color:var(--v10-soft); font-size:10px; line-height:1.5; }
#gallery .card-actions { top:9px; right:9px; }
#gallery .card-cta { bottom:calc(var(--gallery-caption-height) + 10px); min-height:30px; max-width:calc(100% - 18px); padding:6px 9px; font-size:10px; }
#gallery .duration-badge { top:auto; bottom:11px; }
.gallery-status,.result-count { color:var(--v10-soft); }

#referenceDialog { width:min(850px,calc(100vw - 36px)); max-height:90dvh; margin:auto; padding:16px; border:1px solid var(--v10-border); border-radius:18px; background:var(--v10-surface); color:var(--v10-text); box-shadow:0 24px 80px #0005; overflow:auto; }
#referenceDialog .reference-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
#referenceFilename { min-width:0; font-size:12px; overflow-wrap:anywhere; }
#closeReference { flex:none; border-color:var(--v10-border); background:var(--v10-control); color:var(--v10-text); }
#referencePreview { display:flex; align-items:center; justify-content:center; }
#referencePreview img,#referencePreview video { width:auto; height:auto; max-width:100%; max-height:72dvh; object-fit:contain; border-radius:10px; }
#referenceDialog::backdrop { background:#071417a6; backdrop-filter:blur(5px); }

@keyframes video-v10-outline-flow { to { --video-v10-flow-angle:360deg; } }
@keyframes video-v10-ambient-flow { from { opacity:.25; transform:translateX(-3%); } to { opacity:.9; transform:translateX(3%); } }
@keyframes video-v10-button-flow { from { opacity:0; } to { opacity:1; } }
:host([data-motion="paused"]) #editor::after,
:host([data-motion="paused"]) .ambient::before,
:host([data-motion="paused"]) .ambient::after,
:host([data-motion="paused"]) #generateButton::before,
:host([data-motion="paused"]) .gallery-tabs button.active::after,
:host([data-motion="paused"]) .category-row .chip.active::after { animation-play-state:paused; }
#editor :is(button,select,input):focus-visible,.simple-popover :is(button,select,input):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

@container video-v10 (max-width:980px) {
  :host main { padding-left:28px; padding-right:28px; }
  #editor.editor-v10 { padding:19px 22px 13px; }
  #editor .editor-footer { flex-wrap:wrap; gap:8px; }
  #editor .model-setting { flex-basis:auto; max-width:240px; }
  #editor .v10-model-value { max-width:180px; }
  #editor #generateButton { min-width:139px; }
  #gallery.gallery-grid { --gallery-gap:13.6px; --gallery-row-gap:20px; }
}
@container video-v10 (max-width:700px) {
  :host main { padding:8px 22px 24px; }
  .page-heading { gap:14px; margin:15px 0 23px; padding:8px 0 0; }
  .page-heading h1 { font-size:35px; }
  #editor.editor-v10 { padding:18px 19px 12px; }
  #editor.editor-v10 .editor-grid { grid-template-columns:38px minmax(0,1fr); gap:0 13px; }
  #editor.editor-v10 #uploadButton.simple-upload-button { width:38px; min-width:38px; height:38px; min-height:38px; border-radius:11px; }
  #editor.editor-v10 #promptInput { font-size:16px; }
  #editor .model-setting { flex:0 1 auto; max-width:240px; }
  #settingsButton { max-width:220px; }
  #uploadPane :is(.reference-chip,.reference-tile) { max-width:calc(33.333% - 12px); }
  #uploadPane .reference-view img,#uploadPane .reference-view video { max-height:155px; }
  .gallery-heading { align-items:stretch; flex-direction:column; gap:16px; }
  .gallery-heading .searchbox { width:100%; }
  .gallery-filterbar { align-items:stretch; flex-wrap:wrap; gap:12px; }
  .gallery-toolbar { width:100%; }
  .gallery-playback-controls { flex:1 1 auto; justify-content:flex-end; }
  .category-row { flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding-bottom:5px; }
  .category-row .chip { flex:none; }
  #gallery.gallery-grid { --gallery-gap:12px; --gallery-row-gap:19px; }
}
@container video-v10 (max-width:460px) {
  :host main { padding:4px 15px 24px; }
  .page-heading h1 { font-size:32px; letter-spacing:-1px; }
  .page-heading p { font-size:12px; }
  .intro-actions { gap:17px; }
  .intro-actions :is(.history-link,.long-video-button) { font-size:10px; }
  #editor.editor-v10 { padding:16px 15px 12px; border-radius:19px; }
  #editor.editor-v10 .editor-grid { grid-template-columns:34px minmax(0,1fr); gap:0 11px; }
  #editor.editor-v10 #uploadButton.simple-upload-button { width:34px; min-width:34px; height:34px; min-height:34px; border-radius:10px; }
  #editor.editor-v10 #promptInput { padding-right:20px; font-size:16px; }
  #editor .prompt-meta { font-size:8px; gap:8px; }
  #editor :is(.simple-control,.v10-select-trigger) { height:35px; min-height:35px; padding:0 10px; gap:6px; font-size:10px; }
  #editor .model-setting { flex:1 1 110px; min-width:95px; max-width:none; }
  #modeButton { max-width:170px; }
  #settingsButton { max-width:calc(100% - 138px); }
  #editor #generateButton { min-width:130px; min-height:38px; height:38px; padding:0 13px; font-size:11px; }
  #uploadPane .reference-list { gap:15px; padding-inline:2px; }
  #uploadPane :is(.reference-chip,.reference-tile) { max-width:calc(50% - 8px); }
  #uploadPane .reference-name { max-width:140px; font-size:9px; }
  #uploadPane .reference-retained { max-width:140px; font-size:8px; }
  #referenceNote { text-align:left; }
  #gallery.gallery-grid { --gallery-gap:10.4px; --gallery-row-gap:18px; }
  #gallery .media-button { border-radius:12px; }
  #gallery .card-caption h3 { font-size:11px; }
  #gallery .card-category { font-size:9px; }
  #videoOutput.video-output { padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
  #editor.editor-v10::after,.ambient::before,.ambient::after,#editor #generateButton::before,.gallery-tabs button.active::after,.category-row .chip.active::after { animation:none!important; }
  #editor .editor-footer * { transition:none!important; }
}
@media (forced-colors:active) {
  #editor.editor-v10::after,.ambient { display:none; }
  .page-heading .gradient-text { background:none; color:CanvasText; -webkit-text-fill-color:CanvasText; }
  .page-heading .title-dot { color:CanvasText; }
  #editor.editor-v10,.simple-popover,#referenceDialog { border:1px solid CanvasText; background:Canvas; color:CanvasText; }
  #editor :is(.simple-control,.v10-select-trigger,#uploadButton),#modeMenu [data-video-workflow],.v10-model-option { border:1px solid ButtonText; color:ButtonText; background:ButtonFace; }
  #modeMenu [aria-selected="true"],.v10-model-option[aria-selected="true"] { outline:2px solid Highlight; }
  #editor #generateButton { background:ButtonFace!important; color:ButtonText!important; border:1px solid ButtonText; }
  #editor #generateButton::before { display:none; }
  .gallery-tabs button.active::after,.category-row .chip.active::after { display:none; }
  .gallery-tabs button.active,.category-row .chip.active { outline:1px solid Highlight; }
}