body{
margin:0;
font-family:Arial, sans-serif;
background:#f2f2f2;
}
.app{
max-width:420px;
margin:auto;
background:#f2f2f2;
min-height:100vh;
position:relative;
}
.top{
background:#0aa65a;
color:#fff;
padding:20px;
border-radius:0 0 20px 20px;
}
.saldo h1{margin:5px 0}
.card{
background:#fff;
margin:15px;
padding:15px;
border-radius:15px;
}
.grafico{
height:120px;
background:#eaeaea;
border-radius:10px;
margin:10px 0;
display:flex;
align-items:center;
justify-content:center;
}
.atalhos{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin:15px;
}
.atalhos button{
background:#0aa65a;
color:#fff;
border:none;
border-radius:10px;
padding:10px;
display:flex;
flex-direction:column;
align-items:center;
font-size:12px;
}
.menu {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;

    height: 64px;
    background: #2f3a45;
    border-radius: 22px 22px 0 0;

    display: flex;
    justify-content: space-around;
    align-items: center;

    box-shadow: 0 -4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

/* Ícones laterais */
.menu-item {
    color: #e0e0e0;
    font-size: 22px;
    opacity: 0.9;
}

/* BOTÃO CENTRAL */
.menu-center {
    position: absolute;
    top: -26px;

    width: 58px;
    height: 58px;
    background: #18b36b;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 30px;

    box-shadow:
        0 6px 12px rgba(0,0,0,0.35),
        0 0 0 6px #f2f2f2;
}

/* Feedback de toque */
.menu-item:active,
.menu-center:active {
    transform: scale(0.95);
}

.menu i{font-size:20px}
.menu .main{
color:#0aa65a;
font-size:34px;
}