:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f6f7f9;
  line-height: 1.45;
}
* { box-sizing: border-box; }
body { margin: 0; }
.shell { width: min(920px, calc(100% - 32px)); margin: 56px auto; }
.header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; }
h1 { margin:0 0 6px; font-size: clamp(25px, 4vw, 34px); letter-spacing:-.03em; }
h2 { margin:0; font-size:16px; }
p { margin:0; color:#687386; }
.badge { padding:5px 9px; border:1px solid #e1e5eb; border-radius:999px; background:#fff; color:#667085; font-size:12px; }
.card { background:#fff; border:1px solid #e4e7ec; border-radius:14px; box-shadow:0 2px 8px rgba(16,24,40,.03); }
.tester { padding:16px; }
.request-row { display:grid; grid-template-columns: 105px 1fr 105px; gap:10px; }
input, select, textarea {
  width:100%; border:1px solid #d8dde5; border-radius:9px; background:#fff;
  padding:11px 12px; font:inherit; color:inherit; outline:none;
}
input:focus, select:focus, textarea:focus { border-color:#8a96a8; box-shadow:0 0 0 3px rgba(79,95,117,.10); }
button { border:0; border-radius:9px; padding:11px 15px; font:inherit; font-weight:650; cursor:pointer; }
#test-btn { background:#172033; color:#fff; }
#test-btn:disabled { opacity:.55; cursor:wait; }
.secondary { background:#f3f4f6; color:#344054; border:1px solid #e1e5eb; }
.small { padding:7px 10px; font-size:13px; }
details { margin-top:14px; border-top:1px solid #edf0f3; padding-top:13px; }
summary { cursor:pointer; color:#475467; font-size:14px; }
.advanced-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:16px; }
label { display:block; margin-bottom:7px; font-size:13px; font-weight:650; color:#475467; }
.rows { display:grid; gap:8px; margin-bottom:8px; }
.header-row { display:grid; grid-template-columns:1fr 1.4fr 34px; gap:7px; }
.header-row button { padding:0; background:transparent; color:#98a2b3; font-size:20px; }
textarea { min-height:118px; resize:vertical; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
.error { margin-top:14px; padding:12px 14px; background:#fff4f3; color:#b42318; border:1px solid #fecdca; border-radius:10px; }
.hidden { display:none !important; }
.result { margin-top:18px; overflow:hidden; }
.result-head { padding:15px 17px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #edf0f3; }
.status-line { display:flex; align-items:center; gap:9px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#98a2b3; }
.status-dot.ok { background:#12b76a; }
.status-dot.warn { background:#f79009; }
.status-dot.bad { background:#f04438; }
.muted { color:#667085; font-size:13px; }
.redirects { padding:13px 17px; border-bottom:1px solid #edf0f3; font-size:13px; }
.redirects ol { margin:8px 0 0 20px; padding:0; color:#667085; word-break:break-all; }
.table-head { display:flex; justify-content:space-between; align-items:center; padding:15px 17px 10px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:10px 17px; border-top:1px solid #edf0f3; vertical-align:top; }
th { color:#667085; font-weight:600; background:#fafbfc; }
td:first-child { width:30%; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:#344054; }
td:last-child { word-break:break-word; color:#475467; }
footer { text-align:center; color:#98a2b3; font-size:12px; margin:20px 0; }

.warning { margin-top:9px; padding:9px 11px; background:#fffaeb; color:#93370d; border:1px solid #fedf89; border-radius:8px; font-size:12.5px; }
.button-group { display:flex; gap:8px; flex-wrap:wrap; }

.history { margin-top:18px; padding:15px 17px 17px; }
.history-list { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px; }
.history-item { display:block; }
.history-entry {
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  background:#fafbfc; border:1px solid #edf0f3; border-radius:9px; padding:9px 12px;
  font:inherit; font-size:13px; cursor:pointer; color:#344054;
}
.history-entry:hover { background:#f3f4f6; }
.history-entry .status-dot { flex:0 0 auto; }
.history-method { font-weight:650; flex:0 0 auto; width:56px; }
.history-url { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#475467; }
.history-time { flex:0 0 auto; }
.history-empty { padding:4px 2px 0; }

@media (max-width: 650px) {
  .shell { margin:28px auto; }
  .header { flex-direction:column; }
  .request-row { grid-template-columns:90px 1fr; }
  #test-btn { grid-column:1 / -1; }
  .advanced-grid { grid-template-columns:1fr; }
  .history-url { max-width:140px; }
}

.compare-toggle { margin-top:16px; }
.checkbox-label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:650; color:#475467; cursor:pointer; }
.checkbox-label input { width:auto; }
#compare-wrap { margin-top:14px; }
#compare-headers { min-height:80px; }

.diff-row td { background:#fffaeb; }
.diff-row td:first-child { font-weight:650; }

.security-audit { list-style:none; margin:0; padding:0 17px 15px; display:grid; gap:8px; }
.security-item {
  display:grid;
  grid-template-columns:14px 1fr auto;
  grid-template-areas: "dot label state" "dot why why";
  column-gap:10px; row-gap:3px; align-items:center;
  padding:9px 12px; border:1px solid #edf0f3; border-radius:9px; font-size:13px;
}
.security-item.missing { background:#fffaeb; border-color:#fedf89; }
.security-item.ok { background:#f0fdf6; border-color:#c7e8d5; }
.security-item .status-dot { grid-area:dot; }
.security-label { grid-area:label; font-weight:650; color:#344054; }
.security-state { grid-area:state; font-size:12px; color:#667085; }
.security-why { grid-area:why; font-size:12px; }