@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;600;700&display=swap");
/* CVEsweep tokens — generated from tokens.json */
:root, [data-theme="dark"] {
  --bg: #0b0d10;
  --surface: #12151a;
  --surface-raised: #1a1e25;
  --surface-sunken: #07080a;
  --border: #262b33;
  --border-strong: #6a7380;
  --ink: #e6e9ee;
  --ink-muted: #a3abb7;
  --ink-faint: #7f8896;
  --accent: #5ee6c8;
  --on-accent: #04130f;
  --link: #7fe9d2;
  --focus: var(--accent);
  --sev-critical: #ff6b88;
  --sev-critical-bg: #3a1520;
  --sev-high: #ffa155;
  --sev-high-bg: #3a2312;
  --sev-medium: #f0d050;
  --sev-medium-bg: #332c0d;
  --sev-low: #82b6ff;
  --sev-low-bg: #13233b;
  --sev-none: #a3abb7;
  --sev-none-bg: #1f242c;
  --fixed: #7ee08a;
  --fixed-bg: #132a18;
  --status-ok: var(--fixed);
  --status-warn: var(--sev-medium);
  --status-error: var(--sev-critical);
  --src-nvd: #7ea6ff;
  --src-osv: #5ee6c8;
  --src-ghsa: #c9a2ff;
  --src-circl: #ff9a86;
  --src-ossindex: #ffd27a;
  --src-snyk: #b7e36a;
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.5);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-raised: #eef0f3;
  --surface-sunken: #e7eaee;
  --border: #d6dae0;
  --border-strong: #7a828d;
  --ink: #11141a;
  --ink-muted: #4a5361;
  --ink-faint: #5f6773;
  --accent: #0a7a64;
  --on-accent: #ffffff;
  --link: #086652;
  --focus: var(--accent);
  --sev-critical: #b0123a;
  --sev-critical-bg: #fde8ed;
  --sev-high: #9c4700;
  --sev-high-bg: #fdeedd;
  --sev-medium: #735c00;
  --sev-medium-bg: #fbf3cf;
  --sev-low: #1d5bb5;
  --sev-low-bg: #e3eeff;
  --sev-none: #4a5361;
  --sev-none-bg: #eceef1;
  --fixed: #1d7a2c;
  --fixed-bg: #e2f5e5;
  --status-ok: var(--fixed);
  --status-warn: var(--sev-medium);
  --status-error: var(--sev-critical);
  --src-nvd: #2f5fd0;
  --src-osv: #0a7a64;
  --src-ghsa: #7240c4;
  --src-circl: #b23a22;
  --src-ossindex: #8a6200;
  --src-snyk: #466c0a;
  --shadow-pop: 0 8px 24px rgba(17,20,26,0.12);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-raised: #eef0f3;
    --surface-sunken: #e7eaee;
    --border: #d6dae0;
    --border-strong: #7a828d;
    --ink: #11141a;
    --ink-muted: #4a5361;
    --ink-faint: #5f6773;
    --accent: #0a7a64;
    --on-accent: #ffffff;
    --link: #086652;
    --focus: var(--accent);
    --sev-critical: #b0123a;
    --sev-critical-bg: #fde8ed;
    --sev-high: #9c4700;
    --sev-high-bg: #fdeedd;
    --sev-medium: #735c00;
    --sev-medium-bg: #fbf3cf;
    --sev-low: #1d5bb5;
    --sev-low-bg: #e3eeff;
    --sev-none: #4a5361;
    --sev-none-bg: #eceef1;
    --fixed: #1d7a2c;
    --fixed-bg: #e2f5e5;
    --status-ok: var(--fixed);
    --status-warn: var(--sev-medium);
    --status-error: var(--sev-critical);
    --src-nvd: #2f5fd0;
    --src-osv: #0a7a64;
    --src-ghsa: #7240c4;
    --src-circl: #b23a22;
    --src-ossindex: #8a6200;
    --src-snyk: #466c0a;
    --shadow-pop: 0 8px 24px rgba(17,20,26,0.12);
    color-scheme: light;
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.display { font-family: var(--font-mono); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.title { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; }
.heading { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 12px; line-height: 17px; font-weight: 400; }
.mono-id { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 400; }
.label { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; }


/* ============ CVEsweep components — class-based, framework-free ============ */

/* ---- base ---- */
/* The hidden attribute must always win over component display rules. */
[hidden] { display: none !important; }

.sx, .sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 21px;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.sx a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.sx a:hover { text-decoration-thickness: 2px; }
.sx :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sx code, .sx .sx-mono { font-family: var(--font-mono); font-size: 12px; }
.sx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- layout ---- */
.sx-page { max-width: 960px; margin: 0 auto; padding: var(--space-12) var(--space-4) var(--space-12); }
.sx-stack { display: flex; flex-direction: column; gap: var(--space-6); }
.sx-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---- brand lockup ---- */
.sx-brand { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.sx-brand__name { font-family: var(--font-mono); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.sx-brand__cve { color: var(--accent); }
.sx-brand__tag { font-size: 12px; color: var(--ink-muted); }

/* ---- Button ---- */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4);
  font: 600 13px/1 var(--font-mono); letter-spacing: 0.02em;
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
}
.sx-btn--primary { background: var(--accent); color: var(--on-accent); }
.sx-btn--primary:hover { filter: brightness(1.08); }
.sx-btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.sx-btn--ghost:hover { background: var(--surface-raised); }
.sx-btn--sm { height: 28px; padding: 0 var(--space-3); font-size: 12px; }
.sx-btn:disabled, .sx-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.sx-kbd { font: 600 11px/1 var(--font-mono); padding: 3px 5px; border-radius: var(--radius-sm); border: 1px solid currentColor; opacity: .7; }

/* ---- SearchBar ---- */
.sx-search { display: flex; flex-direction: column; gap: var(--space-2); }
.sx-search__field {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
}
.sx-search__field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sx-search__prompt { font: 700 15px/1 var(--font-mono); color: var(--accent); user-select: none; }
.sx-search__input {
  flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent;
  font: 500 15px/1 var(--font-mono); color: var(--ink);
}
.sx-search__input::placeholder { color: var(--ink-faint); }
.sx-search__detect {
  font: 600 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); padding: 3px var(--space-2); border-radius: var(--radius-sm);
  border: 1px solid var(--accent); white-space: nowrap;
}
.sx-search__hints { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 12px; color: var(--ink-muted); }
.sx-search__hints button {
  font: 500 12px/1 var(--font-mono); color: var(--ink-muted); background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px var(--space-2); cursor: pointer;
}
.sx-search__hints button:hover { color: var(--ink); border-color: var(--border-strong); }
.sx-search--sticky { position: sticky; top: 0; z-index: 10; background: var(--bg); padding: var(--space-3) 0; }
.sx-search--sticky.is-stuck { box-shadow: var(--shadow-pop); }

@media (max-width: 560px) {
  .sx-search__detect { display: none; }
  .sx-search__input { font-size: 16px; }
  .sx-section__org { display: none; }
}

/* ---- Landing (the pitch; hidden while results are on screen) ---- */
.is-searching .sx-landing { display: none; }
button.sx-brand__name { background: none; border: 0; padding: 0; cursor: pointer; }
.sx-landing { margin-bottom: var(--space-6); }

.sx-hero__eyebrow { margin: 0; font: 600 11px/14px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sx-hero__title { margin: var(--space-2) 0; font-family: var(--font-mono); font-weight: 700; font-size: clamp(30px, 6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.sx-hero__title em { font-style: normal; color: var(--accent); }
.sx-hero__sub { margin: 0; max-width: 56ch; font-size: 16px; line-height: 24px; color: var(--ink-muted); }

.sx-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin: 0; padding: var(--space-3) var(--space-4); list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.sx-stats li { display: flex; align-items: baseline; gap: var(--space-2); }
.sx-stats b { font: 700 15px/1 var(--font-mono); color: var(--accent); }
.sx-stats span { font: 600 12px/16px var(--font-mono); color: var(--ink-muted); }

.sx-landhead { margin: var(--space-2) 0 0; font: 600 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

.sx-feats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.sx-feat { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.sx-feat__glyph { display: block; margin-bottom: var(--space-3); font: 700 20px/1 var(--font-mono); color: var(--accent); }
.sx-feat__name { margin: 0 0 4px; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.sx-feat__desc { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }

.sx-landsources { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.sx-landsrc { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4); background: var(--surface); }
.sx-landsrc__name { font: 600 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--src, var(--ink-muted)); }
.sx-landsrc__org { font-size: 12px; color: var(--ink-muted); }
.sx-landsrc__desc { margin: 2px 0 0; font-size: 12px; line-height: 17px; color: var(--ink-faint); }

.sx-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.sx-step__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-bottom: var(--space-3); font: 700 12px/1 var(--font-mono); color: var(--on-accent); background: var(--accent); border-radius: 50%; }
.sx-step__name { margin: 0 0 4px; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.sx-step__desc { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }

@media (max-width: 720px) { .sx-feats, .sx-landsources { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .sx-feats, .sx-landsources, .sx-steps { grid-template-columns: 1fr; } }

/* ---- SeverityBadge ---- */
.sx-sev {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  font: 600 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid currentColor; white-space: nowrap;
}
.sx-sev__score { font-weight: 700; letter-spacing: 0; padding-left: 6px; border-left: 1px solid currentColor; }
.sx-sev--critical { color: var(--sev-critical); background: var(--sev-critical-bg); }
.sx-sev--high     { color: var(--sev-high);     background: var(--sev-high-bg); }
.sx-sev--medium   { color: var(--sev-medium);   background: var(--sev-medium-bg); }
.sx-sev--low      { color: var(--sev-low);      background: var(--sev-low-bg); }
.sx-sev--none     { color: var(--sev-none);     background: var(--sev-none-bg); }
.sx-sev::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.sx-sev--critical::before { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); width: 8px; height: 8px; }
.sx-sev--high::before { clip-path: polygon(50% 0,100% 100%,0 100%); width: 8px; height: 7px; }
.sx-sev--low::before, .sx-sev--none::before { border-radius: 50%; }

/* ---- SourceStatus strip ---- */
.sx-sources { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
@media (max-width: 720px) { .sx-sources { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 420px) { .sx-sources { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sx-srcstat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); background: var(--surface); text-decoration: none; color: inherit; }
.sx a.sx-srcstat { color: inherit; text-decoration: none; }
.sx-srcstat:hover { background: var(--surface-raised); }
.sx-srcstat__name { font: 600 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--src, var(--ink-muted)); }
.sx-srcstat__val { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-mono); color: var(--ink); }
.sx-srcstat__val::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.sx-srcstat.is-ok    .sx-srcstat__val::before { background: var(--status-ok); }
.sx-srcstat.is-warn  .sx-srcstat__val { color: var(--status-warn); }
.sx-srcstat.is-warn  .sx-srcstat__val::before { background: var(--status-warn); border-radius: 0; }
.sx-srcstat.is-error .sx-srcstat__val { color: var(--status-error); }
.sx-srcstat.is-error .sx-srcstat__val::before { background: var(--status-error); border-radius: 0; clip-path: polygon(50% 0,100% 100%,0 100%); }
.sx-srcstat.is-loading .sx-srcstat__val { color: var(--ink-muted); }
.sx-srcstat.is-loading .sx-srcstat__val::before { background: var(--accent); animation: sx-pulse 1s ease-in-out infinite; }
@keyframes sx-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sx-srcstat.is-loading .sx-srcstat__val::before { animation: none; } }

/* source identity: set --src on any element */
.sx-src-nvd      { --src: var(--src-nvd); }
.sx-src-osv      { --src: var(--src-osv); }
.sx-src-ghsa     { --src: var(--src-ghsa); }
.sx-src-circl    { --src: var(--src-circl); }
.sx-src-ossindex { --src: var(--src-ossindex); }
.sx-src-snyk     { --src: var(--src-snyk); }

/* ---- ResultsHead: summary + tiles pinned to the top while scrolling ---- */
.sx-results-head { display: none; }
.is-searching .sx-results-head {
  display: flex; flex-direction: column; gap: var(--space-6);
  position: sticky; top: 0; z-index: 10; background: var(--bg);
  padding: var(--space-2) 0 var(--space-3); margin-top: calc(-1 * var(--space-2));
}
.sx-results-head.is-stuck { box-shadow: var(--shadow-pop); border-bottom: 1px solid var(--border); }
/* Sections jumped to from the tiles must clear the pinned header. */
.sx-section { scroll-margin-top: 150px; }

/* ---- Summary ---- */
.sx-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.sx-summary__query { font: 700 28px/34px var(--font-mono); letter-spacing: -0.02em; color: var(--ink); word-break: break-all; }
.sx-summary__meta { font-size: 12px; color: var(--ink-muted); }
.sx-summary__counts { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; }

/* ---- SourceSection ---- */
.sx-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sx-section__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--surface-raised);
  border-bottom: 1px solid var(--border); list-style: none; cursor: pointer;
}
.sx-section__head::-webkit-details-marker { display: none; }
.sx-section:not([open]) .sx-section__head { border-bottom: 0; }
.sx-section__mark { width: 10px; height: 10px; background: var(--src); flex: none; }
.sx-section__name { font: 600 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--src); }
.sx-section__org { font-size: 12px; color: var(--ink-muted); }
.sx-section__count { margin-left: auto; font: 600 12px/1 var(--font-mono); color: var(--ink); }
.sx-section__chev { font: 600 12px/1 var(--font-mono); color: var(--ink-muted); transition: transform .15s; }
.sx-section[open] .sx-section__chev { transform: rotate(90deg); }
.sx-section__body { display: flex; flex-direction: column; }
.sx-section__body > .sx-vuln + .sx-vuln { border-top: 1px solid var(--border); }
.sx-section__foot { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-muted); }

/* ---- VulnCard ---- */
.sx-vuln { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); }
.sx-vuln__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.sx-vuln__id { font: 600 13px/18px var(--font-mono); color: var(--ink); }
.sx .sx-vuln__id a { color: var(--ink); }
.sx-vuln__aliases { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sx-vuln__alias { font: 400 12px/16px var(--font-mono); color: var(--ink-muted); padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sx-vuln__dates { margin-left: auto; font-size: 12px; line-height: 17px; color: var(--ink-muted); white-space: nowrap; }
.sx-vuln__title { margin: 0; font: 600 16px/22px var(--font-sans); color: var(--ink); }
.sx-vuln__desc { margin: 0; color: var(--ink-muted); max-width: 72ch; }
.sx-vuln__desc code { background: var(--surface-sunken); padding: 1px 4px; border-radius: var(--radius-sm); color: var(--ink); }
.sx-vuln__desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sx-vuln__fields { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); align-items: baseline; padding: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); }
.sx-vuln__label { font: 600 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.sx-vuln__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 12px; }
.sx-vuln__links a::after { content: " ↗"; }
.sx-vuln__vector { font: 400 12px/18px var(--font-mono); color: var(--ink-muted); word-break: break-all; }
@media (max-width: 560px) {
  .sx-vuln__dates { margin-left: 0; width: 100%; }
  .sx-vuln__fields { grid-template-columns: 1fr; gap: var(--space-1); }
  .sx-vuln__fields .sx-vuln__label:not(:first-child) { margin-top: var(--space-2); }
}

/* ---- VersionChip ---- */
.sx-ver { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/18px var(--font-mono); color: var(--ink); padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.sx-ver--affected::before { content: "✕"; color: var(--sev-critical); font-weight: 700; }
.sx-ver--fixed { color: var(--fixed); background: var(--fixed-bg); border-color: currentColor; font-weight: 600; }
.sx-ver--fixed::before { content: "✓"; font-weight: 700; }
.sx-ver--nofix { color: var(--sev-high); background: var(--sev-high-bg); border-color: currentColor; font-weight: 600; }
.sx-ver--nofix::before { content: "!"; font-weight: 700; }
.sx-vers { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ---- Notice (source error / empty / rate limit) ---- */
.sx-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 19px; color: var(--ink-muted); background: var(--surface); }
.sx-notice__icon { font: 700 13px/19px var(--font-mono); flex: none; }
.sx-notice strong { color: var(--ink); font-weight: 600; }
.sx-notice--warn  .sx-notice__icon { color: var(--status-warn); }
.sx-notice--error .sx-notice__icon { color: var(--status-error); }
.sx-notice--empty .sx-notice__icon { color: var(--status-ok); }
.sx-notice .sx-btn { margin-left: auto; }

/* ---- Toast (rate-limit countdown, pinned to the viewport corner) ---- */
.sx-toast {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 40;
  max-width: min(440px, calc(100vw - 2 * var(--space-4)));
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); overflow: hidden;
  animation: sx-toast-in .2s ease-out;
}
@media (prefers-reduced-motion: reduce) { .sx-toast { animation: none; } }
@keyframes sx-toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- Skeleton (loading rows) ---- */
.sx-skel { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.sx-skel span { display: block; height: 10px; border-radius: var(--radius-sm); background: var(--border); animation: sx-pulse 1.2s ease-in-out infinite; }
.sx-skel span:nth-child(1) { width: 30%; } .sx-skel span:nth-child(2) { width: 85%; } .sx-skel span:nth-child(3) { width: 60%; }
@media (prefers-reduced-motion: reduce) { .sx-skel span { animation: none; } }

/* ---- footer ---- */
.sx-foot { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }