/* ===========================================================================
/seo-checker-pro
---------------------------------------------------------------------------
Every rule is scoped under .sxp and every class is sxp- prefixed. The
reference design was a standalone document that styled , , ,
and directly; dropped into a shared layout unscoped, those
would have rewritten the site header, footer and every other page. Scoping is
also what guarantees this page cannot regress /seo-checker-detailed, which
keeps its own stylesheet.
The palette lives on .sxp rather than :root for the same reason - the report
is a self-contained light surface, and the dark-theme block near the bottom
remaps it rather than letting the site's own tokens bleed through and fight
the design's contrast choices.
=========================================================================== */
.sxp {
--sxp-navy: #10305F;
--sxp-navy-2: #1B3E77;
--sxp-red: #E4152B;
--sxp-paper: #EFF3F9;
--sxp-grid: #E1E9F4;
--sxp-card: #FFFFFF;
--sxp-slate: #5A6C8C;
--sxp-slate-2: #8494AE;
--sxp-line: #DCE5F1;
--sxp-line-2: #C9D6E8;
--sxp-green: #0E9F6E;
--sxp-green-bg: #E6F6F0;
--sxp-amber: #D9820A;
--sxp-amber-bg: #FDF3E3;
--sxp-rose: #E4152B;
--sxp-rose-bg: #FDECEE;
--sxp-blue: #2563EB;
--sxp-blue-bg: #EAF1FE;
--sxp-violet: #7C3AED;
--sxp-violet-bg: #F1EAFE;
--sxp-teal: #0E9AA7;
--sxp-teal-bg: #E2F5F7;
--sxp-mute: #F1F5FB;
--sxp-soft: #F8FAFD;
--sxp-display: "Archivo", system-ui, sans-serif;
--sxp-font: "Inter", system-ui, -apple-system, sans-serif;
--sxp-mono: "IBM Plex Mono", ui-monospace, monospace;
--sxp-wrap: 1220px;
--sxp-r: 14px;
--sxp-r-lg: 20px;
color: var(--sxp-navy);
font-family: var(--sxp-font);
font-size: 15.5px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
background:
repeating-linear-gradient(to right, var(--sxp-grid) 0 1px, transparent 1px 34px),
repeating-linear-gradient(to bottom, var(--sxp-grid) 0 1px, transparent 1px 34px),
var(--sxp-paper);
margin: -1px 0 0;
padding-bottom: 1px;
}
.sxp *, .sxp *::before, .sxp *::after { box-sizing: border-box; }
.sxp a { color: inherit; text-decoration: none; }
.sxp button, .sxp input { font: inherit; color: inherit; background: none; border: 0; }
.sxp :focus-visible { outline: 2px solid var(--sxp-red); outline-offset: 3px; }
.sxp h1, .sxp h2, .sxp h3, .sxp h4 {
margin: 0; font-family: var(--sxp-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
.sxp p { margin: 0; }
.sxp code {
font-family: var(--sxp-mono); font-size: 12.5px; background: var(--sxp-mute);
border: 1px solid var(--sxp-line); border-radius: 5px; padding: 1px 6px; word-break: break-word;
}
.sxp .sxp-mono { font-family: var(--sxp-mono); }
.sxp-wrap { width: 100%; max-width: var(--sxp-wrap); margin-inline: auto; padding-inline: 26px; }
@media (max-width: 640px) { .sxp-wrap { padding-inline: 16px; } }
/* ══════════════════════════════════════════════════════════ HERO ══ */
.sxp-hero { padding: 52px 0 34px; }
.sxp-tagbar {
display: inline-flex; border: 1px solid var(--sxp-navy); border-radius: 3px;
overflow: hidden; box-shadow: 3px 3px 0 rgba(16, 48, 95, .14);
}
.sxp-free {
background: var(--sxp-red); color: #fff; font-family: var(--sxp-mono);
font-size: 12px; font-weight: 600; letter-spacing: .1em; padding: 7px 11px;
}
.sxp-note {
background: #fff; color: var(--sxp-navy); font-family: var(--sxp-mono);
font-size: 12px; letter-spacing: .12em; padding: 7px 13px;
}
.sxp-big { font-size: clamp(34px, 5.6vw, 66px); font-weight: 900; margin: 24px 0 0; max-width: 16ch; }
.sxp-hl {
background: var(--sxp-red); color: #fff; padding: 0 .12em .06em;
box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.sxp-dot { color: var(--sxp-red); }
.sxp-sub { margin-top: 20px; font-size: 17.5px; color: var(--sxp-slate); max-width: 58ch; }
.sxp-trust {
display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px;
font-family: var(--sxp-mono); font-size: 12.5px; color: var(--sxp-slate);
}
.sxp-runner {
margin-top: 30px; background: var(--sxp-card); border: 1px solid var(--sxp-line);
border-radius: var(--sxp-r-lg); padding: 24px;
box-shadow: 0 1px 2px rgba(16, 48, 95, .05), 0 18px 40px -26px rgba(16, 48, 95, .35);
}
.sxp-field-label {
font-family: var(--sxp-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--sxp-slate-2); display: block; margin-bottom: 10px;
}
.sxp-urlrow { display: flex; gap: 10px; flex-wrap: wrap; }
.sxp-urlrow input {
flex: 1 1 300px; border: 1.5px solid var(--sxp-line-2); border-radius: 10px; padding: 15px 17px;
font-size: 15.5px; font-family: var(--sxp-mono); background: #FBFCFE; transition: .2s;
}
.sxp-urlrow input:focus { border-color: var(--sxp-navy); background: #fff; }
.sxp-btn {
cursor: pointer; border-radius: 10px; padding: 15px 26px; font-weight: 700;
font-size: 15px; transition: .2s; white-space: nowrap;
}
.sxp-primary { background: var(--sxp-red); color: #fff; box-shadow: 0 8px 18px -10px rgba(228, 21, 43, .9); }
.sxp-primary:hover { background: #C8101F; transform: translateY(-1px); }
.sxp-primary[disabled] { opacity: .6; cursor: wait; transform: none; }
.sxp-optrow { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.sxp-seg { display: flex; gap: 3px; background: var(--sxp-mute); padding: 4px; border-radius: 99px; }
.sxp-seg button {
cursor: pointer; padding: 7px 15px; border-radius: 99px; font-size: 13px;
font-weight: 600; color: var(--sxp-slate); transition: .2s;
}
.sxp-seg button[aria-pressed="true"] { background: #fff; color: var(--sxp-navy); box-shadow: 0 2px 5px -2px rgba(16, 48, 95, .35); }
.sxp-samples { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sxp-samples > span { font-size: 13px; color: var(--sxp-slate-2); }
.sxp-samples button {
cursor: pointer; border: 1px solid var(--sxp-line); border-radius: 99px; padding: 6px 13px;
font-family: var(--sxp-mono); font-size: 12px; color: var(--sxp-slate); transition: .2s;
}
.sxp-samples button:hover { border-color: var(--sxp-navy); color: var(--sxp-navy); }
.sxp-scan { display: none; margin-top: 18px; border: 1px solid var(--sxp-line); border-radius: 12px; padding: 20px; background: var(--sxp-soft); }
.sxp-scan.is-on { display: block; }
.sxp-track { height: 6px; border-radius: 99px; background: #E4EBF6; overflow: hidden; }
.sxp-track i {
display: block; height: 100%; width: 0; border-radius: 99px;
background: linear-gradient(90deg, var(--sxp-red), #FF6B7D); transition: width .35s linear;
}
.sxp-scan ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.sxp-scan li {
display: flex; align-items: center; gap: 10px; font-family: var(--sxp-mono);
font-size: 13px; color: var(--sxp-slate-2); transition: .3s;
}
.sxp-scan li.is-done { color: var(--sxp-navy); }
.sxp-scan li b { width: 18px; text-align: center; }
.sxp-inline-error {
display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 15px 18px;
background: var(--sxp-rose-bg); border: 1px solid #F6C9CE; border-left: 4px solid var(--sxp-rose);
border-radius: 12px; font-size: 14px;
}
.sxp-inline-error b { display: block; font-weight: 700; }
.sxp-inline-error p { margin-top: 3px; color: var(--sxp-slate); }
/* ══════════════════════════════════════════════════════════ MINI BAR ══ */
.sxp-minibar {
position: sticky; top: 0; z-index: 40; display: none;
background: rgba(255, 255, 255, .93); backdrop-filter: blur(14px) saturate(180%);
border-bottom: 1px solid var(--sxp-line);
}
.sxp-minibar.is-on { display: block; }
.sxp-minibar-in { display: flex; align-items: center; gap: 14px; padding: 11px 26px; flex-wrap: wrap; }
@media (max-width: 640px) { .sxp-minibar-in { padding-inline: 16px; } }
.sxp-mini-score {
width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
font-family: var(--sxp-display); font-weight: 800; font-size: 14px; color: #fff; background: var(--sxp-slate-2);
}
.sxp-minibar .sxp-u {
font-family: var(--sxp-mono); font-size: 12.5px; color: var(--sxp-slate);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44vw;
}
.sxp-acts { margin-left: auto; display: flex; gap: 8px; }
.sxp-chipbtn {
cursor: pointer; border: 1px solid var(--sxp-line-2); border-radius: 99px; padding: 7px 14px;
font-size: 13px; font-weight: 600; color: var(--sxp-slate); transition: .2s; background: #fff;
}
.sxp-chipbtn:hover { border-color: var(--sxp-navy); color: var(--sxp-navy); }
/* ══════════════════════════════════════════════════════════ RESULTS ══ */
.sxp-results { display: none; padding: 20px 0 70px; }
.sxp-results.is-on { display: block; }
.sxp-reportbar {
display: flex; align-items: center; gap: 14px; background: var(--sxp-card);
border: 1px solid var(--sxp-line); border-radius: var(--sxp-r); padding: 14px 18px;
margin-bottom: 16px; flex-wrap: wrap;
}
.sxp-favi {
width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
background: linear-gradient(135deg, var(--sxp-navy), #3B6FF5); color: #fff;
display: grid; place-items: center; font-family: var(--sxp-display); font-weight: 800;
font-size: 15px; overflow: hidden;
}
.sxp-favi img { width: 22px; height: 22px; display: block; }
.sxp-urlbox b { display: block; font-family: var(--sxp-mono); font-size: 13.5px; word-break: break-all; }
.sxp-urlbox span { font-size: 12.5px; color: var(--sxp-slate-2); }
.sxp-metastrip { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sxp-mchip {
display: inline-flex; align-items: center; gap: 6px; background: var(--sxp-soft);
border: 1px solid var(--sxp-line); border-radius: 99px; padding: 6px 12px;
font-family: var(--sxp-mono); font-size: 11.5px; color: var(--sxp-slate);
}
.sxp-mchip b { color: var(--sxp-navy); font-weight: 600; }
.sxp-mchip.is-good { background: var(--sxp-green-bg); border-color: #BFE7D6; color: var(--sxp-green); }
.sxp-mchip.is-good b { color: var(--sxp-green); }
.sxp-mchip.is-bad { background: var(--sxp-rose-bg); border-color: #F6C9CE; color: var(--sxp-rose); }
.sxp-mchip.is-bad b { color: var(--sxp-rose); }
.sxp-scoreboard {
background: var(--sxp-card); border: 1px solid var(--sxp-line); border-radius: var(--sxp-r-lg);
padding: 26px; display: grid; grid-template-columns: 262px 1fr; gap: 34px; align-items: center;
box-shadow: 0 1px 2px rgba(16, 48, 95, .05), 0 18px 40px -30px rgba(16, 48, 95, .3);
}
@media (max-width: 900px) { .sxp-scoreboard { grid-template-columns: 1fr; gap: 26px; } }
.sxp-total { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sxp-ringwrap { position: relative; width: 196px; height: 196px; }
.sxp-ring { transform: rotate(-90deg); }
.sxp-ring circle { fill: none; stroke-width: 14; stroke-linecap: round; }
.sxp-ring-track { stroke: #EDF1F8; }
.sxp-ring-fill { transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .3, 1), stroke .4s; }
.sxp-ringtext { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.sxp-ringtext b { font-family: var(--sxp-display); font-size: 56px; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.sxp-ringtext b i { font-style: normal; font-size: 24px; vertical-align: super; margin-left: 2px; }
.sxp-ringtext span {
display: block; font-family: var(--sxp-mono); font-size: 10.5px;
letter-spacing: .14em; color: var(--sxp-slate-2); margin-top: 5px;
}
.sxp-grade { font-family: var(--sxp-mono); font-size: 12px; letter-spacing: .12em; padding: 7px 16px; border-radius: 99px; }
.sxp-livenote {
font-family: var(--sxp-mono); font-size: 11px; color: var(--sxp-slate-2);
text-align: center; max-width: 200px; line-height: 1.5;
}
.sxp-livenote.is-live { color: var(--sxp-blue); }
.sxp-potential {
background: linear-gradient(120deg, var(--sxp-green-bg), #F2FBF7); border: 1px solid #BFE7D6;
border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sxp-potential.is-clear { background: linear-gradient(120deg, var(--sxp-blue-bg), #F4F8FF); border-color: #C7DBFB; }
.sxp-potential .sxp-txt { flex: 1; min-width: 200px; font-size: 14px; color: var(--sxp-navy-2); }
.sxp-potbar { flex: 1 1 220px; min-width: 180px; }
.sxp-lane-wrap { height: 9px; border-radius: 99px; background: #DDEDE5; overflow: hidden; position: relative; }
.sxp-lane-wrap i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px; }
.sxp-lane-now { background: var(--sxp-amber); }
.sxp-lane-gain { background: repeating-linear-gradient(45deg, var(--sxp-green) 0 6px, #3FBF8F 6px 12px); opacity: .85; }
.sxp-potbar .sxp-lbl {
display: flex; justify-content: space-between; font-family: var(--sxp-mono);
font-size: 10.5px; color: var(--sxp-slate-2); margin-top: 6px;
}
.sxp-breakdown-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sxp-breakdown-head h3 { font-size: 17px; }
.sxp-breakdown-head span { font-family: var(--sxp-mono); font-size: 11.5px; color: var(--sxp-slate-2); }
.sxp-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
@media (max-width: 860px) { .sxp-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sxp-cats { grid-template-columns: 1fr; } }
.sxp-cat {
display: flex; align-items: center; gap: 13px; border: 1px solid var(--sxp-line);
border-radius: 12px; padding: 13px; cursor: pointer; transition: .2s;
text-align: left; width: 100%; background: #fff;
}
.sxp-cat:hover { border-color: var(--sxp-c); box-shadow: 0 6px 16px -8px var(--sxp-c); transform: translateY(-2px); }
.sxp-minring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.sxp-minring svg { transform: rotate(-90deg); }
.sxp-minring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.sxp-minring .sxp-ring-track { stroke: #EDF1F8; }
.sxp-minring b {
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--sxp-display); font-size: 15px; font-weight: 800;
}
.sxp-cat h4 { font-size: 14px; font-family: var(--sxp-font); font-weight: 700; letter-spacing: -.01em; }
.sxp-cat p { font-family: var(--sxp-mono); font-size: 10.5px; color: var(--sxp-slate-2); margin-top: 3px; }
.sxp-summary { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.sxp-pill {
display: inline-flex; align-items: center; gap: 7px; border-radius: 99px;
padding: 8px 15px; font-family: var(--sxp-mono); font-size: 12.5px; font-weight: 500;
}
.sxp-pill.is-ok { background: var(--sxp-green-bg); color: var(--sxp-green); }
.sxp-pill.is-warn { background: var(--sxp-amber-bg); color: var(--sxp-amber); }
.sxp-pill.is-bad { background: var(--sxp-rose-bg); color: var(--sxp-rose); }
.sxp-pill.is-info { background: var(--sxp-mute); color: var(--sxp-slate); }
button.sxp-pill { cursor: pointer; transition: .2s; }
button.sxp-pill:hover { filter: brightness(.96); }
/* ══════════════════════════════════════════════════════════ TABS ══ */
.sxp-tabbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.sxp-tab {
cursor: pointer; background: #fff; border: 1px solid var(--sxp-line); border-radius: 99px;
padding: 11px 17px; font-size: 14px; font-weight: 600; color: var(--sxp-slate);
transition: .2s; white-space: nowrap;
}
.sxp-tab:hover { border-color: var(--sxp-c); color: var(--sxp-c); transform: translateY(-1px); }
.sxp-tab[aria-pressed="true"] { background: var(--sxp-c); border-color: var(--sxp-c); color: #fff; box-shadow: 0 8px 18px -10px var(--sxp-c); }
.sxp-tab .sxp-n { font-family: var(--sxp-mono); font-size: 11px; margin-left: 7px; opacity: .75; }
.sxp-panel {
background: var(--sxp-card); border: 1px solid var(--sxp-line); border-radius: var(--sxp-r-lg);
padding: 28px; margin-top: 16px; animation: sxp-fade .35s cubic-bezier(.2, .7, .3, 1);
}
@media (max-width: 640px) { .sxp-panel { padding: 20px 16px; } }
@keyframes sxp-fade { from { opacity: 0; transform: translateY(8px); } }
.sxp-panel-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sxp-panel-head .sxp-ic {
width: 46px; height: 46px; border-radius: 13px; background: var(--sxp-c-bg);
display: grid; place-items: center; font-size: 22px; flex-shrink: 0;
}
.sxp-panel-head h2 { font-size: 24px; }
.sxp-panel-head p { color: var(--sxp-slate); font-size: 14.5px; margin-top: 5px; max-width: 62ch; }
.sxp-score-badge { margin-left: auto; text-align: right; }
.sxp-score-badge b { font-family: var(--sxp-display); font-size: 30px; font-weight: 800; letter-spacing: -.04em; }
.sxp-score-badge span { display: block; font-family: var(--sxp-mono); font-size: 10.5px; color: var(--sxp-slate-2); }
/* ── checks ─────────────────────────────────────────────────────── */
.sxp-checks { display: grid; gap: 10px; }
.sxp-check {
display: flex; gap: 14px; border: 1px solid var(--sxp-line); border-left: 4px solid var(--sxp-c);
border-radius: 12px; padding: 16px 18px; transition: .2s;
}
.sxp-check:hover { box-shadow: 0 4px 14px -7px rgba(16, 48, 95, .28); }
.sxp-check .sxp-mark {
width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
font-size: 14px; font-weight: 700; background: var(--sxp-c-bg); color: var(--sxp-c); margin-top: 1px;
}
.sxp-check .sxp-body { flex: 1; min-width: 0; }
.sxp-check .sxp-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sxp-check h4 { font-family: var(--sxp-font); font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.sxp-tagm {
font-family: var(--sxp-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
padding: 3px 8px; border-radius: 5px; background: var(--sxp-mute); color: var(--sxp-slate);
}
.sxp-tagm.is-high { background: var(--sxp-rose-bg); color: var(--sxp-rose); }
.sxp-tagm.is-med { background: var(--sxp-amber-bg); color: var(--sxp-amber); }
.sxp-tagm.is-eff { background: var(--sxp-blue-bg); color: var(--sxp-blue); }
.sxp-tagm.is-gain { background: var(--sxp-green-bg); color: var(--sxp-green); }
.sxp-found { margin-top: 7px; font-size: 14px; color: var(--sxp-navy-2); }
.sxp-why, .sxp-fix { margin-top: 7px; font-size: 13.5px; color: var(--sxp-slate); line-height: 1.6; }
.sxp-fix { border-top: 1px dashed var(--sxp-line); padding-top: 9px; }
.sxp-fix b { color: var(--sxp-navy); font-weight: 600; }
/* A check still waiting on its module: same row, visibly inert. */
.sxp-check.is-pending { opacity: .72; }
.sxp-check.is-pending .sxp-mark { animation: sxp-pulse 1.4s ease-in-out infinite; }
@keyframes sxp-pulse { 50% { opacity: .35; } }
/* ── meters ─────────────────────────────────────────────────────── */
.sxp-meter { margin-top: 10px; }
.sxp-meter .sxp-lane {
height: 26px; border-radius: 8px; background: var(--sxp-mute);
position: relative; overflow: hidden; border: 1px solid var(--sxp-line);
}
.sxp-meter .sxp-zone {
position: absolute; top: 0; bottom: 0; background: var(--sxp-green-bg);
border-left: 1px dashed #8FD4B7; border-right: 1px dashed #8FD4B7;
}
.sxp-meter .sxp-val { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 8px 0 0 8px; opacity: .85; }
.sxp-meter .sxp-caret { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--sxp-navy); border-radius: 2px; }
.sxp-meter .sxp-lbl {
display: flex; justify-content: space-between; font-family: var(--sxp-mono);
font-size: 10.5px; color: var(--sxp-slate-2); margin-top: 6px;
}
/* ── previews ───────────────────────────────────────────────────── */
.sxp-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .sxp-preview-grid { grid-template-columns: 1fr; } }
.sxp-pv { border: 1px solid var(--sxp-line); border-radius: 14px; overflow: hidden; }
.sxp-pv header {
background: var(--sxp-soft); border-bottom: 1px solid var(--sxp-line); padding: 11px 16px;
display: flex; align-items: center; gap: 10px; font-family: var(--sxp-mono); font-size: 11.5px;
letter-spacing: .09em; text-transform: uppercase; color: var(--sxp-slate);
}
.sxp-mini-seg { margin-left: auto; display: flex; gap: 3px; background: #EDF1F8; padding: 3px; border-radius: 99px; }
.sxp-mini-seg button {
cursor: pointer; padding: 4px 10px; border-radius: 99px; font-family: var(--sxp-font);
font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--sxp-slate);
}
.sxp-mini-seg button[aria-pressed="true"] { background: #fff; color: var(--sxp-navy); }
.sxp-pv .sxp-in { padding: 18px; }
.sxp-pv .sxp-in.is-mob { max-width: 400px; margin-inline: auto; border: 1px solid var(--sxp-line); border-radius: 12px; margin-top: 4px; }
.sxp-serp .sxp-url { font-size: 13px; color: #4B5563; word-break: break-all; }
.sxp-serp .sxp-t { font-size: 19px; font-weight: 500; color: #1a0dab; margin-top: 4px; line-height: 1.3; }
.sxp-serp .sxp-d { font-size: 13.5px; color: #4B5563; margin-top: 5px; line-height: 1.55; }
.sxp-serp .sxp-cut { color: #9AA4B2; }
.sxp-serp .sxp-warnline { margin-top: 12px; font-family: var(--sxp-mono); font-size: 11.5px; color: var(--sxp-amber); }
.sxp-social-img {
aspect-ratio: 1.91 / 1; background: linear-gradient(135deg, #10305F, #2A5BA8);
display: grid; place-items: center; color: #fff; font-family: var(--sxp-display);
font-weight: 800; font-size: 18px; text-align: center; padding: 20px; line-height: 1.4;
background-size: cover; background-position: center;
}
.sxp-social-meta { padding: 14px 16px; border-top: 1px solid var(--sxp-line); background: var(--sxp-soft); }
.sxp-social-meta span {
font-family: var(--sxp-mono); font-size: 11px; color: var(--sxp-slate-2);
text-transform: uppercase; letter-spacing: .08em;
}
.sxp-social-meta b { display: block; font-weight: 700; font-size: 15px; margin-top: 5px; }
.sxp-social-meta p { font-size: 13.5px; color: var(--sxp-slate); margin-top: 4px; }
/* ── SERP head: favicon + site name, the way Google renders it now ── */
.sxp-serp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sxp-serp-fav {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--sxp-line); background: #fff;
display: grid; place-items: center; overflow: hidden;
}
.sxp-serp-fav img { width: 16px; height: 16px; display: block; object-fit: contain; }
.sxp-serp-fav.is-empty {
background: var(--sxp-mute); color: var(--sxp-slate-2);
font-family: var(--sxp-display); font-weight: 800; font-size: 12px;
}
.sxp-serp-site { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sxp-serp-site b { font-size: 13.5px; font-weight: 600; color: var(--sxp-navy); }
/* ── annotated preview: which tag produces which line ── */
.sxp-hilite { position: relative; border-radius: 6px; padding: 4px 8px; margin-left: -8px; }
.sxp-hilite::after {
content: attr(data-sxp-label); position: absolute; top: -9px; right: 8px;
font-family: var(--sxp-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
padding: 1px 7px; border-radius: 99px; white-space: nowrap;
}
.sxp-hilite.is-title { background: rgba(37, 99, 235, .09); outline: 1px dashed rgba(37, 99, 235, .5); margin-top: 12px; }
.sxp-hilite.is-title::after { background: var(--sxp-blue); color: #fff; }
.sxp-hilite.is-desc { background: rgba(14, 154, 167, .1); outline: 1px dashed rgba(14, 154, 167, .55); margin-top: 14px; }
.sxp-hilite.is-desc::after { background: var(--sxp-teal); color: #fff; }
.sxp-legend {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 11px 18px; border-top: 1px solid var(--sxp-line); background: var(--sxp-soft);
font-family: var(--sxp-mono); font-size: 11px; color: var(--sxp-slate);
}
.sxp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sxp-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.sxp-legend i.is-title { background: rgba(37, 99, 235, .25); outline: 1px dashed var(--sxp-blue); }
.sxp-legend i.is-desc { background: rgba(14, 154, 167, .25); outline: 1px dashed var(--sxp-teal); }
.sxp-legend-note { color: var(--sxp-slate-2); margin-left: auto; }
.sxp-warnstack { display: grid; gap: 6px; margin-top: 12px; }
.sxp-warnstack .sxp-warnline { margin: 0; }
/* ── status pills (table verdict columns) ── */
.sxp-spill {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px;
font-family: var(--sxp-mono); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.sxp-spill b { font-size: 12px; line-height: 1; }
/* ── in-check visuals and next-step links ── */
.sxp-icon-proof {
display: flex; align-items: center; gap: 14px; margin-top: 11px; padding: 12px 14px;
border: 1px solid var(--sxp-line); border-radius: 10px; background: var(--sxp-soft);
}
.sxp-icon-tile {
width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; background: #fff;
border: 1px solid var(--sxp-line); display: grid; place-items: center; overflow: hidden;
color: var(--sxp-slate-2); font-family: var(--sxp-display); font-weight: 800;
}
.sxp-icon-tile img { width: 32px; height: 32px; object-fit: contain; display: block; }
.sxp-card-thumb {
width: 116px; aspect-ratio: 1.91 / 1; border-radius: 8px; flex-shrink: 0;
border: 1px solid var(--sxp-line); background: #fff center / cover no-repeat;
}
.sxp-icon-meta { font-size: 13px; color: var(--sxp-slate); line-height: 1.5; min-width: 0; }
.sxp-icon-meta em {
display: block; font-style: normal; font-family: var(--sxp-mono); font-size: 11px;
color: var(--sxp-slate-2); margin-top: 4px; word-break: break-all;
}
.sxp-goto { margin-top: 10px; }
.sxp-goto a, .sxp-goto button {
font-family: var(--sxp-mono); font-size: 12px; font-weight: 600; color: var(--sxp-blue);
cursor: pointer; padding: 0; border-bottom: 1px solid transparent; transition: .15s;
}
.sxp-goto a:hover, .sxp-goto button:hover { border-bottom-color: var(--sxp-blue); }
.sxp-inline-link { color: var(--sxp-blue); text-decoration: underline; }
.sxp-crawl-link { display: inline-flex; align-items: center; gap: 6px; color: var(--sxp-navy); }
.sxp-crawl-link b { border-bottom: 1px solid var(--sxp-line-2); transition: .15s; }
.sxp-crawl-link span { color: var(--sxp-blue); font-size: 12px; opacity: 0; transition: .15s; }
.sxp-crawl-link:hover b { border-bottom-color: var(--sxp-blue); color: var(--sxp-blue); }
.sxp-crawl-link:hover span { opacity: 1; }
.sxp-tbl tbody tr:hover .sxp-crawl-link span { opacity: .6; }
.sxp-deep-inline { margin-top: 18px; }
/* ── tables ─────────────────────────────────────────────────────── */
.sxp-tbl { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.sxp-tbl th {
text-align: left; font-family: var(--sxp-mono); font-size: 11px; letter-spacing: .09em;
text-transform: uppercase; color: var(--sxp-slate-2); padding: 11px 14px;
border-bottom: 1px solid var(--sxp-line); background: var(--sxp-soft); white-space: nowrap;
}
.sxp-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--sxp-line); color: var(--sxp-navy-2); vertical-align: top; word-break: break-word; }
.sxp-tbl tr:last-child td { border-bottom: 0; }
.sxp-tbl tbody tr:hover td { background: #FBFCFE; }
.sxp-tbl .sxp-bar { height: 6px; border-radius: 99px; background: var(--sxp-navy); display: block; }
.sxp-tag-ok { color: var(--sxp-green); font-weight: 600; white-space: nowrap; }
.sxp-tag-bad { color: var(--sxp-rose); font-weight: 600; white-space: nowrap; }
.sxp-tag-warn { color: var(--sxp-amber); font-weight: 600; white-space: nowrap; }
.sxp-tag-info { color: var(--sxp-slate-2); font-weight: 600; white-space: nowrap; }
.sxp-wrapscroll { overflow-x: auto; }
.sxp-cellmono { font-family: var(--sxp-mono); font-size: 12.5px; }
/* ── heading outline ────────────────────────────────────────────── */
.sxp-outline { display: grid; gap: 6px; margin-top: 6px; }
.sxp-h-row {
display: flex; gap: 12px; align-items: baseline; padding: 9px 14px;
border: 1px solid var(--sxp-line); border-radius: 9px; background: #FBFCFE;
}
.sxp-h-row b {
font-family: var(--sxp-mono); font-size: 11.5px; color: #fff; background: var(--sxp-navy);
border-radius: 5px; padding: 2px 7px; flex-shrink: 0;
}
.sxp-h-row.sxp-l2 b { background: var(--sxp-navy-2); }
.sxp-h-row.sxp-l3 b { background: var(--sxp-slate); }
.sxp-h-row.sxp-l4 b, .sxp-h-row.sxp-l5 b, .sxp-h-row.sxp-l6 b { background: var(--sxp-slate-2); }
.sxp-h-row.is-miss { border-color: #F6C9CE; background: var(--sxp-rose-bg); }
.sxp-h-row.is-miss b { background: var(--sxp-rose); }
.sxp-h-row span { font-size: 14px; }
.sxp-l2 { margin-left: 20px; } .sxp-l3 { margin-left: 40px; }
.sxp-l4 { margin-left: 60px; } .sxp-l5 { margin-left: 76px; } .sxp-l6 { margin-left: 92px; }
@media (max-width: 640px) {
.sxp-l2 { margin-left: 10px; } .sxp-l3 { margin-left: 20px; }
.sxp-l4, .sxp-l5, .sxp-l6 { margin-left: 30px; }
}
/* ── stat grid ──────────────────────────────────────────────────── */
.sxp-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 22px; }
@media (max-width: 800px) { .sxp-statgrid { grid-template-columns: repeat(2, 1fr); } }
.sxp-stat { border: 1px solid var(--sxp-line); border-radius: 12px; padding: 15px; background: #FBFCFE; }
.sxp-stat b { display: block; font-family: var(--sxp-display); font-size: 27px; font-weight: 800; letter-spacing: -.04em; }
.sxp-stat span {
font-family: var(--sxp-mono); font-size: 10.5px; letter-spacing: .07em;
text-transform: uppercase; color: var(--sxp-slate-2);
}
.sxp-stat em { font-style: normal; font-size: 11.5px; color: var(--sxp-slate); display: block; margin-top: 4px; }
.sxp-section-sub {
font-family: var(--sxp-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--sxp-slate-2); margin: 28px 0 12px; display: flex; align-items: center; gap: 10px;
}
.sxp-section-sub::after { content: ""; flex: 1; height: 1px; background: var(--sxp-line); }
.sxp-emptybox {
border: 1px dashed var(--sxp-line-2); border-radius: 12px; padding: 26px;
text-align: center; color: var(--sxp-slate); font-size: 14px;
}
.sxp-srvnote {
margin-top: 18px; background: var(--sxp-blue-bg); border: 1px solid #C7DBFB;
border-left: 4px solid var(--sxp-blue); border-radius: 12px; padding: 14px 18px;
font-size: 13.5px; color: var(--sxp-navy-2); line-height: 1.6;
}
/* ── keyword matrix ─────────────────────────────────────────────── */
.sxp-matrix {
display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 1px; background: var(--sxp-line);
border: 1px solid var(--sxp-line); border-radius: 12px; overflow: hidden; margin-top: 6px; min-width: 600px;
}
.sxp-matrix div { background: #fff; padding: 12px 14px; font-size: 13.5px; }
.sxp-matrix .sxp-hd {
background: var(--sxp-soft); font-family: var(--sxp-mono); font-size: 10.5px;
letter-spacing: .08em; text-transform: uppercase; color: var(--sxp-slate-2);
}
.sxp-matrix .sxp-kw { font-weight: 600; }
.sxp-matrix .sxp-y { color: var(--sxp-green); font-weight: 700; }
.sxp-matrix .sxp-n { color: var(--sxp-rose); font-weight: 700; }
/* ── vitals ─────────────────────────────────────────────────────── */
.sxp-vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .sxp-vitals { grid-template-columns: 1fr; } }
.sxp-vital { border: 1px solid var(--sxp-line); border-radius: 14px; padding: 20px; text-align: center; background: #FBFCFE; }
.sxp-vital .sxp-k {
font-family: var(--sxp-mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--sxp-slate-2);
}
.sxp-vital b { display: block; font-family: var(--sxp-display); font-size: 36px; font-weight: 800; letter-spacing: -.04em; margin: 6px 0 4px; }
.sxp-verdict { font-family: var(--sxp-mono); font-size: 11.5px; padding: 4px 12px; border-radius: 99px; display: inline-block; }
.sxp-scale { height: 6px; border-radius: 99px; margin: 14px 0 8px; display: flex; overflow: visible; position: relative; }
.sxp-scale i { height: 100%; }
.sxp-scale i:first-child { border-radius: 99px 0 0 99px; }
.sxp-scale i:last-of-type { border-radius: 0 99px 99px 0; }
.sxp-scale .sxp-pin { position: absolute; top: -3px; width: 3px; height: 12px; background: var(--sxp-navy); border-radius: 2px; }
.sxp-vital p { margin-top: 8px; font-size: 12.5px; color: var(--sxp-slate); line-height: 1.55; }
.sxp-waterfall { display: grid; gap: 8px; margin-top: 6px; }
.sxp-wf { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.sxp-wf .sxp-name {
width: 210px; flex-shrink: 0; font-family: var(--sxp-mono); font-size: 12px;
color: var(--sxp-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sxp-wf .sxp-lane { flex: 1; height: 22px; background: var(--sxp-mute); border-radius: 6px; overflow: hidden; position: relative; }
.sxp-wf .sxp-lane i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--sxp-c); min-width: 3px; }
.sxp-wf .sxp-ms { width: 70px; text-align: right; font-family: var(--sxp-mono); font-size: 12px; }
@media (max-width: 640px) { .sxp-wf .sxp-name { width: 100px; } }
/* ── action plan ────────────────────────────────────────────────── */
.sxp-plan { display: grid; gap: 11px; }
.sxp-task {
display: flex; gap: 14px; border: 1px solid var(--sxp-line); border-radius: 13px; padding: 16px 18px;
cursor: pointer; transition: .2s; background: #fff; text-align: left; width: 100%; align-items: flex-start;
}
.sxp-task:hover { border-color: var(--sxp-c); box-shadow: 0 6px 16px -9px var(--sxp-c); }
.sxp-task.is-done { background: #F7FBF9; border-color: #BFE7D6; }
.sxp-task .sxp-box {
width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--sxp-line-2);
flex-shrink: 0; display: grid; place-items: center; margin-top: 2px; transition: .2s;
}
.sxp-task.is-done .sxp-box { background: var(--sxp-green); border-color: var(--sxp-green); }
.sxp-task .sxp-box svg { opacity: 0; stroke: #fff; fill: none; }
.sxp-task.is-done .sxp-box svg { opacity: 1; }
.sxp-task .sxp-num {
font-family: var(--sxp-display); font-size: 20px; font-weight: 800;
color: var(--sxp-c); width: 26px; flex-shrink: 0; margin-top: 1px;
}
.sxp-task h4 { font-family: var(--sxp-font); font-size: 15.5px; font-weight: 700; }
.sxp-task.is-done h4 { text-decoration: line-through; opacity: .6; }
.sxp-task p { margin-top: 6px; font-size: 13.5px; color: var(--sxp-slate); line-height: 1.55; }
.sxp-metarow { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.sxp-planbar { background: var(--sxp-soft); border: 1px solid var(--sxp-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.sxp-planbar .sxp-lane { height: 9px; border-radius: 99px; background: #E4EBF6; overflow: hidden; margin-top: 10px; }
.sxp-planbar .sxp-lane i {
display: block; height: 100%; width: 0; border-radius: 99px;
background: linear-gradient(90deg, var(--sxp-green), #4FC79B); transition: width .4s cubic-bezier(.2, .7, .3, 1);
}
.sxp-planbar b { font-size: 15px; font-weight: 700; }
.sxp-planbar span { font-family: var(--sxp-mono); font-size: 12px; color: var(--sxp-slate); }
/* ── code viewer ────────────────────────────────────────────────── */
.sxp-codebox { background: #0E1F3D; border-radius: 12px; padding: 18px 20px; overflow-x: auto; margin-top: 6px; }
.sxp-codebox pre { margin: 0; font-family: var(--sxp-mono); font-size: 12.5px; line-height: 1.7; color: #CFE0FA; white-space: pre-wrap; word-break: break-word; }
.sxp-codebox .sxp-jk { color: #7FB2FF; }
.sxp-codebox .sxp-js { color: #95E1B8; }
.sxp-codebox .sxp-jn { color: #F3B7C0; }
.sxp-codetitle { font-family: var(--sxp-mono); font-size: 11.5px; color: var(--sxp-slate-2); margin: 16px 0 6px; }
/* ── filters ────────────────────────────────────────────────────── */
.sxp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.sxp-fchip {
cursor: pointer; border: 1px solid var(--sxp-line-2); border-radius: 99px; padding: 8px 15px;
font-size: 13.5px; font-weight: 600; color: var(--sxp-slate); transition: .2s; background: #fff;
}
.sxp-fchip:hover { border-color: var(--sxp-navy); }
.sxp-fchip[aria-pressed="true"] { background: var(--sxp-navy); border-color: var(--sxp-navy); color: #fff; }
/* ══════════════════════════════════════════════════════════ EXPLAINER / FAQ ══ */
.sxp-explain { padding: 6px 0 40px; }
.sxp-explain-in { background: var(--sxp-navy); color: #DCE7F7; border-radius: var(--sxp-r-lg); padding: 40px; }
.sxp-explain-in h2 { color: #fff; font-size: 30px; }
.sxp-explain-in > p { margin-top: 12px; color: #A9BEDD; max-width: 70ch; }
.sxp-slist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 26px; }
@media (max-width: 900px) { .sxp-slist { grid-template-columns: 1fr; } .sxp-explain-in { padding: 26px; } }
.sxp-sitem { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 17px; }
.sxp-sitem b { display: block; font-family: var(--sxp-font); font-weight: 700; font-size: 14.5px; color: #fff; }
.sxp-sitem p { margin-top: 6px; font-size: 13px; color: #A9BEDD; line-height: 1.55; }
.sxp-faq { padding: 0 0 70px; }
.sxp-faq h2 { font-size: 27px; margin-bottom: 18px; }
.sxp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px) { .sxp-faq-grid { grid-template-columns: 1fr; } }
.sxp-faq details { background: var(--sxp-card); border: 1px solid var(--sxp-line); border-radius: 12px; padding: 15px 18px; }
.sxp-faq summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; }
.sxp-faq summary::-webkit-details-marker { display: none; }
.sxp-faq summary::after { content: " +"; color: var(--sxp-red); font-family: var(--sxp-mono); }
.sxp-faq details[open] summary::after { content: " −"; }
.sxp-faq details p { margin-top: 10px; font-size: 14px; color: var(--sxp-slate); line-height: 1.65; }
.sxp-faq details a { color: var(--sxp-blue); text-decoration: underline; }
.sxp-deep {
display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 18px 22px;
background: var(--sxp-card); border: 1px solid var(--sxp-line); border-radius: var(--sxp-r);
transition: .2s; flex-wrap: wrap;
}
.sxp-deep:hover { border-color: var(--sxp-navy); transform: translateY(-1px); }
.sxp-deep-ico {
width: 42px; height: 42px; border-radius: 12px; background: var(--sxp-blue-bg);
display: grid; place-items: center; font-size: 20px; flex-shrink: 0;
}
.sxp-deep-body { flex: 1; min-width: 220px; }
.sxp-deep-body b { display: block; font-weight: 700; font-size: 15px; }
.sxp-deep-body span { font-size: 13.5px; color: var(--sxp-slate); }
.sxp-deep-go { font-family: var(--sxp-mono); font-size: 12.5px; color: var(--sxp-red); white-space: nowrap; }
/* ══════════════════════════════════════════════════════════ DARK THEME ══
The site's theme toggle sets data-theme on . The design is a light
report surface, so rather than fight it, the same variables are remapped to
a dark equivalent - the layout, spacing and semantics are untouched, and the
status colours keep their meaning at readable contrast on a dark card. */
[data-theme="dark"] .sxp {
--sxp-navy: #E8EEF9;
--sxp-navy-2: #C7D5EA;
--sxp-paper: #0C1526;
--sxp-grid: #131F35;
--sxp-card: #121C2E;
--sxp-slate: #97A8C4;
--sxp-slate-2: #74849F;
--sxp-line: #23324B;
--sxp-line-2: #31435F;
--sxp-green: #34D399;
--sxp-green-bg: #10291F;
--sxp-amber: #FBBF24;
--sxp-amber-bg: #2A2010;
--sxp-rose: #FB7185;
--sxp-rose-bg: #2B141A;
--sxp-blue: #60A5FA;
--sxp-blue-bg: #101E33;
--sxp-violet: #A78BFA;
--sxp-violet-bg: #1C1631;
--sxp-teal: #2DD4BF;
--sxp-teal-bg: #0E2626;
--sxp-mute: #18243A;
--sxp-soft: #162135;
}
[data-theme="dark"] .sxp-note,
[data-theme="dark"] .sxp-cat,
[data-theme="dark"] .sxp-tab,
[data-theme="dark"] .sxp-task,
[data-theme="dark"] .sxp-fchip,
[data-theme="dark"] .sxp-chipbtn,
[data-theme="dark"] .sxp-matrix div,
[data-theme="dark"] .sxp-seg button[aria-pressed="true"],
[data-theme="dark"] .sxp-mini-seg button[aria-pressed="true"] { background: var(--sxp-card); color: var(--sxp-navy); }
[data-theme="dark"] .sxp-urlrow input { background: #0E1828; }
[data-theme="dark"] .sxp-stat,
[data-theme="dark"] .sxp-vital,
[data-theme="dark"] .sxp-h-row { background: #101A2B; }
[data-theme="dark"] .sxp-tbl tbody tr:hover td { background: #162135; }
[data-theme="dark"] .sxp-ring-track,
[data-theme="dark"] .sxp-minring .sxp-ring-track { stroke: #1D2B44; }
[data-theme="dark"] .sxp-track,
[data-theme="dark"] .sxp-planbar .sxp-lane,
[data-theme="dark"] .sxp-lane-wrap { background: #1D2B44; }
[data-theme="dark"] .sxp-minibar { background: rgba(12, 21, 38, .93); }
[data-theme="dark"] .sxp-serp .sxp-t { color: #8AB4F8; }
[data-theme="dark"] .sxp-serp .sxp-url,
[data-theme="dark"] .sxp-serp .sxp-d { color: var(--sxp-slate); }
[data-theme="dark"] .sxp-potential { background: linear-gradient(120deg, #10291F, #0E2018); border-color: #1C4436; }
[data-theme="dark"] .sxp-potential.is-clear { background: linear-gradient(120deg, #101E33, #0D1728); border-color: #1E3557; }
[data-theme="dark"] .sxp-task.is-done { background: #10291F; border-color: #1C4436; }
[data-theme="dark"] .sxp-explain-in { background: #0A1220; border: 1px solid var(--sxp-line); }
[data-theme="dark"] .sxp-serp-fav,
[data-theme="dark"] .sxp-icon-tile,
[data-theme="dark"] .sxp-card-thumb { background-color: #0E1828; }
[data-theme="dark"] .sxp-icon-proof,
[data-theme="dark"] .sxp-legend { background: #101A2B; }
[data-theme="dark"] .sxp-hilite.is-title { background: rgba(96, 165, 250, .14); }
[data-theme="dark"] .sxp-hilite.is-desc { background: rgba(45, 212, 191, .14); }
[data-theme="dark"] .sxp-crawl-link { color: var(--sxp-navy); }
/* ══════════════════════════════════════════════════════════ PRINT / MOTION ══ */
@media (prefers-reduced-motion: reduce) {
.sxp *, .sxp *::before, .sxp *::after { transition: none !important; animation: none !important; }
}
@media print {
.sxp-hero, .sxp-minibar, .sxp-explain, .sxp-faq, .sxp-tabbar, .sxp-deep { display: none !important; }
.sxp { background: #fff; }
.sxp-panel, .sxp-scoreboard { break-inside: avoid; box-shadow: none; }
}