:root {
  font-family: "Noto Sans SC Variable", system-ui, sans-serif;
  color: #172320;
  background: #dfe8e3;
  --ink: #172320;
  --sub: #52635d;
  --accent: #238689;
  --glass: #ffffff9e;
  --edge: #ffffff86;
  --line: #d7e3dd;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; overflow-x: clip; }
body { display: grid; place-items: center; min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Match the editor's 430 x 932 phone stage and its width-only scale. */
.stage {
  position: relative;
  width: 430px;
  height: 932px;
  flex: none;
  border-radius: 63px;
  background: #070708;
  box-shadow: 0 20px 46px #07151040;
}
.stage::before, .stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: #070708;
  box-shadow: inset 0 1px #ffffff24;
}
.stage::before {
  top: 229px;
  left: -6px;
  width: 6px;
  height: 42px;
  border-radius: 4px 0 0 4px;
  box-shadow: 0 62px #070708, 0 126px #070708, inset 0 1px #ffffff24;
}
.stage::after {
  top: 282px;
  right: -7px;
  width: 7px;
  height: 116px;
  border-radius: 0 5px 5px 0;
}
.phone {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  width: 430px;
  height: 932px;
  overflow: hidden;
  border-radius: 63px;
  background: #070708;
  box-shadow: inset 0 0 0 1px #ffffff26;
  clip-path: inset(0 round 63px);
  isolation: isolate;
  transform-origin: top left;
}
.phone::after {
  content: "";
  position: absolute;
  z-index: 12;
  top: 13px;
  left: 50%;
  width: 114px;
  height: 30px;
  border-radius: 18px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 87% 50%, #242426 0 3px, transparent 3.5px), #050506;
  box-shadow: inset 0 1px #353537;
}
.screen {
  position: absolute;
  inset: 7px;
  overflow: hidden;
  border-radius: 56px;
  background: #d8e2dd;
  clip-path: inset(0 round 56px);
  contain: paint;
}
.review-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #e7eee9 0%, #f3f6f3 48%, #d9e7df 100%);
}
.status {
  position: absolute;
  z-index: 4;
  top: 15px;
  left: 50px;
  right: 50px;
  display: flex;
  justify-content: space-between;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.review-top {
  position: absolute;
  z-index: 5;
  top: 59px;
  left: 22px;
  right: 22px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand strong, .brand-mark { font-size: 26px; font-weight: 800; font-style: italic; }
.review-label, .eyebrow {
  color: var(--sub);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.auth-shell {
  position: absolute;
  inset: 125px 20px 55px;
  display: flex;
  align-items: center;
}
.auth-card {
  width: 100%;
  padding: 33px 25px 27px;
  border: 1px solid var(--edge);
  border-radius: 24px;
  background: var(--glass);
  box-shadow: 0 16px 36px #0a29241c, inset 0 1px 0 #ffffffa8;
  backdrop-filter: blur(22px) saturate(118%);
}
.auth-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.auth-card h1 { margin: 14px 0 9px; font-size: 34px; line-height: 1.15; }
.auth-lead { margin: 0 0 30px; color: var(--sub); font-size: 14px; }
.auth-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin: -12px 0 22px; padding: 3px; border: 1px solid #9db6a880; border-radius: 10px; background: #dce9e199; }
.auth-modes button { height: 38px; border: 0; border-radius: 7px; background: transparent; color: var(--sub); font-size: 13px; font-weight: 700; }
.auth-modes button.selected { background: #fff; color: var(--ink); box-shadow: 0 1px 5px #0a29241a; }
.auth-card form { display: grid; gap: 15px; }
.auth-card label { display: grid; gap: 7px; color: var(--sub); font-size: 12px; font-weight: 700; }
.auth-card input {
  width: 100%;
  height: 49px;
  padding: 0 14px;
  border: 1px solid #738e8170;
  border-radius: 10px;
  background: #ffffffc9;
  color: var(--ink);
}
.auth-card input::placeholder { color: #899690; }
.auth-hint { margin: -5px 0 0; color: var(--sub); font-size: 11px; line-height: 1.5; }
.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 49px;
  margin-top: 6px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 19px #155b5940;
}
.primary span { font-size: 19px; }
.primary:disabled { opacity: .55; cursor: wait; }
.error { min-height: 20px; margin: 0; color: #9b3d45; font-size: 12px; line-height: 1.4; }
.success-panel { display: grid; gap: 15px; }
.success-panel h2 { margin: 0; font-size: 25px; }
.success-panel p { margin: 0; color: var(--sub); font-size: 13px; }
.success-panel .primary { width: 100%; }
.secondary {
  width: 100%;
  min-height: 44px;
  border: 1px solid #64827670;
  border-radius: 10px;
  background: #ffffff82;
  color: var(--ink);
}

.head-brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 650; }
.slash { color: #9aa9a3; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .avatar-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink);
  box-shadow: 0 6px 18px #061c171a, inset 0 1px 0 #ffffff62;
  backdrop-filter: blur(20px);
}
.icon-button { font-size: 20px; }
.back-editor svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.avatar-button { overflow: hidden; }
.avatar-button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-shell { position: absolute; inset: 0; overflow: hidden; }
.gallery-intro {
  position: absolute;
  top: 132px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.gallery-intro > div:first-child { min-width: 0; }
.gallery-intro h1 {
  max-width: 245px;
  margin: 6px 0 3px;
  font-size: 24px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.gallery-intro p { margin: 0; color: var(--sub); font-size: 12px; }

.floating-view {
  position: absolute;
  inset: 235px 0 25px;
  overflow: hidden;
  touch-action: none;
}
.gallery-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  aspect-ratio: 1 / 1.24;
  padding: 0;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 13px;
  background: #dce6df;
  box-shadow: 0 17px 30px #203d3439;
  touch-action: none;
}
.floating-view .gallery-card {
  animation: floatY 8s ease-in-out infinite alternate;
  will-change: transform, translate;
}
.floating-view .gallery-card:nth-child(2n) { animation-delay: -3s; animation-duration: 9s; }
.floating-view .gallery-card:nth-child(3n) { animation-delay: -1s; animation-duration: 7s; }
.gallery-card:hover { z-index: 4; box-shadow: 0 23px 40px #203d3450; }
.gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.card-label { display: none; }
@keyframes floatY { from { translate: 0 0; } to { translate: 0 -16px; } }

.stamp-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tracker-controls {
  position: absolute;
  z-index: 4;
  top: 213px;
  left: 50%;
  display: flex;
  width: 216px;
  height: 38px;
  gap: 1px;
  padding: 3px;
  border: 1px solid #ffffff9e;
  border-radius: 22px;
  background: #ffffff8c;
  box-shadow: 0 5px 18px #18362a14, inset 0 1px #fff;
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
.tracker-controls button {
  flex: 1;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--sub);
  font-size: 13px;
  font-weight: 500;
  text-transform: capitalize;
  transition: color .2s, background .2s;
}
.tracker-controls button.selected { background: #fff; color: var(--ink); box-shadow: 0 2px 7px #18362a1f; }
.tracker-view { position: absolute; inset: 262px 0 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.stamp-deck { position: relative; width: 100%; height: 568px; touch-action: pan-y; outline: none; }
.stamp-deck:focus-visible .stamp-card[aria-hidden="false"] { outline: 2px solid var(--accent); outline-offset: 3px; }
.stamp-card {
  position: absolute;
  top: 54px;
  right: 29px;
  left: 29px;
  height: 506px;
  padding: 24px;
  overflow: hidden;
  border-radius: 36px;
  background: var(--stamp-bg);
  color: var(--stamp-ink);
  box-shadow: 0 18px 38px #263c3150;
  font-family: Arial, system-ui, sans-serif;
  transform-origin: 50% 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
  will-change: transform;
}
.stamp-card.day { height: 540px; }
.stamp-texture { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; }
.stamp-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.stamp-head strong, .stamp-head span { display: block; font-size: 25px; font-weight: 650; line-height: 1.15; }
.stamp-head span { opacity: .82; }
.stamp-icon {
  position: absolute;
  z-index: 1;
  top: 190px;
  right: 45px;
  width: 35px;
  height: 35px;
  background: var(--stamp-mark);
  -webkit-mask: url('./assets/photo-film-music.svg') center/contain no-repeat;
  mask: url('./assets/photo-film-music.svg') center/contain no-repeat;
  opacity: .8;
  transform: rotate(11deg);
}
.stamp-card.day .stamp-icon { display: none; }
.stamp-card.month .stamp-icon { top: 125px; right: 32px; width: 24px; height: 24px; }
.stamp-photos { position: absolute; inset: 106px 22px 94px; }
.stamp-card.day .stamp-photos { inset: 88px 22px 164px; }
.stamp-card.month .stamp-photos { bottom: 245px; }
.stamp-photo.gallery-card {
  position: absolute;
  width: 120px;
  height: 150px;
  aspect-ratio: auto;
  padding: 0;
  border: 6px solid #fcfbf5;
  border-bottom-width: 16px;
  border-radius: 3px;
  background: #f7f8f3;
  box-shadow: 0 11px 19px #1d171543;
  animation: none;
  touch-action: pan-y;
}
.stamp-photo.gallery-card:hover { box-shadow: 0 15px 22px #1d171555; }
.stamp-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.stamp-card.day .hero-photo {
  top: 48%;
  left: 50%;
  width: 204px;
  height: 264px;
  transform: translate(-50%,-50%) rotate(var(--photo-rotate));
}
.day-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--stamp-ink);
}
.day-empty-weekday { font-size: 22px; font-weight: 600; line-height: 1.1; }
.day-empty-icon {
  display: block;
  width: 150px;
  height: 150px;
  background: var(--stamp-mark);
  -webkit-mask: url('./assets/photo-film-music.svg') center / contain no-repeat;
  mask: url('./assets/photo-film-music.svg') center / contain no-repeat;
}
.stamp-card.week .stamp-photo:nth-child(1) { top: 24%; left: 2%; transform: rotate(-7deg); }
.stamp-card.week .stamp-photo:nth-child(2) { top: 5%; left: 35%; transform: rotate(5deg); }
.stamp-card.week .stamp-photo:nth-child(3) { top: 42%; left: 60%; transform: rotate(9deg); }
.stamp-card.week .stamp-photo:nth-child(n+4) { top: 35%; left: 27%; transform: rotate(-4deg); }
.stamp-card.month .stamp-photo.gallery-card { width: 89px; height: 112px; border-width: 4px 4px 12px; }
.stamp-card.month .stamp-photo:nth-child(1) { top: 25%; left: 4%; transform: rotate(-7deg); }
.stamp-card.month .stamp-photo:nth-child(2) { top: 0; left: 35%; transform: rotate(5deg); }
.stamp-card.month .stamp-photo:nth-child(3) { top: 25%; left: 66%; transform: rotate(9deg); }
.stamp-card.month .stamp-photo:nth-child(n+4) { top: 8%; left: 30%; transform: rotate(-4deg); }
.stamp-empty { position: absolute; inset: 44% 10% auto; margin: 0; color: var(--stamp-ink); font-size: 13px; text-align: center; opacity: .7; }
.stamp-footer { position: absolute; right: 24px; bottom: 24px; left: 24px; display: grid; gap: 9px; }
.stamp-weekdays, .stamp-dates { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); align-items: center; gap: 4px; text-align: center; }
.stamp-weekdays span { font-size: 14px; font-weight: 500; line-height: 20px; }
.stamp-weekdays span.today { color: var(--stamp-mark); font-weight: 700; }
.date-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  justify-self: center;
  border: 1.5px solid var(--stamp-ink);
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--stamp-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.date-cell:is(button) { cursor: pointer; }
.date-cell:is(button):focus-visible { outline: 2px solid var(--stamp-mark); outline-offset: 3px; }
@keyframes stamp-fleck {
  0% { opacity: 0; transform: rotate(var(--angle)) translateY(var(--fleck-start)); }
  35% { opacity: .85; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(var(--fleck-end)); }
}
.date-cell.today:not(.stamped) { border-width: 2px; font-weight: 700; }
.date-cell.stamped { border-color: transparent; font-size: 0; }
.stamp-mark {
  position: absolute;
  inset: 0;
  display: block;
  width: 34px;
  height: 34px;
  background: var(--stamp-mark);
  -webkit-mask: url('./assets/photo-film-music.svg') center/contain no-repeat;
  mask: url('./assets/photo-film-music.svg') center/contain no-repeat;
  transform: rotate(-8deg);
}
.stamp-mark.fresh { animation: stamp-land .48s cubic-bezier(.3,0,.2,1) both; }
.stamp-fleck {
  --fleck-start: -22px;
  --fleck-end: -32px;
  position: absolute;
  left: 15px;
  top: 15px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--stamp-mark);
  pointer-events: none;
  animation: stamp-fleck .5s .1s ease-out both;
}
@keyframes stamp-land {
  0% { opacity: 0; transform: rotate(-8deg) scale(1.3); }
  48% { opacity: 1; transform: rotate(-8deg) scale(.9); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
.date-cell.blank { border: 0; }
.month-footer { gap: 6px; }
.month-footer .stamp-weekdays span { font-size: 11px; line-height: 16px; }
.month-dates { row-gap: 5px; }
.month-dates .date-cell { width: 28px; height: 28px; font-size: 11px; }
.month-dates .date-cell.stamped { font-size: 0; }
.month-dates .stamp-mark { width: 28px; height: 28px; }
.stamp-colors { display: flex; justify-content: center; gap: 13px; padding: 6px 0; }
.tracker-view > .stamp-colors { position: relative; z-index: 5; margin-top: 12px; padding-bottom: 18px; }
.stamp-colors button { width: 23px; height: 23px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px #1a302833; }
.stamp-colors button.selected { outline: 2px solid var(--accent); outline-offset: 3px; }
.empty { position: absolute; top: 310px; left: 22px; right: 22px; color: var(--sub); font-size: 13px; text-align: center; }
.stamp-error { position: absolute; right: 22px; bottom: 6px; left: 22px; margin: 0; color: #9b3d45; font-size: 11px; text-align: center; }

.viewer {
  position: absolute;
  z-index: 8;
  inset: 47px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 0 20px 24px;
  background: #eaf1eced;
  color: var(--ink);
  backdrop-filter: blur(24px) saturate(118%);
}
.viewer-top {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  flex: none;
  font-size: 16px;
}
.close-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink);
  font-size: 23px;
  line-height: 1;
}
.viewer-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 520px;
  flex: none;
  overflow: hidden;
  border: 1px solid #ffffff9c;
  border-radius: 18px;
  background: #dfe9e3;
  box-shadow: 0 16px 28px #09241c36;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.viewer-media img, .viewer-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.viewer-media video { display: none; }
.viewer-media.playing img { visibility: hidden; }
.viewer-media.playing video { display: block; }
.viewer-media span {
  position: absolute;
  bottom: 15px;
  left: 50%;
  padding: 6px 10px;
  border-radius: 8px;
  background: #172320b8;
  color: #fff;
  font-size: 11px;
  transform: translateX(-50%);
  pointer-events: none;
}
.viewer-media.playing span { display: none; }
.viewer-media .play-preview {
  position: absolute;
  right: 13px;
  bottom: 13px;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  padding-left: 3px;
  border: 1px solid #ffffffa0;
  border-radius: 50%;
  background: #172320be;
  color: #fff;
  font-size: 18px;
}
.viewer-media.playing .play-preview { display: none; }
.playback-error { width: 100%; margin: 10px 0 0; color: #9b3d45; font-size: 12px; }
.viewer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 21px 1px 12px;
}
.viewer-meta h2 { margin: 7px 0 3px; font-size: 19px; }
.viewer-meta p { margin: 0; color: var(--sub); font-size: 12px; }
.download-button {
  flex: none;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.viewer-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; width: 100%; margin-top: auto; padding-top: 8px; }
.disabled-edit, .delete-button { min-height: 44px; border-radius: 10px; }
.disabled-edit {
  border: 1px solid var(--line);
  background: #dfe8e3;
  color: #87948e;
  cursor: not-allowed;
}
.delete-button { padding: 0 16px; border: 1px solid #d9b5b2; background: #fff5f3; color: #9c4f4a; }

@media (max-width: 600px) {
  body { place-items: start center; }
  .stage, .phone, .screen { border-radius: 0; box-shadow: none; clip-path: none; }
  .stage::before, .stage::after, .phone::after, .status { display: none; }
  .screen { inset: 0; }
  .viewer { inset: 0; }
  .viewer-actions { margin-top: 20px; }
  .review-top { top: 18px; }
  .auth-shell { inset: 86px 20px 20px; overflow-y: auto; align-items: safe center; }
  .gallery-intro { top: 92px; }
  .floating-view { top: 195px; }
  .tracker-controls { top: 173px; }
  .tracker-view { top: 222px; }
  .empty { top: 270px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-card { animation: none; }
  .stamp-card { transition: none; }
  .stamp-mark { animation: none; }
  .stamp-fleck { animation: none; }
  .tracker-controls button { transition: none; }
}