:root {
  --ink: #32142e;
  --ink-2: #4b2544;
  --ink-3: #6d4966;
  --muted: #8e7788;
  --bg: #fff8f4;
  --bg-2: #f8ede9;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #fffefd;
  --line: rgba(93, 47, 78, 0.16);
  --line-strong: rgba(93, 47, 78, 0.28);
  --blush: #e89382;
  --blush-2: #f4b4a7;
  --champagne: #f4ded5;
  --gold: #c89b64;
  --green: #6c9b6c;
  --green-bg: #edf7ed;
  --amber: #c88733;
  --amber-bg: #fff4df;
  --red: #c94e43;
  --red-bg: #fff0ed;
  --shadow: 0 26px 70px rgba(67, 29, 55, 0.16);
  --soft-shadow: 0 14px 36px rgba(67, 29, 55, 0.12);
  --aubergine: #3a2233;
  --aubergine-deep: #271520;
  --blush-strong: #d99a96;
  --ivory: #fff8f4;
  --surface-glass: rgba(255, 255, 255, 0.62);
  --grad-hero: linear-gradient(155deg, #2c1028 0%, #4c2741 42%, #b9786f 100%);
  --grad-blush: linear-gradient(135deg, #f3e3cf 0%, #e9c4c0 100%);
  --grad-photo-1: linear-gradient(135deg, #d99a96, #f3e3cf);
  --grad-photo-2: linear-gradient(135deg, #b9786f, #e9c4c0);
  --grad-photo-3: linear-gradient(135deg, #7d5068, #d9b8a8);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(43, 29, 41, 0.06);
  --shadow-md: 0 12px 30px rgba(43, 29, 41, 0.10);
  --shadow-lg: 0 28px 60px rgba(43, 29, 41, 0.18);
  --shadow-glass: 0 20px 50px rgba(43, 29, 41, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 13px;
  --serif: "Bodoni 72", "Didot", "Cormorant Garamond", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 8% 5%, rgba(232, 147, 130, 0.22), transparent 28rem),
    radial-gradient(circle at 100% 14%, rgba(200, 155, 100, 0.18), transparent 24rem),
    linear-gradient(145deg, #fffaf7 0%, #fff7f2 46%, #f7e9e4 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

a {
  color: inherit;
}

figure {
  margin: 0;
}

#app {
  min-height: 100vh;
}

.app-loader {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--ink-2);
}

/* Shared primitives */
.glass {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.icon {
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: -0.22em;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn,
.success-btn,
.text-btn {
  border: 0;
  border-radius: 999px;
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 760;
  letter-spacing: -0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.danger-btn:hover,
.success-btn:hover,
.text-btn:hover {
  transform: translateY(-1px);
}

.primary-btn {
  color: #fff8f3;
  background: linear-gradient(135deg, #d98276, #efa18e 52%, #f2b19d);
  box-shadow: 0 18px 36px rgba(219, 120, 106, 0.28);
}

.primary-btn.dark {
  background: linear-gradient(135deg, #2e112a, #533049);
  box-shadow: 0 18px 36px rgba(49, 18, 42, 0.24);
}

.secondary-btn {
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.ghost-btn,
.text-btn {
  color: var(--ink-2);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.42);
}

.text-btn {
  min-height: 36px;
  padding: 0 10px;
  background: transparent;
  color: var(--muted);
}

.danger-btn {
  color: var(--red);
  border: 1px solid rgba(201, 78, 67, 0.24);
  background: var(--red-bg);
}

.success-btn {
  color: #3d763e;
  border: 1px solid rgba(108, 155, 108, 0.34);
  background: var(--green-bg);
}

.input-box,
.select-box,
textarea.input-box {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(110, 63, 93, 0.2);
  border-radius: 18px;
  padding: 0 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

textarea.input-box {
  min-height: 110px;
  padding-block: 14px;
  resize: vertical;
}

.input-box:focus,
.select-box:focus,
textarea.input-box:focus {
  border-color: rgba(232, 147, 130, 0.76);
  box-shadow: 0 0 0 4px rgba(232, 147, 130, 0.16);
}

.small-muted {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1;
}

.status-pill.pending,
.status-pill.deferred {
  color: #9a641d;
  background: var(--amber-bg);
  border: 1px solid rgba(200, 135, 51, 0.22);
}

.status-pill.approved {
  color: #3e7b3f;
  background: var(--green-bg);
  border: 1px solid rgba(108, 155, 108, 0.22);
}

.status-pill.rejected {
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid rgba(201, 78, 67, 0.2);
}

.progress-track {
  height: 8px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(95, 50, 81, 0.12);
}

.progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #4a1f42, #d98377);
  transition: width 180ms ease;
}

.hidden-file {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Navigation strip */
.public-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(180deg, rgba(255, 248, 244, 0.94), rgba(255, 248, 244, 0.72));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(91, 45, 78, 0.08);
}

.public-nav-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  font-weight: 820;
  letter-spacing: -0.02em;
}

.public-logo-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff8f4;
  border-radius: 999px;
  background: linear-gradient(145deg, #34142f, #6b3f62);
  box-shadow: 0 8px 24px rgba(48, 18, 42, 0.22);
}

.public-tabs {
  margin-left: auto;
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(88, 46, 76, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
}

.public-tab {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 13px;
  color: var(--ink-3);
  background: transparent;
  font-size: 0.86rem;
  font-weight: 760;
}

.public-tab.active {
  color: #fff8f4;
  background: var(--ink);
}

@media (max-width: 640px) {
  .public-logo span:last-child {
    display: none;
  }

  .public-tabs {
    gap: 2px;
    overflow-x: auto;
    max-width: calc(100vw - 62px);
  }

  .public-tab {
    white-space: nowrap;
    padding-inline: 11px;
  }
}

/* Guest upload */
.guest-page {
  min-height: 100vh;
  padding: 18px 0 calc(110px + env(safe-area-inset-bottom));
}

.phone-stage {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 0 12px;
}

.wedding-hero {
  position: relative;
  overflow: hidden;
  min-height: 236px;
  border-radius: 0 0 42px 42px;
  padding: 30px 22px 26px;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 30%, rgba(255, 255, 255, 0.28) 0 9rem, transparent 9.4rem),
    linear-gradient(110deg, rgba(255, 252, 249, 0.94) 0%, rgba(255, 249, 244, 0.84) 47%, rgba(233, 196, 178, 0.58) 100%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: var(--soft-shadow);
}

.wedding-hero::before {
  content: "";
  position: absolute;
  inset: -50px auto auto -74px;
  width: 190px;
  height: 260px;
  opacity: 0.42;
  background:
    radial-gradient(circle at 48% 18%, #e6a498 0 16px, transparent 17px),
    radial-gradient(circle at 58% 28%, #f4c7bb 0 28px, transparent 29px),
    radial-gradient(circle at 32% 44%, #e9b0a3 0 22px, transparent 23px),
    radial-gradient(ellipse at 70% 55%, rgba(111, 147, 107, 0.52) 0 18px, transparent 19px),
    radial-gradient(ellipse at 36% 70%, rgba(130, 160, 122, 0.42) 0 15px, transparent 16px);
  filter: blur(0.2px);
  transform: rotate(-16deg);
}

.wedding-hero::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 30px;
  width: 220px;
  height: 180px;
  border-radius: 38% 62% 45% 55%;
  background:
    radial-gradient(circle at 38% 36%, rgba(255, 255, 255, 0.86), transparent 0 10px),
    radial-gradient(circle at 48% 44%, rgba(68, 35, 59, 0.72), transparent 0 34px),
    radial-gradient(circle at 58% 44%, rgba(247, 220, 204, 0.9), transparent 0 36px),
    radial-gradient(circle at 62% 34%, rgba(79, 47, 45, 0.78), transparent 0 28px),
    linear-gradient(145deg, rgba(239, 199, 177, 0.82), rgba(255, 255, 255, 0.2));
  opacity: 0.65;
  filter: saturate(0.9);
}

.brand-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 15vw, 5.4rem);
  line-height: 0.86;
  letter-spacing: -0.07em;
  max-width: 330px;
}

.brand-title .amp {
  color: #df9b91;
  font-style: italic;
  font-size: 0.76em;
}

.hero-heart {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  margin: 16px auto 0;
  color: #dc9387;
}

.upload-card {
  position: relative;
  z-index: 2;
  margin: -18px 12px 0;
  padding: 28px 20px 22px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 64px rgba(56, 22, 48, 0.14);
}

.upload-card h1,
.upload-card h2,
.album-card h1,
.album-card h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.field-label {
  display: block;
  margin: 0 0 9px;
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.email-field {
  position: relative;
  margin-bottom: 26px;
}

.email-field .input-box {
  padding-left: 50px;
  padding-right: 48px;
}

.email-field .mail-icon,
.email-field .ok-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.email-field .mail-icon {
  left: 17px;
  color: #ba847d;
}

.email-field .ok-icon {
  right: 16px;
  color: var(--green);
  opacity: 0;
}

.email-field.valid .ok-icon {
  opacity: 1;
}

.section-headline {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 14px;
}

.photo-choice-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.section-headline h2,
.upload-section-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 7vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.selected-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(98px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scroll-snap-type: x proximity;
}

.selected-photo,
.my-photo,
.admin-thumb,
.album-photo {
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  background: linear-gradient(135deg, #f0d8cf, #fff7f2);
  box-shadow: 0 10px 24px rgba(71, 31, 60, 0.12);
}

.selected-photo {
  width: 106px;
  height: 128px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.selected-photo img,
.my-photo img,
.admin-thumb img,
.album-photo img,
.inspector-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.selected-photo .remove,
.selected-photo .check,
.my-photo .check,
.admin-thumb .check {
  position: absolute;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  color: #fff;
  background: rgba(58, 25, 51, 0.76);
  backdrop-filter: blur(8px);
}

.selected-photo .remove {
  top: 7px;
  right: 7px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
}

.selected-photo .check,
.my-photo .check,
.admin-thumb .check {
  right: 7px;
  bottom: 7px;
}

.file-progress-mini {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.54);
  overflow: hidden;
}

.file-progress-mini span {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: #fff;
}

.add-tile {
  min-width: 106px;
  min-height: 128px;
  border: 1px dashed rgba(114, 58, 96, 0.28);
  border-radius: 17px;
  color: var(--ink-2);
  background: linear-gradient(145deg, rgba(255, 245, 241, 0.9), rgba(255, 255, 255, 0.65));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
}

.add-tile strong {
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 0.8;
  font-weight: 400;
}

.add-tile span {
  font-size: 0.85rem;
  font-weight: 760;
}

.upload-progress-box,
.privacy-note,
.empty-box,
.qr-box {
  border: 1px solid rgba(122, 65, 103, 0.14);
  border-radius: 20px;
  background: rgba(255, 251, 248, 0.76);
  padding: 16px;
}

.upload-progress-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
  font-weight: 760;
}

.progress-preview-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 54px;
  gap: 8px;
  overflow-x: auto;
  margin-top: 14px;
  padding-bottom: 2px;
}

.progress-preview-row img {
  width: 54px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  opacity: 0.8;
}

.success-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: var(--green);
  font-weight: 760;
}

.my-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.my-photo {
  aspect-ratio: 1 / 1;
}

.more-count {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 17px;
  border: 1px solid rgba(114, 58, 96, 0.12);
  color: var(--ink-2);
  background: rgba(255, 246, 242, 0.82);
  text-align: center;
}

.more-count strong {
  display: block;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 0.9;
}

.privacy-note {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 20px;
  color: var(--ink-2);
  background: linear-gradient(135deg, rgba(255, 245, 241, 0.9), rgba(255, 255, 255, 0.78));
}

.privacy-note svg {
  flex: 0 0 auto;
  color: #de9287;
}

.sticky-upload-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 35;
  width: min(100%, 548px);
  transform: translateX(-50%);
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  color: #fff8f4;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(135deg, rgba(45, 15, 40, 0.98), rgba(74, 32, 66, 0.98));
  box-shadow: 0 -18px 46px rgba(40, 12, 34, 0.24);
}

.sticky-upload-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

.sticky-upload-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #ee9b8f;
}

.sticky-upload-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: -0.035em;
}

.sticky-upload-subtitle {
  margin: 2px 0 0;
  color: rgba(255, 248, 244, 0.78);
  font-size: 0.88rem;
}

.sticky-upload-bar .primary-btn {
  min-height: 54px;
  min-width: 144px;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(98px + env(safe-area-inset-bottom));
  z-index: 80;
  transform: translateX(-50%);
  max-width: min(92vw, 460px);
  padding: 12px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(49, 18, 42, 0.94);
  box-shadow: 0 18px 50px rgba(45, 15, 40, 0.24);
}

/* Claude Design uplift: shared decorative layers */
.floral-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  filter: blur(1.5px) saturate(1.05);
  pointer-events: none;
  z-index: 0;
}

/* Guest upload: premium mobile app shell */
.wedding-hero > *:not(.floral-layer) {
  position: relative;
  z-index: 1;
}

.upload-florals {
  opacity: 0.48;
  mix-blend-mode: multiply;
}

.photo-stack {
  position: relative;
  width: min(178px, 54vw);
  height: 152px;
  margin: 2px auto 24px;
}

.photo-stack-card {
  position: absolute;
  inset: 0;
  width: 122px;
  height: 150px;
  left: 50%;
  margin-left: -61px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 20px 44px rgba(50, 20, 46, 0.22);
  transform-origin: 50% 100%;
}

.photo-stack-card::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 18px;
  border: 1px solid rgba(255, 248, 244, 0.38);
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.82) 0 12px, transparent 13px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 50%);
}

.stack-card-1 {
  background: var(--grad-photo-1);
  transform: rotate(-9deg) translateX(-38px) translateY(8px);
}

.stack-card-2 {
  background: var(--grad-photo-2);
  transform: rotate(7deg) translateX(38px) translateY(10px);
}

.stack-card-3 {
  background: var(--grad-photo-3);
  transform: rotate(-1deg);
}

.upload-kicker {
  margin: 0 0 9px;
  color: rgba(50, 20, 46, 0.62);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.upload-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 350px;
  margin: 14px 0 0;
  color: rgba(50, 20, 46, 0.68);
  font-size: 1rem;
  line-height: 1.55;
}

/* Album */
.album-page {
  min-height: 100vh;
  padding: 20px 14px 76px;
  background:
    radial-gradient(circle at 8% 4%, rgba(232, 147, 130, 0.24), transparent 30rem),
    radial-gradient(circle at 92% 26%, rgba(200, 155, 100, 0.17), transparent 28rem),
    linear-gradient(145deg, #fff9f5 0%, #fbefe9 52%, #f4e3dc 100%);
}

.album-hero-scene {
  position: relative;
  overflow: hidden;
  width: min(1160px, 100%);
  min-height: clamp(520px, 73vh, 700px);
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  color: var(--ivory);
  background: var(--grad-hero);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.album-hero-scene::before,
.album-hero-scene::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

.album-hero-scene::before {
  width: 520px;
  height: 520px;
  right: -180px;
  top: -160px;
  background: radial-gradient(circle, rgba(255, 248, 244, 0.24), transparent 64%);
}

.album-hero-scene::after {
  width: 460px;
  height: 460px;
  left: -170px;
  bottom: -160px;
  background: radial-gradient(circle, rgba(232, 147, 130, 0.34), transparent 62%);
}

.album-hero-glow {
  position: absolute;
  inset: auto 8% 8% 8%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 248, 244, 0.16), transparent 68%);
  filter: blur(18px);
  z-index: 0;
}

.album-hero-inner {
  position: relative;
  z-index: 1;
  width: min(760px, 92%);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 112px) clamp(20px, 5vw, 56px);
  text-align: center;
}

.album-kicker {
  margin: 0 0 26px;
  color: rgba(255, 248, 244, 0.76);
  font-size: clamp(0.74rem, 1.6vw, 0.86rem);
  font-weight: 850;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.album-monogram {
  width: 118px;
  height: 118px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 244, 0.36);
  border-radius: 999px;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 54px rgba(39, 21, 32, 0.24);
  font-family: var(--serif);
  font-size: 2.15rem;
  letter-spacing: 0.18em;
  backdrop-filter: blur(16px);
}

.album-monogram span {
  color: #f2b4a8;
  font-style: italic;
  margin-inline: -0.18em;
}

.album-monogram.small {
  width: 76px;
  height: 76px;
  margin-bottom: 16px;
  color: var(--ink);
  border-color: rgba(50, 20, 46, 0.14);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
  font-size: 1.4rem;
}

.album-hero-inner h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 10vw, 7.6rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.075em;
  text-wrap: balance;
}

.album-hero-inner > p:not(.album-kicker) {
  max-width: 680px;
  margin: 30px auto 0;
  color: rgba(255, 248, 244, 0.86);
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.72;
}

.album-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.secondary-btn.light {
  color: var(--ivory);
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
}

.primary-btn.blush {
  color: var(--aubergine-deep);
  background: linear-gradient(135deg, #fff8f4, #f1b0a3 56%, #d98a7d);
  box-shadow: 0 20px 42px rgba(42, 15, 36, 0.28);
}

.album-content-shell {
  width: min(1080px, calc(100% - 20px));
  margin: -68px auto 0;
  position: relative;
  z-index: 2;
}

.album-release-card,
.album-preview-panel,
.album-gallery-section {
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: var(--r-xl);
  background: var(--surface-glass);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(22px) saturate(140%);
}

.album-release-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.86fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  padding: clamp(24px, 4.8vw, 44px);
}

.release-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 14px;
  border-radius: var(--r-pill);
  padding: 0 12px;
  color: var(--ivory);
  background: linear-gradient(135deg, var(--aubergine), #6b3f62);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.release-pill.soft {
  color: var(--ink-2);
  border: 1px solid rgba(50, 20, 46, 0.11);
  background: rgba(255, 255, 255, 0.64);
}

.album-release-copy h2,
.album-preview-copy h2,
.album-section-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.35rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.06em;
}

.album-release-copy p,
.album-preview-copy p,
.album-section-heading p {
  margin: 16px 0 0;
  color: var(--ink-3);
  font-size: 1rem;
  line-height: 1.66;
}

.album-release-actions {
  display: grid;
  gap: 12px;
  justify-items: stretch;
}

.album-gate-form {
  display: grid;
  gap: 12px;
}

.album-email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.album-email-row .primary-btn {
  min-height: 58px;
}

.album-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.album-stat-grid > div {
  min-height: 130px;
  padding: 22px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: var(--shadow-sm);
}

.album-stat-grid strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.45rem, 6vw, 4.4rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.album-stat-grid span {
  display: block;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 0.92rem;
  font-weight: 760;
}

.album-preview-panel {
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
  gap: clamp(22px, 5vw, 54px);
  align-items: center;
  min-height: 440px;
  padding: clamp(24px, 5vw, 48px);
}

.album-preview-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 18%, rgba(232, 147, 130, 0.18), transparent 24rem),
    radial-gradient(circle at 20% 90%, rgba(200, 155, 100, 0.13), transparent 20rem);
  pointer-events: none;
}

.album-preview-copy,
.album-preview-stack {
  position: relative;
  z-index: 1;
}

.album-preview-copy .secondary-btn {
  margin-top: 26px;
}

.album-preview-stack {
  min-height: 330px;
}

.preview-photo-card {
  position: absolute;
  overflow: hidden;
  width: 46%;
  max-width: 250px;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background: var(--grad-photo-1);
  box-shadow: 0 26px 58px rgba(50, 20, 46, 0.18);
}

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

.preview-placeholder span {
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.72) 0 18px, transparent 20px),
    linear-gradient(135deg, rgba(217, 154, 150, 0.9), rgba(243, 227, 207, 0.92));
}

.preview-card-1 { left: 5%; top: 18%; transform: rotate(-9deg); z-index: 3; }
.preview-card-2 { left: 33%; top: 4%; transform: rotate(5deg); z-index: 4; }
.preview-card-3 { right: 4%; top: 27%; transform: rotate(10deg); z-index: 2; }
.preview-card-4 { left: 21%; bottom: 0; transform: rotate(-3deg); z-index: 5; }
.preview-card-5 { right: 18%; bottom: 10%; transform: rotate(-12deg); z-index: 1; }
.preview-card-6 { left: 0; bottom: 18%; transform: rotate(8deg); z-index: 0; }

.album-gallery-section {
  padding: clamp(24px, 5vw, 48px);
}

.album-section-heading {
  max-width: 640px;
}

.album-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, 19vw);
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(26px, 5vw, 46px);
}

.album-photo {
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-radius: var(--r-lg);
  background: var(--grad-photo-1);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 360ms ease;
}

.album-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 680ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 360ms ease;
}

.album-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(39, 21, 32, 0.72));
  opacity: 0.74;
  transition: opacity 280ms ease;
}

.album-photo:hover,
.album-photo:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.album-photo:hover img,
.album-photo:focus-within img {
  transform: scale(1.07);
  filter: saturate(1.05) contrast(1.03);
}

.album-photo figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 790;
  background: none;
  opacity: 0.98;
}

.album-photo figcaption small {
  color: rgba(255, 248, 244, 0.74);
  font-size: 0.76rem;
  font-weight: 650;
}

.album-photo--feature {
  grid-column: span 2;
  grid-row: span 2;
}

.album-photo--wide {
  grid-column: span 2;
}

.album-photo--tall {
  grid-row: span 2;
}

.album-closing {
  display: grid;
  place-items: center;
  margin-top: clamp(34px, 6vw, 66px);
  color: var(--ink-3);
  text-align: center;
}

.album-closing p {
  max-width: 440px;
  margin: 0;
  line-height: 1.6;
}

.album-empty {
  min-height: 260px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.5);
}

/* Admin */
.admin-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background:
    radial-gradient(circle at 88% 8%, rgba(232, 147, 130, 0.16), transparent 28rem),
    linear-gradient(90deg, #2e112b 0 248px, #fff8f4 248px 100%);
}

.admin-sidebar {
  min-height: 100vh;
  color: rgba(255, 248, 244, 0.88);
  padding: 32px 18px;
  background: linear-gradient(180deg, #2e112b, #3a1735 58%, #291026);
  position: sticky;
  top: 0;
}

.admin-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 34px;
}

.admin-brand-mark {
  width: 48px;
  height: 58px;
  color: #e6a69c;
}

.admin-brand-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.sidebar-nav {
  display: grid;
  gap: 8px;
}

.sidebar-nav button {
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 248, 244, 0.76);
  background: transparent;
  text-align: left;
}

.sidebar-nav button.active,
.sidebar-nav button:hover {
  color: #fff8f4;
  background: rgba(255, 255, 255, 0.14);
}

.admin-couple {
  margin-top: auto;
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff8f4;
}

.admin-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(135deg, #fff8f4, #e7b0a7);
  font-family: var(--serif);
  font-size: 1.3rem;
}

.admin-main {
  min-width: 0;
  padding: 34px clamp(18px, 3vw, 42px) 48px;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}

.admin-topbar h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
}

.admin-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(260px, 354px) minmax(460px, 1fr) minmax(286px, 360px);
  gap: 20px;
  align-items: start;
}

.admin-panel {
  border: 1px solid rgba(92, 48, 80, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 46px rgba(68, 29, 58, 0.09);
}

.admin-panel.pad {
  padding: 16px;
}

.admin-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.group-list {
  display: grid;
  gap: 9px;
}

.group-card {
  width: 100%;
  min-height: 74px;
  border: 1px solid rgba(92, 48, 80, 0.1);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
  text-align: left;
}

.group-card.active {
  border-color: var(--ink);
  box-shadow: 0 10px 32px rgba(59, 21, 50, 0.12);
}

.group-initial {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
  background: #f3e8e5;
  font-family: var(--serif);
  font-size: 1.45rem;
}

.group-title {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 780;
  font-size: 0.88rem;
}

.group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
}

.admin-grid-panel {
  padding: 16px;
}

.grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.grid-toolbar strong {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.photo-grid-admin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-thumb {
  aspect-ratio: 1 / 0.9;
  border: 2px solid transparent;
  background: #f0ddd7;
}

.admin-thumb.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(232, 147, 130, 0.2);
}

.admin-thumb.rejected img {
  filter: grayscale(0.78) opacity(0.65);
}

.admin-thumb .select-box-thumb {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(49, 20, 45, 0.72);
  backdrop-filter: blur(10px);
}

.admin-thumb .status-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--amber);
}

.admin-thumb .status-dot.approved {
  background: var(--green);
}

.admin-thumb .status-dot.rejected {
  background: var(--red);
}

.admin-thumb .eye {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(39, 14, 34, 0.6);
}

.inspector {
  padding: 14px;
  position: sticky;
  top: 20px;
}

.inspector-hero {
  position: relative;
  overflow: hidden;
  height: 250px;
  border-radius: 16px;
  background: #eadbd6;
}

.inspector-details h3 {
  margin: 16px 0 5px;
  font-size: 1.04rem;
}

.inspector-details dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 12px;
  margin: 10px 0 18px;
  color: var(--ink-3);
  font-size: 0.88rem;
}

.inspector-details dt {
  color: var(--muted);
}

.inspector-section {
  border-top: 1px solid rgba(92, 48, 80, 0.12);
  padding-top: 16px;
  margin-top: 16px;
}

.status-actions,
.inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.switch-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
}

.switch {
  width: 54px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  padding: 3px;
  background: #d8c8c4;
}

.switch span {
  width: 24px;
  height: 24px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
  transition: transform 180ms ease;
}

.switch.on {
  background: var(--ink);
}

.switch.on span {
  transform: translateX(24px);
}

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

.qr-code {
  width: 118px;
  height: 118px;
  border-radius: 18px;
  background: #fff;
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(92, 48, 80, 0.12);
}

.qr-code svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-link {
  word-break: break-all;
  font-size: 0.79rem;
  color: var(--ink-3);
  line-height: 1.4;
}

/* Claude Design polish: phone frame and admin surface density */
@media (min-width: 780px) {
  .guest-page {
    min-height: 100vh;
    padding: 34px 0 calc(130px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% -8%, rgba(233, 196, 192, 0.26), transparent 26rem),
      radial-gradient(circle at 15% 82%, rgba(217, 154, 150, 0.2), transparent 28rem),
      var(--grad-hero);
  }

  .phone-stage {
    position: relative;
    width: min(430px, calc(100vw - 36px));
    padding: 40px 0 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 46px;
    background: var(--ivory);
    box-shadow:
      0 40px 90px rgba(24, 8, 22, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
    overflow: hidden;
  }

  .phone-stage::before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 17px;
    left: 50%;
    width: 124px;
    height: 9px;
    border-radius: var(--r-pill);
    background: rgba(50, 20, 46, 0.17);
    transform: translateX(-50%);
  }

  .wedding-hero {
    min-height: 440px;
    margin-inline: 16px;
    border-radius: 34px;
  }

  .upload-card {
    margin: -34px 16px 0;
  }

  .sticky-upload-bar {
    width: min(430px, calc(100vw - 36px));
    border-radius: 30px 30px 42px 42px;
    bottom: 18px;
  }
}

.admin-page {
  background:
    radial-gradient(circle at 82% 4%, rgba(232, 147, 130, 0.17), transparent 30rem),
    linear-gradient(90deg, var(--aubergine-deep) 0 248px, #fff8f4 248px 100%);
}

.admin-sidebar {
  overflow: hidden;
  isolation: isolate;
}

.admin-sidebar::before {
  content: "";
  position: absolute;
  inset: -90px -70px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 147, 130, 0.26), transparent 68%);
  z-index: -1;
}

.sidebar-nav button {
  border-radius: 999px;
  font-weight: 740;
}

.sidebar-nav button.active,
.sidebar-nav button:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.admin-panel {
  border-color: rgba(92, 48, 80, 0.1);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(68, 29, 58, 0.1);
}

.group-card {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.group-card:hover,
.group-card.active {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.94);
}

.group-card.active {
  border-color: rgba(50, 20, 46, 0.55);
  box-shadow: 0 16px 36px rgba(59, 21, 50, 0.16);
}

.photo-grid-admin {
  gap: 14px;
}

.admin-thumb {
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(71, 31, 60, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.admin-thumb:hover,
.admin-thumb.active {
  transform: translateY(-2px);
}

.inspector {
  border-radius: 28px;
}

.inspector-hero {
  height: 278px;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}

.inspector-details h3 {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.login-scene {
  min-height: calc(100vh - 120px);
}

.login-card {
  width: min(420px, 100%);
  margin: 32px auto 0;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  text-align: left;
}

.login-card .field-label {
  color: rgba(255, 248, 244, 0.86);
}

.login-card .primary-btn {
  width: 100%;
  margin-top: 14px;
}

.admin-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.admin-section-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.055em;
}

.group-list.roomy {
  margin-top: 18px;
}

.album-admin-grid {
  margin-top: 18px;
}

.download-center {
  max-width: 720px;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.request-list,
.settings-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.request-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(92, 48, 80, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.request-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.check-line {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-weight: 760;
}

.check-line input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}

.upload-consent-line {
  align-items: flex-start;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(201, 142, 132, 0.24);
  border-radius: 18px;
  background: rgba(255, 248, 244, 0.72);
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.42;
  font-weight: 650;
}

.upload-consent-line input {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Empty states */
.empty-box {
  display: grid;
  place-items: center;
  min-height: 170px;
  color: var(--muted);
  text-align: center;
}

.empty-box strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-2);
}

/* Responsive */
@media (min-width: 780px) {
  .guest-page {
    padding-top: 28px;
  }

  .phone-stage {
    filter: drop-shadow(0 30px 80px rgba(49, 18, 42, 0.18));
  }
}

@media (max-width: 1320px) {
  .admin-layout {
    grid-template-columns: minmax(260px, 330px) minmax(430px, 1fr);
  }

  .inspector {
    grid-column: 1 / -1;
    position: static;
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: 16px;
  }

  .inspector-details h3 {
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .admin-page {
    display: block;
    background: var(--bg);
  }

  .admin-sidebar {
    min-height: auto;
    position: static;
    padding: 18px;
    border-radius: 0 0 28px 28px;
  }

  .admin-brand {
    margin-bottom: 14px;
  }

  .sidebar-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: auto;
  }

  .sidebar-nav button {
    white-space: nowrap;
  }

  .admin-couple {
    display: none;
  }

  .admin-main {
    padding-inline: 14px;
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-secondary-grid {
    grid-template-columns: 1fr;
  }

  .photo-grid-admin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inspector {
    display: block;
  }
}

@media (max-width: 560px) {
  .guest-page {
    padding-top: 0;
  }

  .phone-stage {
    padding-inline: 0;
  }

  .wedding-hero {
    border-radius: 0 0 36px 36px;
    border-left: 0;
    border-right: 0;
  }

  .upload-card {
    margin-inline: 10px;
    padding-inline: 16px;
  }

  .my-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sticky-upload-inner {
    grid-template-columns: auto 1fr;
  }

  .sticky-upload-bar .primary-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .admin-topbar {
    display: grid;
  }

  .admin-actions {
    justify-content: stretch;
  }

  .admin-actions > * {
    flex: 1;
  }

  .grid-toolbar {
    display: grid;
  }

  .bulk-actions {
    justify-content: stretch;
  }

  .bulk-actions button {
    flex: 1;
  }

  .qr-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .album-page {
    padding-inline: 10px;
  }

  .album-hero-scene {
    min-height: 620px;
    border-radius: 0 0 38px 38px;
    width: calc(100% + 20px);
    margin-inline: -10px;
  }

  .album-hero-inner {
    width: min(94%, 620px);
    padding-top: 72px;
    padding-bottom: 116px;
  }

  .album-content-shell {
    width: min(100%, 700px);
    margin-top: -92px;
  }

  .album-release-card,
  .album-preview-panel {
    grid-template-columns: 1fr;
  }

  .album-stat-grid {
    grid-template-columns: 1fr;
  }

  .album-stat-grid > div {
    min-height: 112px;
  }

  .album-preview-stack {
    min-height: 290px;
  }

  .album-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 178px;
  }

  .album-photo--feature,
  .album-photo--wide {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .brand-title {
    font-size: clamp(2.65rem, 12vw, 4.1rem);
  }

  .upload-hero-copy {
    max-width: 315px;
    font-size: 0.94rem;
  }

  .album-page {
    padding-top: 0;
  }

  .album-hero-inner h1 {
    font-size: clamp(3.05rem, 17vw, 4.7rem);
  }

  .album-kicker {
    letter-spacing: 0.18em;
  }

  .album-monogram {
    width: 96px;
    height: 96px;
    font-size: 1.72rem;
  }

  .album-release-card,
  .album-preview-panel,
  .album-gallery-section {
    border-radius: 28px;
    padding: 22px 16px;
  }

  .album-email-row {
    grid-template-columns: 1fr;
  }

  .album-email-row .primary-btn {
    width: 100%;
  }

  .album-preview-stack {
    min-height: 250px;
  }

  .preview-photo-card {
    width: 52%;
    border-radius: 22px;
  }

  .album-gallery {
    grid-auto-rows: 154px;
    gap: 10px;
  }

  .album-photo {
    border-radius: 20px;
  }

  .album-photo figcaption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-size: 0.78rem;
  }
}

/* Claude Design pass: closer fidelity to the accepted GPT-Image references */
.guest-page {
  padding-top: 0;
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 10% 7%, rgba(244, 213, 198, 0.58), transparent 13rem),
    radial-gradient(circle at 98% 3%, rgba(255, 255, 255, 0.82), transparent 11rem),
    linear-gradient(180deg, #fffaf7 0%, #fff4ef 47%, #f4e3dc 100%);
}

.phone-stage {
  width: min(100%, 430px);
  padding: 0;
}

.wedding-hero {
  min-height: 390px;
  padding: 76px 24px 96px;
  border: 0;
  border-radius: 0 0 42px 42px;
  box-shadow: none;
  background:
    radial-gradient(circle at 5% 15%, rgba(178, 142, 132, 0.18), transparent 5rem),
    radial-gradient(ellipse at 86% 24%, rgba(255, 255, 255, 0.92) 0 3.5rem, rgba(246, 226, 215, 0.78) 8.2rem, transparent 12.5rem),
    linear-gradient(116deg, rgba(255, 251, 248, 0.98) 0%, rgba(255, 245, 240, 0.92) 48%, rgba(236, 205, 188, 0.76) 100%);
}

.wedding-hero::before {
  inset: -38px auto auto -66px;
  opacity: 0.58;
  transform: rotate(-18deg) scale(1.06);
}

.wedding-hero::after {
  display: none;
}

.wedding-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 318px;
}

.brand-title {
  max-width: 322px;
  font-size: clamp(3.9rem, 16vw, 5.35rem);
  line-height: 0.9;
  letter-spacing: -0.075em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.brand-title .amp {
  margin-inline: -0.04em;
  color: #e2a097;
  font-size: 0.84em;
  font-style: italic;
}

.upload-hero-copy {
  max-width: 255px;
  margin-top: 16px;
  color: rgba(50, 20, 46, 0.66);
  font-size: 0.96rem;
  line-height: 1.48;
}

.hero-heart {
  width: 38px;
  height: 38px;
  margin: 15px 0 0 124px;
  opacity: 0.9;
}

.wedding-hero .hero-photo-scene {
  position: absolute;
  z-index: 1;
  right: -28px;
  top: 88px;
  width: 214px;
  height: 184px;
  overflow: hidden;
  border-radius: 92px 0 0 96px;
  background:
    radial-gradient(circle at 66% 28%, rgba(255, 255, 255, 0.96) 0 12px, transparent 13px),
    radial-gradient(circle at 54% 39%, rgba(69, 44, 39, 0.76) 0 28px, transparent 29px),
    radial-gradient(circle at 39% 43%, rgba(245, 205, 184, 0.97) 0 34px, transparent 35px),
    radial-gradient(circle at 52% 70%, rgba(255, 255, 255, 0.86) 0 62px, transparent 64px),
    linear-gradient(137deg, rgba(180, 126, 98, 0.52), rgba(255, 247, 240, 0.22) 48%, rgba(98, 59, 48, 0.16));
  filter: saturate(0.96);
  opacity: 0.9;
}

.hero-photo-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 36% 44%, rgba(255, 248, 244, 0.8) 0 7px, transparent 8px),
    radial-gradient(circle at 44% 52%, rgba(233, 174, 145, 0.72) 0 12px, transparent 13px),
    radial-gradient(circle at 49% 42%, rgba(74, 47, 38, 0.24) 0 31px, transparent 32px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 54%);
  mix-blend-mode: soft-light;
}

.hero-photo-scene::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 20px;
  bottom: 18px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.58), transparent 70%);
  filter: blur(1px);
}

.hero-photo-couple,
.hero-photo-flower {
  position: absolute;
  display: block;
  pointer-events: none;
}

.hero-photo-couple.bride {
  left: 56px;
  top: 46px;
  width: 78px;
  height: 118px;
  border-radius: 42px 42px 18px 20px;
  background:
    radial-gradient(circle at 44% 18%, #f2c9ad 0 18px, transparent 19px),
    radial-gradient(circle at 39% 12%, rgba(230, 218, 196, 0.96) 0 24px, transparent 25px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 224, 213, 0.56));
  transform: rotate(-7deg);
}

.hero-photo-couple.groom {
  right: 42px;
  top: 50px;
  width: 72px;
  height: 116px;
  border-radius: 38px 38px 18px 18px;
  background:
    radial-gradient(circle at 52% 17%, #e7b892 0 18px, transparent 19px),
    radial-gradient(circle at 54% 10%, rgba(93, 64, 48, 0.88) 0 22px, transparent 23px),
    linear-gradient(180deg, rgba(239, 226, 212, 0.9), rgba(144, 109, 89, 0.52));
  transform: rotate(8deg);
}

.hero-photo-flower.flower-a {
  left: 36px;
  bottom: 42px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fff8f2 0 7px, transparent 8px),
    radial-gradient(circle at 70% 42%, #e5a79b 0 9px, transparent 10px),
    radial-gradient(circle at 48% 72%, #f2d2c6 0 10px, transparent 11px);
  opacity: 0.88;
}

.hero-photo-flower.flower-b {
  left: 72px;
  bottom: 32px;
  width: 48px;
  height: 32px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 48%, #fffaf4 0 8px, transparent 9px),
    radial-gradient(circle at 54% 46%, #eeb9ad 0 9px, transparent 10px),
    radial-gradient(circle at 74% 46%, #fff4ec 0 7px, transparent 8px);
  opacity: 0.86;
}

.upload-card {
  margin: -58px 14px 0;
  padding: 30px 20px 24px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 26px 72px rgba(56, 22, 48, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.upload-card h1,
.upload-card h2 {
  color: var(--ink);
}

.email-field .input-box {
  min-height: 70px;
  border-color: rgba(196, 144, 135, 0.44);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
}

.section-headline {
  margin-top: 26px;
}

.photo-choice-buttons .text-btn {
  color: rgba(86, 57, 79, 0.72);
  font-weight: 800;
}

.selected-strip {
  grid-auto-columns: 128px;
  gap: 12px;
  padding-bottom: 14px;
}

.selected-photo,
.add-tile {
  width: 128px;
  min-width: 128px;
  height: 142px;
  border-radius: 18px;
}

.selected-photo {
  box-shadow: 0 14px 30px rgba(56, 22, 48, 0.14);
}

.add-tile {
  border-color: rgba(201, 142, 132, 0.38);
  background: linear-gradient(145deg, rgba(255, 242, 238, 0.95), rgba(255, 255, 255, 0.78));
}

.upload-progress-box,
.privacy-note,
.empty-box {
  border-color: rgba(201, 142, 132, 0.28);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 250, 247, 0.9), rgba(255, 255, 255, 0.72));
}

.upload-progress-box {
  padding: 18px;
}

.progress-preview-row {
  grid-auto-columns: 64px;
  gap: 9px;
}

.progress-preview-row img {
  width: 64px;
  height: 56px;
  border-radius: 11px;
}

.my-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.my-photo,
.more-count {
  border-radius: 16px;
}

.sticky-upload-bar {
  width: min(100%, 430px);
  padding: 17px 22px calc(17px + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0;
  background: linear-gradient(135deg, rgba(45, 16, 40, 0.99), rgba(67, 29, 60, 0.99) 58%, rgba(91, 43, 76, 0.99));
}

.sticky-upload-inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.sticky-upload-title {
  font-size: 1.38rem;
}

.sticky-upload-bar .primary-btn {
  min-width: 132px;
  min-height: 56px;
  white-space: nowrap;
}

.admin-page {
  grid-template-columns: 248px minmax(0, 1fr);
  background:
    radial-gradient(circle at 84% 6%, rgba(232, 147, 130, 0.16), transparent 29rem),
    radial-gradient(circle at 50% 100%, rgba(244, 222, 213, 0.22), transparent 34rem),
    linear-gradient(90deg, var(--aubergine-deep) 0 248px, #fff9f5 248px 100%);
}

.admin-sidebar {
  padding: 34px 18px;
  background: linear-gradient(180deg, #2a1027 0%, #351530 58%, #240d20 100%);
}

.admin-sidebar::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 20px;
  bottom: 108px;
  height: 210px;
  opacity: 0.28;
  background:
    radial-gradient(ellipse at 15% 86%, transparent 0 25px, rgba(238, 169, 156, 0.7) 26px 27px, transparent 28px),
    radial-gradient(ellipse at 36% 72%, transparent 0 31px, rgba(238, 169, 156, 0.62) 32px 33px, transparent 34px),
    linear-gradient(112deg, transparent 0 36%, rgba(238, 169, 156, 0.62) 37% 38%, transparent 39% 100%);
  pointer-events: none;
}

.admin-brand {
  align-items: flex-start;
  margin-bottom: 38px;
}

.admin-brand-title {
  font-size: 2.04rem;
  line-height: 0.88;
}

.admin-brand-subtitle {
  margin: 8px 0 0;
  color: rgba(255, 248, 244, 0.58);
  font-size: 0.78rem;
  font-weight: 740;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-main {
  padding: 42px clamp(18px, 2.6vw, 34px) 52px;
}

.admin-topbar h1 {
  font-size: clamp(3rem, 5.4vw, 4.7rem);
}

.admin-upload-toolbar {
  display: grid;
  grid-template-columns: minmax(320px, 1.55fr) 150px 150px 166px auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-bottom: 18px;
  border-radius: 19px;
}

.admin-upload-toolbar .input-box,
.admin-upload-toolbar .select-box,
.admin-upload-toolbar .secondary-btn {
  min-height: 50px;
  border-radius: 14px;
}

.admin-layout {
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(280px, 330px);
  gap: 18px;
}

.admin-group-panel {
  max-height: calc(100vh - 190px);
  overflow: auto;
}

.admin-group-panel .qr-box {
  display: none;
}

.admin-panel {
  border-color: rgba(135, 83, 116, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 48px rgba(68, 29, 58, 0.09);
}

.group-card {
  min-height: 72px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.82);
}

.group-initial {
  background: #f3e7e3;
}

.grid-toolbar {
  min-height: 48px;
}

.photo-grid-admin {
  gap: 13px;
}

.admin-thumb {
  aspect-ratio: 1.08 / 0.9;
  border-radius: 18px;
}

.admin-thumb .select-box-thumb {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.admin-thumb .status-dot {
  width: 16px;
  height: 16px;
}

.inspector {
  top: 24px;
  padding: 14px;
}

.inspector-hero {
  height: 282px;
  border-radius: 19px;
}

.status-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 780px) {
  .guest-page {
    padding: 34px 0 calc(132px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% -8%, rgba(233, 196, 192, 0.26), transparent 26rem),
      radial-gradient(circle at 15% 82%, rgba(217, 154, 150, 0.2), transparent 28rem),
      var(--grad-hero);
  }

  .phone-stage {
    width: min(430px, calc(100vw - 36px));
    padding: 36px 0 24px;
    border-radius: 46px;
    overflow: hidden;
  }

  .wedding-hero {
    min-height: 392px;
    margin: 0 16px;
    padding-top: 64px;
    border-radius: 34px;
  }

  .upload-card {
    margin: -58px 16px 0;
  }

  .sticky-upload-bar {
    width: min(430px, calc(100vw - 36px));
    bottom: 18px;
    border-radius: 30px 30px 42px 42px;
  }
}

@media (max-width: 760px) {
  .public-nav {
    display: none;
  }
}

@media (max-width: 560px) {
  .brand-title {
    font-size: clamp(3.28rem, 14.2vw, 4.92rem);
  }

  .wedding-hero {
    min-height: 368px;
    padding: 58px 22px 88px;
  }

  .wedding-hero .hero-photo-scene {
    right: -44px;
    top: 70px;
    width: 206px;
    height: 178px;
    opacity: 0.78;
  }

  .upload-hero-copy {
    max-width: 238px;
    font-size: 0.9rem;
  }

  .upload-card {
    margin-inline: 10px;
    padding: 27px 16px 22px;
  }

  .section-headline {
    align-items: flex-end;
  }

  .selected-strip {
    grid-auto-columns: 124px;
  }

  .selected-photo,
  .add-tile {
    width: 124px;
    min-width: 124px;
    height: 138px;
  }

  .my-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sticky-upload-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
  }

  .sticky-upload-icon {
    width: 38px;
    height: 38px;
  }

  .sticky-upload-title {
    font-size: 1.2rem;
  }

  .sticky-upload-subtitle {
    font-size: 0.78rem;
  }

  .sticky-upload-bar .primary-btn {
    grid-column: auto;
    width: auto;
    min-width: 112px;
    min-height: 52px;
    padding-inline: 14px;
    font-size: 1.08rem;
  }
}

@media (max-width: 1320px) {
  .admin-upload-toolbar {
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(132px, 0.36fr));
  }

  .admin-upload-toolbar .secondary-btn {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .admin-page {
    background: var(--bg);
  }

  .admin-upload-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .admin-upload-toolbar .input-box {
    grid-column: 1 / -1;
  }

  .admin-group-panel {
    max-height: none;
  }
}

@media (max-width: 560px) {
  .admin-upload-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-upload-toolbar .input-box {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   Claude Design · Accepted GPT-Image Fidelity Pass
   Mobile upload and admin dashboard, intentionally appended so
   the design-system overrides win without disturbing app logic.
   ============================================================ */

/* --- Mobile upload: phone status and compact photographic hero --- */
.phone-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 8px 22px 2px;
  color: var(--ink);
  font-weight: 840;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.phone-statusbar .sb-icons {
  width: 18px;
  height: 18px;
  color: #d98a7d;
  display: grid;
  place-items: center;
}

.guest-page {
  background:
    radial-gradient(circle at 8% 6%, rgba(245, 214, 201, 0.62), transparent 13rem),
    radial-gradient(circle at 98% 4%, rgba(255, 255, 255, 0.86), transparent 11rem),
    linear-gradient(180deg, #fffaf7 0%, #fff4ef 48%, #f4e3dc 100%);
}

.wedding-hero {
  min-height: 340px;
  padding: 42px 22px 84px;
  background:
    radial-gradient(circle at 5% 15%, rgba(178, 142, 132, 0.18), transparent 5rem),
    radial-gradient(ellipse at 86% 24%, rgba(255, 255, 255, 0.9) 0 3.5rem, rgba(246, 226, 215, 0.74) 8.2rem, transparent 12.5rem),
    linear-gradient(116deg, rgba(255, 251, 248, 0.98) 0%, rgba(255, 245, 240, 0.92) 48%, rgba(236, 205, 188, 0.76) 100%);
}

.wedding-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 58%;
}

.brand-title {
  max-width: none;
  font-size: clamp(2.5rem, 12vw, 3.4rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.brand-title .amp {
  color: #e2a097;
  font-size: 0.82em;
  font-style: italic;
  margin-inline: -0.02em;
}

.brand-title .brand-sub {
  display: block;
  margin-top: 7px;
  color: rgba(80, 42, 72, 0.64);
  font-size: 0.42em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.upload-hero-copy {
  max-width: 228px;
  margin-top: 18px;
  color: rgba(50, 20, 46, 0.66);
  font-size: 0.96rem;
  line-height: 1.48;
}

.hero-heart {
  display: none;
}

.wedding-hero .hero-photo-scene {
  position: absolute;
  z-index: 2;
  right: -10px;
  top: 54px;
  width: 47%;
  max-width: 210px;
  height: 214px;
  overflow: hidden;
  border-radius: 98px 0 0 98px;
  background: linear-gradient(137deg, rgba(180, 126, 98, 0.46), rgba(255, 247, 240, 0.3) 50%, rgba(98, 59, 48, 0.16));
  box-shadow: -18px 24px 48px rgba(56, 22, 48, 0.18);
  opacity: 0.96;
  filter: saturate(1.02);
}

.wedding-hero .hero-photo-scene::before {
  display: none;
}

.wedding-hero .hero-photo-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(255, 250, 247, 0.97) 0%, rgba(255, 250, 247, 0.74) 18%, rgba(255, 250, 247, 0) 48%),
    linear-gradient(0deg, rgba(255, 250, 247, 0.42), transparent 42%);
  pointer-events: none;
}

.hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 34%;
  display: block;
}

.wedding-hero .hero-photo-scene .hero-photo-couple,
.wedding-hero .hero-photo-scene .hero-photo-flower {
  display: none;
}

.wedding-hero .hero-photo-scene.is-fallback .hero-photo-img {
  display: none;
}

.wedding-hero .hero-photo-scene.is-fallback::before,
.wedding-hero .hero-photo-scene.is-fallback .hero-photo-couple,
.wedding-hero .hero-photo-scene.is-fallback .hero-photo-flower {
  display: block;
}

.upload-florals-right {
  inset: 0 -8% auto auto;
  width: 54%;
  height: 62%;
  opacity: 0.38;
  transform: scaleX(-1) rotate(6deg);
  mix-blend-mode: multiply;
}

.upload-card {
  margin-top: -58px;
  border-radius: 34px;
  box-shadow: 0 26px 72px rgba(56, 22, 48, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.upload-card > h1#upload-title {
  font-size: clamp(1.8rem, 7.4vw, 2.45rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.selected-strip {
  grid-auto-columns: 124px;
}

.selected-photo,
.add-tile {
  height: 132px;
}

@media (min-width: 780px) {
  .phone-statusbar {
    margin-top: -18px;
  }

  .wedding-hero {
    min-height: 350px;
    padding-top: 42px;
  }

  .wedding-hero .hero-photo-scene {
    top: 58px;
    right: -8px;
    height: 216px;
  }
}

@media (max-width: 560px) {
  .phone-statusbar {
    height: 31px;
    padding-inline: 20px;
  }

  .wedding-hero {
    min-height: 336px;
    padding: 38px 21px 82px;
  }

  .wedding-hero-copy {
    max-width: 56%;
  }

  .brand-title {
    font-size: clamp(2.35rem, 12.6vw, 3.08rem);
  }

  .upload-hero-copy {
    max-width: 218px;
    font-size: 0.9rem;
  }

  .wedding-hero .hero-photo-scene {
    right: -16px;
    top: 50px;
    width: 50%;
    height: 194px;
  }

  .selected-strip {
    grid-auto-columns: 120px;
  }

  .selected-photo,
  .add-tile {
    width: 120px;
    min-width: 120px;
    height: 130px;
  }
}

/* --- Admin dashboard: closer desktop density and clipping guard --- */
.admin-page {
  overflow-x: hidden;
  grid-template-columns: 228px minmax(0, 1fr);
  background:
    radial-gradient(circle at 84% 6%, rgba(232, 147, 130, 0.16), transparent 29rem),
    radial-gradient(circle at 50% 100%, rgba(244, 222, 213, 0.22), transparent 34rem),
    linear-gradient(90deg, var(--aubergine-deep) 0 228px, #fff9f5 228px 100%);
}

.admin-sidebar {
  padding: 30px 16px;
}

.admin-sidebar::after {
  opacity: 0.5;
  bottom: 92px;
  height: 240px;
}

.admin-main {
  min-width: 0;
  padding: 38px clamp(20px, 2.4vw, 32px) 48px;
}

.admin-topbar h1 {
  font-size: clamp(2.6rem, 4.6vw, 3.9rem);
}

.admin-upload-toolbar {
  padding: 10px;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-upload-toolbar .input-box,
.admin-upload-toolbar .select-box,
.admin-upload-toolbar .secondary-btn {
  min-height: 46px;
}

.admin-layout {
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) minmax(284px, 320px);
  gap: 16px;
}

.admin-group-panel {
  max-height: calc(100vh - 184px);
}

.group-card {
  min-height: 66px;
  padding: 11px;
}

.group-initial {
  width: 38px;
  height: 38px;
  font-size: 1.3rem;
}

.admin-grid-panel {
  padding: 14px;
}

.photo-grid-admin {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 11px;
}

.admin-thumb {
  aspect-ratio: 1 / 0.92;
  border-radius: 16px;
}

.inspector.inspector--fit {
  max-width: 100%;
  min-width: 0;
  align-self: start;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 64px);
  overflow: auto;
}

.inspector.inspector--fit .inspector-hero {
  height: 240px;
}

.inspector.inspector--fit .inspector-details h3 {
  font-size: 1.3rem;
}

.inspector.inspector--fit .inspector-details dl {
  gap: 6px 12px;
  font-size: 0.86rem;
}

.inspector.inspector--fit .status-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 1180px) {
  .admin-layout {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  }

  .inspector.inspector--fit {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 16px;
  }

  .inspector.inspector--fit .inspector-hero {
    height: 100%;
    min-height: 220px;
  }
}

/* Claude Design · Inspector button fit inside the compact 320px rail */
.inspector.inspector--fit .status-actions > button {
  width: 100%;
  min-width: 0;
  padding-inline: 9px;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.86rem;
}

.inspector.inspector--fit .status-actions > button .icon {
  flex: 0 0 auto;
}

/* Production-readiness polish: disabled uploads + password form */
.upload-paused-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 14px;
  border: 1px solid rgba(200, 135, 51, 0.24);
  border-radius: 18px;
  color: #8a5d20;
  background: linear-gradient(135deg, rgba(255, 246, 230, 0.92), rgba(255, 255, 255, 0.72));
  line-height: 1.42;
}

.upload-paused-note .icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

.add-tile:disabled,
.text-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.settings-subtitle {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.password-form {
  margin: 20px 0 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(92, 48, 80, 0.12);
}

.settings-divider {
  height: 1px;
  margin: 22px 0 18px;
  background: rgba(92, 48, 80, 0.12);
}

.password-form .secondary-btn {
  justify-self: start;
}

/* Album release contact workflow */
.release-actions {
  margin-top: 14px;
}

.release-link-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(92, 48, 80, 0.1);
  border-radius: 16px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.68);
}

.release-link-box code {
  overflow: hidden;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-list {
  margin-top: 16px;
}

.contact-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.contact-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 560px) {
  .contact-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .contact-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Photo deletion controls for guest/admin cleanup */
.my-photo .remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 16px rgba(56, 22, 48, 0.14);
  backdrop-filter: blur(8px);
}

.my-photo .remove:hover {
  color: var(--red);
}

/* Legal / privacy pages for the real public app */
.legal-links {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.86rem;
}

.legal-inline-links {
  margin-top: 8px;
}

.link-btn {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-btn:hover,
.link-btn:focus-visible {
  color: var(--ink-2);
}

.album-legal-links {
  display: flex;
  justify-content: center;
  margin: 24px auto 0;
}

.legal-page {
  min-height: 100vh;
  padding: 22px 14px 72px;
  background:
    radial-gradient(circle at 10% 4%, rgba(232, 147, 130, 0.22), transparent 28rem),
    radial-gradient(circle at 90% 20%, rgba(200, 155, 100, 0.14), transparent 28rem),
    linear-gradient(145deg, #fff9f5 0%, #fbefe9 52%, #f4e3dc 100%);
}

.legal-hero,
.legal-card {
  width: min(920px, 100%);
  margin-inline: auto;
}

.legal-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(34px, 6vw, 62px) clamp(18px, 5vw, 46px);
  color: var(--ivory);
  text-align: center;
  background: var(--grad-hero);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.legal-hero > *:not(.floral-layer) {
  position: relative;
  z-index: 1;
}

.legal-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.1rem, 9vw, 6.1rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.07em;
}

.legal-hero p:not(.album-kicker) {
  max-width: 650px;
  margin: 22px auto 0;
  color: rgba(255, 248, 244, 0.84);
  line-height: 1.66;
}

.legal-hero .album-monogram.small {
  color: var(--ivory);
  border-color: rgba(255, 248, 244, 0.25);
  background: rgba(255, 255, 255, 0.1);
}

.legal-card {
  margin-top: -26px;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: var(--r-xl);
  padding: clamp(24px, 5vw, 46px);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.legal-card h2,
.legal-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.legal-card h2 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.legal-card h3 {
  margin: 26px 0 8px;
  font-size: clamp(1.45rem, 4vw, 2rem);
}

.legal-card p,
.legal-card li,
.legal-dl {
  color: var(--ink-3);
  line-height: 1.66;
}

.legal-card ul {
  padding-left: 1.2rem;
}

.legal-dl {
  display: grid;
  grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
  gap: 10px 16px;
  margin: 18px 0;
}

.legal-dl dt {
  color: var(--muted);
  font-weight: 760;
}

.legal-dl dd {
  margin: 0;
}

.legal-card code {
  border-radius: 8px;
  padding: 2px 6px;
  color: var(--ink-2);
  background: rgba(244, 222, 213, 0.62);
}

/* ============================================================
   Claude Design · Final fidelity pass
   Applied after the earlier prototype styles so it wins in the
   cascade while preserving the existing vanilla JS architecture.
   ============================================================ */

.guest-page {
  background:
    radial-gradient(circle at 2% 6%, rgba(237, 180, 166, 0.36) 0 4.8rem, transparent 5rem),
    radial-gradient(circle at 8% 16%, rgba(163, 175, 145, 0.22) 0 2.1rem, transparent 2.25rem),
    radial-gradient(ellipse at 96% 2%, rgba(255, 255, 255, 0.92) 0 7rem, rgba(245, 222, 211, 0.48) 12rem, transparent 16rem),
    linear-gradient(180deg, #fffaf7 0%, #fff3ee 48%, #f4e3dc 100%);
}

.phone-statusbar {
  position: relative;
  z-index: 6;
  height: 32px;
  padding: 8px 22px 0;
  font-size: 0.86rem;
}

.wedding-hero {
  min-height: 372px;
  padding: 40px 22px 96px;
  border: 0;
  border-radius: 0 0 44px 44px;
  box-shadow: none;
  background:
    linear-gradient(100deg, rgba(255, 252, 249, 0.98) 0%, rgba(255, 247, 243, 0.92) 44%, rgba(239, 210, 194, 0.72) 100%);
  isolation: isolate;
}

.wedding-hero::before {
  inset: -42px auto auto -76px;
  width: 210px;
  height: 288px;
  opacity: 0.55;
  transform: rotate(-18deg) scale(1.05);
}

.wedding-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 66%;
  padding-top: 6px;
}

.brand-title {
  max-width: none;
  color: var(--ink);
  font-size: clamp(2.85rem, 12.8vw, 4.25rem);
  line-height: 0.88;
  letter-spacing: -0.068em;
}

.brand-title .amp {
  margin-inline: -0.03em;
  color: #dfa197;
  font-size: 0.84em;
  font-weight: 500;
}

.brand-title .brand-sub {
  display: block;
  margin-top: 8px;
  color: rgba(67, 35, 60, 0.62);
  font-size: 0.38em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.upload-hero-copy {
  max-width: 252px;
  margin-top: 17px;
  color: rgba(50, 20, 46, 0.66);
  font-size: 0.94rem;
  line-height: 1.52;
}

.wedding-hero .hero-photo-scene {
  right: -30px;
  top: 48px;
  width: 56%;
  max-width: 238px;
  height: 226px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  filter: saturate(1.02);
}

.hero-photo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 55% 34%;
  border-radius: 52% 0 0 52% / 48% 0 0 52%;
  box-shadow: -22px 24px 58px rgba(56, 22, 48, 0.15), 0 0 64px rgba(231, 181, 168, 0.22);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 18%, #000 100%),
    radial-gradient(ellipse at 56% 48%, #000 56%, rgba(0, 0, 0, 0.88) 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 18%, #000 100%),
    radial-gradient(ellipse at 56% 48%, #000 56%, rgba(0, 0, 0, 0.88) 72%, transparent 100%);
  mask-composite: intersect;
}

.wedding-hero .hero-photo-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 52% 0 0 52% / 48% 0 0 52%;
  background:
    linear-gradient(94deg, rgba(255, 250, 247, 0.94) 0%, rgba(255, 250, 247, 0.55) 18%, rgba(255, 250, 247, 0) 45%),
    linear-gradient(0deg, rgba(255, 250, 247, 0.28), transparent 38%);
  pointer-events: none;
}

.upload-florals {
  opacity: 0.5;
}

.upload-florals-right {
  opacity: 0.22;
}

.upload-card {
  margin-top: -68px;
  border-radius: 36px;
  padding: 30px 20px 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 28px 76px rgba(56, 22, 48, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.upload-card > h1#upload-title {
  margin-bottom: 20px;
  font-size: clamp(1.96rem, 7.8vw, 2.58rem);
  line-height: 0.98;
  letter-spacing: -0.052em;
}

.field-label {
  margin-bottom: 10px;
  color: rgba(50, 20, 46, 0.82);
}

.email-field {
  margin-bottom: 24px;
}

.email-field .input-box {
  min-height: 70px;
  border: 1.5px solid rgba(205, 156, 145, 0.48);
  border-radius: 20px;
  background: rgba(255, 252, 249, 0.88);
  font-size: 1.06rem;
}

.section-headline {
  align-items: flex-end;
  margin: 26px 0 14px;
}

.section-headline h2,
.upload-section-title {
  font-size: clamp(1.78rem, 7vw, 2.32rem);
}

.photo-choice-buttons {
  gap: 6px;
}

.photo-choice-buttons .text-btn {
  color: rgba(87, 60, 80, 0.72);
  font-size: 0.9rem;
}

.selected-strip {
  grid-auto-columns: 124px;
  gap: 12px;
  padding: 2px 2px 15px;
}

.selected-strip--empty {
  grid-auto-columns: 122px;
}

.selected-photo,
.add-tile,
.inspiration-tile {
  width: 122px;
  min-width: 122px;
  height: 136px;
  border-radius: 19px;
}

.inspiration-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  color: #fffaf7;
  text-align: left;
  box-shadow: 0 14px 32px rgba(56, 22, 48, 0.14);
}

.inspiration-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.78) 0 10px, transparent 11px),
    radial-gradient(circle at 68% 38%, rgba(255, 241, 228, 0.44) 0 22px, transparent 23px),
    linear-gradient(180deg, transparent 34%, rgba(42, 16, 37, 0.72) 100%);
}

.inspiration-tile--table {
  background:
    linear-gradient(135deg, rgba(219, 169, 134, 0.84), rgba(88, 55, 47, 0.82)),
    url("assets/hero-couple.jpg") center / cover;
}

.inspiration-tile--party {
  background:
    linear-gradient(135deg, rgba(105, 52, 79, 0.86), rgba(216, 130, 118, 0.72)),
    url("assets/hero-couple.jpg") 58% 44% / cover;
}

.inspiration-tile--toast {
  background:
    linear-gradient(135deg, rgba(132, 89, 62, 0.82), rgba(239, 190, 159, 0.74)),
    url("assets/hero-couple.jpg") 36% 40% / cover;
}

.inspiration-tile > * {
  position: relative;
  z-index: 1;
}

.inspiration-tile .icon {
  width: 1.05rem;
  height: 1.05rem;
  margin-bottom: auto;
  color: rgba(255, 250, 247, 0.9);
}

.inspiration-tile strong {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.inspiration-tile small {
  color: rgba(255, 250, 247, 0.78);
  font-size: 0.73rem;
  font-weight: 720;
}

.add-tile {
  border: 1.5px dashed rgba(213, 156, 146, 0.58);
  background:
    radial-gradient(circle at 55% 20%, rgba(255, 255, 255, 0.84), transparent 5rem),
    linear-gradient(145deg, rgba(255, 242, 238, 0.98), rgba(255, 255, 255, 0.8));
}

.add-tile strong {
  color: var(--ink-2);
}

.upload-progress-box,
.privacy-note,
.empty-box {
  border-color: rgba(205, 156, 145, 0.3);
  border-radius: 23px;
  background: linear-gradient(135deg, rgba(255, 250, 247, 0.94), rgba(255, 255, 255, 0.78));
}

.progress-track {
  height: 7px;
}

.progress-preview-row {
  grid-auto-columns: 64px;
  gap: 9px;
}

.progress-preview-row img {
  width: 64px;
  height: 56px;
  border-radius: 12px;
}

.my-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.my-photo-empty {
  min-height: 78px;
  border: 1px solid rgba(205, 156, 145, 0.26);
  border-radius: 17px;
  padding: 9px;
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--ink-2);
  text-align: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.84), transparent 3.6rem),
    linear-gradient(145deg, rgba(255, 242, 238, 0.94), rgba(255, 255, 255, 0.76));
}

.my-photo-empty--primary {
  color: #fffaf7;
  background: linear-gradient(135deg, #3a1735, #d98a7d);
}

.my-photo-empty--note {
  cursor: default;
}

.my-photo-empty .icon {
  width: 1.16rem;
  height: 1.16rem;
}

.my-photo-empty strong {
  font-size: 0.78rem;
  line-height: 1.05;
}

.my-photo-empty small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.18;
}

.my-photo-empty--primary small,
.my-photo-empty--primary strong {
  color: #fffaf7;
}

.sticky-upload-bar {
  background: linear-gradient(135deg, rgba(43, 16, 38, 0.995), rgba(63, 25, 55, 0.995) 58%, rgba(91, 43, 76, 0.995));
  box-shadow: 0 -18px 48px rgba(40, 12, 34, 0.28);
}

.sticky-upload-icon {
  color: #ee9b8f;
}

.sticky-upload-bar .primary-btn {
  background: linear-gradient(135deg, #e28d81, #f0a895 58%, #f4baa7);
  box-shadow: 0 18px 34px rgba(219, 120, 106, 0.28);
}

/* Admin: closer to the editorial GPT-Image dashboard */
.admin-page {
  grid-template-columns: 240px minmax(0, 1fr);
  background:
    radial-gradient(circle at 83% 5%, rgba(232, 147, 130, 0.14), transparent 30rem),
    radial-gradient(circle at 52% 100%, rgba(244, 222, 213, 0.2), transparent 34rem),
    linear-gradient(90deg, #271520 0 240px, #fff9f5 240px 100%);
}

.admin-sidebar {
  padding: 34px 18px;
  background:
    radial-gradient(circle at 30% -4%, rgba(237, 166, 156, 0.2), transparent 12rem),
    linear-gradient(180deg, #2b1027 0%, #37152f 56%, #23101e 100%);
}

.admin-sidebar::before {
  opacity: 0.42;
}

.admin-sidebar::after {
  left: 20px;
  right: 18px;
  bottom: 86px;
  height: 258px;
  opacity: 0.46;
}

.admin-brand-title {
  font-size: 2.12rem;
  line-height: 0.88;
}

.admin-main {
  padding: 38px clamp(18px, 2.2vw, 30px) 48px;
}

.admin-topbar {
  margin-bottom: 22px;
}

.admin-topbar h1 {
  font-size: clamp(2.95rem, 4.8vw, 4.25rem);
}

.admin-upload-toolbar {
  grid-template-columns: minmax(300px, 1.4fr) 140px 140px 158px;
  padding: 11px;
  gap: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
}

.admin-upload-toolbar .input-box,
.admin-upload-toolbar .select-box {
  min-height: 48px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
}

.admin-layout {
  grid-template-columns: minmax(250px, 316px) minmax(0, 1fr) minmax(284px, 328px);
  gap: 16px;
}

.admin-panel {
  border-color: rgba(135, 83, 116, 0.11);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 48px rgba(68, 29, 58, 0.09);
}

.admin-group-panel {
  max-height: calc(100vh - 178px);
}

.group-card {
  min-height: 67px;
  padding: 11px;
  border-radius: 17px;
}

.grid-toolbar {
  min-height: 48px;
}

.photo-grid-admin {
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 11px;
}

.admin-thumb {
  aspect-ratio: 1 / 0.92;
  border-radius: 17px;
  box-shadow: 0 11px 25px rgba(71, 31, 60, 0.1);
}

.admin-thumb[data-selected="true"] {
  border-color: #d98a7d;
  box-shadow: 0 0 0 4px rgba(232, 147, 130, 0.2), 0 16px 34px rgba(71, 31, 60, 0.16);
  transform: translateY(-2px);
}

.admin-thumb[data-selected="true"] .select-box-thumb {
  background: linear-gradient(135deg, #3a1735, #d98a7d);
  box-shadow: 0 8px 20px rgba(58, 23, 53, 0.24);
}

.admin-thumb.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(58, 23, 53, 0.12), 0 16px 34px rgba(71, 31, 60, 0.16);
}

.inspector.inspector--fit {
  border-radius: 28px;
}

.inspector.inspector--fit .inspector-hero {
  height: 246px;
  border-radius: 21px;
}

.inspector.inspector--fit .inspector-details h3 {
  font-size: 1.36rem;
}

.inspector-section {
  padding-top: 15px;
  margin-top: 15px;
}

@media (min-width: 780px) {
  .guest-page {
    padding-top: 30px;
  }

  .phone-stage {
    width: min(430px, calc(100vw - 36px));
    padding: 34px 0 24px;
    border-radius: 48px;
    background: #fffaf7;
  }

  .phone-statusbar {
    margin-top: -18px;
  }

  .wedding-hero {
    min-height: 364px;
    margin: 0 16px;
    padding-top: 36px;
    border-radius: 36px;
  }

  .wedding-hero .hero-photo-scene {
    right: -18px;
    top: 48px;
    height: 222px;
  }

  .upload-card {
    margin: -64px 16px 0;
  }
}

@media (max-width: 560px) {
  .wedding-hero {
    min-height: 356px;
    padding: 34px 21px 90px;
  }

  .wedding-hero-copy {
    max-width: 64%;
  }

  .brand-title {
    font-size: clamp(2.65rem, 13.2vw, 3.45rem);
  }

  .upload-hero-copy {
    max-width: 224px;
    font-size: 0.88rem;
  }

  .wedding-hero .hero-photo-scene {
    right: -30px;
    top: 48px;
    width: 55%;
    height: 204px;
  }

  .upload-card {
    margin-top: -62px;
    margin-inline: 10px;
    padding: 28px 16px 22px;
  }

  .selected-strip {
    grid-auto-columns: 116px;
  }

  .selected-photo,
  .add-tile,
  .inspiration-tile {
    width: 116px;
    min-width: 116px;
    height: 130px;
  }
}

@media (max-width: 1320px) {
  .admin-upload-toolbar {
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(132px, 0.32fr));
  }

  .admin-layout {
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  }
}

/* Claude Design fidelity pass — final cascade overrides from the design review. */
:root {
  --card: #fffdfc;
  --card-line: rgba(120, 70, 100, 0.10);
  --card-shadow: 0 18px 48px rgba(67, 29, 55, 0.10);
  --input-rose: rgba(217, 154, 150, 0.42);
  --cta-coral: #e6938a;
  --cta-coral-2: #efa896;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(232, 147, 130, 0.12), transparent 30rem),
    linear-gradient(160deg, #fffaf7 0%, #fdf4ef 60%, #faece6 100%);
}

.public-nav {
  background: linear-gradient(180deg, rgba(255, 251, 248, 0.94), rgba(255, 251, 248, 0.74));
}

.public-nav-inner {
  max-width: 1220px;
}

.public-logo-mark,
.public-tab.active {
  background: linear-gradient(135deg, #2e122a, #4b2544);
}

.upload-card,
.admin-panel,
.album-release-card,
.album-preview-panel,
.album-gallery-section,
.album-stat-grid > div {
  background: var(--card);
  border-color: var(--card-line);
  box-shadow: var(--card-shadow);
  backdrop-filter: none;
}

.wedding-hero {
  min-height: 384px;
  padding: 38px 22px 104px;
  background:
    radial-gradient(circle at 86% 24%, rgba(255, 255, 255, 0.42) 0 8rem, transparent 8.5rem),
    linear-gradient(118deg, #fffaf6 0%, #fdeee7 52%, #efcec4 100%);
}

.wedding-hero-copy {
  max-width: 62%;
}

.brand-title {
  font-size: clamp(2.65rem, 12.4vw, 4.18rem);
  line-height: 0.9;
  letter-spacing: -0.066em;
}

.brand-title .amp {
  color: var(--blush);
}

.wedding-hero .hero-photo-scene {
  right: -18px;
  top: 42px;
  width: 54%;
  max-width: 244px;
  height: 238px;
}

.hero-photo-img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
}

.upload-card {
  margin-top: -76px;
  padding: 31px 22px 25px;
  border-radius: 38px;
}

.upload-card > h1#upload-title {
  max-width: 92%;
  margin-bottom: 22px;
  font-size: clamp(1.78rem, 7vw, 2.35rem);
  line-height: 1.02;
}

.email-field .input-box,
.album-email-row .input-box,
.admin-upload-toolbar .input-box,
.admin-upload-toolbar .select-box {
  border-color: var(--input-rose);
  background: #fffdfc;
}

.email-field .input-box {
  min-height: 66px;
  border-radius: 21px;
}

.email-field.valid .input-box {
  border-color: rgba(108, 155, 108, 0.50);
}

.section-headline {
  margin: 28px 0 15px;
}

.section-headline h2,
.upload-section-title {
  font-size: clamp(1.72rem, 6.8vw, 2.24rem);
}

.selected-strip {
  grid-auto-columns: 98px;
  gap: 11px;
  padding-bottom: 16px;
}

.selected-strip--empty {
  grid-auto-columns: 104px;
}

.selected-photo,
.add-tile,
.inspiration-tile {
  width: 98px;
  min-width: 98px;
  height: 116px;
  border-radius: 16px;
}

.inspiration-tile {
  box-shadow: 0 9px 22px rgba(71, 31, 60, 0.10);
}

.selected-photo .remove {
  width: 24px;
  height: 24px;
  top: 6px;
  right: 6px;
}

.selected-photo .check,
.my-photo .check {
  background: rgba(108, 155, 108, 0.94);
}

.add-tile {
  border: 1.5px dashed var(--input-rose);
  background: linear-gradient(145deg, #fff4f0, #fffdfc);
}

.add-tile strong {
  color: var(--blush);
  font-size: 2rem;
}

.upload-progress-box,
.privacy-note,
.empty-box {
  border-color: var(--card-line);
  border-radius: 18px;
  background: #fffdfc;
}

.progress-fill {
  background: linear-gradient(90deg, #3a1735, #6d3a60);
}

.my-grid:not(.my-grid--empty) {
  grid-auto-flow: column;
  grid-auto-columns: 78px;
  grid-template-columns: none;
  overflow-x: auto;
  padding-bottom: 5px;
}

.my-grid--empty {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.my-photo,
.more-count {
  min-width: 78px;
  border-radius: 16px;
}

.my-photo-total {
  background: linear-gradient(145deg, #fff4f0, #fffdfc);
}

.privacy-note {
  background: linear-gradient(135deg, #fdeee9, #fffdfc);
  border-color: var(--input-rose);
}

.privacy-note svg,
.sticky-upload-icon {
  color: var(--blush-2);
}

.sticky-upload-bar {
  background: linear-gradient(135deg, #2e122a, #3a2233);
  box-shadow: 0 -16px 40px rgba(40, 12, 34, 0.22);
}

.sticky-upload-bar .primary-btn {
  min-height: 52px;
  background: linear-gradient(135deg, var(--cta-coral), var(--cta-coral-2));
  box-shadow: 0 12px 28px rgba(214, 120, 108, 0.34);
  font-size: 1.12rem;
}

.admin-page {
  grid-template-columns: 240px minmax(0, 1fr);
  background:
    radial-gradient(circle at 83% 5%, rgba(232, 147, 130, 0.14), transparent 30rem),
    radial-gradient(circle at 52% 100%, rgba(244, 222, 213, 0.20), transparent 34rem),
    linear-gradient(90deg, #271520 0 240px, #fff9f5 240px 100%);
}

.admin-sidebar {
  padding: 34px 18px;
  background: linear-gradient(180deg, #2e112b, #34172f 60%, #271520);
}

.admin-sidebar::after {
  bottom: 86px;
  height: 250px;
  opacity: 0.38;
}

.admin-brand-subtitle {
  margin: 10px 0 0;
  color: rgba(244, 180, 167, 0.76);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sidebar-nav button {
  border-radius: 999px;
  font-weight: 720;
}

.sidebar-nav button.active {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.admin-main {
  padding: 38px clamp(22px, 2.7vw, 42px) 52px;
}

.admin-topbar {
  margin-bottom: 30px;
}

.admin-topbar h1 {
  font-size: clamp(2.95rem, 4.7vw, 4.15rem);
}

.admin-upload-toolbar {
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 22px;
}

.admin-layout {
  grid-template-columns: minmax(280px, 360px) minmax(440px, 1fr) minmax(300px, 360px);
  gap: 22px;
}

.admin-panel.pad,
.admin-grid-panel,
.inspector.inspector--fit {
  padding: 20px;
}

.group-card {
  min-height: 72px;
  padding: 12px;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  border-radius: 16px;
  background: #fffdfc;
}

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

.group-initial {
  background: #f4e7e3;
}

.group-meta {
  gap: 7px;
}

.group-chevron {
  color: rgba(50, 20, 46, 0.56);
  font-size: 1.25rem;
  line-height: 1;
}

.grid-toolbar {
  min-height: 50px;
  padding-bottom: 4px;
}

.grid-toolbar strong {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
}

.photo-grid-admin {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(71, 31, 60, 0.08);
}

.admin-thumb .select-box-thumb {
  top: 8px;
  left: 8px;
  border-radius: 6px;
}

.admin-thumb .status-dot {
  top: 8px;
  right: 8px;
  width: 13px;
  height: 13px;
}

.admin-thumb .eye {
  right: 8px;
  bottom: 8px;
}

.inspector.inspector--fit {
  border-radius: 24px;
}

.inspector.inspector--fit .inspector-hero {
  height: 240px;
  border-radius: 14px;
}

.inspector.inspector--fit .inspector-details h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.album-page {
  padding: 24px 16px 88px;
  background:
    radial-gradient(circle at 10% 0%, rgba(232, 147, 130, 0.16), transparent 32rem),
    linear-gradient(160deg, #fffaf7 0%, #fdf4ef 58%, #faece6 100%);
}

.album-hero-scene {
  min-height: clamp(520px, 68vh, 680px);
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  place-items: center;
  gap: clamp(18px, 4vw, 54px);
  padding: clamp(26px, 5vw, 54px);
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 248, 244, 0.18), transparent 20rem),
    linear-gradient(138deg, #271520 0%, #3a2233 52%, #8d554f 100%);
}

.album-hero-inner {
  width: min(680px, 100%);
  margin: 0;
  padding: 0;
  text-align: left;
}

.album-hero-photo {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 244, 0.24);
  border-radius: 34px;
  background: #eadbd6;
  box-shadow: 0 34px 72px rgba(20, 8, 18, 0.34);
  transform: rotate(2.5deg);
}

.album-hero-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 54% 34%;
}

.album-hero-inner h1 {
  max-width: 680px;
  font-size: clamp(3.55rem, 8.8vw, 7rem);
}

.album-content-shell {
  margin-top: -76px;
}

.album-release-card,
.album-preview-panel,
.album-gallery-section {
  background: rgba(255, 253, 252, 0.94);
}

@media (max-width: 1180px) {
  .admin-layout {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  }

  .photo-grid-admin {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }
}

@media (max-width: 760px) {
  .album-page {
    padding: 0 0 82px;
  }

  .album-hero-scene {
    width: 100%;
    min-height: 560px;
    grid-template-columns: 1fr;
    align-content: start;
    padding: 56px 22px 128px;
    border-radius: 0 0 40px 40px;
  }

  .album-hero-inner {
    order: 1;
    text-align: left;
  }

  .album-hero-photo {
    order: 0;
    justify-self: end;
    width: min(178px, 48vw);
    margin: -20px -8px -38px 0;
    border-radius: 999px 0 0 999px;
    transform: none;
  }

  .album-hero-inner h1 {
    font-size: clamp(3rem, 15vw, 4.5rem);
  }

  .album-content-shell {
    width: calc(100% - 20px);
    margin-top: -96px;
  }

  .album-release-card,
  .album-preview-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .wedding-hero {
    min-height: 362px;
    padding: 34px 21px 94px;
  }

  .wedding-hero-copy {
    max-width: 62%;
  }

  .brand-title {
    font-size: clamp(2.58rem, 13vw, 3.38rem);
  }

  .wedding-hero .hero-photo-scene {
    right: -22px;
    top: 46px;
    width: 54%;
    height: 204px;
  }

  .upload-card {
    margin-top: -70px;
    margin-inline: 10px;
    padding: 28px 17px 22px;
  }

  .selected-strip {
    grid-auto-columns: 96px;
  }

  .selected-photo,
  .add-tile,
  .inspiration-tile {
    width: 96px;
    min-width: 96px;
    height: 112px;
  }
}

/* Claude Design QA fixes: keep the album CTA clear and declutter empty bulk state. */
.album-content-shell {
  margin-top: -36px;
}

.bulk-hint {
  max-width: 220px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

@media (max-width: 760px) {
  .album-content-shell {
    margin-top: -62px;
  }
}

/* ============================================================
   Claude Design · Direct app implementation pass
   Ergebnis der aktuellen Claude-Design-Review: stärker mobile-
   first, keine horizontalen Clippings, wärmere Editorial-Fläche.
   ============================================================ */

:root {
  --serif: "Cormorant Garamond", "Playfair Display", "Bodoni 72", "Didot", Georgia, serif;
  --sans: Inter, "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sg-cream: #fffaf6;
  --sg-cream-2: #f8ede7;
  --sg-aubergine: #34162f;
  --sg-aubergine-deep: #27101f;
  --sg-blush: #e99a8c;
  --sg-blush-soft: #f4d9d1;
  --sg-sage: #aeb79d;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.guest-page {
  background:
    radial-gradient(circle at 0% 7%, rgba(235, 169, 154, 0.38) 0 4.4rem, transparent 4.55rem),
    radial-gradient(circle at 8% 19%, rgba(174, 183, 157, 0.24) 0 2.45rem, transparent 2.6rem),
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.92) 0 7rem, rgba(248, 218, 205, 0.52) 12rem, transparent 16rem),
    linear-gradient(180deg, var(--sg-cream) 0%, #fff2ec 51%, var(--sg-cream-2) 100%);
}

.phone-stage {
  width: min(100vw, 430px);
  max-width: 100vw;
  overflow-x: clip;
}

.wedding-hero {
  background:
    radial-gradient(circle at 7% 12%, rgba(236, 178, 163, 0.28) 0 3.4rem, transparent 3.55rem),
    radial-gradient(circle at 12% 44%, rgba(174, 183, 157, 0.18) 0 2.3rem, transparent 2.45rem),
    radial-gradient(circle at 86% 22%, rgba(255, 255, 255, 0.62) 0 8rem, transparent 8.6rem),
    linear-gradient(112deg, #fffaf6 0%, #fff0e9 50%, #edcfc4 100%);
}

.brand-title,
.upload-card > h1#upload-title,
.section-headline h2,
.sticky-upload-title,
.admin-topbar h1,
.admin-brand-title,
.album-hero-inner h1 {
  font-family: var(--serif);
  color: var(--sg-aubergine);
  text-wrap: balance;
}

.brand-title .amp {
  color: var(--sg-blush);
}

.hero-photo-img {
  border-radius: 54% 0 0 54% / 48% 0 0 52%;
  box-shadow:
    -20px 24px 58px rgba(52, 22, 47, 0.14),
    0 0 72px rgba(233, 154, 140, 0.24);
}

.upload-card {
  background: rgba(255, 253, 251, 0.975);
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 -10px 34px rgba(255, 255, 255, 0.62),
    0 30px 74px rgba(52, 22, 47, 0.14);
}

.email-field,
.email-field .input-box,
.section-headline,
.selected-strip,
.privacy-note {
  max-width: 100%;
}

.email-field .input-box {
  border-color: rgba(225, 166, 154, 0.54);
  background: #fffdfb;
}

.photo-choice-buttons .text-btn {
  background: transparent;
  border-color: transparent;
  color: rgba(78, 50, 72, 0.76);
}

.selected-strip {
  scrollbar-width: none;
}

.selected-strip::-webkit-scrollbar {
  display: none;
}

.inspiration-tile strong {
  text-shadow: 0 1px 10px rgba(35, 16, 31, 0.22);
}

.sticky-upload-bar {
  background:
    radial-gradient(circle at 10% 0%, rgba(233, 154, 140, 0.12), transparent 12rem),
    linear-gradient(135deg, var(--sg-aubergine-deep), var(--sg-aubergine) 62%, #492540);
}

.sticky-upload-icon {
  color: #f0aa9a;
}

.sticky-upload-title {
  color: #fff8f4;
}

.sticky-upload-subtitle {
  color: rgba(255, 248, 244, 0.76);
}

.sticky-upload-bar .primary-btn {
  color: #fffaf6;
  background: linear-gradient(135deg, #e88d80, #f0a796 58%, #f5bca9);
}

.admin-page {
  background:
    radial-gradient(circle at 84% 4%, rgba(233, 154, 140, 0.16), transparent 30rem),
    radial-gradient(circle at 52% 100%, rgba(244, 217, 209, 0.22), transparent 34rem),
    linear-gradient(90deg, var(--sg-aubergine-deep) 0 240px, #fff9f5 240px 100%);
}

.admin-sidebar {
  background:
    radial-gradient(circle at 22% -4%, rgba(233, 154, 140, 0.24), transparent 12rem),
    linear-gradient(180deg, #2b1027 0%, #37152f 58%, #23101e 100%);
}

.admin-panel,
.admin-upload-toolbar,
.group-card,
.inspector.inspector--fit {
  background: rgba(255, 253, 251, 0.9);
}

.admin-upload-toolbar {
  box-shadow: 0 16px 42px rgba(67, 29, 55, 0.08);
}

.status-pill.approved,
.success-btn {
  color: #52784e;
}

.status-pill.pending {
  color: #9a6a28;
}

.danger-btn {
  color: #cf5a4c;
}

.album-hero-scene {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 248, 244, 0.2), transparent 20rem),
    radial-gradient(circle at 16% 16%, rgba(233, 154, 140, 0.16), transparent 22rem),
    linear-gradient(138deg, var(--sg-aubergine-deep) 0%, var(--sg-aubergine) 52%, #8d554f 100%);
}

.album-release-card,
.album-preview-panel,
.album-gallery-section,
.album-stat-grid > div {
  background: rgba(255, 253, 251, 0.94);
}

@media (max-width: 560px) {
  .phone-stage {
    width: 100%;
    max-width: 100%;
  }

  .phone-statusbar {
    height: 32px;
    padding: 8px 22px 0;
  }

  .wedding-hero {
    width: 100%;
    min-height: 382px;
    margin-inline: 0;
    padding: 34px 22px 98px;
    border-radius: 0 0 48px 48px;
  }

  .wedding-hero-copy {
    max-width: 62%;
  }

  .brand-title {
    font-size: clamp(2.78rem, 13vw, 3.52rem);
    line-height: 0.88;
    letter-spacing: -0.07em;
  }

  .brand-title .brand-sub {
    margin-top: 8px;
    font-size: 0.37em;
  }

  .upload-hero-copy {
    max-width: min(232px, 64vw);
    font-size: 0.91rem;
    line-height: 1.55;
  }

  .wedding-hero .hero-photo-scene {
    right: -22px;
    top: 48px;
    width: 54%;
    height: 206px;
  }

  .upload-card {
    width: calc(100% - 20px);
    max-width: calc(100vw - 20px);
    margin: -74px auto 0;
    padding: 30px 28px 24px;
    border-radius: 40px;
  }

  .upload-card > h1#upload-title {
    max-width: 100%;
    margin-bottom: 24px;
    font-size: clamp(2rem, 8vw, 2.46rem);
    line-height: 1.02;
  }

  .email-field .input-box {
    min-height: 68px;
    padding-left: 50px;
    padding-right: 42px;
    font-size: 1.03rem;
  }

  .section-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin: 31px 0 15px;
  }

  .section-headline h2 {
    font-size: clamp(1.82rem, 7.4vw, 2.34rem);
    line-height: 1;
  }

  .photo-choice-buttons {
    display: grid;
    justify-items: end;
    gap: 6px;
  }

  .photo-choice-buttons .text-btn {
    min-height: 28px;
    padding: 0;
    gap: 7px;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .selected-strip,
  .selected-strip--empty {
    grid-auto-columns: 104px;
    gap: 11px;
    margin-inline: -1px -28px;
    padding-right: 28px;
  }

  .selected-photo,
  .add-tile,
  .inspiration-tile {
    width: 104px;
    min-width: 104px;
    height: 122px;
    border-radius: 18px;
  }

  .inspiration-tile {
    padding: 11px;
  }

  .inspiration-tile strong {
    font-size: 1.18rem;
  }

  .inspiration-tile small {
    font-size: 0.69rem;
  }

  .small-muted {
    font-size: 0.79rem;
  }

  .my-grid--empty {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .sticky-upload-bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius: 36px 36px 0 0;
  }

  .sticky-upload-inner {
    grid-template-columns: 32px minmax(0, 1fr) minmax(104px, auto);
    gap: 9px;
  }

  .sticky-upload-inner > div:not(.sticky-upload-icon) {
    min-width: 0;
  }

  .sticky-upload-icon {
    width: 32px;
    height: 32px;
  }

  .sticky-upload-title {
    font-size: 1.16rem;
    line-height: 1.05;
  }

  .sticky-upload-subtitle {
    font-size: 0.73rem;
    line-height: 1.25;
  }

  .sticky-upload-bar .primary-btn {
    grid-column: auto !important;
    width: auto !important;
    min-width: 104px;
    min-height: 50px;
    padding-inline: 14px;
    font-size: 1.04rem;
    white-space: nowrap;
  }
}

@media (max-width: 370px) {
  .upload-card {
    padding-inline: 20px;
  }

  .selected-strip,
  .selected-strip--empty {
    grid-auto-columns: 96px;
    margin-right: -20px;
    padding-right: 20px;
  }

  .selected-photo,
  .add-tile,
  .inspiration-tile {
    width: 96px;
    min-width: 96px;
  }

  .sticky-upload-inner {
    grid-template-columns: 30px minmax(0, 1fr) minmax(94px, auto);
    gap: 8px;
  }

  .sticky-upload-bar .primary-btn {
    min-width: 94px;
    padding-inline: 11px;
    font-size: 0.98rem;
  }
}

/* ============================================================
   Claude Design · Mobile Upload Fidelity Override
   Finaler, bewusst letzter Block für die GPT-Image-Referenz:
   kürzerer Poster-Hero, weicheres Paarbild, sichtbare Controls
   und eine Sticky-Bar ohne horizontales Clipping auf 390px.
   ============================================================ */
@media (max-width: 560px) {
  .guest-page {
    min-width: 0;
    padding-top: 0;
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    background:
      radial-gradient(circle at -4% 6%, rgba(235, 169, 154, 0.45) 0 4.2rem, transparent 4.35rem),
      radial-gradient(circle at 8% 17%, rgba(174, 183, 157, 0.26) 0 2.4rem, transparent 2.55rem),
      radial-gradient(ellipse at 100% 3%, rgba(255, 255, 255, 0.94) 0 6.5rem, rgba(248, 218, 205, 0.5) 11rem, transparent 15rem),
      linear-gradient(180deg, #fffaf6 0%, #fff2ec 50%, #f8ede7 100%);
  }

  .guest-page *,
  .guest-page *::before,
  .guest-page *::after {
    box-sizing: border-box;
  }

  .phone-stage {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    padding-inline: 0;
    overflow-x: hidden;
  }

  .phone-statusbar {
    height: 31px;
    padding: 8px 21px 0;
    font-size: 0.86rem;
    font-weight: 780;
  }

  .wedding-hero {
    min-height: 306px;
    margin: 0;
    padding: 34px 21px 84px;
    overflow: hidden;
    border-radius: 0 0 46px 46px;
    background:
      radial-gradient(circle at 8% 13%, rgba(236, 178, 163, 0.28) 0 3.3rem, transparent 3.5rem),
      radial-gradient(circle at 13% 45%, rgba(174, 183, 157, 0.18) 0 2.25rem, transparent 2.4rem),
      radial-gradient(circle at 86% 20%, rgba(255, 255, 255, 0.68) 0 7rem, transparent 7.6rem),
      linear-gradient(112deg, #fffaf6 0%, #fff0e9 51%, #edcfc4 100%);
  }

  .wedding-hero::before {
    inset: -46px auto auto -80px;
    opacity: 0.48;
  }

  .wedding-hero-copy {
    max-width: 58%;
    padding-top: 2px;
    min-width: 0;
  }

  .brand-title {
    font-size: clamp(2.58rem, 12vw, 3.22rem);
    line-height: 0.88;
    letter-spacing: -0.068em;
  }

  .brand-title .amp {
    margin-inline: -0.03em;
    color: #e99a8c;
  }

  .brand-title .brand-sub {
    margin-top: 8px;
    font-size: 0.39em;
    line-height: 1;
  }

  .upload-hero-copy {
    max-width: min(220px, 58vw);
    margin-top: 15px;
    color: rgba(50, 20, 46, 0.66);
    font-size: 0.9rem;
    line-height: 1.48;
  }

  .wedding-hero .hero-photo-scene {
    right: 0;
    top: 43px;
    width: 50%;
    max-width: 206px;
    height: 205px;
    overflow: hidden;
    border-radius: 999px 0 0 999px;
    background: #f4ded5;
    box-shadow: -18px 22px 54px rgba(52, 22, 47, 0.14);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.62) 18%, #000 38%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.62) 18%, #000 38%, #000 100%);
  }

  .wedding-hero .hero-photo-scene::after {
    display: none;
  }

  .hero-photo-img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: 49% 40%;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .upload-card {
    width: calc(100% - 20px);
    max-width: calc(100vw - 20px);
    margin: -90px auto 0;
    padding: 29px 18px 23px;
    border-radius: 38px;
    background: rgba(255, 253, 251, 0.985);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
      0 -8px 28px rgba(255, 255, 255, 0.68),
      0 28px 70px rgba(52, 22, 47, 0.13);
  }

  .upload-card > h1#upload-title {
    margin-bottom: 22px;
    font-size: clamp(1.92rem, 7.7vw, 2.36rem);
    line-height: 1.02;
  }

  .email-field {
    margin-bottom: 25px;
  }

  .email-field .input-box {
    min-height: 66px;
    padding-left: 50px;
    padding-right: 42px;
    border: 1.5px solid rgba(225, 166, 154, 0.58);
    border-radius: 20px;
    background: #fffdfb;
    font-size: 1rem;
  }

  .section-headline {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin: 28px 0 14px;
  }

  .section-headline h2 {
    min-width: 0;
    font-size: clamp(1.78rem, 7.1vw, 2.22rem);
    line-height: 1;
  }

  .photo-choice-buttons {
    max-width: 98px;
    min-width: 0;
    display: grid;
    justify-items: stretch;
    gap: 5px;
  }

  .photo-choice-buttons .text-btn {
    width: 100%;
    min-width: 0;
    min-height: 26px;
    justify-content: flex-end;
    padding: 0;
    gap: 6px;
    color: rgba(78, 50, 72, 0.76);
    font-size: 0.82rem;
    line-height: 1;
    white-space: nowrap;
    transform: none;
  }

  .photo-choice-buttons .text-btn .icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
  }

  .selected-strip,
  .selected-strip--empty {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 0 0 14px;
    display: flex;
    gap: 11px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .selected-strip::-webkit-scrollbar {
    display: none;
  }

  .selected-strip--empty .inspiration-tile {
    display: none;
  }

  .selected-photo,
  .add-tile,
  .inspiration-tile {
    flex: 0 0 104px;
    width: 104px;
    min-width: 104px;
    height: 122px;
    border-radius: 18px;
  }

  .selected-strip--empty .add-tile {
    flex-basis: 116px;
    width: 116px;
    min-width: 116px;
    height: 132px;
  }

  .add-tile {
    border-color: rgba(213, 156, 146, 0.58);
    background:
      radial-gradient(circle at 58% 20%, rgba(255, 255, 255, 0.9), transparent 5rem),
      linear-gradient(145deg, #fff4f0, #fffdfb);
  }

  .add-tile strong {
    color: #3a1735;
  }

  .small-muted {
    font-size: 0.79rem;
    line-height: 1.35;
  }

  .my-grid--empty {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .privacy-note {
    gap: 11px;
    margin-top: 18px;
    padding: 14px;
    border-radius: 18px;
    font-size: 0.84rem;
    line-height: 1.45;
  }

  .sticky-upload-bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 34px 34px 0 0;
  }

  .sticky-upload-inner {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .sticky-upload-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }

  .sticky-upload-inner > div:not(.sticky-upload-icon) {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sticky-upload-title,
  .sticky-upload-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-upload-title {
    font-size: 1.12rem;
    line-height: 1.05;
  }

  .sticky-upload-subtitle {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .sticky-upload-bar .primary-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 112px;
    max-width: 128px;
    min-height: 50px;
    padding-inline: 15px;
    border-radius: 24px;
    font-size: 1.02rem;
    line-height: 1;
    white-space: nowrap;
  }
}

@media (max-width: 370px) {
  .upload-card {
    padding-inline: 16px;
  }

  .wedding-hero-copy {
    max-width: 60%;
  }

  .brand-title {
    font-size: clamp(2.44rem, 12.4vw, 3.05rem);
  }

  .photo-choice-buttons {
    max-width: 90px;
  }

  .photo-choice-buttons .text-btn {
    font-size: 0.78rem;
  }

  .sticky-upload-bar {
    padding-inline: 13px;
  }

  .sticky-upload-inner {
    gap: 8px;
  }

  .sticky-upload-bar .primary-btn {
    min-width: 102px;
    padding-inline: 12px;
    font-size: 0.96rem;
  }
}

/* ============================================================
   Claude Design · App Layout Fidelity Pass
   Final mobile-first pass based on Claude Design guidance:
   a calmer GPT-Image-like hero, real sheet-card staging,
   visible inspiration tiles and a safer luxury sticky CTA.
   ============================================================ */
:root {
  --sg-ivory-2: #fbf6f0;
  --sg-sheet-2: #fffefd;
  --sg-blush-wash: #f7e3dc;
  --sg-blush-soft-2: #fff0eb;
  --sg-aubergine-ink: #34162f;
  --sg-aubergine-bar: #2a1026;
  --sg-aubergine-bar-2: #4a2440;
  --sg-coral-cta: #ec9182;
  --sg-coral-cta-2: #f4b09f;
  --sg-sage: #77956f;
  --sg-fidelity-line: rgba(68, 31, 59, 0.13);
  --sg-fidelity-line-strong: rgba(213, 156, 146, 0.52);
  --sg-luxe-shadow: 0 30px 78px rgba(52, 22, 47, 0.14);
  --sg-sheet-shadow: 0 -12px 34px rgba(255, 255, 255, 0.66), 0 32px 78px rgba(52, 22, 47, 0.13);
}

.guest-page,
.album-page,
.legal-page {
  background:
    radial-gradient(circle at 0 7%, rgba(236, 178, 163, 0.30) 0 4.4rem, transparent 4.6rem),
    radial-gradient(circle at 9% 18%, rgba(173, 183, 157, 0.20) 0 2.6rem, transparent 2.75rem),
    radial-gradient(ellipse at 100% 0, rgba(255, 255, 255, 0.94) 0 7rem, rgba(248, 218, 205, 0.44) 12rem, transparent 18rem),
    linear-gradient(180deg, var(--sg-ivory-2) 0%, #fff5ef 52%, #faede7 100%);
}

.album-hero-inner h1,
.upload-card > h1#upload-title,
.section-headline h2,
.album-release-copy h2,
.album-preview-copy h2,
.brand-title,
.sticky-upload-title {
  font-family: var(--serif);
  color: var(--sg-aubergine-ink);
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.album-kicker,
.release-pill {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .public-nav {
    display: none;
  }
}

@media (max-width: 560px) {
  html,
  body,
  #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .guest-page {
    min-width: 0;
    padding: 0 0 calc(124px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .phone-stage {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  .phone-statusbar {
    height: 32px;
    padding: 8px 22px 0;
    color: var(--sg-aubergine-ink);
    font-size: 0.86rem;
    font-weight: 800;
    opacity: 0.95;
  }

  .wedding-hero {
    min-height: 382px;
    margin: 0;
    padding: 34px 22px 138px;
    overflow: hidden;
    border-radius: 0 0 48px 48px;
    background:
      radial-gradient(circle at -1% 15%, rgba(236, 178, 163, 0.34) 0 3.7rem, transparent 3.85rem),
      radial-gradient(circle at 8% 47%, rgba(173, 183, 157, 0.18) 0 2.65rem, transparent 2.8rem),
      radial-gradient(circle at 84% 19%, rgba(255, 255, 255, 0.70) 0 8rem, transparent 8.75rem),
      linear-gradient(112deg, #fffaf6 0%, #fff0e9 51%, #edcfc4 100%);
  }

  .wedding-hero::before {
    inset: -42px auto auto -88px;
    width: 15.5rem;
    height: 15.5rem;
    opacity: 0.40;
  }

  .wedding-hero::after {
    opacity: 0.18;
  }

  .wedding-hero-copy {
    max-width: 59%;
    padding-top: 6px;
    min-width: 0;
  }

  .brand-title {
    font-size: clamp(2.95rem, 13.6vw, 3.86rem);
    line-height: 0.88;
    letter-spacing: -0.075em;
  }

  .brand-title .amp {
    color: #e99b8e;
    font-style: italic;
    font-size: 0.66em;
    margin-inline: -0.04em;
  }

  .brand-title .brand-sub {
    margin-top: 11px;
    font-size: 0.34em;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: rgba(52, 22, 47, 0.70);
  }

  .upload-hero-copy {
    max-width: min(220px, 58vw);
    margin-top: 17px;
    color: rgba(52, 22, 47, 0.64);
    font-size: 0.92rem;
    line-height: 1.52;
  }

  .wedding-hero .hero-photo-scene {
    right: -3px;
    top: 42px;
    width: 51vw;
    max-width: 216px;
    min-width: 174px;
    height: 224px;
    border-radius: 999px 0 0 999px;
    overflow: hidden;
    background: #f4ded5;
    border: 0;
    box-shadow: -18px 24px 62px rgba(52, 22, 47, 0.15);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 17%, #000 40%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 17%, #000 40%, #000 100%);
  }

  .wedding-hero .hero-photo-scene::after {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      linear-gradient(90deg, rgba(255, 250, 246, 0.34), transparent 46%),
      radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.46), transparent 42%);
    pointer-events: none;
  }

  .hero-photo-img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: 49% 38%;
    filter: saturate(0.96) brightness(1.04) contrast(0.96);
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .upload-card {
    width: calc(100% - 22px);
    max-width: calc(100vw - 22px);
    margin: -112px auto 0;
    padding: 37px 20px 25px;
    border-radius: 38px;
    background: rgba(255, 253, 251, 0.992);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: var(--sg-sheet-shadow);
  }

  .upload-card::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 50%;
    width: 42px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(93, 47, 78, 0.12);
  }

  .upload-card > h1#upload-title {
    margin: 0 0 24px;
    max-width: 12ch;
    font-size: clamp(2.08rem, 8.35vw, 2.64rem);
    line-height: 0.98;
  }

  .field-label {
    display: block;
    margin-bottom: 10px;
    color: rgba(52, 22, 47, 0.78);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.006em;
    text-transform: none;
  }

  .email-field {
    position: relative;
    margin-bottom: 28px;
    border-radius: 22px;
  }

  .email-field .input-box {
    min-height: 68px;
    padding: 0 46px 0 52px;
    border: 1.4px solid rgba(225, 166, 154, 0.58);
    border-radius: 22px;
    background: #fffdfb;
    color: rgba(52, 22, 47, 0.86);
    font-size: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }

  .email-field:focus-within .input-box {
    border-color: rgba(232, 145, 130, 0.88);
    box-shadow: 0 0 0 4px rgba(232, 145, 130, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  .section-headline {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin: 30px 0 15px;
  }

  .section-headline h2 {
    min-width: 0;
    font-size: clamp(1.88rem, 7.45vw, 2.34rem);
    line-height: 1;
  }

  .photo-choice-buttons {
    width: auto;
    max-width: 104px;
    display: grid;
    justify-items: stretch;
    gap: 6px;
    margin: 0;
  }

  .photo-choice-buttons .text-btn {
    width: 100%;
    min-width: 0;
    min-height: 27px;
    justify-content: flex-end;
    padding: 0;
    gap: 6px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(78, 50, 72, 0.78);
    font-size: 0.83rem;
    line-height: 1;
    white-space: nowrap;
    transform: none;
  }

  .selected-strip,
  .selected-strip--empty,
  .selected-strip--filled {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 15px;
    display: flex;
    grid-auto-flow: unset;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .selected-strip::-webkit-scrollbar {
    display: none;
  }

  .selected-strip--empty .inspiration-tile {
    display: flex;
  }

  .selected-photo,
  .add-tile,
  .inspiration-tile,
  .selected-strip--empty .add-tile {
    flex: 0 0 112px;
    width: 112px;
    min-width: 112px;
    height: 132px;
    border-radius: 19px;
    scroll-snap-align: start;
  }

  .inspiration-tile {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 15px 34px rgba(56, 22, 48, 0.13);
  }

  .inspiration-tile::before {
    opacity: 0.96;
  }

  .inspiration-tile strong {
    font-size: 1.22rem;
  }

  .inspiration-tile small {
    font-size: 0.72rem;
  }

  .add-tile {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1.5px dashed rgba(213, 156, 146, 0.58);
    background:
      radial-gradient(circle at 58% 20%, rgba(255, 255, 255, 0.92), transparent 5rem),
      linear-gradient(145deg, #fff4f0, #fffefd);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  .add-tile strong {
    color: var(--sg-aubergine-ink);
    font-size: 2.15rem;
    font-family: var(--sans);
    font-weight: 300;
    line-height: 0.86;
  }

  .add-tile span {
    margin-top: 5px;
    color: rgba(52, 22, 47, 0.84);
    font-weight: 760;
    line-height: 1.12;
  }

  .small-muted {
    color: rgba(78, 50, 72, 0.68);
    font-size: 0.80rem;
    line-height: 1.38;
  }

  .upload-consent-line {
    margin-top: 18px;
    padding: 13px;
    border: 1px solid rgba(213, 156, 146, 0.22);
    border-radius: 18px;
    background: rgba(255, 244, 240, 0.58);
    color: rgba(52, 22, 47, 0.75);
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .upload-progress-box {
    margin-top: 2px;
    padding: 17px 16px 16px;
    border: 1px solid rgba(213, 156, 146, 0.36);
    border-radius: 20px;
    background: linear-gradient(180deg, #fffdfb 0%, #fff8f4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  }

  .upload-progress-top {
    color: rgba(52, 22, 47, 0.88);
    font-size: 0.90rem;
  }

  .progress-track {
    height: 8px;
    background: rgba(232, 145, 130, 0.16);
  }

  .progress-fill {
    background: linear-gradient(90deg, var(--sg-aubergine-bar), var(--sg-aubergine-bar-2));
  }

  .progress-preview-row {
    gap: 9px;
  }

  .progress-preview-row img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }

  .success-line {
    color: var(--sg-sage);
    font-size: 0.88rem;
  }

  .my-grid,
  .my-grid--empty {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
  }

  .my-photo,
  .my-photo-empty,
  .my-photo-total,
  .more-count {
    min-height: 86px;
    border-radius: 15px;
  }

  .privacy-note {
    gap: 12px;
    margin-top: 19px;
    padding: 15px;
    border: 1px solid rgba(213, 156, 146, 0.24);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 244, 240, 0.92), rgba(255, 253, 251, 0.82));
    color: rgba(52, 22, 47, 0.76);
    font-size: 0.85rem;
    line-height: 1.48;
  }

  .privacy-note .icon {
    color: #e38e82;
  }

  .sticky-upload-bar {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 0;
    width: 100%;
    max-width: 430px;
    transform: translateX(-50%);
    padding: 17px 18px calc(17px + env(safe-area-inset-bottom));
    border-radius: 34px 34px 0 0;
    background:
      radial-gradient(circle at 8% 0, rgba(240, 167, 150, 0.14), transparent 10rem),
      linear-gradient(135deg, var(--sg-aubergine-bar), var(--sg-aubergine-ink) 64%, #48233f);
    box-shadow: 0 -18px 46px -25px rgba(52, 22, 47, 0.72);
    z-index: 60;
  }

  .sticky-upload-inner {
    min-width: 0;
    width: 100%;
    min-height: 57px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .sticky-upload-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: #f0aa9a;
  }

  .sticky-upload-inner > div:not(.sticky-upload-icon) {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sticky-upload-title {
    margin: 0;
    color: #fff8f4;
    font-size: 1.18rem;
    line-height: 1.02;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sticky-upload-subtitle {
    margin: 4px 0 0;
    color: rgba(255, 248, 244, 0.76);
    font-size: 0.74rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sticky-upload-bar .primary-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 128px;
    max-width: 142px;
    min-height: 54px;
    padding-inline: 18px;
    border-radius: 24px;
    color: #fffaf6;
    background: linear-gradient(135deg, #e98b7d, var(--sg-coral-cta) 55%, var(--sg-coral-cta-2));
    box-shadow: 0 16px 34px rgba(232, 145, 130, 0.29);
    font-family: var(--serif);
    font-size: 1.12rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
  }

  /* Album/Legal surfaces inherit the same mobile luxury language. */
  .album-page,
  .legal-page {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .album-hero-scene,
  .legal-hero {
    min-height: 318px;
    padding: 34px 22px 86px;
    border-radius: 0 0 46px 46px;
    background:
      radial-gradient(circle at 12% 12%, rgba(236, 178, 163, 0.28) 0 4.4rem, transparent 4.7rem),
      radial-gradient(circle at 88% 15%, rgba(255, 255, 255, 0.70) 0 7rem, transparent 7.6rem),
      linear-gradient(116deg, #fffaf6 0%, #fff0e9 53%, #edcfc4 100%);
  }

  .album-hero-photo {
    right: -10px;
    top: 45px;
    width: 49vw;
    max-width: 210px;
    min-width: 160px;
    height: 214px;
    border-radius: 999px 0 0 999px;
    overflow: hidden;
    border: 0;
    box-shadow: -18px 24px 62px rgba(52, 22, 47, 0.15);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.58) 18%, #000 41%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.58) 18%, #000 41%, #000 100%);
  }

  .album-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.96) brightness(1.04) contrast(0.96);
  }

  .album-hero-inner,
  .legal-hero {
    max-width: 64%;
  }

  .album-kicker {
    color: rgba(52, 22, 47, 0.58);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.12em;
  }

  .album-monogram {
    color: var(--sg-aubergine-ink);
    opacity: 0.86;
  }

  .album-hero-inner h1,
  .legal-hero h1 {
    font-size: clamp(2.16rem, 8.6vw, 2.92rem);
    line-height: 0.95;
  }

  .album-hero-inner p,
  .legal-hero p {
    color: rgba(52, 22, 47, 0.66);
    font-size: 0.92rem;
    line-height: 1.48;
  }

  .album-content-shell,
  .legal-card {
    width: calc(100% - 22px);
    max-width: calc(100vw - 22px);
    margin: -54px auto 0;
    padding: 34px 18px 24px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 36px;
    background: rgba(255, 253, 251, 0.992);
    box-shadow: var(--sg-sheet-shadow);
  }

  .album-release-card,
  .album-preview-panel,
  .album-gallery-section,
  .legal-card {
    border-radius: 24px;
    background: linear-gradient(180deg, #fffefd 0%, #fff9f5 100%);
    border: 1px solid rgba(213, 156, 146, 0.24);
    box-shadow: 0 18px 48px rgba(52, 22, 47, 0.08);
  }

  .album-release-card,
  .album-preview-panel {
    padding: 18px;
  }

  .album-release-copy h2,
  .album-preview-copy h2 {
    font-size: clamp(1.72rem, 7vw, 2.18rem);
    line-height: 1.02;
  }

  .release-pill {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 240, 235, 0.88);
    color: rgba(52, 22, 47, 0.68);
    font-size: 0.64rem;
    font-weight: 850;
  }

  .album-email-row {
    display: grid;
    gap: 10px;
  }

  .album-email-row .primary-btn {
    width: 100%;
    min-height: 52px;
  }

  .album-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .album-stat-grid > div {
    min-width: 0;
    padding: 12px 7px;
    border: 1px solid rgba(213, 156, 146, 0.22);
    border-radius: 16px;
    background: rgba(255, 244, 240, 0.76);
    text-align: center;
  }

  .album-stat-grid strong {
    color: var(--sg-aubergine-ink);
    font-family: var(--serif);
    font-size: 1.75rem;
    line-height: 0.9;
  }

  .album-stat-grid span {
    color: rgba(52, 22, 47, 0.62);
    font-size: 0.68rem;
    line-height: 1.15;
  }

  .album-preview-stack {
    min-height: 156px;
  }
}

@media (max-width: 370px) {
  .brand-title {
    font-size: clamp(2.62rem, 13.2vw, 3.18rem);
  }

  .wedding-hero-copy {
    max-width: 60%;
  }

  .wedding-hero .hero-photo-scene {
    min-width: 162px;
    height: 206px;
  }

  .upload-card {
    width: calc(100% - 18px);
    max-width: calc(100vw - 18px);
    padding-inline: 17px;
  }

  .selected-photo,
  .add-tile,
  .inspiration-tile,
  .selected-strip--empty .add-tile {
    flex-basis: 104px;
    width: 104px;
    min-width: 104px;
    height: 124px;
  }

  .sticky-upload-bar {
    padding-inline: 14px;
  }

  .sticky-upload-inner {
    gap: 9px;
  }

  .sticky-upload-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .sticky-upload-bar .primary-btn {
    min-width: 108px;
    max-width: 122px;
    padding-inline: 13px;
    font-size: 1.02rem;
  }
}

/* Claude Design · Mobile overflow QA corrections */
@media (max-width: 560px) {
  .guest-page,
  .album-page,
  .legal-page {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .phone-stage {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .wedding-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .upload-card,
  .album-content-shell,
  .legal-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    overflow: hidden;
  }

  .email-field,
  .email-field .input-box,
  .album-email-row .input-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .photo-choice-buttons {
    max-width: 86px !important;
    overflow: hidden;
  }

  .photo-choice-buttons .text-btn {
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
  }

  .sticky-upload-bar {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .sticky-upload-bar .primary-btn {
    min-width: 112px;
    max-width: 126px;
    padding-inline: 14px;
  }
}

@media (min-width: 391px) and (max-width: 560px) {
  .phone-stage,
  .sticky-upload-bar {
    width: min(100vw, 430px) !important;
    max-width: min(100vw, 430px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Claude Design · 390px screenshot-safe phone rail */
@media (max-width: 560px) {
  .phone-stage,
  .sticky-upload-bar {
    width: min(100vw, 390px) !important;
    max-width: min(100vw, 390px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .wedding-hero,
  .album-hero-scene,
  .legal-hero {
    width: min(100vw, 390px) !important;
    max-width: min(100vw, 390px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .upload-card,
  .album-content-shell,
  .legal-card {
    width: calc(min(100vw, 390px) - 20px) !important;
    max-width: calc(min(100vw, 390px) - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Claude Design · align mobile rail to the viewport edge in browser captures */
@media (max-width: 560px) {
  .phone-stage,
  .wedding-hero,
  .album-hero-scene,
  .legal-hero,
  .sticky-upload-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .upload-card,
  .album-content-shell,
  .legal-card {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

/* Claude Design · sticky CTA no-clip tightening */
@media (max-width: 560px) {
  .sticky-upload-inner {
    gap: 9px !important;
  }

  .sticky-upload-inner > div:not(.sticky-upload-icon) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(100% - 38px - 108px - 18px) !important;
  }

  .sticky-upload-title {
    font-size: 1.06rem !important;
  }

  .sticky-upload-subtitle {
    font-size: 0.70rem !important;
  }

  .sticky-upload-bar .primary-btn {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    padding-inline: 10px !important;
    font-size: 0.98rem !important;
  }
}

/* Claude Design · deterministic mobile sticky grid */
@media (max-width: 560px) {
  .sticky-upload-inner {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 96px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .sticky-upload-icon,
  .sticky-upload-inner > div:not(.sticky-upload-icon),
  .sticky-upload-bar .primary-btn {
    min-width: 0 !important;
  }

  .sticky-upload-inner > div:not(.sticky-upload-icon) {
    max-width: none !important;
  }

  .sticky-upload-bar .primary-btn {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    padding-inline: 8px !important;
    justify-self: end !important;
    font-size: 0.92rem !important;
  }
}

/* Claude Design · album mobile readability follow-up */
@media (max-width: 560px) {
  .album-hero-inner p,
  .album-page--private .album-hero-inner p,
  .album-page--published .album-hero-inner p {
    color: rgba(52, 22, 47, 0.70) !important;
    text-shadow: none !important;
  }

  .album-hero-actions .secondary-btn.light,
  .album-hero-actions .secondary-btn {
    border: 1px solid rgba(213, 156, 146, 0.34) !important;
    background: rgba(255, 253, 251, 0.78) !important;
    color: rgba(52, 22, 47, 0.82) !important;
    box-shadow: 0 12px 30px rgba(52, 22, 47, 0.08) !important;
    backdrop-filter: blur(10px);
  }

  .album-hero-inner h1,
  .album-page--private .album-hero-inner h1 {
    color: var(--sg-aubergine-ink) !important;
    text-shadow: none !important;
  }
}

/* ============================================================
   Claude Design · #/album Mobile-Fidelity (final override)
   Ziel: Komposition wie Upload-Hero – Copy links, Foto rechts
   eingeblendet, kompakter Hero, weiße Sheet-Card lugt hervor.
   ============================================================ */
@media (max-width: 560px) {
  .album-hero-scene {
    min-height: 330px !important;
    padding: 38px 22px 92px !important;
    display: block !important;
    position: relative !important;
    border-radius: 0 0 44px 44px !important;
    background:
      radial-gradient(circle at 8% 14%, rgba(236, 178, 163, 0.26) 0 4.2rem, transparent 4.6rem),
      radial-gradient(ellipse at 86% 22%, rgba(255, 255, 255, 0.9) 0 3.4rem, rgba(246, 226, 215, 0.72) 8rem, transparent 12.4rem),
      linear-gradient(116deg, #fffbf8 0%, #fff4ef 48%, #edcfc4 100%) !important;
  }

  .album-hero-inner {
    position: relative;
    z-index: 3;
    order: 0 !important;
    width: 56% !important;
    max-width: 56% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .album-hero-inner .album-monogram {
    display: none !important;
  }

  .album-hero-inner .album-kicker {
    margin: 0 0 12px !important;
    color: rgba(52, 22, 47, 0.58) !important;
    font-size: 0.64rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.16em !important;
  }

  .album-hero-inner h1 {
    max-width: none !important;
    font-size: clamp(2.2rem, 8.6vw, 2.9rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.05em !important;
    color: var(--sg-aubergine-ink) !important;
    text-shadow: none !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    color: rgba(52, 22, 47, 0.70) !important;
    font-size: 0.9rem !important;
    line-height: 1.46 !important;
    text-shadow: none !important;
  }

  .album-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  .album-hero-actions .secondary-btn,
  .album-hero-actions .secondary-btn.light {
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 22px !important;
    color: #fffaf6 !important;
    background: linear-gradient(135deg, #e98b7d, var(--sg-coral-cta) 55%, var(--sg-coral-cta-2)) !important;
    box-shadow: 0 16px 34px rgba(232, 145, 130, 0.28) !important;
    font-family: var(--serif) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    backdrop-filter: none !important;
  }

  .album-hero-actions .primary-btn.blush {
    justify-content: center !important;
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 22px !important;
  }

  .album-hero-photo {
    position: absolute !important;
    z-index: 1 !important;
    right: -18px !important;
    top: 46px !important;
    left: auto !important;
    bottom: auto !important;
    width: 47% !important;
    max-width: 196px !important;
    min-width: 150px !important;
    height: 206px !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 96px 0 0 96px !important;
    transform: none !important;
    box-shadow: -18px 24px 52px rgba(56, 22, 48, 0.16) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 16%, #000 42%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 16%, #000 42%, #000 100%);
  }

  .album-hero-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 54% 32% !important;
    filter: saturate(1.0) brightness(1.03) contrast(0.97) !important;
  }

  .album-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(100deg, rgba(255, 250, 247, 0.96) 0%, rgba(255, 250, 247, 0.7) 17%, rgba(255, 250, 247, 0) 46%),
      linear-gradient(0deg, rgba(255, 250, 247, 0.4), transparent 40%);
  }

  .album-content-shell {
    margin-top: -52px !important;
    width: calc(min(100vw, 390px) - 20px) !important;
    max-width: calc(min(100vw, 390px) - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding: 30px 18px 22px !important;
    border-radius: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    background: rgba(255, 253, 251, 0.994) !important;
    box-shadow: var(--sg-sheet-shadow) !important;
  }

  .album-release-card {
    padding: 18px !important;
  }
}

@media (max-width: 370px) {
  .album-hero-inner {
    max-width: 60% !important;
  }

  .album-hero-photo {
    max-width: 168px !important;
    height: 196px !important;
    top: 50px !important;
  }

  .album-hero-inner h1 {
    font-size: clamp(2.0rem, 8.8vw, 2.6rem) !important;
  }
}

/* ============================================================
   Claude Design · Direct implementation pass (2026-06-04)
   Ziel: GPT-Image-Referenzen treuer in der echten App abbilden.
   ============================================================ */
:root {
  --claude-ivory: #fffaf7;
  --claude-sheet: #fffefd;
  --claude-blush: #fae9e2;
  --claude-blush-2: #efcfc5;
  --claude-rose: #e29a91;
  --claude-rose-deep: #c9827d;
  --claude-aubergine: #35122f;
  --claude-aubergine-2: #542748;
  --claude-ink: #32142e;
  --claude-muted: rgba(70, 40, 62, 0.68);
  --claude-card-shadow: 0 26px 70px rgba(56, 22, 48, 0.14);
  --claude-sheet-shadow: 0 28px 76px rgba(56, 22, 48, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

/* Mobile upload: real phone-like app surface, not a generic webpage. */
.guest-page {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 3% 5%, rgba(232, 162, 149, 0.36) 0 4.7rem, transparent 4.9rem),
    radial-gradient(circle at 7% 15%, rgba(151, 166, 135, 0.22) 0 2.1rem, transparent 2.25rem),
    radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.94) 0 6.2rem, rgba(245, 223, 212, 0.58) 12rem, transparent 17rem),
    linear-gradient(180deg, #fffaf7 0%, #fff3ee 47%, #f4e2db 100%) !important;
}

.phone-stage {
  position: relative !important;
  width: min(100%, 430px) !important;
  margin-inline: auto !important;
  background: transparent !important;
  overflow: visible !important;
}

.phone-statusbar {
  display: flex !important;
  position: relative !important;
  z-index: 8 !important;
  height: 34px !important;
  padding: 9px 22px 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--claude-ink) !important;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em !important;
}

.phone-statusbar .sb-icons {
  width: 22px !important;
  height: 22px !important;
  color: var(--claude-rose) !important;
}

.wedding-hero {
  position: relative !important;
  min-height: 392px !important;
  padding: 38px 22px 100px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 0 44px 44px !important;
  box-shadow: none !important;
  background:
    radial-gradient(circle at 4% 12%, rgba(232, 162, 149, 0.30) 0 4.2rem, transparent 4.6rem),
    radial-gradient(circle at 2% 23%, rgba(151, 166, 135, 0.20) 0 2.2rem, transparent 2.36rem),
    radial-gradient(ellipse at 89% 20%, rgba(255,255,255,0.94) 0 3.7rem, rgba(246,226,215,0.76) 8.4rem, transparent 12.8rem),
    linear-gradient(116deg, #fffbf8 0%, #fff4ef 48%, #edcfc4 100%) !important;
}

.wedding-hero-copy {
  position: relative !important;
  z-index: 4 !important;
  width: 58% !important;
  max-width: 250px !important;
}

.brand-title {
  margin: 0 !important;
  color: var(--claude-ink) !important;
  font-family: var(--serif) !important;
  font-size: clamp(3.45rem, 13.8vw, 4.35rem) !important;
  font-weight: 560 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.075em !important;
  text-wrap: balance !important;
}

.brand-title .amp {
  color: var(--claude-rose) !important;
  font-style: italic !important;
  font-weight: 440 !important;
  margin-inline: -0.04em !important;
}

.brand-sub {
  display: block !important;
  margin-top: 12px !important;
  color: rgba(70, 40, 62, 0.64) !important;
  font-family: var(--serif) !important;
  font-size: clamp(1.22rem, 5.2vw, 1.62rem) !important;
  font-style: italic !important;
  font-weight: 470 !important;
  letter-spacing: -0.035em !important;
}

.upload-hero-copy {
  max-width: 245px !important;
  margin-top: 16px !important;
  color: var(--claude-muted) !important;
  font-size: 1.02rem !important;
  line-height: 1.48 !important;
}

.wedding-hero .hero-photo-scene {
  position: absolute !important;
  z-index: 2 !important;
  top: 44px !important;
  right: -24px !important;
  width: 48% !important;
  min-width: 170px !important;
  max-width: 224px !important;
  height: 232px !important;
  overflow: hidden !important;
  border-radius: 112px 0 0 112px !important;
  background: transparent !important;
  box-shadow: -20px 28px 58px rgba(56, 22, 48, 0.14) !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.48) 16%, #000 42%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.48) 16%, #000 42%, #000 100%);
}

.hero-photo-img,
.wedding-hero .hero-photo-scene > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 53% 32% !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  filter: saturate(0.98) brightness(1.04) contrast(0.97) !important;
}

.wedding-hero .hero-photo-scene::before,
.wedding-hero .hero-photo-scene::after,
.hero-photo-couple,
.hero-photo-flower {
  display: none !important;
}

.upload-card {
  position: relative !important;
  z-index: 5 !important;
  margin: -58px 10px 0 !important;
  padding: 38px 20px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 34px !important;
  background: rgba(255, 253, 251, 0.99) !important;
  box-shadow: var(--claude-sheet-shadow) !important;
}

.card-handle {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  width: 42px !important;
  height: 5px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(70, 40, 62, 0.13) !important;
}

.upload-card > h1#upload-title,
.upload-card h2,
.section-headline h2 {
  color: var(--claude-ink) !important;
  font-family: var(--serif) !important;
  font-weight: 520 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.062em !important;
}

.upload-card > h1#upload-title {
  max-width: 340px !important;
  margin: 0 0 24px !important;
  font-size: clamp(2.18rem, 9.2vw, 2.72rem) !important;
}

.email-field {
  min-height: 70px !important;
  padding: 0 16px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 13px !important;
  border: 1.5px solid rgba(202, 139, 130, 0.42) !important;
  border-radius: 20px !important;
  background: rgba(255, 253, 251, 0.82) !important;
  box-shadow: none !important;
}

.email-field:focus-within {
  border-color: rgba(226, 154, 145, 0.82) !important;
  box-shadow: 0 0 0 4px rgba(226, 154, 145, 0.16) !important;
}

.email-field .mail-icon,
.email-field .email-icon {
  color: var(--claude-rose-deep) !important;
}

.email-field .input-box {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(49, 20, 45, 0.76) !important;
  font-size: 1.12rem !important;
}

.email-field .ok-icon {
  display: grid !important;
  place-items: center !important;
}

.section-headline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 30px 0 14px !important;
}

.section-headline h2 {
  margin: 0 !important;
  font-size: clamp(2.02rem, 8.6vw, 2.48rem) !important;
}

.photo-choice-buttons {
  display: grid !important;
  gap: 8px !important;
  justify-items: end !important;
}

.photo-choice-buttons .text-btn {
  min-height: 30px !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(84, 55, 77, 0.72) !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
}

.selected-strip {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 116px !important;
  gap: 12px !important;
  overflow-x: auto !important;
  padding: 2px 2px 14px !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

.selected-strip::-webkit-scrollbar { display: none !important; }

.inspiration-tile,
.selected-photo,
.add-tile {
  width: 116px !important;
  min-width: 116px !important;
  height: 130px !important;
  border-radius: 18px !important;
  scroll-snap-align: start !important;
}

.inspiration-tile {
  box-shadow: 0 16px 30px rgba(56, 22, 48, 0.14) !important;
}

.inspiration-tile strong {
  font-family: var(--serif) !important;
  font-size: 1.36rem !important;
  font-weight: 520 !important;
  letter-spacing: -0.052em !important;
}

.add-tile {
  border: 1.5px dashed rgba(202, 139, 130, 0.44) !important;
  background: linear-gradient(145deg, rgba(255, 244, 240, 0.96), rgba(255, 255, 255, 0.82)) !important;
  color: var(--claude-ink) !important;
  box-shadow: none !important;
}

.upload-progress-box,
.privacy-note,
.my-grid--empty {
  border: 1px solid rgba(202, 139, 130, 0.24) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255, 250, 247, 0.94), rgba(255, 255, 255, 0.72)) !important;
}

.my-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.sticky-upload-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 60 !important;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin: 0 !important;
  padding: 13px 18px calc(13px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  border-radius: 30px 30px 0 0 !important;
  background: linear-gradient(135deg, rgba(45, 16, 40, 0.995), rgba(68, 28, 60, 0.995) 62%, rgba(92, 44, 76, 0.995)) !important;
  box-shadow: 0 -20px 46px rgba(45, 16, 40, 0.28) !important;
}

.sticky-upload-inner {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 104px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff8f4 !important;
}

.sticky-upload-icon,
.sticky-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  color: var(--claude-rose) !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

.sticky-upload-copy,
.sticky-text,
.sticky-upload-inner > div:not(.sticky-upload-icon):not(.sticky-icon) {
  min-width: 0 !important;
}

.sticky-upload-title,
.sticky-upload-subtitle {
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sticky-upload-title {
  color: #fff8f4 !important;
  font-family: var(--serif) !important;
  font-size: 1.15rem !important;
  font-weight: 520 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.042em !important;
}

.sticky-upload-subtitle {
  margin-top: 4px !important;
  color: rgba(255, 248, 244, 0.74) !important;
  font-size: 0.73rem !important;
  line-height: 1.1 !important;
}

.sticky-upload-bar .primary-btn,
.sticky-cta {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  min-height: 52px !important;
  padding: 0 10px !important;
  justify-self: end !important;
  border-radius: 20px !important;
  color: #fff8f4 !important;
  background: linear-gradient(135deg, #e8897b, #efa392 58%, #f4b19d) !important;
  box-shadow: 0 14px 28px rgba(232, 145, 130, 0.24) !important;
  font-family: var(--serif) !important;
  font-size: 1.02rem !important;
  font-weight: 520 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap !important;
}

/* Album: bring the photo back into the hero and keep the card rhythm from the first screens. */
.album-page {
  background:
    radial-gradient(circle at 5% 6%, rgba(232, 162, 149, 0.28) 0 4.8rem, transparent 5rem),
    radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.94) 0 7rem, rgba(245,223,212,0.5) 12rem, transparent 17rem),
    linear-gradient(180deg, #fffaf7 0%, #fff2ed 48%, #f4e2db 100%) !important;
}

@media (max-width: 560px) {
  .album-hero-scene {
    min-height: 360px !important;
    padding: 42px 22px 98px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 0 44px 44px !important;
    background:
      radial-gradient(circle at 6% 13%, rgba(232, 162, 149, 0.30) 0 4.2rem, transparent 4.6rem),
      radial-gradient(ellipse at 88% 20%, rgba(255,255,255,0.94) 0 3.7rem, rgba(246,226,215,0.76) 8.4rem, transparent 12.8rem),
      linear-gradient(116deg, #fffbf8 0%, #fff4ef 48%, #edcfc4 100%) !important;
  }

  .album-hero-inner {
    position: relative !important;
    z-index: 4 !important;
    width: 58% !important;
    max-width: 58% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
  }

  .album-hero-inner .album-monogram {
    width: 62px !important;
    height: 62px !important;
    margin: 0 0 14px !important;
    border-radius: 50% !important;
    background: rgba(255, 253, 251, 0.64) !important;
    box-shadow: 0 16px 34px rgba(56, 22, 48, 0.09) !important;
    color: var(--claude-ink) !important;
    font-size: 1.28rem !important;
  }

  .album-hero-inner .album-kicker {
    margin: 0 0 12px !important;
    color: rgba(52, 22, 47, 0.62) !important;
    font-size: 0.64rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.15em !important;
  }

  .album-hero-inner h1 {
    color: var(--claude-ink) !important;
    font-family: var(--serif) !important;
    font-size: clamp(2.12rem, 8.8vw, 2.86rem) !important;
    font-weight: 520 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.058em !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    color: rgba(52, 22, 47, 0.72) !important;
    font-size: 0.91rem !important;
    line-height: 1.48 !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  .album-hero-photo {
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 42px !important;
    right: -22px !important;
    left: auto !important;
    bottom: auto !important;
    width: 48% !important;
    min-width: 166px !important;
    max-width: 214px !important;
    height: 226px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 110px 0 0 110px !important;
    transform: none !important;
    box-shadow: -20px 28px 58px rgba(56, 22, 48, 0.14) !important;
    opacity: 1 !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 16%, #000 42%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 16%, #000 42%, #000 100%);
  }

  .album-hero-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 53% 32% !important;
    opacity: 1 !important;
    filter: saturate(0.98) brightness(1.04) contrast(0.97) !important;
  }

  .album-content-shell {
    position: relative !important;
    z-index: 5 !important;
    width: calc(100% - 20px) !important;
    max-width: 410px !important;
    margin: -56px 10px 0 !important;
    padding: 30px 18px 24px !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    border-radius: 34px !important;
    background: rgba(255, 253, 251, 0.994) !important;
    box-shadow: var(--claude-sheet-shadow) !important;
  }

  .album-release-card,
  .album-preview-panel,
  .album-gallery-section,
  .album-stat-grid > div {
    border: 1px solid rgba(202, 139, 130, 0.20) !important;
    background: rgba(255, 253, 251, 0.94) !important;
    box-shadow: 0 18px 42px rgba(56, 22, 48, 0.08) !important;
  }
}

/* Desktop/tablet: use a visible phone frame for previewing the mobile app. */
@media (min-width: 780px) {
  .guest-page {
    display: grid !important;
    place-items: start center !important;
    padding: 34px 0 calc(130px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(233, 196, 192, 0.25), transparent 26rem),
      linear-gradient(155deg, #2c1028 0%, #4c2741 44%, #b9786f 100%) !important;
  }

  .phone-stage {
    width: min(430px, calc(100vw - 36px)) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 46px !important;
    overflow: hidden !important;
    background: var(--claude-ivory) !important;
    box-shadow: 0 40px 90px rgba(24, 8, 22, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  .sticky-upload-bar {
    bottom: 18px !important;
    border-radius: 30px !important;
  }
}

/* Admin: preserve the GPT-Image dashboard feel with a cleaner 3-column review surface. */
.admin-page {
  background:
    radial-gradient(circle at 86% 4%, rgba(232, 147, 130, 0.16), transparent 30rem),
    radial-gradient(circle at 50% 100%, rgba(244, 222, 213, 0.24), transparent 34rem),
    linear-gradient(90deg, #2a1027 0 248px, #fff9f5 248px 100%) !important;
}

.admin-sidebar {
  background: linear-gradient(180deg, #2a1027 0%, #351530 58%, #240d20 100%) !important;
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.06) !important;
}

.admin-brand-title,
.admin-topbar h1,
.admin-section-title {
  font-family: var(--serif) !important;
  letter-spacing: -0.06em !important;
}

.admin-topbar h1 {
  font-size: clamp(3.1rem, 5.4vw, 4.9rem) !important;
  font-weight: 520 !important;
  color: var(--claude-ink) !important;
}

.admin-upload-toolbar {
  border-radius: 20px !important;
  border: 1px solid rgba(135, 83, 116, 0.10) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 18px 50px rgba(68, 29, 58, 0.09) !important;
}

.admin-panel,
.inspector,
.group-card {
  border-color: rgba(135, 83, 116, 0.12) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 18px 48px rgba(68, 29, 58, 0.09) !important;
}

.admin-layout {
  grid-template-columns: minmax(250px, 318px) minmax(0, 1fr) minmax(286px, 338px) !important;
  gap: 18px !important;
}

.photo-grid-admin {
  gap: 13px !important;
}

.admin-thumb {
  border-radius: 19px !important;
  box-shadow: 0 10px 24px rgba(71, 31, 60, 0.10) !important;
}

.inspector,
.inspector-hero {
  border-radius: 26px !important;
}

@media (max-width: 1320px) {
  .admin-layout {
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .guest-page {
    padding: 0 0 calc(116px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  .phone-stage {
    width: 100% !important;
    max-width: 430px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .sticky-upload-inner {
    grid-template-columns: 38px minmax(0, 1fr) 100px !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    font-size: 0.98rem !important;
  }
}

@media (max-width: 372px) {
  .sticky-upload-subtitle { display: none !important; }
  .sticky-upload-inner { grid-template-columns: 36px minmax(0, 1fr) 94px !important; }
  .sticky-upload-bar .primary-btn,
  .sticky-cta { width: 94px !important; min-width: 94px !important; max-width: 94px !important; }
}

/* Claude Design · email field icon placement fix */
.email-field .mail-icon,
.email-field .ok-icon,
.email-field .email-icon,
.email-field .email-check {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  pointer-events: none !important;
}

.email-field .ok-icon {
  justify-self: end !important;
}

.email-field.valid .ok-icon,
.email-field .ok-icon {
  opacity: 1;
}

/* Claude Design · only show the e-mail checkmark for a valid saved address */
.email-field .ok-icon,
.email-field .email-check {
  opacity: 0 !important;
}

.email-field.valid .ok-icon,
.email-field.valid .email-check {
  opacity: 1 !important;
}

/* Claude Design · admin brand contrast correction */
.admin-brand-title {
  color: #fff8f4 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18) !important;
}

.admin-brand-subtitle {
  color: rgba(255, 248, 244, 0.72) !important;
  opacity: 1 !important;
}

.admin-brand-mark {
  color: #eba99e !important;
  opacity: 1 !important;
}

/* ============================================================
   Claude Design · Direct App Fidelity Override (2026-06-04)
   Aus Claudes Design-Pass abgeleiteter finaler Override, bewusst
   auf bestehende Vanilla-Markup-Struktur begrenzt.
   ============================================================ */
:root {
  --cd-ivory: #fffaf7;
  --cd-ivory-2: #fff5ef;
  --cd-sheet: #fffefd;
  --cd-blush: #f5ddd5;
  --cd-blush-soft: #faeee9;
  --cd-coral: #e89082;
  --cd-coral-2: #f1a792;
  --cd-aubergine: #32142e;
  --cd-aubergine-2: #4e2745;
  --cd-muted: rgba(62, 29, 55, 0.68);
  --cd-line: rgba(205, 146, 135, 0.26);
  --cd-sheet-shadow: 0 34px 84px rgba(56, 22, 48, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  --cd-soft-shadow: 0 18px 46px rgba(56, 22, 48, 0.11);
}

/* Upload: GPT-Image-Fidelity auf Mobile priorisieren. */
@media (max-width: 560px) {
  .guest-page {
    background:
      radial-gradient(circle at 0% 5%, rgba(232, 145, 130, 0.36) 0 4.4rem, transparent 4.7rem),
      radial-gradient(circle at 8% 16%, rgba(143, 158, 124, 0.18) 0 2.2rem, transparent 2.45rem),
      linear-gradient(180deg, var(--cd-ivory) 0%, var(--cd-ivory-2) 54%, #f3e1da 100%) !important;
    padding: 0 0 calc(120px + env(safe-area-inset-bottom)) !important;
  }

  .phone-stage {
    width: 100% !important;
    max-width: 430px !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .phone-statusbar {
    height: 34px !important;
    padding: 10px 22px 0 !important;
    color: var(--cd-aubergine) !important;
  }

  .wedding-hero {
    min-height: 418px !important;
    padding: 38px 22px 116px !important;
    border-radius: 0 0 46px 46px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 4% 10%, rgba(232, 145, 130, 0.28) 0 4.6rem, transparent 4.95rem),
      radial-gradient(circle at 1% 25%, rgba(145, 160, 130, 0.18) 0 2.1rem, transparent 2.35rem),
      radial-gradient(ellipse at 91% 19%, rgba(255, 255, 255, 0.96) 0 3.8rem, rgba(246, 224, 214, 0.78) 8.6rem, transparent 13.2rem),
      linear-gradient(118deg, #fffdfb 0%, #fff4ef 49%, #eccfc4 100%) !important;
  }

  .wedding-hero-copy {
    z-index: 4 !important;
    width: 58% !important;
    max-width: 248px !important;
  }

  .brand-title {
    color: var(--cd-aubergine) !important;
    font-family: var(--serif) !important;
    font-size: clamp(3.35rem, 15vw, 4.9rem) !important;
    font-weight: 560 !important;
    line-height: 0.84 !important;
    letter-spacing: -0.082em !important;
  }

  .brand-title .amp {
    color: var(--cd-coral) !important;
    font-style: italic !important;
    font-weight: 430 !important;
  }

  .brand-sub {
    margin-top: 13px !important;
    color: rgba(63, 31, 57, 0.62) !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.18rem, 5vw, 1.55rem) !important;
    font-style: italic !important;
    font-weight: 460 !important;
    letter-spacing: -0.036em !important;
  }

  .upload-hero-copy {
    max-width: 250px !important;
    margin-top: 16px !important;
    color: var(--cd-muted) !important;
    font-size: 1.01rem !important;
    line-height: 1.5 !important;
  }

  .wedding-hero .hero-photo-scene {
    top: 42px !important;
    right: -30px !important;
    width: 52% !important;
    min-width: 178px !important;
    max-width: 236px !important;
    height: 248px !important;
    border-radius: 124px 0 0 124px !important;
    box-shadow: -22px 30px 64px rgba(56, 22, 48, 0.16) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 15%, #000 43%, #000 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 15%, #000 43%, #000 100%) !important;
  }

  .wedding-hero .hero-photo-scene > img,
  .hero-photo-img {
    object-position: 53% 31% !important;
    filter: saturate(1.02) brightness(1.04) contrast(0.98) !important;
  }

  .upload-card {
    z-index: 6 !important;
    margin: -74px 10px 0 !important;
    padding: 42px 21px 28px !important;
    border-radius: 38px !important;
    border: 1px solid rgba(255, 255, 255, 0.94) !important;
    background: rgba(255, 254, 253, 0.992) !important;
    box-shadow: var(--cd-sheet-shadow) !important;
  }

  .upload-card > h1#upload-title {
    max-width: 350px !important;
    margin-bottom: 25px !important;
    font-size: clamp(2.25rem, 9.4vw, 2.94rem) !important;
    line-height: 1.01 !important;
  }

  .email-field {
    min-height: 74px !important;
    border: 1.5px solid rgba(210, 150, 140, 0.44) !important;
    border-radius: 22px !important;
    background: rgba(255, 253, 251, 0.88) !important;
  }

  .section-headline {
    margin: 32px 0 15px !important;
  }

  .section-headline h2,
  .upload-card h2 {
    font-size: clamp(2.03rem, 8.7vw, 2.56rem) !important;
  }

  .selected-strip {
    grid-auto-columns: 120px !important;
    gap: 13px !important;
    padding: 2px 2px 16px !important;
  }

  .selected-photo,
  .inspiration-tile,
  .add-tile {
    width: 120px !important;
    min-width: 120px !important;
    height: 134px !important;
    border-radius: 20px !important;
  }

  .inspiration-tile::before {
    background: linear-gradient(180deg, rgba(41, 14, 37, 0.02), rgba(41, 14, 37, 0.48)) !important;
  }

  .inspiration-tile strong {
    font-size: 1.42rem !important;
  }

  .upload-progress-box,
  .privacy-note,
  .my-grid--empty {
    border-color: var(--cd-line) !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(255, 250, 247, 0.98), rgba(255, 255, 255, 0.82)) !important;
  }

  .my-grid:not(.my-grid--empty) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sticky-upload-bar {
    width: min(100%, 430px) !important;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom)) !important;
    border-radius: 30px 30px 0 0 !important;
    background: linear-gradient(135deg, #2b1027 0%, #3b1835 58%, #582a49 100%) !important;
    box-shadow: 0 -22px 52px rgba(44, 16, 40, 0.33) !important;
  }

  .sticky-upload-inner {
    grid-template-columns: 42px minmax(0, 1fr) 116px !important;
    gap: 12px !important;
  }

  .sticky-upload-icon,
  .sticky-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    color: #efa093 !important;
    background: rgba(255, 255, 255, 0.10) !important;
  }

  .sticky-upload-title {
    font-size: 1.18rem !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    min-height: 54px !important;
    border-radius: 21px !important;
    color: #fff8f4 !important;
    background: linear-gradient(135deg, #e8897c, #f0a18f 60%, #f5b39f) !important;
    box-shadow: 0 15px 30px rgba(233, 144, 130, 0.26) !important;
  }
}

@media (max-width: 372px) {
  .brand-title { font-size: clamp(3.05rem, 14.2vw, 4.05rem) !important; }
  .wedding-hero-copy { width: 60% !important; }
  .wedding-hero .hero-photo-scene { right: -42px !important; min-width: 168px !important; height: 232px !important; }
  .selected-strip { grid-auto-columns: 108px !important; }
  .selected-photo,
  .inspiration-tile,
  .add-tile { width: 108px !important; min-width: 108px !important; height: 124px !important; }
  .sticky-upload-inner { grid-template-columns: 38px minmax(0, 1fr) 104px !important; }
  .sticky-upload-bar .primary-btn,
  .sticky-cta { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
}

/* Album: die private Warteseite erhält dieselbe App-/Sheet-Sprache wie Upload. */
.album-page {
  background:
    radial-gradient(circle at 5% 6%, rgba(232, 145, 130, 0.25) 0 4.7rem, transparent 5rem),
    radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.94) 0 7rem, rgba(245,223,212,0.54) 12rem, transparent 17rem),
    linear-gradient(180deg, var(--cd-ivory) 0%, var(--cd-ivory-2) 49%, #f3e1da 100%) !important;
}

@media (max-width: 560px) {
  .album-page {
    overflow-x: hidden !important;
  }

  .album-hero-scene {
    min-height: 390px !important;
    padding: 42px 22px 112px !important;
    border-radius: 0 0 46px 46px !important;
    background:
      radial-gradient(circle at 6% 12%, rgba(232, 145, 130, 0.30) 0 4.45rem, transparent 4.75rem),
      radial-gradient(ellipse at 89% 19%, rgba(255,255,255,0.96) 0 3.9rem, rgba(246,226,215,0.78) 8.7rem, transparent 13.2rem),
      linear-gradient(118deg, #fffdfb 0%, #fff4ef 49%, #eccfc4 100%) !important;
  }

  .album-hero-inner {
    width: 59% !important;
    max-width: 59% !important;
  }

  .album-hero-inner .album-monogram {
    display: none !important;
  }

  .album-hero-inner .album-kicker {
    margin-bottom: 12px !important;
    color: rgba(53, 24, 48, 0.61) !important;
    font-size: 0.64rem !important;
    font-weight: 860 !important;
    letter-spacing: 0.16em !important;
  }

  .album-hero-inner h1 {
    font-size: clamp(2.35rem, 9.5vw, 3.08rem) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.064em !important;
    color: var(--cd-aubergine) !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    margin-top: 13px !important;
    color: var(--cd-muted) !important;
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
  }

  .album-hero-actions {
    margin-top: 18px !important;
  }

  .album-hero-photo {
    top: 42px !important;
    right: -30px !important;
    width: 52% !important;
    min-width: 174px !important;
    max-width: 232px !important;
    height: 248px !important;
    border-radius: 124px 0 0 124px !important;
    box-shadow: -22px 30px 64px rgba(56, 22, 48, 0.16) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.45) 15%, #000 43%, #000 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.45) 15%, #000 43%, #000 100%) !important;
  }

  .album-hero-photo img {
    object-position: 53% 31% !important;
    filter: saturate(1.02) brightness(1.04) contrast(0.98) !important;
  }

  .album-content-shell {
    width: calc(100% - 20px) !important;
    max-width: 410px !important;
    margin: -76px 10px 0 !important;
    padding: 34px 18px 24px !important;
    border-radius: 38px !important;
    background: rgba(255, 254, 253, 0.994) !important;
    box-shadow: var(--cd-sheet-shadow) !important;
  }

  .album-content-shell::before {
    content: "";
    display: block;
    width: 42px;
    height: 5px;
    margin: -18px auto 20px;
    border-radius: 999px;
    background: rgba(62, 29, 55, 0.12);
  }

  .album-release-card {
    padding: 20px !important;
    border-radius: 25px !important;
    border-color: rgba(210, 150, 140, 0.26) !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(232, 145, 130, 0.12), transparent 12rem),
      rgba(255, 253, 251, 0.96) !important;
  }

  .album-release-card h2,
  .album-preview-copy h2,
  .album-section-heading h2 {
    font-family: var(--serif) !important;
    color: var(--cd-aubergine) !important;
    font-size: clamp(2rem, 8vw, 2.5rem) !important;
    font-weight: 520 !important;
    letter-spacing: -0.058em !important;
    line-height: 1.02 !important;
  }

  .album-email-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .album-email-row .input-box {
    min-height: 58px !important;
    border-radius: 19px !important;
    border-color: rgba(210, 150, 140, 0.34) !important;
    background: rgba(255, 255, 255, 0.86) !important;
  }

  .album-email-row .primary-btn {
    min-height: 54px !important;
    border-radius: 999px !important;
  }

  .album-stat-grid {
    gap: 9px !important;
  }

  .album-stat-grid > div {
    padding: 14px 8px !important;
    border-radius: 19px !important;
    background: rgba(255, 250, 247, 0.92) !important;
  }

  .album-preview-panel {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  .album-preview-stack {
    min-height: 210px !important;
    margin-top: 2px !important;
  }
}

/* Veröffentlichtes Album: editorialer, kuratierter Raster statt Webseiten-Card. */
.album-gallery-section {
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(232, 145, 130, 0.10), transparent 20rem),
    rgba(255, 253, 251, 0.92) !important;
}

.album-gallery {
  align-items: stretch !important;
}

.album-photo {
  border-radius: 24px !important;
  box-shadow: 0 20px 44px rgba(56, 22, 48, 0.13) !important;
}

.album-photo::after {
  background:
    linear-gradient(180deg, transparent 34%, rgba(38, 16, 34, 0.78) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.06), transparent 38%) !important;
  opacity: 0.9 !important;
}

.album-photo figcaption {
  left: 16px !important;
  right: 16px !important;
  bottom: 15px !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.34) !important;
}

@media (min-width: 860px) {
  .album-page--published .album-content-shell {
    max-width: 1220px !important;
    padding: clamp(34px, 4vw, 56px) !important;
  }

  .album-page--published .album-gallery {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(155px, 12vw) !important;
    gap: 16px !important;
  }

  .album-page--published .album-photo--feature {
    grid-column: span 3 !important;
    grid-row: span 2 !important;
  }

  .album-page--published .album-photo--wide {
    grid-column: span 2 !important;
  }

  .album-page--published .album-photo--tall {
    grid-row: span 2 !important;
  }
}

@media (max-width: 620px) {
  .album-page--published .album-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 148px !important;
    gap: 10px !important;
  }

  .album-page--published .album-photo--feature,
  .album-page--published .album-photo--wide {
    grid-column: span 2 !important;
  }

  .album-page--published .album-photo--feature {
    grid-row: span 2 !important;
  }

  .album-page--published .album-photo--tall {
    grid-row: span 2 !important;
  }
}

/* Admin: Dashboard näher an der GPT-Referenz, ohne Struktur umzubauen. */
@media (min-width: 960px) {
  .admin-page {
    background:
      radial-gradient(circle at 84% 2%, rgba(232, 145, 130, 0.13), transparent 29rem),
      linear-gradient(90deg, #271020 0 248px, #fff9f5 248px 100%) !important;
  }

  .admin-sidebar {
    background: linear-gradient(180deg, #281021 0%, #361530 58%, #220c1d 100%) !important;
  }

  .admin-main {
    padding: 38px 34px 38px !important;
  }

  .admin-topbar h1 {
    font-size: clamp(3.25rem, 5.6vw, 5.1rem) !important;
    line-height: 0.94 !important;
  }

  .admin-upload-toolbar,
  .admin-panel,
  .group-card,
  .inspector {
    border: 1px solid rgba(133, 82, 114, 0.12) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 20px 52px rgba(68, 29, 58, 0.09) !important;
  }

  .admin-layout {
    grid-template-columns: minmax(260px, 330px) minmax(440px, 1fr) minmax(306px, 360px) !important;
    gap: 18px !important;
  }

  .photo-grid-admin {
    gap: 14px !important;
  }

  .admin-thumb {
    border-radius: 20px !important;
  }

  .inspector,
  .inspector-hero {
    border-radius: 28px !important;
  }
}

/* Claude Design · Typography legibility polish
   Bewahrt die elegante Serif-Anmutung, verhindert aber zusammengelaufene
   deutsche Mehrwort-Headlines in der echten App. */
@media (max-width: 560px) {
  .brand-title .amp {
    margin-inline: 0.045em !important;
  }

  .upload-card > h1#upload-title,
  .section-headline h2,
  .upload-card h2,
  .album-hero-inner h1,
  .album-release-card h2,
  .album-preview-copy h2,
  .album-section-heading h2,
  .sticky-upload-title,
  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    letter-spacing: -0.032em !important;
    word-spacing: 0.075em !important;
  }

  .brand-title {
    letter-spacing: -0.064em !important;
    word-spacing: 0.05em !important;
  }

  .brand-sub {
    letter-spacing: -0.022em !important;
    word-spacing: 0.04em !important;
  }

  .upload-card > h1#upload-title {
    line-height: 1.05 !important;
  }

  .album-hero-inner h1 {
    line-height: 0.98 !important;
  }

  .sticky-upload-title {
    letter-spacing: -0.018em !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    letter-spacing: -0.018em !important;
  }
}

/* ============================================================
   Claude Design · Direct App Album Fidelity Pass
   Die Album-Route ist die aktuell sichtbare Prüfoberfläche. Dieser
   finale Block richtet sie wie die akzeptierte Mobile-Referenz aus:
   warme Hero-Fläche, Copy links, weiches Paarfoto rechts, Sheet-Card
   direkt darunter. Funktionalität/Markup bleiben unverändert.
   ============================================================ */
@media (max-width: 560px) {
  .album-page {
    min-height: 100dvh !important;
    padding: 0 0 calc(42px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 3% 7%, rgba(232, 145, 130, 0.30) 0 4.6rem, transparent 4.85rem),
      radial-gradient(circle at 9% 22%, rgba(159, 176, 137, 0.20) 0 2.35rem, transparent 2.55rem),
      radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.96) 0 7rem, rgba(245, 223, 212, 0.50) 12rem, transparent 17rem),
      linear-gradient(180deg, #fffaf7 0%, #fff3ed 49%, #f4e2db 100%) !important;
  }

  .album-hero-scene {
    display: block !important;
    position: relative !important;
    min-height: 460px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 0 48px 48px !important;
    text-align: left !important;
    place-items: start !important;
    justify-items: start !important;
    align-items: start !important;
    color: var(--claude-ink, #35122f) !important;
    background:
      radial-gradient(circle at 5% 13%, rgba(232, 145, 130, 0.29) 0 4.35rem, transparent 4.65rem),
      radial-gradient(circle at 12% 45%, rgba(159, 176, 137, 0.15) 0 2.25rem, transparent 2.45rem),
      radial-gradient(ellipse at 89% 19%, rgba(255, 255, 255, 0.96) 0 3.9rem, rgba(246, 226, 215, 0.78) 8.7rem, transparent 13.2rem),
      linear-gradient(118deg, #fffdfb 0%, #fff4ef 49%, #eccfc4 100%) !important;
  }

  .album-hero-scene .floral-layer,
  .album-hero-glow {
    opacity: 0.28 !important;
    pointer-events: none !important;
  }

  .album-hero-inner {
    position: absolute !important;
    z-index: 5 !important;
    top: 38px !important;
    left: 22px !important;
    right: auto !important;
    bottom: auto !important;
    width: min(57vw, 222px) !important;
    max-width: min(57vw, 222px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: start !important;
    text-align: left !important;
    color: var(--claude-ink, #35122f) !important;
    text-shadow: none !important;
    transform: none !important;
  }

  .album-hero-inner .album-kicker {
    margin: 0 0 12px !important;
    color: rgba(53, 18, 47, 0.58) !important;
    font-size: 0.62rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.15em !important;
    line-height: 1.45 !important;
    text-transform: uppercase !important;
  }

  .album-hero-inner .album-monogram {
    display: none !important;
  }

  .album-hero-inner h1 {
    max-width: 9.2ch !important;
    margin: 0 !important;
    color: var(--claude-ink, #35122f) !important;
    font-family: var(--serif) !important;
    font-size: clamp(2.24rem, 9.3vw, 3.02rem) !important;
    font-weight: 530 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.038em !important;
    word-spacing: 0.05em !important;
    text-align: left !important;
    text-wrap: balance !important;
    text-shadow: none !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    max-width: 22ch !important;
    margin: 14px 0 0 !important;
    color: rgba(53, 18, 47, 0.68) !important;
    font-size: 0.9rem !important;
    font-weight: 520 !important;
    line-height: 1.48 !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  .album-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
    width: min(100%, 188px) !important;
    margin: 18px 0 0 !important;
  }

  .album-hero-actions .secondary-btn,
  .album-hero-actions .secondary-btn.light,
  .album-hero-actions .primary-btn.blush {
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 20px !important;
    justify-content: center !important;
    color: #fffaf6 !important;
    background: linear-gradient(135deg, #e8897c, #efa18f 60%, #f4b39f) !important;
    box-shadow: 0 14px 28px rgba(232, 145, 130, 0.24) !important;
    font-family: var(--serif) !important;
    font-size: 0.98rem !important;
    font-weight: 530 !important;
    letter-spacing: -0.015em !important;
    line-height: 1 !important;
    white-space: normal !important;
    backdrop-filter: none !important;
  }

  .album-hero-photo {
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 42px !important;
    right: -26px !important;
    left: auto !important;
    bottom: auto !important;
    width: clamp(176px, 54vw, 222px) !important;
    height: 244px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 122px 0 0 122px !important;
    background: #f4ded5 !important;
    box-shadow:
      -20px 27px 58px rgba(56, 22, 48, 0.14),
      0 0 72px rgba(232, 145, 130, 0.20) !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.52) 16%, #000 42%, #000 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.52) 16%, #000 42%, #000 100%) !important;
  }

  .album-hero-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 53% 32% !important;
    opacity: 1 !important;
    filter: saturate(0.98) brightness(1.04) contrast(0.97) !important;
  }

  .album-hero-photo::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background:
      linear-gradient(100deg, rgba(255, 250, 247, 0.95) 0%, rgba(255, 250, 247, 0.68) 17%, rgba(255, 250, 247, 0) 46%),
      linear-gradient(0deg, rgba(255, 250, 247, 0.36), transparent 40%) !important;
  }

  .album-content-shell {
    position: relative !important;
    z-index: 6 !important;
    width: calc(100% - 20px) !important;
    max-width: 410px !important;
    margin: -52px 10px 0 !important;
    padding: 32px 18px 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 38px !important;
    background: rgba(255, 253, 251, 0.996) !important;
    box-shadow:
      0 -12px 34px rgba(255, 255, 255, 0.66),
      0 32px 78px rgba(52, 22, 47, 0.13) !important;
  }

  .album-release-card,
  .album-preview-panel,
  .album-gallery-section,
  .album-stat-grid > div {
    border: 1px solid rgba(202, 139, 130, 0.22) !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(232, 145, 130, 0.10), transparent 11rem),
      rgba(255, 253, 251, 0.96) !important;
    box-shadow: 0 18px 42px rgba(56, 22, 48, 0.08) !important;
  }

  .album-release-card {
    padding: 18px !important;
    border-radius: 25px !important;
    gap: 18px !important;
  }

  .album-release-copy h2,
  .album-preview-copy h2 {
    margin-top: 0 !important;
    color: var(--claude-ink, #35122f) !important;
    font-family: var(--serif) !important;
    font-size: clamp(1.82rem, 7.2vw, 2.26rem) !important;
    font-weight: 520 !important;
    line-height: 1.03 !important;
    letter-spacing: -0.035em !important;
    word-spacing: 0.04em !important;
  }

  .album-release-copy p,
  .album-preview-copy p {
    color: rgba(53, 18, 47, 0.68) !important;
    line-height: 1.5 !important;
  }

  .album-email-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .album-email-row .input-box {
    min-height: 64px !important;
    border: 1.5px solid rgba(226, 154, 145, 0.50) !important;
    border-radius: 20px !important;
    background: #fffdfb !important;
    font-size: 1rem !important;
  }

  .album-email-row .primary-btn {
    min-height: 52px !important;
    width: 100% !important;
    border-radius: 20px !important;
  }

  .album-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 16px 0 !important;
  }

  .album-stat-grid > div {
    min-height: 94px !important;
    padding: 14px 7px !important;
    border-radius: 19px !important;
    text-align: center !important;
  }

  .album-stat-grid strong {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
  }

  .album-stat-grid span {
    margin-top: 8px !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
  }

  .album-preview-panel {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 21px !important;
    border-radius: 25px !important;
  }

  .album-preview-stack {
    min-height: 212px !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 370px) {
  .album-hero-inner {
    top: 36px !important;
    left: 20px !important;
    width: min(60vw, 205px) !important;
    max-width: min(60vw, 205px) !important;
  }

  .album-hero-inner h1 {
    font-size: clamp(2.02rem, 8.9vw, 2.56rem) !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    font-size: 0.84rem !important;
  }

  .album-hero-photo {
    right: -32px !important;
    width: clamp(166px, 53vw, 196px) !important;
    height: 226px !important;
  }
}

/* ============================================================
   Claude Design · App-Reconciliation Pass (2026-06-04)
   Ziel: Die sichtbare App wieder näher an die akzeptierten
   GPT-Image-/Erstscreenshot-Referenzen bringen: kleinerer,
   eleganterer Hero, Sheet-Card früher sichtbar, keine CTA-
   Clippings. Bewusst als letzte Override-Schicht umgesetzt.
   ============================================================ */
:root {
  --cdx-ink: #35122f;
  --cdx-muted: rgba(70, 42, 66, 0.72);
  --cdx-blush: #ef998d;
  --cdx-blush-soft: #fff1ec;
  --cdx-line: rgba(214, 151, 141, 0.34);
  --cdx-sheet: rgba(255, 254, 252, 0.992);
  --cdx-sheet-shadow: 0 -10px 28px rgba(255, 255, 255, 0.68), 0 28px 68px rgba(52, 22, 47, 0.14);
}

@media (max-width: 560px) {
  .guest-page {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }

  .phone-statusbar {
    height: 34px !important;
    padding: 9px 22px 0 !important;
  }

  .wedding-hero {
    min-height: 346px !important;
    padding: 36px 22px 88px !important;
    border-radius: 0 0 46px 46px !important;
    background:
      radial-gradient(circle at -3% 10%, rgba(232, 145, 130, 0.34) 0 4.1rem, transparent 4.4rem),
      radial-gradient(circle at 6% 28%, rgba(146, 161, 128, 0.18) 0 2.15rem, transparent 2.35rem),
      radial-gradient(ellipse at 90% 18%, rgba(255, 255, 255, 0.96) 0 3.6rem, rgba(246, 224, 214, 0.76) 8.1rem, transparent 12.6rem),
      linear-gradient(118deg, #fffdfb 0%, #fff4ef 49%, #eccfc4 100%) !important;
  }

  .wedding-hero-copy {
    width: 56% !important;
    max-width: 220px !important;
  }

  .brand-title {
    font-size: clamp(2.72rem, 12.2vw, 3.35rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.052em !important;
    word-spacing: 0.035em !important;
  }

  .brand-title .amp {
    margin-inline: 0.03em !important;
    color: var(--cdx-blush) !important;
  }

  .brand-sub {
    margin-top: 9px !important;
    font-size: clamp(1.03rem, 4.45vw, 1.3rem) !important;
    line-height: 1.05 !important;
  }

  .upload-hero-copy {
    max-width: min(214px, 56vw) !important;
    margin-top: 14px !important;
    color: var(--cdx-muted) !important;
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
  }

  .wedding-hero .hero-photo-scene {
    top: 40px !important;
    right: -4px !important;
    width: 49% !important;
    min-width: 166px !important;
    max-width: 206px !important;
    height: 222px !important;
    border-radius: 110px 0 0 110px !important;
    box-shadow: -18px 25px 54px rgba(56, 22, 48, 0.14) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 18%, #000 43%, #000 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 18%, #000 43%, #000 100%) !important;
  }

  .upload-card {
    margin: -54px 10px 0 !important;
    padding: 38px 21px 26px !important;
    border-radius: 38px !important;
    background: var(--cdx-sheet) !important;
    box-shadow: var(--cdx-sheet-shadow) !important;
  }

  .upload-card > h1#upload-title {
    max-width: 100% !important;
    margin-bottom: 24px !important;
    color: var(--cdx-ink) !important;
    font-size: clamp(2.0rem, 7.55vw, 2.36rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.026em !important;
    word-spacing: 0.055em !important;
  }

  .email-field {
    min-height: 68px !important;
    border-color: var(--cdx-line) !important;
    border-radius: 21px !important;
  }

  .email-field .input-box {
    font-size: 1.02rem !important;
  }

  .section-headline {
    margin: 28px 0 14px !important;
  }

  .section-headline h2,
  .upload-card h2 {
    font-size: clamp(1.75rem, 7.2vw, 2.22rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
  }

  .photo-choice-buttons {
    width: 86px !important;
    max-width: 86px !important;
    gap: 5px !important;
  }

  .photo-choice-buttons .text-btn {
    max-width: 86px !important;
    font-size: 0.78rem !important;
  }

  .selected-strip {
    grid-auto-columns: 112px !important;
    gap: 12px !important;
  }

  .selected-photo,
  .inspiration-tile,
  .add-tile {
    width: 112px !important;
    min-width: 112px !important;
    height: 126px !important;
    border-radius: 18px !important;
  }

  .sticky-upload-bar {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom)) !important;
    border-radius: 30px 30px 0 0 !important;
  }

  .sticky-upload-inner {
    grid-template-columns: 38px minmax(0, 1fr) 104px !important;
    gap: 10px !important;
  }

  .sticky-upload-icon,
  .sticky-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .sticky-upload-title {
    font-size: 1.08rem !important;
    letter-spacing: -0.012em !important;
  }

  .sticky-upload-subtitle {
    font-size: 0.70rem !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    min-height: 52px !important;
    padding-inline: 9px !important;
    font-size: 0.96rem !important;
  }
}

@media (max-width: 372px) {
  .sticky-upload-subtitle {
    display: none !important;
  }

  .sticky-upload-inner {
    grid-template-columns: 36px minmax(0, 1fr) 94px !important;
    gap: 8px !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
    font-size: 0.9rem !important;
  }
}

/* Album: Rückkehr zur ruhigeren Erstscreenshot-Komposition. */
@media (max-width: 560px) {
  .album-page {
    padding-bottom: calc(34px + env(safe-area-inset-bottom)) !important;
  }

  .album-hero-scene {
    min-height: 430px !important;
    padding: 0 !important;
    border-radius: 0 0 46px 46px !important;
    background:
      radial-gradient(circle at 8% 11%, rgba(232, 145, 130, 0.32) 0 4.35rem, transparent 4.65rem),
      radial-gradient(ellipse at 90% 18%, rgba(255, 255, 255, 0.96) 0 3.8rem, rgba(246, 226, 215, 0.78) 8.4rem, transparent 12.9rem),
      linear-gradient(118deg, #fffdfb 0%, #fff4ef 50%, #eccfc4 100%) !important;
  }

  .album-hero-inner {
    top: 40px !important;
    left: clamp(72px, 25vw, 98px) !important;
    width: min(52vw, 206px) !important;
    max-width: min(52vw, 206px) !important;
  }

  .album-hero-inner .album-kicker {
    margin-bottom: 12px !important;
    color: rgba(53, 18, 47, 0.58) !important;
    font-size: 0.62rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.15em !important;
  }

  .album-hero-inner h1 {
    max-width: 8.8ch !important;
    font-size: clamp(2.0rem, 7.9vw, 2.42rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.028em !important;
    word-spacing: 0.05em !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    max-width: 21ch !important;
    margin-top: 13px !important;
    font-size: 0.92rem !important;
    line-height: 1.48 !important;
  }

  .album-hero-actions {
    width: 194px !important;
    max-width: 100% !important;
    margin-top: 17px !important;
  }

  .album-hero-actions .secondary-btn,
  .album-hero-actions .secondary-btn.light,
  .album-hero-actions .primary-btn.blush {
    min-height: 52px !important;
    border-radius: 22px !important;
    font-size: 1rem !important;
  }

  .album-hero-photo {
    top: 44px !important;
    right: -22px !important;
    width: clamp(152px, 43vw, 184px) !important;
    height: 212px !important;
    border-radius: 106px 0 0 106px !important;
    box-shadow: -17px 23px 52px rgba(56, 22, 48, 0.13) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 18%, #000 43%, #000 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 18%, #000 43%, #000 100%) !important;
  }

  .album-content-shell {
    margin: -55px 10px 0 !important;
    padding: 31px 18px 24px !important;
    border-radius: 37px !important;
    background: var(--cdx-sheet) !important;
    box-shadow: var(--cdx-sheet-shadow) !important;
  }

  .album-release-card {
    border-color: rgba(210, 150, 140, 0.24) !important;
    border-radius: 25px !important;
  }

  .album-release-copy h2,
  .album-preview-copy h2,
  .album-section-heading h2 {
    font-size: clamp(1.72rem, 6.8vw, 2.16rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.028em !important;
  }
}

@media (max-width: 370px) {
  .album-hero-inner {
    left: 62px !important;
    width: min(55vw, 190px) !important;
    max-width: min(55vw, 190px) !important;
  }

  .album-hero-inner h1 {
    font-size: clamp(1.84rem, 7.8vw, 2.2rem) !important;
  }

  .album-hero-photo {
    right: -34px !important;
    width: clamp(150px, 45vw, 174px) !important;
  }
}

/* Admin: Claude-Design-Dichte beibehalten, aber weniger aufgeblasen. */
@media (min-width: 960px) {
  .admin-page {
    grid-template-columns: 248px minmax(0, 1fr) !important;
    background:
      radial-gradient(circle at 84% 4%, rgba(232, 145, 130, 0.13), transparent 29rem),
      linear-gradient(90deg, #271020 0 248px, #fff9f5 248px 100%) !important;
  }

  .admin-main {
    padding: 36px clamp(24px, 2.5vw, 36px) 42px !important;
  }

  .admin-topbar h1 {
    font-size: clamp(2.8rem, 4.7vw, 4.25rem) !important;
    line-height: 0.96 !important;
  }

  .admin-layout {
    grid-template-columns: minmax(250px, 318px) minmax(420px, 1fr) minmax(292px, 346px) !important;
    gap: 18px !important;
  }

  .photo-grid-admin {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }
}

/* Claude Design · 390px viewport anchoring
   Erzwingt auf echten Handys die volle Viewport-Schiene. Ältere
   Phone-Frame-Overrides durften noch 430px breit bleiben und haben
   dadurch rechts die Sticky-CTA abgeschnitten. */
@media (max-width: 560px) {
  .phone-stage,
  .wedding-hero,
  .sticky-upload-bar {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .phone-stage {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .upload-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .sticky-upload-inner {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    padding-right: 118px !important;
  }

  .sticky-upload-copy,
  .sticky-text,
  .sticky-upload-inner > div:not(.sticky-upload-icon):not(.sticky-icon) {
    min-width: 0 !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    justify-self: end !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 372px) {
  .sticky-upload-inner {
    padding-right: 106px !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    right: 13px !important;
  }
}

/* =====================================================================
   Claude Design Final Implementation · Sarah & Gregor · 2026-06-04
   Ziel: GPT-Image-/Erstscreenshot-Fidelity für mobile Upload-/Album-
   Screens plus Admin-Referenzlook. Dieser Block ist absichtlich am Ende
   platziert und übersteuert ältere Reconcile-Blöcke gezielt.
   ===================================================================== */
:root {
  --sgd-ivory: #fbf6f1;
  --sgd-ivory-warm: #f5ebe3;
  --sgd-rose: #f1d8d1;
  --sgd-rose-soft: #fff0ec;
  --sgd-coral: #eb8f7c;
  --sgd-coral-dark: #d87463;
  --sgd-aubergine: #35162f;
  --sgd-aubergine-2: #4b2640;
  --sgd-ink: #321f2d;
  --sgd-muted: #7d6574;
  --sgd-line: rgba(143, 92, 98, 0.18);
  --sgd-sheet: rgba(255, 255, 255, 0.94);
  --sgd-shadow: 0 28px 72px -34px rgba(53, 22, 47, 0.48);
  --sgd-soft-shadow: 0 18px 44px -28px rgba(53, 22, 47, 0.38);
  --sgd-serif: "Cormorant Garamond", "Playfair Display", Didot, "Bodoni 72", Georgia, serif;
  --sgd-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.guest-page,
.album-page {
  background:
    radial-gradient(circle at 5% 5%, rgba(235, 143, 124, 0.22) 0 3.9rem, transparent 4.2rem),
    radial-gradient(ellipse at 90% 0%, rgba(255, 255, 255, 0.92), transparent 17rem),
    linear-gradient(150deg, #fffaf6 0%, var(--sgd-rose-soft) 48%, #efd2c9 100%) !important;
  color: var(--sgd-ink) !important;
  font-family: var(--sgd-sans) !important;
  overflow-x: hidden !important;
}

.phone-stage,
.album-phone-stage {
  width: 100% !important;
  max-width: 430px !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  overflow-x: hidden !important;
}

.phone-statusbar,
.album-statusbar {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--sgd-aubergine) !important;
  font: 700 0.84rem/1 var(--sgd-sans) !important;
  letter-spacing: 0.01em !important;
  opacity: 0.86 !important;
}

.brand-title,
.upload-card h1,
.section-headline h2,
.album-hero-inner h1,
.album-release-copy h2,
.album-preview-copy h2,
.album-section-heading h2,
.admin-topbar h1,
.admin-brand-title {
  font-family: var(--sgd-serif) !important;
  color: var(--sgd-aubergine) !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
}

/* Upload: ruhiger, näher an der GPT-Image-Appfläche. */
@media (max-width: 700px) {
  .wedding-hero {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    min-height: 294px !important;
    padding: 22px 22px 86px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(142px, 42vw) !important;
    align-items: start !important;
    gap: 12px !important;
    background: transparent !important;
  }

  .wedding-hero-copy {
    min-width: 0 !important;
    padding-top: 6px !important;
    z-index: 2 !important;
  }

  .brand-title {
    font-size: clamp(2.95rem, 12.4vw, 4.05rem) !important;
    line-height: 0.82 !important;
    text-wrap: balance !important;
  }

  .brand-title .amp,
  .amp {
    color: var(--sgd-coral) !important;
    font-weight: 500 !important;
    font-style: italic !important;
  }

  .brand-sub {
    display: block !important;
    margin-top: 12px !important;
    font-family: var(--sgd-serif) !important;
    font-size: clamp(1.08rem, 4.8vw, 1.35rem) !important;
    font-style: italic !important;
    line-height: 1.1 !important;
    color: rgba(53, 22, 47, 0.72) !important;
  }

  .wedding-hero .upload-hero-copy {
    margin-top: 16px !important;
    max-width: 20ch !important;
    font-family: var(--sgd-sans) !important;
    font-size: 0.95rem !important;
    line-height: 1.58 !important;
    color: rgba(53, 22, 47, 0.68) !important;
    letter-spacing: 0 !important;
  }

  .hero-photo-scene {
    align-self: start !important;
    width: 100% !important;
    height: 224px !important;
    border-radius: 96px 0 0 96px !important;
    box-shadow: var(--sgd-soft-shadow) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.46) 15%, #000 42%, #000 100%) !important;
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.46) 15%, #000 42%, #000 100%) !important;
  }

  .hero-photo-scene img,
  .hero-photo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .upload-card {
    width: calc(100% - 20px) !important;
    max-width: 410px !important;
    margin: -58px auto 0 !important;
    padding: 30px 22px 132px !important;
    border-radius: 36px 36px 0 0 !important;
    background: var(--sgd-sheet) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow: var(--sgd-shadow) !important;
  }

  .upload-card h1 {
    font-size: clamp(2.12rem, 8.8vw, 2.78rem) !important;
    line-height: 0.96 !important;
    margin: 4px 0 20px !important;
    max-width: 10.8ch !important;
  }

  .section-headline {
    align-items: end !important;
    margin-top: 26px !important;
  }

  .section-headline h2 {
    font-size: clamp(1.75rem, 7.2vw, 2.25rem) !important;
    line-height: 1.02 !important;
  }

  .email-field,
  .album-email-row {
    min-height: 64px !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(221, 151, 142, 0.48) !important;
    border-radius: 19px !important;
    background: rgba(255, 251, 248, 0.94) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72) !important;
  }

  .email-field .input-box,
  .album-email-row .input-box,
  .email-field input,
  .album-email-row input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    font-size: 1rem !important;
    color: var(--sgd-ink) !important;
  }

  .selected-strip,
  .my-grid {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 6px 2px 8px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .selected-strip::-webkit-scrollbar,
  .my-grid::-webkit-scrollbar { display: none !important; }

  .selected-strip > .selected-photo,
  .selected-strip > .inspiration-tile,
  .selected-strip > .add-tile,
  .my-grid > .my-photo,
  .my-grid > .my-photo-empty,
  .my-grid > .more-count,
  .my-grid > .my-photo-total {
    flex: 0 0 112px !important;
    width: 112px !important;
    height: 112px !important;
    border-radius: 18px !important;
    scroll-snap-align: start !important;
  }

  .sticky-upload-bar {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 15px 18px calc(15px + env(safe-area-inset-bottom)) !important;
    border-radius: 30px 30px 0 0 !important;
    background: linear-gradient(135deg, #35162f 0%, #4a203f 100%) !important;
    box-shadow: 0 -18px 42px -24px rgba(53, 22, 47, 0.74) !important;
  }

  .sticky-upload-inner {
    max-width: 430px !important;
    margin: 0 auto !important;
    grid-template-columns: 40px minmax(0, 1fr) 116px !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    position: static !important;
    transform: none !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    min-height: 56px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #f0a091 0%, var(--sgd-coral) 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px -16px rgba(235, 143, 124, 0.9) !important;
  }
}

/* Album: eigene Phone-Bühne, nicht mehr generische Webseite. */
.album-phone-stage {
  padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 700px) {
  .album-page {
    min-height: 100dvh !important;
    padding: 0 !important;
  }

  .album-hero-scene {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 378px !important;
    height: auto !important;
    padding: 14px 22px 102px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(146px, 42vw) !important;
    grid-template-areas: "copy photo" !important;
    gap: 12px !important;
    align-items: start !important;
    overflow: hidden !important;
    border-radius: 0 0 46px 46px !important;
    background:
      radial-gradient(circle at 8% 8%, rgba(235, 143, 124, 0.24) 0 3.5rem, transparent 3.8rem),
      radial-gradient(ellipse at 92% 13%, rgba(255,255,255,0.95), transparent 10.5rem),
      linear-gradient(135deg, #fffbf8 0%, #fff1ec 55%, #eccfc4 100%) !important;
  }

  .album-hero-scene .floral-layer,
  .album-hero-glow {
    opacity: 0.42 !important;
    pointer-events: none !important;
  }

  .album-hero-inner {
    grid-area: copy !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 8px !important;
    z-index: 2 !important;
  }

  .album-hero-photo {
    grid-area: photo !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 232px !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 98px 0 0 98px !important;
    overflow: hidden !important;
    box-shadow: var(--sgd-soft-shadow) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.48) 16%, #000 43%, #000 100%) !important;
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.48) 16%, #000 43%, #000 100%) !important;
  }

  .album-hero-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .album-kicker {
    max-width: 20ch !important;
    margin: 2px 0 14px !important;
    color: rgba(53, 22, 47, 0.56) !important;
    font: 800 0.68rem/1.34 var(--sgd-sans) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
  }

  .album-monogram {
    width: 78px !important;
    height: 78px !important;
    margin: 0 0 18px 24px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 18px 44px -30px rgba(53, 22, 47, 0.34) !important;
    font: 650 1.55rem/0.82 var(--sgd-serif) !important;
    color: var(--sgd-aubergine) !important;
  }

  .album-monogram span {
    display: block !important;
    color: var(--sgd-coral) !important;
    font-size: 0.82em !important;
    font-style: italic !important;
  }

  .album-hero-inner h1 {
    max-width: 8.4ch !important;
    margin: 0 !important;
    font-size: clamp(2.18rem, 9.4vw, 2.78rem) !important;
    line-height: 0.91 !important;
    letter-spacing: -0.052em !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    max-width: 20.5ch !important;
    margin: 18px 0 0 !important;
    color: rgba(53, 22, 47, 0.66) !important;
    font: 500 0.98rem/1.55 var(--sgd-sans) !important;
  }

  .album-hero-actions {
    width: 198px !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    display: grid !important;
    gap: 10px !important;
  }

  .album-hero-actions .secondary-btn,
  .album-hero-actions .secondary-btn.light,
  .album-hero-actions .primary-btn.blush {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: var(--sgd-aubergine) !important;
    box-shadow: 0 14px 28px -22px rgba(53,22,47,0.42) !important;
    font: 800 0.92rem/1.05 var(--sgd-sans) !important;
  }

  .album-content-shell {
    position: relative !important;
    width: calc(100% - 20px) !important;
    max-width: 410px !important;
    margin: -76px auto 0 !important;
    padding: 30px 20px 28px !important;
    border-radius: 36px 36px 30px 30px !important;
    background: var(--sgd-sheet) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow: var(--sgd-shadow) !important;
    z-index: 4 !important;
  }

  .album-card-handle,
  .album-content-shell > .card-handle {
    display: block !important;
    width: 42px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(53, 22, 47, 0.12) !important;
    margin: -2px auto 22px !important;
  }

  .album-release-card {
    display: grid !important;
    gap: 18px !important;
    padding: 20px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(221, 151, 142, 0.28) !important;
    background: linear-gradient(180deg, rgba(255,250,247,0.96) 0%, rgba(255,255,255,0.92) 100%) !important;
    box-shadow: 0 18px 42px -32px rgba(53, 22, 47, 0.38) !important;
  }

  .album-release-copy {
    text-align: left !important;
  }

  .release-pill {
    display: inline-flex !important;
    width: fit-content !important;
    margin-bottom: 13px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 12px !important;
    background: rgba(235, 143, 124, 0.14) !important;
    color: var(--sgd-aubergine) !important;
    font: 800 0.68rem/1 var(--sgd-sans) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
  }

  .album-release-copy h2,
  .album-preview-copy h2,
  .album-section-heading h2 {
    margin: 0 0 10px !important;
    font-size: clamp(1.92rem, 8vw, 2.34rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
  }

  .album-release-copy p,
  .album-preview-copy p,
  .album-section-heading p {
    color: rgba(53, 22, 47, 0.64) !important;
    font: 500 0.94rem/1.55 var(--sgd-sans) !important;
  }

  .album-gate-form {
    margin: 0 !important;
    display: grid !important;
    gap: 10px !important;
  }

  .album-email-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: stretch !important;
  }

  .album-email-row .primary-btn,
  .album-gate-form .primary-btn {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f0a091 0%, var(--sgd-coral) 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 26px -18px rgba(235,143,124,.9) !important;
  }

  .album-stat-grid {
    margin: 18px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .album-stat-grid > div {
    min-height: 84px !important;
    padding: 12px 7px !important;
    border: 1px solid rgba(221,151,142,0.24) !important;
    border-radius: 20px !important;
    background: rgba(255, 240, 236, 0.66) !important;
    display: grid !important;
    align-content: center !important;
    text-align: center !important;
  }

  .album-stat-grid strong {
    font: 700 1.85rem/1 var(--sgd-serif) !important;
    color: var(--sgd-aubergine) !important;
  }

  .album-stat-grid span {
    margin-top: 5px !important;
    color: rgba(53,22,47,0.58) !important;
    font-size: 0.68rem !important;
    line-height: 1.18 !important;
  }

  .album-preview-panel {
    margin-top: 20px !important;
    padding: 20px !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, #fff9f6 0%, #f6e3dd 100%) !important;
    border: 1px solid rgba(221,151,142,0.26) !important;
    overflow: hidden !important;
  }

  .album-preview-stack {
    min-height: 156px !important;
    margin-top: 16px !important;
  }

  .album-legal-links {
    margin-top: 20px !important;
    justify-content: center !important;
  }
}

/* Öffentliches Album: Editorial/Masonry statt generisches Raster. */
.album-page--published .album-gallery-section {
  margin-top: 24px !important;
}

.album-page--published .album-gallery {
  display: block !important;
  columns: 2 148px !important;
  column-gap: 12px !important;
}

.album-page--published .album-photo,
.album-page--published .album-photo--feature,
.album-page--published .album-photo--wide,
.album-page--published .album-photo--tall {
  display: block !important;
  position: relative !important;
  break-inside: avoid !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 0 12px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #f4e9e3 !important;
  box-shadow: 0 18px 38px -28px rgba(53, 22, 47, 0.46) !important;
}

.album-page--published .album-photo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

.album-page--published .album-photo figcaption {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  padding: 10px 11px !important;
  border-radius: 14px !important;
  background: rgba(35, 18, 32, 0.58) !important;
  color: #fff !important;
  backdrop-filter: blur(10px) !important;
  opacity: 1 !important;
  transform: none !important;
}

.album-page--published .album-closing {
  margin-top: 24px !important;
  padding: 24px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,0.76) !important;
  border: 1px solid rgba(221,151,142,0.24) !important;
  text-align: center !important;
}

/* Album-Desktop: kuratiert breit, private Ansicht bleibt fokussiert. */
@media (min-width: 701px) {
  .album-page {
    min-height: 100dvh !important;
    padding: 0 !important;
  }

  .album-phone-stage {
    max-width: min(1180px, calc(100vw - 48px)) !important;
    padding: 0 0 64px !important;
  }

  .album-page--private .album-phone-stage {
    max-width: 720px !important;
  }

  .album-statusbar {
    display: none !important;
  }

  .album-hero-scene {
    position: relative !important;
    inset: auto !important;
    min-height: 430px !important;
    padding: 64px clamp(42px, 7vw, 84px) 116px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.78fr) !important;
    align-items: center !important;
    gap: clamp(28px, 6vw, 72px) !important;
    border-radius: 0 0 54px 54px !important;
    background: linear-gradient(132deg, #fffbf8 0%, #fff1ec 55%, #eccfc4 100%) !important;
    overflow: hidden !important;
  }

  .album-hero-inner,
  .album-hero-photo {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .album-hero-photo {
    order: 2 !important;
    height: 340px !important;
    border-radius: 170px 0 0 170px !important;
    overflow: hidden !important;
    box-shadow: var(--sgd-shadow) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 15%, #000 42%, #000 100%) !important;
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 15%, #000 42%, #000 100%) !important;
  }

  .album-hero-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .album-hero-inner h1 {
    max-width: 9ch !important;
    font-size: clamp(4.2rem, 7vw, 6.5rem) !important;
    line-height: 0.9 !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    max-width: 34ch !important;
    font-size: 1.13rem !important;
    line-height: 1.65 !important;
    color: rgba(53,22,47,0.64) !important;
  }

  .album-content-shell {
    position: relative !important;
    max-width: 1040px !important;
    margin: -76px auto 0 !important;
    padding: 36px clamp(32px, 5vw, 56px) 48px !important;
    border-radius: 40px !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(255,255,255,0.78) !important;
    box-shadow: var(--sgd-shadow) !important;
    z-index: 3 !important;
  }

  .album-page--private .album-content-shell {
    max-width: 640px !important;
  }

  .album-release-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.82fr) !important;
    gap: 28px !important;
    align-items: center !important;
    padding: 28px !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, #fffaf7, #fff) !important;
    border: 1px solid rgba(221,151,142,0.28) !important;
  }

  .album-page--private .album-release-card {
    grid-template-columns: 1fr !important;
  }

  .album-email-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    padding: 8px !important;
  }

  .album-page--published .album-gallery {
    columns: 3 240px !important;
    column-gap: 18px !important;
  }
}

/* Admin: Referenz-Dashboard ohne Strukturbruch. */
@media (min-width: 960px) {
  .admin-page {
    grid-template-columns: 248px minmax(0, 1fr) !important;
    background:
      radial-gradient(circle at 86% 4%, rgba(235,143,124,0.14), transparent 31rem),
      linear-gradient(90deg, #271020 0 248px, #fffaf7 248px 100%) !important;
    color: var(--sgd-ink) !important;
  }

  .admin-sidebar {
    width: auto !important;
    background: linear-gradient(180deg, #2d1128 0%, #211020 100%) !important;
    color: rgba(255, 245, 247, 0.84) !important;
    padding: 32px 20px 24px !important;
  }

  .admin-brand-title {
    font-size: 2.05rem !important;
    line-height: 0.9 !important;
    color: #fff7f5 !important;
    letter-spacing: -0.03em !important;
  }

  .admin-brand-subtitle {
    color: rgba(255,245,247,0.58) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 0.66rem !important;
  }

  .sidebar-nav button {
    min-height: 48px !important;
    border-radius: 12px !important;
    color: rgba(255,245,247,0.76) !important;
    font-weight: 650 !important;
  }

  .sidebar-nav button.active,
  .sidebar-nav button:hover {
    background: rgba(255, 255, 255, 0.13) !important;
    color: #fff !important;
  }

  .admin-main {
    padding: 40px clamp(24px, 2.6vw, 40px) 48px !important;
    background: transparent !important;
  }

  .admin-topbar h1 {
    font-size: clamp(3.15rem, 5vw, 4.75rem) !important;
    line-height: 0.9 !important;
  }

  .admin-upload-toolbar {
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(143,92,98,0.12) !important;
    box-shadow: 0 18px 42px -34px rgba(53,22,47,0.36) !important;
  }

  .admin-layout {
    grid-template-columns: minmax(258px, 326px) minmax(430px, 1fr) minmax(304px, 354px) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .admin-panel {
    border: 1px solid rgba(143, 92, 98, 0.12) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.86) !important;
    box-shadow: 0 22px 52px -40px rgba(53,22,47,0.38) !important;
  }

  .admin-group-panel.pad,
  .admin-grid-panel,
  .inspector {
    padding: 18px !important;
  }

  .group-card {
    border-radius: 17px !important;
    min-height: 76px !important;
  }

  .photo-grid-admin {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }

  .admin-thumb {
    border-radius: 16px !important;
    box-shadow: 0 14px 30px -22px rgba(53,22,47,0.48) !important;
  }

  .inspector {
    position: sticky !important;
    top: 26px !important;
    max-height: calc(100dvh - 52px) !important;
    overflow: auto !important;
  }

  .inspector-hero {
    border-radius: 20px !important;
  }
}

@media (max-width: 380px) {
  .brand-title { font-size: 2.72rem !important; }
  .wedding-hero,
  .album-hero-scene { grid-template-columns: minmax(0, 1fr) 136px !important; padding-left: 18px !important; padding-right: 18px !important; }
  .hero-photo-scene,
  .album-hero-photo { height: 210px !important; }
  .upload-card,
  .album-content-shell { width: calc(100% - 14px) !important; }
  .album-hero-inner h1 { font-size: 2.02rem !important; }
  .sticky-upload-inner { grid-template-columns: 38px minmax(0, 1fr) 104px !important; }
  .sticky-upload-bar .primary-btn,
  .sticky-cta { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
}

/* Claude Design Final · Mobile viewport correction v2
   Nach der ersten Umsetzung war der Hero bei 390px zu hoch und die
   Sticky-CTA konnte rechts auslaufen. Diese Korrektur zieht Upload und
   Album wieder näher an die ursprünglichen Mobile-Screenshots. */
@media (max-width: 700px) {
  .wedding-hero {
    display: block !important;
    position: relative !important;
    min-height: 348px !important;
    height: 348px !important;
    padding: 18px 22px 0 !important;
    box-sizing: border-box !important;
  }

  .wedding-hero-copy {
    width: min(52vw, 205px) !important;
    max-width: 205px !important;
  }

  .brand-title {
    font-size: clamp(2.58rem, 10.7vw, 3.22rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.045em !important;
  }

  .brand-sub {
    margin-top: 8px !important;
    font-size: clamp(1.0rem, 4.2vw, 1.22rem) !important;
  }

  .wedding-hero .upload-hero-copy {
    max-width: 21ch !important;
    margin-top: 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.52 !important;
  }

  .hero-photo-scene {
    position: absolute !important;
    top: 42px !important;
    right: -8px !important;
    width: clamp(154px, 45vw, 186px) !important;
    height: 224px !important;
  }

  .upload-card {
    margin-top: -64px !important;
    padding-top: 28px !important;
  }

  .sticky-upload-inner {
    width: 100% !important;
    max-width: calc(100vw - 36px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: 40px minmax(0, 1fr) 116px !important;
    padding-right: 0 !important;
  }

  .sticky-upload-copy,
  .sticky-text {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    justify-self: end !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .album-hero-scene {
    display: block !important;
    position: relative !important;
    min-height: 416px !important;
    height: 416px !important;
    padding: 18px 22px 0 !important;
    box-sizing: border-box !important;
  }

  .album-hero-inner {
    width: min(54vw, 212px) !important;
    max-width: 212px !important;
  }

  .album-hero-photo {
    position: absolute !important;
    top: 44px !important;
    right: -10px !important;
    width: clamp(156px, 45vw, 188px) !important;
    height: 232px !important;
  }

  .album-kicker {
    max-width: 21ch !important;
    margin-bottom: 12px !important;
    font-size: 0.62rem !important;
    line-height: 1.34 !important;
  }

  .album-hero-inner .album-monogram {
    display: none !important;
  }

  .album-hero-inner h1 {
    max-width: 10.7ch !important;
    font-size: clamp(2.12rem, 8.7vw, 2.58rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.05em !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    max-width: 21.5ch !important;
    margin-top: 16px !important;
    font-size: 0.92rem !important;
    line-height: 1.48 !important;
  }

  .album-hero-actions {
    width: 200px !important;
    margin-top: 18px !important;
  }

  .album-content-shell {
    margin-top: -70px !important;
  }
}

@media (max-width: 380px) {
  .wedding-hero { height: 338px !important; min-height: 338px !important; }
  .album-hero-scene { height: 404px !important; min-height: 404px !important; }
  .hero-photo-scene,
  .album-hero-photo { right: -18px !important; width: 154px !important; }
  .brand-title { font-size: 2.42rem !important; }
  .album-hero-inner h1 { font-size: 2.0rem !important; }
}

/* Screenshot-/Small-Viewport-Sicherheitsnetz: Die Phone-Stage bleibt bei
   390–430px links bündig innerhalb der echten Viewportbreite, damit weder
   Sheet noch Sticky-CTA auf schmalen Handy-Screens seitlich abschneiden. */
@media (max-width: 500px) {
  .phone-stage,
  .album-phone-stage,
  .wedding-hero,
  .album-hero-scene {
    width: min(430px, 100vw) !important;
    max-width: min(430px, 100vw) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Sticky-Bar finalisieren: Flex statt geerbter Grid-/Absolute-Regeln,
   damit der CTA auf 390/430px zuverlässig vollständig sichtbar bleibt. */
@media (max-width: 700px) {
  .sticky-upload-inner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: min(394px, calc(100vw - 36px)) !important;
    min-width: 0 !important;
  }

  .sticky-upload-icon,
  .sticky-icon {
    flex: 0 0 40px !important;
  }

  .sticky-upload-copy,
  .sticky-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    flex: 0 0 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    margin-left: auto !important;
  }
}

/* =====================================================================
   Claude Design · Direct App Implementation v6 (2026-06-04)
   Ziel: GPT-Image/iPhone-Referenzlook direkt in der App erzwingen.
   Dieser Endblock überstimmt bewusst frühere Layout-Experimente.
   ===================================================================== */
:root {
  --sgf-ivory: #fff8f3;
  --sgf-ivory-2: #f8eee8;
  --sgf-blush: #f5ded9;
  --sgf-blush-2: #ffece8;
  --sgf-aubergine: #3a1831;
  --sgf-aubergine-2: #281024;
  --sgf-coral: #ef927f;
  --sgf-coral-2: #df7462;
  --sgf-muted: #806676;
  --sgf-line: rgba(122, 72, 82, 0.18);
  --sgf-sheet: rgba(255, 255, 255, 0.96);
  --sgf-shadow: 0 30px 70px -34px rgba(58, 24, 49, 0.48);
  --sgf-soft-shadow: 0 18px 42px -28px rgba(58, 24, 49, 0.42);
  --sgf-serif: "Didot", "Bodoni 72", "Bodoni MT", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sgf-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  --sgf-safe-b: env(safe-area-inset-bottom, 0px);
}

.guest-page,
.album-page {
  min-height: 100dvh !important;
  background:
    radial-gradient(16rem 16rem at -3rem 4rem, rgba(239, 146, 127, 0.20), transparent 62%),
    radial-gradient(22rem 18rem at 94% 0%, rgba(248, 224, 218, 0.84), transparent 68%),
    linear-gradient(180deg, var(--sgf-ivory) 0%, var(--sgf-ivory-2) 100%) !important;
  color: var(--sgf-aubergine) !important;
  font-family: var(--sgf-sans) !important;
  -webkit-font-smoothing: antialiased !important;
}

.phone-stage,
.album-phone-stage {
  width: min(430px, 100vw) !important;
  max-width: min(430px, 100vw) !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow-x: clip !important;
  position: relative !important;
  background: transparent !important;
}

.phone-statusbar {
  height: 42px !important;
  padding: 0 22px !important;
  color: var(--sgf-aubergine) !important;
  font: 700 0.86rem/1 var(--sgf-sans) !important;
  opacity: 0.9 !important;
}

.brand-title,
.upload-card > h1#upload-title,
.album-hero-inner h1,
.album-release-copy h2,
.album-preview-copy h2,
.album-section-heading h2 {
  font-family: var(--sgf-serif) !important;
  color: var(--sgf-aubergine) !important;
  font-weight: 650 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

/* ---------- Mobile-first Upload: GPT-Image-artiger Hero + Sheet ---------- */
@media (max-width: 700px) {
  .wedding-hero {
    position: relative !important;
    display: block !important;
    height: 386px !important;
    min-height: 386px !important;
    padding: 24px 22px 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(7.5rem 7.5rem at -1.6rem 0.4rem, rgba(239, 146, 127, 0.22), transparent 64%),
      radial-gradient(12rem 10rem at 88% 18%, rgba(255, 255, 255, 0.72), transparent 68%) !important;
  }

  .wedding-hero-copy {
    position: relative !important;
    z-index: 3 !important;
    width: min(54vw, 214px) !important;
    max-width: 214px !important;
    padding: 0 !important;
  }

  .brand-title {
    margin: 0 !important;
    font-size: clamp(3.05rem, 12.3vw, 3.72rem) !important;
    line-height: 0.84 !important;
    letter-spacing: -0.062em !important;
  }

  .brand-title .amp,
  .amp {
    display: inline !important;
    color: var(--sgf-coral) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0.04em !important;
  }

  .brand-sub {
    display: block !important;
    margin: 11px 0 0 !important;
    color: rgba(58, 24, 49, 0.66) !important;
    font-family: var(--sgf-serif) !important;
    font-style: italic !important;
    font-size: clamp(1.05rem, 4.45vw, 1.36rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
  }

  .wedding-hero .upload-hero-copy {
    max-width: 21ch !important;
    margin: 14px 0 0 !important;
    color: rgba(58, 24, 49, 0.62) !important;
    font: 500 0.96rem/1.55 var(--sgf-sans) !important;
  }

  .wedding-hero .hero-photo-scene {
    position: absolute !important;
    z-index: 2 !important;
    top: 42px !important;
    right: -24px !important;
    width: clamp(184px, 52vw, 224px) !important;
    height: 252px !important;
    margin: 0 !important;
    border-radius: 999px 0 0 999px !important;
    background: var(--sgf-blush) !important;
    box-shadow: none !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.54) 16%, #000 42%, #000 100%) !important;
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.54) 16%, #000 42%, #000 100%) !important;
  }

  .wedding-hero .hero-photo-scene > img,
  .hero-photo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .wedding-hero .hero-photo-scene::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(255,248,243,0) 54%, rgba(255,248,243,0.45) 100%) !important;
    pointer-events: none !important;
  }

  .upload-card {
    position: relative !important;
    z-index: 5 !important;
    width: calc(100vw - 20px) !important;
    max-width: 410px !important;
    margin: -72px auto 0 !important;
    padding: 29px 22px calc(128px + var(--sgf-safe-b)) !important;
    border-radius: 34px 34px 0 0 !important;
    border: 1px solid rgba(255,255,255,0.74) !important;
    background: var(--sgf-sheet) !important;
    box-shadow: var(--sgf-shadow) !important;
  }

  .upload-card > .card-handle,
  .album-content-shell > .card-handle {
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    margin: -3px auto 22px !important;
    border-radius: 999px !important;
    background: rgba(58, 24, 49, 0.15) !important;
  }

  .upload-card > h1#upload-title {
    margin: 0 0 21px !important;
    font-size: clamp(2.2rem, 9.5vw, 2.76rem) !important;
    line-height: 0.98 !important;
  }

  .field-label {
    margin-bottom: 9px !important;
    color: rgba(58,24,49,0.76) !important;
    font: 800 0.78rem/1.25 var(--sgf-sans) !important;
    letter-spacing: 0.01em !important;
  }

  .email-field {
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(218, 145, 137, 0.48) !important;
    border-radius: 19px !important;
    background: rgba(255, 250, 247, 0.92) !important;
    box-shadow: 0 12px 28px -24px rgba(58,24,49,0.34) !important;
  }

  .email-field .input-box,
  .email-field input {
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--sgf-aubergine) !important;
    font: 500 1.02rem/1.2 var(--sgf-sans) !important;
    box-shadow: none !important;
  }

  .email-field .mail-icon,
  .email-field .ok-icon {
    display: inline-grid !important;
    place-items: center !important;
    color: var(--sgf-coral) !important;
  }

  .section-headline {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 34px 0 14px !important;
  }

  .section-headline h2 {
    margin: 0 !important;
    color: var(--sgf-aubergine) !important;
    font-family: var(--sgf-serif) !important;
    font-size: clamp(2.0rem, 8.7vw, 2.5rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.058em !important;
  }

  .photo-choice-buttons {
    flex: 0 0 auto !important;
    display: grid !important;
    gap: 8px !important;
    justify-items: end !important;
  }

  .photo-choice-buttons .text-btn {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(58,24,49,0.62) !important;
    font: 800 0.78rem/1.1 var(--sgf-sans) !important;
    white-space: nowrap !important;
  }

  .selected-strip,
  .my-grid {
    display: flex !important;
    gap: 13px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    margin: 0 -22px !important;
    padding: 4px 22px 14px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .selected-strip::-webkit-scrollbar,
  .my-grid::-webkit-scrollbar { display: none !important; }

  .inspiration-tile,
  .selected-photo,
  .my-photo,
  .my-photo-empty,
  .add-tile,
  .more-count {
    flex: 0 0 118px !important;
    width: 118px !important;
    height: 118px !important;
    border-radius: 17px !important;
    scroll-snap-align: start !important;
    box-shadow: 0 17px 34px -27px rgba(58,24,49,0.62) !important;
    overflow: hidden !important;
  }

  .inspiration-tile {
    position: relative !important;
    display: grid !important;
    align-content: end !important;
    justify-items: start !important;
    padding: 14px !important;
    color: #fff !important;
    border: 0 !important;
    text-align: left !important;
  }
  .inspiration-tile::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(58,24,49,0.08), rgba(58,24,49,0.58)) !important;
    z-index: 0 !important;
  }
  .inspiration-tile > * { position: relative !important; z-index: 1 !important; }
  .inspiration-tile strong { font-family: var(--sgf-serif) !important; font-size: 1.28rem !important; line-height: 0.95 !important; }
  .inspiration-tile small { font: 800 0.72rem/1.12 var(--sgf-sans) !important; }

  .add-tile,
  .more-count,
  .my-photo-empty {
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(218, 145, 137, 0.38) !important;
    background: rgba(255,248,243,0.92) !important;
    color: var(--sgf-aubergine) !important;
    text-align: center !important;
  }

  .upload-consent-line,
  .privacy-note {
    border-radius: 18px !important;
    border: 1px solid rgba(218, 145, 137, 0.28) !important;
    background: rgba(255, 248, 243, 0.78) !important;
  }

  .sticky-upload-bar {
    position: fixed !important;
    z-index: 70 !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: min(430px, 100vw) !important;
    max-width: min(430px, 100vw) !important;
    padding: 12px 16px calc(13px + var(--sgf-safe-b)) !important;
    border-radius: 28px 28px 0 0 !important;
    background: linear-gradient(135deg, var(--sgf-aubergine) 0%, var(--sgf-aubergine-2) 100%) !important;
    box-shadow: 0 -18px 44px -24px rgba(40,16,36,0.74) !important;
  }

  .sticky-upload-inner {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 124px !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    max-width: none !important;
    color: #fff9f6 !important;
  }
  .sticky-upload-icon,
  .sticky-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: rgba(239,146,127,0.19) !important;
    color: var(--sgf-coral) !important;
  }
  .sticky-upload-title { margin: 0 !important; color: #fff9f6 !important; font-family: var(--sgf-serif) !important; font-size: 1.0rem !important; line-height: 1.02 !important; }
  .sticky-upload-subtitle { margin: 3px 0 0 !important; color: rgba(255,249,246,0.72) !important; font-size: 0.72rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .sticky-upload-bar .primary-btn,
  .sticky-cta {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f4a091 0%, var(--sgf-coral) 100%) !important;
    color: #fff !important;
    font: 750 0.9rem/1.1 var(--sgf-serif) !important;
    box-shadow: 0 13px 26px -18px rgba(239,146,127,0.96) !important;
  }
}

/* ---------- Album: CTA in Sheet, ruhiger hochwertiger Freigabe-Screen ---------- */
@media (max-width: 700px) {
  .album-hero-scene {
    position: relative !important;
    display: block !important;
    height: 392px !important;
    min-height: 392px !important;
    padding: 24px 22px 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(8.5rem 8.5rem at -1.8rem 0.5rem, rgba(239, 146, 127, 0.20), transparent 64%),
      radial-gradient(14rem 10rem at 88% 16%, rgba(255, 255, 255, 0.82), transparent 70%) !important;
  }

  .album-hero-inner {
    position: relative !important;
    z-index: 3 !important;
    width: min(56vw, 218px) !important;
    max-width: 218px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .album-kicker {
    max-width: 22ch !important;
    margin: 4px 0 12px !important;
    color: rgba(58,24,49,0.58) !important;
    font: 900 0.63rem/1.34 var(--sgf-sans) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
  }

  .album-hero-inner .album-monogram {
    display: none !important;
  }

  .album-hero-inner h1 {
    max-width: 10ch !important;
    margin: 0 !important;
    font-size: clamp(2.38rem, 9.9vw, 2.92rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.066em !important;
  }

  .album-hero-inner > p:not(.album-kicker) {
    max-width: 22ch !important;
    margin: 17px 0 0 !important;
    color: rgba(58,24,49,0.64) !important;
    font: 560 0.96rem/1.55 var(--sgf-sans) !important;
  }

  .album-hero-photo {
    position: absolute !important;
    z-index: 2 !important;
    top: 48px !important;
    right: -26px !important;
    width: clamp(184px, 52vw, 226px) !important;
    height: 252px !important;
    margin: 0 !important;
    border-radius: 999px 0 0 999px !important;
    background: var(--sgf-blush) !important;
    box-shadow: none !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.54) 16%, #000 42%, #000 100%) !important;
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.54) 16%, #000 42%, #000 100%) !important;
  }
  .album-hero-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; }

  .album-content-shell {
    position: relative !important;
    z-index: 5 !important;
    width: calc(100vw - 20px) !important;
    max-width: 410px !important;
    margin: -72px auto 0 !important;
    padding: 29px 22px 32px !important;
    border-radius: 34px 34px 0 0 !important;
    border: 1px solid rgba(255,255,255,0.74) !important;
    background: var(--sgf-sheet) !important;
    box-shadow: var(--sgf-shadow) !important;
  }

  .album-release-card {
    display: grid !important;
    gap: 18px !important;
    padding: 22px 20px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(218,145,137,0.28) !important;
    background: linear-gradient(180deg, rgba(255, 251, 248, 0.98) 0%, rgba(255,255,255,0.94) 100%) !important;
    box-shadow: 0 18px 44px -32px rgba(58,24,49,0.42) !important;
    text-align: left !important;
  }

  .release-pill {
    display: inline-flex !important;
    width: fit-content !important;
    margin-bottom: 13px !important;
    padding: 7px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(239,146,127,0.14) !important;
    color: var(--sgf-aubergine) !important;
    font: 900 0.67rem/1 var(--sgf-sans) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.13em !important;
  }

  .album-release-copy h2 {
    margin: 0 0 10px !important;
    font-size: clamp(2.0rem, 8.5vw, 2.5rem) !important;
    line-height: 0.96 !important;
  }

  .album-release-copy p,
  .album-gate-form .small-muted {
    color: rgba(58,24,49,0.62) !important;
    font: 540 0.94rem/1.56 var(--sgf-sans) !important;
  }

  .album-gate-form {
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .album-email-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .album-email-row .input-box,
  .album-email-row input {
    min-height: 62px !important;
    border: 1px solid rgba(218,145,137,0.46) !important;
    border-radius: 18px !important;
    background: rgba(255,250,247,0.92) !important;
    padding: 0 16px !important;
    box-shadow: none !important;
  }

  .album-hero-actions,
  .album-release-actions {
    position: static !important;
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .album-hero-scene .album-hero-actions { display: none !important; }
  .album-hero-actions .primary-btn,
  .album-hero-actions .secondary-btn,
  .album-release-actions .primary-btn,
  .album-release-actions .secondary-btn {
    min-height: 52px !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f4a091 0%, var(--sgf-coral) 100%) !important;
    color: #fff !important;
    font: 800 0.95rem/1.1 var(--sgf-sans) !important;
    box-shadow: 0 13px 26px -18px rgba(239,146,127,0.96) !important;
  }

  .album-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin: 18px 0 0 !important;
  }
  .album-stat-grid > div {
    min-height: 76px !important;
    border: 1px solid rgba(218,145,137,0.24) !important;
    border-radius: 19px !important;
    background: rgba(255, 240, 236, 0.62) !important;
    display: grid !important;
    align-content: center !important;
    padding: 10px 6px !important;
  }
  .album-stat-grid strong { font: 700 1.68rem/1 var(--sgf-serif) !important; color: var(--sgf-aubergine) !important; }
  .album-stat-grid span { margin-top: 5px !important; color: rgba(58,24,49,0.58) !important; font-size: 0.64rem !important; line-height: 1.15 !important; }
}

/* ---------- Published album keeps editorial masonry ---------- */
.album-page--published .album-gallery {
  columns: 2 150px !important;
  column-gap: 12px !important;
  display: block !important;
}
.album-page--published .album-photo {
  display: block !important;
  break-inside: avoid !important;
  margin: 0 0 12px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 38px -28px rgba(58,24,49,0.46) !important;
  background: var(--sgf-ivory-2) !important;
}
.album-page--published .album-photo img { width: 100% !important; height: auto !important; display: block !important; object-fit: cover !important; }

/* ---------- Admin: mobile overlay fix + desktop reference workspace ---------- */
@media (max-width: 959px) {
  .admin-page {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    width: 100% !important;
    overflow-x: clip !important;
    background: var(--sgf-ivory) !important;
  }

  .admin-sidebar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 16px 14px 18px !important;
    border-radius: 0 0 28px 28px !important;
    background: linear-gradient(135deg, var(--sgf-aubergine) 0%, var(--sgf-aubergine-2) 100%) !important;
    box-shadow: 0 18px 44px -30px rgba(40,16,36,0.72) !important;
    color: #fff8f4 !important;
    overflow: hidden !important;
    z-index: 10 !important;
  }

  .admin-brand {
    min-width: 138px !important;
    display: flex !important;
    gap: 9px !important;
    align-items: center !important;
  }
  .admin-brand-title {
    margin: 0 !important;
    color: #fff8f4 !important;
    font-family: var(--sgf-serif) !important;
    font-size: 1.18rem !important;
    line-height: 0.94 !important;
    letter-spacing: -0.04em !important;
  }
  .admin-brand-subtitle,
  .admin-couple { display: none !important; }

  .sidebar-nav {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 2px 0 3px !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  .sidebar-nav::-webkit-scrollbar { display: none !important; }
  .sidebar-nav button {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    width: auto !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,248,244,0.82) !important;
    font: 800 0.82rem/1 var(--sgf-sans) !important;
  }
  .sidebar-nav button.active { background: rgba(255,255,255,0.24) !important; color: #fff !important; }

  .admin-main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 22px 14px 34px !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .admin-topbar,
  .admin-actions,
  .admin-upload-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .admin-topbar h1 { font-size: clamp(2.3rem, 12vw, 3.2rem) !important; line-height: 0.9 !important; }
  .admin-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .admin-panel,
  .admin-group-panel,
  .admin-grid-panel,
  .inspector {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  .photo-grid-admin { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 9px !important; }
  .inspector { position: static !important; top: auto !important; max-height: none !important; overflow: visible !important; }
}

@media (min-width: 960px) {
  .admin-page {
    display: grid !important;
    grid-template-columns: 248px minmax(0, 1fr) !important;
    background:
      radial-gradient(circle at 86% 4%, rgba(239,146,127,0.13), transparent 32rem),
      linear-gradient(90deg, var(--sgf-aubergine-2) 0 248px, #fffaf7 248px 100%) !important;
  }
  .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100dvh !important;
    background: linear-gradient(180deg, var(--sgf-aubergine) 0%, var(--sgf-aubergine-2) 100%) !important;
  }
  .admin-main { min-width: 0 !important; }
  .admin-layout { grid-template-columns: minmax(260px, 326px) minmax(430px, 1fr) minmax(300px, 354px) !important; gap: 18px !important; }
}

/* Claude Design v6 · overflow/tap-target QA correction */
@media (max-width: 700px) {
  .upload-card,
  .album-content-shell {
    box-sizing: border-box !important;
    width: calc(100% - 20px) !important;
  }

  .upload-card > h1#upload-title {
    font-size: clamp(2.04rem, 8.45vw, 2.42rem) !important;
    line-height: 1.0 !important;
  }

  .section-headline h2 {
    font-size: clamp(1.78rem, 7.35vw, 2.12rem) !important;
    line-height: 1.02 !important;
  }

  .email-field,
  .album-email-row .input-box,
  .album-email-row input {
    box-sizing: border-box !important;
  }
}

/* ============================================================
   2026-06-05 · Produktivlayout: echte responsive Web-App
   Entfernt die Demo-/Phone-Frame-Anmutung auf Desktop und Tablet.
   ============================================================ */
:root {
  --sg-responsive-container: 1180px;
  --sg-responsive-gap: clamp(18px, 3vw, 44px);
}

/* Schlanker echter App-Header statt Demo-Funktionsauswahl */
.public-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 70 !important;
  padding: calc(10px + env(safe-area-inset-top)) clamp(12px, 3vw, 28px) 10px !important;
  border-bottom: 1px solid rgba(88, 46, 76, 0.10) !important;
  background: rgba(255, 250, 247, 0.88) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

.public-nav-inner {
  max-width: var(--sg-responsive-container) !important;
  min-height: 42px !important;
  gap: 14px !important;
}

.public-logo {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.public-logo span:last-child {
  display: inline !important;
  white-space: nowrap !important;
}

.public-logo-mark {
  width: 38px !important;
  height: 38px !important;
  color: #fff8f4 !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #32142e, #6e405e) !important;
  box-shadow: 0 10px 24px rgba(48, 18, 42, 0.18) !important;
}

.public-tabs {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.public-tab {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid rgba(88, 46, 76, 0.16) !important;
  border-radius: 999px !important;
  padding: 0 15px !important;
  color: rgba(50, 20, 46, 0.82) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: none !important;
  font: 800 0.88rem/1 var(--sans) !important;
  letter-spacing: -0.015em !important;
  white-space: nowrap !important;
}

.public-tab-primary,
.public-tab.active.public-tab-primary {
  color: #fff8f4 !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #32142e, #5e3153) !important;
  box-shadow: 0 12px 26px rgba(49, 18, 42, 0.18) !important;
}

.public-tab.active:not(.public-tab-primary) {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

.public-tab-link {
  border-color: transparent !important;
  background: transparent !important;
  padding-inline: 8px !important;
  color: rgba(50, 20, 46, 0.66) !important;
}

/* Phone-Frame-Reste neutralisieren: Seite ist App, nicht Präsentationsmockup. */
.phone-statusbar,
.guest-shell .phone-statusbar {
  display: none !important;
}

.guest-page {
  width: 100% !important;
  max-width: var(--sg-responsive-container) !important;
  min-height: calc(100dvh - 64px) !important;
  margin: 0 auto !important;
  padding: clamp(18px, 3.8vw, 48px) clamp(14px, 3vw, 28px) calc(116px + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
}

.phone-stage,
.guest-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

.phone-stage::before,
.guest-shell::before {
  display: none !important;
}

.guest-shell {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--sg-responsive-gap) !important;
  align-items: start !important;
}

.guest-shell .wedding-hero {
  min-height: auto !important;
  margin: 0 !important;
  padding: clamp(28px, 6vw, 54px) clamp(22px, 4.6vw, 44px) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: clamp(28px, 4vw, 38px) !important;
  background:
    radial-gradient(circle at 12% 14%, rgba(244, 213, 198, 0.62), transparent 11rem),
    radial-gradient(ellipse at 92% 22%, rgba(255, 255, 255, 0.92) 0 5rem, rgba(246, 226, 215, 0.74) 11rem, transparent 17rem),
    linear-gradient(125deg, rgba(255, 251, 248, 0.98) 0%, rgba(255, 244, 239, 0.94) 50%, rgba(236, 205, 188, 0.72) 100%) !important;
  box-shadow: 0 22px 60px rgba(56, 22, 48, 0.10) !important;
}

.guest-shell .wedding-hero-copy {
  max-width: min(430px, 62%) !important;
}

.guest-shell .brand-title {
  font-size: clamp(3.1rem, 7.2vw, 5.8rem) !important;
  line-height: 0.9 !important;
}

.guest-shell .upload-hero-copy {
  max-width: 320px !important;
  font-size: clamp(0.96rem, 1.5vw, 1.08rem) !important;
}

.guest-shell .wedding-hero .hero-photo-scene {
  right: clamp(-18px, -1vw, -6px) !important;
  top: clamp(38px, 6vw, 66px) !important;
  width: min(43%, 260px) !important;
  max-width: 260px !important;
  height: clamp(188px, 25vw, 270px) !important;
  border-radius: 116px 0 0 116px !important;
}

.guest-shell .upload-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(24px, 3.4vw, 36px) !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: clamp(28px, 4vw, 36px) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 24px 70px rgba(56, 22, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.guest-shell .upload-card > h1#upload-title {
  font-size: clamp(2.25rem, 4vw, 3.35rem) !important;
}

/* Bottom-CTA darf bleiben, aber nicht mehr auf Telefonbreite begrenzt sein. */
.sticky-upload-bar {
  width: min(calc(100% - 28px), var(--sg-responsive-container)) !important;
  max-width: var(--sg-responsive-container) !important;
  left: 50% !important;
  right: auto !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  border-radius: 28px !important;
  padding: 14px clamp(16px, 2.6vw, 24px) calc(14px + env(safe-area-inset-bottom)) !important;
}

.sticky-upload-inner {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.public-footer {
  max-width: var(--sg-responsive-container) !important;
  margin: -72px auto 0 !important;
  padding: 0 clamp(16px, 3vw, 28px) calc(96px + env(safe-area-inset-bottom)) !important;
  text-align: center !important;
}

.public-footer .legal-links {
  justify-content: center !important;
  color: rgba(50, 20, 46, 0.58) !important;
}

@media (min-width: 720px) {
  .guest-shell {
    max-width: 720px !important;
  }
}

@media (min-width: 960px) {
  .guest-shell {
    max-width: none !important;
    grid-template-columns: minmax(330px, 0.9fr) minmax(460px, 1.1fr) !important;
  }

  .guest-shell .wedding-hero {
    position: sticky !important;
    top: 86px !important;
    min-height: min(640px, calc(100dvh - 128px)) !important;
    display: flex !important;
    align-items: center !important;
  }

  .guest-shell .wedding-hero-copy {
    max-width: 58% !important;
  }

  .guest-shell .brand-title {
    font-size: clamp(4rem, 6vw, 6.15rem) !important;
  }

  .guest-shell .upload-card {
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .public-nav {
    padding-inline: 10px !important;
  }

  .public-nav-inner {
    gap: 8px !important;
  }

  .public-logo span:last-child {
    display: none !important;
  }

  .public-logo-mark {
    width: 36px !important;
    height: 36px !important;
  }

  .public-tabs {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .public-tab {
    min-height: 36px !important;
    padding-inline: 10px !important;
    font-size: 0.78rem !important;
  }

  .public-tab .icon {
    width: 1.05em !important;
    height: 1.05em !important;
  }

  .public-tab-link {
    padding-inline: 4px !important;
  }

  .guest-page {
    padding-inline: 10px !important;
    padding-top: 12px !important;
  }

  .guest-shell {
    gap: 14px !important;
  }

  .guest-shell .wedding-hero {
    border-radius: 30px !important;
    padding: 34px 20px 72px !important;
  }

  .guest-shell .wedding-hero-copy {
    max-width: 58% !important;
  }

  .guest-shell .brand-title {
    font-size: clamp(2.52rem, 12.4vw, 3.24rem) !important;
  }

  .guest-shell .upload-hero-copy {
    max-width: 220px !important;
  }

  .guest-shell .wedding-hero .hero-photo-scene {
    top: 42px !important;
    right: -18px !important;
    width: 50% !important;
    height: 196px !important;
  }

  .guest-shell .upload-card {
    width: 100% !important;
    padding: 26px 16px 22px !important;
  }

  .sticky-upload-bar {
    width: calc(100% - 20px) !important;
    border-radius: 26px !important;
  }
}

@media (max-width: 430px) {
  .public-tab[data-route="upload"] {
    max-width: 52px !important;
    overflow: hidden !important;
  }

  .public-tab[data-route="upload"] .icon {
    margin-right: 18px !important;
  }

  .public-tab[data-route="imprint"] {
    font-size: 0.74rem !important;
  }
}

/* Header bleibt auch mobil sichtbar; kein Demo-Nav-Verstecken mehr. */
.public-nav { display: block !important; }
@media (max-width: 430px) {
  .public-tab[data-route="upload"] {
    max-width: none !important;
    overflow: visible !important;
  }
  .public-tab[data-route="upload"] .icon {
    margin-right: 0 !important;
  }
}

/* Responsive QA correction: grid items dürfen mobil nicht ihre Min-Content-Breite erzwingen. */
.guest-shell,
.phone-stage {
  grid-template-columns: minmax(0, 1fr) !important;
}
.guest-shell > *,
.phone-stage > *,
.guest-shell .wedding-hero,
.guest-shell .upload-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.card-handle {
  display: none !important;
}
@media (max-width: 640px) {
  .guest-shell,
  .phone-stage {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .guest-shell .wedding-hero,
  .guest-shell .upload-card {
    width: 100% !important;
    margin-inline: 0 !important;
  }
}
@media (min-width: 960px) {
  .guest-shell {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  }
}
.guest-shell .upload-card .card-handle,
.upload-card .card-handle,
.album-card .card-handle {
  display: none !important;
}
.guest-shell .upload-card::before,
.upload-card::before {
  display: none !important;
  content: none !important;
}

/* ============================================================
   2026-06-05 · Mobile Simplification v2
   Keine obere Leiste, einfache Fotoauswahl, Admin-Link unten.
   ============================================================ */
.public-nav {
  display: none !important;
}

.guest-page {
  min-height: 100dvh !important;
  padding-top: clamp(10px, 2.5vw, 30px) !important;
  padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
}

.guest-shell .section-headline {
  align-items: flex-start !important;
  margin: 24px 0 14px !important;
}

.guest-shell .section-headline h2 {
  max-width: 100% !important;
}

.photo-choice-buttons {
  display: none !important;
}

.upload-empty-action {
  width: 100% !important;
  margin: 4px 0 12px !important;
}

.upload-empty-button {
  width: 100% !important;
  min-height: 116px !important;
  border: 1px dashed rgba(201, 142, 132, 0.48) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  color: var(--ink) !important;
  background: linear-gradient(145deg, rgba(255, 243, 239, 0.94), rgba(255, 255, 255, 0.74)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 30px rgba(56, 22, 48, 0.08) !important;
  text-align: left !important;
}

.upload-empty-button strong {
  display: block !important;
  margin: 0 0 4px !important;
  font: 760 1rem/1.15 var(--sans) !important;
  letter-spacing: -0.015em !important;
}

.upload-empty-button small {
  display: block !important;
  color: rgba(50, 20, 46, 0.62) !important;
  font: 650 0.9rem/1.36 var(--sans) !important;
}

.upload-empty-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff8f4 !important;
  background: linear-gradient(135deg, #32142e, #6e405e) !important;
  box-shadow: 0 12px 28px rgba(49, 18, 42, 0.18) !important;
}

.upload-empty-icon .icon {
  width: 1.35em !important;
  height: 1.35em !important;
}

.my-empty-state {
  width: 100% !important;
  min-height: 156px !important;
  padding: 20px !important;
  border: 1px solid rgba(201, 142, 132, 0.28) !important;
  border-radius: 24px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px 14px !important;
  color: var(--ink) !important;
  background: linear-gradient(135deg, rgba(255, 250, 247, 0.92), rgba(255, 255, 255, 0.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.my-empty-icon {
  grid-row: 1 / span 3 !important;
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  color: #d98a7d !important;
  background: rgba(255, 239, 234, 0.92) !important;
}

.my-empty-state strong {
  font: 820 0.98rem/1.2 var(--sans) !important;
  letter-spacing: -0.015em !important;
}

.my-empty-state small {
  color: rgba(50, 20, 46, 0.62) !important;
  font: 650 0.88rem/1.38 var(--sans) !important;
}

.my-empty-action {
  justify-self: start !important;
  min-height: 38px !important;
  padding-inline: 13px !important;
  font-size: 0.82rem !important;
}

.public-footer {
  margin: -82px auto 0 !important;
  padding: 0 clamp(16px, 3vw, 28px) calc(104px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  justify-items: center !important;
  gap: 12px !important;
}

.footer-login-btn {
  min-height: 34px !important;
  border: 1px solid rgba(88, 46, 76, 0.14) !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: rgba(50, 20, 46, 0.68) !important;
  background: rgba(255, 255, 255, 0.58) !important;
  font: 760 0.78rem/1 var(--sans) !important;
  box-shadow: none !important;
}

.footer-login-btn .icon {
  width: 1.05em !important;
  height: 1.05em !important;
}

@media (max-width: 640px) {
  .guest-page {
    padding-top: 10px !important;
  }

  .guest-shell {
    gap: 12px !important;
  }

  .guest-shell .wedding-hero {
    min-height: 342px !important;
  }

  .guest-shell .upload-card {
    padding: 24px 16px 22px !important;
  }

  .guest-shell .section-headline {
    display: block !important;
    margin-top: 22px !important;
  }

  .upload-empty-button {
    min-height: 108px !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .my-empty-state {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    min-height: 0 !important;
    padding: 18px !important;
  }

  .my-empty-icon {
    grid-row: auto !important;
  }

  .sticky-upload-bar {
    bottom: 10px !important;
  }
}