@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Playfair+Display:wght@700&display=swap');

:root {
    --nykaa-pink: #e61a61;
    --bg-gradient: linear-gradient(135deg, #fff5f7 0%, #fefefe 100%);
}

body { 
    font-family: 'Poppins', sans-serif; 
    background: var(--bg-gradient);
    height: 100vh; 
    margin: 0; 
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; /* Keeps bubbles within bounds */
}

/* --- Floating Bubbles Animation --- */
.bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.bubble {
    position: absolute; bottom: -150px;
    background: rgba(230, 26, 97, 0.08);
    border-radius: 50%;
    animation: rise 12s infinite ease-in;
}

@keyframes rise {
    0% { bottom: -150px; transform: translateX(0); opacity: 0; }
    20% { opacity: 0.5; }
    100% { bottom: 110vh; transform: translateX(100px); opacity: 0; }
}

/* --- Card UI --- */
.dashboard-card { 
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(15px);
    padding: 3rem; 
    border-radius: 25px; 
    box-shadow: 0 15px 35px rgba(230, 26, 97, 0.1); 
    width: 420px; 
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 1;
}

h2 { font-family: 'Playfair Display', serif; color: var(--nykaa-pink); font-size: 2.4rem; margin: 0; }
.subtitle { color: #888; font-size: 0.9rem; margin-bottom: 2rem; }
.brand-tag { font-size: 0.7rem; color: #ccacb4; text-transform: uppercase; letter-spacing: 3px; display: block; margin-bottom: 10px; }

input { 
    width: 100%; padding: 16px 25px; border: 1px solid #ffd1dc; 
    border-radius: 50px; font-size: 0.9rem; outline: none; transition: 0.3s;
    box-sizing: border-box;
}

input:focus { border-color: var(--nykaa-pink); box-shadow: 0 0 10px rgba(230, 26, 97, 0.1); }

button { 
    background: var(--nykaa-pink); color: white; border: none; padding: 16px; 
    border-radius: 50px; cursor: pointer; width: 100%; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; transition: 0.4s; margin-top: 10px;
}

button:hover { background: #c41252; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(230, 26, 97, 0.3); }

#result { margin-top: 25px; font-weight: 600; min-height: 40px; }
#result a { color: var(--nykaa-pink); text-decoration: none; border-bottom: 2px solid #ffd1dc; }
.placeholder-text { color: #ccc; font-weight: 400; font-style: italic; }