body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', sans-serif; overflow-x: hidden; background-color: transparent; -webkit-user-select: none; user-select: none; }

#video-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100vw;
    min-height: 100vh;
    z-index: -100;
    object-fit: cover;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#menu-btn { position: fixed; top: 25px; left: 30px; font-size: 32px; color: rgba(255, 255, 255, 0.9); cursor: pointer; z-index: 99999; background: transparent; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#menu-btn:hover { transform: scale(1.1); color: #ff4757; }
#sidebar { height: 100vh; width: 300px; position: fixed; top: 0; left: -320px; background: rgba(15, 15, 15, 0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); padding-top: 90px; z-index: 99998; border-right: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 10px 0 30px rgba(0,0,0,0.5); }
.sidebar-header { color: #fff; font-size: 20px; text-align: center; margin-bottom: 30px; padding-bottom: 20px; width: 80%; margin: 0 auto 30px auto; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
#sidebar a { padding: 16px 25px; text-decoration: none; font-size: 16px; color: rgba(255, 255, 255, 0.65); display: block; transition: all 0.3s ease; margin: 8px 20px; border-radius: 12px; font-weight: 400; letter-spacing: 1px; background: rgba(255, 255, 255, 0.02); border: 1px solid transparent; }
#sidebar a:hover { background: rgba(255, 71, 87, 0.1); color: #fff; border: 1px solid rgba(255, 71, 87, 0.3); transform: translateX(6px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
#sidebar a i { margin-right: 15px; width: 25px; text-align: center; color: #ff4757; font-size: 18px; }

#main-content { padding: 80px 20px 40px 20px; text-align: center; min-height: 100vh; display: block; background: rgba(255, 240, 243, 0.95); color: #333; }
.header-msg h1 { font-size: 3.5em; margin-bottom: 10px; text-shadow: 0 2px 8px rgba(255,71,87,0.15); font-weight: 300; letter-spacing: 2px; color: #333; }

.app-container { display: flex; justify-content: center; gap: 30px; margin: 50px 0; flex-wrap: wrap; }
.app-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s; }
.app-item:hover { transform: scale(1.1); }
.app-icon { width: 75px; height: 75px; border-radius: 20px; display: flex; justify-content: center; align-items: center; font-size: 34px; color: white; margin-bottom: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.app-item span { font-weight: 400; letter-spacing: 1px; font-size: 1.1em; color: #444; }
.icon-letter { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: #333; }
.icon-time { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.icon-song { background: linear-gradient(135deg, #84fab0, #8fd3f4); color: #333; }
.icon-album { background: linear-gradient(135deg, #fccb90, #d57eeb); }

#app-display-area { background: #fff; border-radius: 25px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); max-width: 800px; margin: 0 auto; color: #333; }
.hidden-content { display: none; animation: fadeIn 0.6s ease-out; }
.active-content { display: block; }
#app-display-area h3 { color: #ff4757; font-size: 2em; margin-top: 0; font-weight: 400; letter-spacing: 1px;}
#app-display-area p { line-height: 1.8; font-size: 1.15em; color: #555; }

#timer-container { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin: 40px 0; }
.time-box { background: #fff0f3; padding: 20px 25px; border-radius: 15px; min-width: 80px; border: 1px solid rgba(255,71,87,0.1); box-shadow: inset 0 0 12px rgba(255,71,87,0.05); }
.time-box span { display: block; font-size: 3em; font-weight: bold; color: #333; }
.time-box small { color: #999; text-transform: uppercase; font-size: 0.85em; letter-spacing: 2px; }
.sec-box span { color: #ff4757; }
.timer-footer { color: #999; font-size: 1em; letter-spacing: 1px; }
.heartbeat { display: inline-block; width: 25px; height: 25px; background: url('https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/2764.png') no-repeat center/contain; margin-left: 15px; animation: pulse 1s infinite; vertical-align: baseline;}

.spotify-wrapper { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin: 30px auto; border: 1px solid rgba(0,0,0,0.05); max-width: 500px; }

.gallery-section { margin-bottom: 50px; }
.gallery-section:last-child { margin-bottom: 10px; }
.gallery-title { color: #ff4757; font-size: 1.3em; font-weight: 500; letter-spacing: 1px; margin-bottom: 25px; text-transform: uppercase; border-bottom: 2px solid rgba(255,71,87,0.15); display: inline-block; padding-bottom: 8px; }

.featured-photo { display: flex; justify-content: center; margin-bottom: 30px; }
.featured-polaroid { width: 280px !important; transform: rotate(-1deg) !important; }
.featured-polaroid:hover { transform: scale(1.05) rotate(-1deg) !important; }

.polaroid-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 35px; padding: 20px; }
.polaroid { background: #fff; padding: 12px 12px 30px 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); transform: rotate(0deg); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; width: 190px; border: 1px solid #ddd; border-radius: 2px; }
.polaroid:hover { transform: scale(1.08) rotate(0deg) !important; z-index: 10; box-shadow: 0 25px 50px rgba(0,0,0,0.3); }
.polaroid .img-box { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: #000; }
.polaroid img { width: 100%; height: 100%; object-fit: cover; filter: contrast(110%) brightness(105%); }

@keyframes fadeIn { from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);} }
@keyframes pulse { 0% { transform: scale(1); } 20% { transform: scale(1.2); } 40% { transform: scale(1); } 60% { transform: scale(1.1); } 80% { transform: scale(1); } }