/* Skin switcher — A/B на встречах (#01 / #12 / #40) */

.skin-switcher {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.35rem;
  border-radius: 8px;
  border: 1px solid var(--border, var(--bb-border, #1a1a1a));
  background: color-mix(in srgb, var(--card, var(--bb-card, #0c0c0c)) 92%, transparent);
}

.skin-switcher-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, var(--bb-muted, #9ca3af));
  padding: 0 0.25rem 0 0.15rem;
  white-space: nowrap;
}

nav.toolbar,
.wrap > .toolbar {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.skin-switcher button {
  font-size: 11px;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, var(--bb-muted, #9ca3af));
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.skin-switcher button:hover {
  color: var(--text, var(--bb-text, #fafafa));
  border-color: color-mix(in srgb, var(--cyan, var(--bb-cyan, #22d3ee)) 25%, transparent);
}

.skin-switcher button.active {
  color: var(--cyan, var(--bb-cyan, #22d3ee));
  border-color: color-mix(in srgb, var(--cyan, var(--bb-cyan, #22d3ee)) 40%, transparent);
  background: color-mix(in srgb, var(--cyan, var(--bb-cyan, #22d3ee)) 10%, transparent);
}

html[data-kp-skin="38"] body {
  background: var(--kp-body-bg, #0a0908);
}

html[data-kp-skin="38"] body::before {
  background:
    radial-gradient(ellipse 70% 45% at 50% -15%, var(--kp-glow, rgba(212, 175, 55, 0.08)), transparent 55%),
    linear-gradient(var(--kp-grid, rgba(61, 56, 48, 0.45)) 1px, transparent 1px),
    linear-gradient(90deg, var(--kp-grid, rgba(61, 56, 48, 0.45)) 1px, transparent 1px);
}

html[data-kp-skin="38"] body {
  background: var(--kp-body-bg, #0a0908);
}

html[data-kp-skin="38"] body::before {
  background:
    radial-gradient(ellipse 70% 45% at 50% -15%, var(--kp-glow, rgba(212, 175, 55, 0.08)), transparent 55%),
    linear-gradient(var(--kp-grid, rgba(61, 56, 48, 0.45)) 1px, transparent 1px),
    linear-gradient(90deg, var(--kp-grid, rgba(61, 56, 48, 0.45)) 1px, transparent 1px);
}

html[data-kp-skin="12"] body {
  background: var(--kp-body-bg, #eef2f7);
}

html[data-kp-skin="40"] body {
  background: var(--kp-body-bg, #0a101c);
}

html[data-kp-skin="12"] body::before {
  background:
    radial-gradient(ellipse 70% 45% at 50% -15%, var(--kp-glow, rgba(14, 165, 233, 0.09)), transparent 55%),
    linear-gradient(var(--kp-grid, rgba(226, 232, 240, 0.9)) 1px, transparent 1px),
    linear-gradient(90deg, var(--kp-grid, rgba(226, 232, 240, 0.9)) 1px, transparent 1px);
}

html[data-kp-skin="40"] body::before {
  background:
    radial-gradient(ellipse 60% 50% at 85% 8%, var(--kp-glow, rgba(0, 57, 166, 0.14)), transparent),
    linear-gradient(var(--kp-grid, rgba(51, 65, 85, 0.45)) 1px, transparent 1px),
    linear-gradient(90deg, var(--kp-grid, rgba(51, 65, 85, 0.45)) 1px, transparent 1px);
}

html[data-kp-skin="12"] .slide::before {
  background:
    radial-gradient(ellipse 55% 45% at 75% 15%, var(--kp-glow, rgba(14, 165, 233, 0.07)), transparent),
    linear-gradient(var(--kp-grid, rgba(226, 232, 240, 0.85)) 1px, transparent 1px),
    linear-gradient(90deg, var(--kp-grid, rgba(226, 232, 240, 0.85)) 1px, transparent 1px);
}

html[data-kp-skin="40"] .slide::before {
  background:
    radial-gradient(ellipse 55% 45% at 80% 10%, var(--kp-glow, rgba(0, 57, 166, 0.12)), transparent),
    linear-gradient(var(--kp-grid, rgba(51, 65, 85, 0.4)) 1px, transparent 1px),
    linear-gradient(90deg, var(--kp-grid, rgba(51, 65, 85, 0.4)) 1px, transparent 1px);
}

html[data-kp-skin="12"] .img-overlay {
  background: linear-gradient(90deg, rgba(248, 250, 252, 0.96) 0%, rgba(248, 250, 252, 0.78) 50%, transparent 75%);
}

html[data-kp-skin="40"] .img-overlay {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.6) 45%, transparent 70%);
}

@media print {
  .skin-switcher { display: none !important; }
  html[data-kp-skin="12"] body { background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}