/* npanel — phone first. From 1024px: desktop layout (top pill nav, tables). */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #15181d;
  --muted: #5d6672;
  --border: #dde1e6;
  --primary: #1f5eff;
  --primary-text: #ffffff;
  --danger-bg: #fdecec;
  --danger-text: #a11a1a;
  --focus: #1f5eff;
  --radius: 12px;
  --tap: 48px;
  --gutter: 16px;
  --nav-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --surface: #181c22;
    --text: #e7eaee;
    --muted: #98a2ae;
    --border: #2a3038;
    --primary: #5b8cff;
    --primary-text: #0b0e12;
    --danger-bg: #3a1717;
    --danger-text: #ffb4b4;
    --focus: #8fb0ff;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
h1, h2 { line-height: 1.25; margin: 0; }
h2 { font-size: 1.1rem; }
p { margin: 0; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px var(--gutter);
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar form { margin: 0; }
.brand { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.brand-lg { font-size: 2rem; text-align: center; margin-bottom: 24px; }

/* Bottom tab bar on phones */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.nav a, .nav .soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tap);
  font-size: 0.75rem; color: var(--muted); text-decoration: none;
}
.nav svg { width: 24px; height: 24px; fill: currentColor; }
.nav a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.nav .soon { opacity: 0.4; }

.main { padding: var(--gutter); max-width: 720px; margin: 0 auto; display: grid; gap: var(--gutter); }
.page-title { font-size: 1.5rem; }
.foot { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 8px var(--gutter) 16px; }

/* Cards and tiles */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gutter);
}
.stack { display: grid; gap: 14px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; display: grid; gap: 2px;
}
.tile-num { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-label { color: var(--muted); font-size: 0.85rem; }
.empty { text-align: left; }

/* Forms */
.field { display: grid; gap: 6px; font-weight: 500; }
.field input {
  min-height: var(--tap);
  width: 100%;
  padding: 10px 12px;
  font: inherit; font-size: 1rem; /* 16px stops iOS zoom on focus */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.alert { background: var(--danger-bg); color: var(--danger-text); padding: 10px 12px; border-radius: 10px; }

.btn {
  min-height: var(--tap); padding: 0 18px;
  font: inherit; font-weight: 600;
  border-radius: 10px; border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--primary); color: var(--primary-text); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); min-height: 40px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Login */
.login-body { padding: 0; }
.login { min-height: 100dvh; display: grid; align-content: center; padding: var(--gutter); max-width: 420px; margin: 0 auto; }

/* Server cards */
.list { display: grid; gap: 12px; }
.server { display: grid; gap: 10px; }
.server-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.server-head h2 { overflow-wrap: anywhere; }
.badge { font-size: 0.8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.badge-ok { background: #def7e5; color: #11612b; }
.badge-off { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
@media (prefers-color-scheme: dark) {
  .badge-ok { background: #123522; color: #8be0a8; }
}
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.facts div { min-width: 0; }
.facts dt { color: var(--muted); font-size: 0.8rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.small { font-size: 0.85rem; }

/* Page header, links */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head .page-title { overflow-wrap: anywhere; }
.back { color: var(--muted); text-decoration: none; display: inline-flex; min-height: 40px; align-items: center; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.card-link { color: inherit; text-decoration: none; }
.card-link:hover { border-color: var(--primary); }
.mono, code, .log { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
code { font-size: 0.9em; overflow-wrap: anywhere; }
.facts .wide { grid-column: 1 / -1; }

/* Badges */
.badge-busy { background: #fff3d6; color: #7a5300; }
.badge-bad { background: var(--danger-bg); color: var(--danger-text); }
@media (prefers-color-scheme: dark) {
  .badge-busy { background: #3a2c08; color: #ffd27a; }
}

/* Forms */
.row { display: grid; grid-template-columns: 1fr 96px; gap: 12px; }
.field textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 0.9rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; resize: vertical;
}
.field-error { color: var(--danger-text); font-size: 0.875rem; font-weight: 500; }
.choice { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.choice legend { padding: 0; margin-bottom: 6px; }
.radio, .check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); padding: 10px 0; font-weight: 400; }
.radio input, .check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--primary); }
/* Show the key or password fields for the chosen option (no script needed). */
form:has(input[name="auth_type"][value="password"]:checked) .auth-key,
form:has(input[name="auth_type"][value="key"]:checked) .auth-password { display: none; }

/* Install log */
.job { display: grid; gap: 8px; }
.job-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.log {
  margin: 0; padding: 12px; max-height: 60vh; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Actions */
details summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; color: var(--muted); }
details[open] summary { margin-bottom: 8px; }
.btn-danger { background: var(--danger-text); color: var(--surface); }
.danger-zone { border-color: color-mix(in srgb, var(--danger-text) 35%, var(--border)); }

/* Scan / import */
.pick { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.pick input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--primary); }
.pick input:disabled + .pick-body { opacity: 0.6; }
.pick-body { display: grid; gap: 4px; min-width: 0; }
.pick-name { overflow-wrap: anywhere; font-weight: 600; }
.import-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.import-row .wide { flex-basis: 100%; }
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.alert-warn { background: #fff3d6; color: #7a5300; }
@media (prefers-color-scheme: dark) { .alert-warn { background: #3a2c08; color: #ffd27a; } }
.config { max-height: 70vh; white-space: pre; overflow: auto; }

/* Site form */
.hint { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.field select {
  min-height: var(--tap); width: 100%; padding: 8px 12px; font: inherit; font-size: 1rem;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
}
fieldset.card { margin: 0; min-width: 0; }
fieldset.card legend { font-weight: 700; font-size: 1.05rem; padding: 0 4px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-card {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600;
}
.choice-card input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.choice-card:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
textarea { width: 100%; padding: 10px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem;
  color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; resize: vertical; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.snippet-select { min-height: 40px; padding: 6px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; max-width: 100%; }
.row-ip { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.timeouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.advanced summary, details.card > summary { font-weight: 700; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions form { margin: 0; }
.preview-errors ul { margin: 6px 0 0; padding-left: 20px; }
.alert-ok { background: #def7e5; color: #11612b; }
@media (prefers-color-scheme: dark) { .alert-ok { background: #123522; color: #8be0a8; } }

/* Show fields for the chosen template (no script needed) */
.mode-proxy, .mode-redirect, .mode-static, .mode-custom, .mode-template { display: none; }
#site-form:has([name="template_id"][data-mode="proxy"]:checked) .mode-proxy,
#site-form:has([name="template_id"][data-mode="redirect"]:checked) .mode-redirect,
#site-form:has([name="template_id"][data-mode="static"]:checked) .mode-static,
#site-form:has([name="template_id"][data-mode="custom"]:checked) .mode-custom { display: grid; }
#site-form:has([name="template_id"][data-mode="proxy"]:checked) .mode-template,
#site-form:has([name="template_id"][data-mode="redirect"]:checked) .mode-template,
#site-form:has([name="template_id"][data-mode="static"]:checked) .mode-template { display: grid; }
#site-form:has([name="template_id"][data-mode="proxy"]:checked) details.mode-template,
#site-form:has([name="template_id"][data-mode="redirect"]:checked) details.mode-template,
#site-form:has([name="template_id"][data-mode="static"]:checked) details.mode-template { display: block; }
.ssl-only { display: none; }
#site-form:has([name="ssl"]:checked) .ssl-only { display: grid; }

/* Diff */
.diff { white-space: pre; }
.diff span { display: inline; }
.diff-del { color: var(--danger-text); background: var(--danger-bg); }
.diff-add { color: #11612b; background: #def7e5; }
@media (prefers-color-scheme: dark) { .diff-add { color: #8be0a8; background: #123522; } }
.snippet-body { max-height: 8em; overflow: hidden; }

/* DNS */
.zone-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 12px 14px; }
.record { display: grid; gap: 6px; }
.record-content { overflow-wrap: anywhere; margin: 0; }
/* Fields follow the record type: A/AAAA/CNAME can be proxied, MX has a priority, TXT has neither. */
.record-form:has(select[name="type"] option[value="TXT"]:checked) .proxied-only,
.record-form:has(select[name="type"] option[value="MX"]:checked) .proxied-only { display: none; }
.record-form:not(:has(select[name="type"] option[value="MX"]:checked)) .prio-only { display: none; }
.record-form:has(select[name="type"] option[value="A"]:checked, select[name="type"] option[value="AAAA"]:checked, select[name="type"] option[value="CNAME"]:checked):has(input[name="proxied"]:checked) .ttl-field { display: none; }
.proxy-pick { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 400; }
.proxy-pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }

/* Activity log */
.quick .btn-chip[aria-current="page"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); font-weight: 700; }
.audit { list-style: none; margin: 0; padding: 0; }
.card.audit { padding: 0; }
.audit-row { display: grid; gap: 4px; padding: 12px 14px; border-top: 1px solid var(--border); }
.audit-row:first-child { border-top: 0; }
.audit-row p { margin: 0; }
.audit-detail { overflow-wrap: anywhere; }
.audit-bad { color: var(--danger-text); }
.activity-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
form:has(input[name="auth_type"][value="keep"]:checked) .auth-key,
form:has(input[name="auth_type"][value="keep"]:checked) .auth-password { display: none; }

/* ---------- Desktop (from 1024px) ---------- */
.desk-only, .nav-desk { display: none; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); padding: 10px 12px;
}
.table td { padding: 14px 12px; border-top: 1px solid var(--border); vertical-align: middle; overflow-wrap: anywhere; }
.table tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-link { color: var(--text); font-weight: 600; text-decoration: none; }
.row-link:hover { color: var(--primary); text-decoration: underline; }

@media (min-width: 1024px) {
  :root { --pill: #eceef1; --accent: #ffb454; --accent-text: #2a1a00; --shadow: 0 6px 24px rgba(30, 40, 60, 0.07); }
  @media (prefers-color-scheme: dark) {
    :root { --pill: #232932; --shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  }
  body {
    padding-bottom: 0;
    background: linear-gradient(165deg, #fbf3e6 0%, #f3f4f7 45%, #edf0f6 100%) fixed;
  }
  @media (prefers-color-scheme: dark) {
    body { background: linear-gradient(165deg, #1b1812 0%, #12151a 45%, #0f1216 100%) fixed; }
  }
  .phone-only { display: none; }
  .desk-only { display: block; }
  .nav-desk { display: flex; }

  .topbar {
    top: 0; margin: 0; padding: 10px 20px; gap: 24px;
    border: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .brand { font-size: 1.25rem; }
  .nav {
    position: static; display: flex; flex: 1; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
    height: auto; padding: 0; background: transparent; border: 0;
  }
  .nav a, .nav .soon {
    flex-direction: row; min-height: 40px; padding: 0 16px;
    font-size: 0.95rem; border-radius: 999px; background: var(--pill); color: var(--text);
  }
  .nav svg { display: none; }
  .nav a:hover { background: color-mix(in srgb, var(--accent) 35%, var(--pill)); }
  .nav a[aria-current="page"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }

  .main { max-width: none; padding: 16px 20px 32px; }
  .card, .tile { box-shadow: var(--shadow); }
  .table-card { padding: 8px 16px; overflow-x: auto; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .foot { padding-bottom: 24px; }
}

/* Servers: stats, filters, table cells (Step 15) */
.statbar { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.statbar strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.filters { display: grid; gap: 12px; }
.filter-actions { display: flex; gap: 8px; align-items: end; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inline-add { display: grid; gap: 12px; }
.copy { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px;
  min-width: 28px; height: 28px; cursor: pointer; font: inherit; font-size: 0.85rem; line-height: 1; }
.copy:hover { color: var(--primary); border-color: var(--primary); }
.nginx { display: inline-block; min-width: 22px; text-align: center; font-weight: 700; font-size: 0.75rem;
  padding: 1px 5px; border-radius: 6px; background: #def7e5; color: #11612b; }
.pill-expiry { background: #fde4e4; color: #b3261e; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
@media (prefers-color-scheme: dark) {
  .nginx { background: #123522; color: #8be0a8; }
  .pill-expiry { background: #3a1717; color: #ffb4b4; }
}
.ipcell { white-space: nowrap; }
@media (min-width: 1024px) {
  .filters { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
  .inline-add { grid-template-columns: 1fr auto; align-items: end; }
}

/* Server details: key/value rows and the pop-up */
.info { display: grid; }
.info-title { margin: 4px 0 8px; font-size: 1.05rem; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.info-row { display: grid; grid-template-columns: minmax(90px, 1fr) 3fr; gap: 12px; align-items: baseline; padding: 12px 8px; border-bottom: 1px solid var(--border); }
.info-key { color: var(--muted); font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }
.info-val { all: unset; box-sizing: border-box; cursor: copy; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.info-val:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.info-val:focus-visible { outline: 3px solid var(--focus); }
.eyebrow { margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #b0762a; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(20, 24, 32, 0.55); display: grid; place-items: start center; padding: 8vh 16px 16px; overflow: auto; }
.modal { position: relative; width: 100%; max-width: 720px; background: var(--surface); border-radius: 18px; padding: 20px 22px 12px; display: grid; gap: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.modal-ip { font-size: 1.3rem; overflow-wrap: anywhere; padding-right: 40px; }
.modal-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.modal .info { margin-top: 12px; }
.info-val.copied::after { content: "  ✓ copied"; color: #11612b; font-weight: 400; font-size: 0.85rem; }

/* Tags (Step 16). Colors per tag come from /tags.css (.tag-<id>). */
.tag { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; background: var(--pill, #c8c7c7); color: #15181d; }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 6px; vertical-align: -4px; border: 1px solid color-mix(in srgb, var(--text) 15%, transparent); }
.field-color input[type="color"] { min-height: var(--tap); width: 72px; padding: 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.actions-col { text-align: right; white-space: nowrap; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 0.8rem; font-weight: 500; }
@media (min-width: 1024px) {
  .tag-add { grid-template-columns: 1fr auto auto; }
}

/* Accounts (Step 17) */
form.inline { display: inline; margin: 0; }
.filters-1 { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .filters-1 { grid-template-columns: 1fr auto; align-items: end; }
}

/* Zones (Step 18) */
.zone-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.favicon { width: 16px; height: 16px; flex: none; border-radius: 3px; }
.open-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--border);
  border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 0.8rem; }
.open-link:hover { color: var(--primary); border-color: var(--primary); }
.statbar-end { margin-left: auto; }
.filters-zones { grid-template-columns: 1fr; }
.check-col { width: 36px; padding-right: 0; }
.check-col input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.row-soon, .row-soon:hover { background: #fdecec; }
.num-soon { color: #b3261e; font-weight: 700; }
.card-soon { border-color: #e9b4b0; }
@media (prefers-color-scheme: dark) {
  .row-soon, .row-soon:hover { background: #2e1716; }
  .num-soon { color: #ffb4b4; }
  .card-soon { border-color: #6b2b28; }
}
.zones-bulk { display: none; }
.js .zones-tools:not(.active) { display: none !important; }
@media (min-width: 1024px) {
  .filters-zones { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
  .zones-tools { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
  .zones-tools select { min-height: 36px; padding: 4px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
  .zones-spacer { flex: 1; }
  .zones-count { color: var(--muted); }
}

/* Desktop density (Step 20): smaller type, compact controls, no full-width buttons */
@media (min-width: 1024px) {
  :root { --tap: 34px; }
  html { font-size: 14px; }
  body { font-size: 1rem; }
  .page-title { font-size: 1.35rem; }
  .brand { font-size: 1.1rem; }
  .nav a, .nav .soon { min-height: 32px; padding: 0 12px; font-size: 0.9rem; }
  .field { gap: 4px; }
  .field input, .field select, .field-color input[type="color"] { padding: 5px 10px; border-radius: 8px; }
  .field-color input[type="color"] { width: 56px; padding: 3px; }
  textarea { padding: 6px 10px; }
  .btn { padding: 0 12px; border-radius: 8px; }
  .btn-ghost { min-height: var(--tap); }
  .btn-sm { min-height: 26px; padding: 0 8px; }
  .btn-chip, .snippet-select { min-height: 30px; }
  .btn-chip { padding: 0 12px; }
  .zones-tools select { min-height: 30px; padding: 2px 8px; border-radius: 8px; }
  .btn-block { width: auto; justify-self: start; align-self: flex-start; }
  .radio input, .check input { width: 18px; height: 18px; }
  .pick input { width: 18px; height: 18px; }
  .choice-card input { width: 16px; height: 16px; }
}

/* Zone records (D32) */
.proxy-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 28px; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.proxy-btn.on { color: #f6821f; border-color: #f6821f; background: color-mix(in srgb, #f6821f 12%, transparent); }
.proxy-btn:hover { border-color: var(--primary); }
.proxy-col { width: 1%; white-space: nowrap; }
.records-table .record-content { max-width: 46ch; overflow-wrap: anywhere; word-break: break-word; }
.records-table td { vertical-align: middle; }
.form-actions { display: grid; gap: 10px; }
@media (min-width: 1024px) {
  .record-add { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .record-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
  .record-fields > label.field { min-width: 0; }
  .record-fields > label.field:nth-child(1) { flex: 0 0 110px; }
  .record-fields > label.field:nth-child(2) { flex: 1 1 140px; }
  .record-fields > label.field:nth-child(3) { flex: 2 1 240px; }
  .record-fields > .prio-only { flex: 0 0 90px; }
  .record-fields > .ttl-field { flex: 0 0 120px; }
  .record-fields > .proxied-only { flex: 0 0 auto; }
  .record-fields .hint { display: none; }
  .proxy-pick { min-height: 0; padding: 6px 0; white-space: nowrap; }
  .record-add > .btn, .form-actions { justify-self: start; }
  .form-actions { display: flex; gap: 10px; }
}

/* Form pages are centered on desktop; the server page is a column layout (D33) */
.sites-link { color: var(--text); text-decoration: none; font-weight: 600; }
.sites-link:hover { color: var(--primary); }
@media (min-width: 1024px) {
  .main:has(> form.card.stack:not(.record-add):not(#add), > form#site-form, > form#template-form, > fieldset) { max-width: 820px; margin-inline: auto; }
  .srv-layout { column-count: 2; column-gap: 16px; }
  .srv-layout > .card { break-inside: avoid; margin-bottom: 16px; }
  .srv-layout .stack { gap: 8px; }
  .srv-layout .job .log { max-height: 220px; overflow: auto; }
  .srv-layout .actions { grid-template-columns: repeat(auto-fit, minmax(110px, max-content)); }
  .srv-layout .facts { grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
  .srv-layout .facts .wide { grid-column: 1 / -1; }
}
@media (min-width: 1500px) {
  .srv-layout { column-count: 3; }
}

.key-btn { font-size: 0.85rem; padding: 2px 8px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--muted); cursor: copy; }
.key-btn:hover { color: var(--primary); border-color: var(--primary); }

/* Custom sites: http and https texts (D35, D36) */
.custom-grid { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .main:has(> form#site-form [name="template_id"][data-mode="custom"]:checked) { max-width: 1280px; }
  .custom-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Site page: cards in columns on desktop (D35) */
.file-title { margin: 8px 0 0; font-size: 0.9rem; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
@media (min-width: 1024px) {
  .site-layout { column-count: 2; column-gap: 16px; }
  .site-layout > .card { break-inside: avoid; margin-bottom: 16px; }
  .site-layout .stack { gap: 8px; }
  .site-layout .log.config { max-height: 360px; overflow: auto; }
  .site-layout .actions { grid-template-columns: repeat(auto-fit, minmax(110px, max-content)); }
  .site-layout .facts { grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
  .site-layout .facts .wide { grid-column: 1 / -1; }
}
@media (min-width: 1500px) { .site-layout { column-count: 3; } }

.add-site { color: var(--muted); font-size: 0.85rem; text-decoration: none; border: 1px dashed var(--border); border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
.add-site:hover { color: var(--primary); border-color: var(--primary); }

.servers-pick { border: 0; padding: 0; margin: 0; gap: 6px; min-width: 0; }
.servers-pick legend { font-weight: 500; padding: 0; margin-bottom: 4px; }
.record-fields .ip-hint { display: block; }
@media (min-width: 1024px) { .record-fields .ip-hint { display: none; } }