:root {
    --soft-pink: #ffc2d1; --light-pink: #fff0f3; --deep-pink: #fb6f92;
    --boy-blue: #a2d2ff; --glass: rgba(255, 255, 255, 0.75);
    --xmas-red: #d62828; --xmas-green: #2d6a4f;
}
body { margin: 0; font-family: 'PingFang SC', sans-serif; background: linear-gradient(135deg, #ffe5ec 0%, #ffc2d1 100%); transition: 1s; overflow-x: hidden; }
body.birthday-theme { background: linear-gradient(135deg, var(--xmas-red) 0%, var(--xmas-green) 100%) !important; }
.container { height: 100vh; display: flex; justify-content: center; align-items: center; }
.card { background: var(--glass); padding: 2rem; border-radius: 35px; backdrop-filter: blur(15px); border: 2px solid white; text-align: center; width: 90%; max-width: 500px; }
.hidden { display: none !important; }
.btn { padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; background: var(--deep-pink); color: white; margin: 5px; }
.timer-num { font-size: 1.5rem; font-weight: bold; color: var(--deep-pink); margin: 10px 0; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.menu-item { background: white; padding: 20px; border-radius: 20px; cursor: pointer; color: var(--deep-pink); font-weight: bold; }
.album-view { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.album-view img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.memo-item { padding: 10px; margin: 5px 0; border-radius: 15px; font-size: 13px; max-width: 80%; }
.memo-left { background: var(--light-pink); align-self: flex-start; text-align: left; }
.memo-right { background: var(--boy-blue); color: white; align-self: flex-end; margin-left: 20%; text-align: right; }
#viewer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000; display: none; align-items: center; justify-content: center; flex-direction: column; }
#viewer-img { max-width: 90%; max-height: 80%; border-radius: 10px; }
.decoration { position: fixed; top: -50px; z-index: 99; pointer-events: none; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }