:root{
  --seo-tool-accent:#1abc9c;
  --seo-tool-accent-rgb:26,188,156;
}
.seo-tool-shell{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
}
.seo-tool-card{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,#fcfffe 100%);
  box-shadow:0 18px 45px rgba(15,23,42,0.06);
  padding:28px;
}
.seo-tool-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:22px;
}
.seo-tool-card-title{
  margin:0;
  font-size:1.2rem;
  font-weight:700;
  color:#15324b;
}
.seo-tool-card-text{
  margin:6px 0 0;
  color:#667085;
  font-size:.96rem;
  line-height:1.65;
}
.seo-tool-hero-icon{
  width:96px;
  height:96px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:28px;
  color:var(--seo-tool-accent);
  background:linear-gradient(135deg,rgba(var(--seo-tool-accent-rgb),0.16) 0%,rgba(var(--seo-tool-accent-rgb),0.06) 100%);
  border:1px solid rgba(var(--seo-tool-accent-rgb),0.2);
  box-shadow:0 18px 40px rgba(var(--seo-tool-accent-rgb),0.18);
}
.tool-header .seo-tool-hero-icon svg{
  width:54px;
  height:54px;
  margin:0;
  filter:none;
}
.seo-tool-pill-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:-2px 0 18px;
}
.seo-tool-pill,
.seo-tool-card-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:8px 14px;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.seo-tool-pill{
  color:#0f5f52;
  background:rgba(var(--seo-tool-accent-rgb),0.11);
  border:1px solid rgba(var(--seo-tool-accent-rgb),0.2);
}
.seo-tool-pill-soft{
  color:#5b6472;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,0.08);
}
.seo-tool-card-pill{
  color:#17344f;
  background:rgba(var(--seo-tool-accent-rgb),0.08);
  border:1px solid rgba(var(--seo-tool-accent-rgb),0.16);
  white-space:nowrap;
}
.seo-tool-field{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  grid-column:span 12;
}
.seo-tool-field-half{grid-column:span 6}
.seo-tool-field-third{grid-column:span 4}
.seo-tool-field-full{grid-column:span 12}
.seo-tool-form-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:18px;
}
.seo-tool-label{
  display:block;
  margin:0;
  font-weight:700;
  color:#243447;
  font-size:.96rem;
}
.seo-tool-help{
  margin:0;
  font-size:.9rem;
  color:#667085;
  line-height:1.6;
}
.seo-tool-input,
.seo-tool-input.form-control,
.seo-tool-input.form-select,
.seo-tool-output{
  width:100% !important;
  border:1.5px solid rgba(var(--seo-tool-accent-rgb),0.18);
  border-radius:16px;
  background:#ffffff;
  box-shadow:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
textarea.seo-tool-input.form-control,
.seo-tool-output{
  min-height:220px;
  padding:16px 18px;
  font-size:1rem;
  line-height:1.65;
  resize:vertical;
}
input.seo-tool-input.form-control,
.seo-tool-input.form-select{
  min-height:50px;
  padding:11px 14px;
  font-size:.98rem;
}
.seo-tool-output{
  min-height:320px;
  background:#fcfffe;
  font-family:"Consolas","Monaco","Courier New",monospace;
  font-size:13px;
  line-height:1.7;
}
.seo-tool-input:focus,
.seo-tool-input.form-control:focus,
.seo-tool-input.form-select:focus,
.seo-tool-output:focus{
  border-color:rgba(var(--seo-tool-accent-rgb),0.62) !important;
  box-shadow:0 0 0 4px rgba(var(--seo-tool-accent-rgb),0.12) !important;
  outline:none;
}
.seo-tool-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:50px;
  margin:0;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(var(--seo-tool-accent-rgb),0.16);
  background:linear-gradient(180deg,rgba(var(--seo-tool-accent-rgb),0.08) 0%,rgba(var(--seo-tool-accent-rgb),0.03) 100%);
}
.seo-tool-check .form-check-input{
  flex-shrink:0;
  margin-top:.2rem;
  accent-color:var(--seo-tool-accent);
}
.seo-tool-check .form-check-label{
  color:#243447;
  font-weight:600;
}
.seo-tool-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:24px;
}
.seo-tool-actions .btn{
  min-height:46px;
  margin:0;
  padding:11px 20px;
  border-radius:14px;
  font-weight:700;
}
.seo-tool-primary{
  background:linear-gradient(135deg,var(--seo-tool-accent) 0%,rgba(var(--seo-tool-accent-rgb),0.78) 100%);
  border:none;
  color:#fff;
  box-shadow:0 14px 28px rgba(var(--seo-tool-accent-rgb),0.22);
}
.seo-tool-primary:hover,
.seo-tool-primary:focus{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(var(--seo-tool-accent-rgb),0.28);
}
.seo-tool-actions .btn-outline-secondary{
  background:#ffffff;
  border:1.5px solid rgba(var(--seo-tool-accent-rgb),0.28);
  color:#15524a;
}
.seo-tool-actions .btn-outline-secondary:hover,
.seo-tool-actions .btn-outline-secondary:focus{
  background:rgba(var(--seo-tool-accent-rgb),0.06);
  border-color:rgba(var(--seo-tool-accent-rgb),0.44);
  color:#103e39;
}
.seo-tool-card .alert{
  border-radius:16px;
  padding:14px 18px;
  margin-bottom:16px;
}
.seo-tool-loading{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  border:1px dashed rgba(var(--seo-tool-accent-rgb),0.22);
  background:#f8fafc;
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  color:#5a6878;
}
.seo-tool-loading.d-none,
.seo-tool-card .alert.d-none{display:none !important}
.seo-tool-summary{
  font-size:15px;
  line-height:1.7;
  color:#45556a;
  margin:18px 0 0;
}
.seo-tool-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
  margin-top:20px;
}
.seo-tool-stat{
  background:linear-gradient(180deg,rgba(var(--seo-tool-accent-rgb),0.1) 0%,rgba(var(--seo-tool-accent-rgb),0.04) 100%);
  border:1px solid rgba(var(--seo-tool-accent-rgb),0.16);
  border-radius:18px;
  padding:16px;
}
.seo-tool-stat-label{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  color:#5a6878;
  letter-spacing:.04em;
}
.seo-tool-stat-value{
  font-size:18px;
  font-weight:700;
  color:#163450;
  margin-top:6px;
}
.seo-tool-rich-output{
  margin-top:20px;
  border:1px solid rgba(15,23,42,0.06);
  border-radius:20px;
  background:#ffffff;
  padding:18px;
  overflow-x:auto;
}
.seo-tool-rich-output:empty{display:none}
.seo-tool-rich-output > :last-child{margin-bottom:0}
.seo-tool-table{
  width:100%;
  border-collapse:collapse;
}
.seo-tool-table th,
.seo-tool-table td{
  border-bottom:1px solid rgba(15,23,42,0.08);
  padding:12px 10px;
  text-align:left;
  vertical-align:top;
  font-size:.95rem;
}
.seo-tool-table th{
  background:rgba(var(--seo-tool-accent-rgb),0.08);
  color:#17344f;
}
.seo-tool-checklist{margin:16px 0 0;padding-left:18px}
.seo-tool-checklist li{margin-bottom:8px;color:#45556a}
.seo-tool-code{
  background:#0f172a;
  border-radius:18px;
  padding:0;
  overflow:auto;
}
.seo-tool-code pre{
  margin:0;
  padding:18px;
  color:#dbeafe;
  font-size:13px;
  line-height:1.7;
  white-space:pre-wrap;
  word-break:break-word;
}
.seo-tool-preview-card{
  border:1px solid rgba(var(--seo-tool-accent-rgb),0.15);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(15,23,42,0.08);
}
.seo-tool-preview-badge{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:12px 16px;
  background:rgba(var(--seo-tool-accent-rgb),0.08);
  color:#17344f;
}
.seo-tool-preview-image{
  height:190px;
  background:#eef2f7;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
}
.seo-tool-preview-image img{width:100%;height:100%;object-fit:cover}
.seo-tool-preview-domain{
  padding:16px 16px 0;
  font-size:12px;
  font-weight:700;
  color:#64748b;
  text-transform:uppercase;
}
.seo-tool-preview-title{
  padding:8px 16px 0;
  font-size:20px;
  font-weight:700;
  color:#0f172a;
}
.seo-tool-preview-description{padding:10px 16px 18px;color:#475569}
.seo-example-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:18px;
}
.seo-example-card{
  border:1px solid rgba(var(--seo-tool-accent-rgb),0.12);
  border-radius:16px;
  background:#fff;
  padding:18px;
}
.feature-card{
  border:1px solid rgba(var(--seo-tool-accent-rgb),0.12);
  border-radius:16px;
  background:#fff;
  padding:18px;
  box-shadow:0 10px 22px rgba(15,23,42,0.04);
}
.feature-card h3{font-size:1.1rem;margin-bottom:10px}
.seo-example-card h3{font-size:1.1rem;margin-bottom:10px}
.seo-example-card pre{
  margin:0;
  font-size:13px;
  white-space:pre-wrap;
  word-break:break-word;
  background:#f8fafc;
  border-radius:12px;
  padding:14px;
}
.seo-inline-links a{font-weight:600}
@media (max-width:991.98px){
  .seo-tool-shell{grid-template-columns:1fr}
}
@media (max-width:767.98px){
  .seo-tool-card{padding:22px}
  .seo-tool-card-head{flex-direction:column;align-items:flex-start}
  .seo-tool-form-grid{grid-template-columns:1fr}
  .seo-tool-field,
  .seo-tool-field-half,
  .seo-tool-field-third,
  .seo-tool-field-full{grid-column:1/-1}
  .seo-tool-actions .btn{width:100%}
}