:root {
  color-scheme: light;
  --ink: #51484f;
  --muted: #8d8188;
  --cream: #fbf5f0;
  --paper: rgba(255, 255, 255, 0.72);
  --rose: #efb7c3;
  --peach: #f4c9ad;
  --yellow: #f4dda6;
  --mint: #badbc9;
  --blue: #b9d4e6;
  --lilac: #cbbfe0;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--cream); }
button, input, textarea { font: inherit; }
button {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.entrance,
.screen {
  transform-origin: 50% 35%;
  animation: soft-open .75s cubic-bezier(.2, .65, .25, 1) both;
}

@keyframes soft-open {
  from { opacity: 0; transform: translateY(8px) scale(.975); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.entrance {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.2rem;
  padding: 2rem;
  background:
    radial-gradient(circle at 20% 15%, rgba(239,183,195,.22), transparent 28%),
    radial-gradient(circle at 80% 82%, rgba(185,212,230,.24), transparent 30%),
    var(--cream);
}

.rainbow-button {
  width: min(78vw, 390px);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 14px 24px rgba(103, 87, 96, .12));
  transition: transform .38s ease;
}
.rainbow-button:active { transform: scale(.97); }
.rainbow { display: block; width: 100%; height: auto; border-radius: 24px; mix-blend-mode: multiply; }
.brand { margin: 0; font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 400; letter-spacing: .02em; text-align: center; }

.screen { min-height: 100vh; padding: max(1.2rem, env(safe-area-inset-top)) 1.2rem max(2rem, env(safe-area-inset-bottom)); }
.topbar { max-width: 760px; margin: 0 auto 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar h1 { margin: 0; font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 400; }
.top-actions { display: flex; align-items: center; gap: .65rem; }
.sign-out {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .9rem;
  padding: .65rem .45rem;
  cursor: pointer;
  transition: color .32s ease, background-color .32s ease, transform .32s ease;
}
.sign-out:active { background: rgba(255,255,255,.55); transform: scale(.96); }
.icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 3rem;
  border: 0;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: rgba(255,255,255,.76);
  box-shadow: 0 6px 20px rgba(82,67,77,.08);
  cursor: pointer;
  transition: transform .34s ease, box-shadow .34s ease, background-color .34s ease;
}
.icon-button svg { display: block; width: 1.45rem; height: 1.45rem; overflow: visible; }
.icon-button path { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; }
.icon-button:active { transform: scale(.92); box-shadow: 0 3px 12px rgba(82,67,77,.07); background: rgba(255,255,255,.9); }

.gallery { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.name-card {
  min-height: 7rem;
  border: 0;
  border-radius: 28px;
  padding: 1rem;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(82,67,77,.065);
  transition: transform .36s cubic-bezier(.2,.65,.25,1), box-shadow .36s ease, filter .36s ease;
}
.name-card:active { transform: scale(.955); box-shadow: 0 3px 12px rgba(82,67,77,.055); filter: brightness(1.025); }
.name-card:nth-child(6n+1) { background: #fabcb9; }
.name-card:nth-child(6n+2) { background: #fac28b; }
.name-card:nth-child(6n+3) { background: #fde2a9; }
.name-card:nth-child(6n+4) { background: #e0ddb3; }
.name-card:nth-child(6n+5) { background: #c5d9e4; }
.name-card:nth-child(6n) { background: #dab9d5; }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 5rem 1rem; line-height: 1.6; }
.gallery-footer { max-width: 760px; margin: 2.2rem auto 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .15rem; text-align: center; }
.footer-button { border: 0; border-radius: 999px; background: none; color: var(--muted); padding: .7rem; cursor: pointer; transition: color .32s ease, background-color .32s ease; }
.footer-button:active { background: rgba(255,255,255,.55); }
.footer-dot { color: rgba(141,129,136,.55); }

.page { max-width: 680px; margin: 0 auto; }
.back { border: 0; border-radius: 999px; background: none; padding: .6rem .75rem; margin: 0 0 1rem -.75rem; color: var(--muted); cursor: pointer; transition: background-color .32s ease, transform .32s ease; }
.back:active { background: rgba(255,255,255,.55); transform: scale(.97); }
.memorial h1 { font-size: clamp(2.4rem, 11vw, 4rem); font-weight: 400; margin: 1rem 0 .4rem; }
.date { color: var(--muted); margin-bottom: 2.5rem; }
.note { white-space: pre-wrap; font-size: 1.08rem; line-height: 1.7; }
.memorial h1 + .note { margin-top: 2rem; }
.actions { display: flex; gap: .7rem; margin-top: 3rem; }
.soft-button { border: 0; border-radius: 999px; padding: .75rem 1.2rem; background: #eee5e6; cursor: pointer; box-shadow: 0 4px 14px rgba(82,67,77,.055); transition: transform .32s ease, box-shadow .32s ease, filter .32s ease; }
.soft-button:active { transform: scale(.96); box-shadow: 0 2px 8px rgba(82,67,77,.045); filter: brightness(1.025); }
.danger { color: #985b66; }
.danger-save { background: #e8c5ca; }
.form-delete { justify-self: center; border: 0; background: none; color: #985b66; padding: .7rem 1rem; margin-top: .3rem; cursor: pointer; }
.delete-card > p:not(.error), .trash-heading p { color: var(--muted); line-height: 1.55; }
.trash-heading h1 { font-size: 2.2rem; font-weight: 400; margin: .5rem 0; }
.removed-list { display: grid; gap: .8rem; margin-top: 2rem; }
.removed-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 18px; padding: 1rem 1.1rem; background: var(--paper); }

.form { display: grid; gap: 1.15rem; }
.form h1 { font-size: 2.2rem; font-weight: 400; margin: .5rem 0 1rem; }
label { display: grid; gap: .45rem; color: var(--muted); }
input, textarea { width: 100%; border: 1px solid rgba(81,72,79,.15); border-radius: 16px; padding: .95rem 1rem; background: rgba(255,255,255,.76); color: var(--ink); outline: none; }
input:focus, textarea:focus { border-color: var(--lilac); box-shadow: 0 0 0 3px rgba(203,191,224,.25); }
textarea { min-height: 15rem; resize: vertical; line-height: 1.55; }
.date-row { display: grid; grid-template-columns: 1fr .65fr; gap: .8rem; }
.save { border: 0; border-radius: 999px; padding: 1rem 1.4rem; background: var(--lilac); cursor: pointer; margin-top: .5rem; box-shadow: 0 6px 18px rgba(82,67,77,.07); transition: transform .32s ease, box-shadow .32s ease, filter .32s ease; }
.save:active { transform: scale(.975); box-shadow: 0 2px 9px rgba(82,67,77,.05); filter: brightness(1.025); }
.error { color: #985b66; min-height: 1.2rem; margin: 0; }
.login-card { width: min(86vw, 360px); display: grid; gap: 1rem; justify-items: stretch; }
.login-card .brand { font-size: 2.3rem; margin-bottom: .8rem; }
.login-icon { width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: 26px; justify-self: center; box-shadow: 0 8px 24px rgba(82,67,77,.12); }
.settings-page > h1 { font-size: 2.2rem; font-weight: 400; margin: .5rem 0 1.5rem; }
.settings-card { border-radius: 26px; padding: 1.35rem; background: rgba(255,255,255,.58); box-shadow: 0 8px 24px rgba(82,67,77,.055); }
.settings-card h2 { margin: 0 0 .45rem; font-size: 1.35rem; font-weight: 400; }
.settings-card p { margin: 0 0 1.4rem; color: var(--muted); line-height: 1.55; }
.download-backup { display: inline-block; text-decoration: none; }

@media (min-width: 620px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: hover) {
  .icon-button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(82,67,77,.1); }
  .name-card:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 12px 28px rgba(82,67,77,.085); }
  .sign-out:hover, .back:hover, .footer-button:hover { background: rgba(255,255,255,.5); color: var(--ink); }
}

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