/* SERP Similarity: the keyword form, the progress card, the verdict, the side-by-side board with dashed links, the overlap picture and the tables. Tokens only. */
.sx-form { display: grid; gap: 16px; }
.sx-kws { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.sx-kw { display: flex; gap: 6px; align-items: flex-end; }
.sx-kw .field { flex: 1; min-width: 0; }
.sx-x { min-height: 44px; min-width: 44px; padding: 0; }
.sx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.sx-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sx-limit { margin: 0; }

.sx-progress { display: grid; gap: 14px; }
.sx-progress-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.sx-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.sx-bar span { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 99px; transition: width .5s ease; }
.sx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sx-steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.sx-steps li.run { color: var(--ink); }
.sx-steps li.done { color: var(--muted); }
.sx-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.sx-steps li.run .sx-dot { border-color: var(--accent) var(--accent) var(--line) var(--line); animation: sx-spin .9s linear infinite; }
.sx-steps li.done .sx-dot { background: var(--accent); border-color: var(--accent); position: relative; }
.sx-steps li.done .sx-dot::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--accent-ink, white); border-width: 0 2px 2px 0; transform: rotate(40deg); }
.sx-steps li.bad .sx-dot { border-color: var(--can-fg); }
@keyframes sx-spin { to { transform: rotate(360deg); } }

.sx-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin: 0 0 14px; }
.sx-head h2 { margin: 0 0 6px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sx-chip { display: inline-block; padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: .9rem; background: var(--accent-soft); color: var(--accent); }
.sx-k1 { background: var(--accent-soft); color: var(--accent); }
.sx-sample { padding: 3px 10px; border-radius: 99px; background: var(--gap-bg); color: var(--gap-fg); border: 1px solid var(--gap-bd); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.sx-verdict { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 14px; }
.sx-verdict .sx-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.sx-verdict .sx-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-verdict h3 { margin: 0 0 4px; font-size: 1.25rem; }
.sx-verdict p { margin: 0 0 10px; color: var(--muted); line-height: 1.5; }
.sx-badge { display: inline-block; padding: 3px 12px; border-radius: 99px; font-weight: 800; font-size: .8rem; }
.sx-badge.high { background: var(--cov-bg); color: var(--cov-fg); }
.sx-badge.medium { background: var(--gap-bg); color: var(--gap-fg); }
.sx-badge.low { background: var(--gen-bg); color: var(--gen-fg); }
.sx-badge.unknown { background: var(--surface-2); color: var(--muted); }
.sx-groups { display: grid; gap: 8px; margin-top: 12px; }
.sx-group { padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); }

.sx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.sx-stat { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 6px; }
.sx-stat b { font-size: 2rem; letter-spacing: -.03em; line-height: 1; }
.sx-stat span { color: var(--muted); font-size: .9rem; }
.sx-meter { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.sx-meter i { display: block; height: 100%; background: var(--accent); }
.sx-pairs { display: flex; flex-wrap: wrap; gap: 6px; }

.sx-sec { margin-bottom: 14px; }
.sx-sec > h3 { margin: 0 0 4px; font-size: 1.1rem; }
.sx-sec > .muted { margin: 0 0 12px; }

/* The side-by-side board */
.sx-scroll { overflow-x: auto; padding-bottom: 8px; }
.sx-board { position: relative; min-width: min(100%, 780px); }
.sx-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 56px; }
.sx-col-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid var(--accent); }
.sx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sx-card { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); min-height: 62px; outline-offset: 2px; transition: opacity .2s ease, transform .2s ease, background .2s ease; }
.sx-rank { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: .8rem; }
.sx-txt { display: grid; gap: 2px; min-width: 0; }
.sx-txt b { font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
.sx-txt small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-card.shared { background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); cursor: pointer; }
.sx-card.shared .sx-rank { background: var(--c); color: var(--accent-ink, white); }
.sx-card.mine { box-shadow: 0 0 0 2px var(--spark); }
.sx-mine { display: inline-block; justify-self: start; margin-top: 2px; padding: 1px 8px; border-radius: 99px; background: var(--spark-text); color: var(--surface); font-size: .7rem; font-weight: 800; }
.sx-c1 { --c: var(--chart-1); } .sx-c2 { --c: var(--chart-2); } .sx-c3 { --c: var(--chart-3); } .sx-c4 { --c: var(--chart-4); } .sx-c5 { --c: var(--chart-5); } .sx-c6 { --c: var(--chart-6); }
.sx-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sx-line { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 7; animation: sx-flow 1.4s linear infinite; transition: opacity .2s ease; }
@keyframes sx-flow { to { stroke-dashoffset: -28; } }
.sx-board.tracing .sx-card:not(.on), .sx-board.tracing .sx-line:not(.on) { opacity: .28; }
.sx-board.tracing .sx-card.on { transform: translateX(2px); }
.sx-board.tracing .sx-line.on { stroke-width: 3.2; }

/* Overlap picture and matrix */
.sx-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.sx-venn { width: min(100%, 360px); height: auto; display: block; margin: 0 auto; }
.sx-venn text { fill: var(--ink); font-weight: 800; font-size: 15px; text-anchor: middle; dominant-baseline: middle; }
.sx-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; margin-top: 8px; font-size: .9rem; }
.sx-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.sx-matrix { width: 100%; border-collapse: separate; border-spacing: 4px; }
.sx-matrix th { font-size: .82rem; font-weight: 700; color: var(--muted); text-align: center; padding: 4px; }
.sx-matrix th:first-child { text-align: left; }
.sx-matrix td { text-align: center; padding: 10px 4px; border-radius: 8px; font-weight: 800; }
.sx-h0 { background: var(--surface-2); color: var(--muted); }
.sx-h1 { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.sx-h2 { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.sx-h3 { background: var(--accent); color: var(--accent-ink, white); }
.sx-self { background: var(--surface-2); color: var(--muted); }

.sx-sites { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-site { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: .9rem; }
.sx-url { display: block; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
@media (max-width: 720px) { .sx-cols { gap: 40px; grid-auto-columns: minmax(230px, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sx-line { animation: none; } .sx-steps li.run .sx-dot { animation-duration: 2s; } }