.batch19-dev-shell {
  --b19-ink: #14272d;
  --b19-muted: #5e7379;
  --b19-paper: #fbfdfc;
  --b19-panel: #eef6f3;
  --b19-line: #c9d9d4;
  --b19-accent: #087e78;
  --b19-danger: #b83a32;
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--b19-line);
  border-block-start: 5px solid var(--b19-accent);
  border-radius: 18px 6px 18px 6px;
  color: var(--b19-ink);
  background: var(--b19-paper);
  box-shadow: 0 14px 36px rgb(20 39 45 / 10%);
}

[data-theme="dark"] .batch19-dev-shell {
  --b19-ink: #e9f5f1;
  --b19-muted: #a9bdb7;
  --b19-paper: #102025;
  --b19-panel: #162c32;
  --b19-line: #355057;
  --b19-accent: #4ad7c8;
  --b19-danger: #ff8d82;
}

.batch19-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  gap: 18px;
  align-items: end;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--b19-line);
}

.batch19-heading > div { padding-inline-start: 14px; border-inline-start: 4px solid #b8e043; }
.batch19-heading span { display: block; margin-block-end: 5px; color: var(--b19-accent); font: 800 11px var(--mono); letter-spacing: .12em; }
.batch19-heading h2 { margin: 0; font-size: clamp(23px, 3vw, 34px); letter-spacing: -.035em; }
.batch19-heading p { margin: 0; color: var(--b19-muted); font-size: 14px; line-height: 1.7; }
.batch19-controls, .batch19-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.batch19-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.batch19-controls label, .batch19-editor { display: grid; gap: 7px; min-width: 0; font-weight: 700; }
.batch19-dev-shell input, .batch19-dev-shell select, .batch19-dev-shell textarea { min-width: 0; border: 1px solid var(--b19-line); border-radius: 8px; color: var(--b19-ink); background: var(--b19-paper); }
.batch19-dev-shell input, .batch19-dev-shell select { min-height: 44px; padding: 8px 10px; }
.batch19-dev-shell textarea { min-height: 280px; padding: 12px; font: 13px/1.6 var(--mono); resize: vertical; }
.batch19-file-panel { align-content: start; min-height: 280px; padding: 16px; border: 1px solid var(--b19-line); border-radius: 10px; background: var(--b19-panel); }
.batch19-file-panel h3 { margin: 0; font-size: 18px; }
.batch19-file-panel label { display: grid; gap: 8px; }
.batch19-file-panel input[type="file"] { width: 100%; min-height: 48px; padding: 8px; background: var(--b19-paper); cursor: pointer; }
.batch19-file-meta, .batch19-file-note { margin: 0; overflow-wrap: anywhere; font-weight: 500; line-height: 1.6; }
.batch19-file-meta { color: var(--b19-ink); }
.batch19-file-note { color: var(--b19-muted); font-size: 13px; }
.batch19-result { min-width: 0; padding: 14px; border: 1px solid var(--b19-line); border-radius: 10px; background: var(--b19-panel); }
.batch19-result-head { display: flex; justify-content: space-between; gap: 12px; margin-block-end: 8px; font-weight: 800; }
.batch19-result-head span:last-child { color: var(--b19-muted); font: 11px var(--mono); }
.batch19-result pre { min-height: 280px; max-height: 560px; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.batch19-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.batch19-status { margin: 0; color: var(--b19-muted); }
.batch19-status[data-tone="error"] { color: var(--b19-danger); }
.batch19-status[data-tone="success"] { color: var(--b19-accent); }
.batch19-dev-shell :where(button, input, select, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--b19-accent) 45%, transparent); outline-offset: 3px; }

@media (max-width: 760px) {
  .batch19-heading, .batch19-grid { grid-template-columns: 1fr; }
  .batch19-dev-shell { padding: 16px; }
}