:root {
  --ink: #183323;
  --olive: #344a2a;
  --olive-2: #55643a;
  --cream: #f8f3e7;
  --paper: #fffdf8;
  --gold: #b48632;
  --gold-soft: #e0c27a;
  --line: #ded7c7;
  --muted: #6d746d;
  --danger-bg: #f4eee0;
  --shadow: 0 18px 50px rgba(31, 46, 35, .10);
  --warning: #996d1f;
  --warning-bg: #f7edd3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #f4f0e5 0%, #ebe5d7 100%);
  color: var(--ink);
}

button, input, textarea, select { font: inherit; }

.site-header {
  max-width: 1380px;
  margin: 0 auto;
  padding: 38px 34px 22px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}

.eyebrow, .step-label {
  color: var(--gold);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .98;
  margin: 8px 0 10px;
  font-weight: 500;
}

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  margin: 4px 0 18px;
  font-weight: 500;
}

.subhead {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.prototype-badge {
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

.layout {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 34px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr);
  gap: 28px;
}

.builder-panel, .sticky-preview {
  background: rgba(255,253,248,.95);
  border: 1px solid rgba(73,78,65,.12);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.builder-panel { padding: 26px; }

.progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.progress span {
  padding: 8px 11px;
  border-radius: 999px;
  background: #f1eee6;
  color: #73776e;
  font-size: 12px;
  font-weight: 700;
}

.progress .active {
  background: var(--olive);
  color: white;
}

.step-block {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
}

.status-chip {
  color: #31512f;
  background: #e5efe0;
  border: 1px solid #cadec3;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 999px;
  font-weight: 800;
}

.design-card {
  width: 100%;
  border: 2px solid var(--olive);
  background: #f7f4ea;
  padding: 12px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 126px 1fr auto;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.design-card img {
  width: 126px;
  aspect-ratio: 16/9;
  border-radius: 11px;
  object-fit: cover;
  background: #e9e4d7;
  border: 1px solid rgba(67,82,60,.16);
  box-shadow: 0 3px 10px rgba(35,45,35,.08);
}

.design-card strong, .design-card small { display: block; }
.design-card strong { font-size: 17px; }
.design-card small { color: var(--muted); margin-top: 5px; }

.check {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--olive);
  color: white;
  font-weight: 900;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.amount-grid button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 14px;
  padding: 16px 8px;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.amount-grid button.selected {
  border-color: var(--olive);
  box-shadow: inset 0 0 0 1px var(--olive);
  background: #edf1e8;
}

.field { display: block; }
.field span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 750;
}

.field em {
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  padding: 13px 14px;
  outline: none;
}

.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--olive-2);
  box-shadow: 0 0 0 3px rgba(85,100,58,.10);
}

.field textarea { resize: vertical; min-height: 118px; }
.compact { max-width: 300px; }

.money-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  overflow: hidden;
}

.money-input > span {
  padding-left: 14px;
  margin: 0;
  color: var(--muted);
}

.money-input input {
  border: 0;
  border-radius: 0;
}

.field-note {
  color: var(--muted);
  font-size: 12px;
  margin: 8px 0 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.full { grid-column: 1 / -1; }

.message-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

#messageCount.count-warning {
  color: var(--warning);
}

#messageCount.count-limit {
  color: var(--warning);
  background: var(--warning-bg);
  border-radius: 999px;
  padding: 1px 8px;
}

.safety-card {
  margin: 24px 0 14px;
  background: var(--danger-bg);
  border: 1px solid #dfd1b0;
  border-radius: 16px;
  padding: 16px 18px;
}

.safety-card strong { color: #725119; }
.safety-card p { margin: 5px 0 0; color: #6c6559; line-height: 1.45; }

.purchase-button {
  width: 100%;
  border: 0;
  border-radius: 15px;
  padding: 16px;
  background: #b6b5ae;
  color: #f5f3ed;
  font-weight: 850;
  cursor: not-allowed;
}

.sticky-preview {
  position: sticky;
  top: 18px;
  padding: 22px;
}

.preview-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.secondary-btn {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 750;
  cursor: pointer;
}

.gift-shell {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #1d3025;
  box-shadow: 0 14px 38px rgba(17, 29, 21, .24);
  aspect-ratio: 16/9;
}

.gift-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gift-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(22, 30, 22, .18) 100%);
  pointer-events: none;
}

.message-overlay {
  position: absolute;
  left: 30.2%;
  right: 24.8%;
  bottom: 12.7%;
  height: 18.8%;
  z-index: 3;
  display: grid;
  grid-template-rows: 36% 40% 24%;
  justify-items: center;
  align-items: center;
  text-align: center;
  padding: 1px 14px 2px;
  color: #2a3b2d;
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    0 0 1px rgba(38,58,39,.10);
  pointer-events: none;
}

.preview-recipient,
.preview-message,
.preview-sender {
  width: 100%;
  margin: 0;
}

.preview-recipient {
  align-self: end;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: .98;
}

.preview-recipient.recipient-short {
  font-size: clamp(17px, 1.72vw, 28px);
}

.preview-recipient.recipient-medium,
.preview-recipient.is-placeholder {
  font-size: clamp(16px, 1.58vw, 25px);
}

.preview-recipient.recipient-long {
  font-size: clamp(14px, 1.45vw, 23px);
}

.preview-message {
  align-self: center;
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  padding: 0 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gift-shell.message-short .preview-message {
  font-size: clamp(13px, 1.14vw, 18px);
}

.gift-shell.message-medium .preview-message {
  font-size: clamp(12px, 1.02vw, 16px);
  line-height: 1.08;
}

.gift-shell.message-long .preview-message {
  font-size: clamp(10px, .92vw, 14px);
  line-height: 1.06;
  -webkit-line-clamp: 3;
}

.preview-sender {
  align-self: start;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, .88vw, 12px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .015em;
  white-space: nowrap;
}

.is-placeholder {
  color: #6f7466;
}

.amount-badge {
  position: absolute;
  z-index: 4;
  right: 14px;
  top: 14px;
  background: rgba(255,253,246,.92);
  color: var(--ink);
  border: 1px solid rgba(174,139,71,.55);
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  backdrop-filter: blur(7px);
}

.preview-details {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.preview-details > div {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.preview-details > div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.preview-details > div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.preview-details span, .preview-details strong { display: block; }
.preview-details span {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
}
.preview-details strong { font-size: 13px; }

.tech-note {
  margin-top: 15px;
  background: #eef1eb;
  padding: 14px 15px;
  border-radius: 14px;
  color: #526054;
}

.tech-note strong { color: var(--ink); font-size: 12px; }
.tech-note p { margin: 5px 0 0; font-size: 12px; line-height: 1.45; }

footer {
  text-align: center;
  color: #74776e;
  padding: 0 20px 34px;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .message-overlay {
    left: 30.1%;
    right: 25%;
    bottom: 12.55%;
    height: 19.1%;
  }

  .preview-recipient.recipient-short { font-size: clamp(16px, 1.8vw, 24px); }
  .preview-recipient.recipient-medium,
  .preview-recipient.is-placeholder { font-size: clamp(15px, 1.65vw, 22px); }
  .preview-recipient.recipient-long { font-size: clamp(13px, 1.5vw, 20px); }
  .gift-shell.message-short .preview-message { font-size: clamp(12px, 1.08vw, 15px); }
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .preview-column { order: -1; }
  .sticky-preview { position: static; }
}

@media (max-width: 620px) {
  .site-header { padding: 24px 16px 18px; align-items: start; }
  .prototype-badge { display: none; }
  .layout { padding: 0 12px 28px; }
  .builder-panel, .sticky-preview { border-radius: 18px; padding: 17px; }
  .amount-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .design-card { grid-template-columns: 98px 1fr auto; gap: 10px; }
  .design-card img { width: 98px; }
  .preview-details { grid-template-columns: 1fr; }
  .preview-details > div { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .preview-details > div:last-child { border-bottom: 0 !important; }

  .message-overlay {
    left: 30.4%;
    right: 25.3%;
    bottom: 12.2%;
    height: 19.8%;
    padding: 1px 10px 2px;
  }

  .preview-recipient.recipient-short { font-size: clamp(14px, 3.5vw, 19px); }
  .preview-recipient.recipient-medium,
  .preview-recipient.is-placeholder { font-size: clamp(13.5px, 3.2vw, 18px); }
  .preview-recipient.recipient-long { font-size: clamp(12px, 2.9vw, 16px); }
  .gift-shell.message-short .preview-message { font-size: clamp(11px, 2.65vw, 14px); }
  .gift-shell.message-medium .preview-message { font-size: clamp(10px, 2.4vw, 12.5px); }
  .gift-shell.message-long .preview-message { font-size: clamp(9px, 2.18vw, 11px); }
  .preview-sender { font-size: clamp(8px, 1.9vw, 10px); }
}


.status-chip.loading {
  color: #705c2e;
  background: #f3ecd9;
  border-color: #e5d5a9;
}

.status-chip.error {
  color: #744b3f;
  background: #f5e6e1;
  border-color: #e5c7bc;
}

.design-card.loading {
  opacity: .72;
}

.design-card.api-error {
  border-color: #9b6a5c;
  background: #f8efec;
}

.tech-note.api-ok {
  background: #eaf1e7;
}

.tech-note.api-error {
  background: #f5e6e1;
  color: #6e5047;
}


.design-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  transition: opacity .18s ease;
}

.design-gallery.is-switching {
  opacity: .62;
  pointer-events: none;
}

.design-gallery .design-card {
  grid-template-columns: 112px minmax(0, 1fr) 28px;
  min-height: 92px;
  height: 100%;
}

.design-gallery .design-card img {
  width: 112px;
}

.design-gallery .design-card:not(.selected) {
  border-color: var(--line);
  background: #fffdf8;
}

.design-gallery .design-card:not(.selected):hover {
  border-color: #9baa87;
  background: #faf8f0;
}

.design-gallery .design-card:not(.selected) .check {
  background: #ece9df;
  color: transparent;
}

.gallery-card-copy {
  min-width: 0;
}

.gallery-card-copy strong {
  line-height: 1.18;
}

.gallery-card-copy small {
  line-height: 1.35;
}

.gallery-loading,
.gallery-empty {
  grid-column: 1 / -1;
  min-height: 94px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  background: #fbf9f3;
  padding: 18px;
  text-align: center;
}

.gallery-error {
  color: #744b3f;
  background: #f8efec;
  border-color: #e5c7bc;
}

.gallery-spinner {
  width: 17px;
  height: 17px;
  border: 2px solid #d7d3c7;
  border-top-color: var(--olive);
  border-radius: 50%;
  animation: gallery-spin .75s linear infinite;
}

.gallery-note {
  margin-top: 10px;
}

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

@media (max-width: 1180px) {
  .design-gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .design-gallery .design-card {
    grid-template-columns: 92px minmax(0, 1fr) 28px;
  }

  .design-gallery .design-card img {
    width: 92px;
  }
}


.save-draft-button {
  width: 100%;
  border: 0;
  border-radius: 15px;
  padding: 16px;
  margin-bottom: 10px;
  background: var(--olive);
  color: white;
  font-weight: 850;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, background .12s ease;
}

.save-draft-button:not(:disabled):hover {
  transform: translateY(-1px);
  background: #2c4025;
}

.save-draft-button:disabled {
  background: #b7bbb0;
  color: #f4f3ed;
  cursor: not-allowed;
}

.save-draft-button.is-saving {
  opacity: .72;
  cursor: wait;
}

.draft-status {
  margin: 0 0 12px;
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid #d4ddcb;
  background: #eef4ea;
  color: #345032;
}

.draft-status.error {
  border-color: #e4c7bd;
  background: #f7e9e4;
  color: #754c40;
}

.draft-status.warning {
  border-color: #e3d1a7;
  background: #f7eed9;
  color: #705727;
}


.purchase-button.checkout-enabled {
  background: #8a641f;
  color: white;
  cursor: pointer;
}

.purchase-button.checkout-enabled:hover {
  background: #735219;
}

.purchase-button.is-preparing {
  opacity: .72;
  cursor: wait;
}

.checkout-ready {
  margin-top: 12px;
  border: 1px solid #c9dac0;
  background: #edf5e9;
  border-radius: 15px;
  padding: 15px 16px;
  color: #31502f;
}

.checkout-ready strong {
  display: block;
  margin-bottom: 4px;
}

.checkout-ready p {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
}

.checkout-link {
  display: inline-flex;
  text-decoration: none;
  border-radius: 999px;
  background: var(--olive);
  color: white;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
}

.checkout-link:hover {
  background: #2c4025;
}