.ppc-app {
  --ppc-bg: linear-gradient(180deg, #07111d 0%, #0b1d32 45%, #091626 100%);
  --ppc-card: linear-gradient(180deg, rgba(14, 29, 48, 0.98), rgba(8, 18, 31, 0.98));
  --ppc-panel: linear-gradient(180deg, rgba(15, 31, 51, 0.96), rgba(10, 21, 36, 0.96));
  --ppc-ink: #f3f9ff;
  --ppc-muted: #8fb8df;
  --ppc-accent: #4ea0ff;
  --ppc-accent-dark: #2e73d0;
  --ppc-accent-soft: rgba(89, 154, 236, 0.18);
  --ppc-line: rgba(141, 185, 233, 0.16);
  --ppc-green: #42bf7d;
  --ppc-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
  color: var(--ppc-ink);
}

.ppc-shell {
  background: var(--ppc-bg);
  border: 1px solid rgba(111, 164, 228, 0.12);
  border-radius: 28px;
  box-shadow: var(--ppc-shadow);
  /* overflow: clip preserves border-radius clipping but allows position:sticky children */
  overflow: clip;
}

.ppc-hero {
  background:
    radial-gradient(circle at top right, rgba(94, 153, 255, 0.28), transparent 28%),
    linear-gradient(135deg, #0f2239, #0d3156 55%, #133f6f);
  color: #f8fcff;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  overflow: hidden;
  padding: 30px;
  position: relative;
}

.ppc-hero__bar {
  animation: ppcBarFlow 8s linear infinite;
  background: linear-gradient(90deg, rgba(78, 160, 255, 0.05), rgba(179, 221, 255, 0.92), rgba(78, 160, 255, 0.05));
  height: 5px;
  left: -16%;
  position: absolute;
  right: -16%;
  top: 0;
}

.ppc-eyebrow {
  color: rgba(233, 245, 255, 0.84);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.ppc-title {
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1.04;
  margin: 0 0 12px;
}

.ppc-copy {
  color: rgba(233, 245, 255, 0.9);
  line-height: 1.6;
  margin: 0;
  max-width: 720px;
}

.ppc-note {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(161, 205, 255, 0.12);
  border-radius: 22px;
  color: rgba(240, 248, 255, 0.92);
  padding: 18px 20px;
}

.ppc-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  padding: 24px;
}

.ppc-panel {
  background: var(--ppc-card);
  border: 1px solid var(--ppc-line);
  border-radius: 26px;
  padding: 22px;
}

.ppc-panel--form {
  display: grid;
  gap: 18px;
}

.ppc-field-block {
  background: var(--ppc-panel);
  border: 1px solid rgba(141, 185, 233, 0.12);
  border-radius: 22px;
  padding: 18px;
}

.ppc-field-block__title,
.ppc-subtitle {
  margin: 0 0 14px;
}

.ppc-field-block__title {
  font-size: 19px;
  line-height: 1.15;
}

.ppc-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ppc-option-group--slider {
  display: grid;
  gap: 0;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(97, 134, 179, 0.08));
  border: 1px solid rgba(160, 199, 244, 0.12);
  border-radius: 999px;
  overflow: hidden;
  padding: 5px;
  position: relative;
}

.ppc-option-group--slider::before {
  background: linear-gradient(180deg, rgba(97, 174, 255, 0.98), rgba(46, 115, 208, 0.96));
  border-radius: 999px;
  bottom: 5px;
  box-shadow: 0 10px 24px rgba(46, 115, 208, 0.28);
  content: "";
  left: 5px;
  position: absolute;
  top: 5px;
  transform: translateX(calc((100% + 0px) * var(--ppc-active)));
  transition: transform 260ms ease, width 260ms ease, opacity 260ms ease;
  width: calc((100% - 10px) / var(--ppc-count));
  z-index: 0;
}

.ppc-option {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(83, 121, 164, 0.12);
  border-radius: 999px;
  color: #dcebff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  position: relative;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  z-index: 1;
}

.ppc-option-group--slider .ppc-option {
  background: transparent;
  border: 0;
  border-radius: 999px;
  min-width: 0;
  padding: 0 10px;
  width: 100%;
}

.ppc-option-group--slider .ppc-option span {
  display: block;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  width: 100%;
}

.ppc-option:hover,
.ppc-paper-card:hover,
.ppc-swatch:hover,
.ppc-urgency__row:hover {
  transform: translateY(-1px);
}

.ppc-option.is-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #fff;
}

.ppc-option--pills {
  min-width: 0;
}

.ppc-option--segmented {
  border-radius: 16px;
}

.ppc-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ppc-paper-card {
  background: linear-gradient(180deg, rgba(20, 37, 58, 0.92), rgba(11, 23, 38, 0.96));
  border: 2px solid rgba(127, 169, 218, 0.12);
  border-radius: 22px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ppc-paper-card.is-active {
  border-color: var(--ppc-accent);
  box-shadow: 0 14px 32px rgba(42, 125, 225, 0.16);
}

.ppc-paper-card__image {
  display: block;
  height: 240px;
  object-fit: cover;
  width: 100%;
}

.ppc-paper-card__label {
  color: #dcecff;
  display: block;
  font-size: 1rem;
  font-weight: 700;
  padding: 18px 18px 22px;
}

.ppc-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ppc-swatch {
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(160, 199, 244, 0.12);
  border-radius: 18px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px 0 12px;
}

.ppc-swatch.is-active {
  border-color: var(--ppc-accent);
  box-shadow: 0 10px 24px rgba(25, 104, 202, 0.14);
}

.ppc-swatch__dot {
  background: var(--swatch);
  border: 2px solid rgba(15, 39, 66, 0.08);
  border-radius: 999px;
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.35);
  display: block;
  height: 22px;
  width: 22px;
}

.ppc-swatch__label {
  color: #dcecff;
  font-weight: 700;
}

.ppc-urgency {
  background: linear-gradient(180deg, rgba(12, 24, 39, 0.96), rgba(8, 18, 31, 0.98));
  border: 1px solid rgba(141, 185, 233, 0.14);
  border-radius: 24px;
  overflow: hidden;
}

.ppc-urgency__head {
  background: rgba(255, 255, 255, 0.06);
  color: #dcecff;
  display: grid;
  font-size: 13px;
  gap: 12px;
  grid-template-columns: minmax(0, 1.3fr) auto;
  padding: 14px 18px;
}

.ppc-urgency__row {
  align-items: center;
  background: rgba(255, 255, 255, 0.01);
  border: 0;
  border-top: 1px solid rgba(83, 121, 164, 0.12);
  cursor: pointer;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.2fr) auto auto;
  padding: 22px 20px;
  text-align: left;
  width: 100%;
}

.ppc-urgency__row.is-active {
  background: linear-gradient(180deg, rgba(66, 191, 125, 0.12), rgba(66, 191, 125, 0.04));
}

.ppc-urgency__meta strong {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}

.ppc-urgency__meta small {
  color: #b2bfd1;
  display: block;
  font-size: 11px;
}

.ppc-urgency__price {
  color: #697d99;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.ppc-urgency__cta {
  align-items: center;
  background: var(--ppc-green);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 52px;
  min-width: 140px;
  padding: 0 18px;
}

.ppc-urgency__row.is-active .ppc-urgency__cta {
  background: #1f8f59;
}

.ppc-preview-card {
  background: linear-gradient(180deg, rgba(18, 37, 59, 0.98), rgba(10, 20, 33, 0.98));
  border: 1px solid rgba(141, 185, 233, 0.14);
  border-radius: 24px;
  margin-bottom: 18px;
  overflow: hidden;
}

.ppc-preview-card--mobile {
  display: none;
}

.ppc-preview-card__image,
.ppc-preview-card__placeholder {
  display: block;
  height: 250px;
  object-fit: cover;
  width: 100%;
}

.ppc-preview-card__placeholder {
  background: linear-gradient(135deg, #153255, #0c1f35);
}

.ppc-preview-card__body {
  padding: 18px;
}

.ppc-preview-card__body h3 {
  margin: 0 0 6px;
}

.ppc-preview-card__body p {
  color: var(--ppc-muted);
  margin: 0;
}

.ppc-totals {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 22px;
}

.ppc-total {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(141, 185, 233, 0.12);
  border-radius: 18px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.ppc-total span {
  color: var(--ppc-muted);
  font-size: 14px;
}

.ppc-total strong {
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.ppc-total--grand {
  align-items: center;
  background: linear-gradient(135deg, rgba(41, 118, 222, 0.44), rgba(41, 118, 222, 0.18));
  border-color: rgba(96, 161, 245, 0.6);
  box-shadow: 0 8px 28px rgba(41, 118, 222, 0.22);
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 20px 24px;
}

.ppc-total--grand strong {
  font-size: 27px;
  letter-spacing: -0.02em;
}

.ppc-total--grand {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 34%, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 82% 26%, rgba(105, 182, 255, 0.36), transparent 38%),
    linear-gradient(180deg, rgba(30, 105, 210, 0.48), rgba(3, 7, 15, 0.96) 64%);
  border: 2px solid rgba(86, 160, 255, 0.82);
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(127, 188, 255, 0.18) inset,
    0 0 22px rgba(47, 134, 255, 0.46),
    0 18px 44px rgba(3, 7, 15, 0.38);
  overflow: hidden;
  position: relative;
}

.ppc-total--grand::before {
  background: linear-gradient(90deg, transparent, rgba(105, 182, 255, 0.22), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-120%);
  transition: transform 650ms ease;
}

.ppc-total--grand::after {
  background: radial-gradient(circle, rgba(105, 182, 255, 0.55), transparent 62%);
  content: "";
  height: 120px;
  opacity: 0.34;
  pointer-events: none;
  position: absolute;
  right: -42px;
  top: -54px;
  width: 160px;
}

.ppc-total--grand span,
.ppc-total--grand strong {
  position: relative;
  z-index: 1;
}

.ppc-total--grand span {
  color: rgba(206, 226, 255, 0.78);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ppc-total--grand strong {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(105, 182, 255, 0.34);
}

.ppc-total--grand:hover::before,
.ppc-total--grand.is-price-changing::before {
  transform: translateX(120%);
}

.ppc-total--grand.is-price-changing strong,
[data-ppc-chip].is-price-changing strong {
  animation: ppc-price-pop 520ms ease both;
}

@keyframes ppc-price-pop {
  0% {
    opacity: 0.58;
    transform: translateY(8px) scale(0.96);
    text-shadow: 0 0 0 rgba(105, 182, 255, 0);
  }

  45% {
    opacity: 1;
    transform: translateY(-2px) scale(1.045);
    text-shadow: 0 0 24px rgba(105, 182, 255, 0.72);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    text-shadow: 0 0 18px rgba(105, 182, 255, 0.34);
  }
}

.ppc-summary-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.ppc-selections,
.ppc-breakdown {
  display: grid;
  gap: 10px;
}

.ppc-selection,
.ppc-breakdown__row {
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(141, 185, 233, 0.12);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  padding: 14px;
}

.ppc-selection__label,
.ppc-breakdown__description,
.ppc-empty {
  color: var(--ppc-muted);
}

.ppc-breakdown__label {
  font-weight: 700;
}

.ppc-breakdown__amount,
.ppc-selection strong {
  overflow-wrap: anywhere;
  white-space: normal;
}

.ppc-actions {
  margin-top: 22px;
}

.ppc-button {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 54px;
  padding: 0 24px;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.ppc-button--primary {
  background: linear-gradient(135deg, #0b5fb7, #2f89e4);
  box-shadow: 0 14px 32px rgba(10, 79, 151, 0.28);
  color: #fff;
}

.ppc-button:hover {
  transform: translateY(-1px);
}

.ppc-button:disabled {
  opacity: 0.6;
}

.ppc-payload {
  margin-top: 18px;
}

.ppc-payload summary {
  cursor: pointer;
  font-weight: 700;
  margin-bottom: 12px;
}

.ppc-payload pre {
  background: #0b121d;
  border-radius: 16px;
  color: #edf6ff;
  font-size: 13px;
  overflow: auto;
  padding: 16px;
}

.ppc-toast {
  background: #0e1724;
  border-radius: 16px;
  bottom: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  color: #fff;
  padding: 14px 18px;
  position: fixed;
  right: 24px;
  z-index: 9999;
}

.ppc-toast--success {
  background: #176a5e;
}

.ppc-toast--error {
  background: #7a2230;
}

/* ─── Desktop: правая панель «Вы выбрали» — компактный режим ─── */
.ppc-panel--summary .ppc-subtitle {
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.ppc-panel--summary .ppc-selections,
.ppc-panel--summary .ppc-breakdown {
  gap: 4px;
}

.ppc-panel--summary .ppc-selection,
.ppc-panel--summary .ppc-breakdown__row {
  border-radius: 9px;
  font-size: 13px;
  padding: 5px 9px;
}

.ppc-panel--summary .ppc-selection__label,
.ppc-panel--summary .ppc-selection strong,
.ppc-panel--summary .ppc-breakdown__label,
.ppc-panel--summary .ppc-breakdown__amount,
.ppc-panel--summary .ppc-breakdown__description {
  font-size: 13px;
  line-height: 1.2;
}

/* ─────────────────────────────────────────────────────────────── */

@keyframes ppcBarFlow {
  0% {
    transform: translateX(-34%);
  }
  100% {
    transform: translateX(34%);
  }
}

/* ─── Floating price chip — живёт на <body>, всегда перед глазами ─── */
/* Скрыт на десктопе, появляется на мобильном/планшете */
@keyframes ppcChipFlash {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.ppc-price-chip {
  display: none;
}

@media (max-width: 1100px) {
  .ppc-price-chip {
    align-items: center;
    background: linear-gradient(135deg, #0f6ad4, #2f89e4);
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(46, 115, 208, 0.42);
    color: #fff;
    display: flex;
    gap: 9px;
    padding: 13px 22px 13px 16px;
    position: fixed;
    right: 16px;
    top: 16px;
    z-index: 9999;
  }

  .ppc-price-chip--flash {
    animation: ppcChipFlash 280ms ease;
  }

  .ppc-price-chip__dot {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    display: block;
    flex-shrink: 0;
    height: 8px;
    width: 8px;
  }

  .ppc-price-chip__price {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
}

/* ─── Планшет / начало стопки колонок ─── */
@media (max-width: 1100px) {
  .ppc-layout,
  .ppc-summary-grid,
  .ppc-totals,
  .ppc-hero {
    grid-template-columns: 1fr;
  }
}

/* ─── Мобильный ─── */
@media (max-width: 760px) {
  .ppc-layout,
  .ppc-hero {
    padding: 14px;
  }

  .ppc-panel,
  .ppc-field-block {
    padding: 14px;
  }

  /* Бумага: 2 карточки в ряд */
  .ppc-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ppc-paper-card__image {
    height: 100px;
  }

  .ppc-paper-card__label {
    font-size: 14px;
    padding: 10px 12px 14px;
  }

  /* ── Контейнер кнопок-слайдер: сбрасываем на мобильном ── */
  /* (убираем overflow:hidden который обрезал крайние кнопки) */
  .ppc-option-group--slider {
    background: none;
    border: none;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .ppc-option-group--slider::before {
    display: none;
  }

  /* ── Segmented-кнопки: 2 в ряд с видимым активным состоянием ── */
  .ppc-option-group--segmented .ppc-option {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(160, 199, 244, 0.2);
    border-radius: 14px;
    flex: 1 1 calc(50% - 8px);
    min-height: 48px;
  }

  .ppc-option-group--segmented .ppc-option.is-active {
    background: linear-gradient(180deg, #5aa5ff, #2e73d0);
    border-color: rgba(90, 165, 255, 0.6);
    box-shadow: 0 4px 16px rgba(46, 115, 208, 0.4);
    color: #fff;
  }

  /* ── Pills (тираж): 2 кнопки в ряд, последняя одна — на всю ширину ── */
  .ppc-option-group--pills.ppc-option-group--slider {
    direction: ltr;
    display: grid;
    flex-wrap: unset;
    gap: 8px;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }

  .ppc-option-group--pills .ppc-option {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(160, 199, 244, 0.2);
    border-radius: 12px;
    flex: unset;
    font-size: 14px;
    min-height: 36px;
    padding: 0 8px;
    width: 100%;
  }

  /* Последняя кнопка если она одна в ряду (нечётное общее кол-во) → на всю строку */
  .ppc-option-group--pills .ppc-option:last-child:nth-child(odd),
  .ppc-option-group--pills .ppc-option--full-row {
    grid-column: 1 / -1;
  }

  .ppc-option-group--pills .ppc-option.is-active {
    background: linear-gradient(180deg, #5aa5ff, #2e73d0);
    border-color: rgba(90, 165, 255, 0.6);
    box-shadow: 0 3px 10px rgba(46, 115, 208, 0.35);
    color: #fff;
  }

  /* ── Срочность: адаптация таблицы ── */
  .ppc-field-block--urgency {
    padding: 10px;
  }

  .ppc-urgency {
    border-radius: 18px;
  }

  .ppc-urgency__head {
    display: none;
  }

  .ppc-urgency__row {
    align-items: start;
    column-gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
    padding: 12px 14px;
  }

  .ppc-urgency__meta {
    grid-column: 1 / 2;
  }

  .ppc-urgency__meta strong {
    font-size: 13px;
    margin-bottom: 1px;
  }

  .ppc-urgency__meta small {
    font-size: 11px;
    line-height: 1.15;
  }

  .ppc-urgency__price {
    font-size: 14px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    padding-top: 1px;
  }

  .ppc-urgency__cta {
    font-size: 12px;
    grid-column: 1 / -1;
    min-height: 34px;
    min-width: 0;
    padding: 0 12px;
    width: 100%;
  }

  .ppc-preview-card--desktop {
    display: none;
  }

  .ppc-preview-card--mobile {
    display: block;
    margin-bottom: 0;
    margin-top: 14px;
  }

  .ppc-preview-card--mobile .ppc-preview-card__image,
  .ppc-preview-card--mobile .ppc-preview-card__placeholder {
    height: 190px;
  }

  /* "Вы выбрали" + "Структура цены" — убираем, есть sticky-полоска */
  .ppc-summary-grid {
    display: none;
  }

  /* Итоги в правой панели: компактно */
  .ppc-totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }

  .ppc-total {
    padding: 12px;
  }

  .ppc-total span {
    font-size: 13px;
  }

  .ppc-total strong {
    font-size: 14px;
  }

  /* Breakdown/selection: 1 колонка */
  .ppc-selection,
.ppc-breakdown__row {
    grid-template-columns: 1fr;
  }
}

.ppc-upload-panel {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(160, 199, 244, 0.16);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 18px;
}

.ppc-upload-panel__head {
  margin-bottom: 14px;
}

.ppc-upload-panel__head h3 {
  color: #f7fbff;
  font-size: 18px;
  margin: 0 0 6px;
}

.ppc-upload-panel__head p {
  color: rgba(224, 236, 252, 0.72);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.ppc-upload-grid {
  display: grid;
  gap: 12px;
}

.ppc-upload-zone {
  background: rgba(6, 13, 27, 0.35);
  border: 1px dashed rgba(160, 199, 244, 0.36);
  border-radius: 16px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.ppc-upload-zone:focus-within {
  border-color: rgba(90, 165, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(90, 165, 255, 0.16);
}

.ppc-upload-zone input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.ppc-upload-zone__title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.ppc-upload-zone__hint {
  color: rgba(224, 236, 252, 0.68);
  font-size: 13px;
  line-height: 1.35;
}

.ppc-upload-zone__button {
  align-items: center;
  background: linear-gradient(180deg, #5aa5ff, #2e73d0);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  width: fit-content;
}

.ppc-upload-status {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(160, 199, 244, 0.12);
  border-radius: 12px;
  color: rgba(224, 236, 252, 0.72);
  display: grid;
  font-size: 13px;
  gap: 6px;
  line-height: 1.35;
  padding: 10px 12px;
}

.ppc-upload-status strong {
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppc-upload-status ul {
  margin: 0;
  padding-left: 18px;
}

.ppc-upload-status--ok {
  border-color: rgba(92, 203, 132, 0.42);
}

.ppc-upload-status--warning,
.ppc-upload-status--error {
  border-color: rgba(255, 122, 122, 0.55);
  color: #ffc8c8;
}

.ppc-upload-status--loading {
  border-color: rgba(90, 165, 255, 0.48);
  color: #d7eaff;
}

/* Andre Anri button skin: glossy blue capsule controls. */
.ppc-app {
  --aa-blue: #2f86ff;
  --aa-blue-2: #69b6ff;
  --aa-muted: rgba(215, 225, 245, 0.62);
  --aa-card: rgba(5, 12, 24, 0.92);
}

.ppc-option,
.ppc-button,
.ppc-urgency__cta,
.ppc-upload-zone__button {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 36%, rgba(255, 255, 255, 0) 38%),
    rgba(5, 12, 24, 0.88);
  border: 2px solid rgba(86, 160, 255, 0.32);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(127, 188, 255, 0.08) inset;
  color: #dcecff;
  overflow: hidden;
  position: relative;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ppc-option::before,
.ppc-button::before,
.ppc-urgency__cta::before,
.ppc-upload-zone__button::before,
.ppc-paper-card::before {
  background: linear-gradient(90deg, transparent, rgba(105, 182, 255, 0.26), transparent);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-120%);
  transition: transform 650ms ease;
  z-index: 0;
}

.ppc-option > *,
.ppc-button > *,
.ppc-urgency__cta > *,
.ppc-upload-zone__button > *,
.ppc-paper-card > * {
  position: relative;
  z-index: 1;
}

.ppc-option:hover,
.ppc-option:focus-visible,
.ppc-option.is-active,
.ppc-button:hover,
.ppc-button:focus-visible,
.ppc-urgency__row:hover .ppc-urgency__cta,
.ppc-urgency__row.is-active .ppc-urgency__cta,
.ppc-upload-zone:hover .ppc-upload-zone__button,
.ppc-upload-zone:focus-within .ppc-upload-zone__button {
  border-color: var(--aa-blue-2);
  box-shadow:
    0 0 0 1px rgba(150, 205, 255, 0.24) inset,
    0 0 20px rgba(47, 134, 255, 0.54),
    0 0 42px rgba(47, 134, 255, 0.18);
  color: #fff;
  transform: translateY(-2px);
}

.ppc-option:hover::before,
.ppc-option:focus-visible::before,
.ppc-button:hover::before,
.ppc-button:focus-visible::before,
.ppc-urgency__row:hover .ppc-urgency__cta::before,
.ppc-upload-zone:hover .ppc-upload-zone__button::before,
.ppc-upload-zone:focus-within .ppc-upload-zone__button::before,
.ppc-paper-card:hover::before,
.ppc-paper-card.is-active::before {
  transform: translateX(120%);
}

.ppc-option.is-active,
.ppc-button--primary,
.ppc-urgency__row.is-active .ppc-urgency__cta,
.ppc-upload-zone__button {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 34%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(180deg, rgba(30, 105, 210, 0.42), rgba(3, 7, 15, 0.96) 58%),
    var(--aa-card);
  border-color: rgba(86, 160, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(127, 188, 255, 0.18) inset,
    0 0 16px rgba(47, 134, 255, 0.76),
    0 0 38px rgba(47, 134, 255, 0.28);
  color: #fff;
}

.ppc-button--primary {
  min-height: 64px;
  padding-inline: 30px;
}

.ppc-button:active,
.ppc-option:active,
.ppc-upload-zone:active .ppc-upload-zone__button {
  transform: translateY(1px) scale(0.985);
}

.ppc-button:disabled {
  border-color: rgba(86, 160, 255, 0.18);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.ppc-option-group--slider {
  background: rgba(5, 12, 24, 0.74);
  border: 2px solid rgba(47, 134, 255, 0.24);
  box-shadow: 0 0 0 1px rgba(127, 188, 255, 0.07) inset;
}

.ppc-option-group--slider::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(105, 182, 255, 0.42), transparent 58%),
    linear-gradient(180deg, rgba(30, 105, 210, 0.54), rgba(3, 7, 15, 0.96));
  box-shadow:
    0 0 0 1px rgba(127, 188, 255, 0.18) inset,
    0 0 18px rgba(47, 134, 255, 0.62);
}

.ppc-option-group--slider .ppc-option {
  border: 0;
  box-shadow: none;
}

.ppc-option-group--slider .ppc-option:hover,
.ppc-option-group--slider .ppc-option:focus-visible,
.ppc-option-group--slider .ppc-option.is-active {
  background: transparent;
  box-shadow: none;
}

.ppc-option-group--segmented .ppc-option.is-active,
.ppc-option-group--pills .ppc-option.is-active {
  background:
    radial-gradient(circle at 50% 0%, rgba(105, 182, 255, 0.34), transparent 58%),
    linear-gradient(180deg, rgba(30, 105, 210, 0.48), rgba(3, 7, 15, 0.96));
}

.ppc-paper-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 134, 255, 0.22), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border-color: rgba(86, 160, 255, 0.28);
  position: relative;
}

.ppc-paper-card:hover,
.ppc-paper-card.is-active {
  border-color: var(--aa-blue-2);
  box-shadow: 0 0 26px rgba(47, 134, 255, 0.34);
  transform: translateY(-3px);
}

.ppc-swatch {
  border: 2px solid rgba(86, 160, 255, 0.24);
  border-radius: 999px;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.ppc-swatch:hover,
.ppc-swatch.is-active {
  border-color: var(--aa-blue-2);
  box-shadow: 0 0 24px rgba(47, 134, 255, 0.58);
}

.ppc-swatch__dot {
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.35),
    0 0 12px rgba(105, 182, 255, 0.28);
}

.ppc-upload-zone {
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.ppc-upload-zone:hover {
  border-color: rgba(105, 182, 255, 0.64);
  box-shadow: 0 0 24px rgba(47, 134, 255, 0.16);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .ppc-option,
  .ppc-button,
  .ppc-urgency__cta,
  .ppc-upload-zone__button,
  .ppc-paper-card,
  .ppc-swatch,
  .ppc-upload-zone {
    transition: none;
  }

  .ppc-option::before,
  .ppc-button::before,
  .ppc-urgency__cta::before,
  .ppc-upload-zone__button::before,
  .ppc-paper-card::before {
    display: none;
  }
}