:root {
  --bg: #fafafa;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --brand: #2563eb;
  --border: #e5e7eb;
  --good: #059669;
  --warn: #b45309;
  --error: #b91c1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.wrap {
  max-width: 920px;
  margin: 2rem auto;
  padding: 0 1rem;
}

header { margin-bottom: 1rem; }

h1 {
  font-size: clamp(1.3rem, 2.2vw + 1rem, 2rem);
  margin: 0 0 .5rem 0;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.grid { display: grid; gap: 1rem; }
@media (min-width: 980px) { .grid-2 { grid-template-columns: 1.2fr .8fr; } }

label { display: block; font-weight: 600; margin-bottom: .35rem; }
.muted { color: var(--muted); }

textarea {
  width: 100%;
  min-height: 170px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem .9rem;
  background: #fff;
  resize: vertical;
}

input[type="file"] {
  display: block;
  width: 100%;
  padding: .6rem .75rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}

.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

button {
  appearance: none;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  border-radius: 10px;
  padding: .7rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .02s ease, filter .15s ease;
}
button:hover { filter: brightness(1.05); }
button:active { transform: translateY(1px); }

.btn-secondary {
  background: #fff;
  color: var(--brand);
  border-color: var(--border);
}

.status {
  font-size: .93rem;
  padding: .4rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}
.status.ok { border-color: #d1fae5; background: #ecfdf5; color: var(--good); }
.status.warn { border-color: #fde68a; background: #fffbeb; color: var(--warn); }
.status.err { border-color: #fecaca; background: #fef2f2; color: var(--error); }

img.plot {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: .5rem;
  display: none;
}

.results p { margin: .25rem 0; }

footer {
  margin: 2rem 0 3rem;
  color: var(--muted);
  font-size: .95rem;
  text-wrap: balance;
}
footer a { color: var(--brand); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* simple content page spacing */
.prose h1 { margin: 0 0 .25rem; }
.prose h2 { margin: 1.25rem 0 .25rem; font-size: 1.2rem; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.prose p { margin: .4rem 0; }
.nav-inline { margin-top: .75rem; font-size: .95rem; }
.nav-inline a { color: var(--brand); text-decoration: none; }
.nav-inline a:hover { text-decoration: underline; }