* {
    margin: 0
    padding 0
    box-sizing border-box
}

body {
    font-family: Arial, sans-serif
    background linear-gradient(135deg, #667eea, #764ba2)
    min-height 100vh
    display flex
    justify-content center
    align-items center
    padding 20px
}

.container {
    background: white
    padding 25px
    border-radius 15px
    box-shadow 0 10px 30px rgba(0,0,0,0.2)
    max-width 400px
    width 100%
}

h1 {
    text-align: center
    color #667eea
    margin-bottom 5px
}

.data {
    text-align: center
    color #888
    font-size 14px
    margin-bottom 20px
}

.secao {
    background: #f8f9fa
    padding 15px
    border-radius 10px
    margin-bottom 15px
}

.secao h2 {
    font-size: 18px
    color #333
    margin-bottom 10px
}

.contador {
    font-size: 20px
    font-weight bold
    color #555
    margin-bottom 8px
}

.progresso {
    background: #e0e0e0
    border-radius 10px
    height 20px
    overflow hidden
    margin 10px 0
}

#barraAgua {
    background: linear-gradient(90deg, #00c6ff, #0072ff)
    height 100%
    width 0%
    transition width 0.5s ease
}

#barraRefeicoes {
    background: linear-gradient(90deg, #f093fb, #f5576c)
    height 100%
    width 0%
    transition width 0.5s ease
}

.botoes {
    display: flex
    gap 8px
    flex-wrap wrap
    margin-top 10px
}

button {
    padding: 10px 15px
    border none
    border-radius 6px
    background #667eea
    color white
    font-size 13px
    cursor pointer
    font-weight bold
}

button:hover {
    background: #5568d3
}

.btn-reset {
    width: 100%
    background #ff4757
    margin-top 15px
}

.btn-reset:hover {
    background: #e84118
}

.resumo {
    background: #e8f5e9
}

.resumo ul {
    list-style: none
    margin 10px 0
}

.resumo li {
    padding: 5px 0
    border-bottom 1px solid #c8e6c9
    font-size 15px
}

.resumo li:last-child {
    border-bottom: none
}

#mensagemFinal {
    margin-top: 10px
    font-weight bold
    color #27ae60
    text-align center
}