.daily-checkin{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:var(--space-xl);
}

.checkin-card{

    width:100%;
    max-width:700px;

    background:var(--surface);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    padding:3rem;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:var(--space-lg);

    text-align:center;

}

.checkin-card .brand{
    align-self:flex-start;
}

.checkin-card .hero-title{
    margin-bottom:.5rem;
}

.checkin-card .hero-description{
    max-width:500px;
}

.progress-container{

    width:100%;

    height:10px;

    background:#edf5ed;

    border-radius:999px;

    overflow:hidden;

}

.progress-bar{

    width:20%;

    height:100%;

    background:var(--primary);

    transition:width .4s ease;

}

.options-container{

    width:100%;

    display:grid;

    gap:1rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;

    margin:30px 0;

}

.option{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:1rem;

    border:2px solid var(--border-color);

    border-radius:var(--radius-md);

    cursor:pointer;

    transition:var(--transition-normal);

    background:var(--surface);

}

.option:hover{

    border-color:var(--primary);

    transform:translateY(-2px);

}

.option.selected{

    background:#eef8ed;

    border-color:var(--primary);

    color:var(--primary);

    font-weight:600;

}

.option.emoji{

    font-size:2rem;

    min-height:90px;

}

.option.text{

    justify-content:flex-start;

    padding-left:1.5rem;

    font-size:var(--font-size-md);

}

#nextQuestionBtn{

    margin-top:var(--space-md);

    width:220px;

}

.option-btn{

    padding:16px 24px;

    border:none;

    border-radius:14px;

    background:#F6FAF4;

    cursor:pointer;

    font-size:1rem;

    transition:.25s;

    box-shadow:0 3px 8px rgba(0,0,0,.05);

}

.option-btn:hover{

    transform:translateY(-3px);

}

.option-btn.selected{

    background:#6CB874;

    color:white;

}

@media (max-width:768px){

    .checkin-card{
        padding:2rem 1.5rem;
    }

    .options-container{
        grid-template-columns:1fr;
    }

    .option-btn{
        width:100%;
    }

}