:root{
      --bg1:#f6f8ff; --bg2:#f7fbff;
      --card:#ffffffcc; --text:#0b1220; --muted:#5b6b84;
      --border:#e6ebf4; --shadow:0 18px 46px rgba(11,18,32,.10);
      --r2:22px;
      --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
      --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;

      --primary:#2b59ff; --primary2:#2147d6;

      --good:#16a34a; --warn:#d97706; --bad:#dc2626;
      --goodBg:#f0fdf4; --warnBg:#fffbeb; --badBg:#fef2f2;
      --goodBd:#bbf7d0; --warnBd:#fde68a; --badBd:#fecaca;
    }
    *{box-sizing:border-box}
    body{
      margin:0; font-family:var(--sans); color:var(--text); min-height:100vh;
      background:
        radial-gradient(1200px 700px at 35% -10%, rgba(43,89,255,.18), transparent 58%),
        radial-gradient(900px 560px at 92% 10%, rgba(22,163,74,.08), transparent 58%),
        radial-gradient(900px 560px at 8% 20%, rgba(217,119,6,.06), transparent 58%),
        linear-gradient(180deg,var(--bg1),var(--bg2));
    }
    .wrap{max-width:980px;margin:0 auto;padding:34px 16px 70px;}
    .header{display:flex;align-items:flex-start;gap:14px;justify-content:center;margin-bottom:18px;}
    .logo{
      width:38px;height:38px;border-radius:12px;
      background:linear-gradient(180deg,var(--primary),var(--primary2));
      display:grid;place-items:center;color:#fff;flex:0 0 auto;
      box-shadow:0 14px 30px rgba(43,89,255,.22);
    }
    .titleBlock{max-width:760px;}
    h1{margin:0;font-size:20px;font-weight:950;letter-spacing:.2px;}
    .sub{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6;}

    .card{
      background:var(--card); backdrop-filter:blur(10px);
      border:1px solid rgba(230,235,244,.95);
      border-radius:var(--r2);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .cardHd{
      padding:14px 16px; border-bottom:1px solid rgba(230,235,244,.95);
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      background:rgba(255,255,255,.65);
    }
    .cardHd .t{font-weight:950;font-size:14px;}
    .cardHd .s{font-size:12px;color:var(--muted);white-space:nowrap;}
    .cardBd{padding:16px;}

    .row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;}
    @media (max-width:840px){.row{grid-template-columns:1fr;}}

    .input{
      width:100%;border:1px solid var(--border);background:#fff;
      border-radius:16px;padding:13px 14px;font-size:14px;font-family:var(--mono);
      outline:none; box-shadow:0 12px 26px rgba(11,18,32,.06);
    }
    .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
    .btn{
      border:1px solid var(--border);background:#fff;color:var(--text);
      border-radius:16px;padding:11px 13px;font-weight:950;cursor:pointer;
      transition:transform .06s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .btn:hover{box-shadow:0 14px 30px rgba(11,18,32,.10);border-color:#d7dfef;}
    .btn:active{transform:translateY(1px);}
    .btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary2));border-color:transparent;color:#fff;}
    .btn.primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}

    .statusLine{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
    .statusLeft{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;}
    .dot{width:10px;height:10px;border-radius:999px;background:#cbd5e1;}
    .dot.good{background:var(--good);} .dot.warn{background:var(--warn);} .dot.bad{background:var(--bad);}

    .progressWrap{display:none;align-items:center;gap:10px;min-width:260px;}
    .spinner{
      width:14px;height:14px;border-radius:999px;
      border:2px solid rgba(43,89,255,.25);border-top-color:rgba(43,89,255,1);
      animation:spin .7s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg);}}
    .bar{flex:1 1 auto;height:8px;border-radius:999px;background:#e9efff;overflow:hidden;border:1px solid #dbe4ff;}
    .bar>i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--primary),rgba(43,89,255,.45));animation:slide 1s ease-in-out infinite;}
    @keyframes slide{0%{transform:translateX(-120%);}100%{transform:translateX(280%);}}

    #reportWrap{display:none;margin-top:14px;}

    .scoreCard{
      border:1px solid var(--border);border-radius:18px;background:#fff;padding:14px;
      display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;
    }
    .scoreCard.good{border-color:var(--goodBd);background:var(--goodBg);}
    .scoreCard.warn{border-color:var(--warnBd);background:var(--warnBg);}
    .scoreCard.bad{border-color:var(--badBd);background:var(--badBg);}
    .scoreCard.neutral{border-color:var(--border);background:#fff;}

    .scoreLeft{display:flex;align-items:center;gap:12px;min-width:0;}
    .scoreBox{
      width:70px;height:70px;border-radius:18px;background:#fff;border:1px solid var(--border);
      display:grid;place-items:center;text-align:center;
    }
    .scoreN{font-weight:950;font-size:20px;line-height:1;}
    .scoreSub{font-size:11px;color:var(--muted);margin-top:4px;}
    .scoreText .title{font-weight:950;font-size:16px;margin:0;}
    .scoreText .desc{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.45;}

    .pill{
      display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;
      border:1px solid var(--border);background:#f8fafc;font-size:12px;font-weight:950;color:var(--muted);
      white-space:nowrap;
    }
    .pill.good{color:#166534;border-color:var(--goodBd);background:var(--goodBg);}
    .pill.warn{color:#92400e;border-color:var(--warnBd);background:var(--warnBg);}
    .pill.bad{color:#991b1b;border-color:var(--badBd);background:var(--badBg);}
    .pill.neutral{color:#475569;border-color:#e2e8f0;background:#f8fafc;}

    details{border:1px solid var(--border);background:#fff;border-radius:18px;padding:12px;}
    summary{
      cursor:pointer;font-weight:950;list-style:none;
      display:flex;align-items:center;justify-content:space-between;gap:10px;
    }
    summary::-webkit-details-marker{display:none;}
    .sumRight{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;}
    .chev{
      width:22px;height:22px;border-radius:10px;border:1px solid var(--border);
      background:#f8fafc;display:grid;place-items:center;color:var(--muted);font-family:var(--mono);font-size:12px;
      flex:0 0 auto;transition:transform .12s ease;
    }
    details[open] .chev{transform:rotate(90deg);}
    .sectionBody{margin-top:10px;color:var(--text);}

    .issues{display:flex;flex-direction:column;gap:10px;}
    .issueRow{
      border:1px solid var(--border);border-radius:16px;background:#fff;padding:12px;
      display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;
    }
    .issueTitle{font-weight:950;}
    .issueMeta{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.5;}
    .issueFix{margin-top:8px;font-size:13px;line-height:1.5;}
    .issueDelta{
      border:1px solid var(--border);background:#f8fafc;color:var(--muted);
      border-radius:999px;padding:6px 10px;height:fit-content;font-family:var(--mono);
      font-size:12px;font-weight:950;min-width:70px;text-align:center;white-space:nowrap;
    }

    .mono{font-family:var(--mono);}
    .emptyState{border:1px dashed var(--border);border-radius:16px;padding:12px;color:var(--muted);background:#fff;font-size:13px;line-height:1.55;}

    .checkRow{
      display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
      padding:10px 10px;border:1px solid var(--border);border-radius:16px;background:#fff;margin-bottom:10px;
    }
    .checkName{font-weight:950;font-size:13px;display:flex;align-items:center;gap:8px;}
    .checkHint{margin-top:4px;font-size:12px;color:var(--muted);line-height:1.45;}
    .kv{display:grid;grid-template-columns:140px 1fr;gap:8px;margin-top:8px;}
    @media (max-width:680px){.kv{grid-template-columns:1fr;}}
    .k{color:var(--muted);font-size:12px;}
    .v{font-family:var(--mono);font-size:12px;overflow:auto;}

    .statusBox{display:inline-flex;align-items:center;gap:8px;font-weight:950;font-size:12px;white-space:nowrap;}
    .icon{
      width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-weight:950;line-height:1;
      user-select:none;border:1px solid var(--border);background:#f8fafc;color:var(--muted);
    }
    .icon.good{border-color:var(--goodBd);background:var(--goodBg);color:#166534;}
    .icon.warn{border-color:var(--warnBd);background:var(--warnBg);color:#92400e;}
    .icon.bad{border-color:var(--badBd);background:var(--badBg);color:#991b1b;}

    .code{
      white-space:pre-wrap;font-family:var(--mono);
      background:#0b1220;color:#e5e7eb;border:1px solid #111827;border-radius:16px;
      padding:12px;overflow:auto;max-height:420px;
    }

    .dnsSection{margin-top:10px;}
    .dnsTitle{display:flex;align-items:center;gap:8px;font-weight:950;font-size:13px;margin-bottom:8px;}
    .dnsCount{
      font-size:12px;color:var(--muted);border:1px solid var(--border);background:#f8fafc;border-radius:999px;
      padding:3px 8px;font-weight:950;
    }
    .dnsList{display:flex;flex-wrap:wrap;gap:8px;}
    .dnsItem{
      font-family:var(--mono);font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);
      background:#f8fafc;color:var(--muted);
    }
    .dnsItem.good{border-color:var(--goodBd);background:var(--goodBg);color:#166534;}
    .dnsItem.bad{border-color:var(--badBd);background:var(--badBg);color:#991b1b;}
    .dnsItem.warn{border-color:var(--warnBd);background:var(--warnBg);color:#92400e;}

    .note{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.55;}

    /* ===== Message details ===== */
    .msgWrap{display:flex;flex-direction:column;gap:12px;}
    .msgGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    @media (max-width:840px){.msgGrid{grid-template-columns:1fr;}}
    .msgCard{border:1px solid var(--border);background:#fff;border-radius:16px;padding:12px;}
    .msgLabel{
      font-size:11px;color:var(--muted);font-weight:950;letter-spacing:.2px;text-transform:uppercase;margin-bottom:6px;
    }
    .msgValue{font-size:13px;line-height:1.55;color:var(--text);word-break:break-word;}
    .msgBodyBox{
      border:1px solid var(--border);
      background:linear-gradient(180deg,#ffffff,#fbfdff);
      border-radius:16px;
      padding:12px;
      max-height:320px;
      overflow:auto;
      white-space:pre-wrap;
      font-size:13px;
      line-height:1.6;
      color:var(--text);
    }


/* --- Auth top bar (top-right) --- */
.topBar{
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin:0 0 10px;
}
.topBarInner{
  display:flex;
  align-items:center;
  gap:8px;
}
.userChip{
  display:none;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(230,235,244,.95);
  background:rgba(255,255,255,.7);
  border-radius:999px;
  box-shadow:0 8px 20px rgba(11,18,32,.06);
  max-width:260px;
}
.userChip .email{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:220px;
  font-size:12px;
  color:var(--muted);
  font-family:var(--sans);
}
.dotMini{
  width:8px;height:8px;border-radius:999px;
  background:var(--good);
  box-shadow:0 0 0 3px rgba(22,163,74,.15);
  flex:0 0 auto;
}

/* --- Modal (Register/Login) --- */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(11,18,32,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index:1000;
}
.modal{
  width:440px;
  max-width:100%;
  background:#fff;
  border:1px solid rgba(230,235,244,.95);
  border-radius:18px;
  box-shadow:0 18px 46px rgba(11,18,32,.18);
  overflow:hidden;
}
.modalHd{
  padding:14px 16px;
  border-bottom:1px solid rgba(230,235,244,.95);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.modalHd .t{
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
}
.modalBd{
  padding:14px 16px;
}
.modalFt{
  padding:12px 16px;
  border-top:1px solid rgba(230,235,244,.95);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.field{margin:10px 0 0;}
.label{font-size:12px;color:var(--muted);margin:0 0 6px;font-weight:700;}
.help{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.55;}
.errBox{
  display:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--badBd);
  background:var(--badBg);
  color:var(--bad);
  font-size:12px;
  margin-bottom:10px;
}
.okBox{
  display:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--goodBd);
  background:var(--goodBg);
  color:var(--good);
  font-size:12px;
  margin-bottom:10px;
}