:root {
  --rose: #f85f8d;
  --rose-dark: #c92f64;
  --pink: #ffd0df;
  --cream: #fff8ef;
  --mint: #bdebd7;
  --violet: #8562d8;
  --ink: #533042;
  --white: #ffffff;
  --shadow: 0 22px 70px rgba(168, 57, 98, 0.25);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95) 0 7%, transparent 18%),
    radial-gradient(circle at 84% 10%, rgba(189, 235, 215, 0.68) 0 9%, transparent 23%),
    linear-gradient(145deg, #ffe5ee 0%, #fff8ef 44%, #dff6ff 100%);
}

body[data-theme="dark"] {
  --rose: #ff7aa5;
  --rose-dark: #ff8db3;
  --pink: #59324a;
  --cream: #211926;
  --mint: #285448;
  --violet: #b39aff;
  --ink: #fff4fa;
  --white: #2a2030;
  --shadow: 0 22px 70px rgba(0,0,0,0.4);
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 122, 165, 0.24) 0 7%, transparent 20%),
    radial-gradient(circle at 84% 10%, rgba(97, 203, 180, 0.22) 0 9%, transparent 24%),
    linear-gradient(145deg, #211322 0%, #171926 52%, #12282e 100%);
}

button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.sky,
.floating-hearts,
.celebration {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.sky {
  z-index: 0;
  overflow: hidden;
}

.moon {
  position: absolute;
  width: 76px;
  height: 76px;
  top: 7vh;
  right: 9vw;
  border-radius: 50%;
  background: #ffe69d;
  box-shadow: 0 0 42px rgba(255, 230, 157, 0.78);
  animation: moonFloat 7s ease-in-out infinite;
}

.moon::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  top: 4px;
  left: -10px;
  border-radius: 50%;
  background: #ffe5ee;
}

.star {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px #fff;
  animation: twinkle 2.8s ease-in-out infinite;
}

.star::before,
.star::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  transform: translate(-50%, -50%);
}

.star::after {
  width: 2px;
  height: 24px;
}

.star-1 { top: 13vh; left: 12vw; animation-delay: 0.1s; }
.star-2 { top: 28vh; left: 79vw; animation-delay: 0.9s; }
.star-3 { top: 67vh; left: 9vw; animation-delay: 1.5s; }
.star-4 { top: 78vh; left: 88vw; animation-delay: 2.1s; }

.floating-hearts {
  z-index: 1;
  overflow: hidden;
}

.floating-hearts span {
  position: absolute;
  left: var(--left);
  bottom: -60px;
  color: rgba(248, 95, 141, 0.45);
  font-size: var(--size);
  animation: floatHeart 9s linear infinite;
  animation-delay: var(--delay);
}

.app-shell {
  position: relative;
  z-index: 2;
  width: min(1040px, calc(100vw - 18px));
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom));
}

.panel {
  display: none;
  width: min(820px, 100%);
  max-width: 100%;
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  text-align: center;
  transform: translateY(18px) scale(0.98);
  opacity: 0;
}

.panel.active {
  display: block;
  animation: panelIn 0.55s ease forwards;
}

.eyebrow,
.question-kicker {
  margin: 0 0 10px;
  color: var(--rose-dark);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

h1,
h2 {
  margin: 0;
  line-height: 1.02;
}

h1 {
  font-family: "Pacifico", cursive;
  max-width: 100%;
  font-size: clamp(3.15rem, 12vw, 8rem);
  color: var(--rose-dark);
  text-shadow: 0 8px 0 rgba(255, 255, 255, 0.62);
  overflow-wrap: anywhere;
}

h2 {
  max-width: 100%;
  font-size: clamp(2rem, 6vw, 4.25rem);
  color: #6e3b7d;
  overflow-wrap: anywhere;
}

.cover-text,
.question-copy,
#finalMessage {
  width: min(620px, 100%);
  margin: 18px auto 0;
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.cute-scene {
  position: relative;
  height: 155px;
  margin-bottom: 16px;
}

.bear {
  position: absolute;
  width: 132px;
  height: 120px;
  left: 50%;
  bottom: 4px;
  transform: translateX(-70%);
  animation: bob 2.8s ease-in-out infinite;
}

.bear .ear {
  position: absolute;
  width: 42px;
  height: 42px;
  top: 0;
  border: 8px solid #c68a6b;
  border-radius: 50%;
  background: #ffd7c7;
}

.bear .ear.left { left: 10px; }
.bear .ear.right { right: 10px; }

.bear .face {
  position: absolute;
  inset: 18px 0 0;
  border-radius: 48% 48% 44% 44%;
  background: #ffc9b4;
  box-shadow: inset 0 -12px 0 rgba(198, 138, 107, 0.12), 0 14px 26px rgba(124, 73, 86, 0.16);
}

.bear .eye {
  position: absolute;
  width: 12px;
  height: 15px;
  top: 45px;
  border-radius: 50%;
  background: #4c2c38;
}

.bear .eye.left { left: 38px; }
.bear .eye.right { right: 38px; }

.bear .nose {
  position: absolute;
  width: 20px;
  height: 14px;
  left: 50%;
  top: 62px;
  border-radius: 50%;
  background: #7a4252;
  transform: translateX(-50%);
}

.bear .smile {
  position: absolute;
  width: 38px;
  height: 22px;
  left: 50%;
  top: 70px;
  border-bottom: 4px solid #7a4252;
  border-radius: 0 0 50px 50px;
  transform: translateX(-50%);
}

.letter {
  position: absolute;
  right: 50%;
  bottom: 20px;
  width: 110px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 26px rgba(124, 73, 86, 0.14);
  transform: translateX(130%) rotate(7deg);
  animation: wiggle 3.2s ease-in-out infinite;
}

.letter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, transparent 48%, rgba(248, 95, 141, 0.18) 49% 51%, transparent 52%);
}

.letter span {
  position: relative;
  z-index: 1;
  font-weight: 800;
  color: var(--rose-dark);
}

.letter strong {
  position: absolute;
  bottom: -18px;
  right: -16px;
  font-size: 2rem;
}

.main-actions,
.answer-zone {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  margin-top: 30px;
}

.love-button,
.answer-button,
.small-button,
.send-reply-button,
.restart-button {
  position: relative;
  min-height: 54px;
  padding: 14px 22px;
  border-radius: 18px;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(201, 47, 100, 0.26);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  overflow: hidden;
}

.love-button::after,
.answer-button::after,
.send-reply-button::after,
.restart-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: translateX(-120%);
  transition: transform 0.45s ease;
}

.love-button:hover,
.answer-button:hover,
.small-button:hover,
.send-reply-button:hover,
.restart-button:hover,
.love-button:focus-visible,
.answer-button:focus-visible,
.small-button:focus-visible,
.send-reply-button:focus-visible,
.restart-button:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 34px rgba(201, 47, 100, 0.32);
  outline: 3px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.love-button:hover::after,
.answer-button:hover::after,
.send-reply-button:hover::after,
.restart-button:hover::after {
  transform: translateX(120%);
}

.love-button.soft {
  background: linear-gradient(135deg, #ff89af, #f85f8d);
}

.love-button.bright,
.send-reply-button,
.restart-button {
  background: linear-gradient(135deg, #f85f8d, #8562d8);
}

.signature {
  margin: 24px 0 0;
  font-size: 1.02rem;
}

.quiz-panel {
  max-width: 850px;
}

.progress-wrap {
  margin-bottom: 22px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
  font-weight: 800;
  color: #7a4252;
}

.progress-track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 7px rgba(122, 66, 82, 0.12);
}

.progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f85f8d, #ffd15c, #61cbb4);
  transition: width 0.35s ease;
}

.question-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mini-illustration {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #ffe4ef);
  box-shadow: 0 15px 35px rgba(201, 47, 100, 0.18);
  font-size: 3rem;
  animation: bob 2.3s ease-in-out infinite;
}

.answer-button {
  min-width: min(100%, 170px);
  background: linear-gradient(135deg, #8562d8, #f85f8d);
}

.answer-button[data-kind="sweet"] {
  background: linear-gradient(135deg, #61cbb4, #f85f8d);
}

.answer-button[data-kind="funny"] {
  background: linear-gradient(135deg, #ffd15c, #f85f8d);
  color: #6b3150;
}

.slider-box {
  width: min(560px, 100%);
  margin-top: 28px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.64);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.85);
}

.love-slider {
  width: 100%;
  accent-color: var(--rose);
}

.slider-readout {
  margin: 10px 0 18px;
  font-weight: 800;
  color: var(--rose-dark);
}

.reaction {
  min-height: 32px;
  margin: 22px 0 0;
  color: var(--rose-dark);
  font-size: 1.05rem;
  font-weight: 800;
}

.reaction.pop {
  animation: pop 0.38s ease;
}

.final-panel {
  overflow: hidden;
}

.final-badge {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #ffd0df);
  box-shadow: 0 18px 44px rgba(201, 47, 100, 0.22);
  font-size: 4rem;
  animation: heartbeat 1.35s ease-in-out infinite;
}

.final-hearts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 26px 0;
  font-size: 2.2rem;
}

.reply-card {
  width: min(650px, 100%);
  margin: 24px auto 0;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82);
  text-align: left;
}

.reply-label,
.draw-head span {
  display: block;
  color: #7a4252;
  font-weight: 900;
}

#replyText {
  width: 100%;
  min-height: 104px;
  margin-top: 10px;
  padding: 14px 15px;
  resize: vertical;
  border: 2px solid rgba(248, 95, 141, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  font: inherit;
  line-height: 1.45;
  outline: 0;
  user-select: text;
  -webkit-user-select: text;
}

#replyText:focus {
  border-color: rgba(248, 95, 141, 0.72);
  box-shadow: 0 0 0 4px rgba(248, 95, 141, 0.12);
}

.draw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.small-button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd15c, #f85f8d);
  color: #6b3150;
  font-size: 0.9rem;
}

#loveCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  margin-top: 10px;
  border: 2px dashed rgba(201, 47, 100, 0.32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 208, 223, 0.76) 0 7%, transparent 8%),
    radial-gradient(circle at 86% 78%, rgba(189, 235, 215, 0.72) 0 8%, transparent 9%),
    rgba(255, 255, 255, 0.84);
  cursor: crosshair;
  touch-action: none;
}

.send-reply-button {
  width: 100%;
  margin-top: 16px;
}

.send-reply-button:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.save-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: #7a4252;
  font-size: 0.95rem;
  font-weight: 800;
}

.save-status.saved {
  background: rgba(189, 235, 215, 0.72);
  color: #326f62;
}

.save-status.error {
  background: rgba(255, 208, 223, 0.8);
  color: var(--rose-dark);
}

.final-hearts span {
  animation: bob 2.2s ease-in-out infinite;
}

.final-hearts span:nth-child(2) { animation-delay: 0.2s; }
.final-hearts span:nth-child(3) { animation-delay: 0.4s; }
.final-hearts span:nth-child(4) { animation-delay: 0.6s; }
.final-hearts span:nth-child(5) { animation-delay: 0.8s; }

.toast {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: 24px;
  max-width: min(520px, calc(100% - 34px));
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(83, 48, 66, 0.92);
  color: #fff;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 36px rgba(83, 48, 66, 0.28);
  opacity: 0;
  transform: translate(-50%, 24px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.burst-heart,
.trail-heart,
.confetti-piece {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.burst-heart {
  color: var(--rose);
  font-size: 26px;
  text-shadow: 0 7px 18px rgba(201, 47, 100, 0.32);
  animation: burst 0.9s ease-out forwards;
}

.trail-heart {
  color: var(--rose);
  font-size: 18px;
  filter: drop-shadow(0 6px 10px rgba(201, 47, 100, 0.24));
  animation: trailFade 1.1s ease-out forwards;
}

.confetti-piece {
  width: 10px;
  height: 16px;
  border-radius: 3px;
  animation: confettiFall 2.7s linear forwards;
}

@keyframes panelIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes floatHeart {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translateY(-112vh) rotate(24deg);
    opacity: 0;
  }
}

@keyframes twinkle {
  0%, 100% { transform: scale(0.72); opacity: 0.46; }
  50% { transform: scale(1.16); opacity: 1; }
}

@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.bear {
  animation-name: bearBob;
}

@keyframes bearBob {
  0%, 100% { transform: translateX(-70%) translateY(0); }
  50% { transform: translateX(-70%) translateY(-8px); }
}

@keyframes wiggle {
  0%, 100% { transform: translateX(130%) rotate(7deg); }
  50% { transform: translateX(130%) rotate(-2deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.08); }
  48% { transform: scale(0.98); }
  66% { transform: scale(1.05); }
}

@keyframes pop {
  0% { transform: scale(0.92); opacity: 0.3; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes burst {
  0% {
    transform: translate(-50%, -50%) scale(0.7) rotate(-8deg);
    opacity: 1;
  }
  to {
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.2) rotate(40deg);
    opacity: 0;
  }
}

@keyframes trailFade {
  0% {
    transform: translate(-50%, -50%) scale(0.5) rotate(var(--angle));
    opacity: 0.95;
  }
  100% {
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.2) rotate(calc(var(--angle) + 120deg));
    opacity: 0;
  }
}

@keyframes confettiFall {
  0% {
    transform: translateY(-20vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(118vh) rotate(720deg);
    opacity: 0;
  }
}

@media (max-width: 680px) {
  .app-shell {
    width: min(100% - 18px, 520px);
    padding: 16px 0;
  }

  .panel {
    min-height: calc(100vh - 32px);
    min-height: calc(100svh - 32px);
    min-height: calc(100dvh - 32px);
    display: none;
    align-content: center;
    padding: 24px 16px;
    border-radius: 22px;
    overflow: hidden;
  }

  h1 {
    max-width: 100%;
    font-size: clamp(3.15rem, 17vw, 4.6rem);
    overflow-wrap: anywhere;
  }

  h2 {
    max-width: 100%;
    font-size: clamp(1.75rem, 8vw, 2.6rem);
    overflow-wrap: anywhere;
  }

  .cover-text,
  .question-copy,
  #finalMessage {
    max-width: 100%;
    font-size: 1rem;
  }

  .panel.active {
    display: grid;
  }

  .cute-scene {
    height: 130px;
  }

  .bear {
    width: 112px;
    height: 102px;
  }

  .bear .ear {
    width: 36px;
    height: 36px;
  }

  .letter {
    width: 94px;
    height: 66px;
  }

  .main-actions,
  .answer-zone {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .love-button,
  .answer-button,
  .small-button,
  .send-reply-button,
  .restart-button {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    white-space: normal;
  }

  .draw-head {
    align-items: stretch;
    flex-direction: column;
  }

  .progress-label {
    font-size: 0.92rem;
  }

  .question-card {
    min-height: 480px;
  }

  .moon {
    width: 58px;
    height: 58px;
    top: 3vh;
    right: 7vw;
  }

  .moon::after {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .moon,
  .star,
  .floating-hearts span,
  .bear,
  .letter,
  .mini-illustration,
  .final-badge,
  .final-hearts span {
    animation-duration: 4s;
  }
}

.phone-stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom));
}

.phone {
  position: relative;
  width: min(390px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  height: min(920px, calc(100dvh - 28px));
  min-height: 650px;
  padding: 14px;
  border-radius: 44px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.32), transparent 30%),
    #44283b;
  box-shadow: 0 28px 80px rgba(168, 57, 98, 0.32), inset 0 0 0 2px rgba(255,255,255,0.2);
}

.phone::after {
  content: "";
  position: absolute;
  z-index: 7;
  top: 15px;
  right: calc(50% - 58px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9be8ff, #221923 66%);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.35);
}

.phone::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 38px;
  pointer-events: none;
}

.phone-speaker {
  position: absolute;
  z-index: 6;
  top: 18px;
  left: 50%;
  width: 82px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.34);
  transform: translateX(-50%);
}

.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.92) 0 9%, transparent 22%),
    linear-gradient(155deg, rgba(255, 233, 241, 0.96) 0%, rgba(255, 252, 247, 0.97) 52%, rgba(224, 249, 255, 0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.82);
}

body[data-theme="dark"] .phone-screen {
  background:
    radial-gradient(circle at 24% 18%, rgba(255,122,165,0.24) 0 8%, transparent 22%),
    linear-gradient(155deg, rgba(42, 25, 45, 0.98) 0%, rgba(27, 26, 42, 0.98) 52%, rgba(17, 43, 49, 0.98) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

.status-bar {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: rgba(255,244,250,0.94);
  font-size: 0.82rem;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(20,12,24,0.58), rgba(20,12,24,0.34));
  box-shadow: 0 8px 24px rgba(20,12,24,0.12);
  backdrop-filter: blur(8px);
  cursor: grab;
  touch-action: none;
}

.phone-view {
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 46px 18px 86px;
  scrollbar-width: thin;
  opacity: 0;
  transform: translateX(22px) scale(0.98);
}

.phone-view.active {
  display: block;
  animation: phoneViewIn 0.34s ease forwards;
}

#homeView {
  isolation: isolate;
}

#homeView > * {
  position: relative;
  z-index: 1;
}

#homeView::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--home-wallpaper);
  background-size: cover;
  background-position: center;
  opacity: var(--home-wallpaper-opacity, 0);
}

#homeView::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255,250,252,0.58), rgba(224,249,255,0.68));
  opacity: var(--home-wallpaper-opacity, 0);
}

body[data-theme="dark"] #homeView::after {
  background: linear-gradient(180deg, rgba(33,19,34,0.52), rgba(18,40,46,0.74));
}

.home-art {
  position: relative;
  height: 92px;
  display: grid;
  place-items: center;
  margin-top: 4px;
}

.phone-heart {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #ffd0df);
  box-shadow: 0 18px 42px rgba(201, 47, 100, 0.2);
  font-size: 2.5rem;
  animation: heartbeat 1.35s ease-in-out infinite;
}

.phone-note {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(255,255,255,0.86);
  color: var(--rose-dark);
  font-size: 0.9rem;
  font-weight: 900;
  transform: rotate(6deg);
  animation: wiggle 3.2s ease-in-out infinite;
}

#homeView .phone-note {
  display: none;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 100%;
  margin: 18px 0 0;
}

.app-icon {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 102px;
  padding: 12px 7px;
  border-radius: 22px;
  background: rgba(255,255,255,0.5);
  color: var(--ink);
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72), 0 12px 24px rgba(122,66,82,0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.app-icon strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-icon span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-size: 1.85rem;
  box-shadow: 0 12px 22px rgba(201,47,100,0.2);
}

.app-icon:hover,
.app-icon:focus-visible {
  transform: translateY(-5px);
  outline: 3px solid rgba(255,255,255,0.82);
  outline-offset: 3px;
}

.gallery-icon span { background: linear-gradient(135deg, #61cbb4, #8562d8); }
.love-icon span { background: linear-gradient(135deg, #f85f8d, #c92f64); }
.settings-icon span { background: linear-gradient(135deg, #6e3b7d, #61cbb4); }

.phone-app-header {
  position: sticky;
  top: 38px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px -6px 12px;
  padding: 6px 4px 9px;
  background: linear-gradient(180deg, rgba(255,250,252,0.98), rgba(255,250,252,0.78));
  backdrop-filter: blur(18px);
}

.phone-app-header .eyebrow {
  margin-bottom: 4px;
  font-size: 0.72rem;
}

.phone-app-header h2 {
  font-size: clamp(1.8rem, 9vw, 2.6rem);
}

body[data-theme="dark"] .phone-app-header {
  background: linear-gradient(180deg, rgba(36,25,39,0.96), rgba(36,25,39,0.74));
}

.phone-top-back {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,0.76);
  color: var(--rose-dark);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.letter-app-header {
  margin-bottom: 10px;
}

.letter-app-frame {
  min-height: calc(100% - 56px);
  overflow: visible;
}

.letter-app-frame .app-shell {
  width: 100%;
  min-height: auto;
  display: block;
  padding: 0;
}

.letter-app-frame .panel {
  width: 100%;
  padding: 22px 14px;
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(168, 57, 98, 0.16);
}

.letter-app-frame h1 {
  font-size: clamp(3rem, 17vw, 4.8rem);
}

.letter-app-frame h2 {
  font-size: clamp(1.85rem, 7vw, 2.6rem);
}

.gallery-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.settings-list {
  display: grid;
  gap: 12px;
}

.settings-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.82), 0 12px 24px rgba(122,66,82,0.08);
}

.settings-drop {
  display: block;
}

.settings-drop summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  color: var(--rose-dark);
  font-weight: 900;
  cursor: pointer;
}

.settings-drop summary::-webkit-details-marker {
  display: none;
}

.settings-drop summary::after {
  content: "⌄";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,208,223,0.58);
  color: #6e3b7d;
  transition: transform 160ms ease;
}

.settings-drop[open] summary::after {
  transform: rotate(180deg);
}

.settings-content {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

body[data-theme="dark"] .settings-panel,
body[data-theme="dark"] .app-icon,
body[data-theme="dark"] .folder-chip,
body[data-theme="dark"] .album-button,
body[data-theme="dark"] .view-all-link {
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 12px 24px rgba(0,0,0,0.18);
}

.settings-panel strong {
  color: var(--rose-dark);
  font-size: 0.98rem;
}

.settings-panel p {
  margin: 0;
  color: #7a4252;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
}

body[data-theme="dark"] .settings-panel p {
  color: rgba(255,244,250,0.78);
}

.settings-button,
.theme-switch button {
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
  font-weight: 900;
}

.settings-button.soft {
  background: linear-gradient(135deg, #61cbb4, #8562d8);
}

.settings-button.plain,
.theme-switch button {
  background: rgba(255,208,223,0.64);
  color: #6e3b7d;
}

.theme-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.theme-switch button.active {
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
}

#wallpaperUpload {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wallpaper-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wallpaper-options[hidden] {
  display: none !important;
}

.wallpaper-option {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,0.7);
  box-shadow: inset 0 0 0 2px rgba(248,95,141,0.22);
}

.wallpaper-option img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-touch-callout: none;
}

.empty-wallpaper {
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.58);
}

.wallpaper-review {
  position: fixed;
  z-index: 34;
  inset: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(83,48,66,0.22);
  backdrop-filter: blur(6px);
}

.wallpaper-review[hidden] {
  display: none !important;
}

.wallpaper-card {
  width: min(100%, 390px);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 24px 65px rgba(83,48,66,0.24);
}

.wallpaper-card strong {
  color: var(--rose-dark);
  font-size: 1.05rem;
}

.wallpaper-albums {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.wallpaper-albums button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,208,223,0.64);
  color: #6e3b7d;
  font-weight: 900;
}

.wallpaper-albums button.active {
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
}

#closeWallpaperPickerButton {
  min-height: 44px;
  border-radius: 15px;
  background: rgba(255,208,223,0.64);
  color: #6e3b7d;
  font-weight: 900;
}

.gallery-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.78);
}

.gallery-fields[hidden] {
  display: none !important;
}

.gallery-fields label {
  display: grid;
  gap: 6px;
  color: #7a4252;
  font-size: 0.86rem;
  font-weight: 900;
}

.gallery-fields input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid rgba(248,95,141,0.22);
  border-radius: 15px;
  background: rgba(255,255,255,0.78);
  color: var(--ink);
  outline: 0;
}

.gallery-fields input:focus {
  border-color: rgba(248,95,141,0.7);
  box-shadow: 0 0 0 4px rgba(248,95,141,0.12);
}

.folder-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scroll-snap-type: x proximity;
}

.gallery-folder-top {
  min-height: 24px;
  display: flex;
  align-items: center;
  margin: 8px 0 2px;
}

.view-all-link {
  padding: 0;
  background: transparent;
  color: var(--rose-dark);
  font-size: 0.92rem;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.view-all-link.active {
  color: #6e3b7d;
  text-decoration-thickness: 3px;
}

.folder-chip {
  flex: 0 0 auto;
  width: 108px;
  min-height: 112px;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 7px;
  border-radius: 18px;
  background: rgba(255,255,255,0.7);
  color: #6e3b7d;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.85);
  scroll-snap-align: start;
  text-align: left;
}

.folder-chip.active,
.folder-chip.drag-over {
  background: linear-gradient(145deg, #fff7fb, #ffe0ed);
  color: #6b3150;
  box-shadow: inset 0 0 0 2px rgba(248,95,141,0.42), 0 14px 30px rgba(201,47,100,0.16);
}

.album-thumbs {
  height: 62px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,208,223,0.7), rgba(224,249,255,0.7));
}

.album-thumbs img,
.album-thumb-placeholder {
  width: 100%;
  height: 100%;
}

.album-thumbs img {
  object-fit: cover;
}

.album-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 70px;
  font-size: 1.45rem;
}

.album-thumb-placeholder {
  display: grid;
  place-items: center;
  min-height: 0;
  color: rgba(110,59,125,0.42);
  font-size: 1.1rem;
  background: rgba(255,255,255,0.55);
}

.album-name,
.album-count {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album-name {
  font-size: 0.8rem;
}

.album-count {
  color: #8b5968;
  font-size: 0.68rem;
}

.gallery-button {
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(201,47,100,0.24);
  cursor: pointer;
}

.album-button {
  min-width: 46px;
  padding-inline: 14px;
  background: rgba(255,255,255,0.75);
  color: #6e3b7d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.88), 0 10px 22px rgba(83,48,66,0.08);
}

.album-button:active {
  background: linear-gradient(135deg, #ffd7e8, #e9d9ff);
}

.camera-label {
  background: linear-gradient(135deg, #61cbb4, #f85f8d);
}

#photoUpload,
#cameraUpload {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-review,
.album-review,
.photo-edit-review {
  position: fixed;
  z-index: 32;
  inset: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(83,48,66,0.2);
  backdrop-filter: blur(5px);
}

.upload-review[hidden] {
  display: none !important;
}

.upload-progress-dialog {
  width: min(360px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  border: 1px solid rgba(201,47,100,0.18);
  border-radius: 8px;
  background: #fffafd;
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,0.24);
  overflow: auto;
  text-align: center;
}

.upload-progress-dialog::backdrop {
  background: rgba(11,8,16,0.58);
  backdrop-filter: blur(5px);
}

.upload-progress-dialog h2 {
  margin: 0 0 18px;
  font: inherit;
  font-weight: 900;
  font-size: 20px;
  color: var(--rose-dark);
}

.upload-progress-percent {
  display: block;
  font-size: 40px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.upload-progress-dialog progress {
  display: block;
  appearance: none;
  width: 100%;
  height: 10px;
  margin: 16px 0 12px;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  background: #ecdce5;
  accent-color: #c92f64;
}

.upload-progress-dialog progress::-webkit-progress-bar { background: #ecdce5; }
.upload-progress-dialog progress::-webkit-progress-value { background: #c92f64; }
.upload-progress-dialog progress::-moz-progress-bar { background: #c92f64; }

.upload-progress-dialog p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.upload-progress-remaining { font-weight: 800; }

.upload-progress-dialog button {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid rgba(201,47,100,0.22);
  border-radius: 8px;
  background: #f9e3ec;
  color: #783653;
  font: inherit;
  font-weight: 800;
  touch-action: manipulation;
}

.upload-progress-dialog button:disabled { opacity: 0.5; cursor: wait; }
.upload-review-actions button:disabled { opacity: 0.5; cursor: wait; }

body[data-theme="dark"] .upload-progress-dialog {
  background: #231d2b;
  color: #fff4fa;
  border-color: #594354;
}

body[data-theme="dark"] .upload-progress-dialog h2 { color: #ff91b8; }
body[data-theme="dark"] .upload-progress-dialog button { background: #3e3247; color: #fff4fa; border-color: #65556d; }
body[data-theme="dark"] .upload-progress-dialog progress,
body[data-theme="dark"] .upload-progress-dialog progress::-webkit-progress-bar { background: #44384c; }
body[data-theme="dark"] .upload-progress-dialog progress::-webkit-progress-value { background: #ff91b8; }
body[data-theme="dark"] .upload-progress-dialog progress::-moz-progress-bar { background: #ff91b8; }

.album-review[hidden] {
  display: none !important;
}

.photo-edit-review[hidden] {
  display: none !important;
}

.photo-menu,
.album-review,
.photo-edit-review {
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}

.upload-review-card,
.album-review-card,
.photo-edit-card {
  width: min(100%, 390px);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 24px 65px rgba(83,48,66,0.24);
  animation: previewPop 180ms ease both;
}

.upload-review-card strong,
.album-review-card strong,
.photo-edit-card strong {
  color: var(--rose-dark);
  font-size: 1.05rem;
}

.album-review-card p {
  margin: 0;
  color: #7a4252;
  font-weight: 800;
  line-height: 1.4;
}

.upload-review-card img {
  width: 100%;
  aspect-ratio: 1.15;
  border-radius: 18px;
  object-fit: cover;
  background: rgba(255,208,223,0.38);
}

.upload-review-card label,
.album-review-card label,
.photo-edit-card label {
  display: grid;
  gap: 6px;
  color: #7a4252;
  font-weight: 900;
}

.upload-review-card input,
.upload-review-card textarea,
.album-review-card input,
.photo-edit-card textarea,
.photo-edit-card input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid rgba(248,95,141,0.22);
  border-radius: 15px;
  background: rgba(255,250,252,0.92);
  color: var(--ink);
  outline: 0;
}

.upload-review-card input:focus,
.upload-review-card textarea:focus,
.album-review-card input:focus,
.photo-edit-card textarea:focus,
.photo-edit-card input:focus {
  border-color: rgba(248,95,141,0.7);
  box-shadow: 0 0 0 4px rgba(248,95,141,0.12);
}

.upload-review-card textarea,
.photo-edit-card textarea {
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  resize: vertical;
  max-height: 28dvh;
  user-select: text;
  -webkit-user-select: text;
}

.photo-edit-card [hidden] {
  display: none !important;
}

.photo-folder-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}

.photo-folder-picker[hidden] {
  display: none !important;
}

.photo-folder-picker::-webkit-scrollbar {
  display: none;
}

.photo-folder-option {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,208,223,0.62);
  color: #6e3b7d;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75);
}

.photo-folder-option.active {
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
  box-shadow: 0 10px 22px rgba(201,47,100,0.24);
}

.upload-review-actions,
.album-review-actions,
.photo-edit-actions {
  display: grid;
  gap: 10px;
}

.upload-review-actions button,
.album-review-actions button,
.photo-edit-actions button {
  position: relative;
  z-index: 2;
  min-height: 46px;
  border-radius: 15px;
  background: rgba(255,208,223,0.64);
  color: #6e3b7d;
  font-weight: 900;
  pointer-events: auto;
  touch-action: manipulation;
}

.upload-review-actions button:first-child {
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
}

.album-review-actions button:first-child {
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
}

.album-review-actions .danger {
  background: linear-gradient(135deg, #f85f8d, #c92f64);
  color: #fff;
}

.photo-edit-actions button:first-child {
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
}

.gallery-status {
  min-height: 28px;
  margin: 16px 0 12px;
  color: var(--rose-dark);
  font-weight: 900;
  text-align: center;
}

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

.photo-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 18px;
  background: rgba(255,255,255,0.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
  cursor: grab;
  isolation: isolate;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.photo-card:focus {
  outline: none;
}

.photo-card:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(248,95,141,0.72), 0 12px 24px rgba(201,47,100,0.18);
}

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

.photo-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: opacity 180ms ease, transform 220ms ease, filter 220ms ease;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.photo-card.photo-ready img {
  opacity: 1;
}

.photo-image-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #f1eef2;
  color: #735566;
  pointer-events: none;
}

.photo-image-placeholder[hidden] {
  display: none;
}

.photo-loading .photo-image-placeholder::before {
  content: "";
  width: 28px;
  height: 28px;
  border: 3px solid rgba(115,85,102,0.16);
  border-top-color: #c92f64;
  border-radius: 50%;
  animation: galleryPhotoLoading 900ms linear infinite;
}

.photo-load-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

@keyframes galleryPhotoLoading {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .photo-loading .photo-image-placeholder::before {
    animation: none;
  }

  .photo-card img {
    transition: none;
  }
}

.photo-card span,
.photo-card em,
.photo-quick-preview,
.photo-selection-toggle {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

.photo-quick-preview {
  left: 50%;
  bottom: 44px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
  box-shadow: 0 12px 24px rgba(83,48,66,0.22);
  transform: translate(-50%, 10px) scale(0.94);
  white-space: nowrap;
}

.photo-selection-toggle {
  z-index: 4;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
  box-shadow: 0 10px 20px rgba(83,48,66,0.2);
  transform: translateY(-8px) scale(0.92);
  pointer-events: none;
}

.photo-card span {
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(83,48,66,0.74);
  color: #fff;
}

.photo-card em {
  top: 8px;
  left: 8px;
  right: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #6e3b7d;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(180deg, rgba(83,48,66,0.04), rgba(83,48,66,0.34));
  transition: opacity 180ms ease;
  pointer-events: none;
}

.photo-card:hover img,
.photo-card:active img,
.photo-card.show-details img,
.photo-card.quick-open img {
  transform: scale(1.05);
  filter: saturate(1.07);
}

.photo-card:hover::after,
.photo-card:active::after,
.photo-card.show-details::after,
.photo-card.quick-open::after {
  opacity: 1;
}

.photo-card:hover span,
.photo-card:hover em,
.photo-card:active span,
.photo-card:active em,
.photo-card.show-details span,
.photo-card.show-details em,
.photo-card.quick-open span,
.photo-card.quick-open em,
.photo-card.quick-open .photo-quick-preview {
  opacity: 1;
  transform: translateY(0);
}

.photo-card.show-details span,
.photo-card.show-details em,
.photo-card.quick-open .photo-quick-preview {
  transition-duration: 80ms;
}

.photo-card.quick-open .photo-quick-preview {
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.photo-card.selected {
  box-shadow: inset 0 0 0 4px rgba(248,95,141,0.92), 0 16px 32px rgba(201,47,100,0.26);
  touch-action: none;
  cursor: grabbing;
}

.photo-card.selected .photo-selection-toggle {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.photo-card.tap-feedback,
.photo-menu-card button.tap-feedback,
.folder-chip.tap-feedback {
  animation: tapPulse 220ms ease both;
}

.empty-gallery {
  grid-column: 1 / -1;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,0.62);
  color: #7a4252;
  font-weight: 900;
  text-align: center;
}

.phone-nav {
  position: absolute;
  z-index: 12;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 58px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 22px;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 -10px 30px rgba(122,66,82,0.12);
  backdrop-filter: blur(20px);
}

.phone-nav button {
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  color: #6e3b7d;
  font-size: 1.65rem;
  font-weight: 900;
}

.photo-menu {
  position: absolute;
  z-index: 34;
  inset: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(83,48,66,0.18);
  backdrop-filter: blur(4px);
}

.photo-menu[hidden] {
  display: none !important;
}

.photo-menu-card {
  display: grid;
  gap: 10px;
  width: min(100%, 360px);
  max-height: calc(100% - 36px);
  overflow: auto;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 22px 60px rgba(83,48,66,0.22);
  transform: translateX(0);
  animation: previewPop 180ms ease both;
}

.photo-menu-card strong {
  color: var(--rose-dark);
  font-size: 1.05rem;
}

.photo-menu-card button {
  min-height: 46px;
  border-radius: 15px;
  background: rgba(255,208,223,0.64);
  color: #6e3b7d;
  font-weight: 900;
  transition: transform 120ms ease, filter 120ms ease;
}

.photo-menu-card button:active {
  transform: scale(0.97);
  filter: saturate(1.1);
}

.photo-menu-card .danger {
  background: linear-gradient(135deg, #f85f8d, #c92f64);
  color: #fff;
}

.photo-menu-card button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.notification-panel {
  position: absolute;
  z-index: 45;
  inset: 0;
  display: flex;
  align-items: start;
  justify-content: center;
  padding: 10px;
  background: rgba(83,48,66,0.16);
  backdrop-filter: blur(10px);
}

.notification-panel[hidden] {
  display: none !important;
}

.notification-sheet {
  width: 100%;
  max-height: min(78%, 580px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 14px 12px 16px;
  border-radius: 0 0 28px 28px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 24px 60px rgba(83,48,66,0.22);
  transform: translateY(-105%);
  transition: transform 220ms ease;
}

.notification-panel.open .notification-sheet {
  transform: translateY(0);
}

.notification-grip {
  justify-self: center;
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: rgba(110,59,125,0.35);
}

.notification-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-heading strong {
  color: var(--rose-dark);
  font-size: 1.22rem;
}

.notification-clear-all {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--purple));
  color: white;
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(218,52,109,0.22);
}

.notification-clear-all[hidden] {
  display: none !important;
}

.notification-list {
  display: grid;
  gap: 8px;
}

.notification-item {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 12px 44px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,224,237,0.88), rgba(232,248,255,0.82));
  color: #5b3448;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75);
}

.notification-item b {
  color: var(--rose-dark);
}

.notification-item span,
.notification-item em {
  font-size: 0.88rem;
  font-style: normal;
}

.notification-settings {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.76);
}

.notification-remove {
  display: none;
  min-height: 38px;
  margin-top: 8px;
  border-radius: 14px;
  background: rgba(255,208,223,0.72);
  color: #6e3b7d;
  font-weight: 900;
}

.notification-item.options-open .notification-remove {
  display: block;
}

.notification-empty {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  color: #7a4252;
  font-weight: 900;
}

.photo-preview {
  position: fixed;
  z-index: 31;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(11,8,16,0.48);
  backdrop-filter: blur(4px);
}

.photo-preview[hidden] {
  display: none !important;
}

.photo-preview-card {
  position: relative;
  width: min(100%, 420px);
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
  animation: previewPop 180ms ease both;
}

.photo-preview-stage {
  position: relative;
  width: 100%;
  height: min(66vh, 560px);
  display: block;
  min-width: 0;
  overflow: auto;
  border-radius: 20px;
  background: transparent;
  touch-action: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.photo-preview-stage::-webkit-scrollbar {
  display: none;
}

.photo-preview-stage.zoomed {
  cursor: grab;
}

.photo-preview-stage.panning {
  cursor: grabbing;
}

.photo-preview-info {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 6px 8px;
  border-radius: 16px;
  background: rgba(0,0,0,0.04);
  box-shadow: none;
  backdrop-filter: none;
  max-height: 35%;
  overflow: auto;
  pointer-events: auto;
  touch-action: pan-y;
  transition: opacity 140ms ease, transform 140ms ease;
}

.photo-preview-stage.zoomed .photo-preview-info {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.photo-preview-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.photo-preview-card img.zoomed {
  cursor: zoom-out;
}

.photo-zoom-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 0;
  color: #7a4252;
  font-size: 0.8rem;
  font-weight: 900;
}

.photo-zoom-control input {
  width: 100%;
  accent-color: #d73376;
}

.photo-zoom-control output {
  min-width: 42px;
  text-align: right;
}

.photo-preview-card strong {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: #fff4fa;
  text-shadow: 0 2px 8px rgba(0,0,0,0.82), 0 0 2px rgba(0,0,0,0.9);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.05;
}

.photo-preview-card span {
  color: rgba(255,244,250,0.84);
  text-shadow: 0 2px 8px rgba(0,0,0,0.82), 0 0 2px rgba(0,0,0,0.9);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
}

#closePhotoPreviewButton {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  z-index: 3;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--rose-dark);
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(83,48,66,0.18);
}

.download-photo-button {
  position: absolute;
  top: 14px;
  right: 56px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f85f8d, #8562d8);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(83,48,66,0.18);
}

.download-photo-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#phoneHomeButton::before {
  content: "";
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: #6e3b7d;
}

body[data-theme="dark"] .sky {
  background:
    radial-gradient(circle at 16% 12%, rgba(255,122,165,0.16), transparent 22%),
    radial-gradient(circle at 82% 8%, rgba(97,203,180,0.14), transparent 24%);
}

body[data-theme="dark"] .moon {
  background: #e0d2ff;
  box-shadow: 0 0 42px rgba(179,154,255,0.34);
}

body[data-theme="dark"] .moon::after {
  background: #211322;
}

body[data-theme="dark"] .star,
body[data-theme="dark"] .star::before,
body[data-theme="dark"] .star::after {
  background: rgba(255,244,250,0.86);
  box-shadow: 0 0 16px rgba(255,244,250,0.54);
}

body[data-theme="dark"] .status-bar {
  color: rgba(255,244,250,0.9);
  background: linear-gradient(180deg, rgba(6,4,10,0.68), rgba(6,4,10,0.42));
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] .phone-app-header h2,
body[data-theme="dark"] .app-icon strong,
body[data-theme="dark"] .folder-chip,
body[data-theme="dark"] .view-all-link.active,
body[data-theme="dark"] .settings-button.plain,
body[data-theme="dark"] .theme-switch button,
body[data-theme="dark"] .photo-menu-card button,
body[data-theme="dark"] .upload-review-actions button,
body[data-theme="dark"] .album-review-actions button,
body[data-theme="dark"] .photo-edit-actions button {
  color: #fff4fa;
}

body[data-theme="dark"] h1 {
  text-shadow: 0 8px 0 rgba(0,0,0,0.22);
}

body[data-theme="dark"] .eyebrow,
body[data-theme="dark"] .question-kicker,
body[data-theme="dark"] .gallery-status,
body[data-theme="dark"] .settings-panel strong,
body[data-theme="dark"] .settings-drop summary,
body[data-theme="dark"] .photo-menu-card strong,
body[data-theme="dark"] .upload-review-card strong,
body[data-theme="dark"] .album-review-card strong,
body[data-theme="dark"] .wallpaper-card strong,
body[data-theme="dark"] .photo-preview-card strong,
body[data-theme="dark"] .slider-readout,
body[data-theme="dark"] .reaction {
  color: #ff91b8;
}

body[data-theme="dark"] .cover-text,
body[data-theme="dark"] .question-copy,
body[data-theme="dark"] #finalMessage,
body[data-theme="dark"] .progress-label,
body[data-theme="dark"] .reply-label,
body[data-theme="dark"] .draw-head span,
body[data-theme="dark"] .save-status,
body[data-theme="dark"] .photo-preview-card span,
body[data-theme="dark"] .album-count {
  color: rgba(255,244,250,0.78);
}

body[data-theme="dark"] .phone {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), transparent 32%),
    #120d18;
  box-shadow: 0 28px 80px rgba(0,0,0,0.54), inset 0 0 0 2px rgba(255,255,255,0.11);
}

body[data-theme="dark"] .phone::before {
  border-color: rgba(255,255,255,0.12);
}

body[data-theme="dark"] .phone-speaker {
  background: rgba(255,244,250,0.22);
}

body[data-theme="dark"] .phone-heart,
body[data-theme="dark"] .mini-illustration,
body[data-theme="dark"] .final-badge {
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,122,165,0.22));
  box-shadow: 0 18px 42px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.14);
}

body[data-theme="dark"] .phone-top-back {
  background: rgba(255,255,255,0.11);
  color: #ff91b8;
  box-shadow: inset 0 0 0 1px rgba(255,145,184,0.26), 0 12px 28px rgba(0,0,0,0.24);
}

body[data-theme="dark"] .app-icon,
body[data-theme="dark"] .settings-panel,
body[data-theme="dark"] .reply-card,
body[data-theme="dark"] .slider-box,
body[data-theme="dark"] .folder-chip,
body[data-theme="dark"] .photo-card,
body[data-theme="dark"] .empty-gallery,
body[data-theme="dark"] .save-status {
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 14px 32px rgba(0,0,0,0.24);
}

body[data-theme="dark"] .app-icon {
  backdrop-filter: blur(14px);
}

body[data-theme="dark"] .app-icon:hover,
body[data-theme="dark"] .app-icon:focus-visible {
  outline-color: rgba(255,145,184,0.36);
  box-shadow: inset 0 0 0 1px rgba(255,145,184,0.32), 0 18px 36px rgba(0,0,0,0.32);
}

body[data-theme="dark"] .gallery-icon span {
  background: linear-gradient(135deg, #4ecbb5, #7d72ff);
}

body[data-theme="dark"] .love-icon span {
  background: linear-gradient(135deg, #ff6f9f, #d93d78);
}

body[data-theme="dark"] .settings-icon span {
  background: linear-gradient(135deg, #9b7cff, #4ecbb5);
}

body[data-theme="dark"] .gallery-button,
body[data-theme="dark"] .settings-button,
body[data-theme="dark"] .theme-switch button.active,
body[data-theme="dark"] .upload-review-actions button:first-child,
body[data-theme="dark"] .album-review-actions button:first-child,
body[data-theme="dark"] .photo-edit-actions button:first-child,
body[data-theme="dark"] .love-button,
body[data-theme="dark"] .answer-button,
body[data-theme="dark"] .send-reply-button,
body[data-theme="dark"] .restart-button,
body[data-theme="dark"] .photo-quick-preview {
  background: linear-gradient(135deg, #ff6f9f, #7d72ff);
  box-shadow: 0 14px 28px rgba(0,0,0,0.28), 0 0 22px rgba(255,111,159,0.16);
  color: #fff;
}

body[data-theme="dark"] .camera-label,
body[data-theme="dark"] .settings-button.soft,
body[data-theme="dark"] .answer-button[data-kind="sweet"] {
  background: linear-gradient(135deg, #4ecbb5, #7d72ff);
}

body[data-theme="dark"] .album-button,
body[data-theme="dark"] .settings-button.plain,
body[data-theme="dark"] .settings-drop summary::after,
body[data-theme="dark"] .theme-switch button,
body[data-theme="dark"] .photo-menu-card button,
body[data-theme="dark"] .upload-review-actions button,
body[data-theme="dark"] .album-review-actions button,
body[data-theme="dark"] .photo-edit-actions button,
body[data-theme="dark"] .wallpaper-albums button,
body[data-theme="dark"] #closeWallpaperPickerButton,
body[data-theme="dark"] #closePhotoPreviewButton {
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

body[data-theme="dark"] .view-all-link {
  background: transparent;
  box-shadow: none;
  color: #ff91b8;
}

body[data-theme="dark"] .folder-chip.active,
body[data-theme="dark"] .folder-chip.drag-over {
  background: linear-gradient(145deg, rgba(255,111,159,0.18), rgba(125,114,255,0.16));
  color: #fff4fa;
  box-shadow: inset 0 0 0 2px rgba(255,145,184,0.54), 0 18px 36px rgba(0,0,0,0.28);
}

body[data-theme="dark"] .album-thumbs {
  background: linear-gradient(135deg, rgba(255,111,159,0.18), rgba(78,203,181,0.14));
}

body[data-theme="dark"] .album-thumb-placeholder,
body[data-theme="dark"] .wallpaper-option,
body[data-theme="dark"] .empty-wallpaper {
  background: rgba(255,255,255,0.08);
  color: rgba(255,244,250,0.52);
}

body[data-theme="dark"] .photo-image-placeholder {
  background: #29262e;
  color: #e5dce2;
}

body[data-theme="dark"] .photo-loading .photo-image-placeholder::before {
  border-color: rgba(229,220,226,0.18);
  border-top-color: #ff91b8;
}

body[data-theme="dark"] .photo-card em {
  background: rgba(31,23,36,0.82);
  color: #fff4fa;
}

body[data-theme="dark"] .photo-card span {
  background: rgba(17,13,23,0.78);
  color: rgba(255,244,250,0.92);
}

body[data-theme="dark"] .photo-card::after {
  background: linear-gradient(180deg, rgba(17,13,23,0.08), rgba(17,13,23,0.52));
}

body[data-theme="dark"] .photo-card.selected {
  box-shadow: inset 0 0 0 4px rgba(255,145,184,0.92), 0 18px 36px rgba(0,0,0,0.32);
}

body[data-theme="dark"] .photo-menu,
body[data-theme="dark"] .photo-preview,
body[data-theme="dark"] .upload-review,
body[data-theme="dark"] .album-review,
body[data-theme="dark"] .photo-edit-review,
body[data-theme="dark"] .wallpaper-review,
body[data-theme="dark"] .notification-panel {
  background: rgba(11,8,16,0.64);
  backdrop-filter: blur(10px);
}

body[data-theme="dark"] .photo-menu-card,
body[data-theme="dark"] .photo-preview-card,
body[data-theme="dark"] .upload-review-card,
body[data-theme="dark"] .album-review-card,
body[data-theme="dark"] .photo-edit-card,
body[data-theme="dark"] .wallpaper-card,
body[data-theme="dark"] .notification-sheet,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .question-card {
  background: rgba(36,26,42,0.94);
  box-shadow: 0 28px 70px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.1);
}

body[data-theme="dark"] .notification-item {
  background: linear-gradient(135deg, rgba(50,40,64,0.95), rgba(23,42,51,0.9));
  color: #f6d9e8;
}

body[data-theme="dark"] .notification-item button,
body[data-theme="dark"] .notification-empty {
  background: rgba(255,255,255,0.1);
  color: #f8c6dc;
}

body[data-theme="dark"] .notification-clear-all {
  background: linear-gradient(135deg, #f25a8a, #7b4fd8);
  color: #fff7fb;
}

body[data-theme="dark"] .photo-preview-card img,
body[data-theme="dark"] .upload-review-card img {
  background: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .photo-preview {
  background: rgba(11,8,16,0.52);
  backdrop-filter: blur(4px);
}

body[data-theme="dark"] .photo-preview-card,
body[data-theme="dark"] .photo-preview-stage,
body[data-theme="dark"] .photo-preview-card img {
  background: transparent;
  box-shadow: none;
}

body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .upload-review-card input,
body[data-theme="dark"] .album-review-card input,
body[data-theme="dark"] .photo-edit-card input,
body[data-theme="dark"] #replyText {
  border-color: rgba(255,145,184,0.26);
  background: rgba(255,255,255,0.08);
  color: #fff4fa;
}

body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: rgba(255,244,250,0.45);
}

body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] .upload-review-card input:focus,
body[data-theme="dark"] .album-review-card input:focus,
body[data-theme="dark"] .photo-edit-card input:focus,
body[data-theme="dark"] #replyText:focus {
  border-color: rgba(255,145,184,0.82);
  box-shadow: 0 0 0 4px rgba(255,145,184,0.16);
}

body[data-theme="dark"] .photo-folder-option {
  background: rgba(255,255,255,0.1);
  color: #f8c6dc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

body[data-theme="dark"] .photo-folder-option.active {
  background: linear-gradient(135deg, #f25a8a, #7b4fd8);
  color: #fff7fb;
}

body[data-theme="dark"] #loveCanvas {
  border-color: rgba(255,145,184,0.36);
  background:
    radial-gradient(circle at 16% 18%, rgba(255,111,159,0.18) 0 7%, transparent 8%),
    radial-gradient(circle at 86% 78%, rgba(78,203,181,0.16) 0 8%, transparent 9%),
    rgba(255,255,255,0.08);
}

body[data-theme="dark"] .progress-track {
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 7px rgba(0,0,0,0.28);
}

body[data-theme="dark"] .progress-bar {
  background: linear-gradient(90deg, #ff6f9f, #e7c66d, #4ecbb5);
}

body[data-theme="dark"] .toast {
  background: rgba(22,16,28,0.94);
  box-shadow: 0 16px 38px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.1);
}

body[data-theme="dark"] .wallpaper-albums button.active {
  background: linear-gradient(135deg, #ff6f9f, #7d72ff);
  color: #fff;
}

@keyframes phoneViewIn {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes previewPop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tapPulse {
  50% {
    transform: scale(0.96);
  }
}

@media (max-width: 680px) {
  body {
    overflow: hidden;
  }

  .photo-menu,
  .photo-preview,
  .photo-edit-review,
  .upload-review,
  .album-review,
  .wallpaper-review,
  .notification-panel,
  body[data-theme="dark"] .photo-menu,
  body[data-theme="dark"] .photo-preview,
  body[data-theme="dark"] .photo-edit-review,
  body[data-theme="dark"] .upload-review,
  body[data-theme="dark"] .album-review,
  body[data-theme="dark"] .wallpaper-review,
  body[data-theme="dark"] .notification-panel {
    backdrop-filter: none;
  }

  .phone-stage {
    padding: 0;
  }

  .phone {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .phone::before,
  .phone::after,
  .phone-speaker {
    display: none;
  }

  .phone-screen {
    border-radius: 0;
  }

  .status-bar {
    padding: 0 max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right));
  }

  .photo-menu {
    position: fixed;
    inset: 0;
    align-items: end;
    justify-content: center;
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .photo-menu-card {
    width: min(100%, 360px);
    margin-inline: auto;
    border-radius: 22px;
  }

  .upload-review {
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .upload-review-card {
    width: 100%;
    border-radius: 22px;
  }

  .album-review {
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .album-review-card {
    width: 100%;
    border-radius: 22px;
  }

  .photo-edit-review {
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .photo-edit-card {
    width: 100%;
    border-radius: 22px;
  }

  .photo-preview {
    position: fixed;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .photo-preview-card {
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .photo-preview-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    border-radius: 20px;
    background: transparent;
  }

  .photo-preview-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .photo-zoom-control {
    flex: 0 0 auto;
    color: #fff4fa;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  }

  .photo-preview-card strong,
  .photo-preview-card span {
    flex: 0 0 auto;
    color: #fff4fa;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  }

  #closePhotoPreviewButton,
  .download-photo-button {
    right: max(12px, env(safe-area-inset-right));
  }

  #closePhotoPreviewButton {
    top: max(12px, env(safe-area-inset-top));
  }

  .download-photo-button {
    top: max(12px, env(safe-area-inset-top));
    right: calc(max(12px, env(safe-area-inset-right)) + 42px);
  }

  .wallpaper-review {
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .wallpaper-card {
    width: 100%;
    border-radius: 22px;
  }

  .phone-view {
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 22px;
  }

  .phone-app-header {
    position: relative;
    top: auto;
  }

  .phone-top-back {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    box-shadow: inset 0 0 0 2px rgba(248,95,141,0.2), 0 12px 28px rgba(201,47,100,0.15);
  }

  .phone-nav {
    display: none;
  }

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

  .app-icon {
    min-height: 96px;
    padding: 10px 6px;
  }

  .app-icon span {
    width: 54px;
    height: 54px;
  }

  .home-art {
    height: 78px;
    margin-top: 0;
  }

  .phone-heart {
    width: 64px;
    height: 64px;
    border-radius: 21px;
    font-size: 2.15rem;
  }

  .gallery-actions {
    grid-template-columns: 1fr 1fr;
  }

  .phone-app-header h2 {
    font-size: clamp(1.35rem, 7vw, 1.9rem);
  }

  .phone-app-header .eyebrow {
    font-size: 0.66rem;
  }

  .album-button {
    grid-column: 1 / -1;
    min-height: 42px;
  }

  .gallery-fields {
    grid-template-columns: 1fr;
  }
}