* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #e0e5ec; overflow: hidden; }
.container { position: relative; width: 600px; height: 600px; display: flex; justify-content: center; align-items: center; }
.glass-drop-form { position: relative; width: 380px; height: 400px; z-index: 10; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.8), inset 10px 10px 20px rgba(255, 255, 255, 0.5), inset -10px -10px 20px rgba(0, 0, 0, 0.05); border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; animation: liquid-idle 6s ease-in-out infinite; transition: all 0.5s ease-in-out; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; }
.glass-drop-form:hover { border-radius: 55% 45% 30% 70% / 60% 30% 70% 40%; animation: liquid-hover 3s ease-in-out infinite alternate; transform: scale(1.02); }
@keyframes liquid-idle { 0% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; } 50% { border-radius: 50% 50% 40% 60% / 55% 50% 50% 45%; } 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; } }
@keyframes liquid-hover { 0% { border-radius: 55% 45% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 35% 65% 60% 40% / 35% 60% 40% 65%; } 100% { border-radius: 55% 45% 30% 70% / 60% 30% 70% 40%; } }
.shine { position: absolute; top: 35px; left: 45px; width: 50px; height: 25px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; transform: rotate(-25deg); filter: blur(5px); }
h2 { font-size: 30px; font-weight: 700; color: #4a4a4a; margin-bottom: 30px; z-index: 15; }
form { width: 100%; display: flex; flex-direction: column; align-items: center; z-index: 15; }
.input-box { position: relative; width: 90%; margin-bottom: 20px; }
input { width: 100%; padding: 15px 25px; border-radius: 50px; border: none; outline: none; background: rgba(255, 255, 255, 0.4); box-shadow: inset 3px 3px 6px rgba(0,0,0,0.1), inset -3px -3px 6px rgba(255,255,255,0.8); font-size: 16px; color: #333; cursor: none; transition: 0.3s; }
.liquid-cursor { position: absolute; top: 50%; left: 25px; width: 2px; height: 20px; background: #333; transform: translateY(-50%); pointer-events: none; opacity: 0; transition: opacity 0.2s; box-shadow: 0 0 8px 1px rgba(255,255,255,1); }
.input-box:hover .liquid-cursor { opacity: 1; }
.login-btn { width: 70%; padding: 12px; border-radius: 30px; border: none; background: #ff0055; color: white; font-weight: bold; font-size: 18px; box-shadow: 0 5px 15px rgba(255, 0, 85, 0.3); cursor: pointer; transition: transform 0.2s; margin-top: 10px; }
.login-btn:hover { transform: scale(1.05); }
.blob { position: absolute; display: flex; justify-content: center; align-items: center; text-align: center; color: white; font-weight: 600; cursor: pointer; z-index: 20; transition: all 0.4s ease; box-shadow: 10px 10px 20px rgba(0,0,0,0.15), inset 5px 5px 15px rgba(255,255,255,0.4); }
.blob:hover { transform: scale(1.15); }
.blob-shine { position: absolute; top: 20%; left: 20%; width: 20%; height: 10%; background: rgba(255,255,255,0.8); border-radius: 50%; transform: rotate(-45deg); filter: blur(3px); }
.blue-blob { width: 100px; height: 100px; background: linear-gradient(135deg, #00c6ff, #0072ff); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; right: 120px; top: 220px; animation: liquid-idle 5s infinite alternate-reverse; }
.purple-blob { width: 130px; height: 120px; background: linear-gradient(135deg, #a800ff, #6600ff); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; right: 90px; bottom: 110px; animation: liquid-idle 7s infinite alternate; }
.error-msg { color: #ff0055; background: rgba(255, 255, 255, 0.8); padding: 5px 10px; border-radius: 5px; font-weight: bold; margin-bottom: 15px; text-align: center; }