:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #f4f6f8;
}

* { box-sizing: border-box; }
body { margin: 0; }
.app { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
h1 { margin-bottom: 6px; }
.lead { margin-top: 0; color: #5f6b76; }
.tabs { display: flex; gap: 8px; margin: 24px 0 16px; }
.tab, .actions button {
  border: 1px solid #b8c2cc;
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.tab.active { border-color: #126bc5; background: #eaf4ff; }
.panel { display: none; background: white; border: 1px solid #d9dee3; border-radius: 10px; padding: 20px; }
.panel.active { display: block; }
input[type="file"] { width: 100%; margin: 12px 0; padding: 14px; border: 1px solid #cbd2d9; border-radius: 8px; }
.field { display: block; margin: 14px 0; font-weight: 700; }
.field input, .field select { width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #cbd2d9; border-radius: 8px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.actions button { background: #0b72ce; color: white; border: 0; }
.actions .secondary { background: #4b5563; }
pre { white-space: pre-wrap; word-break: break-word; background: #111827; color: #f9fafb; padding: 14px; border-radius: 8px; min-height: 100px; overflow: auto; }