/* ==========================================================================
   Thiago Webs · Analisador de SEO (/analisador-seo/)
   Usa as variáveis do style.css, então acompanha o tema escuro e o claro.
   ========================================================================== */

:root {
  --an-ok: #3ecf8e;
  --an-warn: #fa9135;
  --an-bad: #ff6b6b;
  --an-info: #6cb4ff;
}
html[data-tema="claro"] {
  --an-ok: #12805c;
  --an-warn: #b4500f;
  --an-bad: #c62828;
  --an-info: #1f5fbf;
}

.an { padding-top: var(--header-h); }
.an__hero { padding-block: clamp(48px, 8vw, 96px) clamp(32px, 5vw, 56px); }
.an__hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.an__title { max-width: 18ch; }
.an__form {
  width: 100%; max-width: 560px; margin-top: 12px;
  display: grid; gap: 18px; text-align: left;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
}
.an__opt { color: var(--faint); font-weight: 400; font-size: 0.875em; }
.an__hint { color: var(--faint); font-size: 0.875rem; text-align: center; }
.an__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin-top: 8px; }
.an__chips li {
  padding: 6px 14px; border-radius: 999px; font-size: 0.875rem;
  border: 1px solid var(--line-strong); color: var(--muted); background: rgb(var(--text-rgb) / 0.04);
}
.an .btn[disabled] { opacity: 0.6; cursor: progress; }

.an__card {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
}
.an__result { display: grid; gap: 20px; padding-bottom: clamp(48px, 7vw, 80px); }
.an__loading, .an__erro-wrap { max-width: 640px; padding-bottom: 48px; }
.an__loading-title { font-weight: 600; font-size: 1.125rem; margin-bottom: 16px; overflow-wrap: anywhere; }
.an__steps { display: grid; gap: 10px; }
.an__steps li { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 0.9375rem; }
.an__steps li::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-strong);
}
.an__steps li.is-done { color: var(--muted); }
.an__steps li.is-done::before { background: var(--an-ok); border-color: var(--an-ok); }
.an__steps li.is-now { color: var(--text); font-weight: 500; }
.an__steps li.is-now::before { border-color: var(--orange); animation: an-pulso 1s ease-in-out infinite; }
@keyframes an-pulso { 50% { box-shadow: 0 0 0 5px rgb(var(--orange-rgb) / 0.25); } }
.an__erro { border-color: rgb(255 107 107 / 0.5); text-align: center; font-weight: 500; }

/* resumo */
.an__summary { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 40px); align-items: center; }
.an__ring { width: 160px; height: 160px; position: relative; }
.an__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.an__ring-bg { fill: none; stroke: var(--line-strong); stroke-width: 10; }
.an__ring-fg { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.an__ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.an__ring-num strong { font-size: 2.75rem; font-weight: 600; letter-spacing: -0.03em; }
.an__ring-num span { color: var(--faint); font-size: 0.9375rem; margin-top: 4px; }
.an__res-title { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.an__res-url { color: var(--muted); overflow-wrap: anywhere; margin-top: 4px; }
.an__res-sum { color: var(--muted); margin-top: 10px; max-width: 46ch; }
.an__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* categorias */
.an__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.an__cat { padding: 18px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.an__cat-nome { color: var(--muted); font-size: 0.9375rem; }
.an__cat-nota { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.an__cat-nota small { font-size: 0.9375rem; color: var(--faint); font-weight: 400; }
.an__cat-det { color: var(--faint); font-size: 0.8125rem; overflow-wrap: anywhere; }
.an__bar { height: 6px; border-radius: 6px; background: var(--line-strong); overflow: hidden; margin-top: 4px; }
.an__bar i { display: block; height: 100%; border-radius: 6px; }
.is-ok { color: var(--an-ok); } .is-warn { color: var(--an-warn); } .is-bad { color: var(--an-bad); } .is-info { color: var(--an-info); }
.bg-ok { background: var(--an-ok); } .bg-warn { background: var(--an-warn); } .bg-bad { background: var(--an-bad); }

.an__aviso { border-color: var(--orange-line); background: var(--orange-soft); }
.an__aviso strong { display: block; margin-bottom: 4px; }
.an__aviso p { color: var(--muted); font-size: 0.9375rem; }
.an__cat.is-na { opacity: 0.72; border-style: dashed; }
.an__cat.is-na .an__cat-nota { color: var(--faint); }
.an__gscores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.an__gscore { text-align: center; padding: 18px 10px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line); display: grid; gap: 4px; }
.an__gscore strong { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.an__gscore span { color: var(--muted); font-size: 0.875rem; }
.an__subh { font-size: 1rem; margin: 22px 0 0; }
@media (max-width: 640px) { .an__gscores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an__banner {
  display: block; text-align: center; padding: 22px; border-radius: var(--radius);
  background: var(--orange-soft); border: 1px solid var(--orange-line);
  transition: border-color 0.2s, transform 0.2s;
}
.an__banner strong { display: block; font-size: 1.125rem; }
.an__banner span { color: var(--muted); font-size: 0.9375rem; }
@media (hover: hover) { .an__banner:hover { border-color: var(--orange); transform: translateY(-2px); } }

/* listas */
.an__h { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-bottom: 6px; }
.an__sub { color: var(--muted); font-size: 0.9375rem; margin-bottom: 16px; }
.an__list { display: grid; gap: 10px; margin-top: 14px; }
.an__item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line); }
.an__badge {
  flex: none; padding: 3px 10px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.an__item-cat { color: var(--faint); font-size: 0.8125rem; }
.an__item-msg { font-weight: 500; overflow-wrap: anywhere; }
.an__item-det { color: var(--muted); font-size: 0.875rem; margin-top: 2px; overflow-wrap: anywhere; }
.an__item-imp { color: var(--an-ok); font-size: 0.875rem; margin-top: 6px; }
.an__vazio { text-align: center; color: var(--muted); padding: 20px 0; }

/* detalhes */
.an__details { display: grid; gap: 10px; margin-top: 14px; }
.an__details details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-3); }
.an__details summary { cursor: pointer; list-style: none; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; font-weight: 500; }
.an__details summary::-webkit-details-marker { display: none; }
.an__details summary::after { content: "+"; color: var(--neon, var(--orange)); font-size: 1.25rem; line-height: 1; }
.an__details details[open] summary::after { content: "−"; }
.an__dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; padding: 0 16px 14px; font-size: 0.9375rem; }
.an__dl dt, .an__dl dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.an__dl dt { color: var(--muted); padding-right: 12px; }

/* tabela */
.an__table-wrap { overflow-x: auto; margin-top: 12px; }
.an__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 480px; }
.an__table th, .an__table td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.an__table th { color: var(--faint); font-weight: 500; font-size: 0.8125rem; border-top: 0; }

/* web vitals */
.an__cwv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.an__cwv-load { color: var(--muted); display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.an__spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--orange); animation: an-gira 0.8s linear infinite; flex: none; }
@keyframes an-gira { to { transform: rotate(360deg); } }

.an__cta { text-align: center; display: grid; justify-items: center; gap: 12px; padding: clamp(28px, 5vw, 48px) 20px; border-radius: var(--radius); background: var(--orange-soft); border: 1px solid var(--orange-line); }
.an__cta-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.an__cta p { color: var(--muted); max-width: 36rem; }

.an__sobre { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.an__sobre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin-top: 18px; color: var(--muted); }
.an__sobre-grid strong { color: var(--text); font-weight: 600; }
.an__nota { color: var(--faint); font-size: 0.875rem; margin-top: 24px; max-width: 60ch; }

@media (max-width: 640px) {
  .an__summary { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .an__actions { justify-content: center; }
  .an__sobre-grid { grid-template-columns: 1fr; }
  .an__dl { grid-template-columns: 1fr; }
  .an__dl dt { border-bottom: 0; padding-bottom: 0; }
  .an__dl dd { border-top: 0; padding-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .an__ring-fg { transition: none; }
  .an__steps li.is-now::before, .an__spin { animation: none; }
}