@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito', sans-serif; -webkit-tap-highlight-color: transparent; }

body { background: #07051a; height: 100vh; width: 100vw; overflow: hidden; color: #fff; }

/* Global Glass & Nav Classes */
.glass-panel { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; }
.glass-nav { background: rgba(10, 10, 25, 0.6); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

/* Screen Base */
.screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: none; flex-direction: column; 
    opacity: 0; transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.screen.active { display: flex; opacity: 1; }
.z-top { z-index: 9999; }

/* --- 1. PREMIUM SMOOTH LOADER --- */
#loading-screen { background: linear-gradient(135deg, #1a0b2e, #4a1942); justify-content: center; align-items: center; }
#loading-screen.fade-out { opacity: 0; transform: scale(1.05); pointer-events: none; }

.glass-loader { text-align: center; padding: 40px; background: rgba(255,255,255,0.03); border-radius: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.05); }
.loader-heart-wrapper { position: relative; width: 100px; height: 100px; margin: 0 auto 25px; display: flex; justify-content: center; align-items: center; }
.glowing-heart { font-size: 4.5rem; color: #ff3366; text-shadow: 0 0 30px #ff3366; animation: softBeat 1.5s infinite; z-index: 2; }
.pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #ff3366; animation: ripple 1.5s infinite; z-index: 1; }
@keyframes softBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ripple { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

.typing-text { font-size: 1.5rem; font-weight: 800; color: #fce4ec; margin-bottom: 10px; overflow: hidden; white-space: nowrap; border-right: 2px solid #ff3366; animation: typing 2s steps(20, end), blinkCursor 0.75s step-end infinite; }
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blinkCursor { from, to { border-color: transparent } 50% { border-color: #ff3366 } }
.loader-subtitle { color: #aaa; font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; }

/* --- 2. LOCK SCREEN --- */
#lock-screen { align-items: center; justify-content: center; background: url('arshad.jpg') center/cover; }
#lock-screen::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.65); backdrop-filter: blur(15px); }
.time-display { font-size: 5rem; font-weight: 800; z-index: 2; margin-top: 5%; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.date-display { font-size: 1.2rem; z-index: 2; margin-bottom: 30px; letter-spacing: 1px; }
.lock-panel { z-index: 2; text-align: center; padding: 30px 20px; width: 90%; max-width: 350px; }
.lock-icon { font-size: 1.5rem; margin-bottom: 10px; color: #ff4b72; }
.pin-display { font-size: 2.2rem; letter-spacing: 12px; margin: 20px 0; font-weight: bold; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 auto; max-width: 260px; }
.keypad button { width: 65px; height: 65px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.1); color: white; font-size: 1.6rem; cursor: pointer; transition: 0.2s; }
.keypad button:active { background: rgba(255,255,255,0.4); transform: scale(0.9); }
.action-btn { background: transparent !important; border: none !important; font-size: 1.3rem !important; }
#lock-error { color: #ff4b72; margin-top: 15px; height: 20px; font-size: 0.85rem; font-weight: 600; }

/* --- 3. HOME DASHBOARD --- */
#home-screen { background: url('cat.jpg') center/cover; }
#home-screen::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); }
.status-bar { z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.dynamic-greeting { font-size: 0.95rem; font-weight: 800; color: #ffebf0; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.app-grid { z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 40px 15px; }
.app-icon { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s; }
.app-icon:active { transform: scale(0.9); }
.icon-bg { width: 65px; height: 65px; border-radius: 20px; display: flex; justify-content: center; align-items: center; font-size: 2rem; margin-bottom: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.4); color: #fff; }
.app-icon span { font-size: 0.8rem; font-weight: 700; text-shadow: 0 2px 5px rgba(0,0,0,0.9); color: #fff; }

/* Floating Music Player */
.mini-player { position: absolute; bottom: 35px; left: 5%; width: 90%; z-index: 10; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 15px 30px rgba(0,0,0,0.5); }
.mini-player img { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; }
.mini-info { flex: 1; margin: 0 15px; overflow: hidden; }
.mini-info p { font-weight: 800; font-size: 1rem; color: #fff; margin-bottom: 2px; }
.mini-info marquee { font-size: 0.8rem; color: #b3b3b3; }
.play-btn-circle { width: 45px; height: 45px; border-radius: 50%; background: #ff4b72; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; color: #fff; box-shadow: 0 0 15px rgba(255,75,114,0.5); }

/* --- 4. APP WINDOWS --- */
.app-window { position: fixed; top: 100%; left: 0; width: 100%; height: 100%; background: #0a0a0f; z-index: 100; transition: top 0.5s cubic-bezier(0.25, 1, 0.5, 1); display: flex; flex-direction: column; }
.app-window.open { top: 0; }
.app-header { padding: 15px 20px; display: flex; align-items: center; }
.app-header button { background: none; border: none; color: #ff4b72; font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.app-header span { font-size: 1.2rem; font-weight: 700; margin-left: 20px; }

/* App Specifics */
.chat-profile { display: flex; align-items: center; margin-left: auto; justify-content: flex-end; }
.chat-profile img { width: 35px; height: 35px; border-radius: 50%; margin-right: 10px; object-fit: cover; }
.chat-body { flex: 1; padding: 20px; overflow-y: auto; background: url('https://i.pinimg.com/originals/8f/ba/cb/8fbacbd464e996966eb9d4a6b7a9c21e.jpg') center/cover; display: flex; flex-direction: column; gap: 15px; }
.bubble { max-width: 80%; padding: 12px 18px; border-radius: 20px; font-size: 0.95rem; line-height: 1.4; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.bubble.left { background: rgba(38,45,49,0.95); color: #fff; align-self: flex-start; border-bottom-left-radius: 5px; }
.bubble.right { background: rgba(0,92,75,0.95); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }

.gradient-bg-1 { background: linear-gradient(to bottom, #2b081a, #000); }
.meter-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.glow-title { color: #ff4b72; font-size: 2.2rem; margin-bottom: 40px; text-shadow: 0 0 15px rgba(255,75,114,0.4); }
.scanner-box { padding: 40px; border-radius: 50%; text-align: center; cursor: pointer; transition: 0.3s; width: 220px; height: 220px; display: flex; flex-direction: column; justify-content: center; }
.scanner-box:active { transform: scale(0.95); background: rgba(255,75,114,0.2); border-color: #ff4b72; }
#fingerprint { font-size: 4.5rem; color: #ff4b72; margin-bottom: 10px; }
.result-box { margin-top: 30px; text-align: center; opacity: 0; transition: opacity 0.5s; }
#lovePercent { font-size: 4.5rem; color: #00e676; text-shadow: 0 0 20px rgba(0,230,118,0.5); font-weight: 800; }

.gradient-bg-2 { background: linear-gradient(to bottom, #160a2e, #0f0c29); }
.notes-body { flex: 1; padding: 30px; display: flex; flex-direction: column; align-items: center; }
.notes-img { width: 140px; height: 140px; border-radius: 20px; object-fit: cover; border: 3px solid #7579ff; margin-bottom: 30px; box-shadow: 0 10px 20px rgba(117,121,255,0.3); }
.typewriter-box { padding: 25px; width: 100%; min-height: 120px; margin-bottom: 30px; font-style: italic; font-size: 1.1rem; line-height: 1.5; color: #e0e0e0; }
.generate-btn { width: 100%; padding: 18px; border-radius: 15px; color: #fff; font-weight: bold; font-size: 1.1rem; cursor: pointer; border: none; background: linear-gradient(45deg, #b224ef, #7579ff); box-shadow: 0 5px 20px rgba(117,121,255,0.4); }

.gradient-bg-3 { background: linear-gradient(to bottom, #1a1005, #000); }
.vault-body { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.vault-item { display: flex; align-items: center; background: rgba(255,255,255,0.05); padding: 18px; border-radius: 18px; cursor: pointer; border: 1px solid rgba(255,255,255,0.02); transition: 0.2s; }
.vault-item:active { transform: scale(0.98); background: rgba(255,255,255,0.1); }
.vault-item i { font-size: 1.8rem; color: #fda085; margin-right: 18px; }
.vault-item-info h4 { font-size: 1.1rem; color: #fff; }