/*
 * Builder / reveal / gift-card / AI generate styles.
 * NOT imported by the app module graph (vinext would then inline it on
 * every page). Linked as /db-legacy-functional.css from product layouts.
 * Content/article shells: db-legacy-content.css.
 * Archived competitor chrome: digibouquet.css (do not re-import).
 *
 * Fonts remapped: Quicksand → Nunito, Dancing Script → Great Vibes.
 * Pink tokens match brand-sample: #e86ca0 / #f5a0c8 / #c85080.
 */


:root {--bg: #fdf6f0;
  --bg-card: #fff;
  --text: #3a3a4a;
  --text-light: #7a7a8a;
  --primary: #e86ca0;
  --primary-light: #f5a0c8;
  --primary-dark: #c85080;
  --accent: #6bc5a0;
  --accent-dark: #4aa080;
  --shadow: rgba(120, 80, 100, 0.1);
  --shadow-md: rgba(120, 80, 100, 0.15);
  --radius: 16px;
  --radius-sm: 10px;}

:root {--create-header-offset: 84px;}

#app {position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 60px;
  min-height: 90vh;}

/* AI generate landing: wider canvas so 3 entry cards can feel large */
.create-bouquet-page-shell--ai-wide #app {
  max-width: min(1200px, 100%);
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.create-bouquet-page-shell--ai-wide #app > .sr-only {
  position: absolute;
}

.create-bouquet-page-shell--ai-wide #app > * {
  width: 100%;
  max-width: 1160px;
}

.progress-bar {top: var(--create-header-offset);
  z-index: 90;
  background: hsla(28, 76%, 97%, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 18px 10px 12px;
  margin: -20px -20px 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);}

.create-bouquet-page-shell {width: 100%;
  flex: 1 1;}

.create-bouquet-page-shell--immersive #app {padding-top: 0;}

.progress-steps {display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 10px;}

.progress-step {display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.4;
  transition:
    opacity 0.3s,
    transform 0.3s;}

.progress-step.active {opacity: 1;}

.progress-step.completed .step-dot {background: var(--accent);
  border-color: var(--accent);}

.step-dot {width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3px solid var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--primary);
  transition: all 0.3s;}

.progress-step.active .step-dot {background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: scale(1.1);}

.progress-step span {font-size: 11px;
  font-weight: 600;
  color: var(--text-light);}

.progress-step.active span {color: var(--primary);}

.progress-line {height: 4px;
  background: #f0e0e8;
  border-radius: 2px;
  margin: 0 10px;
  overflow: hidden;}

.progress-fill {height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  transition: width 0.5s ease;
  width: 0;}

.step {display: none;
  animation: fadeSlideIn 0.5s ease;}

.step-active {display: block;}

.step-title {font-family: var(--font-great-vibes), var(--font-lemi-qiuxu), 'LemiQiuXuShouShuTi', cursive;
  font-size: 2.4rem;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 6px;}

.step-subtitle {text-align: center;
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 30px;}

.step-note {max-width: 620px;
  margin: -18px auto 24px;
  text-align: center;
  color: #8a6d7f;
  font-size: 0.88rem;
  line-height: 1.6;}

.flower-grid {display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 30px;}

.flower-card {background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: 0 2px 12px var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  animation: popIn 0.4s ease backwards;}

.flower-card:hover {transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-md);}

.flower-card.selected {border-color: var(--primary);
  background: linear-gradient(135deg, #fff5f8, #fff);}

.flower-card.is-disabled,
.flower-card:disabled {opacity: 0.45;
  cursor: not-allowed;
  box-shadow: 0 2px 12px var(--shadow);}

.flower-card.is-disabled:hover,
.flower-card:disabled:hover {transform: none;
  box-shadow: 0 2px 12px var(--shadow);}

.flower-card .flower-check {position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;}

.flower-card.selected .flower-check {opacity: 1;
  transform: scale(1);}

.flower-display {width: 90px;
  height: 90px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;}

.flower-preview-img {width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.3s ease;}

.flower-card:hover .flower-preview-img {transform: scale(1.08) rotate(3deg);}

.flower-name {font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);}

.greenery-grid {display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 18px;
  gap: 18px;
  margin-bottom: 30px;}

.greenery-option {background: var(--bg-card);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: 0 2px 12px var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  animation: popIn 0.4s ease backwards;}

.greenery-option:hover {transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-md);}

.greenery-option.selected {border-color: var(--accent);
  background: linear-gradient(135deg, #f0faf5, #fff);}

.greenery-display {width: 140px;
  height: 120px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;}

.greenery-preview-img {width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.3s ease;}

.greenery-option:hover .greenery-preview-img {transform: scale(1.06);}

.greenery-name {font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);}

.nav-buttons {display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;}

.btn {font-family: var(--font-nunito), var(--font-noto-sans-sc), 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 32px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;}

.btn-next {background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(232, 108, 160, 0.3);}

.btn-next:hover:not(:disabled) {transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 108, 160, 0.4);}

.btn-next:disabled {opacity: 0.4;
  cursor: not-allowed;}

.btn-back {background: #fff;
  color: var(--text-light);
  border: 2px solid #e8e0e8;}

.btn-back:hover {background: #f8f0f5;
  border-color: var(--primary-light);
  color: var(--primary);}

.btn-create {font-size: 1.1rem;
  padding: 14px 36px;}

.card-template-grid {display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 18px;
  gap: 18px;
  margin-bottom: 30px;}

.card-template-option {background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: 0 2px 12px var(--shadow);
  transition: all 0.3s ease;
  animation: popIn 0.4s ease backwards;}

.card-template-option:hover {transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-md);}

.card-template-option.selected {border-color: var(--primary);
  background: linear-gradient(135deg, #fff5f8, #fff);}

.card-template-preview {width: 100%;
  min-height: 140px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;}

.card-tmpl-effect {position: absolute;
  inset: 0;
  pointer-events: none;}

.card-tmpl-effect[data-effect='torn'] {background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 4px,
    rgba(160, 120, 80, 0.03) 0,
    rgba(160, 120, 80, 0.03) 5px
  );}

.card-tmpl-effect[data-effect='torn']:after,
.card-tmpl-effect[data-effect='torn']:before {content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(160, 120, 80, 0.15) 10%,
    transparent 20%,
    rgba(160, 120, 80, 0.1) 30%,
    transparent 40%,
    rgba(160, 120, 80, 0.12) 50%,
    transparent 60%,
    rgba(160, 120, 80, 0.15) 70%,
    transparent 80%,
    rgba(160, 120, 80, 0.1) 90%,
    transparent
  );}

.card-tmpl-effect[data-effect='torn']:before {top: 0;}

.card-tmpl-effect[data-effect='torn']:after {bottom: 0;}

.card-tmpl-effect[data-effect='burnt'] {box-shadow:
    inset 0 0 15px rgba(80, 40, 0, 0.15),
    inset 3px 3px 8px rgba(80, 40, 0, 0.1),
    inset -3px -3px 8px rgba(80, 40, 0, 0.1);
  border-radius: inherit;}

.card-tmpl-effect[data-effect='burnt']:before {content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 0 0, rgba(100, 50, 0, 0.15) 0, transparent 40%),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(100, 50, 0, 0.12) 0,
      transparent 35%
    ),
    radial-gradient(
      ellipse at 100% 0,
      rgba(80, 40, 0, 0.08) 0,
      transparent 30%
    ),
    radial-gradient(ellipse at 0 100%, rgba(80, 40, 0, 0.1) 0, transparent 30%);}

.card-tmpl-effect[data-effect='shimmer']:before {content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 200, 150, 0.08) 45%,
    rgba(255, 200, 150, 0.15) 50%,
    rgba(255, 200, 150, 0.08) 55%,
    transparent 70%
  );
  animation: shimmer 4s ease-in-out infinite;}

.card-tmpl-effect[data-effect='watercolor']:before {content: '';
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at 20% 30%,
      rgba(120, 140, 200, 0.08) 0,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 60%,
      rgba(160, 120, 200, 0.06) 0,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 80%,
      rgba(100, 160, 200, 0.05) 0,
      transparent 40%
    );
  filter: blur(3px);}

.card-tmpl-effect[data-effect='stars']:before {content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      1px 1px at 15% 20%,
      rgba(255, 255, 200, 0.5) 50%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 45% 40%,
      rgba(255, 255, 200, 0.4) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 70% 15%,
      rgba(255, 255, 200, 0.6) 50%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 85% 55%,
      rgba(255, 255, 200, 0.4) 50%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 30% 70%,
      rgba(255, 255, 200, 0.3) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 60% 80%,
      rgba(255, 255, 200, 0.5) 50%,
      transparent 100%
    );}

.card-tmpl-effect[data-effect='botanical']:before {content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at 0 0,
      rgba(100, 160, 100, 0.08) 0,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(100, 160, 100, 0.06) 0,
      transparent 35%
    );}

.card-tmpl-effect[data-effect='kraft'] {background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(100, 70, 40, 0.04) 0,
    rgba(100, 70, 40, 0.04) 4px
  );}

.card-tmpl-name {font-family: var(--font-great-vibes), var(--font-lemi-qiuxu), 'LemiQiuXuShouShuTi', cursive;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 1;
  position: relative;}

.card-tmpl-msg {font-size: 0.75rem;
  flex: 1 1;
  display: flex;
  align-items: center;
  opacity: 0.7;
  z-index: 1;
  position: relative;}

.card-tmpl-from {font-family: var(--font-great-vibes), var(--font-lemi-qiuxu), 'LemiQiuXuShouShuTi', cursive;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
  width: 100%;
  z-index: 1;
  position: relative;}

.option-name {font-weight: 600;
  font-size: 0.85rem;}

.card-form {display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 30px;}

.card-preview {display: flex;
  align-items: center;
  justify-content: center;}

.card-inner {width: 280px;
  min-height: 320px;
  background: linear-gradient(145deg, #fffaf5, #fff5f0);
  border-radius: var(--radius);
  padding: 30px 24px;
  box-shadow:
    0 4px 20px var(--shadow-md),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.8);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(232, 108, 160, 0.15);
  overflow: hidden;}

.rendered-card {animation: cardSlideUp 0.6s ease backwards;
  animation-delay: 0.3s;}

.card-decoration {position: absolute;
  width: 16px;
  height: 16px;
  z-index: 0;
  pointer-events: none;}

.card-decoration:after,
.card-decoration:before {content: '';
  position: absolute;}

.card-decoration.top-left {top: 6px;
  left: 6px;}

.card-decoration.top-left:before {width: 16px;
  height: 2px;}

.card-decoration.top-left:after,
.card-decoration.top-left:before {top: 0;
  left: 0;
  background: var(--accent, var(--primary-light));
  border-radius: 1px;}

.card-decoration.top-left:after {width: 2px;
  height: 16px;}

.card-decoration.top-right {top: 6px;
  right: 6px;}

.card-decoration.top-right:before {width: 16px;
  height: 2px;}

.card-decoration.top-right:after,
.card-decoration.top-right:before {top: 0;
  right: 0;
  background: var(--accent, var(--primary-light));
  border-radius: 1px;}

.card-decoration.top-right:after {width: 2px;
  height: 16px;}

.card-decoration.bottom-left {bottom: 6px;
  left: 6px;}

.card-decoration.bottom-left:before {width: 16px;
  height: 2px;}

.card-decoration.bottom-left:after,
.card-decoration.bottom-left:before {bottom: 0;
  left: 0;
  background: var(--accent, var(--primary-light));
  border-radius: 1px;}

.card-decoration.bottom-left:after {width: 2px;
  height: 16px;}

.card-decoration.bottom-right {bottom: 6px;
  right: 6px;}

.card-decoration.bottom-right:before {width: 16px;
  height: 2px;}

.card-decoration.bottom-right:after,
.card-decoration.bottom-right:before {bottom: 0;
  right: 0;
  background: var(--accent, var(--primary-light));
  border-radius: 1px;}

.card-decoration.bottom-right:after {width: 2px;
  height: 16px;}

/* Sizes come from --card-*-size (set by cardTypeScaleStyle per text length). */
.card-to {font-family: var(--font-great-vibes), var(--font-lemi-qiuxu), 'LemiQiuXuShouShuTi', cursive;
  font-size: var(--card-to-size, 1.65rem);
  color: var(--primary-dark);
  margin-bottom: 14px;
  line-height: 1.25;}

.card-message,
.card-to {position: relative;
  z-index: 1;}

/* Short messages fill the card; long ones wrap with smaller adaptive size */
.card-message {font-size: var(--card-msg-size, 1.2rem);
  color: var(--text);
  line-height: 1.65;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: break-word;
  padding: 14px 4px;}

.card-from {font-family: var(--font-great-vibes), var(--font-lemi-qiuxu), 'LemiQiuXuShouShuTi', cursive;
  font-size: var(--card-from-size, 1.55rem);
  color: var(--primary-dark);
  text-align: right;
  margin-top: 14px;
  line-height: 1.25;
  position: relative;
  z-index: 1;}

.card-inputs {gap: 18px;
  justify-content: center;}

.card-inputs,
.input-group {display: flex;
  flex-direction: column;}

.input-group {gap: 6px;}

.input-group label {font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-light);}

.input-group input,
.input-group textarea {font-family: var(--font-nunito), var(--font-noto-sans-sc), 'Noto Sans SC', sans-serif;
  font-size: 1rem;
  padding: 12px 16px;
  border: 2px solid #e8e0e8;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  transition: border-color 0.3s;
  outline: none;
  resize: none;}

.input-group input:focus,
.input-group textarea:focus {border-color: var(--primary);}

.char-count {font-size: 0.8rem;
  color: var(--text-light);
  text-align: right;}

.share-section {text-align: center;
  padding: 20px 0;}

.ai-card-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px 48px;
}

.ai-card-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}

/* Create step: controls sit mid-height next to the tall 9:16 preview. */
.ai-card-layout--ready {
  align-items: center;
}

.ai-card-layout--ready .ai-card-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 420px;
}

/*
 * Result ready (Scheme B): gift card is the hero on the left,
 * actions sit in a calm column on the right (desktop).
 * Mobile keeps card first via existing preview order: -1.
 */
.ai-card-layout--result {
  align-items: start;
}

.ai-card-layout--result .ai-card-form {
  max-width: 400px;
  justify-content: flex-start;
  gap: 0;
}

.ai-card-layout--result .ai-card-preview-col {
  position: sticky;
  top: 88px;
}

.ai-card-layout--result .ai-card-preview-frame {
  width: min(100%, 340px);
  box-shadow:
    0 18px 48px rgba(90, 40, 60, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.ai-card-layout--result .ai-card-preview-img {
  object-fit: contain;
  object-position: center top;
  background: linear-gradient(165deg, #fce4ec, #faf0f2);
}

/*
 * Result actions column — homepage-like hierarchy:
 * title → primary CTAs → share block → soft note → optional extras → again → nav
 */
.ai-result-actions {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  width: 100%;
  max-width: 380px;
}

.ai-result-actions__hero {
  margin: 0;
}

.ai-result-actions__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c44a80;
}

.ai-result-actions__title {
  margin: 0;
  font-family: var(--font-cormorant), Georgia, 'Times New Roman', serif;
  font-size: clamp(1.55rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
  color: #3a2430;
  letter-spacing: -0.01em;
}

.ai-result-actions__cta {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ai-result-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.ai-result-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ai-result-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #e86ca0 0%, #d4558c 100%);
  box-shadow: 0 10px 28px rgba(232, 108, 160, 0.32);
}

.ai-result-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(232, 108, 160, 0.38);
}

.ai-result-btn--secondary {
  color: #b03267;
  background: #fff;
  border-color: rgba(232, 108, 160, 0.32);
  box-shadow: 0 4px 14px rgba(173, 130, 147, 0.08);
}

.ai-result-btn--secondary:hover:not(:disabled) {
  background: #fff7fb;
  border-color: rgba(232, 108, 160, 0.48);
}

.ai-result-btn--soft {
  min-height: 44px;
  color: #8a4a5c;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(214, 51, 132, 0.14);
  font-weight: 650;
  font-size: 0.88rem;
}

.ai-result-btn--soft:hover:not(:disabled) {
  background: #fff;
  border-color: rgba(214, 51, 132, 0.28);
}

.ai-result-btn--ghost-wide {
  min-height: 46px;
  color: #b03267;
  background: transparent;
  border-color: rgba(232, 108, 160, 0.22);
  font-weight: 650;
}

.ai-result-actions__section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ai-result-actions__label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a07080;
}

.ai-result-actions__hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #a07080;
}

.ai-result-link-field {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(214, 51, 132, 0.14);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(173, 130, 147, 0.07);
  overflow: hidden;
}

.ai-result-link-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.7rem 1rem;
  font-size: 0.84rem;
  color: #5a3a48;
  outline: none;
}

.ai-result-link-field__copy {
  flex: 0 0 auto;
  border: 0;
  border-left: 1px solid rgba(214, 51, 132, 0.12);
  padding: 0 1.1rem;
  background: linear-gradient(180deg, #fff7fb, #ffeff6);
  color: #b03267;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ai-result-link-field__copy:hover:not(:disabled) {
  background: #ffe4f0;
}

.ai-result-link-field__copy:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ai-result-actions__note {
  margin: 0;
  padding: 0.75rem 0.95rem;
  border-radius: 16px;
  background: rgba(255, 247, 250, 0.9);
  border: 1px solid rgba(232, 108, 160, 0.12);
  font-size: 0.84rem;
  line-height: 1.5;
  color: #8a5a6c;
}

.ai-result-actions__note-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: #c0266a;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ai-result-actions__note-link:hover {
  color: #9d174d;
}

/* Quiet accordion — matches soft homepage cards */
.ai-result-extra {
  border-radius: 18px;
  border: 1px solid rgba(214, 51, 132, 0.1);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 24px rgba(173, 130, 147, 0.06);
  overflow: hidden;
}

.ai-result-extra__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.9rem 1.05rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.9rem;
  font-weight: 650;
  color: #6b4a58;
}

.ai-result-extra__summary::-webkit-details-marker {
  display: none;
}

.ai-result-extra__chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid #c48aa0;
  border-bottom: 2px solid #c48aa0;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex-shrink: 0;
  margin-top: -0.2rem;
}

.ai-result-extra[open] .ai-result-extra__chevron {
  transform: rotate(225deg);
  margin-top: 0.15rem;
}

.ai-result-extra__panel {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 0 1.05rem 1.1rem;
  border-top: 1px solid rgba(214, 51, 132, 0.08);
}

.ai-result-extra__block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.95rem;
}

.ai-result-extra__stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ai-result-switch {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #5a3a48;
  cursor: pointer;
}

.ai-result-switch input {
  width: 1rem;
  height: 1rem;
  accent-color: #e86ca0;
}

.ai-result-input {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(214, 51, 132, 0.16);
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  color: #3a2430;
  outline: none;
  box-sizing: border-box;
}

.ai-result-input:focus {
  border-color: rgba(232, 108, 160, 0.45);
  box-shadow: 0 0 0 3px rgba(232, 108, 160, 0.12);
}

.ai-result-qr {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ai-result-qr__img {
  width: 104px;
  height: 104px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(232, 108, 160, 0.16);
  background: #fff;
  box-shadow: 0 6px 16px rgba(173, 130, 147, 0.08);
}

.ai-result-qr .ai-result-btn {
  width: auto;
  min-width: 8.5rem;
  padding-inline: 1.15rem;
}

.ai-result-actions__again {
  padding-top: 0.15rem;
}

.ai-result-actions__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(200, 120, 150, 0.12);
}

.ai-result-actions__nav-link {
  border: 0;
  background: none;
  padding: 0.35rem 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #a07080;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ai-result-actions__nav-link:hover {
  color: #b03267;
}

@media (min-width: 960px) {
  .ai-result-actions__cta {
    flex-direction: row;
    gap: 0.7rem;
  }

  .ai-result-actions__cta .ai-result-btn--primary {
    flex: 1.15;
  }

  .ai-result-actions__cta .ai-result-btn--secondary {
    flex: 1;
  }
}

.ai-card-generate-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.ai-card-generate-panel .btn-create {
  width: 100%;
}

.ai-cost-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: rgba(232, 108, 160, 0.08);
  border: 1px solid rgba(232, 108, 160, 0.18);
  color: #8a4a5c;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}

.ai-cost-chip.is-low {
  background: rgba(232, 108, 160, 0.14);
  border-color: rgba(214, 90, 138, 0.4);
}

.ai-cost-chip-warn {
  font-size: 0.75rem;
  font-weight: 700;
  color: #c44a7a;
}

/* Result panel hierarchy: download → share → unlock another → footer */
.ai-card-result-hero {
  margin: 0 0 1rem;
}

.ai-card-result-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(196, 74, 128, 0.85);
}

.ai-card-result-heading {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--db-text, #3a2430);
}

.db-pricing-plans--gifts .db-pricing-grid--gifts {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.db-pricing-card__badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #e86ca0, #c44a80);
}

.db-pricing-gift-footnote {
  max-width: 36rem;
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--db-text-muted, #8a6a76);
}

.ai-card-watermark-row {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 246, 250, 0.95);
  border: 1px solid rgba(232, 108, 160, 0.18);
}

.ai-card-watermark-toggle {
  margin: 0 !important;
  width: 100%;
  align-items: flex-start !important;
  gap: 0.55rem !important;
  font-size: 0.9rem !important;
  font-weight: 650 !important;
  color: var(--db-text, #3a2430) !important;
  line-height: 1.35;
}

.ai-card-watermark-toggle input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.ai-card-watermark-toggle.is-locked {
  opacity: 0.92;
  cursor: default;
}

.ai-card-watermark-toggle.is-locked input {
  cursor: not-allowed;
}

.ai-card-watermark-hint {
  margin: 0.4rem 0 0 1.55rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--db-text-muted, #8a6a76);
}

.ai-card-watermark-unlock {
  margin-top: 0.5rem;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  color: #c0266a;
  border-color: #f9a8d4;
  background: #fff7fb;
}
.ai-card-watermark-unlock:hover {
  background: #fce7f3;
}


.ai-card-result-primary {
  margin: 0 0 1.15rem;
}

.ai-card-result-download {
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(232, 108, 160, 0.28);
}

.ai-card-result-next {
  margin: 0.5rem 0 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(200, 120, 150, 0.12);
}

.ai-card-layout--result .ai-card-result-next {
  margin-top: 0.35rem;
}

.ai-card-layout--result .ai-card-result-secondary {
  width: 100%;
}

.ai-card-result-next-label {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-text-muted, #8a6a76);
}

.ai-card-result-panel .ai-card-branding-hint {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--db-text-muted, #9a7a86);
  text-align: center;
}

.ai-card-share-heading {
  margin: 0 0 0.55rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

.ai-card-qr-details {
  margin-top: 0.55rem;
}

.ai-card-qr-summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: #c44a80;
  list-style: none;
  user-select: none;
}

.ai-card-qr-summary::-webkit-details-marker {
  display: none;
}

.ai-card-qr-summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}

.ai-card-qr-details[open] .ai-card-qr-summary::before {
  transform: rotate(90deg);
}

.ai-unlock-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(255, 240, 246, 0.98),
    rgba(255, 228, 238, 0.95)
  );
  border: 1.5px solid rgba(232, 108, 160, 0.35);
  box-shadow: 0 8px 24px rgba(200, 80, 130, 0.1);
}

.ai-unlock-bar-copy {
  text-align: center;
}

.ai-unlock-bar-copy strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #6b2f45;
  margin-bottom: 0.25rem;
}

.ai-unlock-bar-copy p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #9a5a6c;
}

.ai-unlock-bar-cta {
  width: 100%;
}

.ai-card-branding-hint {
  opacity: 0.9;
  font-size: 0.78rem !important;
}

.ai-card-result-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.ai-card-result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.ai-card-result-actions .btn,
.ai-card-result-actions .gift-card-download-btn {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
  justify-content: center;
}

.ai-card-result-secondary {
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  border: 1.5px solid rgba(232, 108, 160, 0.45) !important;
  color: #c44a80 !important;
  font-weight: 650 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  background: #fff;
  color: #8a4a5c;
  border: 1.5px solid rgba(232, 108, 160, 0.35);
  box-shadow: none;
}

.ai-card-result-secondary:hover:not(:disabled) {
  background: #fff5f8;
  border-color: rgba(232, 108, 160, 0.55);
  transform: translateY(-1px);
}

.ai-card-result-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(232, 108, 160, 0.14);
}

.ai-card-result-ghost {
  width: auto;
  min-width: 0;
  padding: 10px 18px;
  background: transparent;
  color: #9a6a78;
  border: none;
  box-shadow: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.ai-card-result-ghost:hover:not(:disabled) {
  color: #e86ca0;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.ai-card-style-grid {
  margin-bottom: 8px;
}

.ai-card-mood-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 22px;
  max-width: 860px;
  justify-content: center;
}

.ai-card-mood {
  border: 2px solid transparent;
  background: var(--bg-card, #fff);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 2px 10px var(--shadow, rgba(90, 40, 60, 0.08));
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 108px;
  transition: border-color 0.15s, transform 0.15s;
}

.ai-card-mood:hover {
  transform: translateY(-1px);
}

.ai-card-mood.selected {
  border-color: var(--primary, #e86ca0);
  background: linear-gradient(135deg, #fff5f8, #fff);
}

.ai-card-mood-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #5a2a3a;
}

.ai-card-mood-hint {
  font-size: 0.68rem;
  color: #a07080;
}

.ai-card-idea-grid {
  margin-bottom: 18px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 860px;
}

.ai-card-fields {
  max-width: 720px;
}

.ai-card-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}

.ai-card-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 12px 14px;
  border: 2px solid #e8e0e8;
  border-radius: var(--radius-sm, 12px);
  background: var(--bg-card, #fff);
  color: var(--text);
  outline: none;
}

.ai-card-input:focus {
  border-color: var(--primary, #e86ca0);
}

.ai-card-free-note {
  text-align: center;
  font-size: 0.98rem;
  color: #6b2f45;
  margin: 0.35rem auto 0.85rem;
  max-width: 480px;
  line-height: 1.55;
  padding: 0.95rem 1.1rem 1.05rem;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(255, 246, 250, 0.98),
    rgba(255, 232, 242, 0.95)
  );
  border: 1.5px solid rgba(232, 108, 160, 0.28);
  box-shadow: 0 6px 18px rgba(200, 80, 130, 0.08);
  font-weight: 550;
}

.ai-card-free-note strong {
  font-weight: 800;
  color: #c44a7a;
  font-size: 1.05em;
}

.ai-card-free-note a,
.ai-card-free-note .ai-card-free-note-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.45rem 0.15rem 0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #e86ca0, #d65a8a);
  color: #fff !important;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(214, 90, 138, 0.35);
  vertical-align: baseline;
  line-height: 1.2;
}

.ai-card-free-note a:hover,
.ai-card-free-note .ai-card-free-note-upgrade:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.ai-card-preview-col {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ai-card-preview-frame {
  width: min(100%, 320px);
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(165deg, #fce4ec, #faf0f2);
  box-shadow:
    0 12px 40px rgba(90, 40, 60, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  border: 1px solid rgba(232, 108, 160, 0.15);
}

.ai-card-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-card-preview-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: #a07080;
  font-size: 0.9rem;
}

.ai-card-preview-empty span {
  font-size: 0.75rem;
  opacity: 0.8;
}

.ai-card-preview-paywall {
  gap: 12px;
  padding: 28px 20px;
}

.ai-card-preview-paywall .btn {
  margin-top: 6px;
  max-width: 100%;
}

.ai-card-result-sub {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #8a6a78;
  font-weight: 500;
}

.ai-card-paywall-ready .ai-card-result-primary {
  margin-top: 0.85rem;
}

/*
 * Gift unlock modal
 * - Mobile: bottom sheet, fixed max height, body scrolls, footer pinned
 * - Desktop (sm+): centered card, height:auto, no crushed body
 */
.db-gift-unlock {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overscroll-behavior: none;
  height: 100%;
  height: 100dvh;
  height: 100svh;
  padding: 0 !important;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .db-gift-unlock {
    align-items: center !important;
    padding: 1.25rem !important;
  }
}

.db-gift-unlock-sheet {
  width: 100%;
  max-width: 28rem;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0;
  animation: db-gift-unlock-rise 0.28s ease-out;
  /* Mobile: taller sheet so benefits + 3 CTAs fit without crushing copy */
  height: min(92dvh, 820px);
  max-height: min(92dvh, 820px);
  border-radius: 1.15rem 1.15rem 0 0 !important;
  background: #fff;
}

@media (min-width: 640px) {
  .db-gift-unlock-sheet {
    /* Centered dialog: grow with content; room for full benefit text */
    height: auto !important;
    max-height: min(90dvh, 760px) !important;
    border-radius: 1.25rem !important;
    box-shadow:
      0 24px 64px rgba(60, 20, 40, 0.18),
      0 0 0 1px rgba(232, 108, 160, 0.08);
  }
}

@supports not (height: 1dvh) {
  .db-gift-unlock-sheet {
    height: min(92vh, 820px);
    max-height: min(92vh, 820px);
  }
  @media (min-width: 640px) {
    .db-gift-unlock-sheet {
      height: auto !important;
      max-height: min(90vh, 760px) !important;
    }
  }
}

.db-gift-unlock-benefits li p {
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.db-gift-unlock-cta-hero {
  transform: translateZ(0);
}

.db-gift-unlock-cta-hero:hover:not(:disabled) {
  transform: translateY(-1px);
}

.db-gift-unlock-body {
  /* Grow to fill leftover space on mobile; do NOT use flex-basis 0
     (that crushed the middle section to ~0 on desktop). */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (min-width: 640px) {
  .db-gift-unlock-body {
    /* Content-sized; only scroll when sheet hits max-height */
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }
}

/* Always pin pay buttons above the home indicator */
.db-gift-unlock-footer {
  flex: 0 0 auto !important;
  position: relative;
  z-index: 2;
  background: #fff !important;
  box-shadow: 0 -10px 28px rgba(60, 20, 40, 0.08);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
}

@keyframes db-gift-unlock-rise {
  from {
    transform: translateY(12%);
    opacity: 0.9;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (min-width: 640px) {
  @keyframes db-gift-unlock-rise {
    from {
      transform: translateY(8px) scale(0.98);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .db-gift-unlock-sheet {
    animation: none;
  }
}

/* Full-width history rail under result (not stuck under the action column). */
.ai-history-rail {
  width: 100%;
  max-width: 920px;
  margin: 2.25rem auto 0;
  padding: 1.15rem 0 0.35rem;
  border-top: 1px solid rgba(200, 120, 150, 0.14);
  box-sizing: border-box;
}

.ai-history-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 4px 0.75rem;
}

.ai-history-rail-title {
  margin: 0;
  color: #3a3a4a;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

.ai-history-rail-count {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a07080;
}

.ai-history-rail-scroll {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 108, 160, 0.35) transparent;
}

.ai-history-rail-scroll::-webkit-scrollbar {
  height: 6px;
}

.ai-history-rail-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(232, 108, 160, 0.35);
}

/* legacy class kept for any other references */
.ai-card-history {
  margin-top: 2rem;
}

.ai-card-history-title {
  width: 100%;
  margin: 0 0 4px;
  color: #3a3a4a;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: 1.35rem;
  text-align: left;
}

.ai-card-share-panel {
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
  padding: 0.9rem 1rem 1rem;
  width: 100%;
  padding: 16px 16px 14px;
  border: 1px solid rgba(232, 108, 160, 0.28);
  border-radius: 20px;
  background: #fffaf7;
  box-shadow: 0 10px 24px rgba(122, 74, 92, 0.08);
}

.ai-card-share-panel h3 {
  margin: 0 0 12px;
  color: #3a3a4a;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: 1.2rem;
  text-align: left;
  font-weight: 600;
}

.ai-card-share-btn {
  width: 100%;
  max-width: none;
}

.ai-card-share-box {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ai-card-share-box input {
  flex: 1 1 auto;
  min-width: 0;
}

.ai-card-share-box .btn-copy {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ai-card-qr-area {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.ai-card-qr-preview {
  width: 112px;
  height: 112px;
  padding: 6px;
  border: 1px solid rgba(232, 108, 160, 0.22);
  border-radius: 14px;
  background: #fff;
}

.ai-card-qr-area .ai-card-share-btn {
  width: auto;
  max-width: 11rem;
  margin: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 0;
  border-radius: 999px;
  justify-self: start;
}

.ai-card-share-hint {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: #a07080;
  text-align: left;
  line-height: 1.4;
}

@media (max-width: 420px) {
  .ai-card-qr-area {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .ai-card-share-panel h3,
  .ai-card-share-hint {
    text-align: center;
  }

  .ai-card-result-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .ai-card-result-ghost {
    width: 100%;
    text-align: center;
  }
}

.my-bouquets-sections {
  display: grid;
  gap: 48px;
}

.my-bouquets-sections > section > .section-title {
  margin-bottom: 20px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

/* AI gift cards are 9:16 — do not stretch one card across the full blog column. */
.my-ai-bouquets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
  gap: 20px;
  justify-content: start;
}

.my-ai-bouquets-grid .related-card {
  display: flex;
  flex-direction: column;
  max-width: 280px;
  padding: 0 0 18px;
  overflow: hidden;
}

.my-ai-bouquet-image {
  display: block;
  aspect-ratio: 9 / 16;
  margin: 0 0 0.85rem;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background:
    linear-gradient(180deg, #fff7f9 0%, #f8ebe6 100%);
}

/* Show the full gift scene (bouquet + note + brand/QR), never crop the footer. */
.my-ai-bouquet-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.my-ai-bouquets-grid .related-card h3,
.my-ai-bouquets-grid .related-card .blog-card-meta,
.my-ai-bouquets-grid .related-card .my-bouquet-actions,
.my-ai-bouquets-grid .related-card .my-ai-bouquet-message {
  padding-left: 16px;
  padding-right: 16px;
}

.my-ai-bouquet-message {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #6b4a58;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-bouquet-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.my-bouquet-actions .btn {
  width: auto;
  min-width: 96px;
  padding: 8px 16px;
}

@media (max-width: 560px) {
  .my-ai-bouquets-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .my-ai-bouquets-grid .related-card {
    max-width: none;
  }
}

.gift-fs {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  font-family: var(--font-nunito), var(--font-noto-sans-sc), 'Noto Sans SC', system-ui, sans-serif;
}

.gift-open--revealed {
  justify-content: flex-start;
  padding-top: max(8px, env(safe-area-inset-top));
  gap: 6px;
}

.gift-open--revealed .gift-fs-stage {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}

/* Card is the hero — dock must not steal vertical space */
.gift-open--revealed .gift-fs-card,
.gift-open--revealed .gift-fs-img {
  max-height: min(74vh, 720px);
}

.gift-fs-bg {
  position: absolute;
  inset: 0;
  /* Soft blush room — match homepage cream / rose atmosphere */
  background:
    radial-gradient(ellipse 90% 70% at 50% 20%, rgba(255, 240, 246, 0.95) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(255, 220, 232, 0.55) 0%, transparent 50%),
    linear-gradient(165deg, #fdf6f8 0%, #f7e8ef 45%, #efe0ea 100%);
  z-index: 0;
}

.gift-fs-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(232, 108, 160, 0.1), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(180, 120, 200, 0.08), transparent 45%);
  pointer-events: none;
}

.gift-fs-loading {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 240, 248, 0.85);
  font-size: 0.9rem;
  min-height: 200px;
  justify-content: center;
}

.gift-fs-stage {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  max-height: min(82vh, 780px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

.gift-fs-card {
  position: relative;
  
  width: auto;
  max-width: min(92vw, 420px);
  max-height: min(82vh, 780px);
  border-radius: 24px;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
  line-height: 0;
  background: transparent;
}

.gift-fs-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 420px);
  max-height: min(82vh, 780px);
  
  object-fit: contain;
  border: 0;
  border-radius: 24px;
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
}

/* Free-tier mark: flower icon + host, bottom-left (no QR). */
.gift-open-brand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding: 0 0 2.8% 3.8%;
  pointer-events: none;
  box-sizing: border-box;
}

.gift-open-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  max-width: none;
  padding: 0.28rem 0.62rem 0.28rem 0.35rem;
  border-radius: 999px;
  background: linear-gradient(
    165deg,
    rgba(255, 252, 250, 0.94),
    rgba(255, 246, 250, 0.88)
  );
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 2px 10px rgba(50, 28, 40, 0.12),
    0 0 0 0.5px rgba(232, 108, 160, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  line-height: 1.15;
}

.gift-open-brand-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 6px;
  display: block;
}

.gift-open-brand-url {
  font-family:
    var(--font-cormorant),
    'Cormorant Garamond',
    Cormorant,
    Georgia,
    'Times New Roman',
    serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(72, 52, 62, 0.92);
  overflow: visible;
  text-overflow: clip;
}

.gift-fs-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(92vw, 420px);
  margin-top: 4px;
}

.gift-fs-actions--show {
  opacity: 1;
}

.gift-fs-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.gift-fs-link--primary {
  background: rgba(232, 108, 160, 0.92);
  color: #fff;
  border: 1px solid transparent;
}

.gift-fs-link--primary:hover {
  background: #e05a98;
}

.gift-fs-link--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 240, 248, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.gift-fs-link--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ── Phase 2: receive open ritual + bottom action panel ───────────────── */

/* legacy class kept as no-op so old markup doesn't break */
.gift-open-mute {
  display: none;
}

.gift-open-seal {
  position: relative;
  z-index: 2;
  appearance: none;
  border: 0;
  background: transparent;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  color: rgba(255, 244, 250, 0.95);
  animation: giftSealIn 0.7s ease both;
  padding: 0;
  font: inherit;
}

.gift-open-seal--opening {
  pointer-events: none;
  animation: giftSealOpen 0.7s ease both;
}

.gift-open-seal-petals {
  position: absolute;
  inset: -8% -6% auto;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
  animation: giftPetalFloat 4.5s ease-in-out infinite;
}

.gift-open-seal-petals img,
.gift-open-seal-card img {
  width: 100%;
  height: auto;
  display: block;
}

.gift-open-seal-card {
  position: relative;
  z-index: 1;
  width: min(280px, 70vw);
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.35));
  transition: transform 0.25s ease;
}

.gift-open-seal:hover .gift-open-seal-card {
  transform: translateY(-4px) scale(1.02);
}

.gift-open-seal-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.gift-open-seal-for {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 220, 235, 0.95);
}

.gift-open-seal-from {
  font-size: 0.82rem;
  color: rgba(255, 230, 240, 0.7);
}

.gift-open-seal-title {
  font-size: 1.45rem;
  font-weight: 700;
  margin-top: 0.35rem;
  line-height: 1.25;
}

.gift-open-seal-hint {
  font-size: 0.92rem;
  color: rgba(255, 230, 240, 0.78);
  margin-top: 0.15rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.gift-open-stage {
  animation: giftRevealIn 0.55s ease both;
}

.gift-open-card {
  animation: giftCardPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/*
 * Compact dock — clear hierarchy for gift receive.
 * 1) Primary: Send one back (rose gradient)
 * 2) Secondary: 3 equal reaction cells
 * 3) Tertiary: write-note text link
 * 4) Utility: mute absolute top-right
 */
.gift-open-dock {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: min(86vw, 280px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 8px 7px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 248, 251, 0.96) 100%);
  border: 1px solid rgba(232, 108, 160, 0.14);
  box-shadow:
    0 6px 16px rgba(180, 90, 120, 0.08),
    0 1px 3px rgba(80, 40, 60, 0.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: giftRevealIn 0.45s ease 0.1s both;
  font-family: var(--font-nunito), var(--font-quicksand), system-ui, sans-serif;
}

.gift-open-dock--expanded {
  gap: 6px;
}

/* Head row: section label + soft music toggle (same line, not floating) */
.gift-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 1.15rem;
}

.gift-dock-kicker {
  margin: 0;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #a07088;
  flex: 1 1 auto;
  min-width: 0;
}

/* Quiet utility control — looks like caption, not a hero chip */
.gift-dock-music {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 1px 2px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #b894a4;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  font: inherit;
  opacity: 0.85;
  transition: color 0.15s, opacity 0.15s, background 0.15s;
}

.gift-dock-music:hover {
  color: #c85080;
  opacity: 1;
  background: rgba(232, 108, 160, 0.06);
}

.gift-dock-music--off {
  color: #c4a0b0;
}

.gift-dock-music--off:hover {
  color: #c85080;
}

.gift-dock-music-icon {
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.9;
}

.gift-dock-music-label {
  line-height: 1;
  letter-spacing: 0.01em;
}

@media (max-width: 360px) {
  .gift-dock-music-label {
    /* keep icon only on very narrow widths */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Hard rule: always 3 equal columns, never wrap to 2+1 */
.gift-dock-reactions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.gift-dock-chip {
  appearance: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 2px 3px;
  border-radius: 10px;
  border: 1px solid rgba(232, 108, 160, 0.18);
  background: #fff;
  color: #7a5568;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 1px 2px rgba(200, 100, 140, 0.04);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.gift-dock-chip:hover:not(:disabled) {
  border-color: rgba(232, 108, 160, 0.42);
  background: #fff7fa;
  color: #c85080;
}

.gift-dock-chip--on {
  background: linear-gradient(160deg, #f7a8c8 0%, #e86ca0 55%, #d65a8a 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(232, 108, 160, 0.24);
}

.gift-dock-chip:disabled {
  opacity: 0.55;
  cursor: wait;
}

.gift-dock-chip-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.gift-dock-music-icon {
  display: block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.gift-dock-chip-text {
  font-size: 0.58rem;
  font-weight: 650;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.gift-dock-thanks {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 108, 160, 0.12), rgba(245, 180, 200, 0.18));
  border: 1px solid rgba(232, 108, 160, 0.28);
  color: #c85080;
  font-weight: 650;
  font-size: 0.84rem;
  text-align: center;
}

/* Tertiary — text link, not a second full bar fighting primary CTA */
.gift-dock-note-link {
  appearance: none;
  align-self: center;
  margin: 0;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: #c85080;
  font-size: 0.66rem;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(232, 108, 160, 0.35);
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
}

.gift-dock-note-link:hover {
  color: #b04070;
  text-decoration-color: rgba(200, 80, 128, 0.55);
}

.gift-dock-note-link:disabled {
  opacity: 0.5;
  cursor: wait;
}

.gift-dock-compose {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(232, 108, 160, 0.12);
}

.gift-dock-compose-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.gift-dock-compose-label {
  font-size: 0.74rem;
  font-weight: 650;
  color: #8a6070;
}

.gift-dock-count {
  font-size: 0.68rem;
  color: #b894a4;
}

.gift-dock-note {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  min-height: 2.4rem;
  border-radius: 14px;
  border: 1.5px solid rgba(232, 108, 160, 0.2);
  background: #fff;
  color: #4a3540;
  padding: 9px 12px;
  font-size: 0.84rem;
  line-height: 1.4;
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(200, 120, 150, 0.04);
}

.gift-dock-note:focus {
  outline: none;
  border-color: #e86ca0;
  box-shadow: 0 0 0 3px rgba(232, 108, 160, 0.15);
}

.gift-dock-note::placeholder {
  color: #c4a0b0;
}

.gift-dock-hint {
  margin: 0;
  font-size: 0.54rem;
  line-height: 1.25;
  color: #a88494;
}

.gift-dock-hint--always {
  margin-top: 0;
  text-align: center;
  padding: 0 2px;
}

/* Phone: card dominates; dock is a thin utility strip */
@media (max-width: 480px) {
  .gift-fs {
    gap: 6px;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  }

  .gift-open--revealed .gift-fs-card,
  .gift-open--revealed .gift-fs-img {
    max-height: min(72vh, 640px);
    max-width: min(94vw, 420px);
  }

  .gift-fs-stage {
    width: min(94vw, 420px);
  }

  .gift-open-dock {
    width: min(92vw, 268px);
    padding: 6px 7px 6px;
    gap: 4px;
    border-radius: 12px;
  }

  .gift-dock-chip {
    padding: 3px 2px 2px;
    border-radius: 9px;
  }

  .gift-dock-chip-icon {
    width: 14px;
    height: 14px;
  }

  .gift-dock-chip-text {
    font-size: 0.55rem;
  }

  .gift-dock-btn {
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  .gift-dock-kicker {
    font-size: 0.56rem;
  }

  .gift-dock-note-link {
    font-size: 0.62rem;
  }
}

.gift-dock-error {
  margin: 0;
  font-size: 0.74rem;
  color: #c04060;
}

.gift-dock-compose-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gift-dock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
  border: none;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

/* Primary conversion — Send one back */
.gift-dock-btn--primary {
  background: linear-gradient(135deg, #f090b8 0%, #e86ca0 50%, #d65a8a 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(232, 108, 160, 0.24);
  margin-top: 0;
}

.gift-dock-btn--primary:hover {
  box-shadow: 0 6px 20px rgba(232, 108, 160, 0.4);
  transform: translateY(-1px);
}

/* Compose-only send (secondary to Send one back) */
.gift-dock-btn--compose-send {
  flex: 1;
  background: #fff;
  color: #c85080;
  border: 1.5px solid rgba(232, 108, 160, 0.4);
  box-shadow: 0 1px 4px rgba(232, 108, 160, 0.08);
}

.gift-dock-btn--compose-send:hover {
  background: #fff5f9;
}

.gift-dock-btn--compose-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gift-dock-btn--ghost-sm {
  flex: 0 0 auto;
  width: auto;
  padding: 10px 12px;
  background: transparent;
  color: #a07088;
  border: 1px solid rgba(200, 150, 170, 0.35);
  font-size: 0.78rem;
}

.gift-dock-btn--ghost-sm:hover {
  color: #c85080;
  border-color: rgba(232, 108, 160, 0.4);
}

/* Seal copy on soft cream bg */
.gift-open-seal {
  color: #6a4058;
}

.gift-open-seal-for {
  color: #c85080;
}

.gift-open-seal-from {
  color: #9a7080;
}

.gift-open-seal-title {
  color: #4a3040;
}

.gift-open-seal-hint {
  color: #c85080;
  border: 1px solid rgba(232, 108, 160, 0.28);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 10px rgba(232, 108, 160, 0.1);
}

/* legacy no-ops */
.gift-open-panel,
.gift-open-after,
.gift-open-react-block {
  display: contents;
}
.gift-open-mute {
  display: none;
}

@keyframes giftSealIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes giftSealOpen {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  55% {
    opacity: 0.85;
    transform: scale(1.06) rotate(-1deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.12) translateY(-12px);
  }
}

@keyframes giftRevealIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes giftCardPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes giftPetalFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(10px) rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-open-seal,
  .gift-open-seal-petals,
  .gift-open-stage,
  .gift-open-card,
  .gift-open-after {
    animation: none;
  }
}

/* BGM picker (sender side) */
.gc-bgm-picker {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(200, 120, 150, 0.14);
}

.gc-bgm-picker-head {
  margin-bottom: 0.65rem;
}

.gc-bgm-picker-label {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--db-text, #3a2430);
}

.gc-bgm-picker-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--db-text-muted, #8a6a76);
  line-height: 1.4;
}

.gc-bgm-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}

.gc-bgm-chip {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1.5px solid rgba(200, 120, 150, 0.18);
  background: rgba(255, 250, 252, 0.9);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s,
    transform 0.15s;
  color: inherit;
  font: inherit;
}

.gc-bgm-chip:hover {
  border-color: rgba(232, 108, 160, 0.4);
  transform: translateY(-1px);
}

.gc-bgm-chip--selected {
  border-color: rgba(232, 108, 160, 0.75);
  background: linear-gradient(
    145deg,
    rgba(255, 240, 246, 0.98),
    rgba(255, 228, 238, 0.95)
  );
  box-shadow: 0 4px 14px rgba(232, 108, 160, 0.12);
}

.gc-bgm-chip--playing {
  border-color: rgba(232, 108, 160, 0.9);
  box-shadow: 0 0 0 3px rgba(232, 108, 160, 0.18),
    0 4px 14px rgba(232, 108, 160, 0.16);
}

.gc-bgm-chip--playing .gc-bgm-chip-icon {
  background: rgba(232, 108, 160, 0.28);
  animation: gcBgmPulse 1.1s ease-in-out infinite;
}

@keyframes gcBgmPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gc-bgm-chip--playing .gc-bgm-chip-icon {
    animation: none;
  }
}

.gc-bgm-chip-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 108, 160, 0.12);
  color: #c44a80;
  font-size: 0.85rem;
  font-weight: 700;
}

.gc-bgm-chip-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.gc-bgm-chip-title {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--db-text, #3a2430);
}

.gc-bgm-chip-mood {
  font-size: 0.7rem;
  color: var(--db-text-muted, #8a6a76);
}

.gift-card-download-wrap {
  text-align: center;
  margin: 0.25rem auto 0.5rem;
  max-width: 420px;
}

.gift-card-download-btn {
  min-width: 220px;
}

.gift-card-download-hint {
  margin: 0.75rem 0 0;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  color: #6b2f45;
  line-height: 1.55;
  font-weight: 550;
  text-align: center;
  border-radius: 14px;
  background: linear-gradient(
    145deg,
    rgba(255, 246, 250, 0.98),
    rgba(255, 232, 242, 0.95)
  );
  border: 1.5px solid rgba(232, 108, 160, 0.28);
  box-shadow: 0 6px 16px rgba(200, 80, 130, 0.08);
}

.gift-card-download-hint a,
.gift-card-download-hint .gift-card-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.35rem 0.1rem 0.1rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #e86ca0, #d65a8a);
  color: #fff !important;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(214, 90, 138, 0.35);
  line-height: 1.2;
  vertical-align: baseline;
}

.gift-card-download-hint a:hover,
.gift-card-download-hint .gift-card-upgrade-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  text-decoration: none;
}

.gift-card-brand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.65rem auto 0;
  font-size: 0.82rem;
  color: #6a3a4a;
  font-weight: 550;
  cursor: pointer;
  user-select: none;
}

.gift-card-brand-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary, #e86ca0);
  cursor: pointer;
}

.gift-card-export-root {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.gift-card-export-stage {
  width: 1080px;
  height: 1920px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Tighter vertical frame so bouquet + card sit like AI full-scene cards */
  padding: 72px 64px 56px;
  position: relative;
  overflow: hidden;
  font-family: var(--font-nunito), var(--font-noto-sans-sc), 'Noto Sans SC', system-ui, sans-serif;
  
  background:
    radial-gradient(ellipse 90% 60% at 50% 18%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(165deg, #fce4ec 0%, #f8d4e0 40%, #faf0f2 100%);
  
  animation: none !important;
  background-size: 100% 100% !important;
}

.gift-card-export-stage.is-clean {
  padding-bottom: 72px;
}

.gift-card-export-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.45) 0 3%, transparent 12%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.35) 0 2.5%, transparent 10%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.25) 0 4%, transparent 14%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(255, 255, 255, 0.2), transparent 55%);
  opacity: 0.95;
}

.gift-card-export-bokeh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 28px at 12% 30%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(circle 18px at 88% 24%, rgba(255, 255, 255, 0.4), transparent 70%),
    radial-gradient(circle 36px at 78% 58%, rgba(255, 255, 255, 0.28), transparent 72%),
    radial-gradient(circle 22px at 20% 72%, rgba(255, 255, 255, 0.32), transparent 70%),
    radial-gradient(circle 14px at 55% 12%, rgba(255, 255, 255, 0.45), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

.gift-card-export-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Bouquet + card fill most of the canvas like AI full-scene cards */
  justify-content: center;
  gap: 28px;
  min-height: 0;
  padding: 8px 0 20px;
}

.gift-card-export-bouquet {
  width: 100%;
  max-width: 960px;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  max-height: 62%;
}

.gift-card-export-bouquet-img {
  display: block;
  width: 100%;
  max-width: 920px;
  height: auto;
  max-height: 1120px;
  object-fit: contain;
  background: transparent !important;
  
  filter: drop-shadow(0 28px 48px rgba(90, 40, 60, 0.16))
    drop-shadow(0 6px 14px rgba(90, 40, 60, 0.08));
}

.gift-card-export-scene {
  width: 720px;
  height: 640px;
  position: relative;
  transform: scale(1.38);
  transform-origin: center center;
}

.gift-card-export-bouquet-fallback {
  font-size: 160px;
  line-height: 1;
  opacity: 0.85;
}

.gift-card-export-card {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  transform: none;
  transform-origin: center center;
  margin: 0;
  filter: drop-shadow(0 18px 36px rgba(60, 30, 40, 0.18));
  /* Export is 1080×1920 — multiply adaptive rem sizes for the big canvas */
  --card-type-boost: 1.65;
}

.gift-card-export-card .card-inner,
.gift-card-export-card .rendered-card {
  animation: none !important;
  transform: none !important;
  /* Larger stationery — closer to AI gift-card note proportions */
  width: 460px !important;
  min-height: 400px !important;
  padding: 40px 36px 34px !important;
}

.gift-card-export-card .card-to {
  font-size: calc(var(--card-to-size, 1.65rem) * var(--card-type-boost, 1.65)) !important;
  margin-bottom: 18px !important;
}

.gift-card-export-card .card-message {
  font-size: calc(var(--card-msg-size, 1.2rem) * var(--card-type-boost, 1.65)) !important;
  line-height: 1.7 !important;
  padding: 18px 6px !important;
}

.gift-card-export-card .card-from {
  font-size: calc(var(--card-from-size, 1.55rem) * var(--card-type-boost, 1.65)) !important;
  margin-top: 18px !important;
}

.gift-card-export-footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
  padding: 14px 18px 14px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 6px 22px rgba(90, 40, 60, 0.09);
  width: min(760px, 100%);
  align-self: center;
  backdrop-filter: blur(10px);
}

.gift-card-export-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.gift-card-export-flower {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.gift-card-export-wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gift-card-export-name {
  font-family: var(--font-great-vibes), Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: #3a3a4a;
  white-space: nowrap;
}

.gift-card-export-name em {
  font-style: normal;
  color: #e86ca0;
}

.gift-card-export-tagline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #7a7a8a;
  text-transform: uppercase;
}

.gift-card-export-qr {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(232, 108, 160, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.gift-card-export-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gift-card-export-qr-placeholder {
  width: 40px;
  height: 40px;
  background: repeating-linear-gradient(
    45deg,
    #f5e6ec,
    #f5e6ec 5px,
    #fff 5px,
    #fff 10px
  );
}

.gift-card-export-stage.bg-soft-blush {
  background:
    radial-gradient(ellipse 90% 55% at 50% 15%, rgba(255, 255, 255, 0.65), transparent 68%),
    linear-gradient(165deg, #fde8ef 0%, #f8c5d4 42%, #faf2f4 100%) !important;
}

.gift-card-export-stage.bg-lavender-dream {
  background:
    radial-gradient(ellipse 90% 55% at 50% 15%, rgba(255, 255, 255, 0.55), transparent 68%),
    linear-gradient(165deg, #f3e8f8 0%, #e0c4ee 45%, #f6f0fa 100%) !important;
}

.gift-card-export-stage.bg-golden-hour {
  background:
    radial-gradient(ellipse 90% 55% at 50% 15%, rgba(255, 255, 255, 0.5), transparent 68%),
    linear-gradient(165deg, #fff6e8 0%, #ffd9a8 45%, #fff8f0 100%) !important;
}

.gift-card-export-stage.bg-spring-meadow {
  background:
    radial-gradient(ellipse 90% 55% at 50% 15%, rgba(255, 255, 255, 0.55), transparent 68%),
    linear-gradient(165deg, #eef8ee 0%, #c8e6c9 45%, #f4faf4 100%) !important;
}

.gift-card-export-stage.bg-rose-mist {
  background:
    radial-gradient(ellipse 90% 55% at 50% 15%, rgba(255, 255, 255, 0.5), transparent 68%),
    linear-gradient(165deg, #f8e8f0 0%, #e8b0c8 45%, #faf0f4 100%) !important;
}

.gift-card-export-stage.bg-cherry-blossom {
  background:
    radial-gradient(ellipse 90% 55% at 50% 15%, rgba(255, 255, 255, 0.55), transparent 68%),
    linear-gradient(165deg, #fce4ec 0%, #f48fb1 42%, #fdf2f6 100%) !important;
}

.gift-card-export-stage.bg-ocean-breeze {
  background:
    radial-gradient(ellipse 90% 55% at 50% 15%, rgba(255, 255, 255, 0.5), transparent 68%),
    linear-gradient(165deg, #e0f2f1 0%, #80cbc4 45%, #f0faf9 100%) !important;
}

.gift-card-export-stage.bg-sunset-glow {
  background:
    radial-gradient(ellipse 90% 55% at 50% 15%, rgba(255, 255, 255, 0.45), transparent 68%),
    linear-gradient(165deg, #fff3e0 0%, #ffab91 45%, #fff6f0 100%) !important;
}

.gift-card-export-stage.bg-midnight-garden,
.gift-card-export-stage.bg-starlit {
  background:
    radial-gradient(ellipse 90% 55% at 50% 20%, rgba(80, 90, 140, 0.35), transparent 65%),
    linear-gradient(165deg, #1a1a2e 0%, #16213e 50%, #0f1428 100%) !important;
}

.gift-card-export-stage.bg-midnight-garden .gift-card-export-footer,
.gift-card-export-stage.bg-starlit .gift-card-export-footer {
  background: rgba(20, 24, 40, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
}

.gift-card-export-stage.bg-midnight-garden .gift-card-export-name,
.gift-card-export-stage.bg-starlit .gift-card-export-name {
  color: #f2e8f0;
}

.gift-card-export-stage.bg-midnight-garden .gift-card-export-name em,
.gift-card-export-stage.bg-starlit .gift-card-export-name em {
  color: #f0a8c8;
}

.gift-card-export-stage.bg-midnight-garden .gift-card-export-tagline,
.gift-card-export-stage.bg-starlit .gift-card-export-tagline {
  color: rgba(200, 176, 192, 0.9);
}

.share-link-box {display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: stretch;
  max-width: 500px;
  margin: 0 auto 15px;}

.share-link-box input {grid-column: 1;
  grid-row: 1;
  flex: 1 1;
  font-family: var(--font-nunito), var(--font-noto-sans-sc), 'Noto Sans SC', sans-serif;
  font-size: 0.85rem;
  padding: 12px 16px;
  border: 2px solid #e8e0e8;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  outline: none;}

.btn-copy {grid-column: 2;
  grid-row: 1;
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;}

.btn-copy:hover {background: var(--primary-dark);}

.share-link-box .btn {flex: 0 0 auto;
  white-space: nowrap;}

.btn-restart {grid-column: 1/-1;
  grid-row: 2;
  justify-self: center;
  max-width: 300px;
  background: var(--primary);
  color: #fff;
  border: 2px solid #e8e0e8;
  padding: 12px 20px;}

.btn-restart:hover {background: #f8f0f5;
  border-color: var(--primary-light);
  color: var(--primary);}

.copy-feedback {font-size: 0.85rem;
  color: var(--accent-dark);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s;
  margin-bottom: 20px;}

.copy-feedback.visible {opacity: 1;}

.bouquet-scene {position: relative;
  width: 540px;
  min-height: 520px;
  margin: 0 auto;
  padding: 12px 0 8px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;}

.bouquet-greenery-layer {position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  /* Wider than the flower crown so leaves read as a full backdrop. */
  width: 118%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;}

.greenery-base-img {width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: center bottom;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  filter: saturate(1.2) contrast(1.04) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));}

/*
 * Guide-circle box — square cluster on the lower-middle greenery crown
 * (matches the red-circle guide). Blooms pave the rim, then inward.
 * Keep square (aspect-ratio) so x%/y% stay a true circle, not an ellipse.
 */
.bouquet-flower-cluster {position: absolute;
  left: 50%;
  /* Nest crown into greenery head (hand-tied, not floating above leaves). */
  bottom: 111px;
  transform: translateX(-50%);
  /* Wider head so dense packing fills the greenery crown. */
  width: 52%;
  aspect-ratio: 1 / 1;
  height: auto;
  z-index: 10;
  margin: 0;
  overflow: visible;
  pointer-events: none;}

.bouquet-flower-item {position: absolute;
  display: block;
  width: max-content;
  height: max-content;
  margin: 0;
  padding: 0;
  pointer-events: auto;
  will-change: transform;}

.bouquet-flower-item:first-child {margin-left: 0;}

.bouquet-flower-img {position: relative;
  display: block;
  max-width: none;
  height: auto;
  object-fit: contain;
  transition: filter 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: saturate(1.38) contrast(1.07) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.14));
  animation: flowerFadeIn 0.45s ease backwards;}

.bouquet-flower-img:hover {filter: saturate(1.42) contrast(1.09) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));}

.flower-size-small {width: 104px;
  height: 104px;
  max-width: none;}

.flower-size-medium {width: 128px;
  height: 128px;
  max-width: none;}

.flower-size-large {width: 152px;
  height: 152px;
  max-width: none;}

.bouquet-detail-overlay {display: none;}

.detail-overlay-img {display: none;}

.ready-bouquet-scene {display: flex;
  justify-content: center;
  margin: 12px 0 20px;}

.ready-bouquet-wrapper {position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;}

.ready-bouquet {position: relative;
  max-width: 500px;
  width: 100%;}

.ready-card {position: relative;
  margin-top: 8px;
  perspective: 600px;
  animation: cardPeekOut 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
  animation-delay: 0.4s;}

/* Creator result: left actions + right full card (same as AI workspace) */
.classic-ready-layout {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.classic-ready-actions {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

.classic-ready-preview-col {
  width: 100%;
  display: flex;
  justify-content: center;
}

.classic-ready-preview {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding: 0;
}

.classic-ready-footer {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.classic-ready-footer .btn-restart {
  width: 100%;
  max-width: none;
}

.classic-card-preview-shell {
  position: relative;
  width: 100%;
  max-width: min(340px, 92vw);
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 16px 40px rgba(90, 40, 60, 0.16),
    0 4px 12px rgba(90, 40, 60, 0.08);
  background: #faf0f2;
  line-height: 0;
}

.classic-card-preview-scaler {
  transform-origin: top left;
  will-change: transform;
}

.classic-card-preview-shell--reveal {
  max-width: min(92vw, 420px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
  border-radius: 24px;
}

.classic-reveal-card {
  width: min(92vw, 420px);
  max-width: min(92vw, 420px);
  max-height: min(82vh, 780px);
  background: transparent;
  overflow: visible;
}

.classic-reveal-card .classic-card-preview-shell {
  max-height: min(82vh, 780px);
}

/* Classic ready page — share panel mirrors AI result share block */
.classic-share-panel {
  width: 100%;
  margin: 0;
  padding: 16px 16px 14px;
  border: 1px solid rgba(232, 108, 160, 0.28);
  border-radius: 20px;
  background: rgba(255, 250, 247, 0.92);
  box-shadow: 0 10px 24px rgba(122, 74, 92, 0.08);
  text-align: left;
}

.classic-share-panel h3 {
  margin: 0 0 12px;
  color: #3a3a4a;
  font-family: var(--font-cormorant), Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
}

.classic-share-box {
  max-width: none !important;
  margin: 0 !important;
  width: 100%;
}

.classic-share-qr-area {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.classic-share-qr-preview {
  width: 112px;
  height: 112px;
  padding: 6px;
  border: 1px solid rgba(232, 108, 160, 0.22);
  border-radius: 14px;
  background: #fff;
}

.classic-share-qr-btn {
  width: auto;
  max-width: 11rem;
  margin: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 0;
  border-radius: 999px;
  justify-self: start;
}

.classic-share-hint {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: #a07080;
  line-height: 1.4;
}

.classic-saved-note {
  text-align: center;
  margin: 8px auto 0;
}

@media (max-width: 420px) {
  .classic-share-qr-area {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .classic-share-panel h3,
  .classic-share-hint {
    text-align: center;
  }
}

.ready-card .card-inner {width: 240px;
  min-height: 230px;
  padding: 26px 22px 22px;
  transform: rotateX(4deg) rotate(-2deg);
  transform-origin: top center;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 6px 12px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.08),
    0 30px 60px rgba(0, 0, 0, 0.06);
  border-top: none;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 0.4s ease;}

.ready-card:hover .card-inner {transform: rotateX(0deg) rotate(-1deg) translateY(-6px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 12px 20px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.1),
    0 40px 80px rgba(0, 0, 0, 0.06),
    0 0 40px rgba(232, 108, 160, 0.08);}

/* Keep adaptive vars; only slightly dampen on smaller ready/reveal cards */
.ready-card .card-from,
.ready-card .card-to,
.reveal-card .card-from,
.reveal-card .card-to {
  font-size: calc(var(--card-to-size, 1.55rem) * 0.92);
}

.ready-card .card-from,
.reveal-card .card-from {
  font-size: calc(var(--card-from-size, 1.45rem) * 0.92);
}

.ready-card .card-message,
.reveal-card .card-message {
  font-size: calc(var(--card-msg-size, 1.12rem) * 0.95);
  line-height: 1.6;
}

.reveal-container {text-align: center;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px;
  position: relative;
  z-index: 1;}

.reveal-header {margin-bottom: 20px;
  animation: fadeSlideIn 0.8s ease;}

.reveal-title {font-size: 2.8rem;
  margin-bottom: 8px;}

.reveal-subtitle {font-size: 1.1rem;
  color: var(--text-light);}

.reveal-bouquet-scene {display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  transform: translateY(30px);}

.reveal-bouquet-scene.visible {opacity: 1;
  transform: translateY(0);}

.reveal-actions {display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  --reveal-cta-bg: rgba(255, 236, 245, 0.38);
  --reveal-cta-border: rgba(132, 84, 107, 0.24);
  --reveal-cta-text: #734a62;
  --reveal-cta-shadow: 0 4px 14px rgba(121, 79, 104, 0.14);
  --reveal-cta-hover-bg: rgba(255, 239, 247, 0.5);
  --reveal-cta-hover-border: rgba(124, 77, 100, 0.32);
  --reveal-cta-focus-ring: rgba(139, 88, 113, 0.28);}

.bg-midnight-garden .reveal-actions,
.bg-starlit .reveal-actions {--reveal-cta-bg: rgba(233, 223, 241, 0.14);
  --reveal-cta-border: rgba(233, 220, 240, 0.32);
  --reveal-cta-text: #e9d8ef;
  --reveal-cta-shadow: 0 6px 18px rgba(7, 12, 24, 0.28);
  --reveal-cta-hover-bg: rgba(236, 227, 244, 0.2);
  --reveal-cta-hover-border: rgba(236, 228, 244, 0.44);
  --reveal-cta-focus-ring: rgba(239, 231, 245, 0.34);}

.reveal-create-link.btn-next {display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--reveal-cta-bg);
  border: 1px solid var(--reveal-cta-border);
  color: var(--reveal-cta-text);
  box-shadow: var(--reveal-cta-shadow);
  text-shadow: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);}

.reveal-create-link.btn-next:hover:not(:disabled) {background: var(--reveal-cta-hover-bg);
  border-color: var(--reveal-cta-hover-border);
  color: var(--reveal-cta-text);
  box-shadow: var(--reveal-cta-shadow);
  transform: translateY(-1px);}

.reveal-create-link:focus-visible {outline: none;
  box-shadow:
    0 0 0 3px var(--reveal-cta-focus-ring),
    var(--reveal-cta-shadow);}

.reveal-bouquet-wrapper {position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;}

.reveal-bouquet {position: relative;
  max-width: 500px;
  width: 100%;}

.reveal-card {position: relative;
  margin-top: 28px;
  perspective: 600px;
  animation: cardPeekOut 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
  animation-delay: 0.6s;}

.reveal-card .card-inner {width: 300px;
  min-height: 310px;
  padding: 32px 26px;
  transform: rotateX(4deg) rotate(2deg);
  transform-origin: top center;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 6px 12px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.08),
    0 30px 60px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 0.4s ease;}

.reveal-card:hover .card-inner {transform: rotateX(0deg) rotate(1deg) translateY(-6px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 12px 20px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.1),
    0 40px 80px rgba(0, 0, 0, 0.06),
    0 0 40px rgba(232, 108, 160, 0.08);}

.card-effect-svg,
.card-torn-effect {position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;}

.torn-edge {position: absolute;
  background: inherit;
  filter: drop-shadow(0 1px 2px rgba(100, 60, 20, 0.15));}

.torn-edge-top {top: -6px;
  left: -2px;
  right: -2px;
  height: 12px;
  -webkit-clip-path: polygon(
    0 100%,
    2% 55%,
    4% 80%,
    6% 40%,
    8% 70%,
    10% 30%,
    12% 65%,
    14% 45%,
    16% 75%,
    18% 35%,
    20% 60%,
    22% 25%,
    24% 55%,
    26% 40%,
    28% 70%,
    30% 20%,
    32% 60%,
    34% 45%,
    36% 80%,
    38% 30%,
    40% 55%,
    42% 40%,
    44% 70%,
    46% 25%,
    48% 65%,
    50% 35%,
    52% 55%,
    54% 45%,
    56% 75%,
    58% 30%,
    60% 60%,
    62% 40%,
    64% 70%,
    66% 20%,
    68% 55%,
    70% 40%,
    72% 65%,
    74% 30%,
    76% 55%,
    78% 45%,
    80% 75%,
    82% 35%,
    84% 60%,
    86% 25%,
    88% 50%,
    90% 40%,
    92% 70%,
    94% 30%,
    96% 55%,
    98% 45%,
    100% 100%
  );
  clip-path: polygon(
    0 100%,
    2% 55%,
    4% 80%,
    6% 40%,
    8% 70%,
    10% 30%,
    12% 65%,
    14% 45%,
    16% 75%,
    18% 35%,
    20% 60%,
    22% 25%,
    24% 55%,
    26% 40%,
    28% 70%,
    30% 20%,
    32% 60%,
    34% 45%,
    36% 80%,
    38% 30%,
    40% 55%,
    42% 40%,
    44% 70%,
    46% 25%,
    48% 65%,
    50% 35%,
    52% 55%,
    54% 45%,
    56% 75%,
    58% 30%,
    60% 60%,
    62% 40%,
    64% 70%,
    66% 20%,
    68% 55%,
    70% 40%,
    72% 65%,
    74% 30%,
    76% 55%,
    78% 45%,
    80% 75%,
    82% 35%,
    84% 60%,
    86% 25%,
    88% 50%,
    90% 40%,
    92% 70%,
    94% 30%,
    96% 55%,
    98% 45%,
    100% 100%
  );
  background: linear-gradient(
    180deg,
    rgba(160, 120, 80, 0.12),
    rgba(160, 120, 80, 0.04)
  );}

.torn-edge-bottom {bottom: -6px;
  left: -2px;
  right: -2px;
  height: 12px;
  -webkit-clip-path: polygon(
    0 0,
    2% 50%,
    4% 20%,
    6% 60%,
    8% 30%,
    10% 70%,
    12% 35%,
    14% 55%,
    16% 25%,
    18% 65%,
    20% 40%,
    22% 75%,
    24% 45%,
    26% 60%,
    28% 30%,
    30% 80%,
    32% 40%,
    34% 55%,
    36% 20%,
    38% 70%,
    40% 45%,
    42% 60%,
    44% 30%,
    46% 75%,
    48% 35%,
    50% 65%,
    52% 45%,
    54% 55%,
    56% 25%,
    58% 70%,
    60% 40%,
    62% 60%,
    64% 30%,
    66% 80%,
    68% 45%,
    70% 60%,
    72% 35%,
    74% 70%,
    76% 45%,
    78% 55%,
    80% 25%,
    82% 65%,
    84% 40%,
    86% 75%,
    88% 50%,
    90% 60%,
    92% 30%,
    94% 70%,
    96% 45%,
    98% 55%,
    100% 0
  );
  clip-path: polygon(
    0 0,
    2% 50%,
    4% 20%,
    6% 60%,
    8% 30%,
    10% 70%,
    12% 35%,
    14% 55%,
    16% 25%,
    18% 65%,
    20% 40%,
    22% 75%,
    24% 45%,
    26% 60%,
    28% 30%,
    30% 80%,
    32% 40%,
    34% 55%,
    36% 20%,
    38% 70%,
    40% 45%,
    42% 60%,
    44% 30%,
    46% 75%,
    48% 35%,
    50% 65%,
    52% 45%,
    54% 55%,
    56% 25%,
    58% 70%,
    60% 40%,
    62% 60%,
    64% 30%,
    66% 80%,
    68% 45%,
    70% 60%,
    72% 35%,
    74% 70%,
    76% 45%,
    78% 55%,
    80% 25%,
    82% 65%,
    84% 40%,
    86% 75%,
    88% 50%,
    90% 60%,
    92% 30%,
    94% 70%,
    96% 45%,
    98% 55%,
    100% 0
  );
  background: linear-gradient(
    0deg,
    rgba(160, 120, 80, 0.12),
    rgba(160, 120, 80, 0.04)
  );}

.torn-edge-left {left: -5px;
  top: -2px;
  bottom: -2px;
  width: 10px;
  -webkit-clip-path: polygon(
    100% 0,
    50% 2%,
    75% 5%,
    35% 8%,
    60% 11%,
    30% 14%,
    55% 17%,
    40% 20%,
    70% 23%,
    25% 26%,
    55% 29%,
    40% 32%,
    65% 35%,
    30% 38%,
    50% 41%,
    35% 44%,
    60% 47%,
    25% 50%,
    55% 53%,
    40% 56%,
    70% 59%,
    30% 62%,
    50% 65%,
    35% 68%,
    65% 71%,
    25% 74%,
    55% 77%,
    40% 80%,
    60% 83%,
    30% 86%,
    50% 89%,
    40% 92%,
    65% 95%,
    35% 98%,
    100% 100%
  );
  clip-path: polygon(
    100% 0,
    50% 2%,
    75% 5%,
    35% 8%,
    60% 11%,
    30% 14%,
    55% 17%,
    40% 20%,
    70% 23%,
    25% 26%,
    55% 29%,
    40% 32%,
    65% 35%,
    30% 38%,
    50% 41%,
    35% 44%,
    60% 47%,
    25% 50%,
    55% 53%,
    40% 56%,
    70% 59%,
    30% 62%,
    50% 65%,
    35% 68%,
    65% 71%,
    25% 74%,
    55% 77%,
    40% 80%,
    60% 83%,
    30% 86%,
    50% 89%,
    40% 92%,
    65% 95%,
    35% 98%,
    100% 100%
  );
  background: linear-gradient(
    90deg,
    rgba(160, 120, 80, 0.1),
    rgba(160, 120, 80, 0.02)
  );}

.torn-edge-right {right: -5px;
  top: -2px;
  bottom: -2px;
  width: 10px;
  -webkit-clip-path: polygon(
    0 0,
    50% 3%,
    25% 6%,
    65% 9%,
    40% 12%,
    70% 15%,
    45% 18%,
    60% 21%,
    30% 24%,
    75% 27%,
    45% 30%,
    60% 33%,
    35% 36%,
    70% 39%,
    50% 42%,
    65% 45%,
    40% 48%,
    75% 51%,
    45% 54%,
    60% 57%,
    30% 60%,
    70% 63%,
    50% 66%,
    65% 69%,
    35% 72%,
    75% 75%,
    45% 78%,
    60% 81%,
    40% 84%,
    70% 87%,
    50% 90%,
    60% 93%,
    35% 96%,
    65% 99%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    50% 3%,
    25% 6%,
    65% 9%,
    40% 12%,
    70% 15%,
    45% 18%,
    60% 21%,
    30% 24%,
    75% 27%,
    45% 30%,
    60% 33%,
    35% 36%,
    70% 39%,
    50% 42%,
    65% 45%,
    40% 48%,
    75% 51%,
    45% 54%,
    60% 57%,
    30% 60%,
    70% 63%,
    50% 66%,
    65% 69%,
    35% 72%,
    75% 75%,
    45% 78%,
    60% 81%,
    40% 84%,
    70% 87%,
    50% 90%,
    60% 93%,
    35% 96%,
    65% 99%,
    0 100%
  );
  background: linear-gradient(
    270deg,
    rgba(160, 120, 80, 0.1),
    rgba(160, 120, 80, 0.02)
  );}

.card-inner:has(.card-torn-effect) {border-radius: 0;
  -webkit-clip-path: polygon(
    1% 1.5%,
    3% 0.5%,
    5% 1.8%,
    7% 0.3%,
    9% 1.2%,
    11% 0.6%,
    13% 1.5%,
    15% 0.4%,
    17% 1.3%,
    19% 0.8%,
    21% 1.6%,
    23% 0.2%,
    25% 1.4%,
    27% 0.5%,
    29% 1.7%,
    31% 0.3%,
    33% 1.1%,
    35% 0.6%,
    37% 1.5%,
    39% 0.4%,
    41% 1.3%,
    43% 0.7%,
    45% 1.6%,
    47% 0.2%,
    49% 1.4%,
    51% 0.5%,
    53% 1.8%,
    55% 0.3%,
    57% 1.2%,
    59% 0.6%,
    61% 1.5%,
    63% 0.4%,
    65% 1.3%,
    67% 0.8%,
    69% 1.6%,
    71% 0.2%,
    73% 1.4%,
    75% 0.5%,
    77% 1.7%,
    79% 0.3%,
    81% 1.1%,
    83% 0.7%,
    85% 1.5%,
    87% 0.4%,
    89% 1.3%,
    91% 0.6%,
    93% 1.5%,
    95% 0.3%,
    97% 1.2%,
    99% 0.8%,
    99.5% 3%,
    98.8% 6%,
    99.3% 9%,
    98.5% 12%,
    99.2% 15%,
    98.7% 18%,
    99.4% 21%,
    98.6% 24%,
    99.1% 27%,
    98.8% 30%,
    99.5% 33%,
    98.4% 36%,
    99.2% 39%,
    98.7% 42%,
    99.3% 45%,
    98.5% 48%,
    99.1% 51%,
    98.8% 54%,
    99.4% 57%,
    98.6% 60%,
    99.2% 63%,
    98.5% 66%,
    99.3% 69%,
    98.7% 72%,
    99.1% 75%,
    98.8% 78%,
    99.5% 81%,
    98.4% 84%,
    99.2% 87%,
    98.7% 90%,
    99.3% 93%,
    98.5% 96%,
    99% 99%,
    97% 99.2%,
    95% 98.5%,
    93% 99.5%,
    91% 98.3%,
    89% 99.1%,
    87% 98.6%,
    85% 99.4%,
    83% 98.5%,
    81% 99.2%,
    79% 98.7%,
    77% 99.3%,
    75% 98.4%,
    73% 99.5%,
    71% 98.3%,
    69% 99.1%,
    67% 98.6%,
    65% 99.4%,
    63% 98.5%,
    61% 99.2%,
    59% 98.7%,
    57% 99.3%,
    55% 98.4%,
    53% 99.5%,
    51% 98.3%,
    49% 99.1%,
    47% 98.6%,
    45% 99.4%,
    43% 98.5%,
    41% 99.2%,
    39% 98.7%,
    37% 99.3%,
    35% 98.4%,
    33% 99.5%,
    31% 98.3%,
    29% 99.1%,
    27% 98.6%,
    25% 99.4%,
    23% 98.5%,
    21% 99.2%,
    19% 98.7%,
    17% 99.3%,
    15% 98.4%,
    13% 99.5%,
    11% 98.3%,
    9% 99.1%,
    7% 98.6%,
    5% 99.4%,
    3% 98.5%,
    1% 99%,
    0.5% 97%,
    1.2% 94%,
    0.7% 91%,
    1.5% 88%,
    0.8% 85%,
    1.3% 82%,
    0.6% 79%,
    1.4% 76%,
    0.9% 73%,
    1.2% 70%,
    0.5% 67%,
    1.6% 64%,
    0.8% 61%,
    1.3% 58%,
    0.7% 55%,
    1.5% 52%,
    0.9% 49%,
    1.2% 46%,
    0.6% 43%,
    1.4% 40%,
    0.8% 37%,
    1.5% 34%,
    0.7% 31%,
    1.3% 28%,
    0.9% 25%,
    1.2% 22%,
    0.5% 19%,
    1.6% 16%,
    0.8% 13%,
    1.3% 10%,
    0.7% 7%,
    1.5% 4%
  );
  clip-path: polygon(
    1% 1.5%,
    3% 0.5%,
    5% 1.8%,
    7% 0.3%,
    9% 1.2%,
    11% 0.6%,
    13% 1.5%,
    15% 0.4%,
    17% 1.3%,
    19% 0.8%,
    21% 1.6%,
    23% 0.2%,
    25% 1.4%,
    27% 0.5%,
    29% 1.7%,
    31% 0.3%,
    33% 1.1%,
    35% 0.6%,
    37% 1.5%,
    39% 0.4%,
    41% 1.3%,
    43% 0.7%,
    45% 1.6%,
    47% 0.2%,
    49% 1.4%,
    51% 0.5%,
    53% 1.8%,
    55% 0.3%,
    57% 1.2%,
    59% 0.6%,
    61% 1.5%,
    63% 0.4%,
    65% 1.3%,
    67% 0.8%,
    69% 1.6%,
    71% 0.2%,
    73% 1.4%,
    75% 0.5%,
    77% 1.7%,
    79% 0.3%,
    81% 1.1%,
    83% 0.7%,
    85% 1.5%,
    87% 0.4%,
    89% 1.3%,
    91% 0.6%,
    93% 1.5%,
    95% 0.3%,
    97% 1.2%,
    99% 0.8%,
    99.5% 3%,
    98.8% 6%,
    99.3% 9%,
    98.5% 12%,
    99.2% 15%,
    98.7% 18%,
    99.4% 21%,
    98.6% 24%,
    99.1% 27%,
    98.8% 30%,
    99.5% 33%,
    98.4% 36%,
    99.2% 39%,
    98.7% 42%,
    99.3% 45%,
    98.5% 48%,
    99.1% 51%,
    98.8% 54%,
    99.4% 57%,
    98.6% 60%,
    99.2% 63%,
    98.5% 66%,
    99.3% 69%,
    98.7% 72%,
    99.1% 75%,
    98.8% 78%,
    99.5% 81%,
    98.4% 84%,
    99.2% 87%,
    98.7% 90%,
    99.3% 93%,
    98.5% 96%,
    99% 99%,
    97% 99.2%,
    95% 98.5%,
    93% 99.5%,
    91% 98.3%,
    89% 99.1%,
    87% 98.6%,
    85% 99.4%,
    83% 98.5%,
    81% 99.2%,
    79% 98.7%,
    77% 99.3%,
    75% 98.4%,
    73% 99.5%,
    71% 98.3%,
    69% 99.1%,
    67% 98.6%,
    65% 99.4%,
    63% 98.5%,
    61% 99.2%,
    59% 98.7%,
    57% 99.3%,
    55% 98.4%,
    53% 99.5%,
    51% 98.3%,
    49% 99.1%,
    47% 98.6%,
    45% 99.4%,
    43% 98.5%,
    41% 99.2%,
    39% 98.7%,
    37% 99.3%,
    35% 98.4%,
    33% 99.5%,
    31% 98.3%,
    29% 99.1%,
    27% 98.6%,
    25% 99.4%,
    23% 98.5%,
    21% 99.2%,
    19% 98.7%,
    17% 99.3%,
    15% 98.4%,
    13% 99.5%,
    11% 98.3%,
    9% 99.1%,
    7% 98.6%,
    5% 99.4%,
    3% 98.5%,
    1% 99%,
    0.5% 97%,
    1.2% 94%,
    0.7% 91%,
    1.5% 88%,
    0.8% 85%,
    1.3% 82%,
    0.6% 79%,
    1.4% 76%,
    0.9% 73%,
    1.2% 70%,
    0.5% 67%,
    1.6% 64%,
    0.8% 61%,
    1.3% 58%,
    0.7% 55%,
    1.5% 52%,
    0.9% 49%,
    1.2% 46%,
    0.6% 43%,
    1.4% 40%,
    0.8% 37%,
    1.5% 34%,
    0.7% 31%,
    1.3% 28%,
    0.9% 25%,
    1.2% 22%,
    0.5% 19%,
    1.6% 16%,
    0.8% 13%,
    1.3% 10%,
    0.7% 7%,
    1.5% 4%
  );
  box-shadow:
    2px 3px 12px rgba(100, 70, 40, 0.18),
    -1px -1px 6px rgba(100, 70, 40, 0.08);}

.card-burn-effect {box-shadow:
    inset 0 0 30px rgba(80, 40, 0, 0.3),
    inset 6px 6px 15px rgba(80, 40, 0, 0.18),
    inset -6px -6px 15px rgba(80, 40, 0, 0.18);
  pointer-events: none;
  z-index: 0;}

.card-burn-effect,
.card-burn-effect:before {position: absolute;
  inset: 0;
  border-radius: inherit;}

.card-burn-effect:before {content: '';
  background:
    radial-gradient(ellipse at 0 0, rgba(60, 20, 0, 0.35) 0, transparent 45%),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(60, 20, 0, 0.3) 0,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 100% 0,
      rgba(80, 40, 0, 0.15) 0,
      transparent 35%
    ),
    radial-gradient(ellipse at 0 100%, rgba(80, 40, 0, 0.2) 0, transparent 35%);}

.card-shimmer-effect {position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;}

.card-shimmer-effect:before {content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 25%,
    rgba(255, 220, 180, 0.08) 38%,
    rgba(255, 200, 150, 0.25) 48%,
    hsla(0, 0%, 100%, 0.35) 50%,
    rgba(255, 200, 150, 0.25) 52%,
    rgba(255, 220, 180, 0.08) 62%,
    transparent 75%
  );
  animation: shimmer 3s ease-in-out infinite;}

.card-watercolor-effect {inset: -10px;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at 15% 25%,
      rgba(120, 140, 220, 0.18) 0,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 85% 65%,
      rgba(180, 120, 220, 0.14) 0,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 85%,
      rgba(100, 180, 220, 0.12) 0,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 70% 20%,
      rgba(200, 140, 180, 0.08) 0,
      transparent 35%
    );
  filter: blur(5px);}

.card-stars-effect,
.card-watercolor-effect {position: absolute;
  pointer-events: none;
  z-index: 0;}

.card-stars-effect {inset: 0;
  background:
    radial-gradient(
      2px 2px at 15% 20%,
      rgba(255, 255, 200, 0.8) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 45% 40%,
      rgba(255, 255, 200, 0.6) 50%,
      transparent 100%
    ),
    radial-gradient(
      2.5px 2.5px at 70% 15%,
      rgba(255, 255, 220, 0.9) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 85% 55%,
      rgba(255, 255, 200, 0.6) 50%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 30% 70%,
      rgba(255, 255, 200, 0.5) 50%,
      transparent 100%
    ),
    radial-gradient(
      2.5px 2.5px at 60% 80%,
      rgba(255, 255, 220, 0.8) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 10% 85%,
      rgba(255, 255, 200, 0.5) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 90% 30%,
      rgba(255, 255, 200, 0.5) 50%,
      transparent 100%
    ),
    radial-gradient(
      3px 3px at 50% 10%,
      rgba(255, 255, 220, 0.7) 50%,
      transparent 100%
    ),
    radial-gradient(
      1px 1px at 25% 50%,
      rgba(255, 255, 200, 0.4) 50%,
      transparent 100%
    );
  animation: starsTwinkle 4s ease-in-out infinite alternate;}

.card-botanical-effect {inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 0 0, rgba(80, 160, 80, 0.15) 0, transparent 45%),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(80, 160, 80, 0.12) 0,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(100, 180, 100, 0.04) 0,
      transparent 60%
    );}

.card-botanical-effect,
.sparkle {position: absolute;
  pointer-events: none;
  z-index: 0;}

.sparkle {width: 6px;
  height: 6px;
  background: var(--primary-light);
  border-radius: 50%;
  animation: sparkle 3s ease-in-out infinite;}

.sparkle:nth-child(odd) {background: var(--accent);
  width: 4px;
  height: 4px;}

.sparkle:nth-child(3n) {background: #f4c542;
  width: 5px;
  height: 5px;}

.bg-template-grid {display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 30px;}

.bg-template-option {background: var(--bg-card);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: 0 2px 12px var(--shadow);
  transition: all 0.3s ease;
  animation: popIn 0.4s ease backwards;
  position: relative;}

.bg-template-option:hover {transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-md);}

.bg-template-option.selected {border-color: var(--primary);
  background: linear-gradient(135deg, #fff5f8, #fff);}

.bg-preview-swatch {width: 100%;
  height: 80px;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);}

.bg-option-name {font-weight: 600;
  font-size: 0.85rem;}

.bg-animated-badge {display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(232, 108, 160, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;}

#step6.step-active[class*='bg-'] {position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  padding: 40px 20px;
  display: block;
  text-align: center;}

.ready-view-shell {position: relative;
  z-index: 1;
  width: min(100%, 900px);
  min-height: calc(100vh - 80px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;}

.bg-soft-blush {background: linear-gradient(160deg, #fce4ec, #f8bbd0, #fce4ec) !important;
  background-size: 300% 300% !important;
  animation: gradientShift 8s ease infinite !important;}

.bg-midnight-garden {background: linear-gradient(
    160deg,
    #1a1a2e,
    #16213e,
    #0f3460,
    #1a1a2e
  ) !important;
  background-size: 300% 300% !important;
  animation: gradientShift 10s ease infinite !important;}

.bg-midnight-garden .reveal-subtitle,
.bg-midnight-garden .reveal-title,
.bg-midnight-garden .step-subtitle,
.bg-midnight-garden .step-title {color: #e8d8f0;}

.bg-midnight-garden .share-link-box input {background: hsla(0, 0%, 100%, 0.1);
  color: #e8d8f0;
  border-color: hsla(0, 0%, 100%, 0.2);}

.bg-golden-hour {background: linear-gradient(
    160deg,
    #fff8e1,
    #ffe0b2,
    #ffcc80,
    #fff8e1
  ) !important;
  background-size: 300% 300% !important;}

.bg-golden-hour,
.bg-lavender-dream {animation: gradientShift 8s ease infinite !important;}

.bg-lavender-dream {background: linear-gradient(
    160deg,
    #f3e5f5,
    #e1bee7,
    #ce93d8,
    #f3e5f5
  ) !important;
  background-size: 300% 300% !important;}

.bg-spring-meadow {background: linear-gradient(
    160deg,
    #e8f5e9,
    #c8e6c9,
    #a5d6a7,
    #e8f5e9
  ) !important;
  background-size: 300% 300% !important;
  animation: gradientShift 8s ease infinite !important;}

.bg-starlit {background: linear-gradient(
    160deg,
    #0d1b2a,
    #1b2838,
    #1a237e,
    #0d1b2a
  ) !important;
  background-size: 300% 300% !important;
  animation: gradientShift 10s ease infinite !important;}

.bg-starlit .reveal-subtitle,
.bg-starlit .reveal-title,
.bg-starlit .step-subtitle,
.bg-starlit .step-title {color: #c8d8f0;}

.bg-starlit .share-link-box input {background: hsla(0, 0%, 100%, 0.1);
  color: #c8d8f0;
  border-color: hsla(0, 0%, 100%, 0.2);}

.bg-particle {position: absolute;
  pointer-events: none;
  z-index: 0;}

.bg-particle.firefly {width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(200, 255, 150, 0.7);
  box-shadow: 0 0 8px rgba(200, 255, 150, 0.5);
  animation: fireflyFloat 5s ease-in-out infinite alternate;}

.bg-particle.light-ray {width: 2px;
  height: 120px;
  background: linear-gradient(180deg, rgba(255, 200, 100, 0.3), transparent);
  top: -20px;
  transform-origin: top center;
  animation: lightRaySway 8s ease-in-out infinite;}

.bg-particle.petal {width: 8px;
  height: 8px;
  border-radius: 50% 0 50% 0;
  background: rgba(244, 143, 177, 0.5);
  bottom: -10px;
  animation: petalDrift 8s ease-in-out infinite;}

.bg-particle.petal:nth-child(2n) {background: hsla(0, 0%, 100%, 0.4);
  width: 6px;
  height: 6px;}

.bg-particle.star {border-radius: 50%;
  background: rgba(200, 220, 255, 0.9);
  box-shadow: 0 0 4px rgba(200, 220, 255, 0.6);
  animation: starTwinkle 2s ease-in-out infinite alternate;}

.bg-particle.rose-orb {width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 108, 160, 0.3), transparent);
  animation: roseOrbFloat 6s ease-in-out infinite alternate;}

.bg-particle.bubble {border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    hsla(0, 0%, 100%, 0.4),
    rgba(128, 203, 196, 0.15)
  );
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  bottom: -20px;
  animation: bubbleRise 6s ease-in-out infinite;}

.bg-particle.blossom {width: 10px;
  height: 10px;
  border-radius: 50% 0 50% 0;
  background: rgba(240, 98, 146, 0.45);
  top: -15px;
  animation: blossomFall 8s ease-in-out infinite;}

.bg-particle.blossom:nth-child(2n) {background: rgba(248, 187, 208, 0.5);
  width: 7px;
  height: 7px;
  border-radius: 0 50% 0 50%;}

.bg-particle.blossom:nth-child(3n) {background: hsla(0, 0%, 100%, 0.35);
  width: 6px;
  height: 6px;}

.bg-rose-mist {background: linear-gradient(
    160deg,
    #f8e8f0,
    #e8b0c8,
    #d4789a,
    #f8e8f0
  ) !important;
  background-size: 300% 300% !important;
  animation: gradientShift 8s ease infinite !important;}

.bg-ocean-breeze {background: linear-gradient(
    160deg,
    #e0f7fa,
    #80cbc4,
    #4db6ac,
    #e0f7fa
  ) !important;
  background-size: 300% 300% !important;
  animation: gradientShift 9s ease infinite !important;}

.bg-sunset-glow {background: linear-gradient(
    160deg,
    #fff3e0,
    #ffab91,
    #ff8a65,
    #fff3e0
  ) !important;
  background-size: 300% 300% !important;}

.bg-cherry-blossom,
.bg-sunset-glow {animation: gradientShift 8s ease infinite !important;}

.bg-cherry-blossom {background: linear-gradient(
    160deg,
    #fce4ec,
    #f48fb1,
    #f06292,
    #fce4ec
  ) !important;
  background-size: 300% 300% !important;}

.card-expand-hint {text-align: center;
  font-size: 0.7rem;
  color: var(--text-light);
  margin-top: 8px;
  opacity: 0.6;
  animation: hintPulse 3s ease-in-out infinite;}

.ready-card .card-inner,
.reveal-card .card-inner {cursor: pointer;}

.card-fullscreen-overlay {position: fixed;
  inset: 0;
  z-index: 500;
  background: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  transition:
    background 0.4s ease,
    -webkit-backdrop-filter 0.4s ease;
  transition:
    background 0.4s ease,
    backdrop-filter 0.4s ease;
  transition:
    background 0.4s ease,
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease;
  cursor: pointer;}

.card-fullscreen-overlay.active {background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);}

.card-fullscreen-overlay.closing {background: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);}

.card-fullscreen-overlay.active .card-fullscreen {transform: scale(1);
  opacity: 1;}

.card-fullscreen-overlay.closing .card-fullscreen {transform: scale(0.7);
  opacity: 0;}

.card-fullscreen .card-to {font-size: 1.6rem;
  margin-bottom: 16px;}

.card-fullscreen .card-message {font-size: 1.1rem;
  line-height: 1.8;}

.card-fullscreen .card-from {font-size: 1.4rem;
  margin-top: 16px;}

.card-fullscreen .card-decoration {width: 22px;
  height: 22px;}

.card-fullscreen .card-decoration:before {width: 22px !important;}

.card-fullscreen .card-decoration:after {height: 22px !important;}

.card-fullscreen .card-decoration.top-left {top: 10px;
  left: 10px;}

.card-fullscreen .card-decoration.top-right {top: 10px;
  right: 10px;}

.card-fullscreen .card-decoration.bottom-left {bottom: 10px;
  left: 10px;}

.card-fullscreen .card-decoration.bottom-right {bottom: 10px;
  right: 10px;}


.ai-path-switch {
  text-align: center;
  margin: 0.25rem 0 1.25rem;
}

.ai-path-switch a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 auto 28px;
  max-width: 720px;
}

.ai-style-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 12px 16px;
  text-align: center;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: 0 2px 12px var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  animation: popIn 0.4s ease backwards;
  font: inherit;
  color: inherit;
}

.ai-style-card:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-md);
}

.ai-style-card.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, #fff5f8, #fff);
}

.ai-style-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ai-style-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 120px;
  margin: 0 auto 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff8fb;
  box-shadow: inset 0 0 0 1px rgba(120, 80, 100, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-style-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.3s ease;
}

.ai-style-card:hover:not(:disabled) .ai-style-preview-img {
  transform: scale(1.06);
}

.ai-style-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.25;
}

.ai-style-hint {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.3;
}

.ai-style-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.ai-style-card.selected .ai-style-check {
  opacity: 1;
  transform: scale(1);
}

.ai-block-heading {
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 14px;
}

.ai-ideas-fold {
  margin: 0 auto 28px;
  max-width: 720px;
}

.ai-ideas-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin: 12px auto 0;
  padding: 0.45rem 1rem;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  color: #9a5a6c;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}

.ai-ideas-more:hover,
.ai-ideas-more.is-open {
  color: var(--primary, #e86ca0);
  background: rgba(232, 108, 160, 0.06);
}

.ai-ideas-chevron {
  display: inline-flex;
  font-size: 0.72rem;
  opacity: 0.75;
  line-height: 1;
}

.ai-idea-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 auto;
  max-width: 720px;
}

.ai-ideas-fold .ai-idea-grid {
  margin-bottom: 0;
}

.ai-ideas-fold .ai-block-heading {
  margin-bottom: 14px;
}

.ai-idea-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: 0 2px 10px var(--shadow);
  transition: all 0.25s ease;
  animation: popIn 0.4s ease backwards;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 68px;
}

.ai-idea-card:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px var(--shadow-md);
}

.ai-idea-card.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, #fff5f8, #fff);
}

.ai-idea-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ai-idea-occasion {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1.2;
}

.ai-idea-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.ai-prompt-block {
  max-width: 720px; 
  width: 100%;
  margin: 4px auto 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.ai-prompt-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-light);
  text-align: center;
}

.ai-prompt-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 3px solid transparent;
  box-shadow: 0 2px 12px var(--shadow);
  padding: 18px 18px 12px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.ai-prompt-card:hover:not(.is-disabled) {
  box-shadow: 0 8px 24px var(--shadow-md);
}

.ai-prompt-card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 8px 24px var(--shadow-md);
  background: linear-gradient(135deg, #fff5f8, #fff);
}

.ai-prompt-card.is-disabled {
  opacity: 0.65;
}

.ai-prompt-card textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  padding: 2px 2px 10px;
  margin: 0;
  font-family: var(--font-nunito), var(--font-noto-sans-sc), 'Noto Sans SC', sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
}

.ai-prompt-card textarea::placeholder {
  color: #b5a8b0;
  font-weight: 500;
}

.ai-prompt-card textarea:disabled {
  cursor: not-allowed;
}

.ai-prompt-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(120, 80, 100, 0.08);
}

.ai-prompt-tip {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.35;
}

.ai-prompt-card .char-count {
  flex-shrink: 0;
  margin: 0;
  text-align: right;
}

.ai-generating {
  text-align: center;
  margin: 1.25rem auto;
  max-width: 420px;
}

.ai-generating-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(232, 108, 160, 0.15);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.ai-generating-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transition: width 0.4s ease;
}

.ai-task-id {
  opacity: 0.7;
  font-size: 0.9em;
}

.ai-error {
  color: #b42318;
  text-align: center;
  margin: 0.75rem auto 0;
  max-width: 480px;
  font-weight: 500;
}

.ai-history-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  margin: 1.5rem auto 0;
  max-width: 920px;
  padding: 0 4px;
}

/* Full 9:16 card thumbnails — show entire gift image, not a cropped square. */
.ai-history-tile {
  position: relative;
  width: 92px;
  aspect-ratio: 9 / 16;
  height: auto;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.ai-history-tile.is-active .ai-history-pick {
  border-color: rgba(232, 108, 160, 0.65);
  box-shadow:
    0 0 0 2px rgba(232, 108, 160, 0.25),
    0 10px 22px rgba(90, 40, 60, 0.14);
}

.ai-history-pick {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(232, 108, 160, 0.18);
  background: #fffaf7;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(90, 40, 60, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.ai-history-pick:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(90, 40, 60, 0.14);
}

.ai-history-pick:focus-visible {
  outline: 2px solid var(--primary, #e86ca0);
  outline-offset: 2px;
}

.ai-history-pick img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 13px;
  background: #fffaf7;
}

.ai-history-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: rgba(232, 108, 160, 0.08);
}

.ai-history-spinner {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  border: 2.5px solid rgba(232, 108, 160, 0.2);
  border-top-color: var(--primary, #e86ca0);
  animation: ai-spin 0.75s linear infinite;
}

.ai-history-pct {
  font-size: 0.72rem;
  font-weight: 650;
  color: #b44a7a;
  letter-spacing: 0.02em;
}

.ai-history-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 16px;
  background: rgba(180, 35, 24, 0.06);
  color: #c45a5a;
  font-size: 1.35rem;
  cursor: pointer;
  opacity: 0.85;
}

.ai-history-failed:hover {
  opacity: 1;
  background: rgba(180, 35, 24, 0.1);
}

.ai-history-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: rgba(90, 40, 60, 0.55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 1;
}

.ai-history-tile:hover .ai-history-remove,
.ai-history-tile:focus-within .ai-history-remove {
  opacity: 1;
}

.ai-history-remove:hover {
  background: rgba(90, 40, 60, 0.8);
}

.ai-result-frame,
.ai-bouquet-frame {
  display: flex;
  justify-content: center;
  margin: 1rem auto;
}

.ai-result-img,
.ai-bouquet-img {
  display: block;
  max-width: min(420px, 92vw);
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(90, 40, 60, 0.15);
  background: #fff;
}

.reveal-bouquet .ai-bouquet-img,
.ready-bouquet .ai-bouquet-img {
  max-width: min(360px, 88vw);
}

.create-bouquet-page-shell img.ai-bouquet-img,
.create-bouquet-page-shell img.ai-result-img,
img.ai-bouquet-img,
img.ai-result-img {
  display: block !important;
  width: 100% !important;
  max-width: min(420px, 92vw) !important;
  height: auto !important;
  vertical-align: middle;
  object-fit: contain;
  
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  margin: 0 auto;
  filter: drop-shadow(0 10px 22px rgba(90, 40, 60, 0.14));
}

.create-bouquet-page-shell .reveal-bouquet img.ai-bouquet-img,
.create-bouquet-page-shell .ready-bouquet img.ai-bouquet-img {
  max-width: min(360px, 88vw) !important;
}

.ai-bouquet-frame,
.ai-result-frame {
  width: 100%;
  max-width: min(420px, 92vw);
  margin: 1rem auto;
}

.ai-bouquet-missing {
  max-width: min(420px, 92vw);
  margin: 1rem auto;
  padding: 2rem 1rem;
  text-align: center;
  border-radius: 18px;
  background: #fff5f8;
  color: #8a4a5c;
  border: 1px dashed #f0b8c8;
}

@media (min-width: 701px) {
.create-bouquet-page-shell--builder #app {min-height: calc(100vh - var(--create-header-offset));}
}

@media (min-width: 960px) {
  .ai-card-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 36px;
  }
  .ai-card-layout--ready {
    align-items: center;
  }
  /* Scheme B: card left, actions right */
  .ai-card-layout--result {
    grid-template-columns: minmax(280px, 340px) minmax(280px, 400px);
    justify-content: center;
    gap: 40px 48px;
    align-items: start;
  }
  .ai-card-layout--result .ai-card-preview-col {
    order: -1;
  }
  .ai-card-layout--result .ai-card-form {
    order: 1;
    max-width: 400px;
  }
  .ai-card-layout--result .ai-result-actions {
    max-width: 380px;
  }
  .classic-ready-layout.ai-card-layout {
    grid-template-columns: minmax(280px, 420px) minmax(300px, 360px);
    justify-content: center;
    gap: 40px;
  }
  .classic-ready-actions {
    margin: 0;
  }
  .classic-ready-preview {
    max-width: 360px;
  }
  .classic-card-preview-shell {
    max-width: 360px;
  }
}

@media (max-width: 380px) {
.gift-fs-actions {
    flex-direction: column;
    width: min(92vw, 280px);
  }
.gift-fs-link {
    width: 100%;
  }
}

@media (max-width: 959px) {
.ai-card-preview-col {
    position: static;
    order: -1;
  }
}

@media (max-width: 700px) {
.flower-grid {grid-template-columns: repeat(2, 1fr);
    gap: 10px;}
.flower-display {width: 70px;
    height: 70px;}
.card-form {grid-template-columns: 1fr;
    gap: 20px;}
.card-inner {width: 100%;
    min-height: 250px;}
.step-title {font-size: 1.8rem;}
.card-template-grid {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;}
.reveal-actions {flex-direction: column;}
.progress-steps {padding: 0;}
.progress-step span {font-size: 8px;}
.step-dot {width: 24px;
    height: 24px;
    font-size: 10px;}
.bouquet-scene {width: 360px;
    min-height: 440px;
    padding: 10px 0;}
.bouquet-greenery-layer {width: 122%;}
.bouquet-flower-cluster {width: 56%;
    height: auto;
    aspect-ratio: 1 / 1;
    bottom: 91px;
    overflow: visible;}
.bouquet-flower-item {margin-left: 0;}
.flower-size-small {width: 86px;
    height: 86px;
    max-width: none;}
.flower-size-medium {width: 104px;
    height: 104px;
    max-width: none;}
.flower-size-large {width: 122px;
    height: 122px;
    max-width: none;}
.greenery-base-img {max-height: 420px;}
.greenery-grid {grid-template-columns: repeat(2, 1fr);}
.ready-bouquet,
  .reveal-bouquet {max-width: 380px;}
.ready-card,
  .reveal-card {margin-top: 22px;}
.ready-card .card-inner,
  .reveal-card .card-inner {width: 220px;
    min-height: 240px;
    padding: 20px 18px;
    transform: rotateX(2deg) rotate(-1deg);}
.share-link-box {display: flex;
    flex-direction: column;}
.share-link-box .btn-coffee,
  .share-link-box .btn-restart {width: 100%;}
.reveal-title {font-size: 2rem;}
.bg-template-grid {grid-template-columns: repeat(2, 1fr);
    gap: 10px;}
.bg-preview-swatch {height: 60px;}
.card-fullscreen .card-to {font-size: 1.3rem;}
.card-fullscreen .card-message {font-size: 0.95rem;}
.card-fullscreen .card-from {font-size: 1.1rem;}
}

@media (max-width: 420px) {
.card-template-grid,
  .flower-grid {grid-template-columns: repeat(2, 1fr);}
#app {padding: 12px;}
.nav-buttons {flex-direction: column-reverse;
    align-items: stretch;}
.btn {width: 100%;}
}

@media (min-width: 480px) {
  .ai-history-tile {
    width: 100px;
    aspect-ratio: 9 / 16;
    height: auto;
  }
}

@media (min-width: 768px) {
  .ai-history-tile {
    width: 108px;
  }
}

@media (max-width: 700px) {
.ai-style-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
.ai-idea-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 420px) {
.ai-idea-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes blossomFall {0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    transform: translateY(50vh) translateX(30px) rotate(180deg);
    opacity: 0.6;
  }
  90% {
    opacity: 0.4;
  }
  to {
    transform: translateY(100vh) translateX(-20px) rotate(1turn);
    opacity: 0;
  }}

@keyframes bubbleRise {0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.4;
  }
  to {
    transform: translateY(-100vh) scale(1);
    opacity: 0;
  }}

@keyframes cardPeekOut {0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(5px) scale(1.01);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }}

@keyframes cardSlideUp {0% {
    opacity: 0;
    transform: translateY(30px) rotate(2deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(2deg);
  }}

@keyframes fadeSlideIn {0% {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }}

@keyframes fireflyFloat {0% {
    transform: translate(0) scale(0.5);
    opacity: 0.3;
  }
  25% {
    opacity: 0.8;
  }
  50% {
    transform: translate(20px, -30px) scale(1);
    opacity: 1;
  }
  75% {
    opacity: 0.6;
  }
  to {
    transform: translate(-15px, -10px) scale(0.7);
    opacity: 0.2;
  }}

@keyframes flowerBloom {0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }}

@keyframes flowerFadeIn {0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }}

@keyframes gradientShift {0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }}

@keyframes hintPulse {0%,
  to {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }}

@keyframes lightRaySway {0%,
  to {
    transform: rotate(-8deg);
    opacity: 0.1;
  }
  50% {
    transform: rotate(8deg);
    opacity: 0.25;
  }}

@keyframes petalDrift {0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.6;
  }
  to {
    transform: translateY(-100vh) rotate(1turn);
    opacity: 0;
  }}

@keyframes popIn {0% {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }}

@keyframes roseOrbFloat {0% {
    transform: translate(0) scale(0.6);
    opacity: 0.2;
  }
  50% {
    transform: translate(15px, -20px) scale(1.2);
    opacity: 0.5;
  }
  to {
    transform: translate(-10px, 10px) scale(0.8);
    opacity: 0.15;
  }}

@keyframes shimmer {0% {
    transform: translateX(-30%) translateY(-30%) rotate(45deg);
  }
  to {
    transform: translateX(30%) translateY(30%) rotate(45deg);
  }}

@keyframes sparkle {0%,
  to {
    opacity: 0;
    transform: scale(0) translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: scale(1) translateY(-20px);
  }}

@keyframes starTwinkle {0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1.2);
  }}

@keyframes starsTwinkle {0% {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }}

/* Local-only bouquet assembly shown before the classic share result. */
.bouquet-assembly {
  width: min(100%, 620px);
  margin: 0 auto;
  text-align: center;
}

.bouquet-assembly-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  min-height: 390px;
  margin: 22px auto;
  overflow: hidden;
  border: 1px solid rgba(232, 108, 160, 0.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.96), transparent 52%),
    linear-gradient(145deg, #fffaf7, #fff0f5);
  box-shadow: 0 22px 60px rgba(102, 58, 76, 0.12);
}

.bouquet-assembly-blooms {
  transform: translateY(-24px) scale(0.78);
  animation: bouquet-assembly-breathe 2.4s ease-in-out infinite;
}

.bouquet-assembly-card {
  position: absolute;
  right: 42px;
  bottom: 28px;
  width: 150px;
  transform: rotate(4deg);
  animation: bouquet-assembly-card 1.2s ease-in-out infinite alternate;
}

.bouquet-assembly-card .card-inner {
  width: 100%;
  min-height: 130px;
  padding: 16px 14px;
}

.bouquet-assembly-progress {
  width: min(100%, 460px);
  height: 10px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(232, 108, 160, 0.14);
}

.bouquet-assembly-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef77aa, #d84f8d);
  box-shadow: 0 0 18px rgba(232, 108, 160, 0.35);
  transition: width 0.12s linear;
}

.bouquet-assembly-progress-label {
  margin-top: 10px;
  color: var(--text-light);
  font-size: 0.86rem;
  font-weight: 700;
}

@keyframes bouquet-assembly-breathe {
  0%,
  100% {
    transform: translateY(-20px) scale(0.76);
  }
  50% {
    transform: translateY(-28px) scale(0.8);
  }
}

@keyframes bouquet-assembly-card {
  from {
    transform: translateY(4px) rotate(4deg);
  }
  to {
    transform: translateY(-4px) rotate(2deg);
  }
}

@media (max-width: 560px) {
  .bouquet-assembly-scene {
    min-height: 330px;
  }

  .bouquet-assembly-blooms {
    transform: translateY(-28px) scale(0.64);
  }

  .bouquet-assembly-card {
    right: 18px;
    bottom: 20px;
    width: 126px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bouquet-assembly-blooms,
  .bouquet-assembly-card {
    animation: none;
  }

  .bouquet-assembly-progress__fill {
    transition: none;
  }
}

.ai-generation-animation {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 42px 24px;
  text-align: center;
}

.ai-generation-animation .bouquet-assembly-progress {
  width: min(100%, 320px);
  margin-top: 22px;
}

.ai-generation-pay-hint {
  width: min(100%, 280px);
  margin-top: 16px;
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(232, 108, 160, 0.28);
  box-shadow: 0 6px 16px rgba(200, 80, 130, 0.1);
}

.ai-generation-pay-hint p {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #7a3a52;
  font-weight: 600;
}

.ai-generation-pay-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #e86ca0, #d65a8a);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(214, 90, 138, 0.3);
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}

.ai-generation-pay-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.ai-generation-orbit {
  position: relative;
  width: 190px;
  height: 190px;
  margin-bottom: 24px;
  animation: ai-generation-float 2.4s ease-in-out infinite;
}

.ai-generation-orbit span,
.ai-generation-orbit i {
  position: absolute;
  border-radius: 50%;
}

.ai-generation-orbit span {
  width: 82px;
  height: 82px;
  background: radial-gradient(circle at 35% 30%, #fff8fc, #ed75ac 65%, #c94180);
  box-shadow: 0 12px 28px rgba(202, 67, 127, 0.22);
  animation: ai-generation-bloom 1.8s ease-in-out infinite alternate;
}

.ai-generation-orbit span:nth-child(1) {
  top: 3px;
  left: 54px;
}

.ai-generation-orbit span:nth-child(2) {
  top: 53px;
  left: 5px;
  animation-delay: -0.4s;
}

.ai-generation-orbit span:nth-child(3) {
  top: 53px;
  right: 5px;
  animation-delay: -0.8s;
}

.ai-generation-orbit span:nth-child(4) {
  bottom: 3px;
  left: 54px;
  animation-delay: -1.2s;
}

.ai-generation-orbit i {
  top: 61px;
  left: 61px;
  width: 68px;
  height: 68px;
  background: radial-gradient(circle at 35% 30%, #fff7d5, #f0a9c7 60%, #d7528e);
  box-shadow: 0 0 34px rgba(239, 119, 170, 0.38);
}

@keyframes ai-generation-float {
  0%,
  100% {
    transform: translateY(4px) rotate(-2deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes ai-generation-bloom {
  from {
    transform: scale(0.9);
    opacity: 0.74;
  }
  to {
    transform: scale(1.08);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-generation-orbit,
  .ai-generation-orbit span {
    animation: none;
  }
}

/* ── /generate-bouquet entry modes: 2×2 (3 AI + free classic) ── */
#app .gc-entry-tabs,
.gc-entry-tabs {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
  justify-items: stretch;
  justify-content: center;
}
@media (min-width: 560px) {
  #app .gc-entry-tabs,
  .gc-entry-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
  }
}
@media (min-width: 860px) {
  #app .gc-entry-tabs,
  .gc-entry-tabs {
    gap: 1.15rem;
  }
}

.gc-entry-pick-heading {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0.25rem 0 0.5rem;
}
.gc-entry-pick-title {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 800;
  color: #4a2c3a;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.gc-entry-pick-sub {
  margin: 0.4rem 0 0.15rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #a07a8c;
  line-height: 1.4;
}

/* Landing: larger cards, more presence, vertically centered in viewport */
.gc-entry-tabs--pick {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  min-height: min(68vh, 720px);
  align-content: center;
}
@media (min-width: 860px) {
  .gc-entry-tabs--pick {
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
  }
}

#app button.gc-entry-tab,
button.gc-entry-tab,
#app a.gc-entry-tab,
a.gc-entry-tab {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100% !important;
  margin: 0 !important;
  text-align: left;
  border: 1.5px solid rgba(232, 108, 160, 0.26) !important;
  background: #fff !important;
  border-radius: 1.15rem !important;
  padding: 0 !important;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(200, 80, 128, 0.08);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  min-height: 0;
  text-decoration: none;
  box-sizing: border-box;
}
#app button.gc-entry-tab:hover,
button.gc-entry-tab:hover,
#app a.gc-entry-tab:hover,
a.gc-entry-tab:hover {
  border-color: rgba(232, 108, 160, 0.55) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(200, 80, 128, 0.14);
}
#app button.gc-entry-tab--active,
button.gc-entry-tab--active,
#app button.gc-entry-tab[aria-selected="true"],
button.gc-entry-tab[aria-selected="true"] {
  border-color: #e86ca0 !important;
  background: #fff !important;
  box-shadow:
    0 0 0 3px rgba(232, 108, 160, 0.16),
    0 10px 28px rgba(200, 80, 128, 0.12);
}

.gc-entry-tab-media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 10.5rem;
  overflow: hidden;
  background: linear-gradient(180deg, #fff7fa, #fff0f5);
}
@media (min-width: 860px) {
  .gc-entry-tab-media {
    height: 12rem;
  }
  .gc-entry-tabs--pick .gc-entry-tab-media {
    height: 14.5rem;
  }
}
.gc-entry-tab-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Card 1: keep full process art centered in the banner */
button.gc-entry-tab[data-entry='express'] .gc-entry-tab-img {
  object-fit: cover;
  object-position: center center;
}
.gc-entry-tab-num,
.gc-entry-tab-badge {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #c85080;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(100, 40, 70, 0.12);
}
.gc-entry-tab-badge {
  min-width: 0;
  padding: 0 0.55rem;
  background: #e8f8ef;
  color: #157a42;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.gc-entry-tab--active .gc-entry-tab-num,
button.gc-entry-tab[aria-selected="true"] .gc-entry-tab-num {
  background: #e86ca0;
  color: #fff;
}
button.gc-entry-tab--free,
a.gc-entry-tab--free {
  border-color: rgba(40, 160, 90, 0.28) !important;
}
button.gc-entry-tab--free:hover,
a.gc-entry-tab--free:hover {
  border-color: rgba(40, 160, 90, 0.5) !important;
}
button.gc-entry-tab--free.gc-entry-tab--active,
button.gc-entry-tab--free[aria-selected='true'] {
  border-color: #2a9b58 !important;
  box-shadow:
    0 0 0 3px rgba(40, 160, 90, 0.14),
    0 10px 28px rgba(40, 120, 70, 0.1);
}
.gc-free-builder {
  margin-top: 0.25rem;
  width: 100%;
}

.gc-entry-tab-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.95rem 1rem 1.15rem;
  background: #fff;
}
.gc-entry-tab-label {
  display: block;
  font-weight: 800;
  color: #4a2c3a;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.gc-entry-tab-hint {
  display: block;
  margin: 0;
  font-size: 0.86rem;
  font-weight: 550;
  color: #9a7a88;
  line-height: 1.45;
}
.gc-express-panel,
.gc-look-panel {
  margin-top: 0.5rem;
}
.gc-polish-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: #5c4a52;
  cursor: pointer;
}
.gc-polish-check input {
  margin-top: 0.2rem;
}

/* ── Express form layout (entry A) ── */
.gc-express-panel {
  width: 100%;
  max-width: 720px;
  margin: 0.75rem auto 1.5rem;
  padding: 0 0.25rem;
}
.gc-express-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.gc-express-header .step-title {
  margin-bottom: 0.35rem;
}
.gc-express-header .step-subtitle {
  margin: 0 auto;
  max-width: 36rem;
}
.gc-express-body {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  width: 100%;
}
.gc-express-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
}
.gc-express-label {
  display: block;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #5a3a48;
  text-align: left;
  line-height: 1.35;
}
h3.gc-express-label {
  font-size: 0.92rem;
  font-weight: 700;
}
.gc-chip-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
}
.gc-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(232, 108, 160, 0.22);
  background: #fff;
  color: #5a3a48;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}
.gc-chip:hover {
  border-color: rgba(232, 108, 160, 0.45);
  background: #fffafc;
}
.gc-chip--selected,
.gc-chip[aria-selected="true"] {
  border-color: #e86ca0;
  background: linear-gradient(180deg, #fff7fa, #fff);
  color: #c44a7a;
  box-shadow: 0 0 0 3px rgba(232, 108, 160, 0.12);
  font-weight: 750;
}
.gc-express-input,
.gc-express-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(180, 140, 160, 0.35);
  border-radius: 14px;
  background: #fff;
  color: #3d2a32;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 0.8rem 0.95rem;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.gc-express-textarea {
  min-height: 5.5rem;
  resize: vertical;
}
.gc-express-input:focus,
.gc-express-textarea:focus {
  border-color: rgba(232, 108, 160, 0.65);
  box-shadow: 0 0 0 3px rgba(232, 108, 160, 0.12);
}
.gc-express-input.is-missing {
  border-color: #e86ca0;
  box-shadow: 0 0 0 3px rgba(232, 108, 160, 0.2);
}
.gc-express-input::placeholder,
.gc-express-textarea::placeholder {
  color: #b09aa5;
}
.gc-express-name-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  width: 100%;
}
@media (min-width: 560px) {
  .gc-express-name-row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}
.gc-express-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.gc-express-error {
  margin: 0;
  text-align: center;
}
.gc-express-actions {
  display: flex;
  justify-content: center;
  padding-top: 0.35rem;
}
.gc-express-cta {
  width: auto !important;
  min-width: min(100%, 280px);
  max-width: 100%;
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

/* Override: landing cards must stay large (older 9.5rem rule removed). */
@media (min-width: 860px) {
  .create-bouquet-page-shell--ai-wide .gc-entry-tabs--pick .gc-entry-tab-media {
    height: 13.5rem !important;
  }
  .create-bouquet-page-shell--ai-wide .gc-entry-tabs--pick .gc-entry-tab-label {
    font-size: 1.12rem;
  }
  .create-bouquet-page-shell--ai-wide .gc-entry-tabs--pick .gc-entry-tab-hint {
    font-size: 0.9rem;
  }
  .create-bouquet-page-shell--ai-wide .gc-entry-tabs {
    width: 100%;
    max-width: 920px;
  }
}