:root { color-scheme: light dark; }

body {
  margin: 0 auto;
  max-width: 40em;
  padding: 24px 16px 48px;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #fff;
  color: #1d1d1f;
}

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #e8e8e8; }
  input, textarea { background: #1c1c1e; color: #e8e8e8; border-color: #444; }
  .notice { background: #1c1c1e; border-color: #333; }
  a { color: #9cc3ff; }
}

h1 { font-size: 24px; margin: 0 0 16px; }

.notice {
  border: 1px solid #ddd;
  background: #f6f6f7;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 16px 0;
}

.warning { font-weight: 600; }

label { display: block; margin: 16px 0 4px; font-weight: 600; }
label .opt { font-weight: 400; color: #888; }

input, textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #bbb;
  border-radius: 8px;
  font: inherit;
}

textarea { min-height: 8em; resize: vertical; }

button {
  margin-top: 20px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #0a62d0;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.tracking {
  font: 600 28px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  margin: 12px 0;
}

h2 { font-size: 19px; margin: 28px 0 8px; }
.muted { color: #888; }
.draft {
  background: #fff3cd;
  color: #5c4400;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
}
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 1px solid #ddd; }
code { font-size: 0.92em; }

@media (prefers-color-scheme: dark) {
  .draft { background: #3d3214; color: #ffd98a; }
  th, td { border-color: #333; }
}