/* ============================ TOKENS ============================ */
  :root{
    --sans:'Quicksand',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

    /* shared first-column width + gap so check rows, the SOA spec, and the
       data tables all start their value column on the same vertical line */
    --col1:200px;
    --gap:11px;

    /* dark (default) */
    --bg:#050f1a;
    --surface:#0a1825;
    --panel:#0c1f30;          /* table head / collapsible */
    --head:#0d1f2f;           /* section header */
    --border:#1d3a52;         /* the one border color, theme-aware */
    --hair:#16293b;           /* subtle row separators */
    --ink:#e9f2f9;
    --dim:#9db2c4;
    --faint:#5f7689;
    --ok:#34d399;
    --warn:#f5b342;
    --err:#f77272;
    --info:#5fa8f5;
    --accent:#7fc9f2;         /* hostnames */
    --link:#69b6ea;
    --row-hover:rgba(255,255,255,.025);
    --ring-track:rgba(120,140,160,.20);
    --shadow:0 1px 2px rgba(0,0,0,.30);

    /* brand chrome -- theme-aware so light mode is honored */
    --logo-bg:#030b14;
    --logo-line:#1a3a54;
    --logo-ink:#f4fdff;       /* "DNS" */
    --logo-acc:#46a6e8;       /* "ly.io" + gear -- solid blue, distinct from white */
    --field-line:#244966;     /* search border */
    --btn-bg:#14385c;         /* Analyze */
    --btn-ink:#e3f1ff;
    --btn-bg-hover:#1a456e;
    --chip-line:#27475f;
  }
  :root[data-theme="light"]{
    --bg:#eef2f6;
    --surface:#ffffff;
    --panel:#f5f8fc;
    --head:#f3f7fb;
    --border:#d6e0ea;
    --hair:#e9eff5;
    --ink:#16252f;
    --dim:#566a79;
    --faint:#8696a5;
    --ok:#12a166;
    --warn:#b07414;
    --err:#d73c3c;
    --info:#2563eb;
    --accent:#1d6fb2;
    --link:#1d6fb2;
    --row-hover:rgba(20,40,60,.03);
    --ring-track:rgba(120,140,160,.22);
    --shadow:0 1px 2px rgba(20,40,70,.06);

    --logo-bg:#e9f1fb;        /* light badge */
    --logo-line:#c6d8ec;
    --logo-ink:#0f2a40;
    --logo-acc:#1c7fd6;
    --field-line:#c6d3e0;
    --btn-bg:#1c5f9e;         /* primary blue */
    --btn-ink:#ffffff;
    --btn-bg-hover:#185688;
    --chip-line:#cdd9e5;
  }

  /* ============================ BASE ============================ */
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--ink);
    /* zoom scales the body's rendered box, so a plain 100vh would render at
       110vh and overflow the viewport -- on short pages the footer would sit
       ~10% below the fold. Divide by the zoom factor so the body fills exactly
       one viewport after scaling. */
    min-height:calc(100vh / 1.1);
    zoom:1.1;
    display:flex;flex-direction:column;
    -webkit-font-smoothing:antialiased;
    transition:background .15s,color .15s;
  }
  a{color:var(--link);text-decoration:none}
  a:hover{text-decoration:underline}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

  /* ============================ NAV ============================ */
  .nav{border-bottom:1px solid var(--border);background:var(--bg)}
  .nav-inner{display:flex;align-items:center;gap:14px;width:100%;max-width:1080px;margin:0 auto;padding:12px 22px}
  .brand{display:inline-flex;align-items:center;background:none;border:0;padding:0;cursor:pointer}
  .logo-badge{display:inline-flex;align-items:center;gap:9px;background:var(--logo-bg);border:1px solid var(--logo-line);border-radius:4px;padding:7px 13px}
  .logo-ic{display:grid;place-items:center}
  .logo-ic svg{width:16px;height:16px;color:var(--logo-acc);display:block}
  .logo-txt{font-weight:700;font-size:16px;letter-spacing:.2px}
  .lg-dns{color:var(--logo-ink)} .lg-rest{color:var(--logo-acc)}
  .nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}

  .theme{position:relative}
  .theme-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--dim);font:inherit;font-size:13px;padding:7px 9px;cursor:pointer}
  .theme-btn .chev{font-size:9px;opacity:.7}
  .theme-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:138px;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:5px;box-shadow:0 14px 30px rgba(0,0,0,.28)}
  .theme-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;font-size:13px;color:var(--dim);background:none;border:0;border-radius:4px;padding:7px 9px;cursor:pointer}
  .theme-menu button:hover{background:var(--row-hover);color:var(--ink)}
  .theme-menu .ic{width:15px;text-align:center;opacity:.85}

  /* ============================ LAYOUT ============================ */
  main{flex:1 0 auto;width:100%;max-width:1080px;margin:0 auto;padding:0 22px 56px}

  /* ---- hero / home ---- */
  .hero{text-align:center;padding:62px 0 4px}
  .hero h1{margin:0;font-size:33px;font-weight:700;letter-spacing:-.4px}
  .hero p{margin:10px 0 0;color:var(--dim);font-size:15px}

  .searchwrap{display:flex;justify-content:center;padding:26px 0 0}
  .search{display:flex;width:100%;max-width:640px;border:1px solid var(--field-line);border-radius:4px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
  .search input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:14px;padding:14px 16px;min-width:0}
  .search input::placeholder{color:var(--faint)}
  .analyze{display:inline-flex;align-items:center;gap:7px;border:0;background:var(--btn-bg);color:var(--btn-ink);font:inherit;font-weight:600;font-size:13.5px;padding:0 20px;cursor:pointer;transition:background .12s}
  .analyze svg{width:15px;height:15px}
  .analyze:hover{background:var(--btn-bg-hover)}
  .analyze:disabled{opacity:.5;cursor:not-allowed}

  .empty{margin:34px auto 0;max-width:920px;border:1px dashed var(--border);border-radius:4px;padding:52px 24px;text-align:center}
  .empty .eicon{width:34px;height:34px;color:var(--faint);margin-bottom:8px}
  .empty h2{margin:0;font-size:18px;font-weight:600}
  .empty p{margin:8px auto 0;max-width:430px;color:var(--dim);font-size:14px}
  .examples{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:20px}
  .ex{font-family:var(--mono);font-size:12.5px;color:var(--dim);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:8px 13px;cursor:pointer}
  .ex:hover{color:var(--ink);border-color:var(--chip-line)}

  /* ============================ VITALS ============================ */
  .vitals{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;margin-top:24px;padding:17px 19px;border:1px solid var(--border);border-radius:4px;background:var(--surface)}
  .vitals h1{margin:0 0 9px;font-size:21px;font-weight:600;font-family:var(--mono);letter-spacing:-.2px;word-break:break-all}
  .meter{height:7px;border-radius:4px;background:var(--ring-track);overflow:hidden;display:flex}
  .meter i{display:block;height:100%;border-radius:4px}
  .meter .b-ok{background:var(--ok)} .meter .b-warn{background:var(--warn)} .meter .b-err{background:var(--err)}
  .counts{display:flex;align-items:baseline;gap:17px;flex-wrap:wrap;margin-top:11px;font-size:13px}
  .counts span{display:inline-flex;align-items:baseline;gap:6px}
  .counts span .ic{align-self:center}
  .counts b{font-family:var(--mono);font-weight:600}
  .c-ok{color:var(--ok)} .c-warn{color:var(--warn)} .c-err{color:var(--err)}
  .counts .meta{color:var(--faint);font-family:var(--mono);font-size:12px}
  .score{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:84px}
  .ring{width:60px;height:60px;border-radius:50%;display:grid;place-items:center}
  .ring i{width:48px;height:48px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:18px;font-style:normal}
  .score small{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.7px;font-weight:600}

  /* ============================ CONTROLS ============================ */
  .controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 2px}
  .seg{display:inline-flex;border:1px solid var(--border);border-radius:4px;overflow:hidden}
  .seg button{font-family:var(--mono);font-size:12px;color:var(--dim);background:var(--surface);border:0;padding:7px 13px;cursor:pointer}
  .seg button + button{border-left:1px solid var(--border)}
  .seg button.on{background:var(--btn-bg);color:var(--btn-ink)}
  .ctl{font-family:var(--mono);font-size:12px;color:var(--dim);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:7px 12px;cursor:pointer}
  .ctl:hover{color:var(--ink)}
  .anchors{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
  .anchors a{font-family:var(--mono);font-size:11.5px;color:var(--faint);padding:6px 9px;border-radius:4px}
  .anchors a:hover{color:var(--ink);background:var(--row-hover);text-decoration:none}

  /* ============================ SECTION CARD ============================ */
  .sec{border:1px solid var(--border);border-radius:4px;background:var(--surface);margin-top:13px;overflow:hidden}
  .sec-head{display:flex;align-items:center;gap:11px;padding:11px 16px;background:var(--head);border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
  .sec.collapsed .sec-head{border-bottom-color:transparent}
  .sec-head h2{margin:0;font-size:12px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--dim)}
  .chev{font-size:11px;color:var(--faint);transition:transform .15s}
  .sec.collapsed .chev{transform:rotate(-90deg)}
  .sec.collapsed .sec-content{display:none}

  /* tally -- inline-flex + gap guarantees icon/number spacing */
  .tally{margin-left:auto;display:inline-flex;align-items:center;gap:13px;font-family:var(--mono);font-size:12px}
  .tally > span{display:inline-flex;align-items:center;gap:5px}
  .t-ok{color:var(--ok)} .t-warn{color:var(--warn)} .t-err{color:var(--err)}

  /* ============================ CLEAN TABLE (borderless) ============================ */
  .tscroll{overflow-x:auto}
  .dtable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
  .dtable thead th{text-align:left;font-weight:600;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:11px 16px 9px;border-bottom:1px solid var(--border);white-space:nowrap}
  .dtable tbody td{padding:9px 16px;border-bottom:1px solid var(--hair);color:var(--ink);white-space:nowrap;vertical-align:top}
  .dtable tbody tr:last-child td{border-bottom:0}
  .dtable tbody tr:hover td{background:var(--row-hover)}
  .dtable .host{color:var(--accent)}
  .dtable .muted{color:var(--faint)}
  /* first column shares the row/spec col1 width (plus the row gap that the
     led-less table lacks) so the second column lines up with the check rows */
  .dtable th:first-child,.dtable td:first-child{width:calc(var(--col1) + var(--gap));min-width:calc(var(--col1) + var(--gap))}
  /* inline table flag (e.g. a nameserver the parent does not delegate). Sits on
     its own line under the cell text and is sized to its content, so the fixed
     first column never widens -- only the flagged row grows a little taller. */
  .cell-badge{display:block;width:fit-content;margin-top:5px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);border-radius:4px;padding:1px 6px;white-space:nowrap}

  /* ============================ SPEC LIST (SOA) ============================ */
  .spec{display:flex;flex-direction:column}
  .srow{display:grid;grid-template-columns:var(--col1) 1fr auto;gap:8px var(--gap);align-items:center;padding:9px 16px;border-bottom:1px solid var(--hair)}
  .srow:last-child{border-bottom:0}
  .srow:hover{background:var(--row-hover)}
  .sk{color:var(--dim);font-size:12.5px}
  .sv{font-family:var(--mono);font-size:12.5px;color:var(--ink);word-break:break-all}
  .sv .u{color:var(--faint)}        /* unit / parenthetical */
  .ss{justify-self:end;white-space:nowrap}

  /* ============================ MAIL (no nested tables) ============================ */
  .mx{padding:4px 16px}
  .mx + .mx{border-top:1px solid var(--hair)}
  .mx-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:9px 0}
  .pri{font-family:var(--mono);font-size:11px;color:var(--faint);border:1px solid var(--border);border-radius:4px;padding:1px 8px;line-height:1.4}
  .mx-host{font-family:var(--mono);font-size:13px;color:var(--accent);word-break:break-all}
  .mx-meta{font-family:var(--mono);font-size:12px;color:var(--dim);margin-left:auto}
  details.addrs{padding-bottom:6px}
  details.addrs > summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:11.5px;color:var(--link);padding:6px 0 8px;display:inline-flex;align-items:center;gap:7px}
  details.addrs > summary::-webkit-details-marker{display:none}
  details.addrs > summary::before{content:"+";display:inline-block;width:11px;text-align:center;color:var(--faint)}
  details.addrs[open] > summary::before{content:"\2212"}
  .addr-list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
  .addr{display:grid;grid-template-columns:52px minmax(150px,220px) 1fr;gap:14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:12px}
  .addr:last-child{border-bottom:0}
  .rec{font-size:10px;color:var(--faint);border:1px solid var(--border);border-radius:4px;padding:1px 0;text-align:center;line-height:1.6}
  .addr .ip{color:var(--ink)}
  .addr .ptr{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* ============================ CHECK ROWS ============================ */
  .checks{border-top:1px solid var(--border)}
  .row{display:grid;grid-template-columns:var(--col1) 1fr;align-items:start;gap:var(--gap);padding:9px 16px;border-bottom:1px solid var(--hair)}
  .row:last-child{border-bottom:0}
  .row:hover{background:var(--row-hover)}
  .row .k{display:flex;align-items:flex-start;gap:8px;color:var(--dim);font-size:13px;font-weight:500}
  .row .led{flex:0 0 auto;margin-top:5px;width:8px;height:8px;border-radius:50%;background:var(--info)}
  .row.ok .led{background:var(--ok)} .row.warn .led{background:var(--warn)} .row.err .led{background:var(--err)} .row.info .led{background:var(--info)}
  .row .v{color:var(--ink);font-size:13px;word-break:break-word}
  .row .v.mono{font-family:var(--mono);font-size:12.5px}
  .row .v .u{color:var(--faint)}
  .row .v .muted{color:var(--faint)}
  /* DMARC: summary on the left, a small toggle on the right, full record below */
  .dx{display:flex;align-items:baseline;gap:10px}
  .dx-sum{flex:1 1 auto;min-width:0}
  .dx-btn{flex:0 0 auto;margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--link);background:none;border:1px solid var(--border);border-radius:4px;padding:1px 7px;cursor:pointer;white-space:nowrap}
  .dx-btn:hover{color:var(--ink);border-color:var(--chip-line)}
  .dx-full{display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;color:var(--faint);word-break:break-all}
  .dx-full[hidden]{display:none}

  /* shared status text -- icon is an inline SVG (.ic), so it is the same
     size and weight everywhere regardless of available fonts */
  .ic{width:14px;height:14px;flex-shrink:0;display:block}
  .stat{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;vertical-align:middle}
  .stat.ok{color:var(--ok)}
  .stat.warn{color:var(--warn)}
  .stat.err{color:var(--err)}

  .no-issues{display:none;margin-top:13px;padding:18px;border:1px solid var(--border);border-radius:4px;background:var(--surface);text-align:center;color:var(--ok);font-size:13.5px;font-weight:500}

  /* ============================ FOOTER ============================ */
  .foot{flex-shrink:0;border-top:1px solid var(--border);background:var(--bg)}
  .foot-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1080px;margin:0 auto;padding:16px 22px;font-size:12.5px;color:var(--faint)}
  .foot-left{white-space:nowrap;font-family:var(--mono)}
  /* keep the credit as ONE inline run so its spaces survive; gap only between segments */
  .foot-right{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
  .made{color:var(--faint)}
  .made a{color:var(--link)}
  .made .heart-beat{color:#e0556b;margin:0 2px;font-size:11px}
  .foot .sep{opacity:.5}
  .linklike{background:none;border:0;font:inherit;color:var(--link);cursor:pointer;padding:0}
  .linklike:hover{text-decoration:underline}
  @media (prefers-reduced-motion:no-preference){
    .heart-beat{animation:beat 1.6s ease-in-out infinite}
    @keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.22)}28%{transform:scale(1)}42%{transform:scale(1.16)}}
  }

  /* ============================ MODAL ============================ */
  .modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(4,10,18,.62);padding:20px}
  .modal[hidden]{display:none}
  .modal-card{position:relative;width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
  .modal-card h3{margin:0 0 12px;font-size:16px;font-weight:700}
  .modal-card p{margin:0 0 11px;font-size:13.5px;color:var(--dim);line-height:1.55}
  .modal-card p:last-child{margin-bottom:0}
  .modal-x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--faint);font-size:20px;cursor:pointer;line-height:1}

  /* ============================ STATE TOGGLING ============================ */
  #hero,#empty,#loadingBox,#errorBox,#results{display:none}
  body.home #hero,body.home #empty{display:block}
  body.loading #loadingBox{display:flex}
  body.errored #errorBox{display:block}
  body.results #results{display:block}
  body:not(.home) .searchwrap{padding:22px 0 0}
  /* issues filter */
  body.issues #report .sec[data-sev="clean"]{display:none}
  body.issues #report .row.ok,body.issues #report .row.info{display:none}
  body.issues #report .tscroll,body.issues #report .spec,body.issues #report .mx,body.issues #report details.addrs{display:none}

  /* loading */
  .loadingbox{flex-direction:column;align-items:center;gap:14px;padding:64px 20px;color:var(--dim)}
  .spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}
  .loadingbox .lmsg{font-family:var(--mono);font-size:13px}
  /* error */
  .errorbox{max-width:560px;margin:48px auto 0;border:1px solid var(--border);border-radius:4px;background:var(--surface);padding:26px 24px;text-align:center}
  .errorbox .etitle{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--err)}
  .errorbox .etitle .ic{width:16px;height:16px}
  .errorbox p{margin:10px 0 0;color:var(--dim);font-size:13.5px;line-height:1.5;word-break:break-word}
  .errorbox .retry{margin-top:16px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;border-radius:4px;padding:8px 16px;cursor:pointer}
  .errorbox .retry:hover{border-color:var(--chip-line)}
  /* defensive: status cells inside data tables */
  .dtable td.ok{color:var(--ok)} .dtable td.warn{color:var(--warn)} .dtable td.err{color:var(--err)}

  /* ============================ RESPONSIVE ============================ */
  @media (max-width:720px){
    .hero h1{font-size:27px}
    .vitals{grid-template-columns:1fr}
    .score{flex-direction:row;align-self:start}
    .anchors{display:none}
    .row{grid-template-columns:1fr;gap:3px}
    .srow{grid-template-columns:1fr auto}
    .addr{grid-template-columns:46px 1fr;gap:8px}
    .addr .ptr{grid-column:2;color:var(--faint)}
    .foot-inner{flex-direction:column;gap:7px;text-align:center}
  }

  /* ============================ SCROLL TO TOP ============================ */
  .totop{position:fixed;right:20px;bottom:20px;z-index:50;width:42px;height:42px;border-radius:4px;border:1px solid var(--border);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s}
  .totop.show{opacity:1;visibility:visible;transform:none}
  .totop svg{width:18px;height:18px;display:block}
  .totop:hover{border-color:var(--chip-line);color:var(--accent)}
  @media (max-width:720px){.totop{right:14px;bottom:14px}}