:root{
  --bg1:#fff0f6; --bg2:#ffe3ee; --bg3:#ffd6e7;
  --primary:#ff5b93; --primary-600:#ff3b7f; --primary-700:#e02e71;
  --accent:#ffb3c7; --ink:#2d1b24; --muted:#7a6470;
  --card: rgba(255,255,255,.78); --glass: rgba(255,255,255,.55);
  --shadow-lg: 0 30px 70px rgba(255, 91, 147, .22), 0 10px 30px rgba(20, 6, 12, .1);
  --shadow-md: 0 16px 40px rgba(255, 91, 147, .16), 0 6px 18px rgba(20, 6, 12, .08);
  --radius-xl: 24px; --timing: cubic-bezier(.2,.8,.2,1); --timing-spring:cubic-bezier(.18,.89,.32,1.28);
  --ring: 0 0 0 6px rgba(255,91,147,.15), 0 0 0 12px rgba(255,91,147,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background: radial-gradient(1400px 900px at -10% -20%, var(--bg3), transparent 60%),
              radial-gradient(1300px 900px at 120% 0%, var(--bg2), transparent 60%),
              radial-gradient(1300px 900px at 50% 120%, var(--bg1), #fff 60%);
  overflow-x:hidden; min-height:100%; position:relative;
  --mesh1:#ffd0e2; --mesh2:#ffe7f1; --mesh3:#ffdce9;
}
body.no-scroll{ overflow:hidden; }
body::before{
  content:""; position:fixed; inset:-10% -10% -10% -10%; z-index:-2;
  background: radial-gradient(40% 30% at 10% 10%, var(--mesh1), transparent 60%),
              radial-gradient(30% 40% at 90% 20%, var(--mesh2), transparent 60%),
              radial-gradient(30% 45% at 50% 90%, var(--mesh3), transparent 60%);
  filter: blur(40px) saturate(1.05); animation: blob 28s ease-in-out infinite alternate;
}
@keyframes blob{ 0%{transform: translate3d(0,0,0) scale(1)} 50%{transform: translate3d(0,-2%,0) scale(1.02)} 100%{transform: translate3d(0,1%,0) scale(1.03)} }
body[data-role="viewer"] [data-admin]{ display:none !important }
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.sr-only{ position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.gate{ position:fixed; inset:0; display:grid; place-items:center; background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255, 231, 242, .85)); z-index:50; transition: opacity .6s var(--timing), transform .6s var(--timing); backdrop-filter: blur(8px) }
.gate.hide{ opacity:0; transform: scale(.98) translateY(-4px); pointer-events:none }
.gate-card{ width:min(760px,92vw); padding:32px 28px 26px; border-radius:calc(var(--radius-xl) + 4px); box-shadow: var(--shadow-lg); position:relative; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7)) padding-box, conic-gradient(from 180deg at 50% 50%, #ffc5d9, #fff, #ffc5d9) border-box; border: 1px solid transparent }
.brand{ font-size:clamp(30px, 4vw, 46px); font-weight:900; letter-spacing:.2px; margin:8px 0 10px; background: linear-gradient(90deg, var(--primary-700), var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 1px 0 rgba(255,255,255,.4) }
.subtitle{color:var(--muted); margin-top:0}
.gate-input{ display:flex; gap:10px; margin:18px auto 10px; width:min(560px, 92%)}
.gate-input input{ flex:1; padding:14px 16px; border-radius:14px; border:2px solid #ffd6e7; outline:none; font-size:16px; background:#fff; transition:border-color .2s var(--timing), box-shadow .2s var(--timing) }
.gate-input input:focus{ border-color: var(--primary); box-shadow: var(--ring) }
.btn{ position:relative; overflow:hidden; appearance:none; border:none; cursor:pointer; background:linear-gradient(180deg, var(--primary), var(--primary-600)); color:#fff; padding:14px 18px; border-radius:14px; font-weight:800; box-shadow: var(--shadow-md); transition: transform .18s var(--timing-spring), filter .18s, box-shadow .18s; will-change: transform }
.btn:hover{ transform: translateY(-1px) scale(1.01); filter:saturate(1.05) brightness(1.02) }
.btn:active{ transform: translateY(0) scale(.99) }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:2px solid #ffd6e7; background:#fff; border-radius:999px; font-weight:800; color:#b04b73; box-shadow: 0 6px 16px rgba(255, 91, 147, .12) }
.ghost{ background:#fff; color:#8a5468 }
.danger{ background:#fff5f8; border-color:#ffc4d7; color:#b3004b }
.hint{ font-size:12px; color:#866b78; margin-top:10px }
.error{ color:#b3004b; margin-top:10px; font-weight:800; min-height:1.2em }
.hearts{ position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:.35; transition:opacity .9s ease; z-index:0; }
.gate.unlocking .hearts{ opacity:1; }
.heart{ position:absolute; width:18px; height:18px; transform:rotate(45deg); background: var(--primary); box-shadow: inset 0 -1px 2px rgba(0,0,0,.15); border-radius: 4px 0 4px 0; animation: float var(--heart-duration, 8s) linear forwards }
.heart::before, .heart::after{ content:""; position:absolute; width:18px; height:18px; background:inherit; border-radius:50% }
.heart::before{ left:-9px; top:0 } .heart::after{ top:-9px; left:0 }
@keyframes float{
  0%{ transform: translate3d(0,0,0) rotate(45deg); opacity:.9 }
  100%{ transform: translate3d(var(--heart-drift, 0px), -900px, 0) rotate(45deg); opacity:0 }
}

.locket{ position:absolute; top:20px; right:26px; width:48px; height:64px; pointer-events:none; display:flex; justify-content:center; align-items:flex-start; z-index:1; }
.locket-chain{ position:absolute; top:0; left:50%; width:20px; height:20px; border-radius:50%; border:4px solid rgba(255,152,184,.55); transform:translateX(-50%); box-shadow: 0 0 6px rgba(255,91,147,.25) inset; }
.locket-half{ position:absolute; top:18px; width:24px; height:32px; background: linear-gradient(180deg, #ffd0e2, #ff98b8); box-shadow: inset 0 2px 4px rgba(255,255,255,.6), inset 0 -3px 4px rgba(180,64,110,.35), 0 6px 14px rgba(255,91,147,.25); transition: transform .65s cubic-bezier(.17,.84,.33,1.17), box-shadow .65s; }
.locket-left{ left:0; border-radius:18px 4px 24px 26px; transform-origin:100% 48%; }
.locket-right{ right:0; border-radius:4px 18px 26px 24px; transform-origin:0 48%; }
.locket-heart{ position:absolute; top:30px; left:50%; width:20px; height:18px; background: linear-gradient(180deg, var(--primary-600), var(--primary)); transform:translateX(-50%) rotate(45deg); border-radius:4px 0 6px 0; box-shadow: inset 0 -1px 2px rgba(0,0,0,.15); }
.locket-heart::before, .locket-heart::after{ content:""; position:absolute; width:20px; height:20px; background:inherit; border-radius:50%; top:-10px; }
.locket-heart::before{ left:-10px; } .locket-heart::after{ left:0; }
.gate.unlocking .locket-half{ box-shadow: inset 0 2px 4px rgba(255,255,255,.7), inset 0 -3px 4px rgba(180,64,110,.4), 0 10px 20px rgba(255,91,147,.32); }
.gate.unlocking .locket-left{ transform: rotate(-84deg) translateX(-6px); }
.gate.unlocking .locket-right{ transform: rotate(84deg) translateX(6px); }
header.nav{ position:sticky; top:0; z-index:10; backdrop-filter: blur(12px); background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65)); border-bottom: 1px solid rgba(255,91,147,.15); box-shadow: 0 10px 20px rgba(20, 6, 12, .04) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 24px; max-width:1100px; margin:0 auto }
.logo{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px }
.logo i{ font-style:normal; font-size:22px }
.badge{ display:inline-flex; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; border:1px solid rgba(255, 182, 208, .8); background:#fff; color:#b04b73 }
.nav-actions{ display:flex; gap:10px; flex-wrap:wrap }
.nav-actions a{ text-decoration:none; }
.routeTitle{ font-weight:900; color:#c2255c; letter-spacing:.2px }
main{ padding:22px 24px }
.card{ background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); padding:20px 20px 22px; border: 1px solid rgba(255, 182, 208, .5); position:relative; overflow: clip }
.card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; background: radial-gradient(60% 60% at 10% 0%, rgba(255,160,195,.35), transparent 60%), radial-gradient(50% 60% at 100% 0%, rgba(255,210,230,.35), transparent 60%); z-index:-1; filter: blur(14px) }
.card h2{ margin:4px 0 6px; font-size:22px; letter-spacing:.3px }
.sweet-greeting{
  margin:0 0 12px;
  font-size:20px;
  font-weight:800;
  color:#c2255c;
  letter-spacing:.32px;
}
.floating-hearts{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
  opacity:0;
  transition: opacity 1.2s ease;
}
.floating-hearts.show{
  opacity:.45;
}
.floating-hearts[hidden]{
  display:none;
}
.floating-hearts::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 20%, rgba(255,166,213,.16), transparent 60%),
             radial-gradient(circle at 85% 30%, rgba(255,190,230,.12), transparent 60%),
             radial-gradient(circle at 50% 80%, rgba(254,210,240,.15), transparent 65%);
}
.floating-hearts .hearts{
  position:absolute;
  inset:0;
}
.map-card{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.map-header{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.map-header h2{
  margin:0;
}
.map-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.78);
  border:1px dashed rgba(255,182,208,.55);
  box-shadow:0 16px 32px rgba(255,91,147,.12);
}
.map-form-note{
  margin:0;
  font-size:13px;
  color:#8f6d7c;
  line-height:1.45;
}
.map-form-note-selected{
  font-weight:600;
  color:#3f7fb6;
  display:flex;
  align-items:center;
  gap:6px;
}
.map-form-note-selected::before{
  content:"💫";
  font-size:14px;
}
.map-form h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:#b04b73;
}
.map-form .input{
  width:100%;
}
.map-hint{
  font-size:12px;
  color:#8f6d7c;
  margin:0;
}
.map-status{
  background:linear-gradient(180deg, rgba(255,240,248,.92), rgba(255,214,235,.78));
  border:1px solid rgba(255,182,208,.6);
  border-radius:16px;
  padding:10px 14px;
  margin-bottom:14px;
  color:#b04b73;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  box-shadow:0 12px 28px rgba(255,91,147,.16);
}
.map-status-text{
  flex:1 1 auto;
}
.map-status[data-tone="warning"]{
  background:linear-gradient(180deg, rgba(255,244,214,.95), rgba(255,226,187,.82));
  border-color:rgba(255,194,120,.6);
  color:#c06a1f;
}
.map-status[data-tone="success"]{
  background:linear-gradient(180deg, rgba(219,249,232,.94), rgba(189,239,214,.82));
  border-color:rgba(112,210,158,.52);
  color:#36835d;
}
.map-status button{
  border:none;
  background:transparent;
  color:inherit;
  font-weight:600;
  cursor:pointer;
  text-decoration:underline;
  padding:4px 8px;
  border-radius:10px;
}
.map-body{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap:20px;
}
.map-canvas{
  height:520px;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 48px rgba(255,91,147,.18);
  background:linear-gradient(180deg,#fde9f4,#fef4fb);
}
.map-canvas .leaflet-container{
  width:100%;
  height:100%;
}
.map-memory{
  background:rgba(255,255,255,.86);
  border-radius:24px;
  padding:18px 20px;
  box-shadow:0 20px 48px rgba(255,91,147,.18);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.map-country-list{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,182,208,.45);
  border-radius:18px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 12px 28px rgba(255,91,147,.12);
}
.map-country-list h3{
  margin:0;
  font-size:16px;
  color:#b04b73;
  font-weight:800;
}
.map-country-items{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:180px;
  overflow:auto;
}
.map-country-item{
  margin:0;
}
.map-country-button{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(176,80,116,.18);
  background:linear-gradient(180deg, rgba(255,236,247,.88), rgba(255,215,235,.6));
  color:#a34b73;
  font-weight:600;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.map-country-button:hover,
.map-country-button:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(190,84,132,.24);
  border-color:rgba(176,80,116,.34);
  outline:none;
}
.map-country-button .map-country-name{
  flex:1 1 auto;
  text-align:left;
}
.map-country-button .map-country-meta{
  font-size:12px;
  color:#8f6d7c;
}
.map-country-item.active .map-country-button{
  border-color:rgba(74,140,206,.55);
  box-shadow:0 14px 28px rgba(90,160,220,.22);
  color:#2f6ca3;
}
.map-country-list-hint{
  margin:0;
  font-size:12px;
  color:#8f6d7c;
}
.map-city-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.map-city-item{
  margin:0;
}
.map-city-button{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(176,80,116,.16);
  background:linear-gradient(180deg, rgba(255,240,246,.9), rgba(255,222,238,.65));
  color:#a34b73;
  font-weight:600;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.map-city-button:hover,
.map-city-button:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 20px rgba(186,96,142,.2);
  border-color:rgba(176,80,116,.3);
  outline:none;
}
.map-city-name{
  text-align:left;
  flex:1 1 auto;
}
.map-city-meta-text{
  font-size:12px;
  color:#8f6d7c;
}
.map-city-item.active .map-city-button{
  border-color:rgba(226,104,162,.55);
  box-shadow:0 14px 26px rgba(226,104,162,.24);
  color:#b63f80;
}
.bucket-card{
  padding:0;
}
.bucket-card .bucket-panel{
  border:1px dashed rgba(255,182,208,.6);
  border-radius:18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,242,248,.82));
  box-shadow:0 12px 28px rgba(255,91,147,.14);
}
.bucket-panel h2{
  margin:0;
  font-size:20px;
  color:#b04b73;
  letter-spacing:.2px;
}
.bucket-panel h3{
  margin:0;
  font-size:18px;
  color:#b04b73;
  letter-spacing:.2px;
}
.bucket-desc{
  margin:0;
  font-size:13px;
  color:#8a6b78;
}
.bucket-groups{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
.bucket-group h4{
  margin:0 0 8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#b86286;
}
.bucket-items{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bucket-items-empty{
  margin:0;
  font-size:12px;
  color:#8a6b78;
}
.bucket-item{
  border-radius:16px;
  border:1px solid rgba(176,80,116,.16);
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,240,246,.92), rgba(255,222,238,.7));
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bucket-item.done{
  background:linear-gradient(180deg, rgba(230,255,241,.92), rgba(210,248,229,.7));
  border-color:rgba(74,160,110,.24);
}
.bucket-item.active{
  transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(120,120,220,.22);
}
.bucket-item-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.bucket-focus{
  flex:1 1 auto;
  text-align:left;
  background:none;
  border:none;
  padding:0;
  font-size:16px;
  font-weight:700;
  color:#8b3a63;
  cursor:pointer;
}
.bucket-item.done .bucket-focus{
  color:#3a7b4f;
}
.bucket-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  border:1px solid rgba(176,80,116,.2);
  background-color:#fff;
  color:#b04b73;
}
.bucket-item.done .bucket-pill{
  border-color:rgba(74,160,110,.32);
  color:#2f7b4d;
}
.bucket-note{
  margin:0;
  font-size:13px;
  color:#7a5d6b;
  white-space:pre-wrap;
}
.bucket-item.done .bucket-note{
  color:#356a4c;
}
.bucket-item-meta{
  margin:0;
  font-size:12px;
  color:#8a6b78;
}
.bucket-item.done .bucket-item-meta{
  color:#356a4c;
}
.bucket-activities{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#704a5a;
  font-size:13px;
}
.bucket-item.done .bucket-activities{
  color:#356a4c;
}
.bucket-item-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.bucket-item-actions button{
  border-radius:999px;
  border:1px solid rgba(176,80,116,.24);
  background:#fff;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  color:#934366;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.bucket-item.done .bucket-item-actions button:not(.danger){
  border-color:rgba(74,160,110,.24);
  color:#2f7b4d;
}
.bucket-item-actions button:hover,
.bucket-item-actions button:focus-visible{
  background:rgba(255, 226, 240, .7);
  transform:translateY(-1px);
  outline:none;
}
.bucket-pin-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.bucket-pin-status{
  font-size:12px;
  color:#8a6b78;
}
.bucket-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.bucket-form .btn{
  flex:1 1 auto;
}
.bucket-form .pill.ghost{
  border-style:dashed;
}
.bucket-hint{
  margin:0;
  font-size:12px;
  color:#8a6b78;
}
body[data-role="viewer"] .bucket-hint{
  display:none;
}
.bucket-context-menu{
  position:fixed;
  z-index:95;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(230,112,160,.4);
  border-radius:12px;
  box-shadow:0 18px 36px rgba(40,16,36,.22);
  display:flex;
  flex-direction:column;
  min-width:160px;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.bucket-context-menu[hidden]{
  display:none;
}
.bucket-context-menu button{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:none;
  background:transparent;
  font-weight:600;
  color:#a34b73;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
  text-align:left;
}
.bucket-context-menu button:hover,
.bucket-context-menu button:focus-visible{
  background:rgba(255,220,238,.65);
  color:#8b3f62;
  outline:none;
}
.bucket-context-menu button.danger{
  color:#d43d6d;
}
.bucket-context-menu button.danger:hover,
.bucket-context-menu button.danger:focus-visible{
  background:rgba(255,211,222,.75);
  color:#b42047;
}

@media (min-width:760px){
  .bucket-groups{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.map-menu{
  position:fixed;
  z-index:90;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(230,112,160,.4);
  border-radius:14px;
  box-shadow:0 20px 38px rgba(40,16,36,.22);
  display:flex;
  flex-direction:column;
  min-width:160px;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.map-menu[hidden]{
  display:none;
}
.map-menu button{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:none;
  background:transparent;
  font-weight:600;
  color:#a34b73;
  cursor:pointer;
  transition:background .16s ease, color .16s ease;
  text-align:left;
}
.map-menu button:hover,
.map-menu button:focus-visible{
  background:rgba(255,220,238,.65);
  color:#8b3f62;
  outline:none;
}
.map-menu button.danger{
  color:#d43d6d;
}
.map-menu button.danger:hover,
.map-menu button.danger:focus-visible{
  background:rgba(255,211,222,.75);
  color:#b42047;
}
.map-breadcrumb{
  display:flex;
  justify-content:flex-start;
}
.map-memory-content{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.map-empty{
  margin:0;
  color:#8f6d7c;
}
.map-city-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.map-city-meta h3{
  margin:0;
  font-size:20px;
  color:#b03a76;
}
.map-city-meta .map-city-dates{
  font-size:13px;
  color:#9e6f85;
  letter-spacing:.28px;
  text-transform:uppercase;
}
.map-note{
  background:rgba(255,246,251,.9);
  border-radius:16px;
  padding:14px;
  color:#74495d;
  box-shadow:0 12px 24px rgba(255,91,147,.12);
}
.map-photos{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
}
.map-photo{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 14px 24px rgba(20,6,12,.12);
}
.map-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.map-admin-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.map-admin-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.map-admin-actions .btn,
.map-admin-actions .pill{
  align-self:flex-start;
}
.map-photo-delete{
  position:absolute;
  top:8px;
  right:8px;
  border:none;
  background:rgba(255,255,255,.9);
  border-radius:999px;
  padding:4px 8px;
  font-weight:700;
  color:#bc3d7f;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}
.map-photo-delete:hover{
  background:#fff;
}
.map-pin{
  position:relative;
  width:34px !important;
  height:60px !important;
  background:transparent !important;
  border:none !important;
  pointer-events:auto !important;
}
.map-pin::after{
  content:"";
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:8px;
  border-radius:50%;
  background:rgba(27,5,36,.18);
  filter:blur(6px);
  opacity:.55;
  transition:opacity .2s ease;
}
.map-pin .pin-body{
  position:absolute;
  left:0;
  top:4px;
  width:100%;
  height:34px;
  border-radius:18px 18px 14px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 26px rgba(40,26,68,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.map-pin .pin-body::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 20%, rgba(255,255,255,.7), transparent 65%);
  opacity:.45;
  pointer-events:none;
}
.map-pin .pin-glyph{
  font-size:16px;
  color:#fff;
  text-shadow:0 3px 8px rgba(0,0,0,.28);
}
.map-pin .pin-needle{
  position:absolute;
  top:34px;
  left:50%;
  width:6px;
  height:24px;
  transform:translateX(-50%);
  border-radius:4px;
  box-shadow:0 8px 16px rgba(34,22,60,.2);
  transition:transform .18s ease;
}
.map-pin-country .pin-body{
  background:linear-gradient(180deg, #d6f0ff, #7ec2f6);
  border:1px solid rgba(111,177,228,.45);
}
.map-pin-country .pin-glyph{
  font-size:15px;
}
.map-pin-country .pin-needle{
  background:linear-gradient(180deg, rgba(136,197,245,.92), rgba(69,144,209,.9));
}
.map-pin-city{
  width:30px !important;
  height:54px !important;
}
.map-pin-city .pin-body{
  top:6px;
  height:30px;
  background:linear-gradient(180deg, #ffe0f2, #ff9ed0);
  border:1px solid rgba(255,150,209,.55);
}
.map-pin-city .pin-glyph{
  font-size:14px;
}
.map-pin-city .pin-needle{
  background:linear-gradient(180deg, rgba(255,178,218,.95), rgba(228,104,162,.9));
  top:32px;
  height:22px;
}
.map-pin-bucket{
  width:30px !important;
  height:56px !important;
}
.map-pin-bucket .pin-body{
  top:6px;
  height:30px;
  border:1px solid rgba(154,94,188,.4);
}
.map-pin-bucket .pin-needle{
  top:32px;
  height:22px;
  background:linear-gradient(180deg, rgba(170,120,210,.85), rgba(120,70,180,.85));
}
.map-pin-bucket .pin-glyph{
  font-size:14px;
}
.map-pin-bucket-dream .pin-body{
  background:linear-gradient(180deg, #ede4ff, #b998ff);
  border-color:rgba(154,94,188,.55);
}
.map-pin-bucket-dream .pin-needle{
  background:linear-gradient(180deg, rgba(182,132,236,.9), rgba(124,80,196,.9));
}
.map-pin-bucket-done .pin-body{
  background:linear-gradient(180deg, #e4ffee, #9be7bb);
  border-color:rgba(74,160,110,.45);
}
.map-pin-bucket-done .pin-needle{
  background:linear-gradient(180deg, rgba(136,210,170,.92), rgba(66,150,98,.9));
}
.map-pin-active .pin-body{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 18px 30px rgba(214,78,150,.22);
}
.map-pin-active::after{
  opacity:.75;
}
.map-pin:hover .pin-body{
  transform:translateY(-2px);
  box-shadow:0 16px 28px rgba(132,86,168,.22);
}
.map-pin:hover .pin-needle{
  transform:translateX(-50%) translateY(-1px);
}
.desc{ margin:0 0 14px; color:#80606f }
.anniversary-counter{
  display:none;
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,182,208,.6);
  color:#c2255c;
  font-weight:800;
  letter-spacing:.3px;
  box-shadow:0 20px 40px rgba(255,91,147,.16);
  text-align:center;
}
.anniversary-counter.show{ display:block; }
.anniversary-admin{
  margin:0 0 20px;
  padding:16px 20px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  border:1px dashed rgba(255,182,208,.62);
  box-shadow:0 24px 40px rgba(255,91,147,.14);
}
.anniversary-label{
  display:block;
  font-weight:800;
  color:#b04b73;
  letter-spacing:.2px;
}
.anniversary-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.anniversary-input{
  max-width:210px;
}
.anniversary-hint{
  margin:12px 0 0;
  font-size:13px;
  color:#8f6d7c;
}
.feature-settings{
  margin:24px 0;
  padding:20px;
  background:#fff;
  border:2px solid #ffd6e7;
  border-radius:20px;
  box-shadow: var(--shadow-md);
}
.feature-settings-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
  color:#b04b73;
}
.feature-settings-hint{
  margin:0 0 16px;
  font-size:13px;
  color:#8f6d7c;
}
.feature-toggles{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.feature-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  font-size:16px;
  color:#5a3c49;
}
.feature-checkbox{
  width:20px;
  height:20px;
  cursor:pointer;
  accent-color:var(--primary);
}
.feature-label{
  user-select:none;
}
body[data-role="viewer"] .home-tile[data-feature-disabled="true"]{
  display:none;
}
.input, textarea, .input-like{ width:100%; border:2px solid #ffd6e7; background:#fff; border-radius:14px; padding:12px 14px; outline:none; font-size:16px; transition:border-color .2s var(--timing), box-shadow .2s var(--timing) }
textarea{ min-height:220px; resize:vertical }
.input:focus, textarea:focus{ border-color:var(--primary); box-shadow: var(--ring) }
.section-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 6px }
.save-indicator{ font-size:12px; color:#8f6d7c; margin-left:6px }
.home-grid{ display:grid; gap:18px; justify-content:center; justify-items:stretch; grid-template-columns: repeat(var(--home-grid-columns, 4), minmax(220px, 1fr)); max-width:1120px; margin:0 auto; }
.home-grid--cols-1{ --home-grid-columns: 1; }
.home-grid--cols-2{ --home-grid-columns: 2; }
.home-grid--cols-3{ --home-grid-columns: 3; }
.home-grid--cols-4{ --home-grid-columns: 4; }
.home-tile{ text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:30px 20px; background:#fff; border:2px solid #ffd6e7; border-radius:26px; box-shadow: var(--shadow-md); color:#b04b73; font-weight:900; font-size:18px; transition: transform .25s var(--timing-spring), box-shadow .25s, border-color .2s; will-change: transform }
.home-tile:hover{ transform: translateY(-4px) scale(1.02); border-color: var(--primary); box-shadow: 0 26px 56px rgba(255,91,147,.22) }
.home-emoji{ font-size:44px; transform: translateZ(0); transition: transform .25s var(--timing-spring) }
.home-tile:hover .home-emoji{ transform: scale(1.1) rotate(-2deg) }
.preview{ white-space:pre-wrap; line-height:1.6; font-size:18px; padding:14px; border-radius:14px; background:#fff; border:2px dashed #ffd6e7; color:#5a3c49 }
.love-tools{ display:flex; gap:8px; flex-wrap:wrap }
.love-display{ display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.love-parchment{ position:relative; width:100%; padding:38px 42px; border-radius:32px; background:linear-gradient(180deg,#fdf6e6,#f7e7c8); box-shadow: 0 30px 60px rgba(189,150,111,.22), 0 18px 36px rgba(82,44,19,.16); border:1px solid rgba(139,103,64,.26); overflow:hidden }
.love-parchment::before{ content:""; position:absolute; inset:18px 20px; border-radius:22px; background:repeating-linear-gradient(180deg, rgba(210,188,142,.28) 0 28px, rgba(255,255,255,0) 28px 56px); opacity:.35; pointer-events:none }
.love-parchment::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.65), rgba(255,255,255,0)); pointer-events:none }
.love-content{ position:relative; font-family:\"Cormorant Garamond\", \"Times New Roman\", serif; font-size:20px; line-height:1.9; color:#5b3f2d; min-height:220px; white-space:pre-wrap; z-index:1 }
.love-content[data-empty=\"true\"]{ color:#a5896a; font-style:italic }
.love-reading-tools{ display:flex; gap:10px; flex-wrap:wrap }
.love-reading-tools .pill.active{ background: linear-gradient(180deg, #ffe5f0, #ffd1e5); border-color:#ffb8d5; color:#b0306c; box-shadow: 0 10px 18px rgba(255,91,147,.24) }
.doodle{ position:absolute; font-size:26px; color:rgba(208,153,102,.28); pointer-events:none; z-index:0 }
.doodle-top-left{ top:28px; left:34px; transform:rotate(-14deg) }
.doodle-top-right{ top:24px; right:36px; transform:rotate(18deg) }
.doodle-bottom-left{ bottom:34px; left:40px; transform:rotate(6deg); font-size:30px }
.doodle-bottom-right{ bottom:28px; right:42px; transform:rotate(-22deg); font-size:28px }
.wax-seal{ position:absolute; bottom:32px; right:36px; width:82px; height:82px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #ffacc4, #ff6b9a); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow: inset 0 6px 12px rgba(255,255,255,.45), inset 0 -12px 16px rgba(160,40,78,.35), 0 14px 26px rgba(182,66,112,.28); transform: scale(.65) translateY(20px); opacity:0; transition: opacity .35s ease, transform .35s cubic-bezier(.22,1.12,.29,1.02); z-index:2 }
.wax-heart{ font-size:28px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.wax-seal.show{ opacity:1; transform: scale(1) translateY(0); }
.wax-seal.pop{ animation: sealPop .8s cubic-bezier(.2, .9, .32, 1.4); }
@keyframes sealPop{ 0%{ transform: scale(.4) translateY(20px); opacity:0; } 40%{ transform: scale(1.08) translateY(-4px); opacity:1; } 70%{ transform: scale(.95) translateY(0); } 100%{ transform: scale(1) translateY(0); opacity:1; } }
.love-parchment.typewriter-on .love-content{ font-family:\"Courier New\", Monaco, monospace; letter-spacing:.04em; color:#4b2e21 }
.love-parchment.typewriter-on .love-content::after{ content:\"\"; width:2px; height:1.2em; background:#4b2e21; display:inline-block; margin-left:2px; animation: caretBlink 1s steps(2) infinite; vertical-align:bottom }
.love-parchment.typewriter-on .love-content[data-empty=\"true\"]::after{ display:none }
@keyframes caretBlink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
.music-list{ display:flex; gap:18px; overflow-x:auto; padding:12px 6px 8px; scroll-snap-type:x mandatory }
.music-list::-webkit-scrollbar{ height:10px }
.music-list::-webkit-scrollbar-thumb{ background:rgba(255,91,147,.35); border-radius:999px }
.song-chip{
  position:relative;
  flex:0 0 360px;
  scroll-snap-align:center;
  transition: transform .25s var(--timing-spring), box-shadow .25s;
  box-sizing:border-box;
  padding:0;
  border-radius:24px;
  background:transparent;
}
.song-chip:hover{ transform: translateY(-2px); }
.song-widget{
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 24px 48px rgba(255,91,147,.18), 0 12px 24px rgba(20,6,12,.08);
}
.song-widget iframe{
  width:100%;
  min-height:152px;
  border:0;
  display:block;
}
.song-chip-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
.song-chip-actions .pill{
  padding:7px 11px;
  font-size:13px;
}
.now-playing{ background:rgba(255,255,255,.88); border-radius:26px; padding:18px 20px 22px; margin-bottom:18px; border:1px solid rgba(255,182,208,.45); box-shadow:0 22px 48px rgba(255,91,147,.18); display:flex; flex-direction:column; gap:12px }
.now-playing-header{ display:flex; align-items:center; justify-content:space-between; }
.now-playing-badge{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.35px; background:linear-gradient(135deg,#ffe3f3,#ffd0ec); color:#ac3977; padding:6px 10px; border-radius:999px; }
.now-playing-heart{ font-size:20px; color:#ff4f96; animation: heartBeat 1.2s ease-in-out infinite }
@keyframes heartBeat{ 0%,100%{ transform:scale(1); opacity:1 } 40%{ transform:scale(1.18); opacity:.9 } 60%{ transform:scale(.95); opacity:1 } }
.now-playing-meta{ display:flex; flex-direction:column; gap:10px }
.now-playing-info{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px }
.now-playing-title{ font-size:18px; font-weight:800; color:#862d54 }
.now-playing-artist{ font-size:13px; color:#b36a88; letter-spacing:.22px }
.now-playing-progress{ display:flex; align-items:center; gap:12px }
#nowPlayingFrame{ overflow:hidden; border:0; display:block; }
.progress-track{ position:relative; flex:1; height:6px; border-radius:999px; background:rgba(255,182,208,.35); overflow:hidden }
.progress-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(135deg,#ff87c0,#ff4f96); border-radius:inherit; transition: width .25s ease }
.progress-time{ font-size:12px; color:#a27388; min-width:38px; text-align:right }
.notes-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); perspective:800px; align-items:start; margin-top:36px; }
.note-item{ position:relative; display:flex; flex-direction:column; padding:22px 24px 28px; background:#fff9dc; border-radius:18px; box-shadow: 0 20px 36px rgba(255,143,186,.18), 0 6px 18px rgba(20,6,12,.08); transform: rotate(calc(var(--tilt,0) * 1deg)); transform-origin:center top; transition: transform .28s var(--timing), box-shadow .28s var(--timing); }
.note-item::after{ content:""; position:absolute; inset:14px 16px 16px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events:none; opacity:.55 }
.note-item:hover{ transform: rotate(calc(var(--tilt,0) * 0.6deg)) translateY(-6px); box-shadow: 0 28px 44px rgba(255,143,186,.24), 0 10px 22px rgba(20,6,12,.12) }
.note-stamp{ font-size:12px; color:#8f6d7c; font-weight:700; letter-spacing:.2px; text-transform:uppercase }
.note-text{ margin:14px 0 18px; white-space:pre-wrap; font-size:15px; line-height:1.6; color:#5a3c49 }
.note-reactions{ display:flex; gap:10px; flex-wrap:wrap }
.reaction-btn{ display:inline-flex; align-items:center; gap:6px; border:none; background:rgba(255,255,255,.82); border-radius:999px; padding:7px 12px; font-weight:700; color:#b04b73; cursor:pointer; box-shadow: 0 6px 14px rgba(255,91,147,.18); transition: transform .18s var(--timing), box-shadow .18s }
.reaction-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,91,147,.24) }
.reaction-btn:active{ transform: translateY(0); }
.reaction-btn[disabled]{ opacity:.6; cursor:wait }
.reaction-emoji{ font-size:18px; }
.reaction-count{ min-width:16px; font-size:13px; color:#8c5a6f; text-align:center }
.reaction-count:empty{ display:none }
.note-controls{ display:flex; gap:8px; justify-content:flex-end; margin-top:16px }
.note-tape{ position:absolute; top:-18px; left:50%; width:80px; height:30px; transform: translateX(-50%) rotate(-4deg); border-radius:8px; opacity:.78; box-shadow: 0 8px 16px rgba(20,6,12,.12) }
.tape-rose .note-tape{ background: repeating-linear-gradient(135deg, rgba(255,200,216,.85), rgba(255,200,216,.85) 14px, rgba(255,232,240,.9) 14px, rgba(255,232,240,.9) 28px) }
.tape-mint .note-tape{ background: repeating-linear-gradient(135deg, rgba(192,242,218,.85), rgba(192,242,218,.85) 14px, rgba(228,255,241,.9) 14px, rgba(228,255,241,.9) 28px) }
.tape-sky .note-tape{ background: repeating-linear-gradient(135deg, rgba(196,226,255,.85), rgba(196,226,255,.85) 14px, rgba(230,244,255,.9) 14px, rgba(230,244,255,.9) 28px) }
.tape-lilac .note-tape{ background: repeating-linear-gradient(135deg, rgba(224,200,255,.85), rgba(224,200,255,.85) 14px, rgba(242,230,255,.9) 14px, rgba(242,230,255,.9) 28px) }
.prompt-card{ background:#f4e9ff; box-shadow: 0 26px 40px rgba(189,149,255,.22), 0 10px 24px rgba(20,6,12,.12); transform: rotate(0deg); }
.prompt-card .note-tape{ transform: translateX(-50%) rotate(2deg); }
.prompt-card .prompt-title{ color:#7c4fb8; letter-spacing:.28px }
.prompt-card .prompt-body{ color:#543769; font-size:16px; }
.prompt-card .prompt-shuffle{ margin-top:12px; align-self:flex-start }
.gallery-wall{ position:relative; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:32px; padding:48px 24px 60px; background:radial-gradient(120% 120% at 50% 10%, rgba(22,14,46,.88), rgba(8,5,18,.95)); border-radius:32px; box-shadow:inset 0 0 80px rgba(52,30,76,.55), 0 40px 80px rgba(10,5,20,.45); overflow:hidden }
.gallery-wall::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 10% 20%, rgba(255,176,226,.18), transparent 60%), radial-gradient(circle at 90% 80%, rgba(174,124,255,.16), transparent 70%); z-index:0 }
.gallery-wall::after{ content:""; position:absolute; inset:-40px; background:url('data:image/svg+xml,%3Csvg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="1"%3E%3Ccircle cx="10" cy="10" r="0.8"/%3E%3Ccircle cx="120" cy="40" r="0.6"/%3E%3Ccircle cx="70" cy="120" r="0.7"/%3E%3Ccircle cx="180" cy="80" r="0.8"/%3E%3Ccircle cx="150" cy="160" r="0.6"/%3E%3Ccircle cx="40" cy="180" r="0.7"/%3E%3Ccircle cx="20" cy="120" r="0.5"/%3E%3Ccircle cx="100" cy="180" r="0.5"/%3E%3C/g%3E%3C/svg%3E') repeat; opacity:0.28; animation: starDrift 16s linear infinite; z-index:0; }
.gallery-wall .starlight{ position:absolute; top:-20%; left:-20%; width:140%; height:140%; background:url('data:image/svg+xml,%3Csvg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M26 94 Q54 52 104 74 T184 66 T270 108" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/%3E%3Cpath d="M40 220 Q120 180 206 230 T300 220" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/%3E%3C/svg%3E'); pointer-events:none; animation: constellationShift 24s linear infinite alternate; z-index:1; }
.gallery-wall::before,
.gallery-wall::after,
.gallery-wall .starlight{ pointer-events:none; }
.gallery-sentinel{ width:100%; height:2px; margin-top:-1px; opacity:0; pointer-events:none; }
@keyframes starDrift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(80px,60px,0); } }
@keyframes constellationShift{ from{ transform:translate3d(0,0,0) rotate(0deg); } to{ transform:translate3d(30px,-20px,0) rotate(2deg); } }
.frame-card{ position:relative; background:rgba(255,255,255,.1); border-radius:24px; padding:36px 24px 28px; box-shadow:0 30px 60px rgba(0,0,0,.35); overflow:hidden; border:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; gap:18px; transition: transform .3s ease, box-shadow .3s ease; z-index:2 }
.frame-card::before{ content:""; position:absolute; top:-64px; left:50%; width:6px; height:80px; background:linear-gradient(180deg, rgba(255,203,240,.9), rgba(255,154,212,.3)); transform:translateX(-50%); box-shadow:0 0 14px rgba(255,137,215,.65); border-radius:999px; }
.frame-card::after{ content:""; position:absolute; top:-86px; left:50%; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle, #ffd1f3 0%, #ff7cb7 70%, transparent 71%); border:3px solid rgba(255,255,255,.8); transform:translateX(-50%); box-shadow:0 6px 12px rgba(0,0,0,.25); }
.frame-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 40px 80px rgba(0,0,0,.45); }
.frame-card:hover .frame-photo{ box-shadow:0 18px 40px rgba(0,0,0,.45); }
.frame-photo{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 14px 28px rgba(0,0,0,.4); background:rgba(0,0,0,.5); }
.frame-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame-photo img[data-loaded="false"]{ opacity:0; transform:scale(.96); }
.frame-photo img[data-loaded="true"], .frame-photo img.fade-in{ animation: galleryFade .6s ease forwards; }
@keyframes galleryFade{
  0%{ opacity:0; transform:scale(.96); }
  100%{ opacity:1; transform:scale(1); }
}

.slideshow-frame{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:32px 36px 28px;
  border-radius:32px;
  background:linear-gradient(160deg, rgba(22,12,48,.92), rgba(10,6,24,.94));
  box-shadow:0 40px 80px rgba(0,0,0,.58);
  max-width:min(860px, 92vw);
  width:100%;
  z-index:2;
}
.slideshow-image{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border-radius:24px;
  background:rgba(0,0,0,.35);
  box-shadow: inset 0 0 60px rgba(0,0,0,.32);
}
.slideshow-image img{
  width:100%;
  max-height:calc(70vh - 160px);
  height:auto;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 22px 46px rgba(0,0,0,.48);
}
.slideshow-close{
  position:absolute;
  top:18px;
  right:18px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:rgba(10,6,24,.7);
  color:#fff;
  font-size:24px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .18s var(--timing), background .18s ease;
}
.slideshow-close:hover{
  transform:translateY(-2px);
  background:rgba(16,10,32,.85);
}
.slideshow-controls{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:8px;
}
.slideshow-controls .pill{
  flex:1 1 auto;
  justify-content:center;
}
.slideshow-caption{
  font-size:20px;
  line-height:1.5;
  color:#ffeaf6;
  text-align:center;
  font-family:"Dancing Script","Comic Sans MS",cursive;
}
.overlay-voice{
  margin-top:2px;
}

.slideshow-overlay{ position:fixed; inset:0; background:radial-gradient(120% 120% at 50% 10%, rgba(32,12,58,.92), rgba(12,7,18,.94)); display:flex; align-items:center; justify-content:center; padding:clamp(28px,5vw,48px); z-index:80; overflow:auto; }
.slideshow-overlay.active{ display:flex; }
.slideshow-sky{ position:absolute; inset:0; overflow:hidden; }
.slideshow-sky span{ position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.8); box-shadow:0 0 12px rgba(120,180,255,.9); animation: twinkle 6s linear infinite; }
.slideshow-sky span:nth-child(odd){ animation-duration:8s; }
.slideshow-sky span:nth-child(1){ top:12%; left:24%; }
.slideshow-sky span:nth-child(2){ top:32%; left:68%; }
.slideshow-sky span:nth-child(3){ top:58%; left:18%; }
.slideshow-sky span:nth-child(4){ top:70%; left:52%; }
.slideshow-sky span:nth-child(5){ top:82%; left:76%; }
.slideshow-sky span:nth-child(6){ top:22%; left:78%; }
.slideshow-sky span:nth-child(7){ top:48%; left:44%; }
.slideshow-sky span:nth-child(8){ top:64%; left:30%; }
.slideshow-sky span:nth-child(9){ top:14%; left:58%; }
.slideshow-sky span:nth-child(10){ top:40%; left:8%; }
.frame-glow{ position:absolute; inset:0; border:1px solid rgba(255,255,255,.35); border-radius:inherit; opacity:.4; pointer-events:none; mix-blend-mode:screen; }
.frame-string{ position:absolute; top:-50px; left:50%; width:2px; height:50px; transform:translateX(-50%); background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,182,208,.3)); }
.frame-caption{ text-align:center; color:#ffeaf6; font-size:16px; font-family:"Dancing Script", "Comic Sans MS", cursive; letter-spacing:.4px; }
.frame-caption .caption-date{ display:block; font-size:12px; font-family:"Inter", system-ui; text-transform:uppercase; letter-spacing:.3px; color:rgba(255,255,255,.65); margin-top:4px; }
.frame-actions{ display:flex; justify-content:center; gap:10px; color:rgba(255,255,255,.7); font-size:12px; letter-spacing:.2px; }
.frame-actions button{ border:none; background:rgba(255,255,255,.12); color:#ffeaf6; padding:6px 10px; border-radius:12px; cursor:pointer; box-shadow:0 10px 20px rgba(0,0,0,.35); transition:background .2s ease, transform .2s ease; }
.frame-actions button:hover{ background:rgba(255,255,255,.2); transform:translateY(-1px); }
.frame-voice{ display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg, rgba(255,201,240,.45), rgba(255,157,212,.38)); color:#ffeaf6; border-radius:999px; padding:8px 14px; box-shadow:0 16px 26px rgba(0,0,0,.35); font-weight:700; border:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.frame-voice:hover{ transform:translateY(-2px); box-shadow:0 20px 32px rgba(0,0,0,.45); }


@media (max-width: 520px){
  body{ padding:12px 10px; }
  .gate{ padding:16px 0; }
  .gate-card{ width:100%; max-width:420px; padding:26px 22px 24px; border-radius:32px; }
  .gate-card .pill{ margin-bottom:6px; }
  .gate-card .hint{ text-align:center; }
  .gate-card .locket{ top:18px; right:18px; transform:scale(.9); }
  .gate-card .hearts{ opacity:.5; }
  .gate-input{ flex-direction:column; width:100%; }
  .gate-input button{ width:100%; }
  .wrap{ padding:18px; }
  header.nav{ position:static; }
  .nav-inner{ padding:10px 16px; flex-direction:column; align-items:flex-start; gap:10px; }
  .nav-actions{ width:100%; justify-content:space-between; gap:8px; }
  .nav-actions .pill{ flex:1 1 auto; justify-content:center; }
  .routeTitle{ align-self:flex-end; }
  .card{ padding:18px 16px; }
  .home-grid{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .home-tile[data-feature="map"],
  .home-tile[data-feature="bucket"]{ grid-column: auto; }
  .map-body{ grid-template-columns:1fr; }
  .map-memory{ order:-1; }
  .anniversary-actions{ flex-direction:column; align-items:stretch; }
  .anniversary-actions .btn,
  .anniversary-actions .pill,
  .anniversary-input{ width:100%; }
  .music-list{ padding:12px 0 6px; }
  .song-chip{ flex:0 0 280px; }
  .gallery-wall{ grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); padding:32px 16px 40px; }
  .gallery-wall .frame-card{ padding:26px 18px 24px; }
}
@media (max-width: 420px){
  .now-playing{ padding:14px 16px 18px; }
  .now-playing-info{ flex-direction:column; align-items:flex-start; gap:6px; }
  .now-playing-progress{ width:100%; }
  .music-list{ flex-direction:column; overflow-x:visible; gap:14px; padding:10px 0 4px; scroll-snap-type:none; }
  .song-chip{ width:100%; flex:1 1 auto; }
  .gallery-wall{ grid-template-columns:1fr; padding:26px 14px 34px; }
  .gallery-wall .frame-card{ padding:24px 16px 22px; }
  .frame-card::before{ top:-54px; height:70px; }
  .frame-card::after{ top:-74px; }
  .slideshow-frame{ padding:24px 20px 22px; }
  .slideshow-image{ padding:12px; }
  .slideshow-image img{ max-height:calc(70vh - 150px); }
  .slideshow-controls{ flex-direction:column; gap:10px; }
  .slideshow-controls .pill{ width:100%; }
  .slideshow-caption{ font-size:18px; }
}
@media (max-width: 360px){
  .slideshow-frame{ width:94vw; padding:18px 12px 18px; }
  .slideshow-image{ padding:10px; }
  .slideshow-image img{ max-height:calc(60vh - 90px); }
  .slideshow-caption{ font-size:17px; }
  .slideshow-controls{ gap:8px; }
  .slideshow-overlay .pill{ width:100%; }
  .gallery-wall{ padding:22px 12px 30px; }
  .frame-card{ padding:22px 14px 20px; }
  .frame-actions{ flex-direction:column; }
  .frame-actions button{ width:100%; }
}
.frame-card{ position:relative; background:rgba(255,255,255,.1); border-radius:24px; padding:36px 24px 28px; box-shadow:0 30px 60px rgba(0,0,0,.35); overflow:hidden; border:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; gap:18px; transition: transform .3s ease, box-shadow .3s ease; z-index:2 }
.frame-card::before{ content:""; position:absolute; top:-64px; left:50%; width:6px; height:80px; background:linear-gradient(180deg, rgba(255,203,240,.9), rgba(255,154,212,.3)); transform:translateX(-50%); box-shadow:0 0 14px rgba(255,137,215,.65); border-radius:999px; }
.frame-card::after{ content:""; position:absolute; top:-86px; left:50%; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle, #ffd1f3 0%, #ff7cb7 70%, transparent 71%); border:3px solid rgba(255,255,255,.8); transform:translateX(-50%); box-shadow:0 6px 12px rgba(0,0,0,.25); }
.frame-card:hover{ transform:translateY(-6px) scale(1.01); box-shadow:0 40px 80px rgba(0,0,0,.45); }
.frame-card:hover .frame-photo{ box-shadow:0 18px 40px rgba(0,0,0,.45); }
.frame-photo{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 14px 28px rgba(0,0,0,.4); background:rgba(0,0,0,.5); }
.frame-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame-photo img[data-loaded="false"]{ opacity:0; transform:scale(.96); }
.frame-photo img[data-loaded="true"], .frame-photo img.fade-in{ animation: galleryFade .6s ease forwards; }
@keyframes galleryFade{
  0%{ opacity:0; transform:scale(.96); }
  100%{ opacity:1; transform:scale(1); }
}

.slideshow-overlay{ position:fixed; inset:0; background:radial-gradient(120% 120% at 50% 10%, rgba(32,12,58,.92), rgba(12,7,18,.94)); display:flex; align-items:center; justify-content:center; padding:clamp(28px,5vw,48px); z-index:80; overflow:auto; }
.slideshow-overlay.active{ display:flex; }
.slideshow-sky{ position:absolute; inset:0; overflow:hidden; }
.slideshow-sky span{ position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.8); box-shadow:0 0 12px rgba(120,180,255,.9); animation: twinkle 6s linear infinite; }
.slideshow-sky span:nth-child(odd){ animation-duration:8s; }
.slideshow-sky span:nth-child(1){ top:12%; left:24%; }
.slideshow-sky span:nth-child(2){ top:32%; left:68%; }
.slideshow-sky span:nth-child(3){ top:58%; left:18%; }
.slideshow-sky span:nth-child(4){ top:70%; left:52%; }
.slideshow-sky span:nth-child(5){ top:82%; left:76%; }
.slideshow-sky span:nth-child(6){ top:22%; left:78%; }
.slideshow-sky span:nth-child(7){ top:48%; left:44%; }
.slideshow-sky span:nth-child(8){ top:64%; left:30%; }
.slideshow-sky span:nth-child(9){ top:14%; left:58%; }
.slideshow-sky span:nth-child(10){ top:40%; left:8%; }
.frame-glow{ position:absolute; inset:0; border:1px solid rgba(255,255,255,.35); border-radius:inherit; opacity:.4; pointer-events:none; mix-blend-mode:screen; }
.frame-string{ position:absolute; top:-50px; left:50%; width:2px; height:50px; transform:translateX(-50%); background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,182,208,.3)); }
.frame-caption{ text-align:center; color:#ffeaf6; font-size:16px; font-family:"Dancing Script", "Comic Sans MS", cursive; letter-spacing:.4px; }
.frame-caption .caption-date{ display:block; font-size:12px; font-family:"Inter", system-ui; text-transform:uppercase; letter-spacing:.3px; color:rgba(255,255,255,.65); margin-top:4px; }
.frame-actions{ display:flex; justify-content:center; gap:10px; color:rgba(255,255,255,.7); font-size:12px; letter-spacing:.2px; }
.frame-actions button{ border:none; background:rgba(255,255,255,.12); color:#ffeaf6; padding:6px 10px; border-radius:12px; cursor:pointer; box-shadow:0 10px 20px rgba(0,0,0,.35); transition:background .2s ease, transform .2s ease; }
.frame-actions button:hover{ background:rgba(255,255,255,.2); transform:translateY(-1px); }
.frame-voice{ display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg, rgba(255,201,240,.45), rgba(255,157,212,.38)); color:#ffeaf6; border-radius:999px; padding:8px 14px; box-shadow:0 16px 26px rgba(0,0,0,.35); font-weight:700; border:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.frame-voice:hover{ transform:translateY(-2px); box-shadow:0 20px 32px rgba(0,0,0,.45); }

[data-route]{ display:none; opacity:0; transform:translateY(6px); }
[data-route].show{ display:block; animation: routeIn .38s var(--timing-spring) both; }
@keyframes routeIn{ from{ opacity:0; transform: translateY(8px) scale(.995); } to{ opacity:1; transform: translateY(0) scale(1); } }

#lightbox:not(.show){ display:none !important; }
.slideshow-overlay:not(.active){ display:none !important; }

footer{ color:#a07e8c; margin:24px 0 40px; text-align:center; }
footer p{ margin:0; }