:root{
  --bg:#0b0f14;
  --card:#121821;
  --muted:#9fb1c6;
  --text:#e6edf5;
  --error:#ff6666;
  --good:#40c463;
  --accent:#4ea3ff;
  --accent-2:#1c7ef4;
  --ring:#264d79;
  --border:#223040;
  --pill-ok:#1f8c4d;
  --pill-weak:#c28b2c;
  --pill-missing:#a23b3b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.container{max-width:1000px;margin:0 auto;padding:16px}
.site-header{border-bottom:1px solid var(--border);background:rgba(0,0,0,.2);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.brand h1{margin:0;font-size:18px}
.brand .tagline{margin:2px 0 0;color:var(--muted);font-size:13px}
.logo{display:block}
.header-actions .btn{subtle}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin:16px 0;box-shadow:0 2px 12px rgba(0,0,0,.25)}

.grid{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}
.field{display:flex;flex-direction:column;gap:6px}
.col-2{grid-column:span 2}
.col-3{grid-column:span 3}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.end{display:flex;align-items:end;justify-content:flex-end}

label{font-weight:600}
input[type=url],input[type=text],input[type=number],select{
  background:#0b111a;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 12px;outline:none;
}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(78,163,255,.2)}
small{color:var(--muted)}
.checkbox{display:flex;gap:8px;align-items:center;margin-top:22px}

.btn{appearance:none;border:1px solid var(--accent);background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.btn:hover{filter:brightness(1.05)}
.btn.subtle{background:transparent;border-color:var(--border);color:var(--text)}
.btn.tiny{padding:6px 8px;font-size:12px;border-radius:8px}
.btn.primary{box-shadow:0 2px 10px rgba(30,120,255,.3)}

.alert{padding:10px 12px;border-radius:10px;margin:8px 0}
.alert.error{background:rgba(255,102,102,.12);border:1px solid rgba(255,102,102,.35)}
.good{color:var(--good)}
.muted{color:var(--muted)}

.result-header{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.score{display:flex;gap:16px;align-items:center}
.ring{--size:72px;--p:0;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;background:
  conic-gradient(var(--accent) calc(var(--p)*1%), #2a3950 0);
  mask: radial-gradient(circle calc(50% - 6px), transparent 99%, #000 100%);
}
.ring span{font-size:18px;font-weight:800}
.grade strong{font-size:18px}
.meta{display:flex;flex-direction:column;gap:6px}
.meta .links{display:flex;gap:8px}

.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.item{display:flex;justify-content:space-between;gap:8px}
.item-main{display:flex;gap:8px;align-items:center;min-width:0}
.pill{padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--border)}
.pill.ok{background:rgba(31,140,77,.15);border-color:#2c6f4f}
.pill.weak{background:rgba(194,139,44,.15);border-color:#7c5d1f}
.pill.missing{background:rgba(162,59,59,.15);border-color:#6f2e2e}
.truncate{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;background:#0b111a;border:1px solid var(--border);border-radius:6px;padding:2px 6px}
.chain{margin:0 0 12px 16px}

.snippets{display:flex;flex-direction:column;gap:12px}
.snippet{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.snippet-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:#0e1520;border-bottom:1px solid var(--border)}
.codeblock{margin:0;background:#0a1018;color:#d6e3f3;padding:12px;overflow:auto}

.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.history .time{color:var(--muted);min-width:160px;display:inline-block}
.history .badge{display:inline-block;background:#132033;border:1px solid var(--border);border-radius:6px;padding:2px 8px;margin:0 8px}

.site-footer{color:var(--muted);text-align:center;margin:24px 0}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);opacity:0;transition:all .2s ease;background:#0e1520;color:#fff;border:1px solid var(--border);padding:8px 12px;border-radius:8px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width: 780px){
  .grid{grid-template-columns:repeat(6,1fr)}
  .col-8{grid-column:span 6}
  .col-6{grid-column:span 6}
  .col-3{grid-column:span 3}
  .col-2{grid-column:span 3}
  .truncate{max-width:260px}
}