:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font: 14px/1.5 -apple-system, system-ui, "Segoe UI", sans-serif; max-width: 820px; margin: 0 auto; padding: 0 20px 60px; color: #222; }
h1 { font-weight: 600; margin: 24px 0 4px; }
.sub { color: #666; margin: 0 0 22px; }
code { background: #f3f3f3; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }

/* Topnav */
.topnav { display: flex; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid #e5e5e5; margin-bottom: 8px; }
.topnav strong { margin-right: auto; }
.topnav a { color: #06a; text-decoration: none; font-size: 13px; }
.topnav a.active { font-weight: 600; }
.topnav a:hover { text-decoration: underline; }

/* Form */
fieldset { border: 1px solid #ddd; border-radius: 6px; padding: 14px 18px; margin: 0 0 18px; }
legend { padding: 0 6px; color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
label { display: block; margin: 10px 0; }
label > span { display: block; font-size: 12px; color: #555; margin-bottom: 4px; }
input, select { width: 100%; padding: 7px 9px; border: 1px solid #ccc; border-radius: 4px; font: inherit; background: #fff; color: #222; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subdomain-row { display: flex; align-items: center; gap: 6px; }
.domain-hint { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #888; white-space: nowrap; }

button, .btn-primary, .btn-secondary { background: #0a5; color: #fff; border: 0; border-radius: 4px; padding: 10px 18px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
button:disabled { background: #888; cursor: not-allowed; }
.btn-secondary { background: transparent; color: #06a; padding: 10px 14px; }
.btn-secondary:hover { text-decoration: underline; }

/* Banner */
.banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 6px; margin: 18px 0; border: 1px solid transparent; }
.banner > div:first-child:not(.spinner) { flex: 1; }
.banner > div { flex: 1; }
.banner .muted { color: #666; font-size: 13px; }
.banner--progress { background: #fff7e0; border-color: #ffe28a; color: #5a3d00; }
.banner--ok { background: #e8f7ee; border-color: #9bd3b1; color: #0a5; }
.banner--err { background: #fde9e9; border-color: #e3a4a4; color: #a00; }

/* Spinner */
.spinner { width: 18px; height: 18px; border: 2px solid #d4b657; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; flex: 0 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Table */
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 13px; }
th { font-weight: 600; color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
td a { color: #06a; text-decoration: none; }
td a:hover { text-decoration: underline; }
.destroy { background: transparent; color: #c00; padding: 4px 10px; font-size: 12px; border: 1px solid #e3a4a4; border-radius: 4px; }
.destroy:hover { background: #fde9e9; }
.empty { padding: 28px; border: 1px dashed #ccc; border-radius: 6px; text-align: center; color: #777; }

@media (prefers-color-scheme: dark) {
  body { color: #ddd; background: #111; }
  .topnav { border-color: #2a2a2a; }
  code { background: #1f1f1f; }
  fieldset { border-color: #333; }
  input, select { background: #1a1a1a; color: #eee; border-color: #333; }
  th, td { border-color: #222; }
  .empty { border-color: #2a2a2a; color: #888; }
  .banner--progress { background: #2a2200; border-color: #5a3d00; color: #ffd76a; }
  .banner--ok { background: #0d2a17; border-color: #1f5a32; color: #6ee0a1; }
  .banner--err { background: #2a0d0d; border-color: #5a1f1f; color: #f08e8e; }
}