:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101722;
  color: #edf3fb;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; background: radial-gradient(circle at 20% 0%, #1e3850 0, #101722 46rem); }

.page-shell { width: min(100% - 3rem, 1240px); margin: 0 auto; padding: clamp(1.5rem, 8vh, 5rem) 0 4.5rem; }

.lookup-form, .record-card { border: 1px solid #2d4054; border-radius: 14px; background: rgba(20, 31, 45, .88); box-shadow: 0 16px 45px rgba(0, 0, 0, .16); }
.lookup-form { padding: 1.5rem; }
.field { min-width: 0; }
.resolver-field { width: min(100%, 300px); margin-bottom: 1.15rem; }
.lookup-row { display: flex; align-items: end; gap: 1.15rem; width: 100%; }
.domain-field { flex: 1 1 auto; min-width: 0; }
label { display: block; margin-bottom: .5rem; font-weight: 700; }
input, select { width: 100%; min-width: 0; padding: .9rem 1rem; border: 1px solid #46617a; border-radius: 9px; background: #0d151f; color: inherit; font: inherit; }
input:focus, select:focus { outline: 3px solid #3cae9e77; border-color: #71d8c8; }
.lookup-form button { flex: 0 0 auto; border: 0; border-radius: 9px; padding: .9rem 1.35rem; background: #71d8c8; color: #071511; cursor: pointer; font: inherit; font-weight: 800; }
button:hover { background: #9bebdf; }
button:disabled { cursor: wait; opacity: .65; }
.hint { margin: .75rem 0 0; color: #94a9bc; font-size: .9rem; line-height: 1.45; }
.status { margin: 1rem 0 0; color: #94a9bc; font-size: .9rem; line-height: 1.45; }
.status.error { color: #ffaca7; }

.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.75rem; }
.record-card { overflow: hidden; }
.record-card h2 { margin: 0; padding: 1.15rem 1.25rem; border-bottom: 1px solid #2d4054; font-size: 1rem; }
.query-name { display: block; margin-top: .25rem; color: #82a5c4; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; font-weight: 400; overflow-wrap: anywhere; }
.record-list { list-style: none; margin: 0; padding: .25rem 0; }
.record-list li, .empty, .lookup-error { padding: .95rem 1.25rem; color: #d9e5f0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86rem; line-height: 1.55; overflow-wrap: anywhere; }
.record-list li + li { border-top: 1px solid #243649; }
.empty { color: #94a9bc; font-family: inherit; }
.lookup-error { color: #ffaca7; font-family: inherit; }
.ttl { display: inline-block; min-width: 4rem; margin-right: .45rem; color: #71d8c8; font-size: .73rem; }

@media (max-width: 560px) {
  .page-shell { width: min(100% - 2rem, 1240px); padding-top: 1.25rem; }
  .lookup-form { padding: 1rem; }
  .lookup-row { gap: .65rem; }
  .hint { margin: 0; }
  .results { grid-template-columns: 1fr; gap: 1rem; }
}