:root{
  --brand:#16a37a;
  --brand-dark:#0e8a66;
  --bg:#f5f6f8;
  --danger-bg:#fdeceb;
  --danger:#e5493f;
  --success-bg:#e5f8f1;
  --card-radius:14px;
}
body{ background:var(--bg); font-family:'Segoe UI',system-ui,sans-serif; color:#1c1c1e; }
.app-lang-bn body, .app-lang-bn{ font-family:'Hind Siliguri','Segoe UI',sans-serif; }
.app-shell{ max-width:480px; margin:0 auto; background:var(--bg); min-height:100vh; position:relative; }
.app-content{ padding:16px 16px 90px; }

.topbar{ display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px; }
.topbar .co-badge{ width:44px;height:44px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-weight:600; }
.topbar h5{ margin:0; font-weight:700; }

.stat-card{ border-radius:var(--card-radius); padding:16px; background:#fff; }
.stat-card.green{ background:var(--success-bg); }
.stat-card.red{ background:var(--danger-bg); }
.stat-card .amount{ font-size:1.25rem; font-weight:700; }
.stat-card.green .amount{ color:var(--brand-dark); }
.stat-card.red .amount{ color:var(--danger); }
.stat-card .label{ color:#666; font-size:.85rem; margin-top:4px; }

.explore-card{ background:#fff;border-radius:var(--card-radius);padding:14px 6px;text-align:center; }
.explore-card i{ font-size:1.4rem; color:var(--brand); background:#e6f6ef;border-radius:10px;padding:10px;display:inline-block; }
.explore-card .lbl{ font-size:.8rem; margin-top:6px; font-weight:600; }

.shortcut-grid .item{ text-align:center; }
.shortcut-grid .icon-circle{ width:56px;height:56px;border-radius:50%;background:#e6f6ef;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;color:var(--brand);font-size:1.2rem; }
.shortcut-grid .lbl{ font-size:.78rem;font-weight:500; }

.card-list{ background:#fff;border-radius:var(--card-radius);overflow:hidden; }
.card-list .row-item{ padding:14px 16px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:inherit; }
.card-list .row-item:last-child{ border-bottom:none; }
.card-list .row-item:active{ background:#fafafa; }

.txn-card{ background:#fff;border-radius:var(--card-radius);padding:14px 16px;margin-bottom:10px; }
.txn-card .id{ color:#2c6fd1;font-weight:600;font-size:.9rem; }
.badge-status{ font-size:.72rem;border-radius:8px;padding:3px 10px;font-weight:600; }
.badge-due{ background:var(--danger-bg);color:var(--danger); }
.badge-partial{ background:#e6f3fb;color:#1a7fc9; }
.badge-paid{ background:var(--success-bg);color:var(--brand-dark); }

.bottom-nav{ position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:480px;width:100%;background:#fff;
  display:flex;justify-content:space-around;padding:8px 0;border-top:1px solid #eee;z-index:1000; }
.bottom-nav .nav-item{ text-align:center;color:#888;text-decoration:none;font-size:.7rem;flex:1; }
.bottom-nav .nav-item i{ display:block;font-size:1.2rem;margin-bottom:2px; }
.bottom-nav .nav-item.active{ color:var(--brand); }

.fab{ position:fixed;bottom:80px;left:50%;transform:translateX(-50%);max-width:448px;width:calc(100% - 32px);
  display:flex;gap:10px;z-index:999; }
.fab .btn{ flex:1;border-radius:30px;font-weight:600;padding:12px; }

.modal-dialog-bottom{ display:flex;align-items:flex-end;min-height:100vh;margin:0 auto;max-width:480px; }
.sheet{ border-radius:20px 20px 0 0;width:100%; }
.txn-icon{ display:block;text-decoration:none;color:#1c1c1e; }
.txn-icon i{ font-size:1.4rem;background:#eafaf3;color:var(--brand);border-radius:12px;padding:14px;display:inline-block; }
.txn-icon div{ font-size:.78rem;margin-top:4px;font-weight:500; }

.form-card{ background:#fff;border-radius:var(--card-radius);padding:14px;margin-bottom:12px; }
.btn-brand{ background:var(--brand);border-color:var(--brand);color:#fff; }
.btn-brand:hover{ background:var(--brand-dark);color:#fff; }
.btn-outline-brand{ border:1px solid var(--brand);color:var(--brand); }

.chip{ background:#eee;border-radius:20px;padding:6px 14px;font-size:.82rem;font-weight:500;display:inline-block; }
.chip.active{ background:var(--brand);color:#fff; }

.lang-switch{ font-size:.75rem; }
.lang-switch a{ text-decoration:none;color:#888;padding:2px 6px; }
.lang-switch a.active{ color:var(--brand);font-weight:700; }

@media(min-width:600px){
  .app-shell{ box-shadow:0 0 24px rgba(0,0,0,.08); }
}