/* SEO field elements (UI-SPEC C4, C5, C6, C10, C13, C14). Light DOM, every rule scoped under its element tag, colours from the public --c-* variables only (except the E-1 mimic palette inside golem15-seo-serp .serp-card). */ golem15-seo-text, golem15-seo-robots, golem15-seo-serp, golem15-seo-image, golem15-seo-robotstxt, golem15-seo-robotstester, golem15-seo-transfer { display: block; color: var(--c-text); font-size: 14px; } golem15-seo-text .seo-visually-hidden, golem15-seo-image .seo-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } golem15-seo-text .seo-text__control { box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; transition: border-color 150ms, box-shadow 150ms; } golem15-seo-text .seo-text__control--area { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; } golem15-seo-text .seo-text__control:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-ring); } golem15-seo-text.seo-text--invalid .seo-text__control { border-color: var(--c-danger); } golem15-seo-text .seo-text__counter { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; } golem15-seo-text .seo-text__status { display: inline-flex; align-items: center; gap: 6px; } golem15-seo-text .seo-text__icon { display: inline-flex; } golem15-seo-text .seo-text__count { color: var(--c-muted); font-variant-numeric: tabular-nums; } golem15-seo-text[data-status='empty'] .seo-text__status { color: var(--c-muted); } golem15-seo-text[data-status='good'] .seo-text__status { color: var(--c-ok-text, var(--c-text)); } golem15-seo-robots .seo-robots__groups { display: flex; flex-wrap: wrap; gap: 24px; } golem15-seo-robots .seo-robots__group { display: flex; flex-direction: column; gap: 6px; } golem15-seo-robots .seo-robots__caption, golem15-seo-robots .seo-robots__summary, golem15-seo-robots .seo-robots__hint { color: var(--c-muted); font-size: 13px; } golem15-seo-robots .seo-robots__track, golem15-seo-serp .seo-serp__track { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-subtle); } golem15-seo-robots .seo-robots__segment, golem15-seo-serp .seo-serp__segment { height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--c-muted); font: inherit; font-size: 13px; cursor: pointer; transition: background-color 150ms, color 150ms; } golem15-seo-robots .seo-robots__segment[aria-checked='true'], golem15-seo-serp .seo-serp__segment[aria-checked='true'] { font-size: 14px; font-weight: 600; background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-tab, none); } golem15-seo-robots .seo-robots__segment--ok[aria-checked='true'] { background: var(--c-ok-bg, var(--c-surface)); color: var(--c-ok-text, var(--c-text)); } golem15-seo-robots .seo-robots__segment--danger[aria-checked='true'] { background: var(--c-danger-soft); color: var(--c-danger); } golem15-seo-robots .seo-robots__segment:focus-visible, golem15-seo-robots .seo-robots__toggle:focus-visible, golem15-seo-serp .seo-serp__segment:focus-visible, golem15-seo-serp .seo-serp__link:focus-visible, golem15-seo-image .seo-image__button:focus-visible { outline: 3px solid var(--c-ring); outline-offset: 2px; } golem15-seo-robots .seo-robots__advanced-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; } golem15-seo-robots .seo-robots__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--c-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } golem15-seo-robots .seo-robots__toggle[aria-expanded='true'] .seo-icon { transform: rotate(180deg); } golem15-seo-robots .seo-robots__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; } golem15-seo-robots .seo-robots__panel[hidden] { display: none; } golem15-seo-robots .seo-robots__field { display: flex; flex-direction: column; gap: 6px; } golem15-seo-robots .seo-robots__input { box-sizing: border-box; height: 44px; padding: 0 14px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-text); font: inherit; } golem15-seo-robots .seo-robots__input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-ring); } golem15-seo-robots .seo-robots__error { color: var(--c-danger); font-size: 13px; } golem15-seo-robots .seo-robots__checks { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; } golem15-seo-robots .seo-robots__check { display: inline-flex; align-items: center; gap: 8px; } golem15-seo-robots .seo-robots__check input { width: 20px; height: 20px; border-radius: 5px; accent-color: var(--c-primary); } golem15-seo-robots.seo-robots--invalid .seo-robots__track { border-color: var(--c-danger); } golem15-seo-serp .seo-serp__skeleton { max-width: 600px; height: 132px; border-radius: 12px; background: var(--c-skel); } golem15-seo-serp .seo-serp__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } golem15-seo-serp .seo-serp__language, golem15-seo-serp .seo-serp__notes { color: var(--c-muted); font-size: 13px; } golem15-seo-serp .serp-card { --serp-bg: #ffffff; --serp-site: #202124; --serp-title: #1a0dab; --serp-text: #4d5156; box-sizing: border-box; max-width: 600px; padding: 16px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--serp-bg); font-family: Arial, sans-serif; overflow-wrap: anywhere; } golem15-seo-serp .serp-card--mobile { max-width: 360px; } golem15-seo-serp .serp-card__site { display: flex; align-items: center; gap: 10px; } golem15-seo-serp .serp-card__favicon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-subtle); color: var(--c-muted); font-size: 14px; font-weight: 600; } golem15-seo-serp .serp-card__names { display: flex; flex-direction: column; color: var(--serp-site); } golem15-seo-serp .serp-card__sitename { font-size: 14px; } golem15-seo-serp .serp-card__crumbs { font-size: 12px; } golem15-seo-serp .serp-card__title { margin-top: 6px; color: var(--serp-title); font-size: 20px; line-height: 1.3; white-space: nowrap; } golem15-seo-serp .serp-card--mobile .serp-card__title { white-space: normal; } golem15-seo-serp .serp-card__description { margin-top: 4px; color: var(--serp-text); font-size: 14px; line-height: 1.58; } golem15-seo-serp .serp-card__description--missing { font-style: italic; } golem15-seo-serp .seo-serp__notes { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } golem15-seo-serp .seo-serp__error { display: inline-flex; align-items: center; gap: 6px; color: var(--c-danger); } golem15-seo-serp .seo-serp__checks, golem15-seo-serp .seo-serp__keyphrase { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; } golem15-seo-serp .seo-serp__checking { color: var(--c-muted); } golem15-seo-serp .seo-serp__keyphrase-title { font-size: 14px; font-weight: 600; } golem15-seo-serp .seo-serp__check { display: inline-flex; align-items: flex-start; gap: 6px; } golem15-seo-serp .seo-serp__check--ok { color: var(--c-ok-text, var(--c-text)); } golem15-seo-serp .seo-serp__check .seo-icon { flex: none; margin-top: 2px; } golem15-seo-serp .seo-serp__link { color: var(--c-text); text-decoration: underline; } golem15-seo-image .seo-image__preview { margin-bottom: 8px; } golem15-seo-image .seo-image__img { display: block; width: 240px; height: 126px; object-fit: cover; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-subtle); } golem15-seo-image .seo-image__actions { display: flex; gap: 8px; } golem15-seo-image .seo-image__button { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; cursor: pointer; } golem15-seo-image .seo-image__status { margin-top: 6px; color: var(--c-muted); font-size: 13px; } golem15-seo-image .seo-image__status--error { color: var(--c-danger); } golem15-seo-image.seo-image--invalid .seo-image__img { border-color: var(--c-danger); } /* E4 golem15-seo-robotstxt */ golem15-seo-robotstxt .seo-robotstxt__control { box-sizing: border-box; display: block; width: 100%; min-height: 320px; padding: 12px 14px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-text); font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; white-space: pre; overflow-x: auto; resize: vertical; transition: border-color 150ms, box-shadow 150ms; } golem15-seo-robotstxt .seo-robotstxt__control:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-ring); } golem15-seo-robotstxt.seo-robotstxt--invalid .seo-robotstxt__control, golem15-seo-robotstxt.seo-robotstxt--over .seo-robotstxt__control { border-color: var(--c-danger); } golem15-seo-robotstxt .seo-robotstxt__lint { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-subtle); font-size: 13px; } golem15-seo-robotstxt .seo-robotstxt__finding { display: flex; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; } golem15-seo-robotstxt .seo-robotstxt__finding + .seo-robotstxt__finding { margin-top: 4px; } golem15-seo-robotstxt .seo-robotstxt__finding .seo-icon { flex: none; margin-top: 3px; } golem15-seo-robotstxt .seo-robotstxt__finding--clean { color: var(--c-ok-text, var(--c-text)); } golem15-seo-robotstxt .seo-robotstxt__more { margin-top: 4px; color: var(--c-muted); } golem15-seo-robotstxt .seo-robotstxt__size { display: flex; justify-content: flex-end; gap: 12px; margin-top: 6px; color: var(--c-muted); font-size: 13px; font-variant-numeric: tabular-nums; } golem15-seo-robotstxt .seo-robotstxt__over { color: var(--c-danger); } /* E5 golem15-seo-robotstester */ golem15-seo-robotstester .seo-robotstester__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } golem15-seo-robotstester .seo-robotstester__field { display: flex; flex-direction: column; gap: 4px; } golem15-seo-robotstester .seo-robotstester__field--url { flex: 1 1 240px; } golem15-seo-robotstester .seo-robotstester__field--agent { min-width: 200px; } golem15-seo-robotstester .seo-robotstester__label { color: var(--c-muted); font-size: 13px; } golem15-seo-robotstester .seo-robotstester__input, golem15-seo-robotstester .seo-robotstester__select { box-sizing: border-box; height: 44px; padding: 0 14px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; transition: border-color 150ms, box-shadow 150ms; } golem15-seo-robotstester .seo-robotstester__input:focus, golem15-seo-robotstester .seo-robotstester__select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-ring); } golem15-seo-robotstester .seo-robotstester__button { height: 42px; padding: 0 16px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; cursor: pointer; } golem15-seo-robotstester .seo-robotstester__button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-ring); } golem15-seo-robotstester .seo-robotstester__button:disabled { cursor: default; opacity: 0.6; } golem15-seo-robotstester .seo-robotstester__result { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; font-size: 14px; overflow-wrap: anywhere; } golem15-seo-robotstester .seo-robotstester__result .seo-icon { flex: none; margin-top: 3px; } golem15-seo-robotstester .seo-robotstester__result--allowed { color: var(--c-ok-text, var(--c-text)); } golem15-seo-robotstester .seo-robotstester__result--blocked { color: var(--c-text); } golem15-seo-robotstester .seo-robotstester__result--error { color: var(--c-danger); } golem15-seo-robotstester .seo-robotstester__note { margin: 6px 0 0; color: var(--c-muted); font-size: 13px; } /* E6 golem15-seo-transfer */ golem15-seo-transfer .seo-transfer__section { display: flex; flex-direction: column; gap: 12px; } golem15-seo-transfer .seo-transfer__section--import { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--c-border); } golem15-seo-transfer .seo-transfer__heading { margin: 0; color: var(--c-text); font-size: 14px; font-weight: 600; } golem15-seo-transfer .seo-transfer__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } golem15-seo-transfer .seo-transfer__field { display: flex; flex-direction: column; gap: 4px; } golem15-seo-transfer .seo-transfer__label { color: var(--c-muted); font-size: 13px; } golem15-seo-transfer .seo-transfer__select { box-sizing: border-box; min-width: 240px; height: 44px; padding: 0 14px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; transition: border-color 150ms, box-shadow 150ms; } golem15-seo-transfer .seo-transfer__select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-ring); } golem15-seo-transfer .seo-transfer__button { height: 42px; padding: 0 16px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; cursor: pointer; } golem15-seo-transfer .seo-transfer__button--ghost { border-color: transparent; background: transparent; } golem15-seo-transfer .seo-transfer__button--primary { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary, var(--c-surface)); } golem15-seo-transfer .seo-transfer__button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-ring); } golem15-seo-transfer .seo-transfer__button:disabled { cursor: default; opacity: 0.6; } golem15-seo-transfer .seo-transfer__filename { align-self: center; color: var(--c-text); font-size: 14px; overflow-wrap: anywhere; } golem15-seo-transfer .seo-transfer__filename--none { color: var(--c-muted); } golem15-seo-transfer .seo-transfer__error { margin: 0; color: var(--c-danger); font-size: 14px; } golem15-seo-transfer .seo-transfer__note, golem15-seo-transfer .seo-transfer__done { margin: 0; color: var(--c-muted); font-size: 13px; } golem15-seo-transfer .seo-transfer__link { color: var(--c-primary); } golem15-seo-transfer .seo-transfer__preview { display: flex; flex-direction: column; gap: 12px; } golem15-seo-transfer .seo-transfer__summary { margin: 0; font-size: 14px; font-weight: 600; } golem15-seo-transfer .seo-transfer__table-wrap { max-height: 480px; overflow: auto; } golem15-seo-transfer .seo-transfer__num { font-variant-numeric: tabular-nums; text-align: right; } golem15-seo-transfer .seo-transfer__mono { font-family: 'DM Mono', ui-monospace, monospace; overflow-wrap: anywhere; } golem15-seo-transfer .seo-transfer__badge { display: inline-flex; align-items: center; height: 24px; margin-right: 4px; padding: 0 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; } golem15-seo-transfer .seo-transfer__badge--new { background: var(--c-ok-bg); color: var(--c-ok-text); } golem15-seo-transfer .seo-transfer__badge--changed, golem15-seo-transfer .seo-transfer__badge--warning { background: var(--c-sel); color: var(--c-text); } golem15-seo-transfer .seo-transfer__badge--unchanged { background: var(--c-subtle); color: var(--c-muted); } golem15-seo-transfer .seo-transfer__badge--refused { background: var(--c-danger-soft); color: var(--c-danger); } golem15-seo-transfer .seo-transfer__actions { display: flex; justify-content: flex-end; gap: 10px; } @media (max-width: 600px) { golem15-seo-robots .seo-robots__panel { grid-template-columns: 1fr; } golem15-seo-serp .serp-card, golem15-seo-serp .serp-card--mobile { max-width: none; } } @media (prefers-reduced-motion: reduce) { golem15-seo-robotstxt .seo-robotstxt__control, golem15-seo-robotstester .seo-robotstester__input, golem15-seo-robotstester .seo-robotstester__select, golem15-seo-transfer .seo-transfer__select, golem15-seo-text .seo-text__control, golem15-seo-robots .seo-robots__segment, golem15-seo-serp .seo-serp__segment { transition: none; } }