.seo-tool {
  --tool-ink: #161616;
  --tool-paper: #f7f5ef;
  --tool-panel: #fff;
  --tool-muted: #62625f;
  --tool-line: rgba(22,22,22,.18);
  margin: clamp(28px,6vw,76px) 0;
  padding: clamp(22px,5vw,58px);
  color: var(--tool-ink);
  background: linear-gradient(145deg,#fbfaf7,var(--tool-paper));
  border: 1px solid var(--tool-line);
  border-radius: 28px;
  font-family: "DM Sans",Arial,sans-serif;
  font-size: 1rem;
  line-height: 1.62;
}

.seo-tool-intro { max-width: 720px; margin-bottom: 28px; }
.seo-tool-intro h2 { margin: 0; font-size: clamp(2.25rem,5vw,4.5rem); line-height: .98; letter-spacing: -.035em; }
.seo-tool-intro p { margin: 16px 0 0; color: var(--tool-muted); font-size: 1rem; line-height: 1.7; }

.seo-tool-form {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  padding: clamp(18px,3vw,30px);
  background: var(--tool-panel);
  border: 1px solid var(--tool-line);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.045);
}

.seo-tool-field,
.seo-tool-form > label,
.seo-tool-fieldset { min-width: 0; display: grid; align-content: start; gap: 8px; }
.seo-tool-field--full,
.seo-tool-form > .full,
.seo-tool-fieldset,
.seo-tool-actions { grid-column: 1/-1; }

.seo-tool label,
.seo-tool legend {
  color: var(--tool-ink);
  font-size: .925rem;
  font-weight: 700;
  line-height: 1.4;
}

.seo-tool small,
.seo-tool .field-help { color: var(--tool-muted); font-size: .875rem; line-height: 1.55; }

.seo-tool input:not([type="checkbox"]):not([type="radio"]),
.seo-tool select,
.seo-tool textarea {
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  padding: 12px 14px;
  color: var(--tool-ink);
  background: #fff;
  border: 1.5px solid #aaa9a4;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
}

.seo-tool textarea { min-height: 130px; resize: vertical; }
.seo-tool input::placeholder,
.seo-tool textarea::placeholder { color: #767570; opacity: 1; }

.seo-tool input:focus-visible,
.seo-tool select:focus-visible,
.seo-tool textarea:focus-visible,
.seo-tool button:focus-visible,
.seo-tool a:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.seo-tool-fieldset { margin: 0; padding: 0; border: 0; }
.seo-tool-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.seo-tool-option {
  min-height: 48px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f8f7f3;
  border: 1px solid var(--tool-line);
  border-radius: 10px;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
}
.seo-tool-option:has(input:checked) { color:#fff; background:#171717; }
.seo-tool-option input { width: 18px; height: 18px; flex:0 0 auto; accent-color:#111; }
.seo-tool-option:has(input:checked) input { accent-color:#fff; }

.seo-tool-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.seo-tool button[type="submit"],
.seo-tool-button {
  min-height: 52px;
  padding: 0 22px;
  color: #fff;
  background: #171717;
  border: 2px solid #171717;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
}
.seo-tool button[type="submit"]:hover,
.seo-tool-button:hover { color:#171717; background:#fff; }

.seo-tool-result {
  min-height: 28px;
  margin-top: 18px;
  padding: 0;
  color: var(--tool-muted);
  border: 0;
  border-radius: 20px;
}
.seo-tool-result:empty { display:none; }
.seo-tool-result.is-ready {
  padding: clamp(22px,4vw,38px);
  color: #fff;
  background: #171717;
  border: 1px solid #171717;
}
.seo-tool-result h2 { margin:0; color:#fff; font-size:clamp(1.75rem,4vw,3rem); line-height:1.02; letter-spacing:-.025em; }
.seo-tool-result p { max-width:760px; margin:14px 0 0; color:#d5d5d2; font-size:1rem; line-height:1.72; }
.seo-tool-result ul { margin:18px 0 0; padding-left:1.3rem; color:#efefec; }
.seo-tool-result li + li { margin-top:8px; }

@media (max-width: 720px) {
  .seo-tool { border-radius:22px; }
  .seo-tool-form { grid-template-columns:1fr; }
  .seo-tool-field--full,
  .seo-tool-form > .full,
  .seo-tool-fieldset,
  .seo-tool-actions { grid-column:1; }
  .seo-tool-options { grid-template-columns:1fr; }
  .seo-tool button[type="submit"],
  .seo-tool-button { width:100%; }
}

@media (prefers-contrast: more) {
  .seo-tool { --tool-muted:#333; --tool-line:#111; background:#fff; }
  .seo-tool-form { box-shadow:none; }
  .seo-tool input:not([type="checkbox"]):not([type="radio"]),
  .seo-tool select,
  .seo-tool textarea { border-color:#111; }
}

@media (forced-colors: active) {
  .seo-tool,
  .seo-tool-form,
  .seo-tool-result { border:2px solid CanvasText; }
  .seo-tool-option:has(input:checked),
  .seo-tool-result.is-ready,
  .seo-tool button[type="submit"] { forced-color-adjust:auto; }
}

@media (prefers-reduced-motion: reduce) {
  .seo-tool * { scroll-behavior:auto!important; transition:none!important; }
}