:root {
  --color-ink: oklch(22% 0.02 255);
  --color-ink-2: oklch(40% 0.015 255);
  --color-muted: oklch(50% 0.013 255);
  --color-faint: oklch(54% 0.013 255);
  --color-line: oklch(90% 0.008 255);
  --color-line-2: oklch(94% 0.006 255);
  --color-paper: oklch(98.2% 0.004 255);
  --color-surface: oklch(100% 0 0);
  --color-rail: oklch(96.5% 0.006 255);
  --color-accent: oklch(52% 0.20 258);
  --color-accent-2: oklch(46% 0.21 258);
  --color-accent-soft: oklch(96% 0.03 258);
  --color-warn: oklch(58% 0.16 60);
  --color-danger: oklch(52% 0.20 27);
  --color-ok: oklch(56% 0.14 150);
  --radius: 10px;
  --radius-sm: 7px;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper);
  margin: 0;
}

.public-bar {
  padding: 14px 32px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}

.public-brand {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
}

h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink-2);
  margin: 28px 0 10px;
}

p {
  color: var(--color-ink-2);
}

ul {
  padding-left: 20px;
}

a {
  color: var(--color-accent);
}

form label,
fieldset legend {
  display: block;
  font-size: 12.5px;
  color: var(--color-ink-2);
  font-weight: 500;
  margin: 16px 0 8px;
}

form input,
form textarea,
form select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-ink);
}

form input:focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

form textarea {
  min-height: 5rem;
}

fieldset {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 16px 0 8px;
}

.checkbox-option {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-ink);
  padding: 4px 0;
  margin: 0;
}

button {
  margin-top: 20px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

button:hover {
  background: var(--color-accent-2);
}

img {
  display: block;
  margin: 16px 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

#status {
  font-size: 13px;
  color: var(--color-ink-2);
  margin-top: 12px;
}

#file-list {
  font-size: 13px;
  color: var(--color-ink-2);
}