/* The free SEO tools (/tools/): forms, reports, previews and the browser tools.
   Loaded only on tool pages, after pages.css. Tokens come from chrome.css and
   site.css. One accent (purple); green, amber and red only for results. */

.ts-t-page { --t-pass: #15803d; --t-pass-bg: #e7f6ec; --t-warn: #a15c07; --t-warn-bg: #fdf1e3; --t-fail: #b3261e; --t-fail-bg: #fcebe9; }

/* --- Hero and the tool card ------------------------------------------------- */
.ts-t-hero { padding-bottom: 48px; }
.ts-t-intro { max-width: 820px; }
.ts-t-card { max-width: 1000px; margin-top: 36px; padding: 28px; }
.ts-t-card--wide { max-width: none; }
.ts-t-form { display: grid; gap: 14px; }
.ts-t-row { display: flex; gap: 10px; }
.ts-t-row .ts-input { flex: 1; min-width: 0; }
.ts-t-row .ts-b svg, .ts-t-form .ts-b svg { width: 18px; height: 18px; }
.ts-t-form .ts-status { margin-top: -2px; }
.ts-t-form.is-busy .ts-status::before, .ts-t-busy::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid #d9d2cc; border-top-color: var(--ts-purple); animation: ts-spin .8s linear infinite;
}
.ts-t-form.is-busy .ts-b[type="submit"] { opacity: .65; pointer-events: none; }
.ts-t-extra { display: grid; gap: 14px; }
.ts-t-extra .ts-row { gap: 14px; }
.ts-t-mode { max-width: 440px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
.ts-t-textarea { min-height: 0; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; resize: vertical; }
textarea.ts-input { font-family: var(--ts-text); }
#t-code { font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ts-b--sm { min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.ts-b--sm svg { width: 16px; height: 16px; }
.ts-t-check { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--ts-text); color: var(--ts-muted); cursor: pointer; }
.ts-t-check input { width: 16px; height: 16px; accent-color: var(--ts-purple); }

/* --- Results ------------------------------------------------------------------ */
.ts-t-out { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--ts-line); outline: none; display: grid; gap: 28px; }
.ts-t-out > * { min-width: 0; }
.ts-t-head { display: flex; align-items: center; gap: 22px; }
.ts-t-head h2 { margin: 0; font: 600 clamp(21px, 2.2vw, 26px)/1.25 var(--ts-display); letter-spacing: -.02em; color: var(--ts-ink); text-wrap: balance; overflow-wrap: anywhere; }
.ts-t-head .ts-eyebrow { margin-bottom: 8px; }
.ts-t-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 13.5px; color: var(--ts-muted); overflow-wrap: anywhere; }
.ts-t-meta a { color: var(--ts-ink); }
.ts-t-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-t-ring { position: relative; flex: none; width: 96px; height: 96px; }
.ts-t-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.ts-t-ring circle { fill: none; stroke-width: 9; }
.ts-t-ring .bg { stroke: #efe9e5; }
.ts-t-ring .fg { stroke: var(--ts-purple); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ts-ease); }
.ts-t-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 30px/1 var(--ts-display); letter-spacing: -.03em; color: var(--ts-ink); font-variant-numeric: tabular-nums; }

.ts-t-h { margin: 0 0 12px; font: 600 13px/1.3 var(--ts-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ts-muted); }
.ts-t-h small { margin-left: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ts-t-sub { margin: -4px 0 12px; font-size: 14.5px; color: var(--ts-muted); }

/* category scores */
.ts-t-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ts-t-cat { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--ts-soft); text-decoration: none; color: inherit; }
.ts-t-cat:hover { box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-t-cat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ts-t-cat b { font: 600 14.5px/1.3 var(--ts-text); color: var(--ts-ink); }
.ts-t-cat span { font: 600 15px/1 var(--ts-text); color: var(--ts-ink); font-variant-numeric: tabular-nums; }
.ts-t-cat small { font-size: 12.5px; color: var(--ts-muted); }
.ts-t-meter { display: block; height: 6px; border-radius: 99px; background: #e9e3de; overflow: hidden; }
.ts-t-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ts-purple); transition: width .6s var(--ts-ease), background-color .2s; }
.ts-t-meter i.is-warn { background: #d4870b; }
.ts-t-meter i.is-fail { background: #d63a2f; }
.ts-t-meter i.is-pass { background: #15803d; }

/* check rows */
.ts-t-list { display: grid; gap: 8px; }
.ts-t-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--ts-soft); }
.ts-t-item > svg { width: 20px; height: 20px; margin-top: 1px; }
.ts-t-item b { display: block; font: 600 15px/1.35 var(--ts-text); color: var(--ts-ink); }
.ts-t-item p { margin: 3px 0 0; font-size: 14px; line-height: 1.55; color: var(--ts-muted); overflow-wrap: anywhere; }
.ts-t-item code, .ts-t-code-inline { padding: .1em .35em; border-radius: 5px; background: #ece6e1; font: 500 .88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #2a2522; overflow-wrap: anywhere; }
.ts-t-item details { margin-top: 8px; }
.ts-t-item summary { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px/1.3 var(--ts-text); color: var(--ts-ink); cursor: pointer; }
.ts-t-item summary::-webkit-details-marker { display: none; }
.ts-t-item summary svg { width: 15px; height: 15px; transition: rotate .2s var(--ts-ease); }
.ts-t-item details[open] summary svg { rotate: 180deg; }
.ts-t-item details p, .ts-t-item details ul { margin-top: 8px; color: var(--ts-body); }
.ts-t-item details ul { display: grid; gap: 4px; padding-left: 18px; list-style: disc; font-size: 14px; }
.is-pass > svg, .is-pass .ts-t-st { color: var(--t-pass); }
.is-warn > svg, .is-warn .ts-t-st { color: #c27a06; }
.is-fail > svg, .is-fail .ts-t-st { color: var(--t-fail); }
.is-info > svg, .is-info .ts-t-st { color: #8a827b; }
.ts-t-item.is-fail { background: #fdf3f2; }
.ts-t-item.is-warn { background: #fdf8f1; }

/* top fixes */
.ts-t-top { display: grid; gap: 8px; counter-reset: tfix; }
.ts-t-top li { position: relative; padding: 14px 16px 14px 52px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-t-top li::before { counter-increment: tfix; content: counter(tfix); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--ts-ink); color: #fff; font: 600 12.5px/1 var(--ts-text); }
.ts-t-top b { display: block; font: 600 15px/1.35 var(--ts-text); color: var(--ts-ink); }
.ts-t-top p { margin: 3px 0 0; font-size: 14.5px; color: var(--ts-muted); }

/* summary numbers */
.ts-t-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ts-t-stat { padding: 14px 16px; border-radius: 14px; background: var(--ts-soft); }
.ts-t-stat b { display: block; font: 600 24px/1.1 var(--ts-display); letter-spacing: -.02em; color: var(--ts-ink); font-variant-numeric: tabular-nums; }
.ts-t-stat span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ts-muted); }
.ts-t-stat.is-fail b { color: var(--t-fail); }
.ts-t-stat.is-warn b { color: #b86e05; }
.ts-t-stat.is-pass b { color: var(--t-pass); }

/* tables */
.ts-t-table { overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ts-line); background: #fff; }
.ts-t-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.ts-t-table th, .ts-t-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ts-line); }
.ts-t-table thead th { position: sticky; top: 0; font-size: 12.5px; font-weight: 600; color: var(--ts-muted); background: var(--ts-soft); white-space: nowrap; }
.ts-t-table tbody th { font-weight: 600; color: var(--ts-ink); white-space: nowrap; }
.ts-t-table tr:last-child > * { border-bottom: 0; }
.ts-t-table td { overflow-wrap: anywhere; }
.ts-t-table td.num, .ts-t-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-t-table a { color: var(--ts-ink); text-underline-offset: 2px; }
.ts-t-table .ts-pill { font-size: 12px; }
.ts-t-table--scroll { max-height: 560px; overflow: auto; }
.ts-t-table .is-you { background: #faf6fe; }
.ts-t-muted { color: var(--ts-muted); }
.ts-t-mono { font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* filters */
.ts-t-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ts-t-filters button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); font: 500 13.5px/1 var(--ts-text); color: var(--ts-ink); cursor: pointer; }
.ts-t-filters button[aria-pressed="true"] { background: var(--ts-ink); color: #fff; box-shadow: none; }
.ts-t-filters button small { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }

/* progress for crawls */
.ts-t-progress { display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: var(--ts-soft); }
.ts-t-progress-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14.5px; color: var(--ts-ink); }
.ts-t-progress-top b { font-weight: 600; }
.ts-t-progress small { font-size: 13px; color: var(--ts-muted); overflow-wrap: anywhere; }

/* code and file output */
.ts-t-code { margin: 0; max-height: 520px; padding: 18px 20px; border-radius: 14px; background: #1b1718; color: #efe9e5; overflow: auto; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; tab-size: 2; }
textarea.ts-t-file { width: 100%; min-height: 320px; padding: 16px 18px; border: 0; border-radius: 14px; background: #1b1718; color: #efe9e5; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
textarea.ts-t-file:focus { outline: 2px solid var(--ts-purple); outline-offset: 2px; }
.ts-t-code .k { color: #c9a6ff; } .ts-t-code .s { color: #a5e3b5; } .ts-t-code .n { color: #ffcf8a; } .ts-t-code .b { color: #8fc8ff; }
.ts-t-code mark { background: rgba(255, 207, 138, .22); color: inherit; border-radius: 3px; }
.ts-t-code .ln { display: inline-block; width: 3ch; margin-right: 12px; text-align: right; color: #7d746e; user-select: none; }
.ts-t-code .hl { display: inline-block; min-width: 100%; background: rgba(201, 166, 255, .16); }

/* key-value lists */
.ts-t-kv { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ts-line); background: #fff; overflow: hidden; }
.ts-t-kv dt, .ts-t-kv dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--ts-line); font-size: 14px; line-height: 1.45; }
.ts-t-kv dt { color: var(--ts-muted); font-weight: 500; background: var(--ts-soft); overflow-wrap: anywhere; }
.ts-t-kv dd { color: var(--ts-ink); overflow-wrap: anywhere; }
.ts-t-kv dt:last-of-type, .ts-t-kv dd:last-of-type { border-bottom: 0; }

/* chips */
.ts-t-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-t-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); font-size: 13.5px; color: var(--ts-ink); }
.ts-t-chips span small { color: var(--ts-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ts-t-chips span.is-miss { background: #fdf8f1; box-shadow: inset 0 0 0 1px #f3dfc1; }

/* a preview at full width with facts under it */
.ts-t-look { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ts-t-look > *, .ts-t-google { min-width: 0; }
.ts-t-outline { gap: 4px; font-size: 14px; }
.ts-t-outline li { line-height: 1.5; }

/* two columns inside a report */
.ts-t-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ts-t-panel { padding: 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); min-width: 0; }
.ts-t-panel > .ts-t-h { margin-bottom: 10px; }

/* report call to action */
.ts-t-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-radius: 16px; background: var(--ts-ink); color: #eee8e3; }
.ts-t-cta b { display: block; color: #fff; font: 600 17px/1.3 var(--ts-display); }
.ts-t-cta p { margin: 4px 0 0; color: #bdb5ae; font-size: 14.5px; }
.ts-page .ts-t-cta .ts-b { background: #fff; color: var(--ts-ink); }

/* --- Google result preview --------------------------------------------------- */
.ts-t-google { padding: 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
.ts-t-g { max-width: 600px; }
.ts-t-g-site { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ts-t-g-fav { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; box-shadow: inset 0 0 0 1px #dadce0; overflow: hidden; font: 700 13px/1 Arial, sans-serif; color: #4d5156; }
.ts-t-g-fav img { width: 18px; height: 18px; object-fit: contain; }
.ts-t-g-name { display: block; font: 14px/20px Arial, sans-serif; color: #202124; }
.ts-t-g-url { display: block; font: 12px/18px Arial, sans-serif; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 460px; }
.ts-t-g-title { display: block; margin: 0; font: 20px/26px Arial, sans-serif; color: #1a0dab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-t-g-desc { margin: 4px 0 0; font: 14px/22px Arial, sans-serif; color: #4d5156; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ts-t-g-desc b { color: #4d5156; font-weight: 700; }
.ts-t-g-date { color: #70757a; }
.ts-t-g.is-mobile { max-width: 380px; }
.ts-t-g.is-mobile .ts-t-g-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 18px; line-height: 24px; }
.ts-t-g.is-mobile .ts-t-g-desc { -webkit-line-clamp: 3; }
.ts-t-g.is-mobile .ts-t-g-url { max-width: 300px; }

/* social cards */
.ts-t-socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ts-t-soc { display: grid; gap: 8px; align-content: start; }
.ts-t-soc > small { font: 600 12.5px/1.3 var(--ts-text); color: var(--ts-muted); letter-spacing: .04em; text-transform: uppercase; }
.ts-t-fb { border-radius: 8px; overflow: hidden; background: #f0f2f5; box-shadow: inset 0 0 0 1px #dddfe2; font-family: Helvetica, Arial, sans-serif; }
.ts-t-soc-img { position: relative; aspect-ratio: 1.91 / 1; background: #e4e6eb; display: grid; place-items: center; overflow: hidden; color: #8a8d91; font-size: 13px; }
.ts-t-soc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-t-fb-body { padding: 10px 12px 12px; }
.ts-t-fb-dom { display: block; font-size: 12px; text-transform: uppercase; color: #65676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-t-fb-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font: 600 16px/1.3 Helvetica, Arial, sans-serif; color: #050505; }
.ts-t-fb-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 14px; color: #65676b; }
.ts-t-x { border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px #cfd9de; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #fff; }
.ts-t-x .ts-t-soc-img { border-bottom: 1px solid #cfd9de; }
.ts-t-x-body { padding: 10px 14px 12px; }
.ts-t-x-dom { font-size: 13px; color: #536471; }
.ts-t-x-title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; color: #0f1419; }
.ts-t-x.is-summary { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
.ts-t-x.is-summary .ts-t-soc-img { aspect-ratio: 1; border-bottom: 0; border-right: 1px solid #cfd9de; }
.ts-t-wa { padding: 6px; border-radius: 10px; background: #d9fdd3; }
.ts-t-wa-in { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 6px; border-radius: 8px; background: #cfe9c7; font-family: Helvetica, Arial, sans-serif; }
.ts-t-wa-in .ts-t-soc-img { aspect-ratio: 1; border-radius: 6px; }
.ts-t-wa-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 14px/1.3 Helvetica, Arial, sans-serif; color: #111b21; }
.ts-t-wa-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 12.5px; color: #54656f; }
.ts-t-wa-dom { margin-top: 2px; font-size: 12px; color: #667781; }

/* --- Redirect chains ------------------------------------------------------ */
.ts-t-chains { display: grid; gap: 12px; }
.ts-t-chain { padding: 16px 18px; border-radius: 16px; background: var(--ts-soft); }
.ts-t-chain-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 10px; }
.ts-t-chain-top b { font: 600 15px/1.35 var(--ts-text); color: var(--ts-ink); overflow-wrap: anywhere; }
.ts-t-hops { display: grid; gap: 6px; }
.ts-t-hop { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: #fff; font-size: 13.5px; }
.ts-t-hop .ts-pill { justify-content: center; }
.ts-t-hop span { overflow-wrap: anywhere; color: var(--ts-ink); }
.ts-t-hop small { font-size: 12.5px; color: var(--ts-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-pill.info { color: #5a5550; background: #efeae6; }

/* --- Hub and related tools ------------------------------------------------------ */
.ts-t-groups { display: grid; gap: 44px; }
.ts-t-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.ts-t-group-head .ts-h3 { margin: 0; }
.ts-t-group-head p { margin: 0; font-size: 15px; color: var(--ts-muted); }
.ts-t-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ts-t-tile { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 20px; text-decoration: none; transition: translate .25s var(--ts-ease), box-shadow .25s var(--ts-ease); }
.ts-t-tile:hover { translate: 0 -2px; }
.ts-t-tile b { display: block; font: 600 16px/1.3 var(--ts-text); color: var(--ts-ink); }
.ts-t-tile small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--ts-muted); }
.ts-page .ts-t-tile-i { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; color: var(--ts-purple); background: #f3edfc; }
.ts-t-tile .ts-go { flex: none; margin-top: 10px; }
.ts-t-what li { font-size: 16px; }

/* --- Schema generator --------------------------------------------------------- */
.ts-t-gen-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.ts-t-gen-types label { position: relative; }
.ts-t-gen-types input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ts-t-gen-types span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); font: 500 14px/1 var(--ts-text); color: var(--ts-ink); cursor: pointer; }
.ts-t-gen-types input:checked + span { background: var(--ts-ink); color: #fff; box-shadow: none; }
.ts-t-gen-types input:focus-visible + span { outline: 2px solid var(--ts-purple); outline-offset: 2px; }
.ts-t-gen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ts-t-gen-form { display: grid; gap: 14px; }
.ts-t-gen-form .ts-field label .ts-t-req { margin-left: 6px; font: 600 11.5px/1 var(--ts-text); color: var(--ts-purple); letter-spacing: .02em; }
.ts-t-gen-form .ts-field label .ts-t-rec { margin-left: 6px; font: 500 11.5px/1 var(--ts-text); color: var(--ts-muted); }
.ts-t-gen-form fieldset { display: grid; gap: 10px; margin: 0; padding: 14px; border: 0; border-radius: 14px; background: var(--ts-soft); }
.ts-t-gen-form legend { padding: 0; margin-bottom: 4px; font: 600 14px/1.3 var(--ts-text); color: var(--ts-ink); float: left; width: 100%; }
.ts-t-rep { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-t-rep-head { display: flex; align-items: center; justify-content: space-between; font: 600 13px/1 var(--ts-text); color: var(--ts-muted); }
.ts-t-rep-head button, .ts-t-add { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; font: 600 13.5px/1 var(--ts-text); color: var(--ts-ink); cursor: pointer; }
.ts-t-rep-head button:hover { background: var(--ts-soft); }
.ts-t-add { justify-self: start; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-t-listrow { display: flex; align-items: center; gap: 8px; }
.ts-t-listrow .ts-input { flex: 1; min-width: 0; }
.ts-t-listrow button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); color: var(--ts-muted); cursor: pointer; }
.ts-t-listrow button:hover { color: var(--ts-ink); box-shadow: inset 0 0 0 1px var(--ts-ink); }
.ts-t-listrow button svg { width: 16px; height: 16px; }
.ts-t-hours { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 10px; }
.ts-t-hours .ts-input, .ts-t-hours .ts-select { min-width: 0; padding-left: 12px; padding-right: 8px; }
.ts-t-add svg, .ts-t-rep-head svg { width: 16px; height: 16px; }
.ts-t-gen-out { position: sticky; top: 110px; display: grid; gap: 12px; min-width: 0; }
.ts-t-gen-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ts-t-gen-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ts-t-gen-notes { display: grid; gap: 6px; font-size: 13.5px; }
.ts-t-gen-notes li { display: flex; gap: 8px; align-items: flex-start; color: var(--ts-muted); }
.ts-t-gen-notes svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.ts-t-gen-notes .is-fail { color: var(--t-fail); } .ts-t-gen-notes .is-pass { color: var(--t-pass); }

/* --- SERP preview ----------------------------------------------------------------- */
.ts-t-serp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ts-t-serp-form { display: grid; gap: 14px; }
.ts-t-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ts-t-label-row output { font: 500 13px/1 var(--ts-text); color: var(--ts-muted); font-variant-numeric: tabular-nums; }
.ts-t-label-row output.is-warn { color: #b86e05; } .ts-t-label-row output.is-fail { color: var(--t-fail); }
.ts-t-serp .ts-t-meter { margin-top: 2px; }
.ts-t-serp-view { position: sticky; top: 110px; display: grid; gap: 14px; }
.ts-t-device { max-width: 280px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-t-load summary { cursor: pointer; font: 600 14px/1.3 var(--ts-text); color: var(--ts-ink); }
.ts-t-tips { display: grid; gap: 8px; }
.ts-t-tips li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--ts-soft); font-size: 14px; line-height: 1.5; }
.ts-t-tips svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* --- Headline analyzer ----------------------------------------------------------- */
.ts-t-big { min-height: 58px; font-size: 18px; }
.ts-t-submit { align-content: end; }
.ts-t-words { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-t-words span { padding: 5px 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); font-size: 14px; }
.ts-t-words span.is-power { background: #f3edfc; box-shadow: inset 0 0 0 1px #d9c6f6; }
.ts-t-words span.is-emo { background: #fdf1e3; box-shadow: inset 0 0 0 1px #f3d9b8; }
.ts-t-words span.is-uncommon { background: #e8f3ff; box-shadow: inset 0 0 0 1px #c5dcf5; }
.ts-t-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--ts-muted); }
.ts-t-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }

/* --- QR code generator --------------------------------------------------------- */
.ts-t-qr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 28px; align-items: start; }
.ts-t-qr-form { display: grid; gap: 14px; }
.ts-t-color { padding: 6px; min-height: 50px; cursor: pointer; }
.ts-t-qr-view { display: grid; gap: 14px; justify-items: start; }
.ts-t-card-preview { width: 100%; max-width: 380px; padding: 28px 26px 22px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--ts-line), var(--ts-shadow); text-align: center; }
.ts-t-card-name { margin: 0; font: 600 20px/1.25 var(--ts-display); letter-spacing: -.015em; color: var(--ts-ink); overflow-wrap: anywhere; }
.ts-t-qr-box { display: grid; place-items: center; width: 220px; height: 220px; margin: 18px auto 14px; border-radius: 12px; background: #f5f2ef; color: var(--ts-muted); font-size: 13px; }
.ts-t-qr-box svg, .ts-t-qr-box canvas { width: 100%; height: 100%; display: block; }
.ts-t-card-msg { margin: 0; font: 600 16px/1.35 var(--ts-text); color: var(--ts-ink); overflow-wrap: anywhere; }
.ts-t-card-foot { margin: 6px 0 0; font-size: 12.5px; color: var(--ts-muted); }

/* --- Review templates ------------------------------------------------------------ */
.ts-t-tpl-form { display: grid; gap: 14px; margin-bottom: 22px; }
.ts-t-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ts-t-tpl { padding: 18px 20px; }
.ts-t-tpl header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ts-t-tpl h3 { margin: 0; flex: 1; font: 600 16px/1.3 var(--ts-text); color: var(--ts-ink); }
.ts-page .ts-t-tpl-i { width: 34px; height: 34px; padding: 8px; border-radius: 10px; color: var(--ts-purple); background: #f3edfc; }
.ts-t-tpl .ts-b { min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.ts-t-tpl-subj { margin: 0 0 8px; font-size: 14px; color: var(--ts-ink); }
.ts-t-tpl-subj span:first-child { color: var(--ts-muted); }
.ts-t-tpl-body { margin: 0; white-space: pre-line; font-size: 14.5px; line-height: 1.6; color: var(--ts-body); overflow-wrap: anywhere; }
.ts-t-tpl mark { padding: 0 3px; border-radius: 4px; background: #f3edfc; color: var(--ts-ink); }

/* --- Audit checklist ----------------------------------------------------------- */
.ts-t-cl-head { position: sticky; top: 84px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: -8px -8px 20px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-t-cl-prog { display: grid; gap: 6px; min-width: 220px; flex: 1; max-width: 420px; }
.ts-t-cl-prog b { font: 600 15px/1.2 var(--ts-text); color: var(--ts-ink); }
.ts-t-cl-prog small { font-size: 12.5px; color: var(--ts-muted); }
.ts-t-cl { display: grid; gap: 30px; }
.ts-t-cl-sec .ts-h3 { margin-bottom: 12px; }
.ts-t-cl-sec .ts-h3 small { margin-left: 8px; font: 500 13px/1 var(--ts-text); color: var(--ts-muted); letter-spacing: 0; }
.ts-t-cl-list { display: grid; gap: 8px; }
.ts-t-cl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 16px; border-radius: 14px; background: var(--ts-soft); }
.ts-t-cl-item.is-done { background: #f1f8f3; }
.ts-t-cl-item.is-todo { background: #fdf8f1; }
.ts-t-cl-item.is-na { opacity: .6; }
.ts-t-cl-text { margin: 0; font: 600 15px/1.45 var(--ts-text); color: var(--ts-ink); }
.ts-t-cl-item.is-done .ts-t-cl-text { text-decoration: line-through; text-decoration-color: #9cc8a8; }
.ts-t-cl-why { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ts-muted); }
.ts-t-cl-tool { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--ts-purple); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ts-t-cl-tool svg { width: 14px; height: 14px; }
.ts-t-cl-tool:hover { text-decoration: underline; }
.ts-t-cl-state { display: flex; gap: 4px; align-self: start; padding: 4px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-t-cl-state label { position: relative; }
.ts-t-cl-state input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ts-t-cl-state span { display: grid; place-items: center; min-width: 58px; min-height: 34px; padding: 0 8px; border-radius: 8px; font: 600 13px/1 var(--ts-text); color: var(--ts-muted); cursor: pointer; }
.ts-t-cl-state input:checked + span { background: var(--ts-ink); color: #fff; }
.ts-t-cl-state input[value="done"]:checked + span { background: var(--t-pass); }
.ts-t-cl-state input[value="todo"]:checked + span { background: #b86e05; }
.ts-t-cl-state input:focus-visible + span { outline: 2px solid var(--ts-purple); outline-offset: 1px; }
.ts-t-cl-note { grid-column: 1 / -1; }
.ts-t-cl-note summary { display: inline-block; font: 600 13px/1.3 var(--ts-text); color: var(--ts-muted); cursor: pointer; }
.ts-t-cl-note textarea { margin-top: 8px; }

/* --- Responsive ------------------------------------------------------------------ */
@media (max-width: 1099.98px) {
  .ts-t-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-t-gen-grid, .ts-t-serp { grid-template-columns: minmax(0, 1fr); }
  .ts-t-gen-out, .ts-t-serp-view { position: static; }
}
@media (max-width: 809.98px) {
  .ts-t-card { margin-top: 28px; padding: 20px; }
  .ts-t-row { flex-direction: column; }
  .ts-t-row .ts-b { width: 100%; }
  .ts-t-head { align-items: flex-start; gap: 16px; }
  .ts-t-ring { width: 76px; height: 76px; }
  .ts-t-ring b { font-size: 24px; }
  .ts-t-cats, .ts-t-2, .ts-t-tpls { grid-template-columns: minmax(0, 1fr); }
  .ts-t-cards { grid-template-columns: minmax(0, 1fr); }
  .ts-t-qr { grid-template-columns: minmax(0, 1fr); }
  .ts-t-kv { grid-template-columns: minmax(0, 1fr); }
  .ts-t-kv dt { border-bottom: 0; padding-bottom: 2px; }
  .ts-t-hop { grid-template-columns: 52px minmax(0, 1fr); }
  .ts-t-hop small { grid-column: 2; }
  .ts-t-cl-item { grid-template-columns: minmax(0, 1fr); }
  .ts-t-cl-head { top: 72px; }
  .ts-t-hours { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ts-t-hours .ts-field:first-child { grid-column: 1 / -1; }
  .ts-t-item { padding: 12px 14px; }
}
@media (max-width: 480px) {
  .ts-t-head { flex-direction: column; }
  .ts-t-cl-state span { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-t-ring .fg, .ts-t-meter i, .ts-t-tile { transition: none; }
}