:root {
color-scheme: light;
--canvas: #f5f5f7;
--field: #f7f7f8;
--line: #dddde3;
--ink: #171721;
--muted: #696973;
--primary: #171721;
--primary-hover: #30303a;
--accent: #686873;
--button-bg: #171721;
--button-hover: #30303a;
--button-border: #454550;
--button-ink: #f4f4f6;
--error: #922e25;
--error-bg: #fff0ee;
--error-border: #f4d4d0;
--badge-bg: #f1f1f5;
--surface-shadow: 0 3px 16px #32323605;
--surface-shadow-hover: 0 8px 24px #32323610;
--ease-out: cubic-bezier(.2,.75,.25,1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--canvas, #f6f6fa);
color: var(--ink);
font: 14px/1.5 Inter, system-ui, -apple-system, sans-serif;
}
button, textarea, input, select { font: inherit; color: inherit; }
button, a, input, select, summary { touch-action: manipulation; }
button { cursor: pointer; background: var(--button-bg); color: var(--button-ink); border: 1px solid var(--button-border); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button[aria-busy="true"], button[aria-busy="true"]:disabled { cursor: wait; }
a { color: var(--primary); text-decoration: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.shell { padding: 0 clamp(16px, 2vw, 40px) 24px; max-width: 1560px; margin: 0 auto; }
.nav-wrap { border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.nav-pill { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 20px; font-weight: 650; letter-spacing: -0.5px; }
.brand-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--button-bg); color: var(--button-ink); font-size: 22px; font-weight: 700; }
.topbar-status { display: flex; gap: 8px; flex-wrap: wrap; }
.meta-pill, .status-pill { border: 1px solid var(--line); border-radius: 99px; background: var(--surface, white); padding: 5px 12px; font-size: 12px; }
.status-pill { background: var(--badge-bg); color: var(--ink); }
.workspace-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.workspace-tabs button {
border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px;
background: var(--surface, white); font-weight: 500; transition: all 0.15s ease;
}
.workspace-tabs button[aria-selected="true"] { background: var(--primary); color: var(--button-ink); border-color: var(--primary); }
.layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.card { min-width: 0; padding: 22px; background: var(--surface, white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 20px #31313506; }
.editor-card { position: sticky; top: 16px; }
.editor-head, .card-head, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-head { margin-bottom: 14px; }
.section-head h1 { font-size: 18px; margin: 0; font-weight: 650; }
.results-head h1 { font-size: 17px; margin: 0; font-weight: 650; }
.title-label { font-size: 15px; font-weight: 650; }
.section-number { font-size: 11px; color: var(--muted); margin-right: 6px; }
.subtle-count, .field-note { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.subtle-count { white-space: nowrap; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.count-badge { display: inline-grid; place-items: center; background: var(--badge-bg); color: var(--primary); font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; }
textarea {
width: 100%; min-height: 180px; margin-top: 12px; padding: 12px;
border: 1px solid var(--line); border-radius: 10px; background: var(--field);
resize: vertical; line-height: 1.6;
}
input:not([type="checkbox"]), select {
min-height: 38px; border: 1px solid var(--line); border-radius: 8px;
background: var(--field); padding: 6px 10px; max-width: 100%;
}
input[type="checkbox"] {
width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0;
flex-shrink: 0; accent-color: var(--primary); cursor: pointer;
}
label[for="voiceover"], label[for="presenter"] {
display: flex; align-items: center; gap: 8px; cursor: pointer;
line-height: 1.3; user-select: none; margin-top: 8px;
}
input[type="file"] { width: 100%; font-size: 12px; }
.input-label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 13px; }
.quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); margin-top: 12px; }
.quantity-row .field-note { display: block; }
.quantity-row input { width: 70px; text-align: center; }
@keyframes mode-controls-in { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
.mode2-only:not([hidden]) { animation: none; transition: none; }
}
.mode2-only:not([hidden]) { animation: mode-controls-in .2s ease-out; }
.mode2-analysis { display:flex; align-items:center; gap:8px; margin:8px 0; cursor:pointer; }
/* Doubled class keeps the shared form rules from stretching the native checkbox. */
.keep-shape.keep-shape { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; margin:10px 0; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background: var(--surface); color:#555562; font-size:12px; font-weight:600; line-height:1.5; cursor:pointer; }
.keep-shape.keep-shape input { flex:0 0 18px; width:18px; height:18px; min-height:0; padding:0; box-shadow:none; margin:0; accent-color:var(--primary); cursor:pointer; }
.keep-shape:hover { border-color:#b8b8c8; }
.keep-shape:has(input:checked) { border-color:#9292a5; background:#eeeef5; color:var(--ink); box-shadow:0 2px 8px #1717210a; }
.keep-shape:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:3px; }
.keep-shape:has(input:disabled) { opacity:.5; cursor:not-allowed; }
.keep-shape:has(input:disabled) input { cursor:not-allowed; }
.keep-shape:has(input:disabled):hover { border-color:var(--line); }
@media (prefers-reduced-motion: no-preference) {
.keep-shape { transition:background-color .25s, border-color .25s, box-shadow .25s; }
}
.mode2-duration { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0; color:var(--muted); font-size:12px; }
.video-backgrounds { min-width: 0; margin: 8px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.video-backgrounds legend { padding: 0 6px; font-size: 12px; font-weight: 650; }
.video-backgrounds legend span { color: var(--muted); font-weight: 500; }
.video-background-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.video-background-tools:empty { display: none; }
.video-background-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 264px; overflow-y: auto; padding-right: 2px; }
.video-background-item { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 500; line-height: 1.35; }
.video-background-item:hover { border-color: var(--accent-line, #b8b8c8); }
.video-background-item:has(input:checked) { border-color: var(--primary); background: var(--badge-bg); font-weight: 650; }
.video-background-item input { flex: none; }
.video-background-item span { min-width: 0; overflow-wrap: anywhere; }
.video-background-item:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.mode2-duration input { width:88px; min-height:36px; height:36px; padding:4px 8px; text-align:center; }
#upload-hint[hidden] { display:none; }
#mode2-duration-note { margin-top:4px; }
#mode2-analysis:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.quantity-row.run-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 10px 0; }
.run-option { min-width: 0; }
.run-option label { display: block; margin-bottom: 5px; font-size: 11px; }
.run-options input { width: 100%; min-height: 34px; height: 34px; padding: 4px 8px; }
.run-options #save-config { min-height: 34px; height: 34px; padding: 4px 12px; border-radius: 8px; font-size: 12px; }
.run-options #config-status { grid-column: 1 / -1; margin: 0; }
.run-options #config-status:empty { display: none; }
.submit-btn {
width: 100%; min-height: 44px; margin-top: 12px;
background: var(--button-bg); color: var(--button-ink); border: 1px solid var(--button-border);
border-radius: 10px; font-weight: 600;
}
.submit-btn:hover:not(:disabled) { background: var(--button-hover); }
.secondary-button {
background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
padding: 6px 14px; min-height: 36px; font-weight: 500; font-size: 13px;
}
.secondary-button:hover:not(:disabled) { background: var(--field); }
.text-button {
background: transparent; border: none; color: var(--ink);
font-weight: 600; font-size: 12px; padding: 3px 6px; border-radius: 4px;
}
.text-button:hover:not(:disabled) { background: var(--field); color: var(--ink); }
.config-drawer { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); }
summary:hover { color: var(--ink); }
.error-banner {
color: var(--error); background: var(--error-bg); border: 1px solid var(--error-border);
padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; overflow-wrap: anywhere;
}
[data-error="true"] { color: var(--error) !important; }
.upload-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(80px, 100%), 1fr)); gap: 10px; width: 100%; margin-top: 6px; cursor: default; }
.upload-previews:empty { display: none; }
.ref-thumb-item {
position: relative; display: grid; justify-items: center; gap: 5px;
padding: 5px; border: 1px solid var(--line); border-radius: 9px;
background: var(--field); min-width: 0;
}
.ref-thumb-item img { width: 100%; height: 60px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); }
.ref-thumb-item:has(video) { grid-column: 1 / -1; flex-wrap: wrap; }
.ref-thumb-item video { width: 100%; max-height: 180px; border-radius: 6px; background: #202020; }
.ref-thumb-name { width: 100%; text-align: center; font-size: 10px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-thumb-remove {
position: absolute; top: -6px; right: -6px; z-index: 2;
width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line);
background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1; box-shadow: 0 1px 4px #17172126;
display: grid; place-items: center; padding: 0;
}
.ref-thumb-remove:hover { color: #b3261e; border-color: #b3261e; background: var(--surface); }
.preview-panel { min-width: 0; }
.audio-voices { min-width: 0; margin: 4px 0 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.audio-voices legend { padding: 0 6px; font-size: 12px; font-weight: 650; }
#audio-voices-status { margin: 0 0 9px; font-size: 11px; }
.audio-voices #audio-voice-search { display: block; width: 100%; min-height: 38px; margin: 0 0 9px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 12px; }
.audio-voice-list { display: grid; gap: 4px; max-height: 324px; padding-right: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d8d8dc transparent; }
.audio-voice { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 42px; padding: 6px 9px; border: 1px solid transparent; border-radius: 9px; background: var(--surface); cursor: pointer; }
.audio-voice:hover { border-color: var(--line); }
/* The row is the control; the radio only reports state, so keep it subtle. */
.audio-voice:has(input:checked) { border-color: var(--primary); background: var(--badge-bg); box-shadow: inset 2px 0 0 var(--primary); }
.audio-voice input[type="radio"] { flex: 0 0 15px; width: 15px; height: 15px; min-height: 0; margin: 0; padding: 0; accent-color: var(--primary); }
.audio-voice input[type="radio"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
.audio-voice > span { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.audio-voice:has(input:checked) > span { font-weight: 650; }
/* 51 dark pills made the list unreadable; quiet until hover or selection.
Scoped by the list id so it outranks the generic button/.text-button fills. */
#audio-voice-list .audio-voice-play { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 600; }
#audio-voice-list .audio-voice:hover .audio-voice-play,
#audio-voice-list .audio-voice:has(input:checked) .audio-voice-play { border-color: var(--button-border); background: var(--button-bg); color: var(--button-ink); }
.audio-voice-play:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.audio-voice-play-icon { font-size: 9px; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
#audio-voice-list .audio-voice-play { transition: background-color .2s, color .2s, border-color .2s; }
}
.audio-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.audio-toolbar .field-note { margin: 0; }
#audio-delete-status:not(:empty) { margin-bottom: 12px; }
.audio-jobs { display: grid; gap: 10px; }
.audio-card {
display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px;
background: var(--surface); box-shadow: 0 4px 16px #32323608;
}
.audio-card:has(.audio-card-select input:checked) { border-color: #777783; box-shadow: 0 0 0 2px #17172112; }
.audio-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.audio-card-title { min-width: 0; margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.audio-card-select { flex: none; }
.audio-card-select:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.audio-card-status { display: flex; align-items: baseline; gap: 7px; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.audio-card-status::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.audio-card[data-state="done"] .audio-card-status::before { background: var(--accent); }
.audio-card[data-state="error"] .audio-card-status::before { background: var(--error); }
.audio-text-box { position: relative; min-width: 0; interpolate-size: allow-keywords; }
.audio-card-text { min-width: 0; height: calc(1lh + 20px); margin: 0; padding: 10px 50px 10px 12px; border-radius: 9px; background: var(--field); color: #42424d; font-size: 13px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-text-box:is(:hover, :focus-within) .audio-card-text { height: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.audio-card-text:focus-visible, .audio-text-copy:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.audio-text-copy { position: absolute; top: 3px; right: 4px; display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); }
.audio-text-copy:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.audio-text-copy svg { width: 18px; height: 18px; }
.audio-text-copy .copy-check { opacity: 0; }
.audio-text-copy[data-copied="true"] { background: var(--accent-soft); color: var(--accent); }
.audio-text-copy[data-copied="true"] .copy-icon { opacity: 0; }
.audio-text-copy[data-copied="true"] .copy-check { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.audio-card-text { transition: height .35s cubic-bezier(.22, .68, 0, 1); }
.audio-text-copy { transition: background-color .2s, color .2s, transform .2s; }
.audio-text-copy:is(:hover, :focus-visible) { transform: translateY(-1px); }
.audio-text-copy:active { transform: scale(.92); }
.audio-text-copy .copy-icon, .audio-text-copy .copy-check { transition: opacity .2s; }
.audio-text-copy[data-copied="true"] svg { animation: toolbar-pop .3s var(--ease-out); }
}
.audio-card-media { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.audio-card-media:empty { display: none; }
.audio-card-media audio { flex: 1 1 220px; width: 100%; min-width: 0; height: 40px; }
.audio-card-media a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--button-border); border-radius: 9px; background: var(--button-bg); color: var(--button-ink); font-size: 12px; font-weight: 600; }
.audio-card-media a:hover { background: var(--button-hover); }
#workflow-form { display: grid; gap: 14px; }
#workflow-form h2, #workflow-form p { margin: 0; }
#workflow-form > label:not(.mode2-analysis) { display: grid; gap: 6px; min-width: 0; font-weight: 600; }
#workflow-ratio { appearance: none; padding-right: 38px; cursor: pointer; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23545468' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; }
@media (forced-colors: active) { #workflow-ratio { appearance: auto; } }
#workflow-form .mode2-analysis { display: flex; width: 100%; gap: 8px; min-height: 40px; margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font-size: 12px; font-weight: 600; }
#workflow-analysis { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
#workflow-form .mode2-analysis:has(#workflow-analysis:checked) { border-color: #b8b8c8; background: var(--badge-bg); }
#workflow-form .mode2-analysis:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
#workflow-form .mode2-analysis:has(#workflow-analysis:disabled) { color: var(--muted); cursor: not-allowed; }
#workflow-analysis:disabled { cursor: not-allowed; }
#workflow-form textarea { min-height: 110px; margin: 0; font-weight: 400; }
.workflow-upload-field, .workflow-branch { display: grid; gap: 8px; min-width: 0; }
.workflow-upload-heading, .workflow-branch label { font-weight: 600; }
.workflow-upload { position: relative; display: grid; justify-items: center; gap: 8px; width: 100%; min-width: 0; margin: 10px 0; padding: 16px 12px; border: 1px dashed #aaaab6; border-radius: 14px; background: var(--field); text-align: center; }
.workflow-upload.is-dragging { border-color: var(--primary); background: var(--badge-bg); box-shadow: 0 0 0 4px #59595d12; }
.workflow-upload input[type="file"] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; }
.workflow-upload:focus-within { outline: 2px solid var(--primary); outline-offset: 3px; }
.workflow-upload strong { font-size: 13px; }
.workflow-upload-hint, .workflow-upload-selection { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.workflow-upload[data-selected="true"] { border-color: #858598; background: var(--badge-bg); }
.workflow-upload[data-selected="true"] .workflow-upload-selection { color: var(--ink); }
.workflow-upload-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--badge-bg); }
.workflow-upload-icon svg { width: 23px; height: 23px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.workflow-upload-picker { display: grid; justify-items: center; gap: 6px; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.workflow-upload-picker:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.workflow-upload .workflow-upload-clear { margin: 0; padding: 4px 8px; font-size: 11px; }
.workflow-image-prompt { position: relative; }
.workflow-image-prompt::after { content: ''; position: absolute; top: calc(100% + 6px); left: 50%; height: 16px; border-left: 2px solid #b8b8c2; pointer-events: none; }
.workflow-branch-scroll { max-width: 100%; min-width: 0; }
.workflow-branches { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 28px 0 6px 20px; }
.workflow-branches::before { content: ''; position: absolute; top: 8px; left: 8px; right: 50%; border-top: 2px solid #b8b8c2; }
.workflow-branch { position: relative; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.workflow-branch::before, .workflow-branch::after { content: ''; position: absolute; pointer-events: none; }
.workflow-branch::before { top: 24px; left: -13px; width: 12px; border-top: 2px solid #b8b8c2; }
.workflow-branch::after { top: -13px; bottom: -13px; left: -14px; border-left: 2px solid #b8b8c2; }
.workflow-branch:first-child::after { top: -20px; }
.workflow-branch:last-child::after { bottom: calc(100% - 26px); }
.workflow-branch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workflow-branch-remove { padding: 4px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.workflow-branch-remove:hover { background: #e3e3eb; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
.workflow-upload { transition: background .2s, border-color .2s, box-shadow .2s; }
.workflow-upload-icon { transition: transform .2s var(--ease-out); }
.workflow-upload:hover, .workflow-upload:focus-within { border-color: #858598; box-shadow: 0 6px 18px #17172112; }
.workflow-upload:hover .workflow-upload-icon, .workflow-upload:focus-within .workflow-upload-icon { transform: translateY(-4px); }
.workflow-upload[data-selected="true"] .workflow-upload-icon { animation: workflow-upload-selected .3s var(--ease-out); }
@keyframes workflow-upload-selected { 50% { transform: scale(1.12); } }
}
.workflow-tabs { display: flex; gap: 6px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); box-shadow: 0 2px 8px #17172108; }
.workflow-tabs [role="tab"] { position: relative; flex: 1; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; overflow: hidden; }
.workflow-tabs [role="tab"]::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 32px; height: 2px; border-radius: 2px; background: var(--primary); opacity: 0; transform: translateX(-50%) scaleX(.4); }
.workflow-tabs [role="tab"][aria-selected="true"] { border-color: var(--button-border); background: var(--button-bg); color: var(--button-ink); box-shadow: 0 3px 8px #17172120; }
.workflow-tabs [role="tab"][aria-selected="true"]::after { background: var(--button-ink); opacity: 1; transform: translateX(-50%) scaleX(1); }
.workflow-results { display: grid; gap: 16px; }
.workflow-run { display: grid; gap: 0; min-width: 0; padding: 18px; border-color: #dddde7; border-radius: 18px; background: var(--surface); box-shadow: 0 4px 20px #24243c08; }
.workflow-run:has(.workflow-toggle[aria-expanded="true"]) { border-color: #c8c8da; box-shadow: 0 8px 28px #24243c0d; }
.workflow-run h2, .workflow-run h3, .workflow-run p { margin: 0; }
.workflow-run-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.workflow-run-head h2 { flex: 1; min-width: 0; font-size: 15px; }
.workflow-run-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.workflow-selection .workflow-shuffle-open { min-height: 40px; padding: 8px 12px; }
.workflow-toggle { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 44px 8px 0; border: 0; background: transparent; color: var(--ink); text-align: left; font-weight: 700; letter-spacing: -.01em; }
.workflow-toggle::before, .workflow-toggle::after { content: ''; position: absolute; top: 50%; right: 0; width: 32px; height: 32px; transform: translateY(-50%); }
.workflow-toggle::before { border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.workflow-toggle::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23545468' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
.workflow-toggle:hover::before, .workflow-toggle:focus-visible::before { border-color: #c4c4d4; background: var(--badge-bg); }
.workflow-toggle[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }
.workflow-delete { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid var(--error-border); border-radius: 10px; background: var(--error-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a33f3f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6m4-6v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
.workflow-delete:hover:not(:disabled) { background-color: var(--error-bg); }
.workflow-delete:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.workflow-run-content { display: grid; gap: 14px; min-width: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.workflow-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.workflow-selection-summary { color: var(--muted); font-size: 12px; }
.workflow-selection .workflow-download { margin-left: auto; }
.workflow-shuffle-details:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.workflow-shuffle-summary { flex: 1 0 100%; line-height: 1.5; overflow-wrap: anywhere; }
.workflow-shuffle-results { flex: 1 0 100%; min-width: 0; }
.workflow-shuffle-results:not([hidden]) { display: grid; gap: 10px; }
.workflow-shuffle-results h3 { font-size: 14px; }
.workflow-shuffle-gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr); gap: 12px; align-items: start; }
.workflow-shuffle-player { display: grid; gap: 6px; min-width: 0; }
.workflow-shuffle-player video { display: block; width: 100%; height: 360px; max-height: 55vh; object-fit: contain; border-radius: 10px; background: var(--field); }
.workflow-shuffle-list { display: grid; gap: 6px; max-height: 400px; overflow-y: auto; margin: 0; padding: 2px; list-style: none; }
.workflow-shuffle-item { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.workflow-shuffle-item .workflow-shuffle-view { flex: 1; }
.workflow-shuffle-view[aria-pressed="true"] { border-color: var(--primary); background: var(--badge-bg); }
.workflow-shuffle-audio { display: grid; gap: 8px; flex: 1 0 100%; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.workflow-shuffle-audio legend { padding: 0 4px; font-weight: 650; font-size: 13px; }
.workflow-shuffle-audio > button { justify-self: start; }
.workflow-shuffle-audio-list { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; overflow-x: hidden; min-width: 0; }
.workflow-shuffle-audio-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; padding: 8px; border-radius: 8px; background: var(--surface); }
.workflow-shuffle-audio-item label { flex: 1 1 220px; min-width: 0; max-width: 100%; justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.workflow-shuffle-audio-item label input { flex-shrink: 0; }
.workflow-shuffle-audio-item label > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
.workflow-shuffle-audio-item audio { flex-shrink: 0; width: 240px; max-width: 100%; height: 36px; }
@media (max-width: 700px) {
.workflow-shuffle-gallery { grid-template-columns: minmax(0, 1fr); }
.workflow-shuffle-list { max-height: 300px; }
}
.workflow-branch-select { margin-top: 8px; }
.workflow-selection .video-select:has(input:disabled), .workflow-branch-select:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.workflow-message { padding: 9px 12px; border-radius: 9px; background: var(--field); line-height: 1.5; }
.workflow-message:empty { display: none; }
.workflow-zoom { display: flex; flex: none; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 2px 6px #17172108; }
.workflow-zoom-button { min-width: 36px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 16px; font-weight: 650; cursor: pointer; }
.workflow-zoom-button:hover { background: var(--badge-bg); }
.workflow-zoom-button:active { background: var(--badge-bg); }
.workflow-zoom-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.workflow-zoom-fit { margin-left: 4px; padding-inline: 12px; border-left: 1px solid var(--line); font-size: 12px; }
.workflow-zoom-fit[aria-pressed="true"] { background: var(--badge-bg); }
.workflow-zoom-label { min-width: 42px; text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.workflow-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border: 1px solid #e6e6ef; border-radius: 15px; background: linear-gradient(120deg, #f5f5fa, #fafafd); }
.workflow-tools-hint { flex: 1; min-width: 150px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.workflow-steps { max-width: 100%; min-width: 0; min-height: 120px; max-height: min(70vh, 640px); overflow: auto; padding: 8px 2px 14px; border-radius: 12px; scrollbar-color: #c1c1cd transparent; scrollbar-width: thin; cursor: grab; touch-action: none; overscroll-behavior: contain; overflow-anchor: none; }
.workflow-steps[data-fit="true"] { overflow: hidden; cursor: default; }
.workflow-steps[data-panning="true"] { cursor: grabbing; user-select: none; }
.workflow-tree { display: flex; flex-direction: column; align-items: center; width: max-content; margin-inline: auto; }
.workflow-step { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px; border: 1px solid #e1e1eb; border-radius: 15px; background: var(--surface); box-shadow: 0 5px 16px #28283e0a; }
.workflow-step h3 { color: var(--ink); font-size: 13px; font-weight: 700; }
.workflow-step-status { display: flex; align-items: flex-start; gap: 7px; padding: 7px 10px; border-radius: 8px; background: var(--field); line-height: 1.45; }
.workflow-step-status::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #8a8a98; }
.workflow-step[data-status="done"] .workflow-step-status::before { background: #39865e; }
.workflow-step[data-status="error"] .workflow-step-status::before { background: #bb514a; }
.workflow-step[data-status="running"] .workflow-step-status::before { background: #6262b4; }
.workflow-elapsed { font-variant-numeric: tabular-nums; }
.workflow-tree > .workflow-step { width: 280px; max-width: 100%; border-color: #c7c7d8; }
.workflow-result-branches { position: relative; display: flex; align-items: flex-start; gap: 18px; padding-top: 38px; }
.workflow-result-branches:not(:empty)::before, .workflow-result-branch::before, .workflow-result-branch::after,
.workflow-videos:not(:empty)::before, .workflow-videos > .workflow-step::before, .workflow-videos > .workflow-step::after { content: ''; position: absolute; background: #b8b8c8; }
.workflow-result-branches:not(:empty)::before { top: 0; left: 50%; width: 2px; height: 20px; }
.workflow-result-branch { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 12px; border: 1px solid #e4e4ed; border-radius: 16px; background: var(--field); }
.workflow-result-branches:not(:empty)::before { top: 0; left: 50%; width: 2px; height: 20px; }
.workflow-result-branch:first-child::before { left: 50%; }
.workflow-result-branch:last-child::before { right: 50%; }
.workflow-result-branch::after { top: -20px; left: 50%; width: 2px; height: 20px; }
.workflow-result-label { padding: 7px 13px; border: 1px solid #dcdce8; border-radius: 99px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; }
.workflow-videos { position: relative; display: flex; align-items: flex-start; gap: 12px; padding-top: 32px; }
.workflow-videos > .workflow-step { position: relative; flex: 0 0 220px; width: 220px; }
.workflow-videos:not(:empty)::before { top: 0; left: 50%; width: 2px; height: 16px; }
.workflow-videos > .workflow-step::before { top: -17px; left: -7px; right: -7px; height: 2px; }
.workflow-videos > .workflow-step:first-child::before { left: 50%; }
.workflow-videos > .workflow-step:last-child::before { right: 50%; }
.workflow-videos > .workflow-step::after { top: -16px; left: 50%; width: 2px; height: 16px; }
.workflow-media { display: grid; gap: 9px; }
.workflow-step :is(img, video) { display: block; width: 100%; max-width: 320px; max-height: 360px; object-fit: contain; background: var(--field); border-radius: 10px; }
.workflow-step p { overflow-wrap: anywhere; }
.workflow-step a { display: inline-flex; justify-content: center; padding: 7px 10px; border: 1px solid #ddddE8; border-radius: 9px; background: var(--field); color: var(--ink); font-size: 12px; font-weight: 650; }
.workflow-step a:hover { background: var(--badge-bg); }
.workflow-media-actions { display: flex; gap: 8px; }
.workflow-media-actions > a, .workflow-media-actions > .workflow-video-select { flex: 1; min-width: 0; min-height: 40px; align-items: center; }
.workflow-media-actions > a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
.workflow-toggle::before { transition: background-color .2s, border-color .2s; }
.workflow-toggle::after { transition: transform .3s var(--ease-out); }
.workflow-step, .workflow-step a { transition: transform .2s var(--ease-out), background-color .2s, border-color .2s, box-shadow .2s; }
.workflow-step:hover { box-shadow: 0 9px 22px #28283e18; }
.workflow-step a:hover { transform: translateY(-1px); }
}
.preview-settings {
display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 10px;
background: linear-gradient(135deg, #ffffffed, #f9f9fded);
border: 1px solid var(--line); border-radius: 16px;
padding: 12px; margin-bottom: 14px;
box-shadow: 0 5px 16px #33333708; backdrop-filter: blur(12px);
}
.preview-setting {
display: flex; flex: 1 1 150px; flex-direction: column; justify-content: center;
gap: 6px; min-width: 0; padding: 8px 10px;
border: 0; border-radius: 0; background: transparent;
}
.preview-setting-label { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.preview-setting select { width: 100%; min-width: 0; min-height: 34px; padding: 5px 9px; background: var(--surface); }
.preview-size-control { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.preview-settings input[type="range"] { flex: 1; width: auto; min-width: 70px; padding: 0; accent-color: var(--primary); }
.preview-size-control output {
min-width: 54px; padding: 4px 7px; border: 1px solid #e4e4e8; border-radius: 8px;
background: var(--badge-bg); color: var(--primary); font-size: 11px; font-weight: 700; text-align: center;
}
.preview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(var(--preview-size, 320px), 100%), 1fr));
gap: 16px; align-items: start;
}
.preview-grid { align-items: stretch; }
.preview-card { display: flex; flex-direction: column; min-width: 0; padding: 14px; border-radius: 14px; }
.preview-card .preview-stage { flex-shrink: 0; }
.download-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:6px; border:1px solid var(--line); border-radius:13px; background:var(--field); }
.download-toolbar .secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; margin:0; padding:8px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; }
.download-toolbar .secondary-button:hover:not(:disabled) { background:var(--surface); color:var(--ink); border-color:var(--line); }
.download-toolbar button[id$="download-selected"] { margin-left:auto; background:var(--button-bg); color:var(--button-ink); }
#history-delete-selected { color:#b42318; }
#history-delete-selected:hover:not(:disabled) { background:var(--error-bg); color:var(--error); border-color:var(--error-border); }
.download-toolbar button[id$="download-selected"]:hover:not(:disabled) { background:var(--button-hover); color:var(--button-ink); }
.download-toolbar .secondary-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.download-toolbar .secondary-button:disabled { opacity:.45; cursor:not-allowed; }
.video-download-toolbar, .image-download-toolbar { gap: 10px; margin: 0 0 14px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--surface-shadow); }
.video-selection-tools, .image-selection-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.video-selection-tools > button, .image-selection-tools > button { width: 148px; max-width: 100%; min-height: 40px; }
.download-toolbar :is(#select-all-videos, #select-all-images) { min-height: 40px; gap: 9px; padding: 0 14px; border-radius: 12px; color: var(--ink); background: var(--field); border-color: transparent; transition: background .2s, transform .2s var(--ease-out); }
.download-toolbar :is(#select-all-videos, #select-all-images):hover:not(:disabled) { background: var(--badge-bg); transform: translateY(-1px); }
.download-toolbar :is(#select-all-videos, #select-all-images):active:not(:disabled) { transform: scale(.97); }
.download-toolbar :is(#select-all-videos, #select-all-images)::before { content: ''; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 5px; background: var(--surface) center / 11px no-repeat; transition: background-color .15s, border-color .15s; }
.download-toolbar :is(#select-all-videos, #select-all-images)[aria-pressed="true"] { background: var(--button-bg); color: var(--button-ink); }
.download-toolbar :is(#select-all-videos, #select-all-images)[aria-pressed="true"]:hover:not(:disabled) { background: var(--button-hover); color: var(--button-ink); }
.download-toolbar :is(#select-all-videos, #select-all-images)[aria-pressed="true"]::before { border-color: #fff; background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); animation: toolbar-check .34s var(--ease-out); }
#video-selection-summary, #image-selection-summary { margin-left: auto; padding: 7px 12px; border-radius: 999px; background: var(--field); color: var(--muted); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
#video-selection-summary.pop, #image-selection-summary.pop { animation: toolbar-pop .38s var(--ease-out); }
#video-selection-summary.has-count, #image-selection-summary.has-count { color: var(--ink); background: var(--badge-bg); }
.download-toolbar :is(#clear-all-videos, #clear-all-images) { min-height: 40px; padding: 0 12px; border-radius: 12px; background: transparent; color: var(--muted); font-size: 12px; }
.download-toolbar :is(#clear-all-videos, #clear-all-images)[hidden] { display: none; }
.download-toolbar :is(#clear-all-videos, #clear-all-images):not([hidden]) { animation: toolbar-pop .32s var(--ease-out); }
.download-toolbar :is(#download-selected, #image-download-selected) { position: relative; overflow: hidden; gap: 8px; min-height: 40px; margin-left: 0; padding: 0 16px; border-radius: 12px; background: var(--button-bg); color: var(--button-ink); opacity: 1; white-space: nowrap; }
.download-toolbar :is(#download-selected, #image-download-selected)::before { content: ''; width: 16px; height: 16px; background: currentColor; clip-path: polygon(43% 0, 57% 0, 57% 49%, 78% 29%, 88% 39%, 50% 77%, 12% 39%, 22% 29%, 43% 49%, 43% 0, 43% 85%, 100% 85%, 100% 100%, 0 100%, 0 85%, 43% 85%); }
.download-toolbar :is(#download-selected, #image-download-selected):not(:disabled) { background: var(--button-bg); color: var(--button-ink); opacity: 1; box-shadow: 0 8px 18px #1717212e; animation: toolbar-pop .36s var(--ease-out); }
.download-toolbar :is(#download-selected, #image-download-selected):not(:disabled)::before { animation: toolbar-arrow 1.15s ease-in-out infinite; }
.download-toolbar :is(#download-selected, #image-download-selected):not(:disabled):hover { background: var(--button-hover); transform: translateY(-2px); }
.download-toolbar :is(#download-selected, #image-download-selected):not(:disabled)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #ffffff55 48%, transparent 66%); transform: translateX(-140%); animation: toolbar-sheen 2.4s ease-in-out infinite; pointer-events: none; }
.video-download-toolbar button:disabled, .image-download-toolbar button:disabled { cursor: not-allowed; opacity: .4; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
.download-toolbar :is(#clear-all-videos, #clear-all-images, #download-selected, #image-download-selected),
.download-toolbar :is(#download-selected, #image-download-selected)::before,
.download-toolbar :is(#download-selected, #image-download-selected)::after,
.download-toolbar :is(#select-all-videos, #select-all-images)::before,
#video-selection-summary.pop, #image-selection-summary.pop { animation: none; }
}
@keyframes toolbar-check { 0% { transform: scale(.3) rotate(-12deg); } 60% { transform: scale(1.2) rotate(0); } 100% { transform: scale(1); } }
@keyframes toolbar-pop { 0% { transform: translateY(8px) scale(.9); } 60% { transform: translateY(-2px) scale(1.04); } 100% { transform: none; } }
@keyframes toolbar-arrow { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(4px); } }
@keyframes toolbar-sheen { 0%, 62% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
@media (max-width: 640px) {
.download-toolbar .secondary-button { flex: 1 1 140px; }
.download-toolbar :is(.video-selection-tools, .image-selection-tools) .secondary-button { flex: 0 0 auto; }
}
.preview-card .downloads .cancel-job { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:40px; margin:0; padding:10px 16px; border:1px solid var(--line); border-radius:10px; background:var(--field); color:var(--muted); box-shadow:none; font-size:12px; font-weight:600; cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .15s ease; }
.preview-card .downloads .cancel-job::before { content:''; width:12px; height:12px; background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat; transform:rotate(45deg); transition:transform .2s ease; }
.preview-card .downloads .cancel-job:hover:not(:disabled) { background:var(--error-bg); color:var(--error); border-color:var(--error-border); }
.preview-card .downloads .cancel-job:hover:not(:disabled)::before { transform:rotate(135deg); }
.preview-card .downloads .cancel-job:active:not(:disabled) { transform:scale(.985); }
.preview-card .downloads .cancel-job:focus-visible { outline:2px solid #be123c; outline-offset:3px; }
.preview-card .downloads .cancel-job:disabled { opacity:.65; cursor:wait; }
.preview-card .downloads .cancel-job:disabled::before { width:12px; height:12px; box-sizing:border-box; background:transparent; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:cancel-job-spin .8s linear infinite; }
@keyframes cancel-job-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
.preview-card .downloads .cancel-job,
.preview-card .downloads .cancel-job::before { transition:none; animation:none; }
.preview-card .downloads .cancel-job:hover:not(:disabled),
.preview-card .downloads .cancel-job:active:not(:disabled),
.preview-card .downloads .cancel-job:hover:not(:disabled)::before { transform:none; }
.preview-card .downloads .cancel-job:disabled::before { animation:none; }
}
.preview-card .downloads { min-height: 46px; margin-top: auto; }
.preview-card .loading { padding: 24px 10px; }
.preview-card .elapsed { padding: 8px; font-size: 16px; white-space: nowrap; }
.history-card { padding: 12px; }
.history-card[data-state="error"] { border-color: #f1d8d4; }
.history-status-pill {
font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
background: var(--field); color: var(--muted); white-space: nowrap;
}
.history-card[data-state="done"] .history-status-pill { color: var(--primary); background: var(--badge-bg); }
.history-card[data-state="error"] .history-status-pill { color: var(--error); background: var(--error-bg); }
.history-card .history-prompt { display:block; }
.history-card .history-prompt-details:not([open]) .history-prompt { display:none; }
.history-card .history-actions .primary-link { text-decoration:none; }
.history-card .history-actions .danger-btn { color:var(--muted); background:var(--field); }
.history-card .preview-stage { max-height: min(68vh, 760px); }
.history-card .history-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.history-card .history-sub { margin-top:4px; }
.history-created { display:block; margin-top:10px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.history-created[hidden] { display:none; }
/* auto-fit, not a fixed 3 columns: image cards carry four actions (Chọn, Tải,
Chỉnh sửa ảnh, Xóa) and the fourth used to wrap onto a row of its own, so
3-action and 4-action cards ended at different heights. */
.history-card .history-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(58px,1fr)); align-items:stretch; gap:8px; margin:auto 0 0; padding-top:12px; }
#image-history-grid .history-card { position:relative; }
#image-history-grid .history-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
#image-history-grid .history-card .history-actions .video-select { display:none; }
.history-card .history-actions .image-chat-open > span { display:none; }
.history-card .history-actions .image-chat-open::before { font-size:20px; }
.history-card .history-actions .download-selection { display:flex; min-width:0; }
.history-card .history-actions .video-select,
.history-card .history-actions .history-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-width:0; min-height:40px; margin:0; padding:8px 6px; border-radius:10px; font-size:11px; font-weight:600; line-height:1.3; text-align:center; white-space:normal; overflow-wrap:anywhere; }
.history-card .history-actions .video-select input { flex-shrink:0; width:18px; height:18px; }
.history-card .history-actions .video-select > span { display:none; }
.history-actions .history-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.history-card .history-actions .history-btn:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.history-card .history-actions .primary-link { background:var(--button-bg); color:var(--button-ink); }
.history-card .history-actions .primary-link:hover { background:var(--button-hover); color:var(--button-ink); }
.history-actions .history-btn { text-decoration:none; }
.history-card .history-stage { background: var(--field); }
.history-card .video-notice[data-error="true"] { color:var(--error); }
.job-prompt-details[open] .job-prompt { max-height:220px; overflow:auto; }
.history-prompt-details { margin-top:12px; }
.history-prompt-details > summary { cursor:pointer; color:var(--muted); font-size:12px; }
.history-prompt-details[open] .history-prompt { max-height:220px; overflow:auto; }
.history-card .video-notice { margin:8px 0 0; font-size:12px; }
.history-card .video-nav { justify-content:center; gap:8px; margin-top:8px; }
.history-card .video-nav .secondary-button { min-width:40px; }
.history-card .history-stage { aspect-ratio:9/16; max-height:min(68vh,760px); }
.history-card .preview-stage video { object-fit:contain; }
.history-error { position: absolute; z-index: 1; inset: 0; padding: 24px 16px; overflow: auto; text-align: center; background: var(--error-bg); color: var(--error); }
.history-error .stage-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.card-title { font-size: 13px; margin: 0; font-weight: 600; }
.stream-status {
font-size: 11px; padding: 3px 8px; border-radius: 6px;
background: var(--field); color: var(--muted); white-space: nowrap; font-weight: 500;
}
.preview-card[data-state="error"] .stream-status { color: var(--error); background: var(--error-bg); }
.preview-card[data-state="done"] .stream-status { color: var(--primary); background: var(--badge-bg); }
.job-account { margin: 6px 0 10px; font-size: 12px; }
.preview-stage {
aspect-ratio: var(--video-ratio, 9/16); width: 100%; min-width: 0; min-height: 0; position: relative; display: grid; place-items: center;
background: var(--field); color: var(--muted);
border-radius: 10px; overflow: hidden;
}
.preview-stage video {
width: 100%; height: 100%; object-fit: contain; background: var(--field);
}
.loading {
position: relative; isolation: isolate; width: 100%; max-width: 100%;
padding: 32px 20px; text-align: center; overflow-wrap: anywhere;
}
.preview-stage > .loading { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.preview-card .preview-stage > .loading { padding: 16px 14px; }
.preview-card .spinner { width: 56px; height: 56px; margin: 0 auto 14px; }
.preview-card .elapsed { padding: 6px 12px; font-size: 15px; }
.preview-card .stage-message { margin-top: 10px; font-size: 12px; line-height: 1.45; }
.loading::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
inset: -30px 0; border-radius: 50%;
background: radial-gradient(ellipse, #c5c5ce20, transparent 65%);
}
.loading[aria-busy="true"]::before { animation: loading-glow 4s ease-in-out infinite; }
.loading small { display: block; margin-top: 16px; font-size: 10px; letter-spacing: .03em; color: var(--muted); }
.spinner {
position: relative; width: 76px; height: 76px; margin: 0 auto 28px;
border: 1px solid var(--line); border-radius: 50%;
background: var(--field);
box-shadow: none;
}
.spinner::before, .spinner::after {
content: ""; position: absolute; border-radius: 50%;
border: 2px solid transparent;
}
.spinner::before { inset: -2px; border-top-color: var(--accent); border-right-color: var(--accent-line); }
.spinner::after { inset: 12px; border-bottom-color: var(--accent); border-left-color: var(--accent-line); }
.loading[aria-busy="true"] .spinner::before { animation: spin 2s linear infinite; }
.loading[aria-busy="true"] .spinner::after { animation: spin 3s linear infinite reverse; }
.mono { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.elapsed {
display: inline-block; padding: 8px 14px; border: 1px solid var(--line);
border-radius: 12px; background: var(--surface); color: var(--ink);
font-size: clamp(16px, 2vw, 24px); font-weight: 500; letter-spacing: -.03em;
}
.stage-message { font-size: 13px; line-height: 1.6; margin: 16px auto 0; max-width: 30ch; color: var(--muted); }
.preview-card[data-state="error"] .loading::before { background: radial-gradient(ellipse, var(--error-border) 0%, transparent 65%); }
.preview-card[data-state="error"] .elapsed { color: var(--error); border-color: var(--error-border); background: var(--error-bg); }
.preview-card[data-state="error"] .spinner,
.preview-card[data-state="done"] .spinner { display: none; }
.preview-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--field); }
.downloads { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.video-select {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 40px; padding: 8px 12px; margin: 0; border: 1px solid var(--line);
border-radius: 10px; background: var(--field); color: var(--ink); font-size: 12px;
font-weight: 600; cursor: pointer; white-space: nowrap;
}
.video-select input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.video-select:has(input:checked) { background: var(--badge-bg); border-color: var(--primary); color: var(--primary); }
.video-select:focus-within, .downloads a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.download-selection .video-select { width: 100%; }
.downloads a {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
min-height: 40px; border: 0; border-radius: 10px; margin: 0; padding: 9px 12px;
background: var(--button-bg); color: var(--button-ink); font-size: 12px; font-weight: 600; text-decoration: none;
}
.downloads a:hover { background: var(--button-hover); }
.preview-card, .history-card { position:relative; }
.video-notice, .history-card .video-notice { position:absolute; top:20px; right:20px; z-index:3; margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.video-notice[data-error="true"] { color:var(--error); }
.video-notice-icon { display:grid; place-items:center; width:26px; height:26px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:inherit; font-weight:700; box-shadow:0 2px 8px #0002; }
.video-notice-icon:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.video-notice-detail { position:absolute; top:100%; right:0; width:260px; max-width:calc(100vw - 64px); max-height:240px; overflow:auto; overflow-wrap:anywhere; margin:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); box-shadow:0 8px 24px #0002; visibility:hidden; }
.video-notice:not(.dismissed):hover .video-notice-detail,
.video-notice:not(.dismissed):focus-within .video-notice-detail { visibility:visible; }
.job-prompt-details, .history-prompt-details { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.job-prompt-details > summary, .history-prompt-details > summary { color: var(--muted); font-size: 12px; font-weight: 420; cursor: pointer; }
.job-prompt, .history-prompt {
white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto;
font-size: 12px; color: var(--muted); margin: 8px 0 0; padding: 10px 12px;
border: 0; border-radius: 10px; background: var(--field);
}
.log-section { border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; }
.log-list { padding-left: 18px; max-height: 180px; overflow: auto; margin: 6px 0; }
.log-list li { padding: 4px 0; overflow-wrap: anywhere; }
.log-list li .text-button { margin-left: 4px; }
.log-list time { color: var(--muted); margin-right: 6px; }
.reply { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; overflow: auto; }
.empty-card { text-align: center; padding: 60px 20px; min-height: 380px; color: var(--muted); }
.empty-card h2 { font-size: 20px; font-weight: 600; color: var(--ink); margin: 16px 0 6px; }
:is(#empty, #image-empty, #image-edit-empty) {
position: relative; isolation: isolate; overflow: hidden;
min-height: 480px; padding: 40px 20px;
background: radial-gradient(ellipse at 50% 42%, #eee8ff 0%, #f8f6ff 38%, #fff 76%);
border-color: #e9e3f5;
}
:is(#empty, #image-empty, #image-edit-empty):not([hidden]) { display: grid; place-items: center; align-content: center; gap: 22px; }
:is(#empty, #image-empty, #image-edit-empty)::before {
content: ''; position: absolute; inset: 0; z-index: -1; opacity: .3;
background-image: radial-gradient(#b2a2d0 .8px, transparent .8px); background-size: 22px 22px;
mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
}
:is(#empty, #image-empty, #image-edit-empty) h2 { margin: 0; font-size: clamp(21px, 2.4vw, 30px); letter-spacing: -.035em; color: #403454; }
.empty-scene { position: relative; width: min(280px, 100%); aspect-ratio: 1; }
.empty-scene::before, .empty-scene::after {
content: ''; position: absolute; top: 68px; width: 112px; height: 150px;
border: 1px solid #ffffffd9; border-radius: 18px; box-shadow: 0 14px 32px #5b448414;
}
.empty-scene::before { left: 10px; transform: rotate(-16deg); background: linear-gradient(145deg, #eee4ff, #c7b9ed); }
.empty-scene::after { right: 10px; transform: rotate(16deg); background: linear-gradient(145deg, #e2eaff, #ccd9f0); }
.empty-orbit { position: absolute; inset: 0; border: 1px dashed #b9a4dc70; border-radius: 50%; }
.empty-orbit::before, .empty-orbit::after {
content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%;
background: #a28acd; box-shadow: 0 0 0 5px #a28acd14;
}
.empty-orbit::before { top: 37px; left: 37px; }
.empty-orbit::after { bottom: 37px; right: 37px; background: #a1b7db; }
.empty-screen {
position: absolute; z-index: 1; top: 38px; left: calc(50% - 73px); width: 146px; height: 204px;
display: grid; place-items: center; overflow: hidden; border: 1px solid #ffffffeb; border-radius: 22px;
color: #fff; background: linear-gradient(150deg, #cbb8ec, #8d78b4 55%, #6b618f);
box-shadow: 0 24px 44px #59408026, inset 0 1px 0 #ffffff80;
}
.empty-screen::after {
content: ''; position: absolute; inset: -50% -100%; pointer-events: none;
background: linear-gradient(115deg, transparent 40%, #ffffff32 50%, transparent 60%);
transform: translateX(-45%);
}
.empty-play { position: absolute; top: 47px; }
.empty-wave { display: flex; align-items: center; gap: 5px; height: 30px; position: absolute; bottom: 42px; }
.empty-wave i { width: 4px; height: 22px; border-radius: 4px; background: #ffffffa6; transform: scaleY(.4); }
.empty-wave i:nth-child(2n) { height: 30px; }
.empty-wave i:nth-child(3n) { height: 16px; }
.empty-timeline { position: absolute; bottom: 21px; left: 23px; right: 23px; height: 3px; border-radius: 4px; background: #ffffff30; overflow: hidden; }
.empty-timeline::before { content: ''; display: block; width: 100%; height: 100%; background: var(--surface); transform: scaleX(.55); transform-origin: left; }
.empty-spark { position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 2px; background: #ac94ce; transform: rotate(45deg); }
.empty-spark:nth-child(2) { top: 22px; left: 70px; }
.empty-spark:nth-child(3) { top: 75px; right: 12px; width: 6px; height: 6px; background: #8ba9d2; }
.empty-spark:nth-child(4) { bottom: 38px; left: 20px; width: 6px; height: 6px; }
.empty-spark:nth-child(5) { bottom: 10px; right: 65px; background: #8ba9d2; }
@media (prefers-reduced-motion: no-preference) {
:is(#empty, #image-empty, #image-edit-empty) h2 { animation: empty-invite 4s ease-in-out infinite; }
:is(#empty, #image-empty, #image-edit-empty):not([hidden]) .empty-screen { animation: empty-float 5s ease-in-out infinite; }
:is(#empty, #image-empty, #image-edit-empty):not([hidden]) .empty-orbit { animation: empty-orbit 32s linear infinite; }
:is(#empty, #image-empty, #image-edit-empty):not([hidden]) .empty-play { animation: empty-glow 3s ease-in-out infinite; }
:is(#empty, #image-empty, #image-edit-empty):not([hidden]) .empty-screen::after { animation: empty-sheen 6s ease-in-out infinite; }
:is(#empty, #image-empty, #image-edit-empty):not([hidden]) .empty-wave i { animation: empty-wave 1.4s ease-in-out infinite alternate; }
:is(#empty, #image-empty, #image-edit-empty) .empty-wave i:nth-child(2n) { animation-delay: -.4s; }
:is(#empty, #image-empty, #image-edit-empty) .empty-wave i:nth-child(3n) { animation-delay: -.9s; }
:is(#empty, #image-empty, #image-edit-empty):not([hidden]) .empty-timeline::before { animation: empty-progress 5s ease-in-out infinite; }
:is(#empty, #image-empty, #image-edit-empty):not([hidden]) .empty-spark { animation: empty-spark 3.6s ease-in-out infinite; }
:is(#empty, #image-empty, #image-edit-empty) .empty-spark:nth-child(3n) { animation-delay: -1.8s; }
}
@keyframes empty-invite { 50% { transform: translateY(-3px); opacity: .8; } }
@keyframes empty-float { 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes empty-orbit { to { transform: rotate(360deg); } }
@keyframes empty-glow { 50% { transform: scale(1.08); opacity: .8; } }
@keyframes empty-sheen { 0%, 20% { transform: translateX(-45%); } 65%, 100% { transform: translateX(45%); } }
@keyframes empty-wave { to { transform: scaleY(1); } }
@keyframes empty-progress { 0% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
@keyframes empty-spark { 50% { transform: translateY(-7px) rotate(135deg) scale(.6); opacity: .4; } }
.empty-icon { margin: auto; display: grid; place-items: center; width: 48px; height: 48px; background: var(--badge-bg); border-radius: 50%; color: var(--primary); font-size: 18px; }
/* Accounts Tab */
.accounts-panel { margin-top: 0; }
.account-import {
background: linear-gradient(180deg, #fcfcff 0%, #f6f6fa 100%);
border: 1px solid var(--line);
border-radius: 14px;
padding: 14px 18px;
margin-bottom: 16px;
}
.account-import > summary { color: var(--ink); font-size: 13px; font-weight: 650; }
.account-login-log { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.account-login-log .section-head { margin-bottom: 8px; gap: 12px; }
.account-login-log h2 { margin: 0; font-size: 12px; font-weight: 650; }
.account-login-log button { padding: 5px 10px; font-size: 11px; }
.login-log-scroll { max-height: 240px; overflow: auto; }
#login-log-list { list-style: none; margin: 0; padding: 0; }
.login-log-entry { display: grid; grid-template-columns: 68px 90px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.login-log-entry:last-child { border-bottom: 0; }
.login-log-entry time { color: var(--muted); font-variant-numeric: tabular-nums; }
.login-log-entry > span:last-child { overflow-wrap: anywhere; white-space: pre-wrap; }
.login-log-entry > span:nth-child(2) { font-weight: 600; }
.login-log-entry[data-status="error"] { color: var(--error); }
.login-log-entry[data-status="warning"] > span:nth-child(2) { color: #875800; }
.login-log-entry[data-status="success"] > span:nth-child(2) { color: #187348; }
@media (max-width: 500px) {
.login-log-entry { grid-template-columns: 68px minmax(0, 1fr); gap: 4px 10px; }
.login-log-entry > span:last-child { grid-column: 1 / -1; }
}
.account-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.account-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); flex: 1; min-width: 260px; max-width: 440px; }
.account-form input, .account-form textarea { min-height: 38px; font-size: 13px; background: white; border-radius: 9px; padding: 7px 12px; }
.login-bulk-form { align-items: stretch; }
.login-bulk-form label { max-width: none; flex: 1 1 100%; }
.login-bulk-form textarea { width: 100%; min-height: 120px; resize: vertical; }
.otp-queue-wrap { margin-top: 14px; }
#otp-queue-table { width: 100%; border-collapse: collapse; }
#otp-queue-table th, #otp-queue-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
#otp-queue-table th:last-child, #otp-queue-table td:last-child { width: 96px; }
#otp-queue input { width: 110px; min-height: 36px; }
#otp-queue button { min-height: 36px; width: 100%; }
#send-otp-btn {
min-height: 38px; padding: 0 20px; border-radius: 9px;
background: var(--button-bg); color: var(--button-ink); border-color: var(--button-border); font-weight: 600;
}
#send-otp-btn:hover:not(:disabled) { background: var(--button-hover); color: var(--button-ink); }
.table-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 14px;
background: white;
box-shadow: 0 2px 12px #26262a08;
}
table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 13px; }
th, td { padding: 14px 16px; border-bottom: 1px solid #ededf1; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.14s ease; }
tbody tr:hover { background: var(--field); }
th {
font-weight: 650; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--muted); background: var(--field); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.account-number { width: 56px; text-align: center; }
td:nth-child(1) { text-align: center; }
.index-pill {
display: inline-grid; place-items: center;
width: 28px; height: 28px; border-radius: 8px;
background: var(--field); color: var(--primary);
font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Identity Column */
.accounts-panel .table-wrap, .accounts-panel .account-pagination { width: 100%; }
.accounts-panel > .table-wrap > table { table-layout: fixed; min-width: 1080px; }
.accounts-panel > .table-wrap > table th:nth-child(2) { width: 30%; }
.accounts-panel > .table-wrap > table th:nth-child(3) { width: 23%; }
.accounts-panel th { padding: 12px; }
.account-row > td { padding: 12px; line-height: 1.4; }
.invite-cell .field-note { margin: 0; overflow-wrap: anywhere; }
.invite-cell .account-invite { color: var(--ink); font-size: 12px; }
.account-row .account-actions { white-space: nowrap; }
.identity-cell { min-width: 0; }
.identity-top { display: flex; align-items: center; gap: 11px; justify-content: space-between; }
.identity-avatar {
flex-shrink: 0; display: grid; place-items: center;
width: 34px; height: 34px; border-radius: 10px;
background: linear-gradient(135deg, #606064, #7b7b7f);
color: white; font-weight: 700; font-size: 14px;
box-shadow: 0 2px 6px #60606426;
}
.identity-text { min-width: 0; flex: 1; }
.identity-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12.5px; color: var(--ink); }
.identity-name { margin: 2px 0 0; font-size: 11.5px; }
/* Toggle Switch */
.switch-label {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
padding: 4px 9px 4px 6px; border-radius: 99px;
background: var(--field); border: 1px solid var(--line);
font-size: 11.5px; font-weight: 600; color: var(--muted); user-select: none;
flex-shrink: 0;
}
.switch-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-slider {
position: relative; width: 28px; height: 16px; border-radius: 99px;
background: var(--line); transition: background 0.18s ease;
}
.switch-slider::after {
content: ""; position: absolute; top: 2px; left: 2px;
width: 12px; height: 12px; border-radius: 50%;
background: white; transition: transform 0.18s ease;
box-shadow: 0 1px 2px #00000025;
}
.switch-label input:checked + .switch-slider { background: var(--primary); }
.switch-label input:checked + .switch-slider::after { transform: translateX(12px); }
.switch-label:has(input:checked) { background: var(--badge-bg); border-color: var(--line); color: var(--primary); }
.account-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; padding: 0; }
.pagination-size, .pagination-actions { display: flex; align-items: center; gap: 6px; }
.pagination-size { margin-left: auto; flex-wrap: wrap; }
.account-pagination .field-note { margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#accounts-page-label { padding-inline: 8px; }
.account-pagination select, .account-pagination input, .account-pagination button { min-height: 36px; height: 36px; width: auto; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font-size: 12px; }
.account-pagination input { width: 76px; }
.pagination-actions { gap: 0; }
.account-pagination button { min-width: 36px; border-radius: 0; background: var(--button-bg); color: var(--button-ink); border-color: var(--button-border); }
.account-pagination button + button { border-left: 0; }
.account-pagination button:first-child { border-radius: 8px 0 0 8px; }
.account-pagination button:last-child { border-radius: 0 8px 8px 0; }
.account-pagination button:hover:not(:disabled) { background: var(--button-hover); }
.account-pagination button:focus-visible { position: relative; z-index: 1; }
.account-pagination button:disabled { opacity: 1; background: var(--field); border-color: var(--line); color: #92929c; cursor: not-allowed; }
/* One compact balance summary; plan and credit percentages stay distinct. */
.accounts-panel .balance-cell { white-space: normal; }
.balance-summary { max-width: 420px; }
.balance-status { display:flex; align-items:center; flex-wrap:wrap; gap:5px 8px; margin-top:8px; }
.balance-cell .balance-status .field-note { margin:0; font-size:11px; line-height:1.4; }
.balance-status .video-status { padding:3px 7px; border-radius:5px; background:var(--field); }
.balance-summary .quota-head .field-note { margin:0; font-size:11px; font-variant-numeric:tabular-nums; }
.account-actions { width: 316px; text-align: right; }
.account-login { min-width: 0; white-space: nowrap; }
.account-actions .secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; margin:0; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink); font-size:12px; white-space:nowrap; }
.account-action-list { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.account-actions .account-stats { background:var(--button-bg); color:var(--button-ink); }
.account-setup { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:18px; margin:24px 0; }
#accounts-panel .account-setup > * { min-width:0; margin:0; padding:20px; border:1px solid var(--line); border-radius:16px; background: var(--surface); }
#accounts-panel #muse-limit-form { display:flex; align-content:start; align-items:end; flex-wrap:wrap; gap:12px; }
#muse-limit-form h2 { width:100%; margin:0; font-size:15px; }
#accounts-panel #muse-limit-form label { min-width:0; flex:1 1 180px; }
#muse-limit-form button { margin:0; min-height:42px; }
#muse-limit-hint { flex-basis:100%; margin:0; line-height:1.7; }
#accounts-panel .account-import > summary { font-size:15px; font-weight:650; }
#accounts-panel #login-email-form label { min-width:0; flex:1 1 100%; max-width:none; }
.otp-queue-wrap:not(:has(#otp-queue tr)) table { display: none; }
.account-login-log summary { font-size:12px; color:var(--muted); cursor:pointer; }
.account-login-log > button { margin-top:10px; }
#muse-limit-status:empty, #account-status:empty { display:none; }
.account-filters { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:18px 0; }
.account-filters label { display:grid; gap:6px; min-width:0; font-size:12px; color:var(--muted); }
#accounts-panel > .account-filters label:first-child { flex:1 1 220px; }
.account-filters input, .account-filters select { width:100%; min-height:40px; margin:0; }
.account-filters button { min-height:40px; margin:0; }
.account-invite { font-weight:600; color:var(--ink); }
.account-invite-line { display:flex; align-items:center; gap:8px; }
.account-invite-warning { position:relative; flex:none; }
.account-invite-warning-button { display:grid; place-items:center; width:24px; height:24px; min-height:0; margin:0; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--field); color:var(--muted); font-size:13px; font-weight:750; }
.account-invite-error { display:none; position:fixed; z-index:100; width:230px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); box-shadow:0 6px 18px #17172118; white-space:normal; overflow-wrap:anywhere; font-size:11px; line-height:1.6; }
.account-invite-warning:not([data-dismissed]):is(:hover, :focus-within) .account-invite-error { display:block; }
.account-invite-warning-button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
#account-stats-dialog { width:min(960px, calc(100% - 24px)); max-height:90dvh; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--ink); box-shadow:0 24px 80px #17172130; color-scheme:light; --chart-video:#2a78d6; --chart-image:#eb6834; }
#account-stats-dialog::backdrop { background:#17172180; backdrop-filter:blur(5px); }
#account-stats-dialog > .section-head { display:flex; flex-wrap:nowrap; align-items:start; justify-content:space-between; gap:16px; margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
#account-stats-dialog > .section-head > div { min-width:0; }
#account-stats-title { font-size:22px; font-weight:700; letter-spacing:-.6px; margin:0; }
#account-stats-email { display:inline-block; margin:8px 0 0; padding:4px 9px; border-radius:7px; background:var(--field); color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
#account-stats-close { flex:none; min-height:36px; margin:0; padding:7px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); }
#account-stats-close:hover { background:var(--field); }
#account-stats-form { display:grid; grid-template-columns:minmax(160px,1.2fr) repeat(2,minmax(130px,1fr)) auto; gap:12px; margin:0; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--field); }
#account-stats-form input, #account-stats-form select { background:var(--surface); border-radius:9px; }
#account-stats-form button { border-radius:9px; }
#account-stats-status { min-height:18px; margin:10px 2px 18px; font-size:11px; }
#account-stats-content { padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
#account-stats-content:empty { display:none; }
#account-stats-dialog :is(button, input, select, summary):focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
@media (prefers-reduced-motion:no-preference) {
#account-stats-dialog[open] { animation:account-stats-enter .3s cubic-bezier(.22,.68,0,1); }
#account-stats-dialog::backdrop { animation:surface-in .25s ease; }
#account-stats-content { transition:opacity .2s; }
}
@keyframes account-stats-enter { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@media (max-width:760px) {
#account-stats-dialog #account-stats-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
#account-stats-content[aria-busy="true"] { opacity:.5; }
.prompt-output { padding:20px; }
.prompt-output .section-head { align-items:center; gap:12px; }
.prompt-output h2 { margin:0; font-size:18px; }
#prompt-result { width:100%; min-height:360px; line-height:1.75; resize:vertical; }
#prompt-result[aria-busy="true"] { opacity:.55; }
.error-toast[data-kind="success"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.account-stats-total { font-size:26px; font-weight:700; letter-spacing:-.5px; margin:0 0 14px; }
.account-chart-legend { display:flex; gap:20px; font-size:12px; margin-bottom:16px; }
.account-chart-legend span { display:flex; align-items:center; gap:7px; }
.account-chart-legend span::before { content:''; width:12px; height:12px; border-radius:3px; background:var(--chart-video); }
.account-chart-legend [data-kind="image"]::before { background:var(--chart-image); }
.account-chart { display:flex; gap:8px; }
.account-chart-axis { display:flex; flex-direction:column; justify-content:space-between; flex:none; height:200px; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.account-chart-scroll { min-width:0; flex:1; overflow-x:auto; padding-bottom:8px; }
.account-chart-plot { display:flex; min-width:100%; width:max-content; background:repeating-linear-gradient(to top, #e7e7e7 0 1px, transparent 1px 50px) left top / 100% 200px no-repeat; }
.account-chart-column { flex:1 0 82px; min-width:82px; text-align:center; }
.account-chart-bars { display:flex; justify-content:center; gap:2px; height:200px; border-bottom:1px solid #d1d1d6; }
.account-chart-hit { display:flex; align-items:end; justify-content:center; flex:none; width:28px; height:100%; min-height:0; margin:0; padding:0 3px; background:transparent; border:0; border-radius:0; }
.account-chart-bar { display:block; width:22px; border-radius:4px 4px 0 0; background:var(--chart-video); }
.account-chart-bar[data-kind="image"] { background:var(--chart-image); }
.account-chart-hit:hover, .account-chart-hit:focus-visible { background:#1717210a; outline:2px solid var(--ink); outline-offset:-2px; }
.account-chart-date, .account-chart-end { display:block; margin-top:7px; color:var(--muted); font-size:10px; }
.account-chart-readout { min-height:40px; padding:10px; border:1px solid var(--line); border-radius:9px; font-size:12px; }
.account-stats-table { overflow:auto; margin-top:16px; }
.account-stats-table summary { cursor:pointer; padding:12px; border:1px solid var(--line); border-radius:9px; background: var(--field); font-size:12px; font-weight:600; }
.account-stats-table table { width:100%; margin-top:12px; }
.account-stats-table caption { padding:10px; text-align:left; }
.account-stats-table td { font-variant-numeric:tabular-nums; }
@media (max-width:900px) { .account-setup { grid-template-columns:minmax(0,1fr); } }
@media (max-width:500px) {
#account-stats-dialog { padding:16px; }
#account-stats-title { font-size:18px; }
#account-stats-form { padding:12px; gap:10px; }
#account-stats-content { padding:14px 10px; }
.account-stats-total { font-size:22px; }
#account-stats-dialog .account-filters label { flex:1 1 130px; }
#accounts-panel .head-actions { width:100%; flex-wrap:wrap; }
}
@media print, (forced-colors:active) {
.account-chart-bar { background:repeating-linear-gradient(45deg,CanvasText 0 2px,Canvas 2px 5px); forced-color-adjust:none; }
.account-chart-bar[data-kind="image"] { background:repeating-linear-gradient(135deg,CanvasText 0 2px,Canvas 2px 5px); }
}
.account-actions .secondary-button:hover:not(:disabled) { background:var(--badge-bg); border-color:var(--line); }
.account-actions .account-delete { color:var(--error); }
.account-actions .account-delete:hover:not(:disabled) { background:var(--error-bg); border-color:var(--error-border); }
.account-actions .secondary-button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.account-actions .secondary-button:disabled { opacity:.45; cursor:not-allowed; }
.balance-cell .video-status { margin: 8px 0 0; font-size: 11.5px; white-space: normal; overflow-wrap: anywhere; }
.balance-cell .video-status[data-error="true"] { color: var(--error); }
.balance-cell .video-status[data-status="yes"] { color: var(--primary); }
.balance-summary .quota-head { justify-content: space-between; }
.balance-summary .quota-reset { margin-top: 5px; }
.balance-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 600; }
.quota-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 8px; margin-bottom: 8px; }
.quota-reset, .credit-caption { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.balance-note, .balance-cell .usage-error { margin: 10px 0 0; white-space: normal; overflow-wrap: anywhere; }
.balance-cell .reset-box { flex-wrap: wrap; gap: 4px 6px; white-space: normal; }
.balance-cell .reset-date { font-size: 11px; }
.balance-cell .token-chip { padding: 0; border: 0; background: none; color: var(--ink); font-size: 18px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.switch-label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
.account-row .identity-avatar { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.account-row .identity-top { gap: 8px; }
.account-row .switch-label { padding: 3px 5px; }
.account-row .switch-text { display: none; }
.account-row .balance-label { margin-bottom: 4px; font-size: 10px; }
.account-row .quota-head { margin-bottom: 5px; gap: 3px 6px; }
.account-row .quota-track { height: 4px; }
.account-row .quota-reset, .account-row .credit-caption { margin-top: 5px; font-size: 10px; }
.account-row .token-chip { font-size: 15px; }
.account-row .plan-badge { padding: 1px 5px; font-size: 10px; }
@media (forced-colors: active) {
.quota-track { outline: 1px solid CanvasText; }
.quota-fill { background: Highlight; forced-color-adjust: none; }
}
.usage-value { font-weight: 650; color: var(--ink); font-size: 13px; }
.plan-badge {
font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
background: var(--field); color: var(--primary); border: 1px solid var(--line); white-space: nowrap;
}
.token-chip {
font-weight: 650; font-size: 12.5px; color: #4d4d51;
background: var(--field); border: 1px solid var(--line);
padding: 2px 9px; border-radius: 7px; white-space: nowrap;
}
.quota-track {
width: 100%; height: 7px; border-radius: 99px;
background: var(--field); overflow: hidden;
}
.quota-fill {
height: 100%; border-radius: 99px;
background: var(--quota-color);
transition: width 0.3s ease, background-color 0.3s ease;
}
.quota-track[data-level="empty"] { background: var(--quota-color); }
/* Reset Date Column */
.reset-cell { white-space: nowrap; min-width: 130px; }
.reset-box { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.reset-date { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.reset-time {
display: inline-block; width: fit-content;
font-size: 11px; font-weight: 600; color: var(--muted);
background: var(--field); padding: 2px 6px; border-radius: 5px;
}
/* Status & Refresh Column (Compact 1-line layout) */
.state-cell, tbody td:last-child { white-space: nowrap; }
.state-top { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.account-state {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; margin: 0;
}
.account-state::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.account-state[data-kind="ready"] { background: var(--field); color: var(--muted); }
.account-state[data-kind="busy"],
.account-state[data-kind="pending"] { background: var(--accent-soft); color: var(--accent); }
.account-state[data-kind="error"] { background: var(--error-bg); color: var(--error); }
.account-state[data-kind="off"] { background: var(--field); color: var(--muted); }
.refresh-btn, tbody td:last-child .text-button {
display: inline-flex; align-items: center;
background: var(--button-bg); border: 1px solid var(--button-border); color: var(--button-ink);
font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px;
transition: all 0.15s ease; white-space: nowrap; margin: 0;
}
.refresh-btn:hover:not(:disabled), tbody td:last-child .text-button:hover:not(:disabled) {
border-color: var(--button-border); color: var(--button-ink); background: var(--button-hover);
}
.updated-time { display: inline-block; margin: 0 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.state-top .updated-time { margin: 0; }
.usage-error:empty { display: none; }
.usage-error { margin: 4px 0 0; font-size: 11.5px; white-space: normal; }
.workspace-tabs button[aria-selected="true"] .count-badge {
background: transparent;
color: inherit;
}
/* Video History Tab */
.history-panel { margin-top: 0; }
.history-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
margin-top: 12px;
/* stretch, not start: cards in a row share a height so their action rows line
up. With `start` each card shrank to its own content and the bottoms raggedly
disagreed, which is what read as the grid being out of sync. */
align-items: stretch;
}
.history-card {
padding: 14px;
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.history-stage {
aspect-ratio: 16/9;
border-radius: 10px;
}
.history-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 2px;
}
.history-sub { margin: 0; font-size: 11.5px; }
.history-inputs { display: grid; gap: 6px; margin-top: 10px; }
.history-inputs:empty { display: none; }
.history-refs { display: flex; align-items: center; gap: 4px; min-width: 0; height: 60px; }
.history-ref-thumbnails { display:flex; flex:1; align-items:center; gap:4px; min-width:0; padding:3px; }
.history-ref-thumbnails .history-ref { flex:0 1 46px; min-width:0; }
.history-ref-nav { display:flex; align-items:center; justify-content:center; flex:0 0 24px; width:24px; height:28px; padding:4px; border:1px solid var(--line); border-radius:8px; background:var(--button-bg); color:var(--button-ink); }
.history-ref-nav[hidden] { display:none; }
.history-ref-nav svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.history-ref-nav:disabled { opacity:.3; cursor:default; }
.history-ref-nav:not(:disabled):hover { background:var(--button-hover); color:var(--button-ink); }
.history-ref-nav:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.history-ref-position { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.history-ref { display: block; flex: 0 0 46px; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.history-ref img { display: block; width: 100%; height: 100%; object-fit: cover; }
.history-ref:hover { border-color: var(--primary); }
.history-ref:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.history-prompt {
margin: 0;
font-size: 12px;
color: var(--ink);
background: var(--field);
border: 1px solid #ececf0;
border-radius: 8px;
padding: 8px 10px;
max-height: 76px;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.history-actions {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 2px;
}
.history-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--button-border);
border-radius: 8px;
background: var(--button-bg);
color: var(--button-ink);
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
transition: all 0.15s ease;
}
.history-btn:hover:not(:disabled) {
border-color: var(--button-border);
color: var(--button-ink);
background: var(--button-hover);
}
.history-btn.primary-link {
background: var(--button-bg);
border-color: var(--button-border);
color: var(--button-ink);
}
.history-btn.primary-link:hover {
background: var(--button-hover);
color: var(--button-ink);
}
.history-btn.danger-btn {
margin-left: auto;
color: #ffb4ab;
border-color: var(--button-border);
}
.history-btn.danger-btn:hover:not(:disabled) {
background: var(--button-hover);
border-color: #ffb4ab;
color: #ffb4ab;
}
footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 16px; padding: 9px 0 0; font-size: 11px; line-height: 1.35; color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loading-glow {
0%, 100% { opacity: .45; transform: scale(.92); }
50% { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.loading[aria-busy="true"]::before,
.loading[aria-busy="true"] .spinner::before,
.loading[aria-busy="true"] .spinner::after { animation: none; }
}
@media (max-width: 1100px) {
.layout { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (max-width: 840px) {
.layout { grid-template-columns: 1fr; }
.editor-card { position: static; max-height: none; overflow: visible; }
.preview-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)) !important; }
}
@media (max-width: 600px) {
.nav-pill, .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
.card { padding: 16px; }
.preview-settings { gap: 8px; padding: 9px; }
.preview-setting { flex-basis: 130px; padding: 7px 8px; }
.account-form label { width: 100%; }
.account-form input { width: 100%; }
footer { flex-direction: column; }
}
.error-toast { position:fixed; z-index:100; right:20px; bottom:24px; max-width:min(420px, calc(100vw - 40px)); padding:14px 18px; border:1px solid var(--line); border-left:3px solid #b42318; border-radius:10px; background:var(--surface); color:var(--ink); box-shadow:0 6px 24px #0002; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
@media (prefers-reduced-motion:no-preference) {
:is(#history-empty, #image-history-empty):not([hidden]) .history-empty-icon { animation:history-empty-float 3s ease-in-out infinite; }
:is(#history-empty, #image-history-empty):not([hidden]) h2,
:is(#history-empty, #image-history-empty):not([hidden]) p { animation:brand-reveal .5s ease-out both; }
:is(#history-empty, #image-history-empty):not([hidden]) p { animation-delay:.1s; }
}
.confirm-toast { position:fixed; inset:0; margin:auto; width:420px; max-width:calc(100vw - 40px); max-height:calc(100dvh - 48px); overflow:auto; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:0 8px 32px #0002; }
.confirm-toast::backdrop { background:#25252926; }
/* Anchored to the results panel; left/top are the box's own top-left, set by JS. */
.confirm-toast.confirm-toast-anchored { inset:auto; margin:0; }
.workflow-history-toolbar { margin-bottom:14px; }
.workflow-history-toolbar .workflow-history-all { margin:0; }
.workflow-run-select { flex:none; margin:0; }
.workflow-run-select input { width:16px; height:16px; margin:0; accent-color:var(--primary); }
.confirm-toast h2 { margin:0 0 8px; font-size:16px; }
.confirm-toast p { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.6; }
.confirm-toast form { display:flex; justify-content:flex-end; gap:8px; }
.confirm-toast .confirm-delete { background: var(--error); border-color: var(--error); color: #fff; }
.confirm-toast button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
@media (prefers-reduced-motion:no-preference) {
.confirm-toast[open], #history-download-selected:not([hidden]), #history-delete-selected:not([hidden]) { animation:selection-reveal .24s ease-out both; }
#history-download-selected[data-all-selected="true"], #history-delete-selected[data-all-selected="true"] { animation-name:selection-all-reveal; }
}
@keyframes selection-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes selection-all-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes history-empty-float { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-8px) rotate(5deg); } }
/* Studio surfaces, navigation and motion. */
body { min-height: 100vh; background: var(--canvas); }
.shell {
--shell-gutter: clamp(16px, 2.5vw, 40px);
display: flex; flex-direction: column; width: 100%; max-width: none;
min-height: 100vh; min-height: 100dvh;
padding: 0 var(--shell-gutter) 20px;
}
.nav-wrap { margin: 0 0 28px; border-bottom: 1px solid var(--line); }
.nav-pill { min-height: 84px; flex-direction: row; align-items: center; gap: 16px; }
.brand-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand { gap: 12px; font-size: 20px; font-weight: 750; letter-spacing: -.6px; }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.brand > span:not(.brand-logo) { position:relative; animation:brand-reveal .65s ease-out both; }
.brand > span:not(.brand-logo)::after { content:''; position:absolute; left:0; right:0; bottom:-5px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--primary),transparent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.brand:hover > span:not(.brand-logo)::after,
.brand:focus-visible > span:not(.brand-logo)::after { transform:scaleX(1); }
.brand:hover small, .brand:focus-visible small { animation:brand-reveal .45s ease-out both; }
@keyframes brand-reveal { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) {
.brand > span:not(.brand-logo), .brand:hover small, .brand:focus-visible small { animation:none; }
.brand > span:not(.brand-logo)::after { transition:none; }
}
.brand-logo {
width: 40px; height: 40px; border-radius: 13px; color: #fff;
background: linear-gradient(145deg, #6f6f73, #434347);
box-shadow: 0 5px 14px #59595d20, inset 0 1px #ffffff38;
transition: transform .25s var(--ease-out);
}
.topbar-status { flex-wrap: nowrap; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; color: var(--primary); font-weight: 600; white-space: nowrap; }
.status-pill::before, .preview-live::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #7b7b7f; }
.nav-pill .studio-userbar { gap:10px; min-width:0; max-width:100%; }
.studio-userbar .credit-label { gap:10px; padding:7px 10px; min-height:50px; border-radius:14px; background:var(--surface); box-shadow:0 3px 12px #17172106; }
.studio-userbar .credit-label::before { content:attr(data-initial); display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:linear-gradient(145deg,#686875,#30303b); color:#fff; font-size:14px; }
.studio-identity { display:grid; gap:2px; min-width:0; }
#studio-username { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; font-size:12px; }
#studio-credit-detail { color:var(--muted); font-size:10px; font-weight:400; line-height:1.5; }
.studio-role { flex:none; padding:3px 7px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--field); font-size:9px; letter-spacing:.02em; }
#server-status { --status-dot:#71717a; display:inline-flex; align-items:center; gap:9px; min-height:30px; max-width:100%; padding:6px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); box-shadow:0 1px 2px #18181b05; font-size:11px; font-weight:500; line-height:1.4; font-variant-numeric:tabular-nums; white-space:normal; }
#server-status[data-state="ready"] { --status-dot:#27834e; }
#server-status[data-state="running"] { --status-dot:#6366b5; }
#server-status[data-state="queued"] { --status-dot:#a16c16; }
#server-status:is([data-state="offline"], [data-state="error"]) { --status-dot:var(--error); border-color:var(--error-border); color:var(--error); }
#server-status::before { width:6px; height:6px; flex:0 0 6px; background:var(--status-dot); box-shadow:0 0 0 3px color-mix(in srgb, var(--status-dot) 12%, transparent); }
@media (max-width:500px) {
.studio-userbar .credit-label { flex:1 1 190px; }
.studio-role { margin-left:auto; }
}
@media (prefers-reduced-motion:no-preference) {
#server-status[data-active="true"]::before { animation:server-pulse 2s ease-out infinite; }
}
@keyframes server-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.workspace-shell { display: grid; grid-template-columns: 218px minmax(0, 1fr); align-items: start; align-content: start; gap: 28px; min-width: 0; flex: 1 0 auto; }
.content-column { grid-column: 2; width: 100%; min-width: 0; }
.sidebar {
grid-column: 1; position: sticky; top: 20px; display: flex; flex-direction: column;
padding: 16px 10px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
}
.sidebar-label { margin: 0 12px 14px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.workspace-tabs { position: static; display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0; padding: 0; background: transparent; }
.workspace-tabs button {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px;
padding: 10px 12px; border: 1px solid transparent; border-radius: 11px;
color: var(--button-ink); background: var(--button-bg); text-align: left; font-size: 12px; font-weight: 600;
transition: color .2s, background-color .2s, transform .2s var(--ease-out);
}
.workspace-tabs button[aria-selected="true"] { color: var(--button-ink); background: var(--button-bg); border-color: #8d8d99; }
.workspace-tabs button[aria-selected="true"] .nav-icon { stroke-width: 2; }
@media (prefers-reduced-motion:no-preference) {
.sidebar .workspace-tabs button { position:relative; }
.sidebar .workspace-tabs button::before { content:''; position:absolute; left:0; top:13px; bottom:13px; width:3px; border-radius:0 3px 3px 0; background:currentColor; opacity:0; transform:scaleY(.3); transition:opacity .2s ease,transform .25s ease; }
.sidebar .workspace-tabs button[aria-selected="true"]::before { opacity:1; transform:scaleY(1); }
.sidebar .workspace-tabs button[aria-selected="true"] > span:first-of-type { animation:sidebar-label-in .25s ease-out; }
.sidebar .workspace-tabs button[aria-selected="true"] .nav-icon { animation:sidebar-icon-in .35s ease-out; }
.sidebar .workspace-tabs button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
}
@keyframes sidebar-label-in { from { opacity:.5; transform:translateX(-4px); } to { opacity:1; transform:translateX(0); } }
@keyframes sidebar-icon-in { 0% { transform:scale(.85); } 60% { transform:scale(1.12); } 100% { transform:scale(1); } }
.nav-icon, .sidebar svg, .admin-nav-link svg {
width: 18px; height: 18px; flex: 0 0 18px; max-width: 18px; max-height: 18px;
fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nav-icon { transition: transform .25s var(--ease-out); }
.workspace-tabs .count-badge { margin-left: auto; background: transparent; color: inherit; }
.sidebar-note { margin: 28px 4px 0; padding: 16px 12px; border-radius: 12px; background: var(--field); }
.sidebar-note-icon { display: block; margin-bottom: 8px; color: var(--primary); font-size: 24px; }
.sidebar-note strong { font-size: 13px; line-height: 1.6; }
.sidebar-note p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.sidebar-toggle, #sidebar-close { display: none; width: 40px; height: 40px; padding: 9px; border: 1px solid var(--button-border); border-radius: 10px; background: var(--button-bg); color: var(--button-ink); }
.sidebar-toggle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sidebar-backdrop { display: none; }
.layout { grid-template-columns: minmax(310px, 370px) minmax(0, 1fr); gap: 22px; align-content: start; }
.studio-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 4px; }
.eyebrow { margin: 0 0 7px; color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.studio-heading h1 { margin: 0; font-size: clamp(26px, 2.5vw, 34px); font-weight: 750; line-height: 1.3; letter-spacing: -.035em; }
.studio-heading p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.studio-tag { flex-shrink: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--badge-bg); font-size: 11px; }
.card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--surface-shadow); }
.editor-card { top: 20px; max-height: calc(100dvh - 40px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d8d8dc transparent; padding: 22px; }
.editor-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.step-chip { display: inline-grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #e6e6ea; border-radius: 10px; color: var(--primary); background: var(--badge-bg); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.editor-title h2 { margin: 1px 0 3px; font-size: 16px; letter-spacing: -.3px; }
.editor-title p { margin: 0; font-size: 12px; color: var(--muted); }
.editor-head { min-height: 30px; margin: 14px 0 8px; gap: 6px; }
.editor-head .input-label { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0; }
.editor-head .count-badge { margin: 0; }
.editor-head .text-button { flex-shrink: 0; font-size: 11px; }
.input-label { color: var(--ink); font-size: 12px; }
#prompt-label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: -.025em; cursor: text; }
#prompt-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.prompt-label-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); }
.prompt-label-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#prompt-label:hover .prompt-label-icon, #form:has(#paste-media:focus) .prompt-label-icon { box-shadow: 0 0 0 4px #17172108; }
#form .mode2-analysis { width: 100%; min-height: 44px; gap: 10px; margin: 10px 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.5; }
#mode2-analysis { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; padding: 0; box-shadow: none; margin: 0; accent-color: var(--primary); }
#form .mode2-duration { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); }
#form .mode2-duration label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--ink); font-weight: 600; }
#form .mode2-duration label span { color: var(--muted); font-size: 10px; font-weight: 400; }
#mode2-duration-value { grid-column: 2; grid-row: 1; min-width: 42px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
#form #mode2-duration { grid-column: 1 / -1; width: 100%; min-width: 0; height: 24px; min-height: 24px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; accent-color: var(--primary); cursor: pointer; }
#mode2-duration:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
#prompt-label { animation: mode-controls-in .4s ease-out; }
.prompt-label-icon { transition: box-shadow .2s ease; }
.prompt-label-icon svg { animation: prompt-idea-float 3.6s ease-in-out infinite; }
}
@keyframes prompt-idea-float { 50% { transform: translateY(-2px) rotate(-6deg); } }
textarea, input:not([type="checkbox"]), select { transition: border-color .2s, background-color .2s, box-shadow .2s; }
textarea { min-height: 104px; margin-top: 0; padding: 11px 12px; background: var(--surface); font-size: 12px; }
textarea::placeholder, input::placeholder { color: #87878b; opacity: 1; }
textarea:focus, input:not([type="checkbox"]):focus, select:focus { outline: none; border-color: #99999d; box-shadow: 0 0 0 3px #59595d14; background-color: var(--field); }
.run-options input { height: 38px; min-height: 38px; background: var(--surface); }
.run-options #save-config { min-height: 38px; height: 38px; }
.preview-settings { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); box-shadow: none; backdrop-filter: none; }
.preview-setting { padding: 0; gap: 4px; }
.preview-size-control input[type="range"] { min-width: 0; min-height: 26px; border: 0; background: transparent; box-shadow: none; }
.preview-size-control output { min-width: 56px; padding: 3px 6px; border-color: var(--line); background: var(--field); font-size: 10px; }
.submit-btn, #send-otp-btn { position: relative; overflow: hidden; min-height: 46px; border: 1px solid var(--button-border); border-radius: 11px; color: var(--button-ink); background: var(--button-bg); box-shadow: 0 4px 10px #17172118; font-weight: 650; transition: transform .2s var(--ease-out), background-color .2s, box-shadow .2s; }
.submit-btn::after, #send-otp-btn::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 25%, #ffffff24 50%, transparent 75%); transform: translateX(-120%); transition: transform .5s var(--ease-out); }
.submit-btn[aria-busy="true"] { display: flex; align-items: center; justify-content: center; gap: 9px; }
.submit-btn[aria-busy="true"]::before { content: ''; flex: 0 0 14px; width: 14px; height: 14px; border: 2px solid transparent; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }
.shortcut-hint { margin: 8px 0 0; text-align: center; color: var(--muted); font-size: 10px; }
.field-note { line-height: 1.6; overflow-wrap: anywhere; }
#form-status:empty, #config-status:empty, #history-status:empty, #account-status:empty { display: none; }
#form-status:not(:empty) { margin-top: 12px; padding: 9px 11px; border-radius: 9px; background: var(--field); }
#form-status[data-error="true"]:not(:empty) { background: var(--error-bg); }
.secondary-button, .text-button, .history-btn, .refresh-btn, .account-pagination button, .ref-thumb-remove, .sidebar-toggle, #sidebar-close { transition: transform .2s var(--ease-out), color .2s, background-color .2s, border-color .2s; }
.preview-heading, .preview-heading > div { display: flex; align-items: center; gap: 10px; }
.preview-heading { justify-content: space-between; min-height: 32px; margin: 0 0 14px; }
.preview-heading h2 { margin: 0; font-size: 14px; letter-spacing: -.2px; }
.preview-heading .step-chip { background: var(--surface); border-color: var(--line); color: var(--muted); }
.preview-live { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; }
:is(#empty, #image-empty, #image-edit-empty) { min-height: 536px; padding: 32px 20px 40px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 38%, #f4f4f8, #fcfcff 60%, #fff); box-shadow: var(--surface-shadow); }
:is(#empty, #image-empty, #image-edit-empty):not([hidden]) { gap: 22px; }
:is(#empty, #image-empty, #image-edit-empty)::before { background-image: radial-gradient(#9c9ca0 .8px, transparent .8px); opacity: .25; }
:is(#empty, #image-empty, #image-edit-empty) h2 { margin: 9px 0; color: var(--ink); font-size: clamp(20px, 2vw, 26px); line-height: 1.35; }
.empty-copy { max-width: 390px; }
.empty-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.empty-copy .eyebrow { font-size: 9px; letter-spacing: .1em; }
.empty-scene { width: min(254px, 100%); }
.empty-scene::before { background: linear-gradient(145deg, #ececf0, #d1d1d5); border-color: #fff; }
.empty-scene::after { background: linear-gradient(145deg, #f2eddd, #e2d8b9); border-color: #fff; }
.empty-screen { top: 26px; background: linear-gradient(150deg, #aaaaae, #707074 55%, #4a4a4e); box-shadow: 0 24px 44px #41414526, inset 0 1px #ffffff80; }
.empty-orbit { border-color: #a8a8ac66; }
.empty-orbit::before { background: #909094; box-shadow: 0 0 0 5px #90909414; }
.empty-orbit::after { background: #b7a36c; box-shadow: 0 0 0 5px #b7a36c14; }
.empty-spark { background: #9c9ca0; }
.empty-spark:nth-child(3), .empty-spark:nth-child(5) { background: #baa567; }
.preview-grid, .history-grid { gap: 18px; }
.preview-card, .history-card { border-color: var(--line); border-radius: 15px; background: var(--surface); transition: border-color .25s, box-shadow .25s; }
.preview-card[data-state="running"] { border-color: #bcbcc0; box-shadow: 0 0 0 3px #59595d0a; }
.preview-card .card-head { position: relative; overflow: hidden; margin-bottom: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); box-shadow: none; }
#jobs .card-head { min-height: 48px; padding: 12px 16px; border-color: var(--line); border-radius: 12px; background: var(--field); box-shadow: none; }
#jobs .card-title { position: relative; z-index: 1; min-width: 0; width: 100%; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
#jobs .card-title > span:first-child { flex: none; white-space: nowrap; }
#jobs .card-account { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; font-weight: 500; }
#jobs .card-title::before { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: none; }
#jobs .preview-card[data-state="running"] .card-title::before, #jobs .preview-card[data-state="done"] .card-title::before { background: var(--accent); }
#jobs .preview-card[data-state="error"] .card-title::before { background: var(--error); }
#image-form .mode2-duration input[type="range"] { flex-shrink: 0; width: 88px; min-height: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; accent-color: var(--primary); cursor: pointer; }
#image-form .mode2-duration output { flex-shrink: 0; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.job-progress { margin: 10px 0; }
.preview-card .job-progress { display: none; }
.preview-card[data-state="done"] .job-progress, .preview-card[data-state="error"] .job-progress { display: block; margin: 8px 0 0; }
.job-progress-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.image-results { display: grid; gap: 12px; }
.image-card .preview-stage { aspect-ratio: var(--image-ratio, 1); }
#image-jobs { align-items: start; }
#image-jobs .image-card { min-width: 0; padding: 12px; border-radius: 18px; box-shadow: 0 4px 18px #17172106; }
#image-jobs .image-card:hover { border-color: #bcbcc6; box-shadow: 0 8px 24px #1717210d; }
#image-jobs .image-card:has(.video-select input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px #17172112; }
#image-jobs .card-head { margin: 0; padding: 3px 2px 13px; border: 0; border-radius: 0; background: none; box-shadow: none; }
#image-jobs .card-title { font-size: 12px; letter-spacing: 0; }
#image-jobs .card-title::before { width: 7px; height: 7px; border-radius: 50%; box-shadow: none; }
#image-jobs .preview-stage { border-radius: 12px; }
#image-jobs .image-card[data-state="done"] .preview-stage { background: var(--field); }
#image-jobs .job-progress { margin: 12px 2px 0; }
#image-jobs .image-card[data-state="done"] .job-progress-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 9px; border-radius: 7px; background: var(--badge-bg); color: var(--primary); font-size: 10px; font-weight: 600; }
#image-jobs .image-card[data-state="done"] .job-progress-label::before { content: '\2713'; font-size: 12px; }
#image-jobs .image-card[data-state="done"] .job-progress progress { display: none; }
#image-jobs .downloads { min-height: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); gap: 10px; }
#image-jobs .downloads:empty { display: none; }
#image-jobs .downloads .video-select { min-height: 40px; padding: 8px 10px; background: var(--surface); }
#image-jobs .downloads .video-select:has(input:checked) { background: var(--badge-bg); }
#image-jobs .downloads a { flex: 1; min-height: 40px; border-radius: 10px; }
#image-jobs .downloads a svg { width: 17px; height: 17px; flex-shrink: 0; }
.image-card .image-results:not(:empty) { position: absolute; inset: 0; }
.image-results img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 11px; }
.image-expand { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.image-expand:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
/* Editor headings: the browser default h2 was oversized and unspaced here. */
:is(#image-form, #image-edit-form, #audio-form, #workflow-form, #prompt-form) > h2 {
position: relative; margin: 0 0 18px; padding-bottom: 11px;
font-size: 19px; font-weight: 700; letter-spacing: -.03em; line-height: 1.25;
}
:is(#image-form, #image-edit-form, #audio-form, #workflow-form, #prompt-form) > h2::after {
content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px;
border-radius: 3px; background: linear-gradient(90deg, var(--ink), #8d8d99 65%, #8d8d9900);
transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
/* The workspace is display:none until its tab is picked, so this replays on show. */
:is(#image-form, #image-edit-form, #audio-form, #workflow-form, #prompt-form) > h2 { animation: form-heading-in .45s var(--ease-out) backwards; }
:is(#image-form, #image-edit-form, #audio-form, #workflow-form, #prompt-form) > h2::after { animation: form-heading-rule .55s var(--ease-out) .1s backwards; }
}
@keyframes form-heading-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes form-heading-rule { from { transform: scaleX(.12); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
#image-edit-count { font-variant-numeric: tabular-nums; }
.image-edit-card { position: relative; display: grid; gap: 11px; padding: 15px 15px 15px 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--surface-shadow); overflow: hidden; }
.image-edit-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.image-edit-card[data-state="done"]::before { background: var(--accent); }
.image-edit-card[data-state="error"]::before { background: var(--error); }
.image-edit-card[data-state="error"] { border-color: #e3b7b1; }
.image-edit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.image-edit-card-title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.image-edit-card-title::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.image-edit-card[data-state="done"] .image-edit-card-title::before { background: var(--accent); }
.image-edit-card[data-state="error"] .image-edit-card-title::before { background: var(--error); }
.image-edit-card-time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.image-edit-card-prompt { margin: 0; padding: 9px 11px; border-left: 2px solid #dcdce3; border-radius: 0 9px 9px 0; background: var(--field); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.image-edit-card-status { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
/* Fixed 1fr auto 1fr: the source keeps the left column at every width, so the
before/after reading never flips or collapses into one column. */
/* Both slots are the same bounded square. Plain 1fr let the preview panel's full
width through, so a square stage rendered ~660px tall and the source image
stretched edge to edge and letterboxed inside it. */
.image-edit-pair { --edit-slot: clamp(104px, 17vw, 190px); display: grid; grid-template-columns: var(--edit-slot) auto var(--edit-slot); align-items: center; justify-content: center; gap: 12px; }
.image-edit-pair figure { margin: 0; display: grid; gap: 6px; min-width: 0; justify-items: center; }
.image-edit-pair img { width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; border-radius: 10px; background: var(--field); }
.image-edit-pair figcaption { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.image-edit-arrow { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 13px; }
/* A plain