:root {
  --loya-ai-start: #c82fd9;
  --loya-ai-middle: #8a54f4;
  --loya-ai-end: #168dff;
  --loya-ai-badge: #f2ddf8;
  --loya-ai-button: #8a31f2;
  --loya-system-bg: #f2f2f7;
  --loya-secondary-bg: #f1f2f6;
}

/* PromoGen showcase */
.promogen-section {
  background:
    radial-gradient(circle at 10% 18%, rgba(200, 47, 217, .10), transparent 27%),
    radial-gradient(circle at 90% 26%, rgba(22, 141, 255, .12), transparent 30%),
    linear-gradient(145deg, #fbf9ff, #f5fbff 58%, #fffaf1);
}

.promogen-section .kicker {
  color: var(--loya-ai-button);
}

.promogen-section .promo-action-row .button.primary {
  color: #fff;
  border: 0;
  background: linear-gradient(115deg, var(--loya-ai-start), var(--loya-ai-middle) 50%, var(--loya-ai-end));
  box-shadow: 0 16px 34px rgba(138, 49, 242, .28);
}

.promogen-section .promo-action-row .button.primary:hover {
  box-shadow: 0 20px 42px rgba(138, 49, 242, .38);
}

/* Guest PromoGen modal */
.promogen-dialog {
  color: #0b1f33;
  background:
    radial-gradient(circle at 100% 0, rgba(22, 141, 255, .09), transparent 27%),
    linear-gradient(145deg, #f6fbff, var(--loya-system-bg) 56%, #fff8ed);
  box-shadow: 0 34px 100px rgba(35, 31, 76, .34);
}

.promogen-dialog::backdrop {
  background: rgba(17, 25, 43, .72);
  backdrop-filter: blur(9px) saturate(115%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
}

.promogen-dialog-head {
  border-bottom: 1px solid rgba(138, 84, 244, .12);
  background: rgba(255, 255, 255, .91);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.promogen-dialog-head .kicker {
  color: var(--loya-ai-button);
}

.dialog-close {
  color: #0b1f33;
  border: 1px solid rgba(11, 31, 51, .08);
  background: var(--loya-secondary-bg);
}

.dialog-close:hover {
  color: #fff;
  background: var(--loya-ai-button);
}

.promogen-steps span.active {
  color: var(--loya-ai-button);
}

.promogen-steps span.active::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--loya-ai-start), var(--loya-ai-end));
  box-shadow: 0 0 0 5px rgba(138, 84, 244, .10);
}

.promogen-steps i {
  background: linear-gradient(90deg, rgba(200, 47, 217, .22), rgba(22, 141, 255, .22));
}

.mode-card {
  border-color: rgba(11, 31, 51, .09);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 7px 20px rgba(11, 31, 51, .045);
}

.mode-card > span {
  color: #ff991d;
  background: rgba(255, 175, 46, .14);
}

.mode-card.active {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(125deg, var(--loya-ai-start), var(--loya-ai-middle), var(--loya-ai-end)) border-box;
  box-shadow: 0 12px 30px rgba(138, 84, 244, .16);
}

.mode-card.active > span {
  background: linear-gradient(135deg, var(--loya-ai-start), var(--loya-ai-middle) 52%, var(--loya-ai-end));
}

.promo-mode-panel,
.payment-panel {
  border-color: rgba(138, 84, 244, .10);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 32px rgba(11, 31, 51, .055);
}

.category-heading > span {
  color: #7531d7;
  background: var(--loya-ai-badge);
}

.category-card {
  border-color: rgba(11, 31, 51, .09);
  background: #fff;
}

.category-card i {
  color: #ff991d;
  background: rgba(255, 175, 46, .13);
}

.category-card.active {
  color: #5f27bd;
  border-color: rgba(138, 49, 242, .46);
  background: linear-gradient(145deg, rgba(242, 221, 248, .72), rgba(22, 141, 255, .09));
  box-shadow: 0 8px 20px rgba(138, 49, 242, .13);
}

.category-card.active i {
  color: #fff;
  background: linear-gradient(135deg, var(--loya-ai-start), var(--loya-ai-middle), var(--loya-ai-end));
}

.promogen-dialog input,
.promogen-dialog select,
.promogen-dialog textarea,
.promogen-dialog .select-shell {
  border-color: rgba(11, 31, 51, .10);
  background-color: var(--loya-secondary-bg);
}

.promogen-dialog input:focus,
.promogen-dialog select:focus,
.promogen-dialog textarea:focus {
  border-color: var(--loya-ai-middle);
  box-shadow: 0 0 0 4px rgba(138, 84, 244, .11);
}

.optional-details {
  border-color: rgba(138, 84, 244, .12);
  background: #faf9ff;
}

.optional-details summary span,
.image-upload-card strong {
  color: var(--loya-ai-button);
}

.image-upload-card {
  border-color: rgba(138, 84, 244, .28);
  background: linear-gradient(145deg, #fff, #fbf8ff);
}

.image-upload-card > span {
  color: var(--loya-ai-button);
  background: var(--loya-ai-badge);
}

.image-upload-card.has-preview {
  border-color: rgba(22, 141, 255, .40);
  background: linear-gradient(145deg, #fff, rgba(22, 141, 255, .07));
}

.promogen-status.show {
  color: #6c28c5;
  background: var(--loya-ai-badge);
}

.promogen-status.error {
  color: #a83f31;
  background: #fff0ec;
}

.payment-summary {
  background: linear-gradient(135deg, rgba(242, 221, 248, .72), rgba(22, 141, 255, .09));
}

.payment-summary > span {
  color: var(--loya-ai-button);
}

.promogen-dialog .button.primary {
  color: #fff;
  background: linear-gradient(115deg, var(--loya-ai-start), var(--loya-ai-middle) 50%, var(--loya-ai-end));
  box-shadow: 0 14px 30px rgba(138, 49, 242, .25);
}

.promogen-dialog .button.secondary {
  color: #067196;
  border-color: rgba(6, 113, 150, .18);
  background: #fff;
}

/* PromoGen generation and result screen */
.result-body {
  background:
    radial-gradient(circle at 8% 14%, rgba(4, 155, 209, .18), transparent 27%),
    radial-gradient(circle at 91% 13%, rgba(200, 47, 217, .13), transparent 29%),
    radial-gradient(circle at 84% 88%, rgba(255, 175, 46, .13), transparent 27%),
    linear-gradient(145deg, #f5fbff, var(--loya-system-bg) 55%, #fffaf2);
}

.result-header {
  border-bottom-color: rgba(138, 84, 244, .12);
}

.result-wait-card,
.result-card {
  border-color: rgba(138, 84, 244, .12);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 65px rgba(46, 39, 91, .13);
}

.result-image-placeholder {
  border-color: rgba(138, 84, 244, .16);
  background:
    radial-gradient(circle at center, rgba(242, 221, 248, .8), transparent 44%),
    linear-gradient(145deg, #fbf9ff, #eef7ff);
}

.result-image-placeholder::before,
.result-image-placeholder::after {
  border-color: rgba(138, 84, 244, .21);
}

.countdown-track {
  stroke: rgba(138, 84, 244, .12);
}

.countdown-value {
  stroke: var(--loya-ai-middle);
  filter: drop-shadow(0 0 5px rgba(138, 84, 244, .28));
}

.countdown-copy strong,
.result-wait-copy .kicker,
.result-copy .kicker {
  color: var(--loya-ai-button);
}

.working-pill {
  color: #fff;
  background: linear-gradient(115deg, var(--loya-ai-start), var(--loya-ai-middle), var(--loya-ai-end));
}

.progress-track {
  background: rgba(138, 84, 244, .10);
}

.progress-track i {
  background: linear-gradient(90deg, var(--loya-ai-start), var(--loya-ai-middle), var(--loya-ai-end));
}

.result-image img {
  border: 1px solid rgba(138, 84, 244, .11);
  box-shadow: 0 18px 42px rgba(35, 31, 76, .16);
}

.save-reminder {
  border-color: rgba(255, 175, 46, .34);
  background: #fff8e9;
}

.result-actions .button.primary,
.result-error .button.primary {
  color: #fff;
  background: linear-gradient(115deg, var(--loya-ai-start), var(--loya-ai-middle) 50%, var(--loya-ai-end));
  box-shadow: 0 14px 30px rgba(138, 49, 242, .24);
}

.result-actions .button.secondary {
  color: #067196;
  border-color: rgba(6, 113, 150, .16);
  background: #fff;
}

.mobile-share-button {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #067196, #049bd1) !important;
  box-shadow: 0 12px 26px rgba(6, 113, 150, .20);
}

.mobile-share-button > span {
  font-size: 1.1rem;
  font-weight: 900;
}

.mobile-save-hint {
  display: block;
  margin-top: 12px;
  color: #6b7280;
  font-size: .72rem;
  line-height: 1.45;
}

.retry-note {
  color: #4d3a84;
  background: linear-gradient(135deg, rgba(242, 221, 248, .72), rgba(22, 141, 255, .08));
}

@media (max-width: 620px) {
  .promogen-dialog { background: linear-gradient(145deg, #f8fbff, #f3f1f8 60%, #fffaf1); }
  .promogen-dialog-head { border-radius: 0; }
  .mode-card.active { box-shadow: 0 8px 22px rgba(138, 49, 242, .13); }
}