@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Quicksand:wght@400;500;600;700&display=swap');
  :root{ --bg1:#ffe9f1; --bg2:#ffd3e4; --bg3:#f6b8d4; --bg4:#f4c9e8; --panel:rgba(255,249,251,0.62); --hairline:#ffcfe1; --rose:#e0537a; --rose-deep:#c23d63; --rose-deeper:#9c2f4e; --text-mid:#8a4a5c; --text-dim:#c07f95; --gold:#f0c68a; --gold-deep:#e0a95f; --lilac:#d9a8e8; --cursor-size:18px; --bokeh-a:rgba(255,255,255,0.6); --bokeh-b:rgba(255,192,214,0.05); }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html{ height:100%; overscroll-behavior:none; cursor:none; }
  @media (pointer: coarse) { html { cursor: auto; } .custom-cursor { display: none !important; } }
  html,body{ margin:0; padding:0; min-height:100%; font-family:'Quicksand', sans-serif; color:var(--text-mid); overflow-x:hidden; overscroll-behavior-y:none; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; background: radial-gradient(circle at 12% 8%, #fff5f8 0%, transparent 38%), radial-gradient(circle at 88% 6%, #ffe3ee 0%, transparent 35%), radial-gradient(circle at 92% 92%, #f6b8d4 0%, transparent 45%), radial-gradient(circle at 6% 96%, #f4c9e8 0%, transparent 42%), linear-gradient(165deg, var(--bg1), var(--bg2) 45%, var(--bg4) 75%, var(--bg3)); background-size:100% 100%, 100% 100%, 100% 100%, 100% 100%, 200% 200%; animation:huebg 26s ease-in-out infinite; transition:background-color 0.6s ease; }
  @keyframes huebg{ 0%,100%{ background-position:0% 0%,0% 0%,0% 0%,0% 0%, 0% 0%; } 50%{ background-position:0% 0%,0% 0%,0% 0%,0% 0%, 30% 30%; } }
  .grain{ position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; background-size:200px 200px; }
  @media (prefers-reduced-motion: reduce){ * { animation:none !important; transition:none !important; } }
  html.no-motion *{ animation:none !important; }
  html.no-motion .bokeh, html.no-motion .sparkles, html.no-motion .petals, html.no-motion .hearts{ display:none !important; }
  .custom-cursor{ position:fixed; top:0; left:0; width:var(--cursor-size); height:var(--cursor-size); border-radius:50%; background:radial-gradient(circle, rgba(224,83,122,0.35), transparent 70%); pointer-events:none; z-index:10000; transform:translate(-50%, -50%); transition:width 0.15s, height 0.15s, background 0.15s; mix-blend-mode:multiply; }
  .custom-cursor.hover{ width:40px; height:40px; background:radial-gradient(circle, rgba(224,83,122,0.18), transparent 70%); }
  .bokeh{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .bokeh span{ position:absolute; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--bokeh-a), var(--bokeh-b) 70%); filter:blur(1px); animation:drift 22s ease-in-out infinite; will-change:transform; }
  @keyframes drift{ 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(-22px) translateX(14px); } }
  .sparkles{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  .spark{ position:absolute; color:var(--gold); font-size:12px; animation:twinkle 2.6s ease-in-out infinite; text-shadow:0 0 6px rgba(240,198,138,0.8); will-change:opacity, transform; }
  @keyframes twinkle{ 0%,100%{ opacity:0; transform:scale(0.6) rotate(0deg); } 50%{ opacity:1; transform:scale(1.15) rotate(45deg); } }
  .petals{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
  .petal{ position:absolute; top:-10vh; animation-name:fall; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform; filter:drop-shadow(0 3px 4px rgba(157,47,78,0.12)); }
  .petal span{ display:inline-block; animation:sway 4.5s ease-in-out infinite; }
  @keyframes fall{ 0%{ transform:translateY(-10vh) rotate(0deg); } 100%{ transform:translateY(115vh) rotate(340deg); } }
  @keyframes sway{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(22px); } }

  /* ---------- App shell ---------- */
  .topbar{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:calc(10px + env(safe-area-inset-top)) 14px 10px; }
  .hamburger{ width:42px; height:42px; border-radius:14px; background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; cursor:pointer; box-shadow:0 4px 14px rgba(185,58,95,0.15); transition:transform 0.15s ease; }
  .hamburger:active{ transform:scale(0.92); }
  .hamburger span{ display:block; width:18px; height:2px; background:var(--rose-deep); border-radius:2px; transition:transform 0.3s ease, opacity 0.3s ease; }
  .hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .hamburger.open span:nth-child(2){ opacity:0; }
  .hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .brand{ font-family:'Great Vibes', cursive; font-size:24px; color:var(--rose-deeper); display:flex; align-items:center; gap:6px; text-shadow:0 2px 8px rgba(224,83,122,0.2); }
  .brand .heart{ font-size:18px; }

  .sidebar-overlay{ position:fixed; inset:0; z-index:70; background:rgba(40,10,20,0.25); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
  .sidebar-overlay.show{ opacity:1; pointer-events:auto; }
  .sidebar{ position:fixed; top:0; left:0; bottom:0; width:270px; max-width:82vw; z-index:80; background:var(--panel); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-right:1.5px solid var(--hairline); box-shadow:8px 0 30px rgba(156,47,78,0.18); transform:translateX(-100%); transition:transform 0.35s cubic-bezier(.2,.8,.3,1); display:flex; flex-direction:column; padding:calc(20px + env(safe-area-inset-top)) 0 20px; }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-head{ font-family:'Great Vibes', cursive; font-size:28px; color:var(--rose-deeper); text-align:center; margin-bottom:6px; }
  .sidebar-sub{ text-align:center; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); font-weight:700; margin-bottom:18px; }
  .nav-item{ display:flex; align-items:center; gap:12px; padding:12px 22px; font-size:14px; font-weight:700; color:var(--text-mid); cursor:pointer; transition:background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; border-left:3px solid transparent; }
  .nav-item .ic{ font-size:17px; width:22px; text-align:center; }
  .nav-item:hover{ background:rgba(255,255,255,0.35); padding-left:26px; }
  .nav-item.active{ border-left-color:var(--rose); color:var(--rose-deeper); background:rgba(255,255,255,0.4); }
  .sidebar-foot{ margin-top:auto; text-align:center; font-size:10px; color:var(--text-dim); padding:10px 20px 0; letter-spacing:0.03em; }

  .page{ display:none; }
  .page.active{ display:block; }

  .wrap{ min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(70px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom)); position:relative; z-index:2; }
  .page-shell{ width:100%; max-width:660px; margin:0 auto; padding:calc(70px + env(safe-area-inset-top)) 18px 60px; position:relative; z-index:2; }
  .page-title{ font-family:'Great Vibes', cursive; font-size:clamp(2rem,8vw,2.8rem); color:var(--rose-deeper); text-align:center; margin-bottom:4px; }
  .page-desc{ text-align:center; font-size:12.5px; color:var(--text-dim); margin-bottom:22px; }

  .bloom-wrap{ position:relative; margin-bottom:2px; cursor:pointer; transition:transform 0.15s ease; }
  .bloom-wrap:active{ transform:scale(0.92); }
  .bloom{ width:80px; height:80px; animation:bloomIn 1.4s cubic-bezier(.2,.8,.3,1) both, bob 5s ease-in-out 1.4s infinite; filter:drop-shadow(0 6px 12px rgba(185,58,95,0.28)); }
  .bloom-glow{ position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle, rgba(255,200,224,0.55), transparent 70%); animation:glowPulse 3s ease-in-out infinite; z-index:-1; }
  @keyframes glowPulse{ 0%,100%{ transform:scale(0.9); opacity:0.6; } 50%{ transform:scale(1.15); opacity:1; } }
  @keyframes bloomIn{ 0%{ transform:scale(0.2) rotate(-25deg); opacity:0; } 100%{ transform:scale(1) rotate(0deg); opacity:1; } }
  @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
  .eyebrow{ display:flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--rose-deep); font-weight:700; margin-bottom:6px; }
  .eyebrow::before, .eyebrow::after{ content:"✧"; color:var(--gold-deep); font-size:12px; }
  .title{ font-family:'Great Vibes', cursive; font-size:clamp(2.4rem, 10vw, 3.6rem); color:var(--rose-deeper); margin-bottom:2px; text-align:center; line-height:1; text-shadow:0 2px 10px rgba(224,83,122,0.25); }
  .typewriter-wrap{ font-family:'Playfair Display', serif; font-style:italic; font-size:14px; color:var(--rose-deep); margin-bottom:22px; text-align:center; letter-spacing:0.02em; min-height:20px; }
  .typewriter{ display:inline-block; }
  .typewriter::after{ content:"|"; animation:blink 1s step-end infinite; color:var(--gold-deep); margin-left:2px; }
  @keyframes blink{ 50%{ opacity:0; } }
  .epoch{ font-size:12.5px; color:var(--text-dim); margin-bottom:22px; text-align:center; letter-spacing:0.01em; }
  .epoch b{ color:var(--rose-deep); font-weight:700; }
  .readout-card{ position:relative; background:var(--panel); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:28px; padding:24px 30px 20px; box-shadow:0 16px 38px rgba(185,58,95,0.18), inset 0 1px 0 rgba(255,255,255,0.85); display:flex; flex-direction:column; align-items:center; border:2px solid transparent; background-clip:padding-box; transform-style:preserve-3d; perspective:1000px; transition:transform 0.1s ease; will-change:transform; margin:0 auto; max-width:660px; }
  .readout-card::before{ content:""; position:absolute; inset:-2px; border-radius:30px; z-index:-1; background:linear-gradient(120deg, var(--gold), var(--rose), var(--lilac), var(--gold)); background-size:300% 300%; animation:shimmerBorder 6s ease infinite; opacity:0.9; }
  @keyframes shimmerBorder{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
  .readout{ font-family:'Playfair Display', serif; font-weight:600; color:var(--rose-deeper); font-size:clamp(1.7rem, 7.4vw, 3.2rem); letter-spacing:0.01em; line-height:1; display:flex; align-items:baseline; gap:0.12em; text-shadow:0 2px 16px rgba(224,83,122,0.22); }
  .readout .sec{ color:var(--rose); font-size:0.52em; font-family:'Quicksand', sans-serif; font-weight:700; animation:tick 1s steps(1) infinite; }
  @keyframes tick{ 0%{opacity:1;} 50%{opacity:0.55;} 100%{opacity:1;} }
  .ecg-wrap{ width:100%; height:28px; margin-top:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .ecg-line{ width:100%; height:2px; background:linear-gradient(90deg, transparent, var(--rose) 45%, var(--rose) 55%, transparent); position:relative; opacity:0.4; }
  .ecg-line::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:60px; height:20px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 10 L15 10 L20 2 L25 18 L30 10 L45 10 L50 5 L55 15 L60 10' fill='none' stroke='%23e0537a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; background-size:contain; animation:ecgPulse 1.2s ease-in-out infinite; }
  @keyframes ecgPulse{ 0%,100%{ transform:translate(-50%, -50%) scaleX(0.8); opacity:0.3; } 15%{ transform:translate(-50%, -50%) scaleX(1.1); opacity:1; } 30%{ transform:translate(-50%, -50%) scaleX(0.9); opacity:0.6; } 100%{ transform:translate(-50%, -50%) scaleX(0.8); opacity:0.3; } }
  .heart-pulse{ margin-top:6px; font-size:12.5px; color:var(--gold-deep); display:flex; align-items:center; gap:5px; }
  .heart-pulse .h{ display:inline-block; animation:heartbeat 1.2s ease-in-out infinite; }
  @keyframes heartbeat{ 0%,100%{ transform:scale(1); } 15%{ transform:scale(1.35); } 30%{ transform:scale(1); } 45%{ transform:scale(1.2); } 60%{ transform:scale(1); } }
  .grid{ width:100%; max-width:660px; display:grid; grid-template-columns:repeat(4, 1fr); gap:11px; margin:24px auto 0; }
  .cell{ position:relative; background:var(--panel); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,0.8); border-radius:20px; padding:16px 6px 13px; text-align:center; box-shadow:0 8px 18px rgba(224,83,122,0.13), inset 0 1px 0 rgba(255,255,255,0.75); overflow:hidden; transition:transform 0.15s ease, box-shadow 0.3s ease; transform-style:preserve-3d; perspective:600px; will-change:transform; }
  .cell:hover{ box-shadow:0 12px 28px rgba(224,83,122,0.2), inset 0 1px 0 rgba(255,255,255,0.8); }
  .cell:active{ transform:scale(0.96); }
  .cell::after{ content:""; position:absolute; top:-60%; left:-60%; width:220%; height:220%; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%); animation:sheen 5s ease-in-out infinite; }
  @keyframes sheen{ 0%{ transform:translateX(-40%) translateY(-40%); } 100%{ transform:translateX(40%) translateY(40%); } }
  .cell.tick{ animation:pop 1s ease; }
  @keyframes pop{ 0%{ transform:scale(1); } 15%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
  .cell .emoji{ font-size:18px; margin-bottom:3px; display:block; position:relative; z-index:1; }
  .cell .num{ font-family:'Playfair Display', serif; font-weight:600; font-size:clamp(1.25rem, 4.8vw, 1.9rem); color:var(--rose-deeper); font-variant-numeric:tabular-nums; position:relative; z-index:1; transition:color 0.3s ease; }
  .cell .lbl{ margin-top:4px; font-size:9.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--text-dim); font-weight:700; position:relative; z-index:1; }
  .ribbon{ display:flex; gap:10px; margin:16px auto 0; overflow-x:auto; max-width:660px; width:100%; padding:2px 2px 6px; scrollbar-width:none; }
  .ribbon::-webkit-scrollbar{ display:none; }
  .pill{ flex:0 0 auto; background:var(--panel); border:1px solid var(--hairline); border-radius:999px; padding:8px 16px; font-size:12px; font-weight:600; color:var(--rose-deep); display:flex; align-items:center; gap:6px; white-space:nowrap; transition:transform 0.15s ease, background 0.3s ease; }
  .pill:hover{ filter:brightness(1.08); }
  .pill:active{ transform:scale(0.95); }
  .pill span.num{ color:var(--rose-deeper); font-family:'Playfair Display',serif; font-weight:700; }
  .divider{ font-family:'Great Vibes', cursive; font-size:26px; margin-top:22px; color:var(--gold-deep); text-align:center; }
  .footer{ margin-top:14px; font-size:11.5px; color:var(--text-dim); letter-spacing:0.02em; text-align:center; }
  .hearts{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
  .heart-float{ position:absolute; bottom:-8vh; color:var(--rose); opacity:0.55; animation-name:rise; animation-timing-function:ease-in; animation-iteration-count:infinite; will-change:transform, opacity; }
  @keyframes rise{ 0%{ transform:translateY(0) translateX(0) scale(0.8); opacity:0; } 10%{ opacity:0.6; } 100%{ transform:translateY(-115vh) translateX(18px) scale(1.1); opacity:0; } }
  .frame-wrap{ margin-top:8px; margin-bottom:4px; display:flex; flex-direction:column; align-items:center; }
  .heart-frame{ width:150px; height:135px; position:relative; cursor:pointer; filter:drop-shadow(0 10px 18px rgba(185,58,95,0.28)); transition:transform 0.15s ease, filter 0.15s ease; }
  .heart-frame:hover{ transform:scale(1.03); filter:drop-shadow(0 14px 24px rgba(185,58,95,0.35)); }
  .heart-frame:active{ transform:scale(0.94); filter:drop-shadow(0 6px 12px rgba(185,58,95,0.32)); }
  .heart-frame .heart-shape{ position:absolute; inset:0; clip-path:path('M75,130 C10,90 0,50 0,32 C0,10 20,0 38,0 C55,0 68,10 75,25 C82,10 95,0 112,0 C130,0 150,10 150,32 C150,50 140,90 75,130 Z'); background:linear-gradient(160deg, #ffd6e4, #ffb3ce); display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid rgba(255,255,255,0.8); }
  .heart-frame .heart-shape img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; transition:transform 0.5s ease; }
  .heart-frame:hover .heart-shape img{ transform:scale(1.08); }
  .heart-frame .placeholder{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--rose-deeper); font-size:11px; font-weight:600; text-align:center; padding:0 20px; }
  .heart-frame .placeholder .icon{ font-size:26px; }
  .frame-caption{ margin-top:8px; font-size:11.5px; color:var(--text-dim); letter-spacing:0.03em; text-align:center; }
  .note-wrap{ width:100%; max-width:520px; margin:26px auto 0; }
  .note-label{ font-family:'Great Vibes', cursive; font-size:20px; color:var(--gold-deep); text-align:center; margin-bottom:8px; }
  .note{ background:var(--panel); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1.5px dashed var(--hairline); border-radius:20px; padding:18px 20px; font-family:'Playfair Display', serif; font-style:italic; font-size:14.5px; line-height:1.6; color:var(--rose-deeper); text-align:center; outline:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.7); transition:box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
  .note:focus{ border-color:var(--rose); box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 3px rgba(224,83,122,0.15); transform:translateY(-2px); }
  .note:empty::before{ content:attr(data-placeholder); color:var(--text-dim); font-style:italic; }
  .note-hint{ text-align:center; font-size:10.5px; color:var(--text-dim); margin-top:6px; letter-spacing:0.03em; }
  .names{ font-family:'Great Vibes', cursive; font-size:clamp(1.5rem, 6vw, 2.1rem); color:var(--rose-deep); text-align:center; margin-bottom:2px; outline:none; padding:2px 10px; border-radius:10px; transition:background 0.2s ease; }
  .names:empty::before{ content:attr(data-placeholder); color:var(--gold-deep); opacity:0.8; }
  .names:focus{ background:rgba(255,255,255,0.4); box-shadow:0 0 0 2px var(--hairline); }
  .milestone{ max-width:660px; width:100%; margin:18px auto 0; background:var(--panel); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1.5px solid var(--gold); border-radius:16px; padding:10px 16px; text-align:center; font-size:13px; font-weight:700; color:var(--rose-deeper); box-shadow:0 8px 18px rgba(224,168,95,0.2); display:none; animation:milestonePop 0.6s ease; }
  .milestone.show{ display:block; }
  @keyframes milestonePop{ 0%{ transform:scale(0.85); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
  .next-anniv{ max-width:660px; width:100%; margin:16px auto 0; display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; color:var(--rose-deep); font-weight:600; background:var(--panel); border:1px solid var(--hairline); border-radius:999px; padding:9px 18px; }
  .next-anniv .num{ font-family:'Playfair Display', serif; font-weight:700; color:var(--rose-deeper); }
  .burst-heart{ position:fixed; z-index:20; pointer-events:none; font-size:18px; animation:burst 1s ease-out forwards; }
  @keyframes burst{ 0%{ transform:translate(0,0) scale(0.6); opacity:1; } 100%{ transform:translate(var(--dx), var(--dy)) scale(1.2); opacity:0; } }
  @keyframes enter{ 0%{ opacity:0; transform:translateY(14px); } 100%{ opacity:1; transform:translateY(0); } }
  .wrap > *, .page-shell > *{ animation:enter 0.6s cubic-bezier(.2,.8,.3,1) both; }
  .wrap > *:nth-child(1),.page-shell > *:nth-child(1){ animation-delay:0.05s; } .wrap > *:nth-child(2),.page-shell > *:nth-child(2){ animation-delay:0.12s; } .wrap > *:nth-child(3),.page-shell > *:nth-child(3){ animation-delay:0.19s; } .wrap > *:nth-child(4),.page-shell > *:nth-child(4){ animation-delay:0.26s; } .wrap > *:nth-child(5),.page-shell > *:nth-child(5){ animation-delay:0.33s; } .wrap > *:nth-child(6),.page-shell > *:nth-child(6){ animation-delay:0.40s; } .wrap > *:nth-child(7),.page-shell > *:nth-child(7){ animation-delay:0.47s; } .wrap > *:nth-child(8),.page-shell > *:nth-child(8){ animation-delay:0.54s; } .wrap > *:nth-child(9),.page-shell > *:nth-child(9){ animation-delay:0.61s; } .wrap > *:nth-child(10),.page-shell > *:nth-child(10){ animation-delay:0.68s; }

  .toast{ position:fixed; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%) translateY(20px); background:var(--rose-deeper); color:#fff; font-size:12px; font-weight:700; padding:10px 20px; border-radius:999px; box-shadow:0 8px 24px rgba(156,47,78,0.35); opacity:0; pointer-events:none; z-index:100; transition:opacity 0.4s ease, transform 0.4s ease; font-family:'Quicksand',sans-serif; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  .modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s ease; }
  .modal-overlay.show{ display:flex; opacity:1; }
  .modal{ background:var(--panel); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1.5px solid var(--hairline); border-radius:24px; padding:24px; width:90%; max-width:360px; max-height:86vh; overflow-y:auto; box-shadow:0 20px 50px rgba(185,58,95,0.25); transform:scale(0.9); transition:transform 0.3s ease; }
  .modal-overlay.show .modal{ transform:scale(1); }
  .modal h3{ margin:0 0 16px; font-family:'Great Vibes', cursive; font-size:24px; color:var(--rose-deeper); text-align:center; }
  .modal label{ display:block; font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:4px; }
  .modal input, .modal textarea, .modal select{ width:100%; padding:10px 14px; margin-bottom:12px; border:1.5px solid var(--hairline); border-radius:12px; background:rgba(255,255,255,0.75); font-family:'Quicksand',sans-serif; font-size:13px; color:#7a3f52; outline:none; transition:border-color 0.2s ease; }
  .modal textarea{ resize:vertical; min-height:70px; }
  .modal input:focus, .modal textarea:focus, .modal select:focus{ border-color:var(--rose); }
  .modal .modal-actions{ display:flex; gap:8px; margin-top:4px; }
  .modal button{ flex:1; padding:10px; border-radius:12px; border:none; font-family:'Quicksand',sans-serif; font-weight:700; font-size:13px; cursor:pointer; transition:transform 0.15s ease, opacity 0.2s ease; }
  .modal button:active{ transform:scale(0.96); }
  .btn-primary{ background:linear-gradient(135deg, var(--rose), var(--rose-deep)); color:#fff; box-shadow:0 4px 12px rgba(224,83,122,0.3); }
  .btn-secondary{ background:rgba(255,255,255,0.75); color:#7a5568; border:1px solid var(--hairline); }
  .theme-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:9px; }
  .theme-group-label{ font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--rose-deep); margin:14px 0 8px; }
  .theme-group-label:first-child{ margin-top:2px; }
  .theme-swatch{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; border:1.5px solid var(--hairline); background:rgba(255,255,255,0.82); cursor:pointer; transition:transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease; text-align:left; font-family:'Quicksand',sans-serif; }
  .theme-swatch:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(185,58,95,0.15); }
  .theme-swatch:active{ transform:scale(0.96); }
  .theme-swatch.active{ border-color:var(--rose); box-shadow:0 0 0 2px rgba(224,83,122,0.2); }
  .theme-swatch .sw-dot{ width:22px; height:22px; border-radius:50%; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08); }
  .theme-swatch .sw-label{ font-size:12px; font-weight:700; color:#6b3a4a; line-height:1.25; }
  .theme-swatch .sw-sub{ font-size:9.5px; color:#a97d8c; font-weight:600; }
  .bloom-emoji{ display:none; font-size:64px; line-height:1; text-align:center; animation:bloomIn 1.4s cubic-bezier(.2,.8,.3,1) both, bob 5s ease-in-out 1.4s infinite; filter:drop-shadow(0 6px 12px rgba(185,58,95,0.28)); }

  /* ---------- Relationship page ---------- */
  .rel-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:520px; margin:0 auto; }
  .rel-card{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:18px; padding:16px 6px; text-align:center; cursor:pointer; transition:transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
  .rel-card:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(185,58,95,0.15); }
  .rel-card:active{ transform:scale(0.95); }
  .rel-card.active{ border-color:var(--rose); box-shadow:0 0 0 2px rgba(224,83,122,0.22); }
  .rel-card .rc-emoji{ font-size:26px; display:block; margin-bottom:6px; }
  .rel-card .rc-label{ font-size:10.5px; font-weight:700; color:#6b3a4a; }

  /* ---------- Photos page ---------- */
  .photo-toolbar{ display:flex; gap:8px; justify-content:center; margin-bottom:18px; flex-wrap:wrap; }
  .tbtn{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:999px; padding:9px 16px; font-size:12px; font-weight:700; color:var(--rose-deep); cursor:pointer; transition:transform 0.15s ease; }
  .tbtn:active{ transform:scale(0.95); }
  .gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:12px; }
  .photo-card{ position:relative; background:var(--panel); border:1.5px solid var(--hairline); border-radius:16px; overflow:hidden; box-shadow:0 6px 16px rgba(185,58,95,0.13); }
  .photo-card img{ width:100%; height:120px; object-fit:cover; display:block; cursor:pointer; }
  .photo-card .pc-body{ padding:8px 10px 10px; }
  .photo-card .pc-cap{ font-size:11px; font-weight:600; color:#7a4256; border:none; background:transparent; width:100%; outline:none; font-family:'Quicksand',sans-serif; }
  .photo-card .pc-date{ font-size:9.5px; color:var(--text-dim); border:none; background:transparent; width:100%; outline:none; font-family:'Quicksand',sans-serif; margin-top:2px; }
  .photo-card .pc-actions{ position:absolute; top:6px; right:6px; display:flex; gap:4px; }
  .pc-icon-btn{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.85); border:none; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
  .pc-icon-btn.fav.is-fav{ color:#e0a95f; }
  .empty-state{ text-align:center; padding:36px 20px; color:var(--text-dim); font-size:13px; }
  .empty-state .es-icon{ font-size:34px; display:block; margin-bottom:10px; }
  .lightbox{ position:fixed; inset:0; z-index:300; background:rgba(15,5,10,0.85); display:none; align-items:center; justify-content:center; flex-direction:column; gap:14px; }
  .lightbox.show{ display:flex; }
  .lightbox img{ max-width:88vw; max-height:64vh; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
  .lightbox .lb-cap{ color:#fff; font-family:'Playfair Display',serif; font-style:italic; text-align:center; padding:0 20px; }
  .lightbox .lb-controls{ display:flex; gap:14px; }
  .lightbox .lb-btn{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.3); font-size:18px; cursor:pointer; }

  /* ---------- Notes page ---------- */
  .notes-list{ display:flex; flex-direction:column; gap:12px; }
  .note-card{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:18px; padding:14px 18px; box-shadow:0 6px 16px rgba(185,58,95,0.1); }
  .note-card .nc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; }
  .note-card .nc-title{ font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deeper); font-size:15px; }
  .note-card .nc-date{ font-size:10px; color:var(--text-dim); white-space:nowrap; }
  .note-card .nc-content{ font-size:13px; line-height:1.55; color:#7a4256; white-space:pre-wrap; }
  .note-card .nc-actions{ display:flex; gap:8px; margin-top:8px; }
  .nc-actions button{ font-size:10.5px; font-weight:700; border:none; background:none; color:var(--rose-deep); cursor:pointer; padding:2px 6px; }

  /* ---------- Timeline page ---------- */
  .tl-milestones{ display:flex; flex-direction:column; gap:8px; margin-top:22px; }
  .tl-m{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1.5px solid var(--hairline); border-radius:14px; padding:10px 14px; font-size:12.5px; font-weight:600; color:#7a4256; }
  .tl-m.done{ border-color:var(--gold); background:rgba(255,246,230,0.55); }
  .tl-m .tl-check{ font-size:15px; }

  /* ---------- Settings / Share page ---------- */
  .settings-group{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:18px; padding:16px 18px; margin-bottom:14px; }
  .settings-group h4{ margin:0 0 12px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--rose-deep); font-weight:800; }
  .field-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .field-row:last-child{ margin-bottom:0; }
  .field-row label{ font-size:12.5px; font-weight:600; color:#6b3a4a; }
  .field-row input[type=text], .field-row input[type=date], .field-row input[type=time], .field-row select{ padding:8px 12px; border:1.5px solid var(--hairline); border-radius:10px; background:rgba(255,255,255,0.8); font-family:'Quicksand',sans-serif; font-size:12.5px; color:#7a3f52; outline:none; }
  .switch{ position:relative; width:42px; height:24px; flex:0 0 auto; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch .slider{ position:absolute; inset:0; background:#e2c3cf; border-radius:999px; cursor:pointer; transition:background 0.2s ease; }
  .switch .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform 0.2s ease; box-shadow:0 2px 4px rgba(0,0,0,0.2); }
  .switch input:checked + .slider{ background:var(--rose); }
  .switch input:checked + .slider::before{ transform:translateX(18px); }
  .share-card{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:20px; padding:20px; text-align:center; margin-bottom:16px; }
  .share-summary{ font-family:'Playfair Display',serif; font-style:italic; font-size:14px; color:var(--rose-deeper); line-height:1.6; margin-bottom:14px; }
  .share-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .share-actions button{ background:linear-gradient(135deg, var(--rose), var(--rose-deep)); color:#fff; border:none; border-radius:999px; padding:10px 18px; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(224,83,122,0.3); transition:transform 0.15s ease; }
  .share-actions button.secondary{ background:rgba(255,255,255,0.8); color:var(--rose-deep); border:1px solid var(--hairline); box-shadow:none; }
  .share-actions button:active{ transform:scale(0.95); }

  @media (max-width: 420px){ .grid{ gap:8px; } .cell{ padding:12px 4px 10px; border-radius:16px; } .cell .num{ font-size:1.1rem; } .readout-card{ padding:18px 20px 16px; border-radius:22px; } .heart-frame{ width:120px; height:108px; } .rel-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Theme color overrides ---------- */
html[data-theme="gothic"]{--bg1:#1a0a0f;--bg2:#2b0f16;--bg3:#1a0a0f;--bg4:#2b0f16;--panel:rgba(30,15,20,0.72);--hairline:#3d1a24;--rose:#ff6b81;--rose-deep:#c23d50;--rose-deeper:#ff4d6d;--text-mid:#d4a5b0;--text-dim:#8a5a65;--gold:#c0a080;--gold-deep:#a08060;--lilac:#8a6a8a;}
html[data-theme="gothic"] body{background:radial-gradient(circle at 12% 8%,#2b0f16 0%,transparent 38%),radial-gradient(circle at 88% 6%,#1a0a0f 0%,transparent 35%),radial-gradient(circle at 92% 92%,#3d1a24 0%,transparent 45%),radial-gradient(circle at 6% 96%,#2b0f16 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="gothic"] .heart-frame .heart-shape{background:linear-gradient(160deg,#3d1a24,#1a0a0f);}
html[data-theme="gothic"] .bloom-glow{background:radial-gradient(circle,rgba(255,100,120,0.35),transparent 70%);}
html[data-theme="gothic"] .custom-cursor{background:radial-gradient(circle,rgba(255,100,120,0.35),transparent 70%);}

html[data-theme="moonlight"]{--bg1:#0f1a2e;--bg2:#1b2a3d;--bg3:#152238;--bg4:#1b2a3d;--panel:rgba(20,30,50,0.65);--hairline:#2a3a55;--rose:#a0b8d8;--rose-deep:#8aa0c0;--rose-deeper:#dbe8f6;--text-mid:#90a8c8;--text-dim:#5a7088;--gold:#c0d0e0;--gold-deep:#a0b8d0;--lilac:#8a9ec0;}
html[data-theme="moonlight"] body{background:radial-gradient(circle at 12% 8%,#1b2a3d 0%,transparent 38%),radial-gradient(circle at 88% 6%,#0f1a2e 0%,transparent 35%),radial-gradient(circle at 92% 92%,#2a3a55 0%,transparent 45%),radial-gradient(circle at 6% 96%,#1b2a3d 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="moonlight"] .heart-frame .heart-shape{background:linear-gradient(160deg,#2a3a55,#0f1a2e);}
html[data-theme="moonlight"] .bloom-glow{background:radial-gradient(circle,rgba(160,184,216,0.35),transparent 70%);}
html[data-theme="moonlight"] .custom-cursor{background:radial-gradient(circle,rgba(160,184,216,0.35),transparent 70%);}

html[data-theme="lavender"]{--bg1:#f0e6ff;--bg2:#e4d0ff;--bg3:#d4b8f0;--bg4:#e4d0ff;--panel:rgba(240,230,255,0.62);--hairline:#d0b8e8;--rose:#9d5bc0;--rose-deep:#7d3f9d;--rose-deeper:#5a2d70;--text-mid:#6a3a80;--text-dim:#a080b8;--gold:#d4b8f0;--gold-deep:#b898d8;--lilac:#c0a0e0;}
html[data-theme="lavender"] body{background:radial-gradient(circle at 12% 8%,#f5f0ff 0%,transparent 38%),radial-gradient(circle at 88% 6%,#e4d0ff 0%,transparent 35%),radial-gradient(circle at 92% 92%,#d4b8f0 0%,transparent 45%),radial-gradient(circle at 6% 96%,#e4d0ff 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="lavender"] .heart-frame .heart-shape{background:linear-gradient(160deg,#e4d0ff,#d4b8f0);}
html[data-theme="lavender"] .bloom-glow{background:radial-gradient(circle,rgba(180,140,220,0.4),transparent 70%);}
html[data-theme="lavender"] .custom-cursor{background:radial-gradient(circle,rgba(180,140,220,0.4),transparent 70%);}

html[data-theme="forest"]{--bg1:#e0f0e6;--bg2:#c9e8d3;--bg3:#a8d8b8;--bg4:#c9e8d3;--panel:rgba(220,240,230,0.62);--hairline:#b0d8c0;--rose:#2d8a5e;--rose-deep:#1f6e46;--rose-deeper:#165c38;--text-mid:#3a6b4f;--text-dim:#7aaa90;--gold:#c8b896;--gold-deep:#b0a078;--lilac:#90c0a0;}
html[data-theme="forest"] body{background:radial-gradient(circle at 12% 8%,#f0f8f2 0%,transparent 38%),radial-gradient(circle at 88% 6%,#e0f0e6 0%,transparent 35%),radial-gradient(circle at 92% 92%,#c9e8d3 0%,transparent 45%),radial-gradient(circle at 6% 96%,#b8dcc8 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="forest"] .heart-frame .heart-shape{background:linear-gradient(160deg,#c9e8d3,#a8d8b8);}
html[data-theme="forest"] .bloom-glow{background:radial-gradient(circle,rgba(100,180,130,0.4),transparent 70%);}
html[data-theme="forest"] .custom-cursor{background:radial-gradient(circle,rgba(100,180,130,0.4),transparent 70%);}

html[data-theme="winter"]{--bg1:#f5fbff;--bg2:#e8f4fc;--bg3:#d0e8f5;--bg4:#e8f4fc;--panel:rgba(240,248,255,0.62);--hairline:#c0dce8;--rose:#4a9fc7;--rose-deep:#3a8ab0;--rose-deeper:#2d7090;--text-mid:#4a7a8a;--text-dim:#80a8b8;--gold:#a8c8d8;--gold-deep:#90b8c8;--lilac:#b0c8d8;}
html[data-theme="winter"] body{background:radial-gradient(circle at 12% 8%,#ffffff 0%,transparent 38%),radial-gradient(circle at 88% 6%,#f5fbff 0%,transparent 35%),radial-gradient(circle at 92% 92%,#e8f4fc 0%,transparent 45%),radial-gradient(circle at 6% 96%,#d0e8f5 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="winter"] .heart-frame .heart-shape{background:linear-gradient(160deg,#e8f4fc,#d0e8f5);}
html[data-theme="winter"] .bloom-glow{background:radial-gradient(circle,rgba(120,180,210,0.4),transparent 70%);}
html[data-theme="winter"] .custom-cursor{background:radial-gradient(circle,rgba(120,180,210,0.4),transparent 70%);}

html[data-theme="celestial"]{--bg1:#0a0f2e;--bg2:#131a45;--bg3:#0f1438;--bg4:#131a45;--panel:rgba(15,20,50,0.65);--hairline:#2a3055;--rose:#f7db94;--rose-deep:#e8c870;--rose-deeper:#f0e0a0;--text-mid:#d0c8a0;--text-dim:#908860;--gold:#f7db94;--gold-deep:#e8c870;--lilac:#a0a8d0;}
html[data-theme="celestial"] body{background:radial-gradient(circle at 12% 8%,#1a2050 0%,transparent 38%),radial-gradient(circle at 88% 6%,#0a0f2e 0%,transparent 35%),radial-gradient(circle at 92% 92%,#2a3055 0%,transparent 45%),radial-gradient(circle at 6% 96%,#131a45 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="celestial"] .heart-frame .heart-shape{background:linear-gradient(160deg,#2a3055,#0a0f2e);}
html[data-theme="celestial"] .bloom-glow{background:radial-gradient(circle,rgba(247,219,148,0.35),transparent 70%);}
html[data-theme="celestial"] .custom-cursor{background:radial-gradient(circle,rgba(247,219,148,0.35),transparent 70%);}

html[data-theme="cyberpunk"]{--bg1:#0f0518;--bg2:#1a0a2e;--bg3:#120520;--bg4:#1a0a2e;--panel:rgba(20,10,40,0.65);--hairline:#3a1a55;--rose:#00e5ff;--rose-deep:#00c8e0;--rose-deeper:#00e5ff;--text-mid:#c0a0e0;--text-dim:#8058a0;--gold:#ff00ff;--gold-deep:#e000e0;--lilac:#00e5ff;}
html[data-theme="cyberpunk"] body{background:radial-gradient(circle at 12% 8%,#1a0a2e 0%,transparent 38%),radial-gradient(circle at 88% 6%,#0f0518 0%,transparent 35%),radial-gradient(circle at 92% 92%,#3a1a55 0%,transparent 45%),radial-gradient(circle at 6% 96%,#1a0a2e 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="cyberpunk"] .heart-frame .heart-shape{background:linear-gradient(160deg,#3a1a55,#0f0518);}
html[data-theme="cyberpunk"] .bloom-glow{background:radial-gradient(circle,rgba(0,229,255,0.35),transparent 70%);}
html[data-theme="cyberpunk"] .custom-cursor{background:radial-gradient(circle,rgba(0,229,255,0.35),transparent 70%);}

html[data-theme="autumn"]{--bg1:#fff0e0;--bg2:#ffdcb0;--bg3:#f0c090;--bg4:#ffdcb0;--panel:rgba(255,240,220,0.62);--hairline:#f0c8a0;--rose:#9c4a1e;--rose-deep:#7a3a18;--rose-deeper:#5c2d14;--text-mid:#7a5030;--text-dim:#b09070;--gold:#d4a060;--gold-deep:#c08848;--lilac:#c09060;}
html[data-theme="autumn"] body{background:radial-gradient(circle at 12% 8%,#fff8f0 0%,transparent 38%),radial-gradient(circle at 88% 6%,#fff0e0 0%,transparent 35%),radial-gradient(circle at 92% 92%,#ffdcb0 0%,transparent 45%),radial-gradient(circle at 6% 96%,#f0c090 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="autumn"] .heart-frame .heart-shape{background:linear-gradient(160deg,#ffdcb0,#f0c090);}
html[data-theme="autumn"] .bloom-glow{background:radial-gradient(circle,rgba(212,160,96,0.4),transparent 70%);}
html[data-theme="autumn"] .custom-cursor{background:radial-gradient(circle,rgba(212,160,96,0.4),transparent 70%);}

html[data-theme="eternal"]{--bg1:#faf8f0;--bg2:#faf3dc;--bg3:#f0e8c8;--bg4:#faf3dc;--panel:rgba(250,248,240,0.62);--hairline:#e8e0c8;--rose:#b89850;--rose-deep:#a08040;--rose-deeper:#8a7038;--text-mid:#7a7050;--text-dim:#b0a880;--gold:#d4af37;--gold-deep:#c0a030;--lilac:#c8b898;}
html[data-theme="eternal"] body{background:radial-gradient(circle at 12% 8%,#ffffff 0%,transparent 38%),radial-gradient(circle at 88% 6%,#faf8f0 0%,transparent 35%),radial-gradient(circle at 92% 92%,#faf3dc 0%,transparent 45%),radial-gradient(circle at 6% 96%,#f0e8c8 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="eternal"] .heart-frame .heart-shape{background:linear-gradient(160deg,#faf3dc,#f0e8c8);}
html[data-theme="eternal"] .bloom-glow{background:radial-gradient(circle,rgba(212,175,55,0.4),transparent 70%);}
html[data-theme="eternal"] .custom-cursor{background:radial-gradient(circle,rgba(212,175,55,0.4),transparent 70%);}

/* ---------- Auth gate ---------- */
.auth-gate{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:100%; max-width:380px; background:var(--panel); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1.5px solid var(--hairline); border-radius:26px; padding:28px 26px 30px; box-shadow:0 16px 38px rgba(185,58,95,0.2), inset 0 1px 0 rgba(255,255,255,0.85); }
.auth-brand{ font-family:'Great Vibes', cursive; font-size:30px; color:var(--rose-deeper); text-align:center; margin-bottom:18px; display:flex; align-items:center; justify-content:center; gap:8px; }
.auth-step h3{ font-family:'Playfair Display', serif; font-style:italic; font-size:19px; color:var(--rose-deeper); text-align:center; margin:0 0 16px; }
.auth-step label{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); margin:12px 0 5px; }
.auth-step input{ width:100%; padding:11px 13px; border-radius:12px; border:1.5px solid var(--hairline); background:rgba(255,255,255,0.7); font-family:'Quicksand',sans-serif; font-size:14.5px; color:var(--text-mid); outline:none; }
.auth-step input:focus{ border-color:var(--rose); }
.auth-btn{ width:100%; margin-top:18px; padding:12px; border-radius:14px; font-weight:700; font-size:14.5px; border:none; cursor:pointer; }
.btn-primary.auth-btn{ background:linear-gradient(120deg, var(--rose), var(--rose-deep)); color:#fff; box-shadow:0 6px 16px rgba(185,58,95,0.3); }
.btn-secondary.auth-btn{ background:rgba(255,255,255,0.6); color:var(--rose-deep); border:1.5px solid var(--hairline); }
.auth-error{ color:#c0334f; font-size:12.5px; text-align:center; min-height:16px; margin-top:8px; }
.auth-switch{ text-align:center; font-size:12.5px; color:var(--text-dim); margin-top:16px; }
.auth-switch a{ color:var(--rose-deep); font-weight:700; cursor:pointer; text-decoration:underline; }
.auth-hint{ font-size:12.5px; color:var(--text-dim); text-align:center; margin:0 0 6px; }
.auth-divider{ text-align:center; font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em; margin:16px 0; position:relative; }
.invite-code-display{ text-align:center; font-family:'Playfair Display', serif; font-weight:700; font-size:26px; letter-spacing:0.08em; color:var(--rose-deeper); background:rgba(255,255,255,0.6); border-radius:14px; padding:16px; margin:14px 0; border:1.5px dashed var(--rose); }

/* ---------- Future Letters page ---------- */
.letters-list{ display:flex; flex-direction:column; gap:12px; }
.letter-card{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:18px; padding:16px 18px; box-shadow:0 6px 16px rgba(185,58,95,0.1); position:relative; overflow:hidden; }
.letter-card.locked{ opacity:0.85; }
.letter-card .lc-icon{ font-size:28px; margin-bottom:6px; display:block; }
.letter-card .lc-title{ font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deeper); font-size:15px; margin-bottom:2px; }
.letter-card .lc-unlock{ font-size:10.5px; color:var(--gold-deep); font-weight:700; letter-spacing:0.05em; margin-bottom:6px; }
.letter-card .lc-content{ font-size:13px; line-height:1.6; color:#7a4256; white-space:pre-wrap; display:none; }
.letter-card.unlocked .lc-content{ display:block; }
.letter-card .lc-lock{ text-align:center; padding:18px; color:var(--text-dim); font-size:12px; }
.letter-card .lc-lock .lc-lock-icon{ font-size:32px; display:block; margin-bottom:6px; }
.letter-card .lc-actions{ display:flex; gap:8px; margin-top:10px; }
.letter-card .lc-actions button{ font-size:10.5px; font-weight:700; border:none; background:none; color:var(--rose-deep); cursor:pointer; padding:2px 6px; }
.letter-modal textarea{ min-height:120px !important; }

/* ---------- Memory Map page ---------- */
.map-container{ width:100%; max-width:660px; margin:0 auto; }
.map-empty{ text-align:center; padding:40px 20px; color:var(--text-dim); font-size:13px; }
.map-empty .map-empty-icon{ font-size:40px; display:block; margin-bottom:10px; }
.map-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; }
.map-card{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:16px; padding:14px; box-shadow:0 6px 16px rgba(185,58,95,0.1); cursor:pointer; transition:transform 0.15s ease; }
.map-card:hover{ transform:translateY(-2px); }
.map-card:active{ transform:scale(0.96); }
.map-card .mc-emoji{ font-size:22px; margin-bottom:4px; display:block; }
.map-card .mc-title{ font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deeper); font-size:14px; }
.map-card .mc-location{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.map-card .mc-photo{ width:100%; height:80px; object-fit:cover; border-radius:10px; margin-top:8px; }

/* ---------- Voice Memories page ---------- */
.voice-list{ display:flex; flex-direction:column; gap:12px; }
.voice-card{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:18px; padding:14px 18px; box-shadow:0 6px 16px rgba(185,58,95,0.1); }
.voice-card .vc-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.voice-card .vc-title{ font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deeper); font-size:14px; }
.voice-card .vc-date{ font-size:10px; color:var(--text-dim); }
.voice-card .vc-duration{ font-size:11px; color:var(--rose-deep); font-weight:600; }
.voice-card audio{ width:100%; height:36px; margin-top:6px; border-radius:8px; }
.voice-card .vc-actions{ display:flex; gap:8px; margin-top:8px; }
.voice-card .vc-actions button{ font-size:10.5px; font-weight:700; border:none; background:none; color:var(--rose-deep); cursor:pointer; padding:2px 6px; }
.voice-record-btn{ width:64px; height:64px; border-radius:50%; border:3px solid var(--rose); background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; transition:all 0.2s ease; margin:0 auto 16px; box-shadow:0 4px 14px rgba(185,58,95,0.2); }
.voice-record-btn:active{ transform:scale(0.92); }
.voice-record-btn.recording{ background:var(--rose); border-color:var(--rose-deep); animation:recPulse 1s ease-in-out infinite; }
@keyframes recPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,83,122,0.4); } 50%{ box-shadow:0 0 0 12px rgba(224,83,122,0); } }
.voice-timer{ text-align:center; font-family:'Playfair Display',serif; font-size:22px; color:var(--rose-deeper); font-weight:700; margin-bottom:12px; min-height:30px; }

/* ---------- Memory Movie page ---------- */
.movie-preview{ width:100%; max-width:520px; margin:0 auto; aspect-ratio:16/9; background:var(--panel); border:1.5px solid var(--hairline); border-radius:18px; overflow:hidden; position:relative; box-shadow:0 12px 30px rgba(185,58,95,0.15); }
.movie-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.8s ease; }
.movie-slide.active{ opacity:1; }
.movie-slide img{ width:100%; height:100%; object-fit:cover; }
.movie-slide .ms-overlay{ position:absolute; bottom:0; left:0; right:0; padding:14px 18px; background:linear-gradient(transparent, rgba(0,0,0,0.6)); color:#fff; }
.movie-slide .ms-caption{ font-family:'Playfair Display',serif; font-style:italic; font-size:14px; }
.movie-slide .ms-date{ font-size:10px; opacity:0.8; margin-top:2px; }
.movie-info{ text-align:center; margin-top:14px; font-size:12px; color:var(--text-dim); }
.movie-info b{ color:var(--rose-deep); }

/* ---------- Mood Timeline page ---------- */
.mood-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; max-width:520px; margin:0 auto; }
.mood-day{ aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(255,255,255,0.4); border:1px solid var(--hairline); cursor:pointer; transition:transform 0.15s ease; }
.mood-day:hover{ transform:scale(1.1); }
.mood-day.empty{ background:transparent; border:none; cursor:default; }
.mood-day.empty:hover{ transform:none; }
.mood-month-label{ grid-column:1/-1; font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deep); font-size:13px; text-align:center; padding:8px 0 4px; }
.mood-legend{ display:flex; gap:12px; justify-content:center; margin:14px 0; flex-wrap:wrap; }
.mood-legend-item{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-dim); }
.mood-legend-item span{ font-size:16px; }
.mood-health{ max-width:520px; margin:16px auto 0; }
.mood-health-title{ font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deep); font-size:14px; margin-bottom:8px; text-align:center; }
.mood-health-row{ display:flex; gap:4px; justify-content:center; margin-bottom:4px; }
.mood-health-month{ font-size:10px; color:var(--text-dim); width:36px; text-align:right; padding-right:6px; font-weight:700; flex:0 0 auto; }
.mood-health-emojis{ display:flex; gap:2px; font-size:13px; }

/* ---------- Surprise Button ---------- */
.surprise-overlay{ position:fixed; inset:0; z-index:250; background:rgba(0,0,0,0.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity 0.4s ease; }
.surprise-overlay.show{ display:flex; opacity:1; }
.surprise-card{ background:var(--panel); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1.5px solid var(--hairline); border-radius:24px; padding:28px; width:90%; max-width:340px; text-align:center; box-shadow:0 20px 50px rgba(185,58,95,0.3); transform:scale(0.8); transition:transform 0.5s cubic-bezier(.2,.8,.3,1); }
.surprise-overlay.show .surprise-card{ transform:scale(1); }
.surprise-card .sc-type{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px; }
.surprise-card .sc-emoji{ font-size:48px; margin-bottom:10px; display:block; animation:bloomIn 0.8s cubic-bezier(.2,.8,.3,1) both; }
.surprise-card .sc-title{ font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deeper); font-size:18px; margin-bottom:6px; }
.surprise-card .sc-date{ font-size:11px; color:var(--text-dim); margin-bottom:10px; }
.surprise-card .sc-content{ font-size:13px; line-height:1.6; color:#7a4256; }
.surprise-card img{ width:100%; max-height:240px; object-fit:cover; border-radius:14px; margin-bottom:10px; }
.surprise-card .sc-close{ margin-top:16px; }

/* ---------- This Day Years Ago page ---------- */
.tdy-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px; }
.tdy-card{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:18px; padding:16px 18px; box-shadow:0 6px 16px rgba(185,58,95,0.1); }
.tdy-card .tdy-years{ font-size:11px; font-weight:700; color:var(--gold-deep); letter-spacing:0.05em; margin-bottom:4px; }
.tdy-card .tdy-title{ font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deeper); font-size:14px; margin-bottom:2px; }
.tdy-card .tdy-date{ font-size:10px; color:var(--text-dim); margin-bottom:6px; }
.tdy-card .tdy-content{ font-size:12.5px; line-height:1.5; color:#7a4256; }
.tdy-card img{ width:100%; max-height:140px; object-fit:cover; border-radius:12px; margin-top:8px; }
.tdy-empty{ text-align:center; padding:40px 20px; color:var(--text-dim); font-size:13px; }
.tdy-empty .tdy-empty-icon{ font-size:40px; display:block; margin-bottom:10px; }

/* ---------- Relationship Stats page ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:520px; margin:0 auto; }
.stat-card{ background:var(--panel); border:1.5px solid var(--hairline); border-radius:16px; padding:16px 10px; text-align:center; box-shadow:0 6px 14px rgba(185,58,95,0.1); }
.stat-card .st-emoji{ font-size:22px; margin-bottom:4px; display:block; }
.stat-card .st-num{ font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deeper); font-size:clamp(1.2rem,4vw,1.7rem); }
.stat-card .st-lbl{ font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); font-weight:700; margin-top:3px; }
.stats-bar{ max-width:520px; margin:16px auto 0; background:var(--panel); border:1.5px solid var(--hairline); border-radius:16px; padding:14px 18px; }
.stats-bar .sb-title{ font-family:'Playfair Display',serif; font-weight:700; color:var(--rose-deeper); font-size:14px; margin-bottom:10px; }
.stats-bar .sb-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.stats-bar .sb-label{ font-size:11px; color:var(--text-dim); font-weight:600; width:90px; flex:0 0 auto; }
.stats-bar .sb-track{ flex:1; height:8px; background:rgba(255,255,255,0.5); border-radius:999px; overflow:hidden; }
.stats-bar .sb-fill{ height:100%; background:linear-gradient(90deg, var(--rose), var(--rose-deep)); border-radius:999px; transition:width 0.6s ease; }
.stats-bar .sb-value{ font-size:11px; color:var(--rose-deep); font-weight:700; width:36px; text-align:right; flex:0 0 auto; }

/* ---------- Weather Memory badge ---------- */
.weather-badge{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:var(--text-dim); background:rgba(255,255,255,0.5); border-radius:999px; padding:3px 8px; margin-top:4px; }
.weather-badge .wb-temp{ font-weight:700; color:var(--rose-deep); }
.nc-weather{ margin-top:4px; }

/* ---------- Night mode theme overrides ---------- */
html[data-theme="sakura"]{--bg1:#fce4ec;--bg2:#f8bbd0;--bg3:#f48fb1;--bg4:#f8bbd0;--panel:rgba(252,228,236,0.62);--hairline:#f48fb1;--rose:#e91e63;--rose-deep:#c2185b;--rose-deeper:#880e4f;--text-mid:#880e4f;--text-dim:#c2185b;--gold:#f8bbd0;--gold-deep:#f06292;--lilac:#f48fb1;}
html[data-theme="sakura"] body{background:radial-gradient(circle at 12% 8%,#fff0f3 0%,transparent 38%),radial-gradient(circle at 88% 6%,#fce4ec 0%,transparent 35%),radial-gradient(circle at 92% 92%,#f8bbd0 0%,transparent 45%),radial-gradient(circle at 6% 96%,#f48fb1 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="sakura"] .heart-frame .heart-shape{background:linear-gradient(160deg,#f8bbd0,#f48fb1);}
html[data-theme="sakura"] .bloom-glow{background:radial-gradient(circle,rgba(233,30,99,0.3),transparent 70%);}

html[data-theme="rain"]{--bg1:#eceff1;--bg2:#cfd8dc;--bg3:#b0bec5;--bg4:#cfd8dc;--panel:rgba(236,239,241,0.62);--hairline:#b0bec5;--rose:#546e7a;--rose-deep:#37474f;--rose-deeper:#263238;--text-mid:#37474f;--text-dim:#78909c;--gold:#90a4ae;--gold-deep:#78909c;--lilac:#b0bec5;}
html[data-theme="rain"] body{background:radial-gradient(circle at 12% 8%,#f5f5f5 0%,transparent 38%),radial-gradient(circle at 88% 6%,#eceff1 0%,transparent 35%),radial-gradient(circle at 92% 92%,#cfd8dc 0%,transparent 45%),radial-gradient(circle at 6% 96%,#b0bec5 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="rain"] .heart-frame .heart-shape{background:linear-gradient(160deg,#cfd8dc,#b0bec5);}
html[data-theme="rain"] .bloom-glow{background:radial-gradient(circle,rgba(84,110,122,0.3),transparent 70%);}

html[data-theme="galaxy"]{--bg1:#0d0221;--bg2:#190640;--bg3:#0d0221;--bg4:#190640;--panel:rgba(25,6,64,0.65);--hairline:#3a1a7a;--rose:#b388ff;--rose-deep:#9c5cff;--rose-deeper:#d1c4e9;--text-mid:#b39ddb;--text-dim:#7e57c2;--gold:#ffd54f;--gold-deep:#ffca28;--lilac:#ce93d8;}
html[data-theme="galaxy"] body{background:radial-gradient(circle at 12% 8%,#1a0a50 0%,transparent 38%),radial-gradient(circle at 88% 6%,#0d0221 0%,transparent 35%),radial-gradient(circle at 92% 92%,#3a1a7a 0%,transparent 45%),radial-gradient(circle at 6% 96%,#190640 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="galaxy"] .heart-frame .heart-shape{background:linear-gradient(160deg,#3a1a7a,#0d0221);}
html[data-theme="galaxy"] .bloom-glow{background:radial-gradient(circle,rgba(179,136,255,0.35),transparent 70%);}

html[data-theme="cottage"]{--bg1:#fdf6ee;--bg2:#f5e6d3;--bg3:#d7ccc8;--bg4:#f5e6d3;--panel:rgba(253,246,238,0.62);--hairline:#d7ccc8;--rose:#795548;--rose-deep:#5d4037;--rose-deeper:#3e2723;--text-mid:#5d4037;--text-dim:#a1887f;--gold:#bcaaa4;--gold-deep:#a1887f;--lilac:#d7ccc8;}
html[data-theme="cottage"] body{background:radial-gradient(circle at 12% 8%,#fefbf5 0%,transparent 38%),radial-gradient(circle at 88% 6%,#fdf6ee 0%,transparent 35%),radial-gradient(circle at 92% 92%,#f5e6d3 0%,transparent 45%),radial-gradient(circle at 6% 96%,#d7ccc8 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="cottage"] .heart-frame .heart-shape{background:linear-gradient(160deg,#f5e6d3,#d7ccc8);}
html[data-theme="cottage"] .bloom-glow{background:radial-gradient(circle,rgba(121,85,72,0.3),transparent 70%);}

html[data-theme="christmas"]{--bg1:#e8f5e9;--bg2:#c8e6c9;--bg3:#a5d6a7;--bg4:#c8e6c9;--panel:rgba(232,245,233,0.62);--hairline:#a5d6a7;--rose:#c62828;--rose-deep:#b71c1c;--rose-deeper:#8e0000;--text-mid:#b71c1c;--text-dim:#ef5350;--gold:#ffd54f;--gold-deep:#ffca28;--lilac:#ef9a9a;}
html[data-theme="christmas"] body{background:radial-gradient(circle at 12% 8%,#f1f8e9 0%,transparent 38%),radial-gradient(circle at 88% 6%,#e8f5e9 0%,transparent 35%),radial-gradient(circle at 92% 92%,#c8e6c9 0%,transparent 45%),radial-gradient(circle at 6% 96%,#a5d6a7 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="christmas"] .heart-frame .heart-shape{background:linear-gradient(160deg,#c8e6c9,#a5d6a7);}
html[data-theme="christmas"] .bloom-glow{background:radial-gradient(circle,rgba(198,40,40,0.3),transparent 70%);}

html[data-theme="valentine"]{--bg1:#fce4ec;--bg2:#f8bbd0;--bg3:#f48fb1;--bg4:#f8bbd0;--panel:rgba(252,228,236,0.62);--hairline:#f48fb1;--rose:#e91e63;--rose-deep:#c2185b;--rose-deeper:#880e4f;--text-mid:#880e4f;--text-dim:#f06292;--gold:#ff80ab;--gold-deep:#f50057;--lilac:#f48fb1;}
html[data-theme="valentine"] body{background:radial-gradient(circle at 12% 8%,#fff0f3 0%,transparent 38%),radial-gradient(circle at 88% 6%,#fce4ec 0%,transparent 35%),radial-gradient(circle at 92% 92%,#f8bbd0 0%,transparent 45%),radial-gradient(circle at 6% 96%,#f48fb1 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="valentine"] .heart-frame .heart-shape{background:linear-gradient(160deg,#f8bbd0,#f48fb1);}
html[data-theme="valentine"] .bloom-glow{background:radial-gradient(circle,rgba(233,30,99,0.35),transparent 70%);}

html[data-theme="halloween"]{--bg1:#fff3e0;--bg2:#ffe0b2;--bg3:#ffcc80;--bg4:#ffe0b2;--panel:rgba(255,243,224,0.62);--hairline:#ffcc80;--rose:#e65100;--rose-deep:#bf360c;--rose-deeper:#8b2500;--text-mid:#bf360c;--text-dim:#ff8a65;--gold:#ffb74d;--gold-deep:#ffa726;--lilac:#ffab91;}
html[data-theme="halloween"] body{background:radial-gradient(circle at 12% 8%,#fff8e1 0%,transparent 38%),radial-gradient(circle at 88% 6%,#fff3e0 0%,transparent 35%),radial-gradient(circle at 92% 92%,#ffe0b2 0%,transparent 45%),radial-gradient(circle at 6% 96%,#ffcc80 0%,transparent 42%),linear-gradient(165deg,var(--bg1),var(--bg2) 45%,var(--bg4) 75%,var(--bg3));}
html[data-theme="halloween"] .heart-frame .heart-shape{background:linear-gradient(160deg,#ffe0b2,#ffcc80);}
html[data-theme="halloween"] .bloom-glow{background:radial-gradient(circle,rgba(230,81,0,0.3),transparent 70%);}