/* Minimal reset + starter styles. No framework, no build step. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
body {
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  background: Canvas;
  color: CanvasText;
}
img, svg { display: block; max-width: 100%; }
input, button { font: inherit; }

.bar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid color-mix(in srgb, CanvasText 15%, transparent);
}
.bar h1 { font-size: 1.15rem; font-weight: 650; }
.authbox { display: flex; gap: .5rem; align-items: center; }

main { padding: clamp(1rem, 4vw, 2.5rem); max-width: 60rem; margin-inline: auto; display: grid; gap: 1.25rem; }
h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin-bottom: .75rem; }

.row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.row input { flex: 1 1 12rem; padding: .5rem .7rem; border-radius: .5rem;
  border: 1px solid color-mix(in srgb, CanvasText 25%, transparent); background: Canvas; color: inherit; }

.btn {
  display: inline-block; padding: .5rem .9rem; border-radius: .5rem; border: 0; cursor: pointer;
  background: color-mix(in srgb, CanvasText 88%, Canvas); color: Canvas; text-decoration: none; font-weight: 550;
}
.btn-quiet { background: transparent; color: inherit; border: 1px solid color-mix(in srgb, CanvasText 25%, transparent); }

.items { list-style: none; padding: 0; display: grid; gap: .6rem; }
.items li { padding: .75rem .9rem; border-radius: .6rem;
  border: 1px solid color-mix(in srgb, CanvasText 15%, transparent); }
.items p { margin-top: .3rem; opacity: .85; }

.muted { opacity: .65; font-size: .9rem; }
.error { color: #b3261e; font-size: .9rem; }
@media (prefers-color-scheme: dark) { .error { color: #f2b8b5; } }