/* Playground (design v9, board Playground): the page head, then the input
   card (480 of 1136 on the board) beside the output column, which holds the
   output card and the recent runs. Cards, buttons, fields, the segmented
   control, the switch, badges and code are the v9 classes of the shared
   stylesheet; this file places them and draws the pieces of the board:
   radio segments, the image boxes, ratio tiles, the run bar, the output
   frame with its tiles and the run list. The section is a size container,
   so the columns follow the content column, not the window. */
.generate { display: flex; flex-direction: column; gap: 0; container-type: inline-size; }
.generate .card { margin: 0; padding: 0; }
.generate-head { margin-bottom: 20px; }

/* Input and output side by side; one column in a narrow content column. */
.generate-grid { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 640fr); gap: 16px; align-items: start; margin: 0; }
.generate-input { display: flex; flex-direction: column; min-width: 0; }
.generate-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Input card */
.generate-input-head { align-items: center; padding-bottom: 16px; }
#generate-fields { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.generate-body { display: flex; flex-direction: column; gap: 20px; padding: 0 20px 20px; }
.generate-field { display: flex; flex-direction: column; min-width: 0; }
.generate-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.generate-label { display: block; color: var(--text-1); font: 500 13px/20px var(--font-sans); }
.generate-field > .generate-label { margin-bottom: 8px; }
.generate-model-id { overflow: hidden; color: var(--text-3); font: 400 12px/16px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.generate-help { margin: 6px 0 0; }
.generate-help:empty { display: none; }
.generate-help a { color: var(--violet-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.generate-field .field-error { margin: 6px 0 0; }

/* Radio segments: the native radio stays in the tab order (hidden only
   visually) and the label is the segment; the checked one is white and
   raised, a disabled one is grey. */
.generate-seg { display: flex; width: 100%; }
.generate-seg > .seg-item { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.generate-seg .choice-input:checked + .seg-item { background: var(--gray-0); box-shadow: 0 0 0 1px var(--line-soft), var(--e1); color: var(--text-1); }
.generate-seg .choice-input:focus-visible + .seg-item { outline: 2px solid var(--focus); outline-offset: 1px; }
.generate-seg .choice-input:disabled + .seg-item { color: var(--gray-400); cursor: not-allowed; }
.generate-seg .choice-input:checked:disabled + .seg-item { color: var(--text-2); }
.generate-views > .seg-item { padding: 0 12px; }
.generate-views .choice-input:checked + .seg-item { background: var(--gray-0); box-shadow: 0 0 0 1px var(--line-soft), var(--e1); color: var(--text-1); }
.generate-views .choice-input:focus-visible + .seg-item { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Prompt: the v9 text area with the counter above and clear under it */
#generate-prompt { min-height: 96px; resize: vertical; }
.generate-prompt-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 6px; }
.generate-prompt-foot .help { margin: 4px 0 0; }
.generate-prompt-foot .btn { flex: none; color: var(--text-2); }

/* Reference images, one box per mode: a single drop box for the first
   frame, two fixed slots side by side for the first and last frame, and the
   reference list with a box to add more. A box takes a dropped image or
   opens its picker (a visually hidden file input); while an image is over
   it, it turns violet and says 「松开即可上传」. A chosen image is a row of
   its name, role and size; the page shows no thumbnail, since the console's
   content policy keeps images same-origin. */
.generate-refs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.generate-slots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.generate-slots.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.generate-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.generate-slot-label { display: none; color: var(--text-3); font-size: 12px; line-height: 16px; }
.generate-slots.is-pair .generate-slot-label { display: block; }
.generate-ref-field { display: flex; flex-direction: column; gap: 8px; }
.generate-ref-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.generate-ref-list:empty { display: none; }
.generate-ref { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border-radius: var(--r-8); background: var(--gray-25); }
.generate-ref-glyph { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--r-6); background: var(--gray-100); color: var(--gray-700); }
.generate-ref-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.generate-ref-name { overflow: hidden; color: var(--text-1); font: 500 14px/20px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.generate-ref-size { color: var(--text-3); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.generate-ref-remove { flex: none; }
.generate-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 16px; border: 1px dashed var(--gray-300); border-radius: var(--r-8); background: var(--gray-25); color: var(--text-2); text-align: center; cursor: pointer; transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease); }
.generate-slots.is-pair .generate-drop { min-height: 0; aspect-ratio: 16 / 9; padding: 8px; }
.generate-drop-more { min-height: 72px; }
.generate-drop:hover, .generate-drop.is-over { border-color: var(--violet-600); background: var(--accent-tint); }
.generate-drop > .glyph { color: var(--gray-500); }
.generate-drop-text { color: var(--text-1); font: 500 14px/20px var(--font-sans); }
.generate-slots.is-pair .generate-drop-text, .generate-drop-more .generate-drop-text { color: var(--text-2); font-weight: 400; font-size: 13px; }
.generate-drop-release { display: none; color: var(--violet-700); font: 500 14px/20px var(--font-sans); }
.generate-drop.is-over > .generate-drop-text { display: none; }
.generate-drop.is-over > .generate-drop-release { display: block; }
.generate-refs-hint { margin: 0; }
.generate-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.generate-refs:has(#generate-file-first:focus-visible) #generate-drop-first,
.generate-refs:has(#generate-file-last:focus-visible) #generate-drop-last,
.generate-refs:has(#generate-files:focus-visible) #generate-refs-drop { outline: 2px solid var(--focus); outline-offset: 2px; }
#generate-fields:disabled .generate-drop { border-color: var(--gray-200); background: var(--gray-25); color: var(--text-3); cursor: not-allowed; }

/* Duration: the slider in the accent colour and the number in a 76px field */
.generate-duration-row { display: flex; align-items: center; gap: 16px; }
#generate-duration-range { flex: 1 1 auto; min-width: 0; height: 20px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; accent-color: var(--violet-600); cursor: pointer; }
#generate-duration-range:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
#generate-duration-range:disabled { cursor: not-allowed; opacity: .6; }
.generate-seconds { flex: none; width: 76px; padding-right: 10px; }
.generate-seconds input { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.generate-seconds input::-webkit-inner-spin-button, .generate-seconds input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* Aspect ratio: seven 40px tiles, each a drawn frame over its name */
.generate-ratios { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.generate-ratio-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--text-2); font-size: 12px; line-height: 16px; white-space: nowrap; cursor: pointer; }
.ratio-box { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--gray-200); border-radius: var(--r-8); background: var(--gray-0); color: var(--gray-700); transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); }
.generate-ratio-tile:hover .ratio-box { border-color: var(--gray-300); }
.choice-input:checked + .generate-ratio-tile { color: var(--text-1); }
.choice-input:checked + .generate-ratio-tile .ratio-box { border-color: var(--violet-600); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--violet-600); color: var(--violet-700); }
.choice-input:focus-visible + .generate-ratio-tile .ratio-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice-input:disabled + .generate-ratio-tile { cursor: not-allowed; opacity: .6; }
.ratio-mark { display: block; flex: none; border: 1.5px solid currentColor; border-radius: 2px; }
.ratio-mark-auto { width: 14px; height: 14px; border-style: dashed; }
.ratio-mark-21-9 { width: 20px; height: 9px; }
.ratio-mark-16-9 { width: 18px; height: 10px; }
.ratio-mark-4-3 { width: 16px; height: 12px; }
.ratio-mark-1-1 { width: 13px; height: 13px; }
.ratio-mark-3-4 { width: 12px; height: 16px; }
.ratio-mark-9-16 { width: 10px; height: 18px; }

/* Audio and the watermark: the whole row is the switch's label, so the tap
   target is the row (36px; 44px on phones). */
.customer-console label.generate-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin: -6px 0; color: var(--text-1); font-size: 14px; line-height: 20px; font-weight: 400; cursor: pointer; }
#generate-fields:disabled .generate-toggle, #generate-fields:disabled .generate-label { color: var(--text-3); cursor: not-allowed; }

/* Advanced settings: a row with what is set (种子随机 · 不回调) that opens
   to the seed and the callback endpoint side by side, then the watermark. */
.generate-advanced { margin: 0 -20px -20px; border-top: 1px solid var(--line-soft); }
.generate-advanced[open] { padding-bottom: 16px; }
.generate-advanced > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; color: var(--text-1); font: 500 14px/20px var(--font-sans); list-style: none; cursor: pointer; }
.generate-advanced > summary::-webkit-details-marker { display: none; }
.generate-advanced-sum { overflow: hidden; margin-left: auto; color: var(--text-3); font-size: 13px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.generate-advanced > summary .glyph { flex: none; color: var(--text-3); transition: transform var(--t-in) var(--ease); }
.generate-advanced[open] > summary .glyph { transform: rotate(180deg); }
.generate-advanced > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.generate-advanced-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 20px 0; }
.generate-advanced-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.generate-adv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.generate-adv-field .label, .generate-adv-field .help, .generate-adv-field .field-error { margin: 0; }
.generate-adv-field .select { width: 100%; }
.generate-advanced .generate-toggle { margin: 0; }

/* The JSON and code views: the request as light console code */
.generate-json, .generate-code { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 20px; }
.generate-json-help, .generate-code-help { margin: 0; }
.generate-json-help code { color: var(--text-1); font: 400 12px/16px var(--font-mono); }
.generate-json pre { min-height: 320px; max-height: 520px; margin: 0; padding: 12px 16px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-8); background: var(--code-light-bg); color: var(--text-1); font: 400 13px/20px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.generate-code-box .code-head { padding-left: 8px; }
.generate-code-tabs { display: flex; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.generate-code-tabs .choice-input:checked + .code-tab { color: var(--text-1); }
.generate-code-tabs .choice-input:checked + .code-tab::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; border-radius: 2px 2px 0 0; background: var(--violet-600); }
.generate-code-tabs .choice-input:focus-visible + .code-tab { outline: 2px solid var(--focus); outline-offset: -4px; }
.generate-code-box pre { min-height: 280px; max-height: 520px; white-space: pre; }

/* A copy control that just copied shows a check and 「已复制」 for 1.6
   seconds; the task ID's icon control says it over itself. */
.generate-copied { display: none; }
.generate-copy { position: relative; }
.generate-copy.is-copied { color: var(--success-fg); }
.generate-copy.is-copied > .glyph, .generate-copy.is-copied > .generate-copy-label { display: none; }
.generate-copy.is-copied::after { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; clip-path: path("M1.4 6.4L2.9 4.9L4.9 6.9L9.1 2.7L10.6 4.2L4.9 9.9Z"); }
#generate-code-copy.is-copied > .generate-copied { display: inline; order: 1; }
#generate-task-copy.is-copied > .generate-copied { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 2; display: block; padding: 2px 8px; border-radius: var(--r-6); background: var(--gray-900); color: #fff; font: 500 12px/16px var(--font-sans); white-space: nowrap; pointer-events: none; }

/* The API key of the request: the live API needs it, so it stays above the
   run bar, a password field that is never stored. */
.generate-key-field { padding: 16px 20px; border-top: 1px solid var(--line-soft); }
.generate-key-field .help, .generate-key-field .field-error { margin: 0; }

/* Run bar: the estimate on the left, reset and the one primary on the
   right; where the run stands is said right under it. */
.generate-foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 14px; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-12) var(--r-12); background: var(--gray-0); }
.generate-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.generate-estimate { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text-2); font-size: 13px; line-height: 20px; white-space: nowrap; }
.generate-estimate-amount { color: var(--text-1); font: 600 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.generate-estimate-info { color: var(--text-3); cursor: help; }
.generate-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.generate-actions > button[hidden] { display: none; }
.generate-run .glyph { margin-left: -2px; }
.generate-run-status { margin: 0; color: var(--text-1); font-size: 13px; line-height: 20px; }
.generate-run-status:empty { display: none; }
.generate-footnote { margin: 0; color: var(--text-3); font-size: 12px; line-height: 16px; }
.generate-footnote a { color: var(--violet-600); }

/* Output card: the title with the state (and the stage of a running task),
   the task ID with its copy control, then the 16:9 frame, the run's prompt
   and settings, its facts and actions. */
.generate-output-head { align-items: center; }
.generate-output-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.generate-task { display: flex; align-items: center; gap: 2px; min-width: 0; }
.generate-task-id { overflow: hidden; color: var(--text-2); font: 400 13px/20px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.generate-outbox { display: flex; flex-direction: column; gap: 16px; padding: 0 20px 20px; container-type: inline-size; }

/* The frame: the model's sample loop (a real Seedance 2.0 output, S-408,
   1280x720, muted, with its poster and its own pause button; clips.js)
   labelled as a sample with its length while idle; afterwards one gray tile
   that says where the run stands, with at most one action, and once the
   video is ready the video itself under the player's own controls (the
   player of shared/preview.js, filling the frame). A video that would not
   play says why with its ways out (新标签打开, 复制链接): the frame then
   drops its 16:9 and takes the room those words need. */
.generate-media { position: relative; display: grid; place-items: center; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-12); background: var(--ink-950); }
.generate-media.is-tile { background: var(--gray-100); }
.generate-sample { position: absolute; inset: 0; }
.generate-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.glyph.generate-glyph-pause { width: 18px; height: 18px; clip-path: path("M4.5 3H7.5V15H4.5ZM10.5 3H13.5V15H10.5Z"); }
.glyph.generate-glyph-play { width: 18px; height: 18px; clip-path: path("M5.25 2.25L15.75 9L5.25 15.75Z"); }
.generate-clip-btn { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-full); background: rgba(16, 22, 31, .64); box-shadow: none; color: #fff; cursor: pointer; transition: background-color var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.generate-clip-btn:hover { border: 0; background: rgba(16, 22, 31, .8); color: #fff; }
.generate-clip-btn:active { transform: scale(.98); }
.generate-clip-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.generate-clip-btn .generate-glyph-play, .generate-clip-btn.is-paused .generate-glyph-pause { display: none; }
.generate-clip-btn.is-paused .generate-glyph-play { display: inline-block; }
.generate-sample-length { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-6); background: rgba(16, 22, 31, .64); color: #fff; font: 500 12px/22px var(--font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.generate-sample-tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-6); background: rgba(16, 22, 31, .64); color: #fff; font: 500 12px/22px var(--font-sans); white-space: nowrap; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.generate-tile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px; overflow: hidden; text-align: center; }
.generate-tile.is-waiting::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: translateX(-100%); animation: generate-shimmer 1.6s var(--ease) infinite; }
.generate-tile > * { position: relative; }
@keyframes generate-shimmer { to { transform: translateX(100%); } }
.generate-tile-ic { display: none; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: var(--r-8); background: var(--gray-0); color: var(--gray-700); box-shadow: 0 0 0 1px var(--line), var(--e1); }
.generate-tile-ic.is-ok, .generate-tile-ic.is-danger, .generate-tile-ic.is-plain { display: grid; }
.generate-tile-ic::before { content: ""; width: 20px; height: 20px; background: currentColor; }
.generate-tile-ic.is-ok { color: var(--success-fg); }
.generate-tile-ic.is-ok::before { clip-path: path("M2.5 10.5L4.3 8.7L7.8 12.2L15.7 4.3L17.5 6.1L7.8 15.8Z"); }
.generate-tile-ic.is-danger { background: var(--danger-tint); color: var(--danger-fg); box-shadow: none; }
.generate-tile-ic.is-danger::before { clip-path: path("M10 1.5A8.5 8.5 0 1 1 10 18.5A8.5 8.5 0 1 1 10 1.5ZM10 3.2A6.8 6.8 0 1 0 10 16.8A6.8 6.8 0 1 0 10 3.2ZM9.1 5.5H10.9V11H9.1ZM9.1 12.6H10.9V14.4H9.1Z"); }
.generate-tile-ic.is-plain::before { clip-path: path("M10 1.5A8.5 8.5 0 1 1 10 18.5A8.5 8.5 0 1 1 10 1.5ZM10 3.2A6.8 6.8 0 0 0 4.9 14.3L14.3 4.9A6.8 6.8 0 0 0 10 3.2ZM15.5 6.1L6.1 15.5A6.8 6.8 0 0 0 15.5 6.1Z"); }
.generate-tile-t { color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.generate-tile-s { max-width: 36em; color: var(--text-2); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
.generate-tile .btn { margin-top: 12px; }
.generate-player.player { position: absolute; inset: 0; aspect-ratio: auto; border-radius: inherit; }
.generate-media:has(> .pv-player.is-grow:not([hidden])) { aspect-ratio: auto; }
.generate-player.player.is-grow { position: relative; inset: auto; width: 100%; }

/* The run's prompt and settings, its facts (charge, time taken, download
   until) and its actions; idle, the sample's charge. */
.generate-run-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.generate-run-prompt { margin: 0; color: var(--text-1); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.generate-run-text .cell-sub { margin: 0; }
#generate-result { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 0; }
#generate-result:empty { display: none; }
.generate-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--text-3); font-size: 13px; line-height: 20px; }
.generate-fact > span:last-child { margin-left: 6px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.generate-fact .money { white-space: nowrap; }
.generate-fact .money-tail { color: var(--text-3); }
.generate-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.generate-save .glyph { margin-left: -2px; }
.generate-open-task { display: inline-flex; align-items: center; gap: 6px; }
.generate-save-note { margin: -4px 0 0; color: var(--text-2); font-size: 13px; line-height: 20px; }

/* Error details of a failed task: the customer label of its code and the
   request ID; it folds. */
.generate-err { overflow: hidden; border-radius: var(--r-8); background: var(--gray-25); color: var(--text-2); font-size: 13px; line-height: 20px; }
.generate-err > summary { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; color: var(--text-1); font: 500 13px/20px var(--font-sans); list-style: none; cursor: pointer; }
.generate-err > summary::-webkit-details-marker { display: none; }
.generate-err > summary .glyph { color: var(--text-3); transition: transform var(--t-in) var(--ease); }
.generate-err[open] > summary .glyph { transform: rotate(180deg); }
.generate-err-row { display: flex; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line-soft); }
.generate-err-k { flex: none; width: 56px; color: var(--text-3); }
.generate-err-v { min-width: 0; color: var(--text-1); overflow-wrap: anywhere; }
.generate-err-mono { font: 400 13px/20px var(--font-mono); }
.generate-retention { margin: 0; color: var(--text-3); font-size: 12px; line-height: 18px; }
.generate-retention a { color: var(--violet-600); }

/* State badges carry the v9 marks: a dot while idle or queued, a pulsing
   violet dot while running, a check on success and a cross on failure. */
.generate-output-title .state-badge { gap: 6px; }
.generate-output-title .state-badge::before, .generate-runs .state-badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-dot); }
.generate-output-title .state-badge.state-run::before, .generate-runs .state-badge.state-run::before { background: var(--info-dot); animation: v9-pulse 1.6s var(--ease) infinite; }
.generate-output-title .state-badge:is(.state-ok, .state-fail)::before, .generate-runs .state-badge:is(.state-ok, .state-fail)::before { width: 10px; height: 10px; border-radius: 0; background: currentColor; }
.generate-output-title .state-badge.state-ok::before, .generate-runs .state-badge.state-ok::before { clip-path: path("M1.2 5.3L2.4 4.1L4.1 5.8L7.6 2.3L8.8 3.5L4.1 8.2Z"); }
.generate-output-title .state-badge.state-fail::before, .generate-runs .state-badge.state-fail::before { clip-path: path("M2.3 1.2L5 3.9L7.7 1.2L8.8 2.3L6.1 5L8.8 7.7L7.7 8.8L5 6.1L2.3 8.8L1.2 7.7L3.9 5L1.2 2.3Z"); }
.generate-runs .state-badge { gap: 6px; }

/* 最近运行: one 56px row per run (its edition glyph, model, age and
   settlement, its state), each a link to that task; the run of this page
   is ringed. */
.generate-recent-head { align-items: center; padding-bottom: 12px; }
.generate .btn.btn-link.generate-recent-all { font-size: 13px; line-height: 20px; }
.generate-runs { display: flex; flex-direction: column; }
.generate-runs-note { margin: 0; padding: 16px 20px 20px; border-top: 1px solid var(--line-soft); color: var(--text-3); font-size: 13px; line-height: 20px; }
.generate-run-row { display: block; color: inherit; text-decoration: none; border-top: 1px solid var(--line-soft); transition: background-color var(--t-hover) var(--ease); }
.generate-run-row:hover { background: var(--gray-50); color: inherit; text-decoration: none; }
.generate-run-row:last-child { border-radius: 0 0 var(--r-12) var(--r-12); }
.generate-run-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.generate-run-inner { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 20px; }
.generate-run-glyph { background: var(--gray-50); color: var(--gray-600); font: 500 12px/16px var(--font-sans); }
.generate-run-row:hover .generate-run-glyph { background: var(--gray-100); }
.generate-run-row.is-current .generate-run-glyph { box-shadow: 0 0 0 2px var(--gray-0), 0 0 0 4px var(--violet-600); }
.generate-run-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.generate-run-model { overflow: hidden; color: var(--text-1); font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.generate-run-sub { overflow: hidden; color: var(--text-3); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }

/* Session tools and the status line under the page: they serve a page that
   could not be shown (confirm again, or sign out); while the playground
   shows, the frame's account menu holds the sign-out and the run bar says
   where the run stands. */
.session-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.session-tools .btn { color: var(--text-2); }
#generate-page:not([hidden]) ~ .session-tools, #generate-page:not([hidden]) ~ #generate-status { display: none; }
#generate-status { margin: 8px 0 0; color: var(--text-2); font-size: 13px; line-height: 20px; }
#generate-status:empty { display: none; }

/* A content column under 960px stacks the input over the output. */
@container (max-width: 959px) {
  .generate-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 459px) {
  .generate-ratios { gap: 4px; }
  .ratio-box { width: 100%; max-width: 40px; }
  .generate-advanced-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: only the reset and run row of the playground is pinned to the
   bottom of the screen while the input card is in view; the footer box
   gives way (its children join the card) and the run's status and the
   reservation note stay in the flow under the row, so the pinned strip is
   one row high. Toggle rows and text links keep 44px tap targets. */
@media (max-width: 767px) {
  .generate-head { margin-bottom: 16px; }
  .generate-body { padding: 0 16px 16px; }
  .generate-input-head, .generate-output-head, .generate-recent-head { padding-right: 16px; padding-left: 16px; }
  .customer-console label.generate-toggle { min-height: 44px; margin: -10px 0; }
  .generate-advanced { margin: 0 -16px -16px; }
  .generate-advanced > summary { padding: 0 16px; }
  .generate-advanced-body { padding: 4px 16px 0; }
  .generate-advanced .generate-toggle { margin: 0; }
  .generate-key-field { padding: 16px; }
  .generate-foot { display: contents; }
  .generate-foot-row { position: sticky; bottom: env(safe-area-inset-bottom); z-index: 10; padding: 10px 16px; border-top: 1px solid var(--line-soft); background: var(--surface); }
  .generate-run-status { padding: 8px 16px 0; }
  .generate-footnote { padding: 8px 16px 14px; }
  .generate-outbox { padding: 0 16px 16px; }
  .generate-run-inner { padding: 8px 16px; }
  .generate .btn.btn-link { position: relative; }
  .generate .btn.btn-link::before { content: ""; position: absolute; inset: -12px -4px; }
  .generate-clip-btn { right: 8px; bottom: 8px; width: 44px; height: 44px; }
  .generate-sample-length { bottom: 8px; left: 8px; }
  .generate-sample-tag { top: 8px; left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .generate-clip-btn:active { transform: none; }
  .generate-tile.is-waiting::before, .generate-output-title .state-badge.state-run::before, .generate-runs .state-badge.state-run::before { animation: none; }
}