/* ==========================================================================
   Image Studio design layer (three-studio redesign, wave 2)
   Loaded after studio-kit.css. Page-scoped: every rule is under
   body.media-image (this page's body class) so it out-ranks the page's own
   inline <style> blocks without touching the shared template.

   Accent: the kit's image accent is #ff2ea6; this page keeps the template's
   established Image media accent #ec4899 so the kit and the shell agree.
   ========================================================================== */

body.media-image { --sk-accent: #ec4899; }

/* --- Kept for their ids and handlers, drawn by the kit instead ---------- */
body.media-image .model-selector-trigger,
body.media-image #modelSelectorModal,
body.media-image #modelSelectorModal.active,
body.media-image .is-proxied,
body.media-image .is-proxied-select,
body.media-image #generateSettings .price-display,
body.media-image #generateProgressCard > .spinner,
body.media-image #generateProgressCard > .progress-text,
body.media-image #generateProgressCard > .progress-subtitle,
body.media-image .mobile-panel-indicators { display: none !important; }

/* --- Labels, hints ------------------------------------------------------- */
body.media-image #generateTab .form-label,
body.media-image #generateSettings .form-label {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a1a1aa;
}
body.media-image .is-label-right { margin-left: auto; font: 500 10.5px var(--sk-mono); letter-spacing: 0; text-transform: none; color: #71717a; }
body.media-image .is-hint { margin-top: 6px; font-size: 11.5px; color: #71717a; }
body.media-image .is-hint-indent { margin-top: 2px; padding-left: 28px; }
body.media-image .is-note { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: #71717a; }
body.media-image #generateTab .form-group { margin-bottom: 18px; }

/* --- Panel 1 ------------------------------------------------------------- */
body.media-image #generateTab.active { display: flex; flex-direction: column; }
body.media-image .is-hero { margin: 2px 0 18px; }
body.media-image .is-hero[hidden], body.media-image .is-arrival[hidden] { display: none; }
body.media-image .is-hero .sk-reel { padding: 0; background: transparent; }
body.media-image .is-hero .sk-reel::before, body.media-image .is-hero .sk-reel::after { display: none; }
body.media-image .is-hero .sk-reel-track { padding-left: 0; width: 100%; }
body.media-image .is-hero .sk-reel-frame { flex: 1 1 0; min-width: 0; border-radius: 6px; }
body.media-image .is-hero-text { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
body.media-image .is-hero-title { font-size: 16px; font-weight: 700; color: #f4f4f5; }
body.media-image .is-hero-sub { font-size: 12px; color: #a1a1aa; }

body.media-image .is-arrival {
  display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 18px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--sk-accent) 40%, transparent);
  background: color-mix(in srgb, var(--sk-accent) 8%, transparent);
  font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #f4f4f5;
}
body.media-image .is-arrival i { color: var(--sk-accent); font-size: 15px; margin-top: 1px; }

body.media-image .is-prompt-field { padding: 12px 14px 12px; }
body.media-image .is-prompt-field .sk-field-input { min-height: 72px; font-size: 14px; }
body.media-image .sk-field.is-prompt-field .form-textarea { border: 0; background: transparent; padding: 0; width: 100%; }

body.media-image .is-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px 8px; }
body.media-image .is-style-grid .sk-style-tile-name { font-size: 11px; }

body.media-image #aiEnhanceGroup .form-label {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: #f4f4f5; margin-bottom: 0;
}
body.media-image #enablePromptExpansion { width: 18px !important; height: 18px; accent-color: var(--sk-accent) !important; margin: 0 2px 0 0; }

body.media-image .is-model-row .sk-model-row-thumb { width: 64px; }
body.media-image .is-fallback-slot:empty { display: none; }
body.media-image .is-fallback-slot { margin-top: 10px; }
body.media-image .is-arrival-generate:empty { display: none; }
body.media-image .is-arrival-generate { margin: 0 0 18px; }

/* B: arrival order (prompt, model, Generate, then style and enhance) */
body.media-image.is-state-b #generateTab > #isArrival { order: 0; }
body.media-image.is-state-b #generateTab > #promptGroup { order: 1; }
body.media-image.is-state-b #generateTab > #modelSelectContainer { order: 2; }
body.media-image.is-state-b #generateTab > #isArrivalGenerate { order: 3; }
body.media-image.is-state-b #generateTab > #imageStyleGroup { order: 4; }
body.media-image.is-state-b #generateTab > #aiEnhanceGroup { order: 5; }
body.media-image.is-state-b #promptInput { min-height: 64px; }
body.media-image.is-state-b .is-prompt-field { border-color: color-mix(in srgb, var(--sk-accent) 55%, transparent); }

/* --- Panel 2: settings ---------------------------------------------------- */
body.media-image #generateSettings { display: flex; flex-direction: column; min-height: 100%; }
body.media-image .is-settings { display: flex; flex-direction: column; gap: 18px; padding-bottom: 16px; }
body.media-image.is-state-b .is-settings,
body.media-image.is-state-b #modelOptions { display: none; }
body.media-image .is-sec { min-width: 0; }
body.media-image .is-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
body.media-image .is-pair.is-single { grid-template-columns: minmax(0, 1fr); }
body.media-image .is-settings .sk-aspect-row.is-auto { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 5px; }
body.media-image .is-settings .sk-aspect-row.is-sizes { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
body.media-image .is-settings .sk-aspect { padding: 7px 2px 5px; }
body.media-image .is-settings .sk-chip { min-height: 38px; }
body.media-image .is-settings .sk-seg-opt.is-disabled { opacity: .4; cursor: not-allowed; }
body.media-image .is-seed { padding: 9px 12px; min-height: 40px; }
body.media-image .is-seed .sk-field-input { font-family: var(--sk-mono); font-size: 13px; }

body.media-image .is-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; border-radius: 10px; }
body.media-image .is-ref-grid.is-over { outline: 2px dashed var(--sk-accent); outline-offset: 3px; }
body.media-image .is-ref {
  position: relative; aspect-ratio: 1; min-width: 0; border-radius: 8px; overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .12); background: transparent; padding: 0; margin: 0;
}
body.media-image .is-ref.is-filled { border: 1.5px solid var(--sk-accent); }
body.media-image .is-ref.is-beyond { opacity: .4; border-color: rgba(255, 255, 255, .15); }
body.media-image .is-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.media-image .is-ref.is-add {
  display: grid; place-items: center; cursor: pointer; color: var(--sk-accent); font-size: 18px;
  border: 1.5px dashed color-mix(in srgb, var(--sk-accent) 60%, transparent); background: color-mix(in srgb, var(--sk-accent) 6%, transparent);
}
body.media-image .is-ref-tag { position: absolute; left: 3px; bottom: 3px; padding: 1px 4px; border-radius: 3px; background: rgba(10, 10, 15, .85); font: 700 8.5px var(--sk-mono); color: #f4f4f5; }
body.media-image .is-ref-remove {
  position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(10, 10, 15, .85); color: #f4f4f5; font-size: 12px; cursor: pointer;
}
body.media-image .is-ref-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* UGC character list in the reference box (2026-10-06). */
body.media-image .is-ugc-menu { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 6px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; max-height: 260px; overflow-y: auto; }
body.media-image .is-ugc-item { display: flex; align-items: center; gap: 10px; min-height: 44px; width: 100%; padding: 4px 8px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: #f4f4f5; cursor: pointer; text-align: left; font-size: 13px; }
body.media-image .is-ugc-item:hover, body.media-image .is-ugc-item:focus-visible { border-color: #06b6d4; }
body.media-image .is-ugc-item img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
body.media-image .is-ugc-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cost line + pinned Generate */
body.media-image .is-gen-foot {
  position: sticky; bottom: 0; z-index: 2; margin-top: auto; padding: 14px 0 2px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, rgba(12, 12, 18, 0) 0, #0c0c12 14px);
}
body.media-image #isCreditState:empty, body.media-image #isCost:empty { display: none; }
body.media-image .is-free-meter { height: 4px; border-radius: 2px; background: #1f1f27; overflow: hidden; margin-top: -4px; }
body.media-image .is-free-meter > span { display: block; height: 100%; background: #06b6d4; }
body.media-image .sk-cost.is-free .sk-cost-value { color: #06b6d4; }
body.media-image #generateBtn.btn-generate {
  height: 50px; min-height: 50px; padding: 0 16px; gap: 9px; border-radius: 11px;
  background: var(--sk-accent) !important; color: #0a0a0f; font-size: 14.5px; font-weight: 700;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--sk-accent) 22%, transparent); animation: none;
}
body.media-image #generateBtn.btn-generate:hover:not(:disabled) { transform: none; filter: brightness(1.08); }
body.media-image #generateBtn.btn-generate i { font-size: 17px; }
body.media-image #generateBtn .sk-generate-cost { font: 700 11.5px var(--sk-mono); padding: 2px 7px; border-radius: 5px; background: rgba(10, 10, 15, .18); }
body.media-image #generateBtn.btn-generate:disabled,
body.media-image #generateBtn.btn-generate.processing { background: #1c1c24 !important; color: #71717a; box-shadow: none; opacity: 1; }
body.media-image #generateBtn span { font-variant-numeric: tabular-nums; }
body.media-image .is-spin { animation: is-spin 1s linear infinite; display: inline-block; }
@keyframes is-spin { to { transform: rotate(360deg); } }

/* B: folded summary */
body.media-image .is-fold[hidden] { display: none; }
body.media-image .is-fold-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08); background: #13131b;
}
body.media-image .is-fold-card .sk-aspect { flex: none; pointer-events: none; }
body.media-image .is-fold-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
body.media-image .is-fold-main { font-size: 13px; font-weight: 600; color: #f4f4f5; }
body.media-image .is-fold-sub { font-size: 11.5px; color: #71717a; }

/* --- Panel 3 -------------------------------------------------------------- */
body.media-image .panel-results .step-header { display: flex; align-items: center; gap: .5rem; }
body.media-image .is-results-meta { margin-left: auto; font: 500 10.5px var(--sk-mono); color: #71717a; }
body.media-image .results-idle { padding: 2rem 0; }
body.media-image .results-idle .sk-empty { width: 100%; }
body.media-image .is-state:empty { display: none; }
body.media-image .is-state { margin-bottom: 12px; }
body.media-image #generateProgressCard { background: transparent; border: 0; padding: 0; margin: 0; text-align: left; }
body.media-image #generateProgressCard.active { display: block; }

body.media-image .is-batches[hidden] { display: none; }
body.media-image .is-batches { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
body.media-image .is-batches-label { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #71717a; flex: none; }
body.media-image .is-batches-row { display: flex; gap: 6px; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
body.media-image .is-batch {
  display: flex; align-items: center; gap: 3px; flex: none; padding: 3px 7px 3px 3px; margin: 0; cursor: pointer;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); background: #13131b;
}
body.media-image .is-batch img { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; display: block; }
body.media-image .is-batch.is-current { border-color: var(--sk-accent); background: color-mix(in srgb, var(--sk-accent) 10%, transparent); }
body.media-image .is-batch-time { margin-left: 3px; font: 600 10px var(--sk-mono); color: #a1a1aa; }

body.media-image .result-card.is-result { background: transparent; border: 0; padding: 0; margin: 0; }
body.media-image .is-result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
body.media-image .is-result-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #f4f4f5; }
body.media-image .is-result-title i { color: var(--sk-accent); }
body.media-image .is-result-charge { margin-left: auto; font: 500 11px var(--sk-mono); color: #a1a1aa; }
body.media-image .is-result-charge b { color: var(--sk-accent); }
body.media-image .is-result-prompt { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: #f4f4f5; }
body.media-image .is-result-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font: 500 10.5px var(--sk-mono); color: #71717a; }
body.media-image .is-result-meta .is-strong { color: #a1a1aa; }
body.media-image .is-result-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
body.media-image .is-result-bar .is-bar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: auto; height: 34px; padding: 0 12px; margin: 0;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #f4f4f5;
  font-size: 12.5px; font-weight: 600; opacity: 1; box-shadow: none; min-height: 0;
}
body.media-image .is-result-bar .is-bar-btn i { font-size: 15px; color: #a1a1aa; }
body.media-image .is-result-bar .is-bar-accent { border-color: var(--sk-accent); }
body.media-image .is-result-bar .is-bar-accent i { color: var(--sk-accent); }
body.media-image .is-result-bar .is-bar-saved { border-color: rgba(6, 182, 212, .5); color: #06b6d4; }
body.media-image .is-result-bar .is-bar-saved i { color: #06b6d4; }

body.media-image .is-result .result-images { gap: 10px; margin-top: 0; }
body.media-image .is-result .result-image { position: relative; border-radius: 10px; overflow: hidden; background: #08080c; border: 1px solid rgba(255, 255, 255, .08); }
body.media-image .is-result .result-image img { width: 100%; height: auto; aspect-ratio: var(--is-ar, 1/1); object-fit: contain; display: block; background: #08080c; }
body.media-image .is-result-num { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 1px 6px; border-radius: 4px; background: rgba(10, 10, 15, .8); font: 700 10px var(--sk-mono); color: #f4f4f5; }
body.media-image .is-result-actions {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; display: flex; flex-wrap: wrap-reverse; gap: 5px; align-items: center;
}
body.media-image .is-result-actions .aw-btn,
body.media-image .is-result-actions .is-act {
  flex: none; width: 32px; height: 32px; min-width: 0; padding: 0; margin: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 15, .82); border: 1px solid rgba(255, 255, 255, .14); color: #f4f4f5; font-size: 14px;
}
body.media-image .is-result-actions .aw-btn-save { border-color: rgba(255, 255, 255, .14); background: rgba(10, 10, 15, .82); }
body.media-image .is-result-actions .aw-btn-save.is-saved { border-color: rgba(6, 182, 212, .6); color: #06b6d4; }
body.media-image .is-result-actions .is-act-feed { border-color: var(--sk-accent); color: var(--sk-accent); }
body.media-image .is-result-actions .is-act-expand { margin-left: auto; }

body.media-image .is-built-from {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08); background: #13131b;
}
body.media-image .is-built-label { font: 600 9.5px var(--sk-mono); letter-spacing: .08em; text-transform: uppercase; color: #71717a; flex: none; }
body.media-image .is-built-refs { display: flex; gap: 4px; flex: none; }
body.media-image .is-built-refs img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; border: 1px solid var(--sk-accent); display: block; }
body.media-image .is-built-arrow { color: var(--sk-accent); font-size: 16px; flex: none; }
body.media-image .is-built-text { font-size: 12px; color: #a1a1aa; min-width: 0; }

/* G1 backup offer */
body.media-image .is-backup {
  display: flex; align-items: center; gap: 12px; margin-left: 50px; padding: 8px 10px 8px 8px; border-radius: 10px;
  border: 1px solid var(--sk-accent); background: color-mix(in srgb, var(--sk-accent) 8%, transparent);
}
body.media-image .is-backup-thumb { position: relative; flex: none; width: 58px; aspect-ratio: 16/11; border-radius: 6px; overflow: hidden; }
body.media-image .is-backup-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
body.media-image .is-backup-name { font-size: 13.5px; font-weight: 600; color: #f4f4f5; }
body.media-image .is-backup-sub { font-size: 11px; color: #71717a; }
body.media-image .is-backup-tag { flex: none; padding: 2px 6px; border-radius: 4px; background: var(--sk-accent); font: 700 9px var(--sk-mono); color: #0a0a0f; }

/* --- C2: model picker ------------------------------------------------------ */
body.media-image .is-picker[hidden] { display: none; }
body.media-image .is-picker {
  position: fixed; z-index: 290; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem;
  box-sizing: border-box;
}
body.media-image .is-picker-main, body.media-image .is-picker-side {
  display: flex; flex-direction: column; min-height: 0; border-radius: 12px; overflow: hidden;
  background: #0c0c12; border: 1px solid color-mix(in srgb, var(--sk-accent) 45%, transparent);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
body.media-image .is-picker-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; }
body.media-image .is-picker-title { font-size: 16px; font-weight: 700; color: #f4f4f5; }
body.media-image .is-picker-count { font: 500 11px var(--sk-mono); color: #71717a; }
body.media-image .is-picker-close {
  margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #f4f4f5; font-size: 16px;
}
body.media-image .is-picker-tabs { padding: 0 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.media-image .is-picker-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; }
body.media-image .is-picker-grid { --sk-tile-min: 118px; margin-bottom: 18px; }
/* Hearts are SHOWN (2026-10-06). The 09-24 redesign hid them (and moved the
   badges into their corner) while they did nothing; model favorites shipped
   in #837, so the kit defaults apply again: heart top-right, badges stop 30 px
   short of it. */
body.media-image .is-picker-side-head { display: flex; align-items: center; gap: 8px; padding: 16px 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.media-image .is-picker-side-name { font-size: 15px; font-weight: 700; color: #f4f4f5; }
body.media-image .is-picker-detail { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; }
body.media-image .is-picker-foot { padding: 12px 18px 18px; }
body.media-image .is-picker-extra { display: flex; flex-direction: column; gap: 10px; }
body.media-image .is-picker-cap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a1a1aa; }
body.media-image .is-picker-cap i { color: var(--sk-accent); }
body.media-image .is-picker-cap b { font: 600 12px var(--sk-mono); color: #f4f4f5; }
body.media-image .is-picker-desc { margin: 0; font-size: 12px; line-height: 1.5; color: #a1a1aa; }
body.media-image.is-picker-open { overflow: hidden; }

/* --- F2: lightbox ------------------------------------------------------------ */
body.media-image .image-modal { background: rgba(10, 10, 15, .94); }
body.media-image .image-modal-content { max-width: 92vw; max-height: 92vh; border-radius: 12px; overflow: hidden; background: #0c0c12; border: 1px solid rgba(255, 255, 255, .08); }
body.media-image .image-modal-close { top: 12px; right: 12px; z-index: 3; background: rgba(10, 10, 15, .8); border: 1px solid rgba(255, 255, 255, .14); }
body.media-image .is-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; background: #050507; }
body.media-image .image-modal-player { border-radius: 0; background: transparent; }
body.media-image .is-lb-count { position: absolute; left: 14px; top: 12px; z-index: 2; font: 600 11px var(--sk-mono); color: #a1a1aa; }
body.media-image .is-lb-nav {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; padding: 0; display: none; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 10, 15, .8); color: #f4f4f5; font-size: 20px;
}
body.media-image .is-lb-prev { left: 14px; }
body.media-image .is-lb-next { right: 14px; }
body.media-image .image-modal-info { background: #0c0c12; border-radius: 0; }
body.media-image .image-modal-prompt { color: #f4f4f5; font-size: 14px; }
body.media-image .is-lb-title, body.media-image .is-lb-label, body.media-image .is-lb-extra:empty { display: none; }

body.media-image .image-modal.is-lb-rich .image-modal-content {
  width: 92vw; height: 92vh; display: grid; grid-template-columns: minmax(0, 1fr) 360px;
}
body.media-image .image-modal.is-lb-rich .is-lb-nav { display: grid; }
body.media-image .image-modal.is-lb-rich .image-modal-player { max-width: 100%; max-height: 100%; }
body.media-image .image-modal.is-lb-rich .image-modal-player img { max-height: 88vh; width: auto; max-width: 100%; margin: 0 auto; }
body.media-image .image-modal.is-lb-rich .image-modal-info {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; overflow-y: auto; border-left: 1px solid rgba(255, 255, 255, .08);
}
body.media-image .image-modal.is-lb-rich .image-modal-close { right: 20px; top: 18px; }
body.media-image .image-modal.is-lb-rich .is-lb-title { display: block; font-size: 16px; font-weight: 700; color: #f4f4f5; padding-right: 40px; }
body.media-image .image-modal.is-lb-rich .is-lb-label { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #71717a; }
body.media-image .image-modal.is-lb-rich .image-modal-prompt { margin-bottom: 4px; }
body.media-image .image-modal.is-lb-rich .image-modal-meta { display: none; }
body.media-image .is-lb-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body.media-image .is-lb-charge { display: flex; justify-content: space-between; font: 500 11px var(--sk-mono); color: #a1a1aa; }
body.media-image .is-lb-charge b { color: var(--sk-accent); }
body.media-image .is-lb-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 12px; }
body.media-image .is-lb-actions .aw-btn,
body.media-image .is-lb-btn {
  width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0 12px;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #f4f4f5; font-size: 13px; font-weight: 600; cursor: pointer;
}
body.media-image .is-lb-actions .aw-btn-save.is-saved { border-color: rgba(6, 182, 212, .6); color: #06b6d4; }
body.media-image .is-lb-feed { border-color: var(--sk-accent); }
body.media-image .is-lb-feed i { color: var(--sk-accent); }

/* --- H: mobile jump bar ------------------------------------------------------ */
body.media-image .is-jump { display: none; }

/* --- Breakpoints (the template's: one column below 1025, stacked below 769) --- */
@media (max-width: 1024px) {
  body.media-image .is-picker { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; }
  body.media-image .is-picker-main { border-radius: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: none; }
  body.media-image .is-picker-side { border-radius: 0; border: 0; box-shadow: none; max-height: 48vh; }
  body.media-image .is-picker-side .sk-model-detail-media { display: none; }
  body.media-image .image-modal.is-lb-rich .image-modal-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  body.media-image .image-modal.is-lb-rich .image-modal-info { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); max-height: 46vh; }
}

@media (max-width: 768px) {
  /* Stack every panel (prompt first) instead of one-panel-at-a-time. */
  body.media-image .workflow-container .panel-col { display: flex; }
  body.media-image .is-jump {
    position: sticky; top: 0; z-index: 50; display: flex; gap: 6px; margin: 0 0 10px; padding: 6px; border-radius: 12px;
    background: #0c0c12; border: 1px solid rgba(255, 255, 255, .08);
  }
  body.media-image .is-jump button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 44px; margin: 0; padding: 0 8px;
    border-radius: 8px; border: 1px solid transparent; background: transparent; color: #a1a1aa; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  body.media-image .is-jump button:first-child { color: #f4f4f5; border-color: color-mix(in srgb, var(--sk-accent) 50%, transparent); }
  body.media-image .workflow-container .panel-col { scroll-margin-top: 110px; }
  /* 44px phone floor (WCAG 2.5.8 / mobile charter) for the two kit controls this page
     renders below 769px. The kit sizes .sk-btn at 34px and .sk-seg at --sk-seg-h: 34px by
     design; this is a page-side override, not a kit change - see PR #702 notes. */
  body.media-image .is-ref-btns > .sk-btn { min-height: 44px; }
  body.media-image .sk-seg { --sk-seg-h: 44px; }
  body.media-image .is-style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.media-image .is-pair { grid-template-columns: minmax(0, 1fr); }
  body.media-image .is-settings .sk-aspect-row.is-auto { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.media-image .is-gen-foot { position: static; }
  body.media-image .is-backup { margin-left: 0; }
  body.media-image .is-built-text { font-size: 11px; }
  body.media-image .image-modal.is-lb-rich .image-modal-content { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  body.media-image .is-lb-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Results Edit menu (2026-10-07): fixed on <body> because .result-image clips overflow. */
body.media-image .is-result-actions .is-act-edit { border-color: rgba(6, 182, 212, .6); color: #06b6d4; }
body.media-image .is-result-actions .is-act-edit[aria-expanded="true"] { background: #06b6d4; color: #0a0a0f; }
.is-edit-menu {
  position: fixed; z-index: 10050; min-width: 220px; padding: 6px; border-radius: 12px;
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
  background: #13131b; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  font-family: Inter, system-ui, sans-serif;
}
.is-edit-menu-item {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px;
  color: #f4f4f5; font-size: 14px; font-weight: 600; text-decoration: none;
}
.is-edit-menu-item i { font-size: 17px; color: #06b6d4; width: 18px; text-align: center; }
.is-edit-menu-item:hover, .is-edit-menu-item:focus-visible { background: rgba(6, 182, 212, .14); outline: none; }
.is-edit-menu-sep { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, .1); }