:root {
  --card-width: 960px;
  --card-height: 440px;
  --card-padding: 24px;
  --shadow: 0 20px 35px rgba(0, 0, 0, 0.08);
  --border: 1px solid #d4d4cf;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #faf9f6;
  color: #2a2a2a;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.app {
  --page-padding-x: 70px;
  margin: 0 auto;
  padding: 60px var(--page-padding-x) 80px;
}

.intro {
  display: block;
}

.intro h1 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2a2a2a;
}

.intro p {
  margin: 0 0 28px;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}

.workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.postcard-stage {
  width: 100%;
  position: relative;
}

.postcard {
  --photo-pct: 52.5%;
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 440px;
  transform-origin: top left;
  background: #fff;
  border: var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 14px 60px rgba(0, 0, 0, 0.18);
  display: flex;
  overflow: hidden;
}

.photo-area {
  flex: 0 0 var(--photo-pct);
  position: relative;
  overflow: hidden;
  background: #ececec;
  cursor: grab;
  touch-action: none;
}

.divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--photo-pct);
  width: 14px;
  transform: translateX(-50%);
  z-index: 6;
  cursor: col-resize;
  touch-action: none;
}

.divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: #d4d4cf;
}

.divider:hover::before,
.divider.dragging::before {
  width: 3px;
  background: #b7b3ad;
}

.photo-area:active {
  cursor: grabbing;
}

.photo-area img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.drop-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.7);
  border: 2px dashed rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

[data-role='drop-zone'].empty .drop-overlay {
  opacity: 1;
}

[data-role='drop-zone'].dragging .drop-overlay {
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.25);
}

.image-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
}

.image-controls button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  color: #333;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Optically center the − / + glyphs (nudged up 1px). */
  padding: 0 0 2px 0;
}

.image-controls button:hover {
  transform: scale(1.05);
}

.title {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: #f5f5f5;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  pointer-events: auto;
  cursor: text;
}

/* With no photo, the white-on-shadow title is unreadable over the empty area,
   so match the location caption (green, no shadow). With a photo it keeps the
   light, shadowed style above. */
.photo-area.empty .title {
  color: #3a6b35;
  text-shadow: none;
}

.photo-date {
  position: absolute;
  bottom: 30px;
  left: 24px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f5f5f5;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.message-area {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 16px 52px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf7 100%);
  position: relative;
}

.message-area::after {
  content: '';
  display: block;
  clear: both;
}

.message-text {
  color: #1f1d1d;
  font-family: 'Caveat', cursive;
  margin-top: 16px;
  margin-left: 16px;
  min-height: 80px;
  line-height: 1.6;
  font-size: 1.25rem;
  white-space: pre-wrap;
  cursor: text;
}

.location-caption {
  position: absolute;
  bottom: 14px;
  left: 32px;
  right: 32px;
  font-size: 0.8rem;
  font-style: italic;
  color: #3a6b35;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-align: right;
  cursor: text;
}

.message-text,
.title,
.location-caption {
  outline: none;
}

.message-text[contenteditable="true"]:focus {
  background: none;
  box-shadow: none;
}

[contenteditable="true"][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: rgba(70, 62, 54, 0.45);
  pointer-events: none;
}

.title[contenteditable="true"][data-placeholder]:empty::before {
  color: rgba(245, 245, 245, 0.85);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

[contenteditable="true"]:focus {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

[contenteditable="true"]::selection {
  background: rgba(33, 150, 243, 0.25);
}

.stamp-anchor {
  pointer-events: auto;
  position: relative;
  float: right;
  width: 140px;
  height: 140px;
  margin-left: 12px;
  margin-bottom: 8px;
  shape-outside: circle(72px at 50% 50%);
  -webkit-shape-outside: circle(72px at 50% 50%);
  shape-margin: 14px;
  -webkit-shape-margin: 14px;
  cursor: grab;
  touch-action: none;
}

.stamp-anchor:active {
  cursor: grabbing;
}

.stamp-anchor .drop-overlay {
  cursor: pointer;
  display: none;
}

.stamp-visual {
  position: absolute;
  inset: 0;
}

.stamp-photo-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  -webkit-mask-image: url('data:image/png;base64,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');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('data:image/png;base64,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');
  mask-size: 100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
}

.stamp-photo-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.stamp-controls {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  pointer-events: auto;
}

.stamp-frame,
.postmark,
.postmark-text {
  pointer-events: none;
}

.stamp-controls button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #2d2a26;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.stamp-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.postmark {
  position: absolute;
  top: -6px;
  right: -10px;
  width: 160px;
  height: 160px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.5;
}

.postmark-text {
  position: absolute;
  top: 44px;
  right: 64px;
  width: 80px;
  height: 80px;
  pointer-events: none;
  overflow: visible;
}

.postmark-text text {
  fill: rgba(0, 0, 0, 0.35);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.postmark-text.empty {
  display: none;
}

.photo-area.empty img {
  display: none;
}

.stamp-anchor.empty .stamp-photo-wrap img {
  display: none;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 8px;
  padding: 30px 0 0;
  border-top: 1px solid #ddd;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.font-size-control {
  display: flex;
  gap: 12px;
  align-items: center;
}

.font-select-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.font-select-row select {
  flex: 1;
}

.font-step-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.font-step-buttons button {
  flex: 1;
  min-width: 32px;
  padding: 0 8px;
  border: 1px solid #ddd;
  background: #fff;
  color: #2a2a2a;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  border-radius: 3px;
  transition: border-color 0.15s, background 0.15s;
}

.font-step-buttons button:hover {
  border-color: #999;
}

.font-step-buttons button:active {
  background: #f1efe8;
}

.font-size-control span {
  min-width: 48px;
  font-size: 0.9rem;
  text-align: right;
  color: #888;
}

.location-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.location-row input {
  flex: 1;
  min-width: 0;
}

.btn-secondary {
  background: none;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.btn-secondary:not(:disabled):hover {
  color: #2a2a2a;
  border-color: #999;
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.location-hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #a23b2e;
}

.location-hint[hidden] {
  display: none;
}

.control-row {
  display: flex;
  gap: 16px;
}

.control-row > .control-group {
  flex: 1;
  min-width: 0;
}

label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #2a2a2a;
}

.font-name {
  font-weight: 400;
  color: #888;
}

#fontSizeValue {
  display: none;
}

input[type="text"],
input[type="file"],
input[type="date"],
select {
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  color: #2a2a2a;
  font-family: inherit;
  transition: border-color 0.15s;
}

input[type="text"]:hover,
input[type="date"]:hover,
select:hover {
  border-color: #bbb;
}

input[type="text"]:focus,
input[type="date"]:focus,
select:focus {
  outline: none;
  border-color: #999;
}

input[type="range"] {
  width: 100%;
  accent-color: #666;
}

.download {
  align-self: stretch;
  width: 100%;
  padding: 11px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid #2a2a2a;
  background: #2a2a2a;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s;
}

.download:not(:disabled):hover {
  background: #000;
  border-color: #000;
}

.download:disabled {
  background: #cbc6bf;
  border-color: #cbc6bf;
  cursor: not-allowed;
}

.download-label {
  display: block;
}

.download-missing {
  display: block;
  margin-top: 5px;
  font-size: 0.68rem;
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.download-missing:empty {
  display: none;
}

@media (max-width: 700px) {
  .app {
    --page-padding-x: 28px;
    padding: 32px var(--page-padding-x) 48px;
  }

  .control-row {
    flex-direction: column;
  }
}