/* Comfy Studio v2 — calm, task-oriented creative dashboard. */
:root {
  --ui-bg: #0b111a;
  --ui-panel: #151e2b;
  --ui-panel-deep: #101a27;
  --ui-border: rgba(182, 207, 240, .13);
  --ui-ink: #f0f6ff;
  --ui-muted: #a6b5cb;
  --ui-accent: #90e9e5;
  --ui-blue: #9bbaff;
}
html { background: var(--ui-bg); }
body {
  color: var(--ui-ink);
  background: radial-gradient(900px 440px at 96% -8%, #12374468, transparent 72%),
    radial-gradient(760px 450px at 0% 10%, #27335d52, transparent 70%), var(--ui-bg);
  line-height: 1.56;
}
body::before { opacity:.065; }
.shell { max-width:1220px; padding:0 32px; }
header { align-items:center; padding:22px 0 24px; margin-bottom:24px; border-color:var(--ui-border); }
.brand { gap:13px; }
.brand .logo { border-radius:15px; width:48px; height:48px;
  background:linear-gradient(142deg,#94e5ee 0%,#7495e9 65%,#bb96fa);
  color:#101b32; font-weight:900; font-size:26px;
  box-shadow:0 8px 32px #529bb12f, inset 0 1px #fff8;
}
.brand h1 { font-size:23px; letter-spacing:-.7px; }
.brand .accent { background:linear-gradient(110deg,#a3f4ed,#a2b9ff);background-clip:text;-webkit-background-clip:text;color:transparent; }
.brand small { color:#a1bbce; letter-spacing:1.4px; font-size:9px; }
.status { border-radius:30px; padding:10px 14px; border-color:#87b7c435;
  background:#102732a8; color:#c4dedb; box-shadow:none;
}
.status.ready { background:#10352f; color:#99f2d2; border-color:#6dd7b33b; }
.header-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.job-open { margin:0; padding:9px 13px; font-size:12px; background:#203342; color:#d7f9f5; }
.job-open.has-jobs { outline:1px solid #91e8d8; }
.video-safety-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 17px; border:1px solid #80cbb044; border-radius:13px;
  background:#16342d99; padding:11px 13px; }
.video-safety-row .secondary { margin:0; flex:none; background:#285b4d; color:#e8fff1; }
.video-safety-row span { font-size:12px; color:#b6dfd0; flex:1 1 210px; }
.script-preflight { display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:10px 0; }
.script-preflight .secondary { flex:0 0 auto; margin:0; }
.script-preflight p { margin:0; flex:1 1 220px; font-size:12px; }
.job-open span { display:inline-grid; place-items:center; min-width:19px; min-height:19px;
  margin-left:4px; padding:0 4px; border-radius:99px; background:#426071; }
.studio-intro { display:none!important; }
nav#tabs {
  position:relative; display:flex; align-items:center; gap:7px;
  margin:0 0 13px; padding:6px; width:fit-content; max-width:100%;
  background:#172130d9; border:1px solid var(--ui-border); border-radius:16px;
  overflow-x:auto; box-shadow:0 12px 42px #0001;
}
nav#tabs button {
  min-width:140px; flex:0 0 auto; padding:12px 24px; color:#aebed1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:12px; font-size:13px; font-weight:750;
  transition:background .2s,color .2s;
}
nav#tabs button.active,nav#tabs button.group-active {
  background:linear-gradient(110deg,#c4fbfa,#9ebcf8);
  color:#142238; box-shadow:0 4px 20px #89e3df21;
}
.nav-symbol { font-size:20px; line-height:1; }
nav#creativeTabs {
  display:flex; gap:6px; align-items:center; margin:0 0 27px;
  padding:7px 0 11px; border-bottom:1px solid var(--ui-border);
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
}
nav#creativeTabs::-webkit-scrollbar { display:none; }
nav#creativeTabs button {
  color:#a5b6cc; font-size:12px; font-weight:750; white-space:nowrap;
  border:0; border-radius:8px; padding:10px 15px; background:transparent; flex:none;
}
nav#creativeTabs button:hover { background:#202e40; color:#effaff; }
nav#creativeTabs button.active { color:#9deae6; background:#1c353e; box-shadow:none; }
body[data-area="gallery"] #creativeTabs,
body[data-area="upscale"] #creativeTabs,
body[data-area="prompts"] #creativeTabs { display:none; }
.panel { animation: ui-appear .21s ease both; }
@keyframes ui-appear { from {opacity:.7;transform:translateY(5px)} to {opacity:1;transform:translateY(0)} }
.heading { margin-bottom:25px; align-items:flex-end; gap:14px; }
.heading small { font-size:10px; letter-spacing:2px; color:var(--ui-accent); }
.heading h2 { color:#f0f6ff; font-size:clamp(26px,3.7vw,42px); letter-spacing:-1.3px; margin:8px 0 9px; }
.heading p { font-size:13px; line-height:1.75; color:var(--ui-muted); max-width:780px; }
.accent { background:linear-gradient(105deg,#9bece5,#a7baff); color:transparent; background-clip:text;-webkit-background-clip:text; }
.card {
  border:1px solid var(--ui-border); border-radius:20px; padding:27px;
  background:linear-gradient(155deg,#1a2637 0%,#121d2b 95%);
  box-shadow:0 18px 50px #040a141c; overflow:visible;
}
.card h3 { color:#f3f8ff; margin-bottom:14px; }
.card .muted,.muted { color:var(--ui-muted); }
label { color:#dce9f7; }
textarea,select,input[type=file],input[type=search] {
  border-radius:11px; background:#0f1927; border:1px solid #819fbe39;
  color:#eaf2ff; transition:border-color .15s,box-shadow .15s;
}
textarea:focus,select:focus,input[type=file]:focus,input[type=search]:focus {
  border-color:#86d9e4; outline:0; box-shadow:0 0 0 3px #69c6e31f;
}
input[type=file] { line-height:1.6; }
input[type=file]::file-selector-button { background:#29404f; color:#d9f7fa;
  border:1px solid #598a9a55; border-radius:7px; padding:6px 10px; margin-right:11px; }
input[type=checkbox],input[type=range] { accent-color:#7cdedb; }
.primary {
  background:linear-gradient(110deg,#9dece9,#a5bffc);
  color:#102038; border:1px solid #d7fffc40;
  box-shadow:0 9px 26px #6db9d72b; font-weight:800;
}
.secondary { background:#26364a; border:1px solid #90aac53b; color:#dceaf7; box-shadow:none; }
.primary:hover,.secondary:hover { filter:brightness(1.1); }
.primary:focus-visible,.secondary:focus-visible,nav button:focus-visible,
.creation-card:focus-visible { outline:3px solid #a2ece6;outline-offset:3px; }
.chip { background:#233449; color:#c1d9e8; }
.setting-grid { gap:14px; }
.setting-grid select { width:100%; max-width:none; }
.empty { min-height:190px; background:#101c2a; border:1px dashed #8dacbc61; color:#aec2d7; }
.studio-toast { background:#173b3d; color:#ddfcfa; }
.job-box { position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  max-width:610px; width:min(610px,calc(100% - 32px)); z-index:40;
  background:#1a2c3cef; border:1px solid #8ddddb82; backdrop-filter:blur(14px);
  max-height:min(78vh,700px); overflow-y:auto;
}
.job-box[hidden] { display:none!important; }
.job-actions { display:flex; align-items:center; gap:10px; margin:12px 0; }
.job-cancel { border:1px solid #ec9e9e76; border-radius:10px; padding:9px 13px;
  color:#ffe7e4; background:#633943; font-size:12px; font-weight:750; }
.job-cancel:disabled { opacity:.55; cursor:not-allowed; }
.job-hide { margin-left:auto; padding:9px 13px; }
.job-queue-list { border-top:1px solid #8ddddb36; padding-top:9px; }
.job-queue-row { display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 2px; border-bottom:1px solid #b7d5ea20; }
.job-queue-row span { font-size:12px; min-width:0; overflow-wrap:anywhere; }
.job-queue-row .job-cancel { flex:none; }
.progress { background:#203b4b; }
.progress div { background:linear-gradient(90deg,#76dad7,#a6bbff); }
footer { border-top:1px solid var(--ui-border); margin-top:55px; padding-top:25px; }

/* Welcome dashboard */
.home-lead {
  padding:43px 48px 38px; border:1px solid #77a0b750; border-radius:23px; margin-bottom:22px;
  background:radial-gradient(600px 280px at 95% -20%,#90e4e044,transparent 80%),
    linear-gradient(116deg,#243951,#152c3c 61%,#1a3141);
  position:relative; overflow:hidden;
}
.home-lead:after { content:"✦"; position:absolute;right:5%;top:-55px;font-size:225px;line-height:1;color:#d6fcfc0b;pointer-events:none; }
.home-eyebrow { font-size:10px; color:#9fece7; font-weight:800; letter-spacing:2.3px; }
.home-lead h2 { position:relative; font-size:clamp(32px,4.2vw,54px);line-height:1.12;
  margin:17px 0 13px;letter-spacing:-2px;font-weight:840; }
.home-lead p { position:relative;color:#c0d4e2;line-height:1.8;font-size:14px;max-width:580px; }
.creation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.creation-card {
  text-align:left; display:flex; flex-direction:column; align-items:flex-start;
  min-height:242px; padding:27px 29px; border-radius:20px;
  color:#eaf6fc; background:linear-gradient(145deg,#1c2a3b,#151e2c);
  border:1px solid #91a6be2b; transition:transform .2s,border-color .2s,box-shadow .2s;
}
.creation-card:hover {transform:translateY(-3px);border-color:#8cd7db8c;box-shadow:0 20px 50px #03101d66; }
.creation-card-featured { background:radial-gradient(470px 250px at 96% 5%,#4cb6b641,transparent 85%),
  linear-gradient(123deg,#1c454c,#193141 62%,#1d2639); border-color:#8bdcd37a; }
.creation-card-icon {
  width:43px;height:43px;display:grid;place-items:center;flex:none;
  background:#80c4db1c;border:1px solid #b1d8ff38;border-radius:13px;
  color:#b0f5f0;font-size:24px;margin-bottom:15px;
}
.creation-card-kicker { color:#9ec9d3;letter-spacing:1.3px;text-transform:uppercase;font-size:10px;font-weight:800;margin-bottom:5px; }
.creation-card strong {font-size:23px;letter-spacing:-.6px;margin-bottom:7px;line-height:1.4}
.creation-card-description {color:#b1c4d5;font-size:13px;line-height:1.75;max-width:420px}
.creation-card-action { margin-top:auto;padding-top:16px;color:#a5eee9;font-size:12px;font-weight:850; }
.creation-card-action span {padding-left:6px;}
.home-footer-row { margin-top:19px;padding:22px 28px;border-radius:17px;
  border:1px solid var(--ui-border); background:#152231;
  display:flex;align-items:center;justify-content:space-between;gap:20px; }
.home-footer-row>div {display:grid;gap:3px}
.home-footer-row strong {font-size:16px;}
.home-footer-row span {color:var(--ui-muted);font-size:12px}
.home-footer-row button {flex:none;margin:0}

/* Progressive-disclosure controls */
.image-mode-switch {display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 18px;}
.image-mode-switch button {border:1px solid #8dabc64a;border-radius:12px;
  background:#1a293b;color:#c4d9e9;padding:12px 17px;font-size:13px;font-weight:750;
  white-space:nowrap;transition:border-color .17s,background .17s;}
.image-mode-switch button.selected {background:linear-gradient(110deg,#c0f7f0,#adc5fe);
  color:#142d39;border-color:#a8f2ed;box-shadow:0 6px 23px #6ac2c120;}
.image-mode-switch button:focus-visible {outline:3px solid #9df1eb;outline-offset:3px;}
.video-mode-switch {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 19px;}
.video-mode-switch button {text-align:left;display:flex;flex-direction:column;gap:3px;
  padding:18px 22px;border-radius:16px;border:1px solid var(--ui-border);
  background:#192432;color:#cddbe9;transition:border .2s,background .2s; }
.video-mode-switch button.selected {background:#1b3c43;border-color:#79dcd297;
  box-shadow:inset 3px 0 #91f0e4;color:#e7fffd}
.video-mode-switch button strong {font-size:15px}
.video-mode-switch button span {color:#98b6c7;font-size:11px}
.video-mode-switch button.selected span {color:#afe1d9}
body[data-video-mode="single"] #storyboardVideoCard,
body[data-video-mode="single"] #storyboardVideoResult,
body[data-video-mode="text"] .single-video-card,
body[data-video-mode="text"] #storyboardVideoCard,
body[data-video-mode="text"] #storyboardVideoResult,
body[data-video-mode="storyboard"] .single-video-card {display:none!important}
.advanced-settings {border:1px solid var(--ui-border);border-radius:14px;background:#142132;
  margin:0 0 19px;overflow:hidden; }
.advanced-settings summary {cursor:pointer;list-style:none;display:flex;gap:9px;align-items:center;
  padding:16px 20px;font-size:13px;color:#d9f1fa;font-weight:750; }
.advanced-settings summary::-webkit-details-marker {display:none;}
.advanced-settings summary:after {content:"⌄";margin-left:auto;font-size:18px;color:#a2dce1}
.advanced-settings[open] summary:after {content:"⌃"}
.advanced-settings summary span {color:#869fb6;font-size:11px;font-weight:500}
.advanced-settings[open] summary {border-bottom:1px solid var(--ui-border);}
.advanced-settings-body {padding:17px 21px 15px;}
.advanced-settings-body>.options {padding:10px 0 0;margin:0}
.photo-advanced {margin-top:14px;}
.photo-advanced .options {padding:6px 20px 16px;}
.single-video-card {border-color:#5eadae68;background:linear-gradient(135deg,#1b333f,#182638 70%);}
.single-video-card .single-video-heading {margin-bottom:22px;}
.single-video-grid {gap:26px;}
.single-video-form {gap:9px;}
.source-mode-box,.multi-reference-box {background:#111f2e;border:1px solid #89a7bf40;}
.reference-thumb {background:#142333;border:1px solid #8bc3cf4d;}
.reference-thumb span {overflow-wrap:anywhere;}
.reference-role-editor {display:grid;gap:11px;margin:17px 0;}
.reference-role-card {display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start;
  padding:13px;border:1px solid #8babc454;background:#132537;border-radius:13px;}
.reference-role-card>img {width:84px;height:110px;object-fit:contain;background:#0b1722;border-radius:9px;}
.reference-role-fields {display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.45fr);gap:9px;}
.reference-role-fields label {display:grid;gap:4px;font-size:11px;color:#b9d2e2;}
.reference-role-fields input[type=text],.reference-role-fields select {width:100%;min-width:0;padding:9px;font-size:12px;}
.reference-role-checks {display:flex;gap:8px 15px;flex-wrap:wrap;grid-column:1/-1;}
.reference-role-checks label {display:flex;align-items:center;gap:5px;font-size:11px;}
.reference-role-heading {font-size:12px;font-weight:750;margin:0 0 8px;}
.reference-role-empty {font-size:12px;color:#b6c9d9;}
.photo-reference-preview {margin:12px 0;}
.reference-preset-hint {font-size:12px;color:#9fe8df;margin:8px 0;}
.library-native-select {display:none!important;}
.library-choice {display:flex;align-items:center;gap:12px;width:100%;min-height:67px;
  text-align:left;padding:9px 12px;border-radius:13px;border:1px dashed #85bac49b;
  background:#122638;color:#d5f5f3;font-size:13px;font-weight:750;}
.library-choice:hover,.library-choice:focus-visible {border-color:#9eefe6;background:#19404b;}
.library-choice img {width:65px;height:57px;flex:none;object-fit:contain;
  border-radius:9px;background:#0b1721;}
.library-choice-icon {display:grid;place-items:center;width:48px;height:45px;
  background:#264457;border-radius:10px;color:#9fe7e9;font-size:24px;flex:none;}
.library-choice.has-image {border-style:solid;border-color:#8bdcd1a6;}
.shot-library-row .library-choice {min-height:62px;margin-top:8px;}
.chosen-frame span {font-size:11px;color:#b5ddda;}

/* Native modal: image thumbnails only, no visible internal filenames. */
.library-picker {box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(940px,calc(100% - 24px));
  height:min(800px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);
  padding:22px 24px;border:1px solid #8dccd08b;border-radius:22px;
  background:#122030;color:#e6f6f7;box-shadow:0 20px 85px #02090ee8;
  flex-direction:column;gap:16px;overflow:hidden;}
.library-picker[open] {display:flex;}
.library-picker:not([open]) {display:none;}
.library-picker::backdrop {background:#030911dc;backdrop-filter:blur(10px);}
.library-picker-top {display:flex;align-items:flex-start;justify-content:space-between;gap:15px;}
.library-picker-top small {font-size:10px;letter-spacing:1.9px;color:#91dbd9;}
.library-picker-top h2 {font-size:27px;margin:3px 0 4px;}
.library-picker-top p {font-size:12px;color:#a9c4d2;}
.library-picker-top button {min-width:42px;min-height:42px;padding:8px;font-size:18px;}
.library-picker-toolbar {display:flex;align-items:center;justify-content:space-between;gap:10px;}
.library-picker-toolbar input {flex:1;max-width:350px;min-width:0;padding:11px 13px;}
.library-picker-toolbar span {white-space:nowrap;color:#9fbcc7;font-size:12px;}
.library-picker-grid {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));
  grid-auto-rows:max-content;align-content:start;gap:13px;padding:4px 4px 15px;}
.library-picker-item {display:block;position:relative;width:100%;padding:5px;
  overflow:hidden;border:2px solid #6d9ba35a;border-radius:13px;background:#0b1725;
  aspect-ratio:1;transition:border-color .14s,transform .14s;}
.library-picker-item:hover,.library-picker-item:focus-visible {border-color:#95e7e4;transform:translateY(-1px);}
.library-picker-item.selected {border-color:#92efcf;box-shadow:0 0 0 2px #82dec149;}
.library-picker-item img {display:block;width:100%;height:100%;object-fit:contain;border-radius:9px;}
.library-picker-check {position:absolute;right:9px;bottom:9px;display:none;
  border-radius:20px;background:#9df1d9;color:#0c2a2b;font-size:12px;font-weight:800;padding:4px 9px;}
.library-picker-item.selected .library-picker-check {display:block;}
.library-picker-empty {grid-column:1/-1;color:#b5c8d6;font-size:13px;text-align:center;
  margin:24px 4px;padding:40px 12px;border:1px dashed #85a8bc62;border-radius:13px;}
.library-picker-footer {display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;
  border-top:1px solid #819eaf3a;padding-top:14px;}
.library-picker-footer button {margin:0;white-space:nowrap;font-size:12px;}
.single-frame-preview {background:#0d1724;min-height:270px;border-color:#729eaa6a;}
.single-frame-preview img {max-height:390px;}
.timeline-global {background:#142233;}
.audio-mode-select {display:block;width:100%;max-width:none;min-height:47px;
  border:1px solid #7dd3cc78;background:#102e37;color:#d9fff8;font-weight:750;}
.audio-mode-select:focus-visible {outline:2px solid #91f6d8;outline-offset:3px;}
.audio-mode-help {font-size:12px;line-height:1.7;max-width:75ch;
  padding:10px 12px;border-left:3px solid #74d9c4;border-radius:0 8px 8px 0;
  background:#1634399b;margin:9px 0 20px;}
#singleDialogueSettings,#textDialogueSettings,#videoDialogueSettings {
  margin:11px 0 18px;padding:13px 15px;border:1px solid #9dc5ce46;
  background:#172b3c;border-radius:12px;}
#storyboardVideoCard {border-color:#8da9cb50;}
#storyboardVideoCard>.row.spread {margin-top:20px;}
.download-sheet {background:#182a3a;border-color:#8bcfd75c;}

/* Easier storyboard scanning */
#shotList {display:grid;gap:12px;}
.shot {margin:0;padding:17px 20px;background:#152231;border:1px solid var(--ui-border);
  box-shadow:none;border-radius:15px; }
.shot-head {min-height:38px;}
.shot-head h3 {margin:0;font-size:15px;}
.shot-editor {border-top:1px solid #829db529;margin-top:11px;}
.shot-editor>summary {display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 0 5px;cursor:pointer;list-style:none;color:#b7cbde;font-size:12px;font-weight:700; }
.shot-editor>summary::-webkit-details-marker {display:none;}
.shot-editor-cue {color:#8bdbda;font-size:11px;white-space:nowrap;}
.shot-editor:not([open])>summary {padding:14px 0 3px;}
.shot-editor label {margin-top:18px;}
.shot-editor .shot-actions {margin-top:17px;}
#story .storyboard-actions {gap:10px;}
#story .storyboard-actions button {min-width:0}
#story .storyboard-actions .primary {color:#102038}

/* Library content types */
.gallery-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:12px 17px;
  margin-bottom:22px; background:#142231;border:1px solid var(--ui-border);
  border-radius:15px;padding:12px 14px; }
.gallery-filters {display:flex;flex-wrap:wrap;gap:6px;}
.gallery-filters button {border-radius:9px;border:1px solid transparent;
  background:transparent;color:#acc2d5;padding:9px 14px;font-size:12px;font-weight:750;}
.gallery-filters button.selected {background:#235058;color:#c9fffb;border-color:#68c6cd5d;}
.gallery-merge-toggle {display:flex;align-items:center;gap:9px;white-space:nowrap;margin:0;
  padding:10px 12px;border:1px solid #58e79b85;border-radius:10px;
  background:#15332a;color:#c1ffdb;font-size:12px;font-weight:800;cursor:pointer;}
.gallery-merge-toggle input {width:17px;height:17px;margin:0;accent-color:#6affab;cursor:pointer;}
.gallery-merge-toggle:has(input:checked) {border-color:#8cffb7;background:#194f37;
  box-shadow:0 0 0 2px #43ff8d35,0 0 16px #43ff8966;}
.gallery-merge-toggle:focus-within {outline:2px solid #b9ffdf;outline-offset:2px;}
.gallery-search {display:flex;align-items:center;gap:9px;margin:0 0 0 auto;color:#9bb1c5;font-size:11px;}
.gallery-search input {padding:9px 11px;max-width:200px;font-size:12px;}
.gallery-result-count {color:#a7bacd;font-size:11px;margin-left:5px;white-space:nowrap}
.gallery-grid {gap:15px;}
.gallery-grid .media {background:#172637;border:1px solid #87b0c238;border-radius:15px;padding:11px;}
.gallery-grid .media.media-merged {border:2px solid #71ff9d;background:#122d27;
  box-shadow:0 0 0 2px #43ff8d35,0 0 23px #43ff8959,inset 0 0 14px #3dff8312;}
.merged-badge {display:block;width:fit-content;max-width:100%;margin-bottom:9px;
  padding:5px 9px;border-radius:999px;background:#174b34;color:#baffd1;border:1px solid #73ffac;
  font-size:11px;font-weight:850;box-shadow:0 0 12px #60ff9747;}
.media-file-name {margin:8px 0 0;color:#c1d3e4;font-size:11px;line-height:1.5;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.result.result-merged {padding:14px;border:2px solid #71ff9d;border-radius:16px;
  background:#122c26;box-shadow:0 0 22px #55ff9640;}
.gallery-grid .media img,.gallery-grid .media video {height:190px;object-fit:contain;background:#0d1826;}
.gallery-grid .media .video-poster-button {display:block;position:relative;width:100%;
  height:190px;margin:0;padding:0;border:0;border-radius:12px;
  overflow:hidden;background:#101b2a;color:#fff;cursor:pointer;}
.gallery-grid .media .video-poster-button img {display:block;width:100%;height:100%;
  object-fit:contain;border-radius:0;background:#101b2a;}
.gallery-grid .media .video-poster-button img[hidden] {display:none;}
.gallery-grid .media .video-play-label {position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);border-radius:999px;padding:10px 17px;
  background:#121b26e8;border:1px solid #c3f9ffb8;color:#f3fdff;
  font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 4px 20px #000a;}
.gallery-grid .media .video-poster-button:focus-visible {outline:3px solid #92eee3;
  outline-offset:3px;}
.video-playback-error {color:#ffdad1;font-size:12px;line-height:1.6;}
.gallery-empty-note {border:1px dashed #729cae66;background:#142132;
  border-radius:14px;padding:24px;text-align:center;color:#acc2d5;}
.gallery-grid .media[hidden] {display:none!important}
@media(min-width:1080px) {
  .single-video-grid {grid-template-columns:minmax(0,1.07fr) minmax(330px,.93fr);}
  #photo .columns,#upscale .columns {grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
}
@media(max-width:830px) {
  .shell {padding:0 19px;}
  .home-lead {padding:36px 30px;}
  .creation-card {padding:23px;min-height:250px;}
  .gallery-search {margin-left:0;}
  .gallery-toolbar {align-items:flex-start;}
}
@media(max-width:620px) {
  .shell {padding:0 15px 108px;}
  header {padding:14px 0 16px;margin-bottom:18px;gap:8px;}
  .brand .logo {width:41px;height:41px;font-size:23px}
  .brand h1 {font-size:18px}
  .brand small {font-size:7px;letter-spacing:.5px;}
  .status {max-width:124px;padding:7px 8px;font-size:9px;line-height:1.5;}
  nav#tabs {position:fixed;bottom:0;left:0;right:0;margin:0;width:100%;max-width:none;
    z-index:80;display:grid;grid-template-columns:repeat(4,1fr);
    padding:9px max(11px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom))
      max(11px,env(safe-area-inset-left));
    background:#142030f5;backdrop-filter:blur(18px);border:1px solid #8099b234;
    border-radius:19px 19px 0 0;box-shadow:0 -13px 35px #0008;overflow:visible;}
  nav#tabs button {width:100%;min-width:0;padding:9px 4px;border-radius:11px;
    display:flex;flex-direction:column;gap:4px;font-size:11px;line-height:1.2;}
  .nav-symbol {font-size:22px;}
  nav#creativeTabs {margin:0 -15px 19px;padding:3px 15px 12px;gap:5px;}
  nav#creativeTabs button {font-size:11px;padding:10px 12px;}
  .home-lead {padding:31px 25px 28px;margin-bottom:13px;border-radius:18px;}
  .home-lead h2 {font-size:34px;letter-spacing:-1.3px;margin-top:14px;}
  .home-lead p {font-size:12px;line-height:1.75;margin-bottom:0}
  .creation-grid {grid-template-columns:1fr;gap:11px;}
  .creation-card {min-height:171px;padding:19px 20px;border-radius:15px;}
  .creation-card-icon {height:35px;width:35px;font-size:21px;margin-bottom:10px;border-radius:10px;}
  .creation-card strong {font-size:19px;}
  .creation-card-description {font-size:12px;}
  .creation-card-action {padding-top:8px;}
  .home-footer-row {flex-direction:column;align-items:stretch;padding:17px 19px;}
  .home-footer-row button {width:100%;}
  .heading {align-items:flex-start;margin-bottom:19px;flex-wrap:wrap;}
  .heading h2 {font-size:29px;}
  .heading p {font-size:12px;}
  .card {padding:20px 16px;border-radius:16px;}
  .image-mode-switch {gap:6px;}
  .image-mode-switch button {flex:1 1 auto;padding:11px 8px;font-size:11px;}
  .video-mode-switch {gap:8px;}
  .video-mode-switch button {padding:13px 12px;}
  .video-mode-switch button strong {font-size:12px;}
  .video-mode-switch button span {font-size:10px;line-height:1.55;}
  .advanced-settings summary {padding:13px;font-size:12px;}
  .advanced-settings summary span {display:none;}
  .advanced-settings-body {padding:14px;}
  .shot {padding:13px;}
  .shot-editor>summary {font-size:11px;}
  .shot-editor-cue {font-size:10px;}
  .shot-actions-line button {white-space:normal;}
  .single-frame-preview {min-height:190px;}
  .gallery-search {width:100%;justify-content:space-between;}
  .gallery-search input {flex:1;max-width:none;min-width:0;}
  .gallery-result-count {margin-left:0;}
  .gallery-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .gallery-grid .media {padding:8px;}
  .gallery-grid .media img,.gallery-grid .media video {height:130px;}
  .gallery-grid .media .video-poster-button {height:130px;}
  .gallery-grid .media button {font-size:11px;}
  .reference-role-card {grid-template-columns:65px minmax(0,1fr);gap:9px;padding:10px;}
  .reference-role-card>img {width:65px;height:86px;}
  .reference-role-fields {grid-template-columns:1fr;}
  .library-picker {width:100%;height:100dvh;max-height:100dvh;padding:max(17px,env(safe-area-inset-top)) 15px
    max(15px,env(safe-area-inset-bottom));border-radius:0;}
  .library-picker-top h2 {font-size:22px;}
  .library-picker-top p {font-size:11px;}
  .library-picker-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
  .library-picker-footer button {flex:1;white-space:normal;}
  .job-box {bottom:calc(86px + env(safe-area-inset-bottom));}
}
@media(max-width:380px) {
  .video-mode-switch {grid-template-columns:1fr;}
  .brand small {display:none;}
  .gallery-grid {grid-template-columns:1fr;}
  .gallery-grid .media img,.gallery-grid .media video {height:185px;}
  .gallery-grid .media .video-poster-button {height:185px;}
}
@media(prefers-reduced-motion:reduce) { .panel {animation:none;} }