/* Runtime states share the accepted dark creative workspace. */
:root { color-scheme: dark; }
[hidden] { display: none !important; }
button:disabled { cursor: default; }
.app-shell, .workspace, .composer, .task-copy { min-width: 0; }
.preview-label[data-mode="mock"] { color: #dcc190; }
.preview-label[data-mode="live"] { color: #a4d3cc; }
.date-line .text-button { font-size: 11px; }
.list-feedback { color: #c8c8c8; font-size: 12px; line-height: 1.8; margin: 12px 0; overflow-wrap: anywhere; }
.load-more { display: block; min-height: 40px; padding: 8px 20px; margin: 0 auto 20px; background: #282828; border-radius: 8px; color: #ddd; font-size: 12px; }
.load-more:hover { background: #343434; }
.task-prompt, .failure-note, #preview-prompt { overflow-wrap: anywhere; }
.task-bottom { flex-wrap: wrap; gap: 10px 14px; }
.task-action:disabled { color: #888; opacity: .7; }
.failure-note { line-height: 1.8; }
.status-visual > p { text-align: center; padding: 0 14px; line-height: 1.7; }
.poster-pending { background: #272727; }
.poster-placeholder { color: #bcbcbc; display: grid; justify-items: center; gap: 8px; }
.poster-placeholder .icon { width: 28px; height: 28px; }
.poster-placeholder small { font-size: 11px; }
.mock-mark { position: absolute; left: 8px; top: 8px; padding: 3px 6px; color: #eee; background: #111b; border-radius: 3px; font-size: 10px; }
.reference-item.is-uploading .reference-figure img { opacity: .55; }
.upload-state { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; background: #141414d9; color: #ddd; text-align: center; pointer-events: none; font-size: 10px; }
.upload-state.upload-failed { color: #eba6a0; }
.upload-retry { position: absolute; inset: 16px 3px auto; min-height: 23px; padding: 3px; background: #393939ef; border-radius: 3px; color: white; font-size: 10px; }
.audio-reference .upload-retry { inset: auto 25px 1px auto; min-height: 19px; padding: 1px 6px; }
.reference-add:disabled { opacity: .4; }
.form-feedback.is-information { color: #b4d8e9; }
.pending-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 12px; border-bottom: 1px solid #3a3a3a; margin-bottom: 12px; }
.pending-notice p { color: #dcc190; font-size: 12px; line-height: 1.8; margin: 0; }
.pending-notice button { flex: 0 0 auto; min-height: 36px; border-radius: 6px; padding: 5px 9px; background: #3b3831; color: #ead9b6; font-size: 12px; }
.dock-note > span { padding: 0; }
.dock-note > #mode-note { display: inline; }
.preview-media { aspect-ratio: auto; min-height: 160px; background: #090909; }
.preview-media video { display: block; width: 100%; max-height: 60dvh; background: #090909; }
.preview-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.dialog-footer { flex-wrap: wrap; gap: 14px; }
.preview-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.preview-actions .text-button { font-size: 12px; }
#playback-feedback { color: #eba6a0; font-size: 12px; line-height: 1.8; }
.about-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.about-actions .generate-button { margin: 0 0 0 auto; }
.about-actions .generate-button { color: #282828; background: #f0f0f0; }
.about-actions .generate-button:hover { background: #ffffff; }
.access-dialog { width: min(370px,calc(100vw - 32px)); padding: 28px; background: #232323; color: #eee; border: 1px solid #414141; border-radius: 16px; }
.access-dialog::backdrop { background: #080808e6; }
.access-dialog h2 { font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.access-dialog p { color: #b6b6b6; font-size: 13px; line-height: 1.8; margin: 0 0 22px; }
.access-dialog label { display: block; color: #ccc; font-size: 12px; margin-bottom: 8px; }
.access-dialog input { width: 100%; min-height: 42px; background: #191919; border: 1px solid #505050; color: #fff; border-radius: 7px; padding: 9px 11px; font: inherit; }
.access-dialog #access-feedback { margin: 12px 0 0; color: #eba6a0; }
.access-submit { display: block; width: 100%; min-height: 42px; padding: 10px 14px; color: #252525; background: #eee; border-radius: 7px; font-size: 13px; margin-top: 22px; }
.access-submit:hover { background: white; }
.access-submit:disabled { color: #aaa; background: #444; }
@media(max-width:560px) {
  .list-toolbar { gap: 6px; align-items: center; }
  .filters { min-width: 0; gap: 0; }
  .filter { padding: 8px 7px; font-size: 12px; gap: 3px; }
  .filter span { font-size: 10px; }
  .sort-button { min-width: 28px; padding: 7px 4px; }
  .sort-button .icon { flex: 0 0 16px; width: 16px; height: 16px; }
  .sort-button span { display: none; }
  .task-bottom { gap: 10px 14px; }
  .pending-notice { align-items: flex-start; }
  .pending-notice p { font-size: 11px; }
  .pending-notice button { max-width: 84px; font-size: 11px; }
  .preview-actions { margin-left: 0; gap: 22px; }
  .dock-note { overflow-wrap: anywhere; padding: 0 6px; }
  .access-dialog { padding: 24px; }
}