* {margin:0; padding:0; box-sizing:border-box; font-family:'Arial',sans-serif;}

body {
    background: linear-gradient(135deg,#74ABE2,#5563DE);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    padding: 10px;
}

/* Container */
.container {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding:30px 20px;
    border-radius:20px;
    text-align:center;
    width:100%;
    max-width:400px;
    box-shadow:0 8px 20px rgba(0,0,0,0.3);
}

/* Heading and text */
h1 {font-size:2rem; margin-bottom:10px;}
p {margin-bottom:20px; font-size:1rem; color:#e0e0e0;}

/* Input group */
.input-group {display:flex; justify-content:center; gap:10px; margin-bottom:20px; flex-wrap:wrap;}
input[type="date"] {
    padding:10px; border-radius:10px; border:none; outline:none;
    font-size:1rem; text-align:center; flex:1 1 120px;
}
button {
    padding:10px 20px; border-radius:10px; border:none; background:#00c6ff;
    color:#fff; font-size:1rem; cursor:pointer; transition:all 0.3s ease; flex:1 1 100px;
}
button:hover {background:#0072ff; transform:translateY(-2px);}

/* Result card */
.result-card {
    margin-top:20px; padding:20px; border-radius:15px;
    background: rgba(255,255,255,0.2); font-size:1.1rem;
    font-weight:bold; color:#fff; min-height:150px;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    transition:all 0.5s ease; opacity:0;
}
.result-card.show {opacity:1; animation:fadeIn 0.5s ease-in-out; cursor:pointer;}
.result-card:hover {transform:scale(1.05) rotate(-3deg); transition:0.3s;}

@keyframes fadeIn {from {opacity:0; transform:translateY(-10px);} to {opacity:1; transform:translateY(0);}}

/* Confetti Canvas */
#confettiCanvas {
    position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999;
}

/* Footer */
footer {
    margin-top:20px;
    padding:10px 0;
    width:100%;
    text-align:center;
    color:#e0e0e0;
    font-size:0.9rem;
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
    border-top:1px solid rgba(255,255,255,0.2);
}

/* Responsive adjustments */
@media (max-width:480px){
    h1 {font-size:1.5rem;}
    p {font-size:0.9rem;}
    .result-card {font-size:1rem; padding:15px;}
    button, input[type="date"] {font-size:0.9rem; padding:8px;}
}