/* SEO Checker widgets. Tokens come from /blog/assets/blog.css. */
.seo-wrap{max-width:900px;margin-inline:auto}
.seo-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.seo-lbl{flex:1 1 100%;font-size:.78rem;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.03em}
.seo-form input{flex:1 1 300px;min-width:0;padding:.8rem 1rem;border:1.5px solid var(--border);border-radius:12px;font:inherit;font-size:1rem;
  color:var(--text);background:var(--bg)}
.seo-form input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 18%,transparent)}
.seo-form .btn{border:none;justify-content:center}
.seo-form .btn[disabled]{cursor:progress}
.seo-status{color:var(--text-soft);font-size:.92rem;min-height:1.2em;margin-top:.5rem}
.seo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin:1.2rem 0}
.seo-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.15rem;background:var(--bg)}
.seo-card h3{margin:.1rem 0 .4rem;font-size:1rem;font-weight:800}
.seo-card p{margin:0;color:var(--text-soft);font-size:.88rem;word-break:break-word}
.seo-soft{font-weight:400;color:var(--text-soft)}
.seo-gap{margin-bottom:1rem}
.seo-row{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.seo-row .btn{padding:.6rem 1.1rem;font-size:.92rem}
.seo-scorecard{display:flex;align-items:center;gap:1rem}
.seo-grade{font-weight:700}
.seo-ring{--v:0;--ring:#39b54a;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:conic-gradient(var(--ring) calc(var(--v)*1%), var(--bg-2) 0)}
.seo-ring b{width:64px;height:64px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:1.35rem;font-weight:800}
.auth-num{font-size:1.6rem;font-weight:800}
.serp{border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.15rem;background:#fff;margin:0 0 1rem}
.serp .s-label{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem}
.serp .s-url{color:#202124;font-size:.8rem;word-break:break-all}
.serp .s-title{color:#1a0dab;font-size:1.15rem;line-height:1.3;margin:.15rem 0}
.serp .s-desc{color:#4d5156;font-size:.86rem;line-height:1.5}
.kw-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0}
.kw-chips span{border:1px solid var(--border);border-radius:999px;padding:.15rem .65rem;font-size:.8rem;color:var(--text-soft)}
.kw-chips span.in-title{border-color:#39b54a;color:#237a30}
.seo-checks{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.5rem}
.seo-group{margin:.9rem 0 .2rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.seo-check{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .85rem;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.seo-dot{display:inline-block;flex:0 0 auto;width:.8rem;height:.8rem;border-radius:50%;margin-top:.35rem;background:#8a93a3}
.lv-pass .seo-dot{background:#39b54a}.lv-warn .seo-dot{background:#f0a500}.lv-fail .seo-dot{background:#e0483b}.lv-info .seo-dot{background:#8a93a3}
.seo-check .lbl{font-weight:700}
.seo-check .det{color:var(--text-soft);font-size:.9rem;overflow-wrap:anywhere}
.psi-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.7rem;margin:.8rem 0 0}
.psi-box{text-align:center;border:1px solid var(--border);border-radius:12px;padding:.7rem .4rem;background:var(--surface)}
.psi-box b{display:block;font-size:1.4rem}
.psi-box small{color:var(--text-soft)}
#cruxWrap{margin-top:.9rem}
#crawlOut{overflow-x:auto;margin-top:.7rem}
.seo-legend{display:flex;gap:.4rem 1.1rem;flex-wrap:wrap;font-size:.85rem;color:var(--text-soft);margin:.2rem 0 1rem}
.seo-legend span{display:inline-flex;align-items:center;gap:.4rem}
.seo-legend .seo-dot{margin-top:0;width:.7rem;height:.7rem}
/* explanatory content */
.seo-h3{max-width:880px;margin:1.3rem auto .5rem;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.seo-table td:first-child{font-weight:700;white-space:nowrap;width:1%}
.seo-table td{color:var(--text-soft)}
.seo-table td:first-child{color:var(--text)}
@media(max-width:560px){.seo-table td:first-child{white-space:normal;width:34%}.seo-form .btn{width:100%}}