.swn-vto-core {
  --nala-accent: #38b43a;
  --nala-accent-text: #ffffff;
  --nala-surface: #ffffff;
  --nala-text: #17201b;
  --nala-muted: #667169;
  --swn-yellow: var(--nala-accent);
  --swn-black: #101512;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.swn-vto-core button,
.swn-vto-core input,
.swn-vto-core .swn-vto-core__tool,
.swn-vto-core .swn-vto-pd__tool,
.swn-vto-core .swn-vto-snapshot__tool {
  font-family: inherit;
}

.swn-vto-core__scrim {
  background: rgba(11, 17, 13, .62);
  backdrop-filter: blur(7px);
}

.swn-vto-core__panel {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 26px;
  background: #101512;
  box-shadow: 0 28px 90px rgba(8, 15, 10, .44);
}

.swn-vto-core__stage {
  background: #111713;
}

.swn-vto-core__brand {
  position: absolute;
  top: 13px;
  left: 50%;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  pointer-events: none;
}

.swn-vto-core__brand-default {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.swn-vto-core__brand-default > svg,
.swn-vto-core__brand-default > strong {
  display: none;
}

.swn-vto-core__nala-logo {
  display: block;
  width: 58px;
  height: 58px;
  object-fit: contain;
  border: 0;
  border-radius: 14px;
  background: transparent;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .18));
}

.swn-vto-core__merchant-logo {
  display: block;
  width: auto;
  max-width: 170px;
  height: 42px;
  object-fit: contain;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 13px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  backdrop-filter: blur(10px);
}

.swn-vto-core__powered {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17, 23, 19, .64);
  color: rgba(255, 255, 255, .88);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  backdrop-filter: blur(8px);
}

.swn-vto-core__powered strong {
  color: #fff;
  font-weight: 750;
}

.swn-vto-core__close {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(23, 32, 27, .72);
  transition: transform .16s ease, background .16s ease;
}

.swn-vto-core__close:hover {
  background: rgba(23, 32, 27, .92);
  transform: scale(1.04);
}

.swn-vto-core__consent {
  background: rgba(10, 16, 12, .70);
  backdrop-filter: blur(8px);
}

.swn-vto-core__consent-card {
  width: min(92%, 460px);
  padding: 32px;
  border: 1px solid rgba(23, 32, 27, .09);
  border-radius: 24px;
  background: var(--nala-surface);
  color: var(--nala-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.swn-vto-core__consent-card h2 {
  margin: 0 0 10px;
  color: var(--nala-text);
  font-size: 27px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.swn-vto-core__consent-card p {
  max-width: 370px;
  margin: 0 auto;
  color: var(--nala-muted);
  font-size: 14px;
  line-height: 1.55;
}

.swn-vto-core__consent-actions {
  gap: 10px;
  margin-top: 24px;
}

.swn-vto-core__primary,
.swn-vto-core__secondary {
  min-height: 46px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 720;
  transition: transform .16s ease, filter .16s ease;
}

.swn-vto-core__primary {
  background: var(--nala-accent);
  color: var(--nala-accent-text);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--nala-accent) 28%, transparent);
}

.swn-vto-core__secondary {
  background: #eef2ee;
  color: var(--nala-text);
}

.swn-vto-core__primary:hover,
.swn-vto-core__secondary:hover {
  transform: translateY(-1px);
  filter: brightness(.98);
}

.swn-vto-core__tools {
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(23, 32, 27, .78);
}

.swn-vto-core__tool {
  color: rgba(255, 255, 255, .88);
}

.swn-vto-core__tools:has(> [data-swn-vto-mode="tryon"][hidden])::before,
.swn-vto-core__tools:has(> [data-swn-vto-mode="3d"][hidden])::after {
  background: var(--nala-accent);
  color: var(--nala-accent-text);
}

.swn-vto-snapshot__tool,
.swn-vto-pd__tool {
  right: 16px;
  width: 54px;
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 17px;
  background: rgba(23, 32, 27, .82);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
  transition: transform .16s ease, background .16s ease;
}

.swn-vto-snapshot__tool {
  top: calc(50% - 59px);
}

.swn-vto-pd__tool {
  top: calc(50% + 5px);
}

.swn-vto-snapshot__tool:hover,
.swn-vto-pd__tool:hover {
  background: rgba(23, 32, 27, .96);
  transform: translateX(-2px);
}

.swn-vto-snapshot__tool span,
.swn-vto-pd__tool-label,
.swn-vto-pd__tool-value {
  font-family: inherit;
}

.swn-vto-snapshot__tool span {
  max-width: 48px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.05;
}

.swn-vto-pd__tool-label {
  font-size: 13px;
  font-weight: 800;
}

.swn-vto-pd__tool-value {
  font-size: 10px;
  font-weight: 650;
  opacity: .82;
}

.swn-vto-core__variant {
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .10);
}

.swn-vto-core__variant.is-active {
  border-color: var(--nala-accent);
  box-shadow: 0 0 0 1px var(--nala-accent), 0 7px 20px rgba(0, 0, 0, .14);
}

.swn-vto-pd__card {
  border: 1px solid rgba(23, 32, 27, .09);
  border-radius: 24px;
  background: var(--nala-surface);
  color: var(--nala-text);
  font-family: inherit;
}

.swn-vto-pd__card h2 {
  color: var(--nala-text);
  font-family: inherit;
  font-weight: 760;
  letter-spacing: -.025em;
}

.swn-vto-pd__subtitle,
.swn-vto-pd__status,
.swn-vto-pd__disclaimer,
.swn-vto-pd__ticks {
  font-family: inherit;
}

.swn-vto-pd__reading,
.swn-vto-pd__measure,
.swn-vto-pd-capture__continue {
  background: var(--nala-accent);
  color: var(--nala-accent-text);
  font-family: inherit;
}

.swn-vto-pd__range {
  accent-color: var(--nala-accent);
}

.swn-vto-pd-capture.is-ready .swn-vto-pd-capture__face-frame {
  border-color: var(--nala-accent);
  box-shadow: 0 0 0 999px rgba(0,0,0,.04), 0 0 30px color-mix(in srgb, var(--nala-accent) 28%, transparent);
}

.swn-vto-pd-capture__progress span {
  background: var(--nala-accent);
}

.swn-vto-snapshot {
  font-family: inherit;
}

.swn-vto-snapshot__card {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 24px;
  background: #121814;
  font-family: inherit;
}

.swn-vto-snapshot__card h2,
.swn-vto-snapshot__card p,
.swn-vto-snapshot__primary,
.swn-vto-snapshot__secondary {
  font-family: inherit;
}

.swn-vto-snapshot__primary {
  background: var(--nala-accent);
  color: var(--nala-accent-text);
}

.swn-vto-snapshot__secondary {
  background: rgba(255, 255, 255, .10);
  color: #fff;
}

.swn-vto-core__hint,
.swn-vto-core__model-hint {
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(23, 32, 27, .72);
  font-family: inherit;
}

@media (max-width: 749px) {
  .swn-vto-core__panel { border-radius: 22px; }
  .swn-vto-core__brand { top: 10px; }
  .swn-vto-core__brand-default { width: 52px; height: 52px; }
  .swn-vto-core__nala-logo { width: 52px; height: 52px; border-radius: 13px; }
  .swn-vto-core__merchant-logo { max-width: 145px; height: 38px; }
  .swn-vto-core__consent-card { padding: 26px 22px; border-radius: 21px; }
  .swn-vto-core__consent-card h2 { font-size: 24px; }
  .swn-vto-snapshot__tool,
  .swn-vto-pd__tool {
    right: 10px;
    width: 50px;
    min-height: 50px;
    border-radius: 15px;
  }
  .swn-vto-snapshot__tool { top: calc(50% - 55px); }
  .swn-vto-pd__tool { top: calc(50% + 5px); }
}