:root {
  color-scheme: dark;
  --bg: #071017;
  --panel: #0d1922;
  --panel-2: #111f2a;
  --line: #213543;
  --muted: #8ea2af;
  --text: #edf7fb;
  --cyan: #54d9e8;
  --cyan-soft: rgba(84,217,232,.12);
  --green: #58d68d;
  --amber: #ffbd5a;
  --red: #ff7070;
  --shadow: 0 18px 55px rgba(0,0,0,.24);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text); background:
    radial-gradient(circle at 80% -10%, rgba(27,118,133,.18), transparent 36%),
    linear-gradient(180deg, #071017 0%, #09141c 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
.topbar { min-height: 84px; padding: 18px max(24px, calc((100vw - 1200px)/2)); display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); background:rgba(7,16,23,.8); }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; color:#061218; background:var(--cyan); font:800 20px/1 ui-monospace, monospace; border-radius:9px; box-shadow:0 0 24px rgba(84,217,232,.25); }
h1,h2,h3,p { margin:0; }
h1 { font-size:1.05rem; letter-spacing:.02em; }
.topbar p { color:var(--muted); font-size:.85rem; margin-top:3px; }
.resolver-status { margin-left:auto; border:1px solid var(--line); border-radius:999px; padding:8px 12px; color:#c3d2da; font-size:.82rem; white-space:nowrap; }
.resolver-status span { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
main { width:min(1200px, calc(100% - 32px)); margin:42px auto 80px; }
.query-panel { padding:28px; border:1px solid var(--line); background:linear-gradient(145deg, rgba(17,31,42,.97), rgba(10,22,30,.97)); border-radius:16px; box-shadow:var(--shadow); }
.panel-heading,.results-heading,.query-footer,.domain-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.eyebrow { color:var(--cyan); font:700 .72rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.14em; margin-bottom:8px; }
h2 { font-size:1.55rem; letter-spacing:-.025em; }
label { display:block; color:#c7d6de; font-weight:650; font-size:.9rem; margin:25px 0 9px; }
label span { color:var(--muted); font-weight:400; margin-left:8px; }
.type-field { min-width:190px; }
.type-field label { margin:0 0 8px; }
textarea,select { width:100%; color:var(--text); background:#08131a; border:1px solid #2a414f; border-radius:9px; outline:none; font:500 .95rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; transition:border-color .15s, box-shadow .15s; }
textarea { min-height:190px; padding:14px 16px; resize:vertical; }
select { padding:10px 38px 10px 12px; font-family:inherit; }
textarea:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(84,217,232,.12); }
.query-footer { align-items:center; margin-top:18px; }
.query-footer > p,.summary { color:var(--muted); font-size:.88rem; }
.actions { display:flex; gap:10px; }
button { min-height:42px; padding:0 17px; border-radius:8px; font:700 .9rem/1 inherit; cursor:pointer; transition:transform .12s, background .12s, border-color .12s; }
button:active { transform:translateY(1px); }
button:disabled { cursor:not-allowed; opacity:.65; }
.primary { color:#061219; background:var(--cyan); border:1px solid var(--cyan); }
.primary:hover:not(:disabled) { background:#7de8f2; }
.secondary { color:#cbdbe3; background:#0c1921; border:1px solid #304654; }
.secondary:hover:not(:disabled) { border-color:#54707f; background:#12232e; }
.spinner { display:none; width:15px; height:15px; border:2px solid rgba(6,18,25,.3); border-top-color:#061219; border-radius:50%; animation:spin .7s linear infinite; }
.loading .spinner { display:inline-block; }
.loading .button-label { margin-right:9px; }
@keyframes spin { to { transform:rotate(360deg); } }
.input-error { min-height:1.3em; color:var(--red); font-size:.85rem; margin-top:10px; }
.results-section { margin-top:40px; }
.summary { margin-top:7px; }
.export { align-self:center; }
.legend { display:flex; gap:18px; color:var(--muted); font-size:.8rem; margin:22px 0 13px; }
.legend span { display:flex; align-items:center; gap:7px; }
.legend-dot { width:7px; height:7px; border-radius:50%; }
.legend-dot.match { background:var(--green); }.legend-dot.differ { background:var(--amber); }.legend-dot.unavailable { background:var(--red); }
.results-grid { display:grid; gap:14px; }
.domain-result { overflow:hidden; border:1px solid var(--line); background:var(--panel); border-radius:12px; }
.domain-header { align-items:center; padding:17px 19px; border-bottom:1px solid var(--line); }
.domain-header h3 { font:700 1rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap:anywhere; }
.query-meta { color:var(--muted); font-size:.78rem; margin-top:3px; }
.comparison-badge { flex:none; padding:5px 9px; border-radius:999px; font-size:.72rem; font-weight:750; letter-spacing:.02em; }
.comparison-badge.match { color:var(--green); background:rgba(88,214,141,.1); }
.comparison-badge.differ { color:var(--amber); background:rgba(255,189,90,.1); }
.comparison-badge.unavailable { color:var(--red); background:rgba(255,112,112,.1); }
.resolver-grid { display:grid; grid-template-columns:1fr 1fr; }
.resolver { min-width:0; padding:18px 19px 20px; }
.resolver + .resolver { border-left:1px solid var(--line); }
.resolver-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.resolver-title strong { font-size:.88rem; }
.latency { color:var(--muted); font:500 .75rem/1 ui-monospace, monospace; }
.record-list { display:grid; gap:8px; }
.record { display:grid; grid-template-columns:70px minmax(0,1fr); gap:10px; padding:9px 10px; background:#08131a; border:1px solid #192d39; border-radius:7px; }
.record dt { color:var(--muted); font:600 .72rem/1.5 ui-monospace, monospace; }
.record dd { margin:0; font:500 .82rem/1.5 ui-monospace, monospace; overflow-wrap:anywhere; white-space:pre-wrap; }
.empty-answer,.resolver-error { color:var(--muted); font-size:.85rem; padding:7px 0; }
.resolver-error { color:#ff9c9c; }
@media (max-width:700px) {
  .topbar { padding:15px 16px; }.topbar p { display:none; }.resolver-status { font-size:.75rem; }
  main { width:min(100% - 20px,1200px); margin-top:22px; }
  .query-panel { padding:19px; }.panel-heading { display:block; }.type-field { margin-top:22px; }.type-field label { margin-top:0; }
  .query-footer { align-items:flex-end; }.resolver-grid { grid-template-columns:1fr; }.resolver + .resolver { border-left:0; border-top:1px solid var(--line); }
  .results-heading { align-items:flex-end; }.legend { flex-wrap:wrap; }.domain-header { gap:12px; }
}
@media (max-width:450px) {
  .resolver-status { padding:7px 9px; }.query-footer { display:block; }.actions { margin-top:14px; }.actions button { flex:1; }.results-heading { display:block; }.export { margin-top:15px; width:100%; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }