.fst-tool, .fst-list { --fst-line: var(--line, rgba(128,128,160,.3)); --fst-surface: var(--surface, #f6f6fb); --fst-head: var(--head, inherit); --fst-muted: var(--muted, #667); }
.fst-tool { max-width: 100%; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--fst-line); border-radius: 22px; background: var(--fst-surface); margin-bottom: 2.2em; }
.fst-tool p { margin: 0 0 14px; }
.fst-label { display: block; margin: 0 0 6px; font-size: .88rem; font-weight: 600; color: var(--fst-head); }
.fst-input { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--fst-line); border-radius: 12px; background: var(--bg, #fff); color: var(--fst-head); font: inherit; font-size: 1rem; line-height: 1.5; margin-bottom: 14px; }
textarea.fst-input { resize: vertical; }
.fst-input:focus-visible, .fst-tool select:focus-visible, .fst-tool input[type=range]:focus-visible { outline: 2px solid var(--accent, #6d5efc); outline-offset: 2px; }
.fst-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; }
.fst-big { font-size: 1.25rem; letter-spacing: .02em; }
.fst-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.fst-inline { display: inline-flex; align-items: center; gap: 8px; font-size: .93rem; margin: 0 6px 10px 0; }
.fst-tool select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--fst-line); background: var(--bg, #fff); color: var(--fst-head); font: inherit; }
.fst-tool input[type=range] { width: 100%; accent-color: var(--accent, #6d5efc); }
.fst-tool input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent, #6d5efc); }
.fst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.fst-grid p { margin: 0; }
.fst-wide { grid-column: 1 / -1; }
.fst-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.fst-stats div { padding: 14px; border: 1px solid var(--fst-line); border-radius: 14px; background: var(--bg, #fff); }
.fst-stats b { display: block; font-size: 1.5rem; line-height: 1.2; color: var(--fst-head); font-variant-numeric: tabular-nums; }
.fst-stats span { font-size: .82rem; color: var(--fst-muted); }
.fst-msg { min-height: 1.4em; font-size: .93rem; margin: 0 0 12px; }
.fst-msg.is-ok { color: var(--ok, #12805c); }
.fst-msg.is-bad { color: var(--warn, #b25c00); }
.fst-count { font-weight: 400; color: var(--fst-muted); margin-left: 6px; }
.fst-count.is-bad { color: var(--warn, #b25c00); }
.fst-serp { display: grid; gap: 3px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid #dadce0; margin-bottom: 16px; font-family: Arial, sans-serif; overflow-wrap: anywhere; }
.fst-serp-url { color: #202124; font-size: .85rem; }
.fst-serp-title { color: #1a0dab; font-size: 1.2rem; line-height: 1.3; }
.fst-serp-desc { color: #4d5156; font-size: .88rem; line-height: 1.5; }
.fst-strength { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.fst-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--fst-line); overflow: hidden; }
.fst-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent, #6d5efc); transition: width .2s; }
.fst-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fst-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; max-width: 100%; margin-bottom: 2em; }
.fst-card { display: grid; gap: 8px; align-content: start; padding: 22px; border: 1px solid var(--fst-line); border-radius: 20px; background: var(--fst-surface); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.fst-card:hover { border-color: var(--accent, #6d5efc); transform: translateY(-2px); }
.fst-card strong { color: var(--fst-head); font-size: 1.12rem; }
.fst-card span { font-size: .95rem; color: var(--fst-muted); line-height: 1.5; }
.fst-back { margin-top: 2em; }
@media (prefers-reduced-motion: reduce) { .fst-card, .fst-bar i { transition: none; } .fst-card:hover { transform: none; } }