:root{
  --bg: #fff7fb;
  --fg: #2c2c2c;
  --primary: #ff5fa2;
  --primary-2: #ff8ac1;
  --muted: #6b7280;
  --card: #ffffff;
  --shadow: 0 10px 25px rgba(0,0,0,.07);
}
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#2c2c2c; background:#fff7fb; }
.site-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:#fff; box-shadow:0 10px 25px rgba(0,0,0,.07); position:sticky; top:0; z-index:10; }
.site-header h1{ margin:0; font-weight:800; letter-spacing:.5px; }
.site-header nav a{ margin-left:12px; padding:8px 12px; color:#2c2c2c; text-decoration:none; border-radius:10px; cursor:pointer; }
.site-header nav a:hover{ background:#ffe6f0; color:#111; }
.hero{ display:grid; place-items:center; min-height:70vh; padding:32px; }
.hero-inner{ text-align:center; max-width:720px; }
.hero .btn{ margin:8px; }
.btn{ display:inline-block; padding:10px 16px; border-radius:12px; background:linear-gradient(135deg,#ff5fa2,#ff8ac1); color:white; text-decoration:none; font-weight:600; box-shadow:0 10px 25px rgba(0,0,0,.07); }
.btn.secondary{ background:#111; }
.site-footer{ text-align:center; padding:24px; color:#6b7280; }
.card{ background:#fff; padding:16px; margin:16px; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,.07); }
.muted{ color:#6b7280; font-size:14px; }
/* Calendar */
.calendar-page{ max-width:980px; margin:0 auto; padding:16px; }
.calendar-controls{ display:flex; align-items:center; justify-content:center; gap:12px; margin:16px 0; }
.calendar-controls #monthLabel{ font-weight:700; font-size:20px; }
.calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:10px; }
.calendar-day{ position:relative; background:#fff; border-radius:16px; padding:12px; min-height:88px; box-shadow:0 10px 25px rgba(0,0,0,.07); cursor:pointer; transition: transform .15s ease; }
.calendar-day:hover{ transform: translateY(-2px); }
.calendar-day .date{ font-weight:700; }
.calendar-day .heart{ position:absolute; right:8px; bottom:8px; font-size:18px; color:#ff4b98; filter: drop-shadow(0 2px 4px rgba(255,75,152,.25)); }
/* Modal */
.modal{ position:fixed; inset:0; background: rgba(0,0,0,.4); display:grid; place-items:center; }
.modal.hidden{ display:none; }
.modal-content{ width:min(960px,96vw); max-height:92vh; overflow:auto; background:#fff; border-radius:18px; box-shadow:0 10px 25px rgba(0,0,0,.07); padding:20px; position:relative; }
.modal-close{ position:absolute; right:12px; top:12px; font-size:24px; background:#111; color:#fff; border:none; padding:6px 10px; border-radius:10px; }
.memory h3{ margin:8px 0; }
.memory p{ white-space: pre-wrap; line-height:1.6; }
.memory .media{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:10px; margin-top:12px; }
.memory .media img, .memory .media video{ width:100%; border-radius:12px; }
/* Gallery */
.gallery-page{ max-width:1100px; margin:0 auto; padding:16px; }
.photo-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:10px; }
.photo-grid .cell{ position:relative; overflow:hidden; border-radius:14px; height:200px; background:#f3f4f6; }
.photo-grid img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity 1s ease-in-out; }
.photo-grid img.show{ opacity:1; cursor:pointer; }
/* Music */
.music-page{ max-width:720px; margin:0 auto; padding:16px; }
.player{ background:#fff; border-radius:16px; padding:16px; box-shadow:0 10px 25px rgba(0,0,0,.07); }
.controls{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.progress{ display:flex; align-items:center; gap:10px; }
#seekBar{ flex:1; }
.playlist{ list-style:none; padding-left:0; }
.playlist li{ padding:8px 12px; border-radius:10px; cursor:pointer; }
.playlist li.active{ background:#ffe6f0; }
/* Admin */
.admin-page{ max-width:980px; margin:0 auto; padding:16px; }
label{ display:block; margin:10px 0; }
input[type="text"], input[type="date"], input[type="password"], textarea{ width:100%; padding:10px; border-radius:12px; border:1px solid #e5e7eb; }
.log{ background:#0b1020; color:#d1fae5; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas; padding:10px; border-radius:12px; min-height:40px; }