:root {
  --ink: #2b2438;
  --ink-soft: #5c5470;
  --paper: #fffaf3;
  --primary: #e2557a;
  --primary-dark: #c93d61;
  --secondary: #f4ece1;
  --border: #e6ddd0;
  --shadow: 0 10px 30px rgba(43, 36, 56, 0.15);
  font-family: 'Quicksand', system-ui, sans-serif;

  /* Backdrop-first design variations: the backdrop is a clear, single named
     color (a light-to-medium monochromatic gradient within one hue), so
     each design reads unambiguously as "the purple one" / "the blue one" /
     etc. Dots are deliberately secondary — soft, translucent (white
     highlights + a couple of deeper same-hue accents, alpha 0.25-0.50) and
     varying in size (3-9px) for a gentle bokeh texture, not bold confetti. */
  --pattern-ruby-rose:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(0, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(0, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(0, 42%, 88%), hsl(0, 52%, 70%));
  --pattern-coral-sunset:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(22, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(22, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(22, 42%, 88%), hsl(22, 52%, 70%));
  --pattern-golden-amber:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(45, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(45, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(45, 42%, 88%), hsl(45, 52%, 70%));
  --pattern-citrus-lime:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(68, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(68, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(68, 42%, 88%), hsl(68, 52%, 70%));
  --pattern-garden-green:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(90, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(90, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(90, 42%, 88%), hsl(90, 52%, 70%));
  --pattern-emerald-isle:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(112, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(112, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(112, 42%, 88%), hsl(112, 52%, 70%));
  --pattern-jade-teal:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(135, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(135, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(135, 42%, 88%), hsl(135, 52%, 70%));
  --pattern-seafoam-mist:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(158, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(158, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(158, 42%, 88%), hsl(158, 52%, 70%));
  --pattern-turquoise-bay:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(180, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(180, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(180, 42%, 88%), hsl(180, 52%, 70%));
  --pattern-sky-blue:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(202, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(202, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(202, 42%, 88%), hsl(202, 52%, 70%));
  --pattern-ocean-blue:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(225, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(225, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(225, 42%, 88%), hsl(225, 52%, 70%));
  --pattern-midnight-indigo:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(248, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(248, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(248, 42%, 88%), hsl(248, 52%, 70%));
  --pattern-royal-purple:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(270, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(270, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(270, 42%, 88%), hsl(270, 52%, 70%));
  --pattern-orchid-bloom:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(292, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(292, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(292, 42%, 88%), hsl(292, 52%, 70%));
  --pattern-fuchsia-pop:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(315, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(315, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(315, 42%, 88%), hsl(315, 52%, 70%));
  --pattern-blush-pink:
    radial-gradient(circle at 15% 20%, hsla(0, 0%, 100%, 0.45) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 15%, hsla(338, 60%, 38%, 0.25) 0 8px, transparent 9px),
    radial-gradient(circle at 40% 60%, hsla(0, 0%, 100%, 0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, hsla(338, 60%, 38%, 0.30) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 85%, hsla(0, 0%, 100%, 0.50) 0 9px, transparent 10px),
    linear-gradient(135deg, hsl(338, 42%, 88%), hsl(338, 52%, 70%));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #faf6ef;
  color: var(--ink);
  line-height: 1.5;
}

a { color: var(--primary-dark); }

.site-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}
.brand {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--ink);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
main.main-wide {
  max-width: 1080px;
}

/* Create-a-card split layout: preview stacked on top on mobile (DOM order
   puts it first), swapped to the right half on desktop via `order` so the
   form reads first there while the preview still renders first in markup. */
.create-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.create-preview-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.preview-label {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
@media (min-width: 900px) {
  .create-layout {
    grid-template-columns: 1fr 1fr;
  }
  .create-preview-pane {
    order: 2;
    position: sticky;
    top: 1.5rem;
    /* Grid items default to min-width:auto, sizing the track by their
       content's intrinsic width rather than shrinking to the 1fr track —
       and .hinge-scene's width:min(100%, 1000px) is exactly the kind of
       percentage-based width that can push that intrinsic sizing toward
       the 1000px fallback instead of the actual (much narrower) column,
       letting the sticky preview visually spill into the form column next
       to it. min-width:0 is the standard override for this. */
    min-width: 0;
    /* Explicit, lower stacking-context priority than .create-form-pane
       below — belt-and-suspenders alongside min-width:0. The card's 3D
       transforms (perspective/preserve-3d/translateZ on .hinge-scene and
       its children) can make the browser hit-test a rendered area that
       doesn't line up with the plain layout box in edge cases (reported:
       clicking the toolbar's Rainbow button sometimes hit the card and
       flipped it open instead — a real click-interception, not a
       cosmetic glitch). z-index guarantees the form pane always wins any
       overlapping pixels, regardless of exactly how the 3D scene's hit
       region behaves. */
    z-index: 1;
  }
  .create-form-pane {
    order: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
  }
}

.site-footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--secondary); color: var(--ink); }
.btn-secondary:hover { background: var(--border); }
.btn-small { padding: 0.4rem 0.9rem; font-size: 0.85rem; }

/* Match the native "Choose File" button to the site's pill-shaped .btn style.
   ::file-selector-button is the modern standard; ::-webkit-file-upload-button
   covers older WebKit that only understands the vendor-prefixed name. */
input[type="file"] {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  margin-right: 0.9rem;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  background: var(--secondary);
  color: var(--ink);
  transition: background 0.15s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--border);
}

/* Landing */
.hero { text-align: center; padding: 2rem 0 3rem; }
.hero h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.hero p { color: var(--ink-soft); max-width: 42ch; margin: 0 auto 1.5rem; }
.how-it-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.how-it-works h2 { font-size: 1rem; color: var(--primary-dark); }
.how-it-works p { color: var(--ink-soft); font-size: 0.9rem; }

/* Forms */
form { display: flex; flex-direction: column; gap: 0.4rem; }
label { font-weight: 700; margin-top: 0.6rem; font-size: 0.9rem; }
input[type="text"], input[type="email"], textarea, select {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}
form .btn { margin-top: 1.2rem; align-self: flex-start; }
.form-errors { color: var(--primary-dark); }
.field-hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0.2rem 0 0;
}
.field-hint code {
  background: var(--secondary);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.8rem;
}
.slug-preview {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}
.slug-preview code {
  background: var(--secondary);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  color: var(--primary-dark);
  font-weight: 700;
  word-break: break-all;
}

.backdrop-thumb {
  display: block;
  max-width: 220px;
  max-height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-top: 0.4rem;
}
.checkbox-label {
  font-weight: 500;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.checkbox-label input { margin: 0; }

.link-box { margin: 0.75rem 0; }
.link-box input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: monospace;
  font-size: 0.85rem;
  background: #fff;
}

/* Design picker — a single scrollable row rather than wrapping, so a long
   list of designs doesn't push the rest of the form down the page. */
.design-picker {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.4rem; /* keeps the scrollbar from sitting flush against the swatches */
  margin-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
.design-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0; /* keep each swatch at full size instead of squishing to fit */
}
.design-option input { position: absolute; opacity: 0; }
.design-swatch {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 2px solid transparent;
  box-shadow: var(--shadow);
  overflow: hidden; /* the design-<key> pattern class now lives directly on
                        this element (see card_settings_fields.php) —
                        previously it was on the outer label, so the
                        background painted across the label's full height
                        (swatch + text) instead of being confined to this
                        64x64 box, making the pattern visibly spill past the
                        checked-state border. */
}
.design-option input:checked + .design-swatch { border-color: var(--primary); }

/* Card designs */
.design-confetti {
  background:
    radial-gradient(circle at 15% 20%, #ffd166 0 6px, transparent 7px),
    radial-gradient(circle at 70% 15%, #ef476f 0 5px, transparent 6px),
    radial-gradient(circle at 40% 60%, #06d6a0 0 5px, transparent 6px),
    radial-gradient(circle at 85% 70%, #118ab2 0 6px, transparent 7px),
    radial-gradient(circle at 25% 85%, #ffd166 0 4px, transparent 5px),
    linear-gradient(135deg, #fff3d6, #ffe1ec);
}
.design-balloons {
  background:
    radial-gradient(circle at 20% 30%, #a78bfa 0 26px, transparent 27px),
    radial-gradient(circle at 55% 15%, #60a5fa 0 22px, transparent 23px),
    radial-gradient(circle at 80% 45%, #f472b6 0 24px, transparent 25px),
    radial-gradient(circle at 35% 70%, #34d399 0 20px, transparent 21px),
    linear-gradient(160deg, #eef2ff, #ede9fe);
}
.design-elegant {
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,0.12) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, #1f2440, #2b2f57);
  color: #fdf6e3;
}
.design-elegant .hero-title { color: #f1d888; }

/* Split variants for the two inside half-panels: the same recipe, sized to
   200% width so it reads as one continuous pattern across the fold, with
   background-position picking out each half's portion of that shared image. */
.design-confetti-left, .design-confetti-right {
  background-size: 200% 100%;
  background-image:
    radial-gradient(circle at 15% 20%, #ffd166 0 6px, transparent 7px),
    radial-gradient(circle at 70% 15%, #ef476f 0 5px, transparent 6px),
    radial-gradient(circle at 40% 60%, #06d6a0 0 5px, transparent 6px),
    radial-gradient(circle at 85% 70%, #118ab2 0 6px, transparent 7px),
    radial-gradient(circle at 25% 85%, #ffd166 0 4px, transparent 5px),
    linear-gradient(135deg, #fff3d6, #ffe1ec);
}
.design-confetti-left { background-position: left top; }
.design-confetti-right { background-position: right top; }

.design-balloons-left, .design-balloons-right {
  background-size: 200% 100%;
  background-image:
    radial-gradient(circle at 20% 30%, #a78bfa 0 26px, transparent 27px),
    radial-gradient(circle at 55% 15%, #60a5fa 0 22px, transparent 23px),
    radial-gradient(circle at 80% 45%, #f472b6 0 24px, transparent 25px),
    radial-gradient(circle at 35% 70%, #34d399 0 20px, transparent 21px),
    linear-gradient(160deg, #eef2ff, #ede9fe);
}
.design-balloons-left { background-position: left top; }
.design-balloons-right { background-position: right top; }

.design-elegant-left, .design-elegant-right {
  background-size: 200% 100%;
  background-image:
    repeating-linear-gradient(45deg, rgba(212,175,55,0.12) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, #1f2440, #2b2f57);
  color: #fdf6e3;
}
.design-elegant-left { background-position: left top; }
.design-elegant-right { background-position: right top; }

/* 16 backdrop-first variations — each just applies its --pattern-* custom
   property (defined in :root above); split halves add the same 200%-width
   seamless-continuation treatment used by the original designs. */
.design-ruby-rose, .design-ruby-rose-left, .design-ruby-rose-right { background-image: var(--pattern-ruby-rose); }
.design-ruby-rose-left, .design-ruby-rose-right { background-size: 200% 100%; }
.design-ruby-rose-left { background-position: left top; }
.design-ruby-rose-right { background-position: right top; }

.design-coral-sunset, .design-coral-sunset-left, .design-coral-sunset-right { background-image: var(--pattern-coral-sunset); }
.design-coral-sunset-left, .design-coral-sunset-right { background-size: 200% 100%; }
.design-coral-sunset-left { background-position: left top; }
.design-coral-sunset-right { background-position: right top; }

.design-golden-amber, .design-golden-amber-left, .design-golden-amber-right { background-image: var(--pattern-golden-amber); }
.design-golden-amber-left, .design-golden-amber-right { background-size: 200% 100%; }
.design-golden-amber-left { background-position: left top; }
.design-golden-amber-right { background-position: right top; }

.design-citrus-lime, .design-citrus-lime-left, .design-citrus-lime-right { background-image: var(--pattern-citrus-lime); }
.design-citrus-lime-left, .design-citrus-lime-right { background-size: 200% 100%; }
.design-citrus-lime-left { background-position: left top; }
.design-citrus-lime-right { background-position: right top; }

.design-garden-green, .design-garden-green-left, .design-garden-green-right { background-image: var(--pattern-garden-green); }
.design-garden-green-left, .design-garden-green-right { background-size: 200% 100%; }
.design-garden-green-left { background-position: left top; }
.design-garden-green-right { background-position: right top; }

.design-emerald-isle, .design-emerald-isle-left, .design-emerald-isle-right { background-image: var(--pattern-emerald-isle); }
.design-emerald-isle-left, .design-emerald-isle-right { background-size: 200% 100%; }
.design-emerald-isle-left { background-position: left top; }
.design-emerald-isle-right { background-position: right top; }

.design-jade-teal, .design-jade-teal-left, .design-jade-teal-right { background-image: var(--pattern-jade-teal); }
.design-jade-teal-left, .design-jade-teal-right { background-size: 200% 100%; }
.design-jade-teal-left { background-position: left top; }
.design-jade-teal-right { background-position: right top; }

.design-seafoam-mist, .design-seafoam-mist-left, .design-seafoam-mist-right { background-image: var(--pattern-seafoam-mist); }
.design-seafoam-mist-left, .design-seafoam-mist-right { background-size: 200% 100%; }
.design-seafoam-mist-left { background-position: left top; }
.design-seafoam-mist-right { background-position: right top; }

.design-turquoise-bay, .design-turquoise-bay-left, .design-turquoise-bay-right { background-image: var(--pattern-turquoise-bay); }
.design-turquoise-bay-left, .design-turquoise-bay-right { background-size: 200% 100%; }
.design-turquoise-bay-left { background-position: left top; }
.design-turquoise-bay-right { background-position: right top; }

.design-sky-blue, .design-sky-blue-left, .design-sky-blue-right { background-image: var(--pattern-sky-blue); }
.design-sky-blue-left, .design-sky-blue-right { background-size: 200% 100%; }
.design-sky-blue-left { background-position: left top; }
.design-sky-blue-right { background-position: right top; }

.design-ocean-blue, .design-ocean-blue-left, .design-ocean-blue-right { background-image: var(--pattern-ocean-blue); }
.design-ocean-blue-left, .design-ocean-blue-right { background-size: 200% 100%; }
.design-ocean-blue-left { background-position: left top; }
.design-ocean-blue-right { background-position: right top; }

.design-midnight-indigo, .design-midnight-indigo-left, .design-midnight-indigo-right { background-image: var(--pattern-midnight-indigo); }
.design-midnight-indigo-left, .design-midnight-indigo-right { background-size: 200% 100%; }
.design-midnight-indigo-left { background-position: left top; }
.design-midnight-indigo-right { background-position: right top; }

.design-royal-purple, .design-royal-purple-left, .design-royal-purple-right { background-image: var(--pattern-royal-purple); }
.design-royal-purple-left, .design-royal-purple-right { background-size: 200% 100%; }
.design-royal-purple-left { background-position: left top; }
.design-royal-purple-right { background-position: right top; }

.design-orchid-bloom, .design-orchid-bloom-left, .design-orchid-bloom-right { background-image: var(--pattern-orchid-bloom); }
.design-orchid-bloom-left, .design-orchid-bloom-right { background-size: 200% 100%; }
.design-orchid-bloom-left { background-position: left top; }
.design-orchid-bloom-right { background-position: right top; }

.design-fuchsia-pop, .design-fuchsia-pop-left, .design-fuchsia-pop-right { background-image: var(--pattern-fuchsia-pop); }
.design-fuchsia-pop-left, .design-fuchsia-pop-right { background-size: 200% 100%; }
.design-fuchsia-pop-left { background-position: left top; }
.design-fuchsia-pop-right { background-position: right top; }

.design-blush-pink, .design-blush-pink-left, .design-blush-pink-right { background-image: var(--pattern-blush-pink); }
.design-blush-pink-left, .design-blush-pink-right { background-size: 200% 100%; }
.design-blush-pink-left { background-position: left top; }
.design-blush-pink-right { background-position: right top; }

/* Card 3D stage — one folded sheet, not a slideshow. There are exactly two
   physical half-panels sharing a hinge at the center (like a real folded
   card): the RIGHT panel's two faces (via backface-visibility) are FRONT and
   the right half of the INSIDE; the LEFT panel's two faces are BACK and the
   left half of the INSIDE. Opening the card rotates only the right panel
   around the shared hinge from 0deg (flat/open, its natural resting angle)
   to -180deg (folded back over the left panel, showing FRONT) — the interior
   is simply what you see at 0deg, not a separate object that fades in.
   Seeing the back is a distinct gesture: the whole closed stack (both panels,
   wherever the cover's fold currently is) spins 180deg around its own
   center — a coin-flip of the closed card, independent of the fold.

   All of that geometry naturally puts the spine/hinge on the RIGHT of the
   closed card. To read on the LEFT instead — without re-deriving the whole
   fold — .mirror-wrapper spins the entire flip-wrapper 180deg (Z-axis, in
   the screen plane), which swaps which visual side everything lands on.
   Since a rotation (unlike a mirror/reflection) preserves readability when
   undone, every .face gets a matching local rotate(180deg) to counter-rotate
   its own content and backdrop back to normal — the box's position (now on
   the opposite side) is unaffected, since rotating a box around its own
   center never moves it. The signature overlay sits outside mirror-wrapper
   entirely, so stored positions are untouched by any of this. */
.card-3d-stage {
  perspective: 2400px;
  margin: 1.5rem auto 0.5rem;
  /* Explicit width, not just relying on the default block "auto" behavior:
     .create-preview-pane is a flex container with align-items:center, which
     makes flex children shrink-to-fit their own content instead of filling
     the pane — and this element's only "content" was .hinge-scene's own
     width:min(100%,1000px), a percentage inside a shrink-to-fit parent,
     which is exactly the kind of circular case container-type below can tip
     into collapsing to a near-zero width. An explicit 100% removes the
     ambiguity entirely (harmless on card.php, where this was already a
     normal block filling its parent by default). */
  width: 100%;
  /* Lets .hero-title scale with the card's own rendered size (via cqw units
     below) instead of a fixed rem value that looks right only at whatever
     one size it happened to be tuned for — the card renders at very
     different sizes between the full card page (up to 1000px) and the
     create.php live preview (roughly half that, in its narrower column). */
  container-type: inline-size;
}
.hinge-scene {
  position: relative;
  width: min(100%, 1000px);
  aspect-ratio: 10 / 7;
  margin: 0 auto;
  border-radius: 20px;
  transform-style: preserve-3d;
  /* The whole card is clickable (cycles front->inside->back), and its text
     (title, signature notes) isn't meant to be selected — no I-beam cursor,
     no text selection, just a pointer indicating it's interactive. */
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  /* hinge-scene's own box never changes size — only its rotating contents
     do — so its box-shadow doesn't track the fold visually; it just sits in
     its final position throughout. A plain CSS transition-delay can't fix
     this correctly since it's symmetric (same delay entering AND leaving
     open) — entering needs the delay, leaving needs to drop it immediately.
     app.js toggles the .shadow-visible class with that asymmetric timing;
     this rule just handles the resulting fade in either direction. */
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}
.hinge-scene.shadow-visible {
  box-shadow: var(--shadow);
}
.hinge-scene[data-state="front"] {
  /* Without the mirror, folded-closed content lands at 25% of the stage.
     mirror-wrapper's 180deg spin reflects that through the stage's own
     center (50%) to 75% — so it now needs a -25% shift left to center. */
  transform: translateX(-25%);
}
.hinge-scene[data-state="back"] {
  /* Without the mirror, flip-wrapper's spin alone lands back-state content
     at 75%. mirror-wrapper reflects that again through center to 25% — so
     it now needs a +25% shift right to center. */
  transform: translateX(25%);
}

.mirror-wrapper {
  position: absolute;
  inset: 0;
  transform: rotate(180deg);
  transform-style: preserve-3d;
}

.flip-wrapper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.hinge-scene[data-state="back"] .flip-wrapper {
  transform: rotateY(180deg);
}

/* Signature notes sit in their own flat overlay, unsplit, so one near the
   fold never gets clipped by either half's own boundary — only visible
   (and interactive) once the card is actually open. */
.signature-overlay {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  transform: translateZ(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease 0.25s;
}
.hinge-scene[data-state="open"] .signature-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* The printed inside message — a plain note centered (both axes) over the
   open spread, behind wherever signatures land. Always present in the DOM
   (see card_stage.php) so the live editor has something to mirror into as
   the creator types; :empty collapses it away entirely when there's no
   message, which is a normal, valid state, not a loading/error one. */
.inside-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  font-size: clamp(0.95rem, 3.2cqw, 1.4rem);
  line-height: 1.4;
  color: var(--ink);
}
.inside-message:empty {
  display: none;
}

.left-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transition: opacity 0.3s ease;
}
.hinge-scene[data-state="front"] .left-panel {
  /* face-right-inside is only rounded on its right corners (it's normally
     half of an open spread), but while closed it sits directly behind
     face-front, which rounds all four — exposing face-right-inside's square
     left corners right through face-front's rounded-away ones. Nothing
     behind the cover should be visible while closed, so just hide it. */
  opacity: 0;
}

.right-lift {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  /* This forward nudge only matters while closed, to keep the folded-over
     cover nearer the camera than the left panel underneath it. Left active
     while open, it out-ranks the left panel at the same nominal depth and
     causes z-fighting right at the seam — so it's zeroed out below once open. */
  transform: translateZ(2px);
  transform-style: preserve-3d;
  transition: opacity 0.25s ease, transform 0.6s ease;
}
.hinge-scene[data-state="open"] .right-lift {
  transform: translateZ(0);
}
.hinge-scene[data-state="back"] .right-lift {
  /* Safety net: once flipped to the back, force the right panel out of the
     way rather than depend on nested-rotation depth-sorting alone. */
  opacity: 0;
  pointer-events: none;
}

.right-panel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(-180deg);
  transition: transform 0.6s ease;
}
.hinge-scene[data-state="open"] .right-panel {
  transform: rotateY(0deg);
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}
/* Left-inside/right-inside together form one continuous open spread — no
   shadow of their own (that's what was reading as a crease down the middle:
   two independent shadows meeting at the seam); the whole open spread gets
   one shared outer shadow instead, from .hinge-scene below. Only their outer
   corners round. Front/back are always shown alone as standalone cards, so
   they keep their own full shadow and full rounding. */
/* Every face also counter-rotates 180deg (Z-axis) to cancel mirror-wrapper's
   spin for its own content/backdrop — see the comment above .card-3d-stage. */
.face-left-inside { border-radius: 20px 0 0 20px; transform: rotate(180deg); }
.face-right-inside { border-radius: 0 20px 20px 0; transform: rotate(180deg); }
/* Rounded only on the free/outer edge, square on the spine edge — the front
   cover's spine reads on the left (see .hinge-scene[data-state="front"]
   above), so it rounds on the right; the back cover's spine is still the
   same physical edge, which reads on the left from the back too, so it
   rounds on the left. Matches face-right-inside/face-left-inside's rounding
   respectively, which happen to be the faces structurally behind each. */
.face-front { border-radius: 0 20px 20px 0; box-shadow: var(--shadow); transform: rotateY(180deg) rotate(180deg); }
.face-back { border-radius: 20px 0 0 20px; box-shadow: var(--shadow); background: var(--secondary); transform: rotateY(180deg) rotate(180deg); }

.hero-title {
  font-size: 2rem; /* fallback for browsers without container query unit support */
  font-size: clamp(1.3rem, 6.5cqw, 2.75rem);
  margin: 0;
}
.back-logo { max-width: 55%; }

.card-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.nav-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* Highlight whichever of the three always-present nav buttons matches the
   current view, so it's clear where you are without the buttons themselves
   changing. */
.hinge-scene[data-state="front"] ~ .card-controls .nav-btn[data-action="front"],
.hinge-scene[data-state="open"] ~ .card-controls .nav-btn[data-action="inside"],
.hinge-scene[data-state="back"] ~ .card-controls .nav-btn[data-action="back"] {
  background: var(--primary);
  color: #fff;
}

.card-controls .ctrl-open {
  display: none;
}
.hinge-scene[data-state="open"] ~ .card-controls .btn.ctrl-open { display: inline-block; }
.hinge-scene[data-state="open"] ~ .card-controls .locked-note.ctrl-open { display: block; }
.locked-note { color: var(--ink-soft); font-size: 0.9rem; }

/* Signature blocks */
.signature-block {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  max-width: 150px;
  text-align: center;
  font-size: 0.85rem;
}
.signature-block.dragging { cursor: grab; touch-action: none; user-select: none; }
.signature-name { font-size: 1.3rem; line-height: 1.1; }
.signature-message { font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.2rem; }
.signature-gif { max-width: 100%; border-radius: 6px; margin-top: 0.3rem; }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(43,36,56,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.modal[hidden] { display: none; }
.modal-content {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink-soft);
}
.sign-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 7;
  border-radius: 12px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.drag-hint { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 0.5rem; }

.honeypot { position: absolute; left: -9999px; }

/* Toast */
.toast {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #eafaf1;
  color: #1b7a4b;
  text-align: center;
}
.toast-error { background: #fdecec; color: var(--primary-dark); }

/* Admin */
.admin-page section { margin-top: 2rem; }
.admin-sig-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  background: #fff;
}
.admin-sig-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }

/* Rich title editor (create.php / admin.php card settings) */
.rich-text-field { margin-top: 0.6rem; }
.rich-text-field label { margin-top: 0; }
.rich-text-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.rt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.rt-btn {
  min-width: 2.1rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1.4;
}
.rt-btn:hover { background: var(--border); }
.rt-rainbow { font-size: 0.85rem; white-space: nowrap; }
.rt-clear { font-size: 0.8rem; color: var(--ink-soft); }
/* Fixed palette, replacing the native <input type="color"> picker — see
   RICH_TEXT_COLOR_PALETTE in helpers.php and the bug note in
   rich-text-editor.js for why. */
.rt-color-swatch {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.rt-color-swatch:hover { border-color: var(--ink-soft); }
.rt-font, .rt-size {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  background: #fff;
  max-width: 8rem;
}
.rich-text-editor {
  min-height: 2.8rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  background: #fff;
  font-size: 1.3rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rich-text-editor:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}
.rich-text-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-soft);
  font-weight: 400;
}
.lock-form { margin-top: 1rem; }