/* KillSync LP Store public Appearance bridge
   Loaded after the legacy inline LP Store CSS. Visual variables and component
   surfaces only; filters, calculations, pagination, and JavaScript are untouched. */

body.ks-lp-store-page {
  --neon: var(--ks-public-accent, var(--ks-live-accent, var(--ks-bg-picker-accent, var(--ks-accent, #00ffe7))));
  --pink: var(--ks-public-accent-2, var(--ks-live-accent-2, var(--ks-bg-picker-accent-2, var(--ks-accent-2, #ff2ba6))));
  --bg: var(--ks-bg, #070b12);
  --edge: var(--ks-border, #203247);
  --card: var(--ks-surface, #101923);
  --muted: var(--ks-muted, #8da1b2);
  --radius: var(--ks-radius, 16px);
  --shadow-1: var(--ks-shadow, 0 10px 32px rgba(0,0,0,.45));
  --font-main: var(--ks-font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  color: var(--ks-text, #dce7ef);
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--neon) 10%, transparent), transparent 28rem),
    radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--pink) 9%, transparent), transparent 28rem),
    var(--ks-bg, #070b12);
}

html.ks-bg-picker-has-bg body.ks-lp-store-page,
body.ks-lp-store-page.ks-bg-picker-has-bg {
  background: transparent !important;
  background-image: none !important;
}

body.ks-lp-store-page .lp-wrap {
  min-width: 0;
}

body.ks-lp-store-page .lp-hero,
body.ks-lp-store-page .lp-panel,
body.ks-lp-store-page .lp-card,
body.ks-lp-store-page .lp-tile,
body.ks-lp-store-page .lp-pagination,
body.ks-lp-store-page .lp-empty,
body.ks-lp-store-page .lp-setup,
body.ks-lp-store-page .lp-check {
  border-color: color-mix(in srgb, var(--neon) 20%, var(--ks-border, #203247) 80%);
  border-radius: var(--ks-radius, 16px);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ks-surface, #101923) 86%, transparent),
      color-mix(in srgb, var(--ks-bg, #070b12) 84%, transparent)
    );
  box-shadow: var(--ks-shadow, 0 10px 32px rgba(0,0,0,.45));
}

body.ks-lp-store-page .lp-hero {
  border-radius: calc(var(--ks-radius, 16px) + 8px);
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--neon) 17%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--pink) 11%, transparent), transparent 28rem),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ks-surface, #101923) 90%, transparent),
      color-mix(in srgb, var(--ks-bg, #070b12) 80%, transparent)
    );
}

body.ks-lp-store-page .lp-hero h1,
body.ks-lp-store-page .lp-title,
body.ks-lp-store-page .lp-title a,
body.ks-lp-store-page .lp-tile .val,
body.ks-lp-store-page .lp-stat .value,
body.ks-lp-store-page .lp-req-val,
body.ks-lp-store-page .lp-setup h2,
body.ks-lp-store-page .lp-check strong {
  color: var(--ks-text, #fff);
  font-family: var(--ks-font-display, var(--ks-font-body, system-ui, sans-serif));
}

body.ks-lp-store-page .lp-hero h1 {
  font-size: clamp(1.95rem, 3vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: var(--ks-letter-spacing-heading, .02em);
  font-weight: var(--ks-font-weight-heading, 800);
}

body.ks-lp-store-page .lp-hero p,
body.ks-lp-store-page .lp-sub,
body.ks-lp-store-page .lp-meta-row,
body.ks-lp-store-page .lp-result-note,
body.ks-lp-store-page .lp-page-total,
body.ks-lp-store-page .lp-check span,
body.ks-lp-store-page .lp-empty,
body.ks-lp-store-page .lp-setup,
body.ks-lp-store-page .lp-filter-grid label {
  color: var(--ks-muted, #8da1b2);
}

body.ks-lp-store-page .lp-filter-grid input,
body.ks-lp-store-page .lp-filter-grid select,
body.ks-lp-store-page .lp-select-button,
body.ks-lp-store-page .lp-custom-options {
  border-color: color-mix(in srgb, var(--neon) 18%, var(--ks-border, rgba(255,255,255,.13)) 82%);
  border-radius: var(--ks-radius, 12px);
  background: color-mix(in srgb, var(--ks-surface-2, #18212c) 84%, var(--ks-bg, #070b12) 16%);
  color: var(--ks-text, #f0fbfb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 22px rgba(0,0,0,.18);
}

body.ks-lp-store-page .lp-filter-grid input:hover,
body.ks-lp-store-page .lp-filter-grid select:hover,
body.ks-lp-store-page .lp-select-button:hover {
  border-color: color-mix(in srgb, var(--neon) 38%, var(--ks-border, rgba(255,255,255,.13)) 62%);
  background: color-mix(in srgb, var(--neon) 7%, var(--ks-surface-2, #18212c));
}

body.ks-lp-store-page .lp-filter-grid input:focus,
body.ks-lp-store-page .lp-filter-grid select:focus,
body.ks-lp-store-page .lp-select-button:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.04);
}

body.ks-lp-store-page .lp-filter-grid select option {
  background: var(--ks-surface-2, #0b121a);
  color: var(--ks-text, #eafafa);
}

body.ks-lp-store-page .lp-custom-options {
  border-color: color-mix(in srgb, var(--neon) 30%, var(--ks-border, #203247) 70%);
  box-shadow: var(--ks-shadow, 0 18px 44px rgba(0,0,0,.5));
  scrollbar-color: color-mix(in srgb, var(--neon) 36%, transparent) color-mix(in srgb, var(--ks-bg, #070b12) 80%, transparent);
}

body.ks-lp-store-page .lp-custom-option {
  color: color-mix(in srgb, var(--ks-text, #dce7ef) 88%, var(--ks-muted, #8da1b2));
}

body.ks-lp-store-page .lp-custom-option:hover,
body.ks-lp-store-page .lp-custom-option.is-focused,
body.ks-lp-store-page .lp-custom-option.is-selected {
  border-color: color-mix(in srgb, var(--neon) 28%, transparent);
  background: color-mix(in srgb, var(--neon) 10%, var(--ks-surface-2, #18212c));
  color: var(--ks-link-hover, #fff);
}

body.ks-lp-store-page .lp-btn,
body.ks-lp-store-page .lp-card-actions a,
body.ks-lp-store-page .lp-page-link {
  border-color: color-mix(in srgb, var(--neon) 34%, var(--ks-border, rgba(255,255,255,.12)) 66%);
  background: color-mix(in srgb, var(--neon) 7%, var(--ks-surface, #101923));
  color: color-mix(in srgb, var(--neon) 72%, var(--ks-text, #fff) 28%);
}

body.ks-lp-store-page .lp-btn.ghost {
  border-color: var(--ks-border, #203247);
  background: color-mix(in srgb, var(--ks-surface-2, #18212c) 64%, transparent);
  color: var(--ks-muted, #d8e2e2);
}

body.ks-lp-store-page .lp-btn:hover,
body.ks-lp-store-page .lp-card-actions a:hover,
body.ks-lp-store-page .lp-page-link:hover,
body.ks-lp-store-page .lp-title a:hover,
body.ks-lp-store-page .lp-req a:hover {
  border-color: var(--neon);
  background: color-mix(in srgb, var(--neon) 12%, var(--ks-surface-2, #18212c));
  color: var(--ks-link-hover, #fff);
}

body.ks-lp-store-page .lp-page-link.active {
  border-color: color-mix(in srgb, var(--neon) 58%, var(--ks-border, #203247) 42%);
  background: color-mix(in srgb, var(--neon) 17%, var(--ks-surface-2, #18212c));
  color: var(--ks-text, #fff);
}

body.ks-lp-store-page .lp-tile.primary,
body.ks-lp-store-page .lp-demand-note,
body.ks-lp-store-page .lp-empty,
body.ks-lp-store-page .lp-setup {
  border-color: color-mix(in srgb, var(--neon) 30%, var(--ks-border, #203247) 70%);
}

body.ks-lp-store-page .lp-demand-note,
body.ks-lp-store-page .lp-stat,
body.ks-lp-store-page .lp-req,
body.ks-lp-store-page .lp-chip,
body.ks-lp-store-page .lp-check {
  background: color-mix(in srgb, var(--ks-surface-2, #18212c) 58%, transparent);
  border-color: color-mix(in srgb, var(--neon) 12%, var(--ks-border, rgba(255,255,255,.08)) 88%);
  border-radius: var(--ks-radius, 10px);
}

body.ks-lp-store-page .lp-icon {
  border-color: color-mix(in srgb, var(--neon) 18%, var(--ks-border, #203247) 82%);
  border-radius: var(--ks-radius, 12px);
  background: color-mix(in srgb, var(--ks-surface-2, #18212c) 74%, var(--ks-bg, #070b12) 26%);
}

body.ks-lp-store-page .lp-chip.demand-moderate {
  border-color: color-mix(in srgb, var(--neon) 38%, transparent);
  color: color-mix(in srgb, var(--neon) 68%, #fff 32%);
  background: color-mix(in srgb, var(--neon) 7%, transparent);
}

@media (max-width: 720px) {
  body.ks-lp-store-page .lp-wrap {
    padding-bottom: 0 !important;
  }
}