/* Creative tools extend the existing Atelier tokens and layout. */
.creationCommon {order:3;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.creationCommon .field {min-width:0;margin:0}
.creationCommon select {font-size:12px;min-height:42px}
.creationTools {order:4;margin:0 0 6px;border-top:1px solid var(--line);padding-top:10px}
.creationTools button,.resultTools button {font-size:.76rem;min-height:38px;padding:8px 12px}
.presetPick {max-width:340px;margin:2px 0 0}
.presetPick select {font-size:12px;min-height:40px}
@media(max-width:900px){.creationCommon select {font-size:16px;min-height:44px}.creationTools button {min-height:44px}.presetPick{max-width:none}.presetPick select{font-size:16px;min-height:44px}}
@media(max-width:360px){.creationCommon {grid-template-columns:1fr}}
/* Accessible popup menus (Tools, row overflow) */
.menuWrap {position:relative;display:inline-block}
.toolsButton::after {content:'▾';margin-left:8px;font-size:.85em}
.toolsButton[aria-expanded=true]::after {content:'▴'}
.menuList {position:absolute;z-index:30;left:0;top:calc(100% + 6px);min-width:240px;max-width:min(92vw,330px);max-height:min(62dvh,540px);overflow:auto;padding:6px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 40px var(--shadow)}
.menuList[hidden] {display:none}
.menuHeading {padding:9px 10px 3px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.menuList .menuItem {display:flex;width:100%;justify-content:flex-start;text-align:left;border:0;background:transparent;padding:8px 10px;min-height:38px;border-radius:5px;font-size:13px;color:inherit}
.menuList .menuItem:hover,.menuList .menuItem:focus-visible {background:var(--chip)}
.menuList .menuItem.danger {color:var(--danger)}
.rowMenu .menuList {left:auto;right:0}
/* Command palette */
.paletteList {display:flex;flex-direction:column;gap:2px;max-height:50dvh;overflow:auto}
.paletteItem {display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 12px;border-radius:6px;cursor:pointer;font-size:14px}
.paletteItem small {color:var(--muted);font-size:11px;white-space:nowrap}
.paletteItem[aria-selected=true] {background:var(--chip);outline:1px solid var(--accent)}
/* Try on other models */
.tryList {display:flex;flex-direction:column;gap:4px}
.tryRow {display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:6px;cursor:pointer}
.tryRow span {display:flex;flex-direction:column;gap:2px;min-width:0}
.tryRow small {color:var(--muted)}
.tryRow input {width:20px;height:20px;accent-color:var(--accent);flex:none}
.tryRow:has(input:disabled) {opacity:.6;cursor:default}
.resultTools {margin:18px 0;gap:8px;align-items:center}
.resultTools[hidden] {display:none}
.resultTools>.field {min-width:160px;margin:0}
.resultTools>.quiet {flex-basis:100%}
.toolDialog {background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:0;width:min(600px,calc(100vw - 32px));max-width:none;max-height:88dvh;overflow:auto;box-shadow:0 24px 80px var(--shadow)}
.toolDialog::backdrop {background:rgba(15,17,14,.65)}
.toolDialogHead {position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;background:var(--panel);border-bottom:1px solid var(--line)}
.toolDialogHead h2 {font:500 1.3rem Georgia,serif;margin:0}
.toolDialogBody {padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.toolDialogBody>button {align-self:flex-start}
.toolDialogBody input,.toolDialogBody select,.toolDialogBody textarea {width:100%;min-width:0}
.toolDialogBody textarea {min-height:110px}
.toolDialogBody img,.toolDialogBody video,.toolDialogBody canvas {max-width:100%;max-height:55dvh;object-fit:contain;border-radius:10px}
.toolDialogBody pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:35dvh;overflow:auto}
.toolDialogBody p {margin:0;overflow-wrap:anywhere}
.wideDialog {width:min(1120px,calc(100vw - 32px))}
.toolFields {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cropStageWrap {display:flex;justify-content:center;padding:14px;background:var(--mat);border-radius:10px;min-width:0}
.cropStage {position:relative;max-width:100%;touch-action:none;user-select:none;cursor:crosshair;isolation:isolate}
.toolDialogBody .cropStage>canvas {display:block;width:100%;height:auto;max-width:none;max-height:none;border-radius:0}
.cropBox {position:absolute;box-sizing:border-box;border:2px solid white;outline:1px solid #182018;box-shadow:0 0 0 9999px rgb(0 0 0 / .42);cursor:move}
.cropStageWrap {overflow:hidden}
.cropStage[data-drawing=true] .cropBox {cursor:crosshair}
.cropBox::before,.cropBox::after {content:'';position:absolute;pointer-events:none}
.cropBox::before {inset:33.333% 0;border-block:1px solid rgb(255 255 255 / .5)}
.cropBox::after {inset:0 33.333%;border-inline:1px solid rgb(255 255 255 / .5)}
.toolDialog .cropHandle {position:absolute;z-index:1;width:30px;height:30px;min-height:30px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;touch-action:none}
.cropHandle::after {content:'';position:absolute;inset:9px;background:white;border:1px solid #182018;border-radius:2px}
.cropHandle[data-crop-handle=nw] {left:-16px;top:-16px;cursor:nwse-resize}
.cropHandle[data-crop-handle=ne] {right:-16px;top:-16px;cursor:nesw-resize}
.cropHandle[data-crop-handle=sw] {left:-16px;bottom:-16px;cursor:nesw-resize}
.cropHandle[data-crop-handle=se] {right:-16px;bottom:-16px;cursor:nwse-resize}
.cropStage:focus-visible,.cropHandle:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.cropTools,.cropActions {flex-wrap:wrap}
.cropTools [aria-pressed=true] {background:var(--accent);color:var(--on-accent)}
.cropPreview>summary,.cropPrecision>summary {cursor:pointer;padding:10px 0;color:var(--ink)}
.cropPreview[open],.cropPrecision[open] {display:grid;gap:12px}
.cropPreview canvas {display:block;margin:auto}
.cropMatch {display:flex;align-items:center;gap:8px;font-size:.85rem}
.toolDialogBody .cropMatch input {width:18px;height:18px;accent-color:var(--accent)}
.cropError[hidden] {display:none}
.cropActions {position:sticky;bottom:-22px;padding:12px 0;background:var(--panel);z-index:2}
@media(max-width:700px){.cropActions{bottom:-16px}.cropStageWrap{padding:14px}.cropTools>button{flex-grow:1}}
.viewerStage {overflow:hidden;min-height:240px;display:grid;place-items:center;touch-action:none;background:var(--mat);border-radius:12px}
.viewerStage img {cursor:grab;user-select:none;-webkit-user-drag:none}
.viewerStage video {width:100%}
.comparePair {display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.comparePair[data-count='3'] {grid-template-columns:repeat(3,minmax(0,1fr))}
.comparePair[data-count='4'] {grid-template-columns:repeat(2,minmax(0,1fr))}
.comparePair figure {min-width:0;margin:0}
.comparePair img,.comparePair video {width:100%;max-height:48dvh}
.comparePair figcaption {font-size:.8rem;color:var(--muted);margin-top:8px;overflow-wrap:anywhere}
.wipePair {display:block;min-height:260px;background:var(--mat)}
.wipePair figure:first-child {position:relative}
.wipePair figure:last-child {position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--wipe,50%)) 0 0)}
.wipePair img {height:45dvh;object-fit:contain}
.wipePair figcaption {display:none}
.diffTable {border-collapse:collapse;width:100%;font-size:.8rem;table-layout:fixed}
.diffTable th,.diffTable td {border-bottom:1px solid var(--line);text-align:left;vertical-align:top;padding:10px;overflow-wrap:anywhere;white-space:normal}
.libraryTools {display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:18px 0}
.libraryTools>.field {flex:1 1 145px;margin:0;min-width:0}
.libraryTools>button[aria-pressed=true] {background:var(--accent);color:var(--on-accent)}
.libraryFilters {margin:14px 0;border-bottom:1px solid var(--line);padding-bottom:12px}
.libraryFilters>summary {cursor:pointer;font-size:.86rem;color:var(--muted);padding:10px 0}
.libraryCard input[type=checkbox] {width:19px;height:19px;accent-color:var(--accent)}
.libraryCard h3:empty {display:none}
.libraryCard .cardBody>p {overflow-wrap:anywhere}
.libraryCard .buttonRow {flex-wrap:wrap;gap:8px}
.libraryCard button {font-size:.77rem;min-height:36px;padding:7px 11px}
.queuePlans {margin:22px 0}
.planRow {display:flex;gap:18px;justify-content:space-between;border-top:1px solid var(--line);padding:18px 0;align-items:start}
.planRow>div {min-width:0;overflow-wrap:anywhere}
.planRow .buttonRow {justify-content:flex-end;flex-wrap:wrap;flex-shrink:0;max-width:55%}
.savedItem {padding:14px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.savedItem strong {flex:1;overflow-wrap:anywhere;min-width:140px}
.savedItem small {flex-basis:100%;color:var(--muted)}
.dropReference {border:1px dashed var(--line);border-radius:12px;padding:12px}
.dropReference.dragOver {border-color:var(--accent);background:var(--chip)}
.referenceTools {display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.referenceThumbnail {width:90px;height:76px;object-fit:contain;background:var(--mat);border-radius:8px}
.referenceTools button {font-size:.75rem;min-height:34px;padding:6px 10px}
.seedTools {margin-top:8px;gap:5px}
.seedTools button {font-size:.72rem;min-height:32px;padding:6px 8px}
@media(max-width:900px){html{scroll-padding-bottom:160px}#generationForm :is(input,textarea,select,button){scroll-margin-bottom:160px;scroll-margin-top:90px}.composerForm{padding-bottom:110px}.seedTools button{min-height:44px}.generationFoot{box-shadow:0 -5px 15px var(--shadow)}}
@media(max-width:700px){.toolFields{grid-template-columns:1fr 1fr}.toolDialog{width:calc(100vw - 20px);max-height:93dvh}.toolDialogHead{padding:15px}.toolDialogBody{padding:16px}.toolDialog button{min-height:42px}.planRow{flex-direction:column}.planRow .buttonRow{max-width:100%;justify-content:flex-start}.resultTools>button{min-height:42px}.comparePair{grid-template-columns:1fr}.wipePair{display:block}.libraryTools{gap:9px}.libraryTools>.field{flex-basis:calc(50% - 9px)}.creationTools .buttonRow>button{min-height:40px}#libraryPage .pageHeading{margin-bottom:20px}.libraryFilters{margin:6px 0}}
@media(max-width:360px){.toolFields{grid-template-columns:1fr}.toolDialogHead h2{font-size:1.15rem}.toolDialogBody{padding:12px}.resultTools>button{flex-grow:1}.libraryTools>.field{flex-basis:100%}}
.actualDuration{font-size:13px;font-weight:600;margin:0 0 16px;color:var(--ink)}
.offlineDraftBanner{display:none;padding:14px;background:var(--paper);border:1px solid var(--line);margin-bottom:18px;gap:12px;align-items:center}
body[data-offline-draft=true] .offlineDraftBanner{display:flex;flex-wrap:wrap}
body[data-offline-draft=true] :is(.creationTools,.stageHead,.recovery,.generationEstimate,.estimateNote,#balance,[data-page]:not([data-page=create])){display:none!important}

/* Settings page: four groups, controls that save on change */
.settingsStack {display:flex;flex-direction:column;gap:38px;margin-top:20px}
.settingsGroup>h2 {font:500 1.5rem Georgia,serif;margin:0 0 14px}
.settingsGroup .settingsGrid {gap:16px}
.settingsCard {display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:0}
.settingsCard.wide {grid-column:1/-1}
.settingsCard h3,.settingsCard h4 {margin:0}
.settingsCard p {margin:0}
.settingsCard pre {white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;max-height:40dvh;overflow:auto}
.settingsCard .buttonRow {flex-wrap:wrap}
.settingRow {display:grid;grid-template-columns:minmax(0,1fr) auto 64px;gap:10px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.settingText {display:flex;flex-direction:column;gap:3px;min-width:0}
.settingText small {color:var(--muted);font-size:11px;line-height:1.5}
.settingRow select,.settingRow input[type=number] {min-width:150px;max-width:220px}
.settingRow input[type=checkbox] {width:22px;height:22px;accent-color:var(--accent)}
.savedTick {font-size:11px;color:var(--muted);opacity:0;transition:opacity .2s}
.savedTick.on {opacity:1;color:var(--accent)}
.warning {color:var(--danger);font-size:12px}
.rateWarning {flex-wrap:wrap}
.rateWarning .warning {flex-basis:100%}
.overheadNote {font-size:14px;font-weight:600}
.costBars {display:flex;align-items:flex-end;gap:3px;height:64px;padding:6px;border:1px solid var(--line);border-radius:5px;background:var(--off-bg)}
.costBar {flex:1;min-width:3px;background:var(--accent);border-radius:2px 2px 0 0}
.costTable {border-collapse:collapse;width:100%;font-size:.8rem}
.costTable th,.costTable td {border-bottom:1px solid var(--line);text-align:left;padding:8px 6px;font-weight:400}
.costTable th:first-child {font-weight:600}
.shareRow {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.shareRow div {display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.shareRow small {color:var(--muted)}
.healthList {list-style:none;margin:0;padding:0}
.healthList li {display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.healthList li span:first-child {display:flex;flex-direction:column;gap:3px}
.healthList small {color:var(--muted)}
.healthValue {font:500 15px var(--mono)}
.healthList li[data-state=warn] .healthValue {color:var(--danger)}
.configFacts {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0}
.configFacts>div {padding:12px;border:1px solid var(--line);border-radius:5px;background:var(--off-bg)}
.configFacts dt {font-size:11px;color:var(--muted)}
.configFacts dd {margin:4px 0 0;overflow-wrap:anywhere}
@media(max-width:700px){.settingRow {grid-template-columns:minmax(0,1fr) auto}.settingRow .savedTick {grid-column:1/-1;min-height:1em}.settingRow select,.settingRow input[type=number] {min-width:0;width:100%;max-width:none;grid-column:1/-1;font-size:16px}.settingsGroup .settingsGrid {grid-template-columns:1fr}}
/* Jobs → Activity */
.activity {display:flex;flex-direction:column;gap:26px}
.activitySection>summary {cursor:pointer;font:500 1.2rem Georgia,serif;min-height:40px;display:flex;align-items:center}
.activityHeading {font:500 1.2rem Georgia,serif;margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.activityCount {font:12px var(--mono);color:var(--muted)}
.activityList {display:flex;flex-direction:column}
.activityRow {display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:6px 16px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.activityRow[data-status=UNKNOWN],.activityRow[data-status=FAILED],.activityRow[data-status=EXPIRED],.activityRow[data-status=REJECTED] {border-left:3px solid var(--danger);padding-left:12px}
.activityThumb {width:64px;height:64px;min-height:64px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--mat);overflow:hidden;position:relative;display:grid;place-items:center}
.activityThumb img {width:100%;height:100%;object-fit:cover;display:block}
.activityGlyph {font-size:20px;color:var(--muted)}
.activityInfo {display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.activityHead {display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.activityStatus {font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line);background:var(--off-bg)}
.activityStatus[data-status=IN_PROGRESS],.activityStatus[data-status=IN_QUEUE],.activityStatus[data-status=SUBMITTING] {border-color:var(--accent);color:var(--accent)}
.activityStatus[data-status=FAILED],.activityStatus[data-status=UNKNOWN],.activityStatus[data-status=EXPIRED],.activityStatus[data-status=REJECTED] {border-color:var(--danger);color:var(--danger)}
.activityInfo small {color:var(--muted)}
.activityNext {font-size:13px;line-height:1.6;margin:4px 0 0}
.activityActions {justify-content:flex-end;flex-wrap:wrap;gap:8px;align-items:center}
.activityActions>button,.activityActions .menuWrap>button {min-height:38px;padding:7px 12px;font-size:12px}
.rowMenu>button {min-width:44px}
@media(max-width:700px){.activityRow {grid-template-columns:52px minmax(0,1fr)}.activityThumb {width:52px;height:52px;min-height:52px}.activityActions {grid-column:1/-1;justify-content:flex-start}.activityActions>button,.activityActions .menuWrap>button {min-height:44px}}
.planList {display:flex;flex-direction:column}

/* Private album (vault-ui.js): Settings card, album and picker dialogs, password and chooser dialogs. */
.toolDialog.vaultDialog {width:min(920px,calc(100vw - 32px))}
.vaultDialog .toolDialogBody.dragOver {outline:2px dashed var(--accent);outline-offset:-10px;background:var(--chip)}
.vaultSummary {font-size:13px;color:var(--muted)}
.vaultDialog .toolDialogBody .buttonRow {margin-top:0}
.vaultProgress:empty {display:none}
.vaultToggle {display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer}
.vaultToggle span {display:flex;flex-direction:column;gap:3px;min-width:0}
.vaultToggle small {color:var(--muted);font-size:11px;line-height:1.5}
.toolDialogBody .vaultToggle input {width:22px;height:22px;flex:none;margin:0;accent-color:var(--accent)}
.vaultGrid {display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.vaultTile {position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--mat);min-width:0}
.vaultTile.isSelected {outline:2px solid var(--accent);outline-offset:2px}
.toolDialog .vaultOpen {display:block;width:100%;height:100%;min-height:0;padding:0;border:0;background:none;cursor:pointer}
.vaultOpen:disabled {cursor:progress}
.toolDialogBody .vaultTile img {display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0}
.vaultTile img.isFailed {visibility:hidden}
.toolDialogBody .vaultTile input {position:absolute;top:6px;left:6px;width:22px;height:22px;margin:0;accent-color:var(--accent);cursor:pointer}
.vaultEmpty {grid-column:1/-1;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:40px 16px;border:1px dashed var(--line);border-radius:8px}
.vaultSelection {position:sticky;bottom:-22px;z-index:1;margin:0 -22px -22px;padding:12px 22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--panel);border-top:1px solid var(--line)}
.vaultSelected {flex:1;min-width:110px;font-size:13px}
.vaultPasswordTools summary {cursor:pointer;font-size:13px;color:var(--muted)}
.vaultPasswordTools[open] summary {margin-bottom:10px}
.vaultPasswordTools p {margin-bottom:10px}
.vaultPreview .toolDialogBody img {align-self:center;background:var(--mat)}
.vaultChooser .buttonRow {flex-direction:column;align-items:stretch}
.vaultChooser .buttonRow>button {min-height:48px;font-size:13px}
.vaultPassword .field {margin-top:12px}
@media(max-width:700px){.vaultGrid {grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}.vaultSelection {bottom:-16px;margin:0 -16px -16px;padding:12px 16px}.toolDialogBody .vaultTile input {width:26px;height:26px}}
/* Stitch videos: an ordered clip list, progress and the stitched preview. */
.stitchList{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.stitchRow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px}
.stitchClip{display:grid;gap:2px;min-width:0}.stitchClip strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stitchRow .buttonRow{flex-wrap:nowrap}.stitchDialog progress{width:100%;margin:8px 0}
.stitchResult video{display:block;width:100%;max-height:50vh;background:#000;border-radius:6px;margin-top:12px}
@media(max-width:700px){.stitchRow{flex-direction:column;align-items:stretch}.stitchRow .buttonRow>button{flex:1}}
/* Save a frame: the player fills the dialog; step buttons wrap on phones. */
.frameDialog video{display:block;margin:8px auto;max-height:45dvh;background:#000}
.frameSteps,.frameActions{flex-wrap:wrap}.frameActions{align-items:end}.frameActions .field{margin:0;min-width:180px}