:root{
    --bg-body: #bfc3c9;
    --bg-app: #f2f3f5;
    --text-soft: #6c757d;
    --card: #ffffff;
    --radius-xl: 24px;
}
body{
    background: var(--bg-app);
    font-family: "Lato", sans-serif;
}

h1,h2,h3,h4,h5,h6,
.amount,
.name,
.tab span {
    font-family: "Montserrat", sans-serif;
}

/* Container gabungan */
.container-app{
    max-width: 540px;
    min-height: 100vh;
    margin: 20px auto;
    border-radius: 28px;
    padding: 20px 18px 96px; /* ruang untuk bottom nav */
    display: flex;
    flex-direction: column;
}

.soft-card{
    background: var(--card);
    border-radius: var(--radius-xl);
    box-shadow: 0 6px 18px rgba(20,20,20,.06);
}

.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px;}
.circle-btn{
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff; box-shadow: 0 4px 12px rgba(0,0,0,.06);
    border: none;
}

/* Balance */
.balance-card .amount{font-size: 34px; font-weight: 700;}
.muted{ color: var(--text-soft); }

/* Quick actions */
.quick-actions .qa{display:flex; flex-direction:column; align-items:center; gap:10px;}
.qa .icon{
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    border: 0;
}
.qa small{font-weight:500; color:#4a4a4a}

/* Transactions */
.section-title{display:flex; align-items:center; justify-content:space-between; margin: 22px 2px 12px;}
.seeall{
    background:#fff; border:0; border-radius:999px; padding:6px 12px;
    font-weight:500; color:#444; box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.tx-item{
    background:#fff; border-radius:18px; padding:14px;
    display:flex; align-items:center; gap:12px;
    box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.tx-item + .tx-item{ margin-top:12px; }
.tx-icon{
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#f1f3f5; color:#111;
    font-size:16px;
}
.tx-meta .name{ font-weight:600; line-height:1.1}
.tx-meta .sub{ font-size:13px; color:var(--text-soft); font-family: "Lato", sans-serif; }
.tx-amt{ margin-left:auto; text-align:right; font-weight:700; font-size:18px; }
.tx-amt small{display:block; color:var(--text-soft); font-weight:600; margin-top:2px;}

/* Bottom nav */
.bottom-nav{
      position: fixed;
      bottom: 20px; /* kasih jarak biar kelihatan floating */
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 430px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 -4px 24px rgba(0,0,0,.12);
      padding: 8px 10px 10px;
      z-index: 999;
    }
    .tabs{display:grid; grid-template-columns: repeat(4,1fr); gap:8px;}
    .tab{
      display:flex; flex-direction:column; align-items:center; gap:6px;
      padding:8px 6px; border-radius:14px; color:#6b7280; text-decoration:none;
      font-size:12px; font-weight:600;
    }
    .tab i{font-size:20px;}
    .tab.active{background:#111; color:#fff;}
    
/* Form styling */
    .form-label{ font-size:.85rem; color:#4a4a4a; }
    .form-select,.form-control{ border-radius:14px; }

@media (min-width: 768px){
    .container-app{ padding-left:24px; padding-right:24px; }
}

.attachment-details {
    cursor: pointer;
}