*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #0f0e0c;
  --cream: #f5f1ea;
  --warm: #e8e0d0;
  --gold: #c8a96e;
  --gold-light: #e8d5b0;
  --muted: #8a8070;
  --accent: #2d4a3e;
  --red: #c04a2a;
}

body { font-family: 'Noto Sans', sans-serif; background: var(--cream); color: var(--ink); min-height: 100vh; }


.header {
  background: var(--ink); color: var(--cream);
  padding: 18px 32px; display: flex; align-items: center; gap: 16px;
  border-bottom: 3px solid var(--gold);
}
.header h1 { font-family: 'Playfair Display', serif; font-size: 1.5rem; }
.header .subtitle { font-size: 0.7rem; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; }
.header .spacer { flex: 1; }

.layout { display: flex; flex-direction: column; min-height: calc(100vh - 65px); }

.form-side {
  padding: 24px 40px; background: var(--cream);
  border-bottom: 2px solid var(--warm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 20px 28px;
}

.form-col { display: flex; flex-direction: column; gap: 16px; }

.output-side { background: #f8f8f8; flex: 1; position: relative; padding: 28px 40px; overflow-y: auto; }

.sec-label {
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.sec-label::after { content: ''; flex: 1; height: 1px; background: var(--warm); }

.fg { margin-bottom: 16px; }

.fl { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 6px; }
.fl .sub { font-weight: 300; color: var(--muted); font-size: 0.72rem; }

input[type="text"], input[type="number"], textarea {
  width: 100%; background: white; border: 1.5px solid var(--warm);
  border-radius: 6px; padding: 8px 12px;
  font-family: 'Noto Sans', sans-serif; font-size: 0.84rem; color: var(--ink);
  outline: none; transition: border-color 0.2s;
}
input[type="text"]:focus, input[type="number"]:focus, textarea:focus { border-color: var(--gold); }
textarea { min-height: 65px; resize: vertical; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  padding: 5px 12px; border-radius: 100px; border: 1.5px solid var(--warm);
  background: white; font-size: 0.74rem; font-family: 'Noto Sans', sans-serif;
  color: var(--ink); cursor: pointer; transition: all 0.15s; user-select: none;
}
.chip:hover { border-color: var(--gold); }
.chip.on { border-color: var(--accent); background: var(--accent); color: white; }

.upload-zone {
  position: relative; width: 100%; min-height: 68px;
  border: 2px dashed var(--warm); border-radius: 8px;
  background: white; cursor: pointer; transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 14px;
  font-size: 0.77rem; color: var(--muted); text-align: center;
}
.upload-zone:hover { border-color: var(--gold); background: #fdfaf5; }
.upload-zone.done { border-color: var(--gold); border-style: solid; }
.upload-zone input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
.upload-zone .uz-icon { font-size: 1.3rem; color: var(--gold); pointer-events: none; }
.upload-zone .uz-text { pointer-events: none; }
.upload-zone img { max-height: 65px; max-width: 100%; object-fit: contain; border-radius: 4px; pointer-events: none; }

.preview-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.pt { position: relative; width: 60px; height: 60px; }
.pt img { width: 60px; height: 60px; object-fit: cover; border-radius: 5px; border: 1.5px solid var(--warm); }
.pt button {
  position: absolute; top: -5px; left: -5px; width: 16px; height: 16px;
  background: var(--red); color: white; border: none; border-radius: 50%;
  font-size: 0.55rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.add-more {
  width: 60px; height: 60px; border: 2px dashed var(--warm); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); font-size: 1.2rem;
  position: relative; transition: all 0.15s; background: white;
}
.add-more:hover { border-color: var(--gold); color: var(--gold); }
.add-more input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0;
}

.qty-row { display: flex; align-items: center; gap: 10px; }
.qty-row .fl { margin: 0; flex: 1; }
.qty-input { width: 70px; flex: none; text-align: center; }

.gen-btn {
  width: 100%; padding: 13px; background: var(--ink); color: var(--cream);
  border: none; border-radius: 8px; font-family: 'Playfair Display', serif;
  font-size: 1rem; cursor: pointer; transition: background 0.2s; margin-top: 6px;
}
.gen-btn:hover { background: var(--accent); }
.gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%;
  color: var(--muted); text-align: center; gap: 12px; padding: 40px;
}
.empty-state .icon { font-size: 2.4rem; opacity: 0.2; }
.empty-state p { font-size: 0.83rem; max-width: 240px; line-height: 1.65; }

.progress-panel { display: none; padding: 28px 32px; }
.progress-panel.show { display: block; }
.progress-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 18px; color: var(--ink); }

.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 14px; }

.img-card {
  background: white; border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--warm); transition: box-shadow 0.2s;
  position: relative;
}
.img-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.09); }

.card-thumb {
  width: 100%; aspect-ratio: 4/5; background: var(--warm);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid rgba(200,169,110,0.3); border-top-color: var(--gold);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.card-error { font-size: 0.7rem; color: var(--red); padding: 10px; text-align: center; line-height: 1.4; }

.card-info { padding: 9px 11px; }
.card-label { font-size: 0.71rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.card-prompt { font-size: 0.62rem; color: var(--muted); line-height: 1.45; direction: ltr; text-align: left; }

.card-actions { padding: 0 11px 9px; }
.dl-btn {
  width: 100%; padding: 5px; background: var(--accent); color: white;
  border: none; border-radius: 5px; font-size: 0.69rem;
  cursor: pointer; font-family: 'Noto Sans', sans-serif; transition: opacity 0.15s;
}
.dl-btn:hover { opacity: 0.85; }

.progress-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}
.progress-actions { display: flex; gap: 8px; }
.pa-btn {
  padding: 8px 18px; border: none; border-radius: 6px;
  font-family: 'Noto Sans', sans-serif; font-size: 0.8rem;
  font-weight: 500; cursor: pointer; transition: opacity 0.15s;
}
.pa-btn.gold { background: var(--gold); color: var(--ink); }
.pa-btn.light { background: var(--warm); color: var(--ink); }
.pa-btn:hover { opacity: 0.85; }

.progress-bar-wrap {
  width: 100%; height: 6px; background: var(--warm);
  border-radius: 3px; margin: 12px 0; overflow: hidden;
  display: none;
}
.progress-bar-wrap.show { display: block; }
.progress-bar-fill {
  height: 100%; background: var(--gold);
  border-radius: 3px; transition: width 0.4s ease;
  width: 0%;
}
.progress-stats {
  font-size: 0.72rem; color: var(--muted);
  display: flex; justify-content: space-between;
  margin-bottom: 16px;
}

/* Agent lightbox */
.agent-lb {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.75); align-items: center; justify-content: center; padding: 20px;
}
.agent-lb.open { display: flex; }
.agent-box {
  background: var(--cream); border-radius: 14px; width: 100%; max-width: 640px;
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}
.agent-header {
  background: var(--ink); color: var(--cream); padding: 18px 24px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 2px solid var(--gold);
}
.agent-header h2 { font-family: 'Playfair Display', serif; font-size: 1.1rem; flex: 1; }
.agent-header .rounds { font-size: 0.72rem; color: var(--gold); }
.agent-body { padding: 24px; overflow-y: auto; flex: 1; }
.agent-section { margin-bottom: 20px; }
.agent-section-title {
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: 10px;
}
.agent-text {
  font-size: 0.83rem; line-height: 1.7; color: var(--ink);
  background: white; border-radius: 8px; padding: 14px 16px;
  border: 1.5px solid var(--warm);
}
.agent-plan-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; background: white; border-radius: 6px;
  border: 1.5px solid var(--warm); margin-bottom: 8px; font-size: 0.82rem;
}
.agent-plan-item .num {
  background: var(--accent); color: white; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center;
  justify-content: center; font-size: 0.65rem; font-weight: 600; flex-shrink: 0;
}
.agent-plan-item .scene-name { font-weight: 500; margin-bottom: 2px; }
.agent-plan-item .scene-desc { font-size: 0.75rem; color: var(--muted); }

.agent-chat { border-top: 1px solid var(--warm); padding: 16px 24px; background: white; }
.chat-status { font-size: 0.72rem; color: var(--muted); margin-bottom: 10px; }
.chat-status.warn { color: var(--red); }
.chat-input-row { display: flex; gap: 8px; }
.chat-input {
  flex: 1; padding: 9px 13px; border: 1.5px solid var(--warm); border-radius: 6px;
  font-family: 'Noto Sans', sans-serif; font-size: 0.83rem; outline: none;
  transition: border-color 0.2s;
}
.chat-input:focus { border-color: var(--gold); }
.chat-input:disabled { background: #f5f5f5; color: var(--muted); }
.chat-send {
  padding: 9px 18px; background: var(--accent); color: white; border: none;
  border-radius: 6px; font-family: 'Noto Sans', sans-serif; font-size: 0.8rem;
  cursor: pointer; transition: opacity 0.15s; white-space: nowrap;
}
.chat-send:hover { opacity: 0.85; }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

.agent-footer {
  padding: 16px 24px; border-top: 1px solid var(--warm);
  display: flex; gap: 10px; background: var(--cream);
}
.agent-btn {
  padding: 10px 20px; border-radius: 7px; font-family: 'Noto Sans', sans-serif;
  font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.agent-btn.confirm { background: var(--accent); color: white; border: none; flex: 1; }
.agent-btn.cancel { background: white; color: var(--muted); border: 1.5px solid var(--warm); }
.agent-btn:hover { opacity: 0.85; }
.agent-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.agent-thinking {
  display: none; align-items: center; gap: 10px;
  font-size: 0.78rem; color: var(--muted); font-style: italic; padding: 10px 0;
}
.agent-thinking.show { display: flex; }
.agent-thinking .mini-spin {
  width: 16px; height: 16px; border: 2px solid var(--warm);
  border-top-color: var(--gold); border-radius: 50%; animation: spin 0.7s linear infinite;
}

.prompt-review-item {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 8px;
  border: 1.5px solid var(--warm); font-size: 0.75rem; line-height: 1.5;
}
.prompt-review-item.approved { border-color: #4caf50; background: #f1f8f1; }
.prompt-review-item.improved { border-color: var(--gold); background: #fdf9f0; }
.prompt-review-item .pr-label { font-weight: 600; margin-bottom: 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.prompt-review-item.approved .pr-label { color: #388e3c; }
.prompt-review-item.improved .pr-label { color: #8a6010; }

/* Prompt Review Lightbox */
.pr-lb {
  display: none; position: fixed; inset: 0; z-index: 2500;
  background: rgba(0,0,0,0.75); align-items: center; justify-content: center; padding: 20px;
}
.pr-lb.open { display: flex; }
.pr-box {
  background: var(--cream); border-radius: 14px; width: 100%; max-width: 860px;
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.pr-header {
  background: var(--ink); color: var(--cream); padding: 18px 24px;
  display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--gold); flex-shrink: 0;
}
.pr-header h2 { font-family: 'Playfair Display', serif; font-size: 1.1rem; flex: 1; }
.pr-header .pr-count { font-size: 0.72rem; color: var(--gold); }
.pr-body { padding: 20px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.prompt-review-item { padding: 12px 14px; border-radius: 8px; border: 1.5px solid var(--warm); font-size: 0.75rem; line-height: 1.5; }
.prompt-review-item.approved { border-color: #4caf50; background: #f1f8f1; }
.prompt-review-item.improved { border-color: var(--gold); background: #fdf9f0; }
.prompt-review-item .pr-label { font-weight: 600; margin-bottom: 6px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.prompt-review-item.approved .pr-label { color: #388e3c; }
.prompt-review-item.improved .pr-label { color: #8a6010; }
.pr-label .pr-scene-name { color: var(--ink); font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.pr-textarea {
  width: 100%; background: white; border: 1px solid var(--warm); border-radius: 5px;
  padding: 8px 10px; font-family: 'Noto Sans', sans-serif; font-size: 0.76rem;
  color: var(--ink); min-height: 72px; resize: vertical; line-height: 1.5; outline: none; margin-top: 6px;
}
.pr-textarea:focus { border-color: var(--gold); }
.pr-chat { border-top: 1px solid var(--warm); padding: 14px 24px; background: white; flex-shrink: 0; }
.pr-chat-status { font-size: 0.76rem; color: var(--muted); margin-bottom: 8px; min-height: 18px; }
.pr-footer { padding: 14px 24px; border-top: 1px solid var(--warm); background: var(--cream); display: flex; gap: 10px; flex-shrink: 0; }
.pr-footer-btn { padding: 10px 22px; border-radius: 7px; font-family: 'Noto Sans', sans-serif; font-size: 0.82rem; font-weight: 500; cursor: pointer; border: none; transition: opacity 0.15s; }
.pr-footer-btn.confirm { background: var(--accent); color: white; flex: 1; }
.pr-footer-btn.cancel { background: var(--warm); color: var(--ink); }
.pr-footer-btn:hover { opacity: 0.85; }
.pr-footer-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Card manual redo */
.card-redo-btn {
  display: none; position: absolute; top: 6px; left: 6px;
  background: rgba(192,74,42,0.88); color: white; border: none; border-radius: 5px;
  font-size: 0.67rem; padding: 3px 8px; cursor: pointer; font-family: 'Noto Sans', sans-serif;
}
.img-card.generated .card-redo-btn { display: block; }
.card-redo-overlay {
  display: none; position: absolute; inset: 0; background: rgba(245,241,234,0.96);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 14px; border-radius: 8px; z-index: 10;
}
.card-redo-overlay.show { display: flex; }
.card-redo-label { font-size: 0.74rem; font-weight: 600; color: var(--ink); text-align: center; }
.card-redo-input {
  width: 100%; background: white; border: 1.5px solid var(--warm); border-radius: 6px;
  padding: 6px 10px; font-family: 'Noto Sans', sans-serif; font-size: 0.74rem; outline: none;
}
.card-redo-input:focus { border-color: var(--red); }
.card-redo-actions { display: flex; gap: 6px; width: 100%; }
.card-redo-go { flex: 1; background: var(--red); color: white; border: none; border-radius: 6px; padding: 6px; font-family: 'Noto Sans', sans-serif; font-size: 0.74rem; cursor: pointer; }
.card-redo-cancel-btn { background: var(--warm); color: var(--ink); border: none; border-radius: 6px; padding: 6px 10px; font-family: 'Noto Sans', sans-serif; font-size: 0.74rem; cursor: pointer; }

/* D↔E conversation log in report */
.de-log { margin-top: 8px; }
.de-log-title {
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; user-select: none; padding: 3px 0;
}
.de-log-title:hover { color: var(--ink); }
.de-log-body { display: none; margin-top: 8px; }
.de-log-body.open { display: block; }
.de-attempt {
  border-radius: 7px; border: 1.5px solid var(--warm); margin-bottom: 8px; overflow: hidden;
}
.de-attempt.pass { border-color: #4caf50; }
.de-attempt.fail { border-color: var(--red); }
.de-attempt-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px; font-size: 0.72rem; font-weight: 600; background: var(--warm);
}
.de-attempt.pass .de-attempt-header { background: #e8f5e9; }
.de-attempt.fail .de-attempt-header { background: #fdecea; }
.de-msg { font-size: 0.76rem; line-height: 1.55; padding: 9px 12px; border-top: 1px solid var(--warm); }
.de-msg.d { border-inline-start: 3px solid var(--accent); background: rgba(45,74,62,0.04); }
.de-msg.e { border-inline-start: 3px solid var(--gold); background: rgba(200,169,110,0.07); }
.de-msg-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.de-msg.d .de-msg-label { color: var(--accent); }
.de-msg.e .de-msg-label { color: #8a6010; }

/* Card D↔E live status */
.card-de-status {
  font-size: 0.64rem; color: var(--gold); padding: 3px 11px 6px;
  display: flex; align-items: center; gap: 5px; font-style: italic;
}
.card-de-status .de-mini-spin {
  width: 10px; height: 10px; border: 1.5px solid var(--warm);
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin 0.7s linear infinite; flex-shrink: 0;
}

.card-status-badge {
  font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; margin-inline-end: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle;
}
.badge-approved { background: #e8f5e9; color: #388e3c; }
.badge-rejected { background: #fdecea; color: var(--red); }
.badge-retried  { background: var(--gold-light); color: #8a6010; }
.img-card.card-rejected { border-color: var(--red) !important; }
.img-card.card-approved-d { border-color: #4caf50 !important; }

.report-section { margin-top: 20px; }
.report-title { font-family: 'Playfair Display', serif; font-size: 1rem; margin-bottom: 12px; }
.report-row {
  display: grid; grid-template-columns: 1fr repeat(6, 60px);
  gap: 6px; font-size: 0.71rem; padding: 6px 0; border-bottom: 1px solid var(--warm); align-items: center;
}
.report-row.hdr { font-weight: 600; color: var(--muted); font-size: 0.63rem; text-transform: uppercase; }
.rc { text-align: center; }
.sc-hi { color: #388e3c; font-weight: 700; }
.sc-md { color: #f57c00; font-weight: 700; }
.sc-lo { color: var(--red); font-weight: 700; }

/* Lightbox */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.88); align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox.open { display: flex; }
.lightbox-inner {
  position: relative; max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lightbox-inner img {
  max-width: 90vw; max-height: 80vh;
  object-fit: contain; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-label { color: white; font-size: 0.85rem; font-weight: 500; text-align: center; }
.lb-prompt {
  max-width: 600px; width: 100%; font-size: 0.72rem; color: rgba(255,255,255,0.6);
  text-align: left; direction: ltr; line-height: 1.6;
  background: rgba(255,255,255,0.07); border-radius: 6px;
  padding: 12px 16px; min-height: 72px; max-height: 120px; overflow-y: auto;
}
.lb-scores {
  max-width: 600px; width: 100%;
  background: rgba(255,255,255,0.1); border-radius: 8px; padding: 12px 16px;
}
.lb-scores-title { font-size: 0.72rem; color: var(--gold); font-weight: 500; margin-bottom: 8px; letter-spacing: 0.08em; text-transform: uppercase; }
.lb-scores-grid {
  display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 4px 16px;
  font-size: 0.74rem; margin-bottom: 8px; align-items: center;
}
.lb-scores-grid span { color: rgba(255,255,255,0.6); }
.lb-scores-grid strong { color: white; }
.lb-review { font-size: 0.74rem; color: rgba(255,255,255,0.75); line-height: 1.5; font-style: italic; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 8px; margin-top: 4px; }
.lightbox-actions { display: flex; gap: 10px; }
.lb-btn {
  padding: 8px 20px; border: none; border-radius: 6px;
  font-family: 'Noto Sans', sans-serif; font-size: 0.8rem;
  cursor: pointer; transition: opacity 0.15s; font-weight: 500;
}
.lb-btn.gold { background: var(--gold); color: var(--ink); }
.lb-btn.close { background: rgba(255,255,255,0.15); color: white; }
.lb-btn:hover { opacity: 0.85; }
.lightbox-close {
  position: absolute; top: -14px; left: -14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: white; border: none;
  font-size: 1rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: white; border: none;
  font-size: 1.2rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background 0.15s;
}
.lb-nav:hover { background: rgba(255,255,255,0.3); }
.lb-nav.prev { right: calc(100% + 12px); }
.lb-nav.next { left: calc(100% + 12px); }

/* ── v20 additions ── */
.hdr-btn {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(200,169,110,0.4); color: var(--cream);
  border-radius: 6px; padding: 7px 14px; font-family: 'Noto Sans', sans-serif; font-size: 0.78rem; cursor: pointer;
}
.hdr-btn:hover { border-color: var(--gold); }
.mock-pill { background: var(--red); color: white; font-size: 0.6rem; padding: 2px 8px; border-radius: 100px; letter-spacing: 0.08em; display: none; }
.mock-pill.show { display: inline-block; }

.sessions-drawer {
  position: fixed; top: 0; bottom: 0; right: 0; width: 360px; max-width: 92vw; z-index: 1800;
  background: var(--cream); border-left: 3px solid var(--gold); box-shadow: -12px 0 40px rgba(0,0,0,0.25);
  display: none; flex-direction: column;
}
.sessions-drawer.open { display: flex; }
.sd-head { background: var(--ink); color: var(--cream); padding: 16px 20px; display: flex; align-items: center; gap: 10px; }
.sd-head h2 { font-family: 'Playfair Display', serif; font-size: 1.05rem; flex: 1; }
.sd-close { background: none; border: none; color: var(--cream); font-size: 1.1rem; cursor: pointer; }
.sd-list { overflow-y: auto; flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sd-empty { color: var(--muted); font-size: 0.8rem; text-align: center; padding: 30px 10px; }
.sd-item {
  display: flex; gap: 10px; align-items: center; background: white; border: 1.5px solid var(--warm);
  border-radius: 8px; padding: 8px; cursor: pointer; text-align: right; font-family: inherit; width: 100%;
}
.sd-item:hover { border-color: var(--gold); }
.sd-item.current { border-color: var(--accent); }
.sd-thumb { width: 52px; height: 52px; border-radius: 5px; background: var(--warm); object-fit: cover; flex-shrink: 0; }
.sd-meta { flex: 1; min-width: 0; font-size: 0.72rem; color: var(--muted); line-height: 1.5; }
.sd-title { font-size: 0.8rem; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-status { font-size: 0.6rem; padding: 1px 6px; border-radius: 4px; font-weight: 600; background: var(--warm); color: var(--ink); }
.sd-status.complete { background: #e8f5e9; color: #388e3c; }
.sd-status.interrupted, .sd-status.cancelled, .sd-status.error { background: #fdecea; color: var(--red); }

.cost-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; margin-top: 8px; }
.cost-table th { text-align: center; font-size: 0.62rem; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 5px 4px; border-bottom: 1px solid var(--warm); }
.cost-table th:first-child, .cost-table td:first-child { text-align: right; }
.cost-table td { text-align: center; padding: 6px 4px; border-bottom: 1px solid var(--warm); }
.cost-table tr.total td { font-weight: 700; border-top: 2px solid var(--warm); border-bottom: none; color: var(--accent); }
.cost-note { font-size: 0.64rem; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* ── v21 / Phase 2: constraints panel, diffs, violations ── */
.cp { background: white; border: 1.5px solid var(--gold); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.cp-title { font-family: 'Playfair Display', serif; font-size: 0.98rem; }
.cp-sub { font-size: 0.7rem; color: var(--muted); margin: 2px 0 12px; }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.cp-field { min-width: 0; }
.cp-field:nth-child(1), .cp-field:has([data-field="bannedShotTypes"]), .cp-field:has([data-field="extraRules"]) { grid-column: 1 / -1; }
.cp-label { font-size: 0.68rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.cp-src { font-size: 0.56rem; padding: 1px 6px; border-radius: 100px; background: var(--warm); color: var(--ink); font-weight: 500; margin-inline-end: 4px; }
.cp-src-notes { background: #e3eefc; color: #1d4f91; }
.cp-src-user { background: var(--gold-light); color: #8a6010; }
.cp-src-feedback { background: #e8f5e9; color: #388e3c; }
.cp-select, .cp-text, .cp-add, .cp-ban-label, .cp-ban-terms {
  width: 100%; border: 1.5px solid var(--warm); border-radius: 6px; padding: 5px 8px;
  font-family: 'Noto Sans', sans-serif; font-size: 0.75rem; background: white; outline: none;
}
.cp-select:focus, .cp-text:focus, .cp-add:focus, .cp-ban-label:focus, .cp-ban-terms:focus { border-color: var(--gold); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.cp-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--cream); border: 1px solid var(--warm); border-radius: 100px; padding: 2px 4px 2px 10px; font-size: 0.72rem; }
.cp-chip button, .cp-x { border: none; background: none; cursor: pointer; color: var(--red); font-size: 0.9rem; line-height: 1; padding: 0 4px; }
.cp-tog { border: 1.5px solid var(--warm); background: white; border-radius: 100px; padding: 3px 10px; font-size: 0.7rem; cursor: pointer; font-family: inherit; }
.cp-tog.on { background: var(--accent); border-color: var(--accent); color: white; }
.cp-check { font-size: 0.74rem; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cp-ban { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 6px; margin-bottom: 5px; align-items: center; }
.cp-dirty { margin-top: 12px; padding: 8px 12px; background: #fff7e0; border: 1px solid var(--gold); border-radius: 6px; font-size: 0.74rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-apply { background: var(--accent); color: white; border: none; border-radius: 6px; padding: 5px 12px; font-size: 0.72rem; cursor: pointer; font-family: inherit; }
.cp-apply:disabled { opacity: 0.4; cursor: not-allowed; }
.cp-err { background: #fdecea; color: var(--red); border-radius: 6px; padding: 6px 10px; font-size: 0.72rem; margin-bottom: 8px; }

.df { background: #f4f9f4; border: 1.5px solid #9fcfa1; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 0.75rem; }
.df-head { font-weight: 600; margin-bottom: 6px; }
.df-msg { font-weight: 400; color: var(--muted); }
.df-sec { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 8px 0 3px; }
.df-line { line-height: 1.55; padding: 2px 0; border-bottom: 1px dotted #cfe3d0; }
.df-none { color: var(--muted); font-style: italic; }
.df del { background: #fdecea; color: #a33; text-decoration: line-through; padding: 0 3px; border-radius: 3px; }
.df ins { background: #e0f3e0; color: #1d6b25; text-decoration: none; padding: 0 3px; border-radius: 3px; }

.pr-viol { background: #fdecea; color: #a33; border-radius: 5px; padding: 6px 10px; font-size: 0.7rem; line-height: 1.5; margin-top: 6px; }

/* ── Phase 3: targeted QA results ── */
.hdr-sel { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--gold-light); margin-inline-start: 12px; }
.hdr-sel select { background: rgba(255,255,255,0.1); color: var(--cream); border: 1px solid rgba(200,169,110,0.4); border-radius: 6px; padding: 5px 8px; font-family: inherit; font-size: 0.74rem; }
.hdr-sel option { color: var(--ink); }
.report-row.t { grid-template-columns: 1fr repeat(7, 54px); }
.ck-list { margin-top: 6px; }
.ck-row { display: grid; grid-template-columns: 22px 120px 1fr; gap: 6px; padding: 5px 4px; font-size: 0.72rem; line-height: 1.5; border-bottom: 1px dotted var(--warm); }
.ck-name { font-weight: 600; }
.ck-fail { background: #fdecea; } .ck-fail .ck-name { color: var(--red); }
.ck-err { background: #fff7e0; } .ck-skip { color: var(--muted); } .ck-info { color: var(--muted); font-style: italic; }
.ck-fail-line { font-size: 0.72rem; line-height: 1.5; }
.rc.ck-fail, .rc.ck-err { background: none; }
.lb-scores .ck-row { border-bottom-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.lb-scores .ck-fail { background: rgba(192,74,42,0.25); } .lb-scores .ck-fail .ck-name { color: #ff9a85; }
.lb-scores .ck-err { background: rgba(200,169,110,0.2); } .lb-scores .ck-skip, .lb-scores .ck-info { color: rgba(255,255,255,0.5); }
.lb-scores { max-height: 300px; overflow-y: auto; }

/* ── user override of Agent D (logged to the test set) ── */
.card-override { padding: 4px 11px 8px; }
.ov-btn { width: 100%; padding: 4px; border: 1.5px dashed var(--warm); border-radius: 5px; background: white; font-size: 0.68rem; cursor: pointer; font-family: inherit; color: var(--ink); }
.ov-btn:hover { border-color: var(--gold); }
.ov-form { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ov-form[hidden], .ov-btn[hidden] { display: none; }
.ov-defect, .ov-note { width: 100%; font-size: 0.68rem; padding: 3px 6px; border: 1.5px solid var(--warm); border-radius: 5px; font-family: inherit; }
.ov-note { display: block; resize: none; overflow: hidden; min-height: 2.9em; line-height: 1.4; box-sizing: border-box; }
.ov-actions { display: flex; gap: 4px; }
.ov-save { flex: 1; background: var(--accent); color: white; border: none; border-radius: 5px; padding: 4px; font-size: 0.68rem; cursor: pointer; }
.ov-cancel { background: var(--warm); border: none; border-radius: 5px; padding: 4px 8px; cursor: pointer; }
.ov-done { font-size: 0.68rem; color: var(--accent); font-weight: 600; }
.ov-saved { font-weight: 400; color: var(--muted); }

.ck-warn { background: #fffbe6; } .ck-warn .ck-name { color: #8a6010; }
.lb-scores .ck-warn { background: rgba(200,169,110,0.15); }

/* ── Phase 4: risk badges ── */
.scene-meta { margin-top: 4px; font-size: 0.68rem; }
.risk-badge { display: inline-block; padding: 1px 8px; border-radius: 100px; font-weight: 600; font-size: 0.64rem; }
.risk-low { background: #e8f5e9; color: #388e3c; } .risk-medium { background: #fff7e0; color: #8a6010; } .risk-high { background: #fdecea; color: var(--red); }
.mech-note { color: var(--muted); }

/* ── construction facts (editable in the plan dialog) ── */
.mf-box { margin-top: 10px; padding: 10px 12px; background: #fffdf5; border: 1.5px solid var(--gold-light); border-radius: 8px; }
.mf-title { font-size: 0.76rem; font-weight: 600; margin-bottom: 6px; }
.mf-hint { font-weight: 400; color: var(--muted); font-size: 0.68rem; }
.mf-row { display: flex; gap: 6px; margin-bottom: 4px; }
.mf-input, .mf-add { flex: 1; width: 100%; font-size: 0.74rem; padding: 4px 8px; border: 1.5px solid var(--warm); border-radius: 5px; font-family: inherit; background: white; }
.mf-del { border: none; background: none; color: var(--red); font-size: 1rem; cursor: pointer; }
.mf-handling { margin-top: 6px; font-size: 0.7rem; color: var(--muted); font-style: italic; }

/* attempts strip: every attempt of a card, kept and discarded */
.card-attempts { padding: 6px 11px 10px; border-top: 1px dashed var(--warm); }
.att-title { font-size: 0.68rem; font-weight: 600; margin-bottom: 4px; }
.att-row { display: flex; gap: 6px; flex-wrap: wrap; }
.att { width: 104px; font-size: 0.62rem; border: 1.5px solid var(--warm); border-radius: 6px; padding: 3px; background: white; }
.att img { width: 100%; height: 84px; object-fit: cover; border-radius: 4px; cursor: zoom-in; display: block; }
.att-ok { border-color: #6fcf97; } .att-bad { border-color: #e8806a; } .att-kept { box-shadow: 0 0 0 2px var(--gold); }
.att-meta { margin-top: 2px; font-weight: 600; } .att-why { color: var(--muted); min-height: 1.2em; }
.att .ov-form select, .att .ov-form textarea { width: 100%; font-size: 0.62rem; }

/* lessons panel */
.ls-btn { position: fixed; bottom: 14px; left: 14px; z-index: 50; padding: 8px 12px; border-radius: 20px; border: 1.5px solid var(--gold); background: white; font-family: inherit; cursor: pointer; font-size: 0.8rem; }
.ls-panel { position: fixed; bottom: 56px; left: 14px; z-index: 51; width: min(420px, 92vw); max-height: 60vh; overflow: auto; background: white; border: 1.5px solid var(--warm); border-radius: 10px; padding: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 0.8rem; }
.ls-panel[hidden] { display: none; }
.ls-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ls-note { color: var(--muted); font-size: 0.72rem; margin-bottom: 8px; }
.ls-item { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--warm); }
.ls-off { opacity: .45; } .ls-scope { background: var(--gold-light); padding: 0 5px; border-radius: 4px; font-size: 0.66rem; }
.ls-item button, .ls-head button { border: none; background: none; cursor: pointer; }
.ls-toast { position: fixed; bottom: 60px; right: 14px; z-index: 60; max-width: 360px; background: #2b2b2b; color: white; padding: 10px 14px; border-radius: 8px; font-size: 0.78rem; }
.ls-prop { background: #ffe9b0; padding: 0 5px; border-radius: 4px; font-size: 0.66rem; }

.fsel { width: 100%; padding: 7px 9px; border: 1.5px solid var(--warm); border-radius: 6px; background: white; font-family: inherit; font-size: 0.82rem; }

/* quick / pro, language, estimate */
.mode-bar { display: flex; align-items: center; gap: 12px; padding: 0 0 10px; }
.mode-toggle { display: inline-flex; border: 1.5px solid var(--gold); border-radius: 20px; overflow: hidden; }
.mode-toggle button { padding: 6px 16px; border: none; background: white; font-family: inherit; font-size: 0.8rem; cursor: pointer; }
.mode-toggle button.on { background: var(--gold); color: white; }
.mode-hint { color: var(--muted); font-size: 0.74rem; }
body.mode-quick .pro-only { display: none !important; }
body:not(.mode-quick) .quick-only { display: none !important; }
.sublabel { font-size: 0.72rem; color: var(--muted); margin-bottom: 6px; display: block; }
.estimate { margin-top: 6px; font-size: 0.74rem; color: var(--muted); }
.hdr-lang { border: 1px solid var(--warm); border-radius: 6px; padding: 3px 6px; font-family: inherit; font-size: 0.74rem; background: white; }

/* minimal sign-in pages (replaced by the UI facelift) */
.auth-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: #111; color: #eee; font-family: 'Noto Sans', sans-serif; }
.auth-card { width: min(92vw, 360px); padding: 28px; background: #1b1b1b; border-radius: 12px; }
.auth-card h1 { font-family: 'Playfair Display', serif; margin: 0 0 18px; }
.auth-card label { display: block; margin-bottom: 12px; font-size: 13px; }
.auth-card input { display: block; width: 100%; margin-top: 4px; padding: 10px; border-radius: 8px; border: 1px solid #444; background: #111; color: #eee; box-sizing: border-box; }
.auth-card button { width: 100%; padding: 10px; border: 0; border-radius: 8px; background: #e8d9b5; color: #111; font-weight: 500; cursor: pointer; }
.auth-card a { color: #e8d9b5; font-size: 13px; }
.auth-msg { min-height: 1.2em; color: #f2a0a0; font-size: 13px; }
.auth-note { color: #888; font-size: 12px; }
.hdr-account { font-size: 12px; color: #aaa; margin: 0 8px; }

/* Credits statement page (credits.html) */
.credits-card { width: min(94vw, 640px); }
.credits-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.credits-table th, .credits-table td { text-align: start; padding: 6px 6px; border-bottom: 1px solid #333; vertical-align: top; }
.credits-table .num { text-align: end; white-space: nowrap; direction: ltr; }