/* Compact creation: image choices, theme, settings, cost, action. */
.ic-quick-stage { position:relative;width:100%;height:100%;min-height:0;overflow:auto;background:var(--paper-bg);padding:18px var(--hw-page-gutter) 36px;box-sizing:border-box; }
.ic-stage-wrap:has(.ic-quick-stage[style*="block"]) .ic-canvas-stage { display:none; }
.ic-quick-stage > .qc-head,.ic-quick-stage > .qc-wrap,.ic-quick-stage > .qc-results { width:100%;margin-left:auto;margin-right:auto; }
.qc-head { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px; }
.qc-head h1 { margin:0;font:700 24px/1.3 var(--font-serif); }
.qc-lede { margin:3px 0 0;font-size:12px;color:var(--ink-muted); }
.qc-head-actions { display:flex;gap:6px;flex-shrink:0; }
.qc-head-actions .qc-picker { min-height:36px;padding:6px 10px;font-size:12px; }
.qc-wrap { padding:0;color:var(--ink-body); }
.qc-form fieldset { display:grid;gap:8px;min-width:0;border:0;padding:0;margin:0; }
.qc-picker { font:inherit;text-align:left;cursor:pointer;border-radius:6px;border:1px solid var(--line-strong);background:var(--paper-card);color:inherit;min-height:44px;padding:8px 12px; }
.qc-picker:hover { border-color:var(--vermilion); }
.qc-pickers { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:4px; }
.qc-resource-picker { display:flex;align-items:center;gap:10px;min-width:0;padding:8px; }
.qc-resource-picker img,.qc-picker-empty { display:block;flex:0 0 72px;width:72px;height:72px;border-radius:4px;object-fit:contain;background:var(--paper-inset); }
.qc-picker-empty { display:grid;place-items:center;font-size:22px;font-weight:400;color:var(--ink-muted); }
.qc-picker-copy { display:grid;gap:4px;min-width:0; }
.qc-picker-copy strong { font-size:13px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.qc-picker-kind,.qc-picker-hint { font-size:11px;line-height:1.3;color:var(--ink-muted); }
.qc-picker-kind { color:var(--vermilion); }
.qc-form label { font-size:12px;font-weight:600; }
.qc-form input,.qc-form select,.qc-form textarea { box-sizing:border-box;width:100%;min-width:0;min-height:40px;padding:8px 10px;font:inherit;font-size:13px;color:inherit;background:var(--paper-card);border:1px solid var(--line-strong);border-radius:6px; }
.qc-form textarea { height:76px;min-height:76px;resize:vertical; }
.qc-settings { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:2px; }
.qc-settings label { display:grid;gap:5px;min-width:0; }
.qc-estimate { margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--ink-muted); }
.qc-estimate-note { display:block; }
.qc-status { margin-top:5px;color:var(--ink-muted);font-size:12px;line-height:1.5; }
.qc-run-row { display:flex;gap:10px;margin-top:10px; }
.qc-run { font:inherit;font-size:13px;font-weight:600;min-height:44px;padding:8px 24px;border:1px solid var(--vermilion);border-radius:6px;background:var(--vermilion);color:white;cursor:pointer; }
.qc-run:disabled { opacity:.65;cursor:progress; }
.qc-picker:focus-visible,.qc-run:focus-visible,.qc-form input:focus-visible,.qc-form select:focus-visible,.qc-form textarea:focus-visible { outline:2px solid var(--vermilion);outline-offset:2px; }
.qc-inline { display:flex;gap:8px;flex-wrap:wrap; }
.qc-results { margin-top:22px; }
.qc-results h2 { margin:0;font:700 18px var(--font-serif); }
.qc-results > .qc-estimate { margin-top:5px; }
.qc-results-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:12px; }
.qc-result { margin:0;overflow:hidden;border:1px solid var(--line-soft);border-radius:6px;background:var(--paper-card); }
.qc-result img { display:block;width:100%;height:auto;object-fit:contain; }
.qc-result figcaption { display:flex;flex-wrap:wrap;gap:6px;padding:8px; }
.qc-result-title { width:100%;font-size:12px; }
.qc-result .qc-picker { font-size:12px;min-height:36px;padding:5px 8px; }
.qc-empty { color:var(--ink-muted);font-size:12px;line-height:1.6;margin-top:8px; }
.qc-entry-bar { display:flex;align-items:center;gap:14px;padding:8px var(--hw-page-gutter);background:var(--paper-card);border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--ink-muted);flex-shrink:0;box-sizing:border-box; }
.qc-mode-switch { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.qc-mode-switch .btn { min-height:40px;padding:6px 14px; }
.qc-mode-history { margin-left:auto;flex-shrink:0;min-height:40px;padding:6px 14px;white-space:nowrap; }
.qc-advanced-cost { font-size:12px;line-height:1.6;color:var(--ink-body);padding:8px 0;margin:0; }
.hw-product-demo-tools > summary { font-size:11px;padding:5px 24px;color:var(--ink-muted);background:var(--paper-inset); }
@media(max-width:720px) {
 .ic-quick-stage { padding:14px var(--hw-page-gutter) 28px; }
 .qc-head { flex-wrap:wrap;gap:8px; }
 .qc-head h1 { font-size:22px; }
 .qc-pickers { gap:8px; }
 .qc-resource-picker { flex-direction:column;align-items:stretch;gap:6px; }
 .qc-resource-picker img,.qc-picker-empty { width:100%;height:72px;flex-basis:auto; }
 .qc-picker-copy { gap:3px; }
 .qc-picker-copy strong { font-size:12px; }
 .qc-picker-hint { display:none; }
 .qc-settings { gap:8px; }
 .qc-settings input,.qc-settings select { min-height:44px;padding:7px 8px; }
 .qc-run { width:100%; }
 .qc-results-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
 .qc-entry-bar span { display:none; }
 .qc-mode-switch .btn { min-height:44px; }
 .qc-mode-history { min-height:44px; }
}
@media(max-width:390px) {
 .qc-entry-bar { flex-wrap:nowrap;gap:6px;padding:6px var(--hw-page-gutter); }
 .qc-mode-switch { flex-wrap:nowrap;gap:6px; }
 .qc-mode-switch .btn { padding:6px 9px;min-height:44px;font-size:12px; }
 .qc-mode-history { margin-left:auto;padding:6px 10px;min-height:44px;font-size:12px; }
}
@media(max-width:320px) {
 .qc-entry-bar { padding:6px var(--hw-page-gutter);gap:4px; }
 .qc-mode-switch { gap:4px; }
 .qc-mode-switch .btn { padding:6px 7px;font-size:11px;min-height:44px; }
 .qc-mode-history { padding:6px 8px;font-size:11px;min-height:44px; }
}
@media(max-width:480px) { .qc-results-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .qc-picker,.qc-run { transition:none; } }

/* ==================== Phase 3b-1: Make Image & Mode Bar ==================== */
@media(max-width:768px) {
  #batch-open-canvas { display:none !important; }
}

/* Mobile Canvas Prompt Banner */
.canvas-mobile-prompt-banner { position:sticky;top:0;left:0;right:0;z-index:100;background:var(--paper-card);border-bottom:1px solid var(--line-strong);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 2px 8px rgba(43,38,35,0.06); }
.canvas-mobile-prompt-banner p { margin:0;font-size:13px;font-weight:600;color:var(--ink-main); }

/* Batch Mode Placeholder */
.batch-stage-placeholder { display:flex;align-items:center;justify-content:center;min-height:50vh;padding:32px 16px; }
.batch-stage-card { width:min(100%,480px);background:var(--paper-card);border:1px solid var(--line-strong);border-radius:10px;padding:36px 24px;text-align:center;box-shadow:0 4px 14px rgba(43,38,35,0.04); }
.batch-stage-card h2 { margin:0 0 10px;font:700 20px/1.3 var(--font-serif);color:var(--ink-main); }
.batch-stage-desc { margin:0 0 24px;font-size:13px;line-height:1.6;color:var(--ink-muted); }

/* Make Image Container */
.make-image-container { width:100%;margin:0 auto;box-sizing:border-box; }
.make-image-head { margin-bottom:16px; }
.make-image-head h1 { margin:0 0 4px;font:700 24px/1.3 var(--font-serif);color:var(--ink-main); }
.make-image-lede { margin:0;font-size:13px;line-height:1.5;color:var(--ink-muted); }

.make-image-form { box-sizing:border-box; }
.make-image-main-grid { display:flex;flex-direction:column;gap:14px;background:var(--paper-card);border:1px solid var(--line-strong);border-radius:10px;padding:18px;box-shadow:0 2px 10px rgba(43,38,35,0.03);box-sizing:border-box; }

/* Top Row: Output Mode & Fusion Toggle in ONE line (both left-aligned) */
.make-image-top-row { display:flex;justify-content:flex-start;align-items:center;gap:18px;flex-wrap:wrap; }
.make-image-inline-group { display:flex;align-items:center;gap:10px; }
.make-image-inline-group .make-image-field-label { margin:0;white-space:nowrap; }

/* Pickers Row */
.make-image-pickers-row { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.make-image-pickers-row.has-style2 { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.make-image-picker-card { position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper-bg);border:1px solid var(--line-soft);border-radius:8px;cursor:pointer;transition:border-color .15s ease;min-height:64px;box-sizing:border-box; }
.make-image-picker-card:hover { border-color:var(--line-strong); }
.make-image-picker-card.is-selected { border-color:var(--vermilion);background:var(--paper-card); }
.make-image-picker-card:focus-visible { outline:2px solid var(--vermilion);outline-offset:2px; }
.make-image-picker-thumb { flex:0 0 44px;width:44px;height:44px;border-radius:6px;background:var(--paper-inset);overflow:hidden;display:grid;place-items:center;border:1px solid var(--line-soft); }
.make-image-picker-thumb img { width:100%;height:100%;object-fit:contain;display:block; }
.make-image-picker-placeholder { font-size:18px;font-weight:600;color:var(--ink-muted); }
.make-image-picker-info { display:flex;flex-direction:column;gap:2px;min-width:0;flex:1; }
.make-image-picker-badge { font-size:11px;color:var(--vermilion);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.make-image-picker-name { font-size:13px;font-weight:700;color:var(--ink-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.make-image-picker-hint { font-size:11px;color:var(--ink-muted); }
.make-image-picker-clear { position:absolute;top:4px;right:6px;width:20px;height:20px;background:transparent;border:0;color:var(--ink-muted);font-size:14px;cursor:pointer;line-height:1;display:grid;place-items:center;border-radius:50%; }
.make-image-picker-clear:hover { color:var(--vermilion);background:var(--paper-inset); }

/* Field Wrap */
.make-image-field-wrap { display:flex;flex-direction:column;gap:6px; }
.make-image-field-label { font-size:12px;font-weight:700;color:var(--ink-main); }
.make-image-textarea { box-sizing:border-box;width:100%;min-height:72px;padding:8px 12px;font:inherit;font-size:13px;line-height:1.6;color:var(--ink-main);background:var(--paper-bg);border:1px solid var(--line-strong);border-radius:6px;resize:vertical; }
.make-image-textarea:focus-visible { outline:2px solid var(--vermilion);outline-offset:1px;border-color:var(--vermilion); }
.make-image-input { box-sizing:border-box;width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:13px;color:var(--ink-main);background:var(--paper-bg);border:1px solid var(--line-strong);border-radius:6px; }
.make-image-input:focus-visible { outline:2px solid var(--vermilion);outline-offset:1px;border-color:var(--vermilion); }

/* Ratio Row: Buttons + Input in ONE row */
.make-image-ratio-row { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.make-image-ratio-row .make-image-field-label { margin:0;white-space:nowrap; }
.make-image-ratio-controls { display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap; }
.make-image-ratio-input { width:88px;min-width:70px;max-width:96px;text-align:center;font-family:var(--font-mono, monospace);font-weight:600;font-size:13px;min-height:36px;padding:4px 8px; }

.make-image-btn-group { display:flex;flex-wrap:wrap;gap:6px; }
.make-image-btn-group .btn { min-height:36px;padding:6px 12px;font-size:12px;border:1px solid var(--line-strong);background:var(--paper-bg);color:var(--ink-body);border-radius:6px;cursor:pointer; }
.make-image-btn-group .btn:hover { border-color:var(--vermilion);color:var(--vermilion); }
.make-image-btn-group .btn.is-active,.make-image-btn-group .btn.btn-primary { background:var(--vermilion);border-color:var(--vermilion);color:#fff; }
.make-image-btn-group .btn:focus-visible { outline:2px solid var(--vermilion);outline-offset:2px; }

/* Collapsible Card */
.make-image-collapsible-card { border:1px solid var(--line-soft);border-radius:8px;background:var(--paper-bg);overflow:hidden; }
.make-image-collapsible-toggle { width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:transparent;border:0;font:inherit;font-size:12px;font-weight:700;color:var(--ink-main);cursor:pointer;text-align:left; }
.make-image-collapsible-toggle:hover { background:var(--paper-inset); }
.make-image-collapsible-toggle:focus-visible { outline:2px solid var(--vermilion);outline-offset:-2px; }
.make-image-toggle-icon { font-size:10px;color:var(--ink-muted); }
.make-image-collapsible-body { padding:12px 14px 16px;border-top:1px solid var(--line-soft);background:var(--paper-card); }
.make-image-collapsible-body[hidden] { display:none !important; }

/* More Settings (每项一行) */
.make-image-more-list { display:flex;flex-direction:column;gap:12px; }
.make-image-more-row { display:flex;align-items:center;gap:10px;min-height:36px;flex-wrap:wrap; }
.make-image-more-label { font-size:12px;font-weight:700;color:var(--ink-main);white-space:nowrap;min-width:68px;margin:0; }
.make-image-more-thumbs { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.make-image-moods-input { flex:1;min-width:200px;min-height:36px; }
.make-image-duo-row { display:flex;align-items:center;gap:16px;flex-wrap:wrap; }
.make-image-inline-field { display:flex;align-items:center;gap:8px;flex:1;min-width:180px; }
.make-image-inline-field .make-image-more-label { white-space:nowrap;min-width:auto; }
.make-image-inline-inputs { display:flex;gap:8px;flex:1;min-width:0;flex-wrap:wrap; }
.make-image-select { box-sizing:border-box;min-height:36px;padding:6px 10px;font:inherit;font-size:13px;color:var(--ink-main);background:var(--paper-bg);border:1px solid var(--line-strong);border-radius:6px; }

.make-image-style-note { font-size:12px;color:var(--ink-muted);line-height:1.4;margin-top:-4px;margin-bottom:6px;padding-left:2px; }
.make-image-slot-card { display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--paper-bg);border:1px solid var(--line-soft);border-radius:6px; }
.make-image-slot-card.is-inline { display:inline-flex;align-items:center;padding:2px 8px 2px 2px;gap:6px;min-height:34px;background:var(--paper-bg);border:1px solid var(--line-soft);border-radius:6px; }
.make-image-slot-card.is-inline .make-image-slot-thumb-wrap { width:38px;height:30px; }
.make-image-slot-card.is-inline .make-image-slot-title { font-size:11.5px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.make-image-slot-thumb-wrap { position:relative;width:54px;height:42px;border-radius:4px;overflow:hidden;background:var(--paper-inset);border:1px solid var(--line-soft);flex-shrink:0; }
.make-image-slot-thumb-wrap img { width:100%;height:100%;object-fit:cover;display:block; }
.make-image-slot-badge { display:none; }
.make-image-slot-clear { position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:rgba(20,17,15,0.75);color:#fff;border:0;cursor:pointer;font-size:11px;line-height:1;display:grid;place-items:center;padding:0;z-index:2; }
.make-image-slot-clear:hover { background:var(--vermilion); }
.make-image-slot-meta { display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.2; }
.make-image-slot-code { font-family:var(--font-mono, monospace);font-size:11px;font-weight:700;color:var(--ink-muted, #786f65);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.make-image-slot-title { font-size:12px;font-weight:700;color:var(--ink-main);line-height:1.2; }

/* Prompt Inner */
.make-image-prompt-inner { display:flex;flex-direction:column;gap:10px; }
.make-image-stale-banner { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:#fef3c7;border:1px solid #fde68a;border-radius:6px;font-size:12px;color:#92400e; }
.make-image-error-banner { padding:8px 12px;background:#fee2e2;border:1px solid #fca5a5;border-radius:6px;font-size:12px;color:#991b1b; }
.make-image-loading-prompt { font-size:12px;color:var(--ink-muted);padding:10px 0; }
.make-image-prompt-box { display:flex;flex-direction:column;gap:6px; }
.make-image-prompt-textarea { font-family:var(--font-mono, monospace);font-size:12px;min-height:96px; }
.make-image-prompt-bar { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.make-image-customized-tag { font-size:11px;color:var(--vermilion);font-weight:600; }
.make-image-system-append { margin-top:4px;border:1px solid var(--line-soft);border-radius:6px;padding:8px 10px;background:var(--paper-bg);font-size:12px;color:var(--ink-muted); }
.make-image-system-append summary { cursor:pointer;font-weight:600;color:var(--ink-main); }
.make-image-system-append-note { margin-top:6px;font-size:11px;color:var(--ink-muted);line-height:1.4; }
.make-image-trimmed-note { font-size:11px;color:#b45309;padding:4px 0; }

/* Cost & Status & Run */
.make-image-cost-row { padding:4px 0; }
.make-image-cost { font-size:13px;font-weight:600;color:var(--ink-body);line-height:1.5; }
.make-image-cost-text { font-size:13px;font-weight:600;color:var(--ink-body);line-height:1.5; }
.make-image-status { font-size:12px;color:var(--ink-muted);line-height:1.5; }
.make-image-submit-row { display:flex;gap:12px;align-items:center;padding-top:4px; }
.make-image-action-bar { display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:4px;flex-wrap:wrap; }
.make-image-btn-wrap { display:flex;align-items:center;gap:8px; }
.make-image-btn-reset, .batch-btn-reset { min-height:36px;padding:6px 14px;font-size:12px;font-weight:500;color:var(--ink-body,#4a4238);background:transparent;border:1px solid var(--line-strong,#ccc);border-radius:6px;cursor:pointer;transition:all 0.15s ease;white-space:nowrap; }
.make-image-btn-reset:hover:not(:disabled), .batch-btn-reset:hover:not(:disabled) { border-color:var(--ink-main,#2b2623);color:var(--ink-main,#2b2623);background:var(--paper-inset,#f3ede2); }
.make-image-btn-reset:disabled, .batch-btn-reset:disabled { opacity:0.5;cursor:not-allowed; }
.make-image-busy-hint, .batch-busy-hint { font-size:12px;color:var(--ink-muted,#7c7267);white-space:nowrap;line-height:1.4; }
.make-image-run-btn,.make-image-btn-run { min-height:44px;padding:10px 28px;font-size:14px;font-weight:700;border-radius:6px;background:var(--vermilion);color:#fff;border:1px solid var(--vermilion);cursor:pointer; }
.make-image-run-btn:disabled,.make-image-btn-run:disabled { opacity:.6;cursor:progress; }
.make-image-run-btn:focus-visible,.make-image-btn-run:focus-visible { outline:2px solid var(--vermilion);outline-offset:2px; }
.make-image-textarea.is-readonly { background:var(--paper-inset);color:var(--ink-body);font-family:var(--font-mono, monospace);font-size:12px; }

/* Results Section */
.make-image-results-section { margin-top:32px; }
.make-image-results-section h2 { margin:0 0 4px;font:700 18px/1.3 var(--font-serif);color:var(--ink-main); }
.make-image-results-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px;flex-wrap:wrap; }
.make-image-empty-results { margin-top:14px;padding:32px;text-align:center;background:var(--paper-card);border:1px dashed var(--line-strong);border-radius:8px;font-size:13px;color:var(--ink-muted); }
.make-image-results-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px; }
.make-image-result-card { background:var(--paper-card);border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(43,38,35,0.03); }
.make-image-result-frame,.make-image-result-thumb { width:100%;aspect-ratio:3/4;background:var(--paper-inset);overflow:hidden;display:flex;align-items:center;justify-content:center; }
.make-image-result-frame img,.make-image-result-thumb img { width:100%;height:100%;object-fit:contain;display:block; }
.make-image-result-caption { padding:10px 12px;display:flex;flex-direction:column;gap:8px; }
.make-image-result-title { font-size:12px;font-weight:700;color:var(--ink-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.make-image-result-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
.make-image-result-actions .btn { font-size:11px;padding:5px 8px;min-height:32px;border:1px solid var(--line-soft);background:var(--paper-bg);color:var(--ink-body);border-radius:4px;cursor:pointer; }
.make-image-result-actions .btn:hover { border-color:var(--vermilion);color:var(--vermilion); }
.make-image-result-actions .btn:focus-visible { outline:2px solid var(--vermilion);outline-offset:1px; }

/* Responsive */
@media(max-width:768px) {
  .make-image-top-row { align-items:flex-start;gap:10px; }
  .make-image-pickers-row { grid-template-columns:1fr;gap:8px; }
  .make-image-ratio-row { align-items:flex-start;gap:8px; }
  .make-image-ratio-controls { width:100%; }
  .make-image-duo-row { flex-direction:column;align-items:stretch;gap:8px; }
  .make-image-inline-field { width:100%;min-width:0; }
  .make-image-more-row { align-items:flex-start;gap:8px; }
  .make-image-more-label { min-width:auto;padding-top:4px; }
  .make-image-moods-input { width:100%;min-width:0; }
  .make-image-results-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .make-image-run-btn,.make-image-btn-run { width:100%;min-height:44px; }
}

@media(max-width:480px) {
  .make-image-results-grid { grid-template-columns:1fr; }
  .make-image-main-grid { padding:12px;gap:12px; }
  .make-image-btn-group .btn { padding:5px 8px;font-size:11.5px; }
}

@media(prefers-reduced-motion:reduce) {
  .make-image-picker-card,.make-image-run-btn,.make-image-btn-group .btn { transition:none !important; }
}

/* ==================== Phase 3b-2 & 3b-4: Studio Batch Page & Set Planning ==================== */
.batch-container { width:min(100%,880px);margin:0 auto;box-sizing:border-box; }
.batch-container .make-image-btn-group .btn.is-active,
.batch-container .make-image-btn-group .btn.btn-primary {
  background: var(--ink-main, #2b2623);
  border-color: var(--ink-main, #2b2623);
  color: #fff;
}
.batch-container .make-image-run-btn:disabled {
  background: var(--paper-inset, #eae4d9);
  border-color: var(--line-soft, #ded6c9);
  color: var(--ink-muted, #8c8275);
}
.batch-field-head,.batch-chips-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px;flex-wrap:wrap; }
.batch-chips-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:38px;padding:4px 0; }
.batch-chip { flex-shrink:0; }
.batch-empty-chips-hint { font-size:12px;color:var(--ink-muted);line-height:1.5;padding:4px 0; }
.batch-unified-theme-row { display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap; }
.batch-unified-theme-label { font-size:12px;font-weight:700;color:var(--ink-main);white-space:nowrap; }
.batch-unified-input { flex:1;min-width:200px; }

/* Set Planning Cards & Controls (Phase 3b-4) */
.batch-plan-card { background:var(--paper-card, #faf6ee);border:1px solid var(--line-strong, #e2d9cd);border-radius:8px;padding:14px 16px;margin-bottom:12px; }

/* Planning Inputs Embedded Panel */
.batch-plan-inputs-panel {
  background: var(--paper-bg, #fbf8f2);
  border: 1px solid var(--line-soft, #e6ded3);
  border-left: 3px solid var(--ink-muted, #8c8275);
  border-radius: 8px;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.batch-plan-inputs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.batch-plan-inputs-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted, #7c7267);
  letter-spacing: 0.5px;
}

.batch-plan-row-a { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.batch-seed-wrap { display:flex;align-items:center;gap:6px;flex:2;min-width:220px; }
.batch-seed-input { flex:1;min-width:160px; }
.batch-count-wrap { display:flex;align-items:center;gap:6px; }
.batch-count-input { width:58px;text-align:center; }
.batch-strategy-wrap { display:flex;align-items:center;gap:6px; }

/* Segmented Control for Strategy */
.batch-strategy-seg {
  display: inline-flex;
  align-items: center;
  background: var(--paper-inset, #f3ede2);
  border: 1px solid var(--line-soft, #e6ded3);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  height: 26px;
  box-sizing: border-box;
}
.batch-strategy-seg-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-muted, #7c7267);
  font-size: 12px;
  font-weight: 500;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.15s ease;
  user-select: none;
}
.batch-strategy-seg-btn:hover {
  color: var(--ink-main, #2b2623);
}
.batch-strategy-seg-btn.is-active {
  background: var(--surface-color, #ffffff);
  color: var(--ink-main, #2b2623);
  font-weight: 700;
  border-color: var(--line-strong, #d8cfc4);
  box-shadow: 0 1px 3px rgba(43, 38, 35, 0.08);
}
.batch-strategy-seg-btn:focus-visible {
  outline: 2px solid var(--ink-muted, #7c7267);
  outline-offset: 1px;
}

/* Row B + Action Wrap inside Planning Inputs */
.batch-plan-row-b-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.batch-plan-row-b {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 220px;
  flex-wrap: wrap;
}
.batch-fixed-layout-row { display:flex;align-items:center;gap:10px; }
.batch-fixed-layout-card-wrap { display:flex;align-items:center;gap:8px; }
.batch-ai-layout-row { display:flex;align-items:center;gap:8px; }
.batch-layout-req-input { flex:1;min-width:180px; }

/* Hero Plan Button (Unique Vermilion Solid Action) */
.batch-plan-action-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.batch-btn-plan-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  height: 36px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: var(--vermilion, #c94c2e);
  border: 1px solid var(--vermilion, #c94c2e);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(201, 76, 46, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
  user-select: none;
}
.batch-btn-plan-hero:hover:not(:disabled) {
  background: #b63f23;
  border-color: #b63f23;
  box-shadow: 0 4px 12px rgba(201, 76, 46, 0.38);
}
.batch-btn-plan-hero:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(201, 76, 46, 0.22);
}
.batch-btn-plan-hero:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.batch-btn-plan-hero .batch-plan-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: block;
}
.batch-plan-notice { font-size:11px;color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:4px;padding:2px 8px;white-space:nowrap; }

.batch-edit-area { margin-top:14px; }
.batch-edit-table { width:100%;border-collapse:collapse;font-size:12px; }
.batch-edit-table th { padding:6px 10px;background:var(--paper-inset, #f3ede2);border-bottom:1px solid var(--line-soft, #e6ded3);font-weight:700;color:var(--ink-main, #2b2623);text-align:left; }
.batch-edit-table td { padding:6px 8px;border-bottom:1px solid var(--line-soft, #e6ded3);vertical-align:middle; }
.batch-row-theme-input { width:100%;box-sizing:border-box; }
.batch-row-layout-select { width:100%;box-sizing:border-box;font-size:12px; }
.batch-row-layout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  width: 100%;
  max-width: 220px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--line-soft, #e6ded3);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.batch-row-layout-btn:hover {
  border-color: var(--vermilion, #d14b28);
  background: var(--paper-card, #faf6f0);
}
.batch-row-layout-btn:focus-visible {
  outline: 2px solid var(--vermilion, #d14b28);
  outline-offset: 1px;
}
.batch-row-layout-thumb-wrap {
  width: 40px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-inset, #f3ede2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.batch-row-layout-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.batch-row-layout-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.batch-row-layout-code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-main, #2b2623);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.batch-row-layout-name {
  font-size: 11px;
  color: var(--ink-muted, #786f65);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ic-picker-card:focus-visible {
  outline: 2px solid var(--vermilion, #d14b28) !important;
  outline-offset: 2px;
}
.batch-row-del-btn { font-size:11px;padding:2px 6px;color:var(--ink-muted, #786f65); }
.batch-row-del-btn:hover { color:#d32f2f; }
.batch-add-row-wrap { margin-top:8px; }

/* Batch Preview Table */
.batch-preview-section { margin-top:8px;border-top:1px solid var(--line-soft);padding-top:14px; }
.batch-preview-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }
.batch-preview-title { margin:0;font-size:13px;font-weight:700;color:var(--ink-main); }
.batch-table-wrap { width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-soft);border-radius:6px;background:var(--paper-card); }
.batch-preview-table { width:100%;border-collapse:collapse;font-size:12px;text-align:left;line-height:1.5; }
.batch-preview-table th { padding:8px 10px;font-weight:700;color:var(--ink-main);background:var(--paper-inset);border-bottom:1px solid var(--line-soft);white-space:nowrap; }
.batch-preview-table td { padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--ink-body); }
.batch-table-row:last-child td { border-bottom:0; }
.batch-table-row:hover td { background:var(--paper-bg); }
.batch-table-empty { text-align:center;color:var(--ink-muted);padding:24px 10px; }
.batch-col-idx { font-family:var(--font-mono, monospace);font-weight:700;color:var(--ink-muted); }
.batch-iter-cell { display:flex;align-items:center;gap:8px;min-width:0;min-height:42px; }
.batch-iter-thumb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  line-height: 0;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.batch-iter-thumb-btn:hover {
  transform: scale(1.04);
  opacity: 0.92;
}
.batch-iter-thumb-btn:focus-visible {
  outline: 2px solid var(--vermilion, #d14b28);
  outline-offset: 2px;
}
.batch-iter-schematic-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(43, 38, 35, 0.78);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  padding: 1.5px 3px;
  border-radius: 3px;
  pointer-events: none;
  letter-spacing: -0.2px;
}
.batch-iter-placeholder {
  width: 56px;
  height: 42px;
  box-sizing: border-box;
  border: 1px dashed var(--border-soft, #e2dcd2);
  background: var(--bg-canvas, #faf8f5);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-muted, #948b81);
  line-height: 0;
}
.batch-iter-placeholder svg {
  opacity: 0.65;
}
.batch-iter-thumb { width:56px;height:42px;object-fit:cover;border-radius:6px;border:1px solid var(--line-soft);flex-shrink:0;background:var(--paper-inset);display:block; }
.batch-iter-label { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px; }

/* Status Badges */
.batch-status-badge { display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap; }
.batch-status-badge.is-waiting { background:var(--paper-inset);color:var(--ink-muted); }
.batch-status-badge.is-generating { background:rgba(201,76,46,0.1);color:var(--vermilion); }
.batch-status-badge.is-done { background:rgba(46,125,50,0.1);color:#2e7d32; }
.batch-status-badge.is-failed { background:rgba(211,47,47,0.1);color:#d32f2f; }

/* Actions */
.batch-row-actions { display:flex;align-items:center;gap:6px; }
.batch-btn-retry { padding:3px 8px;font-size:11px;min-height:26px;border-color:var(--vermilion);color:var(--vermilion);background:transparent; }
.batch-btn-dl,.batch-btn-publish { padding:3px 8px;font-size:11px;min-height:26px; }
.batch-action-idle { color:var(--ink-muted); }

/* Bottom Action Bar */
.batch-action-bar { display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;flex-wrap:wrap;border-top:1px solid var(--line-soft); }
.batch-cost-wrap { display:flex;flex-direction:column;gap:3px; }
.batch-cost-text { font-size:13px;font-weight:700;color:var(--ink-main); }
.batch-busy-status { font-size:12px;color:var(--vermilion);font-weight:600; }
.batch-summary-status { font-size:12px;color:var(--ink-muted);font-weight:600; }
.batch-btn-wrap { display:flex;align-items:center;gap:8px; }
.batch-stop-btn { min-height:40px;padding:8px 18px;border:1px solid var(--line-strong);background:var(--paper-inset);color:var(--ink-body);font-weight:600;cursor:pointer; }
.batch-stop-btn:hover { border-color:var(--vermilion);color:var(--vermilion); }

/* Batch Global References Row (outside collapsible) */
.batch-global-refs-row { display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:36px; }
.batch-global-refs-row .make-image-field-label { margin:0;white-space:nowrap; }
.batch-global-refs-thumbs { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }

/* Batch Row Reference Column */
.batch-col-refs { min-width:140px;vertical-align:middle; }
.batch-row-refs-wrap { display:flex;flex-direction:column;gap:4px; }
.batch-row-refs-desktop { display:flex;align-items:center; }
.batch-row-refs-mobile { display:none; }
.batch-row-refs-thumbs {
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  padding:2px 4px;
  border-radius:6px;
  background:var(--paper-card, #faf6f0);
  border:1px solid var(--line-soft, #e6ded3);
  transition:border-color 0.15s ease, background 0.15s ease;
}
.batch-row-refs-thumbs:hover {
  border-color:var(--vermilion, #d14b28);
  background:#fff;
}
.batch-row-ref-thumb {
  width:28px;
  height:28px;
  border-radius:4px;
  object-fit:cover;
  display:block;
  border:1px solid var(--line-soft, #e6ded3);
  background:var(--paper-inset, #f3ede2);
  flex-shrink:0;
}
.batch-row-refs-plus-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px dashed var(--line-strong, #ccc);
  color:var(--ink-muted, #786f65);
  font-size:12px;
  line-height:1;
}
.batch-btn-pick-row-refs {
  padding:3px 8px;
  font-size:11.5px;
}
.batch-row-skip-global-wrap {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
}
.batch-row-skip-global-label {
  display:inline-flex;
  align-items:center;
  gap:3px;
  cursor:pointer;
  color:var(--ink-muted, #786f65);
  font-size:11px;
  user-select:none;
}
.batch-row-skip-global-checkbox {
  margin:0;
  cursor:pointer;
}
.batch-ref-skip-badge {
  display:inline-block;
  background:var(--paper-warm, #f3ede3);
  color:var(--vermilion, #d14b28);
  border:1px solid var(--vermilion-border, rgba(209,75,40,0.3));
  font-size:10px;
  border-radius:4px;
  padding:1px 4px;
  font-weight:600;
  line-height:1.2;
}

@media(max-width:768px) {
  .make-image-action-bar { flex-direction:column;align-items:stretch;gap:10px; }
  .make-image-btn-wrap { width:100%;flex-direction:column;align-items:stretch;gap:8px; }
  .make-image-btn-wrap button,.make-image-btn-wrap .make-image-btn-run,.make-image-btn-wrap .make-image-btn-reset { width:100%;min-height:44px; }
  .batch-iter-label { max-width:200px; }
  .batch-action-bar { flex-direction:column;align-items:stretch;gap:10px; }
  .batch-btn-wrap { width:100%;flex-direction:column;align-items:stretch;gap:8px; }
  .batch-btn-wrap button,.batch-btn-wrap .make-image-run-btn,.batch-btn-wrap .batch-btn-reset { width:100%;min-height:44px; }
  .batch-unified-theme-row { flex-direction:column;align-items:stretch; }
  .batch-plan-inputs-panel { padding:10px 12px;gap:10px; }
  .batch-plan-row-a { flex-direction:column;align-items:stretch;gap:8px; }
  .batch-seed-wrap, .batch-count-wrap, .batch-strategy-wrap, .batch-plan-action-wrap { width:100%; }
  .batch-seed-input { width:100%; }
  .batch-plan-row-b-wrap { flex-direction:column;align-items:stretch;gap:10px; }
  .batch-plan-row-b { width:100%; }
  .batch-fixed-layout-row { flex-wrap:wrap;gap:8px; }
  .batch-btn-plan-hero { width:100%; }
  .batch-plan-action-wrap button { width:100%; }
  .batch-ai-layout-row { flex-direction:column;align-items:stretch; }
  .batch-layout-req-input { width:100%; }
}

@media(max-width:720px) {
  .batch-global-refs-row { align-items:flex-start;gap:8px; }
  .batch-edit-table { min-width:0;width:100%;table-layout:fixed; }
  .batch-edit-table th, .batch-edit-table td { padding:4px 3px;font-size:11px; }
  .batch-col-idx { width:28px !important;text-align:center; }
  .batch-col-layout { width:100px !important; }
  .batch-row-theme-input { font-size:11px;padding:4px 6px; }
  .batch-row-layout-btn { max-width:100%;padding:2px 4px;gap:4px; }
  .batch-row-layout-thumb-wrap { width:28px;height:21px; }
  .batch-row-layout-code { font-size:10px; }
  .batch-row-layout-name { font-size:10px; }
  .batch-col-refs { width:75px !important;min-width:70px; }
  .batch-row-refs-desktop { display:none; }
  .batch-row-refs-mobile { display:block; }
  .batch-btn-row-refs-mobile {
    width:100%;
    padding:4px 6px;
    font-size:10.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media(max-width:640px) {
  .batch-iter-thumb { width:48px;height:36px; }
  .batch-iter-placeholder { width:48px;height:36px; }
  .batch-iter-schematic-badge { font-size: 8px; padding: 1px 2px; }
}

/* ==================== Phase 3b-3: Article Preview / Editor Switch ==================== */
.ic-article-segmented-switch {
  display: inline-flex;
  align-items: center;
  background: var(--ic-surface, #f0f2f5);
  border: 1px solid var(--ic-border, #e2dcd2);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  height: 28px;
  box-sizing: border-box;
}
.ic-article-seg-btn {
  border: none;
  background: transparent;
  color: var(--ic-muted, #666);
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  height: 22px;
  line-height: 22px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.ic-article-seg-btn:hover {
  color: var(--ic-ink, #222);
}
.ic-article-seg-btn.is-active {
  background: var(--ic-panel-solid, #ffffff);
  color: var(--vermilion, #d93d1a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 800;
}

/* ==================== Phase 3b-3: Canvas Template Library ==================== */
.ic-canvas-template-library {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  background: var(--paper-bg, #f7f3ec);
  padding: 36px clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}
.ic-canvas-stage:has(.ic-canvas-template-library) .ic-canvas-toolstrip,
.ic-canvas-stage:has(.ic-canvas-template-library) .ic-bottom-right-dock,
.ic-canvas-stage:has(.ic-canvas-template-library) .ic-minimap,
.ic-canvas-stage:has(.ic-canvas-template-library) .ic-shelf-drawer {
  display: none !important;
}
.ic-tmpl-lib-wrap {
  max-width: 960px;
  margin: 0 auto;
}
.ic-tmpl-lib-head {
  margin-bottom: 24px;
}
.ic-tmpl-lib-title {
  margin: 0 0 8px;
  font: 700 24px/1.3 var(--font-serif);
  color: var(--ink-main, #222);
}
.ic-tmpl-lib-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted, #666);
  line-height: 1.5;
}
.ic-tmpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.ic-tmpl-card {
  background: var(--paper-card, #ffffff);
  border: 1px solid var(--line-strong, #e2dcd2);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.ic-tmpl-card:hover {
  border-color: var(--vermilion, #c94c2e);
  box-shadow: 0 4px 12px rgba(43, 38, 35, 0.08);
}
.ic-tmpl-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.ic-tmpl-card-title {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--ink-main, #222);
  line-height: 1.35;
}
.ic-tmpl-card-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted, #777);
  background: var(--paper-inset, #f0ede6);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.ic-tmpl-card-desc {
  font-size: 12px;
  color: var(--ink-muted, #666);
  line-height: 1.55;
  flex: 1;
}
.ic-tmpl-card-btn {
  font-size: 12px;
  font-weight: 750;
  padding: 6px 14px;
  border: 1px solid var(--line-strong, #e2dcd2);
  border-radius: 6px;
  background: var(--paper-inset, #f0ede6);
  color: var(--ink-main, #222);
  cursor: pointer;
  text-align: center;
  align-self: flex-start;
  transition: all 0.15s;
}
.ic-tmpl-card:hover .ic-tmpl-card-btn {
  background: var(--vermilion, #c94c2e);
  border-color: var(--vermilion, #c94c2e);
  color: #fff;
}

/* ==========================================================================
   Batch Layout Hover Preview Singleton & Large Theme Modal
   ========================================================================== */
.batch-layout-hover-preview {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: 420px;
  box-sizing: border-box;
  background: var(--surface-color, #ffffff);
  border: 1px solid var(--line-soft, #e6ded3);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(43, 38, 35, 0.22);
  overflow: hidden;
}

.batch-layout-hover-preview .batch-hover-img-wrap {
  width: 100%;
  height: auto;
  max-height: 360px;
  background: var(--paper-inset, #f3ede2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.batch-layout-hover-preview .batch-hover-img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  display: block;
}

.batch-layout-hover-preview .batch-hover-meta {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: var(--paper-inset, #f3ede2);
  border-top: 1px solid var(--line-soft, #e6ded3);
}

.batch-layout-hover-preview .batch-hover-code {
  font-weight: 700;
  color: var(--ink-main, #2b2623);
  font-family: monospace;
}

.batch-layout-hover-preview .batch-hover-name {
  color: var(--ink-muted, #7c7267);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: none) {
  .batch-layout-hover-preview {
    display: none !important;
  }
}

/* Theme Modal & Inputs */
.batch-row-theme-input[readonly] {
  background-color: var(--paper-inset, #f3ede2);
  border-color: var(--line-soft, #e6ded3);
  cursor: pointer;
  user-select: none;
}

.batch-row-theme-input[readonly]:hover {
  border-color: var(--ink-muted, #7c7267);
  background-color: var(--surface-color, #ffffff);
}

.batch-row-theme-input[readonly]:focus-visible {
  outline: 2px solid var(--vermilion, #b74227);
  outline-offset: 1px;
}

.batch-iter-label-btn {
  background: none;
  border: 1px solid transparent;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: inherit;
  font: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.batch-iter-label-btn:hover {
  background-color: var(--paper-inset, #f3ede2);
  border-color: var(--line-soft, #e6ded3);
}

.batch-iter-label-btn:focus-visible {
  outline: 2px solid var(--vermilion, #b74227);
  outline-offset: 1px;
}

.batch-iter-label-btn .batch-iter-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.batch-theme-modal-textarea {
  min-height: 200px;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
  border: 1px solid var(--line-soft, #e6ded3);
  border-radius: 6px;
  background: var(--surface-color, #ffffff);
  color: var(--ink-main, #2b2623);
}

.batch-theme-modal-textarea:focus {
  outline: none;
  border-color: var(--vermilion, #b74227);
  box-shadow: 0 0 0 2px rgba(183, 66, 39, 0.15);
}

@media (max-width: 768px) {
  .batch-iter-label-btn .batch-iter-label {
    max-width: 200px;
  }
  .batch-theme-modal-textarea {
    min-height: 180px;
  }
}

/* Global studio navigation: history and workflows are sibling destinations. */
.qc-entry-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.qc-entry-actions .qc-mode-history { margin-left: 0; }
.qc-mode-workflows { min-height: 40px; padding: 6px 14px; white-space: nowrap; }
@media(max-width:768px) {
  .qc-entry-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .qc-entry-actions { gap: 6px; }
  .qc-mode-workflows { min-height: 44px; padding: 6px 10px; font-size: 12px; }
}

/* Use the same responsive content gutters as the site-wide navigation. */
.qc-entry-bar {
  padding-inline: var(--hw-page-gutter);
}