.batch18-data-uri-tool .b18-data-uri-grid,
.batch18-data-uri-tool .b18-data-uri-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.batch18-data-uri-tool .b18-data-uri-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.batch18-data-uri-tool .b18-data-uri-tabs button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.batch18-data-uri-tool .b18-data-uri-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  color: var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.batch18-data-uri-tool .b18-data-uri-tab-panel {
  margin-top: 14px;
}

.batch18-data-uri-tool .b18-data-uri-tab-panel[hidden] {
  display: none;
}

.batch18-data-uri-tool .b18-data-uri-common-actions {
  margin-top: 14px;
}

.batch18-data-uri-tool .b18-data-uri-panel,
.batch18-data-uri-tool .b18-data-uri-output {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.batch18-data-uri-tool .b18-data-uri-output { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), transparent 72px), var(--surface); }
.batch18-data-uri-tool textarea { min-height: 220px; margin: 0; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.batch18-data-uri-tool .b18-data-uri-code { min-height: 100px; padding: 12px; overflow: auto; background: color-mix(in srgb, var(--surface-2) 86%, var(--surface)); white-space: pre-wrap; overflow-wrap: anywhere; }
.batch18-data-uri-tool .b18-output-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.batch18-data-uri-tool .b18-output-heading strong { color: var(--text); }

@media (max-width: 760px) {
  .batch18-data-uri-tool .b18-data-uri-grid,
  .batch18-data-uri-tool .b18-data-uri-output-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .batch18-data-uri-tool *,
  .batch18-data-uri-tool *::before,
  .batch18-data-uri-tool *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}