body{background:linear-gradient(180deg,#f6f9ff,#eef3fb);min-height:100vh}.hero-card,.panel-card,.form-card,.auth-card,.table-card,.stat-card{border:0;border-radius:1rem;box-shadow:0 10px 24px rgba(0,0,0,.06)}.form-card{max-width:780px;margin:auto}.auth-card{max-width:520px;margin:auto}.small-muted{color:#6c757d;font-size:.92rem}

.member-bank-card{background:linear-gradient(135deg,#0d6efd,#4f8cff);color:#fff;border-radius:22px;padding:22px;box-shadow:0 16px 36px rgba(13,110,253,.22)}
.saving-tile{border:1px solid #e5edff;border-radius:18px;padding:16px;background:#fff;box-shadow:0 8px 20px rgba(12,38,86,.05)}
.saving-tile .amt{font-size:1.2rem;font-weight:800;color:#0d6efd}
@media (max-width:768px){.member-bank-card{padding:18px}.saving-tile{padding:14px}}

body{overflow-x:hidden;font-size:17px;line-height:1.5}
img{max-width:100%;height:auto}
.table td,.table th{white-space:normal;word-break:break-word}
.form-control,.form-select,.btn{font-size:16px}
@media (max-width:768px){
  body{font-size:18px}
  .container{padding-left:14px;padding-right:14px}
  .card,.table-card,.form-card,.auth-card,.stat-card{border-radius:14px}
  .btn{font-size:16px;padding:.65rem .9rem;white-space:normal}
  .form-label,.small-muted,.text-secondary{font-size:15px!important}
  .table-responsive{overflow-x:auto}
  h1,.display-6{font-size:1.85rem!important}
  h2{font-size:1.45rem!important}
}

.history-actions .btn{border-radius:999px;padding:.5rem .9rem}.saving-tile{transition:transform .15s ease, box-shadow .15s ease}.saving-tile:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(12,38,86,.08)}

@media (max-width:768px){.saving-tile .btn{width:100%}}

.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.info-tile{border:1px solid #e5edff;border-radius:18px;padding:16px;background:#fff;box-shadow:0 8px 20px rgba(12,38,86,.05)}
.info-tile .label{font-size:.85rem;color:#6c757d;text-transform:uppercase;letter-spacing:.04em}
.info-tile .value{font-size:1.05rem;font-weight:700;color:#0f172a}
.info-tile .sub{font-size:.92rem;color:#6c757d}
.info-tile .actions .btn{width:100%}
@media (max-width:768px){.tile-grid{grid-template-columns:1fr}.info-tile{padding:14px}.info-tile .value{font-size:1rem}}

:root{--bg1:#f6f9ff;--bg2:#eef3fb;--card:#fff;--text:#0f172a;--muted:#6c757d;--border:#e5edff}
body[data-theme='dark']{--bg1:#0b1220;--bg2:#111827;--card:#172033;--text:#e5edf8;--muted:#b2bfd1;--border:#30415f;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:var(--text)}
body[data-theme='dark'] .hero-card,body[data-theme='dark'] .panel-card,body[data-theme='dark'] .form-card,body[data-theme='dark'] .auth-card,body[data-theme='dark'] .table-card,body[data-theme='dark'] .stat-card,body[data-theme='dark'] .saving-tile,body[data-theme='dark'] .info-tile{background:var(--card);color:var(--text);box-shadow:0 10px 24px rgba(0,0,0,.26);border-color:var(--border)}
body[data-theme='dark'] .small-muted,body[data-theme='dark'] .text-secondary,body[data-theme='dark'] .sub,body[data-theme='dark'] .label{color:var(--muted)!important}
body[data-theme='dark'] .form-control,body[data-theme='dark'] .form-select{background:#0f172a;color:var(--text);border-color:var(--border)}
body[data-theme='dark'] .form-control::placeholder{color:#8ea0ba}
body[data-theme='dark'] .border,body[data-theme='dark'] .saving-tile,body[data-theme='dark'] .info-tile{border-color:var(--border)!important}
body[data-theme='dark'] .bg-light,body[data-theme='dark'] .bg-light-subtle{background:#111827!important;color:var(--text)!important}
body[data-theme='dark'] .table{color:var(--text)}

html,body{color:var(--text)}
a{color:inherit}
.theme-toggle-btn{width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:.2s ease}
.theme-toggle-btn:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.theme-icon{font-size:16px;line-height:1}
body[data-theme='dark'] .theme-toggle-btn{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}
body[data-theme='dark'] h1,body[data-theme='dark'] h2,body[data-theme='dark'] h3,body[data-theme='dark'] h4,body[data-theme='dark'] h5,body[data-theme='dark'] h6,body[data-theme='dark'] p,body[data-theme='dark'] span,body[data-theme='dark'] div,body[data-theme='dark'] li,body[data-theme='dark'] td,body[data-theme='dark'] th,body[data-theme='dark'] label{color:var(--text)}
body[data-theme='dark'] .text-dark{color:var(--text)!important}
body[data-theme='dark'] .text-primary{color:#8eb8ff!important}
body[data-theme='dark'] .text-success{color:#77d7a7!important}
body[data-theme='dark'] .text-danger{color:#ff9ea6!important}
body[data-theme='dark'] .text-warning{color:#ffd37a!important}
body[data-theme='dark'] .navbar .nav-link,body[data-theme='dark'] .navbar-brand{color:#f8fbff!important}
body[data-theme='dark'] .alert{border-color:var(--border);color:var(--text)}
body[data-theme='dark'] .alert-info{background:#10253a;color:#d7ecff}
body[data-theme='dark'] .alert-warning{background:#3b2b10;color:#ffe9b3}
body[data-theme='dark'] .alert-success{background:#102d24;color:#c8f3df}
body[data-theme='dark'] .alert-danger{background:#38171d;color:#ffd5da}
body[data-theme='dark'] .btn-outline-primary{color:#b7d0ff;border-color:#5f89d8}
body[data-theme='dark'] .btn-outline-secondary{color:#d5def0;border-color:#58647d}
body[data-theme='dark'] .btn-light{background:#e5edf8;color:#0f172a}
body[data-theme='dark'] .member-bank-card{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff}
body[data-theme='dark'] .saving-tile .amt,body[data-theme='dark'] .info-tile .value{color:#e8f0ff}
body[data-theme='dark'] .badge.bg-light{background:#22314d!important;color:#eaf2ff!important}

@media (max-width: 991.98px){ .navbar-nav .nav-item{margin-bottom:.45rem} .navbar-nav .nav-item.w-100 .btn{min-width:110px} }

@media (max-width:768px){
  body{padding-bottom:88px}
  .mobile-bottom-nav{position:fixed;left:12px;right:12px;bottom:12px;z-index:1050;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid rgba(13,110,253,.12);border-radius:22px;box-shadow:0 12px 28px rgba(12,38,86,.16);display:flex;justify-content:space-around;align-items:center;padding:8px 6px}
  .mobile-bottom-nav a{flex:1;text-decoration:none;color:#6b7280;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;font-size:11px;font-weight:700;line-height:1.1;border-radius:16px}
  .mobile-bottom-nav a .icon{font-size:18px;line-height:1}
  .mobile-bottom-nav a.active{color:#0d6efd;background:rgba(13,110,253,.10)}
  .mobile-bottom-nav .note-badge{position:absolute;top:4px;right:24%;transform:translateX(12px);min-width:18px;height:18px;border-radius:999px;background:#f59e0b;color:#111827;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
}
@media (min-width:769px){.mobile-bottom-nav{display:none!important}}
body[data-theme='dark'] .mobile-bottom-nav{background:rgba(23,32,51,.96);border-color:rgba(255,255,255,.08);box-shadow:0 12px 28px rgba(0,0,0,.35)}
body[data-theme='dark'] .mobile-bottom-nav a{color:#b9c5d8}
body[data-theme='dark'] .mobile-bottom-nav a.active{color:#eaf2ff;background:rgba(142,184,255,.14)}


.app-navbar{transition:background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease}
.app-navbar.is-scrolled{background:rgba(13,110,253,.95)!important;backdrop-filter:blur(12px);box-shadow:0 12px 28px rgba(12,38,86,.18)!important}
.nav-shell{min-height:72px}
.nav-tools{display:flex;align-items:center;gap:.6rem}
.lang-switcher{display:inline-flex;align-items:center;gap:.28rem;padding:.24rem .35rem;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.lang-icon{font-size:12px;line-height:1;opacity:.9;margin-right:.08rem}
.lang-pill{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 .42rem;border-radius:999px;text-decoration:none;color:rgba(255,255,255,.92);font-size:.72rem;font-weight:700;letter-spacing:.03em}
.lang-pill:hover{background:rgba(255,255,255,.12);color:#fff}
.lang-pill.active{background:#fff;color:#0d6efd;box-shadow:0 6px 16px rgba(13,110,253,.2)}
.nav-menu-list{gap:.4rem}
.app-nav-btn{border-radius:999px;padding:.52rem .95rem}
.app-toggler{border:none;box-shadow:none}
.app-toggler:focus{box-shadow:none}
.mobile-menu-actions{margin-top:.4rem}
.mobile-menu-stack{display:flex;flex-direction:column;gap:.75rem;padding-top:.55rem;width:100%}
.mobile-menu-stack .theme-toggle-btn,.mobile-menu-stack .app-nav-btn{width:100%;min-height:44px;justify-content:center}
@media (max-width: 991.98px){
  .nav-shell{min-height:68px}
  .navbar-collapse{padding-top:.9rem}
  .nav-menu-list{gap:.7rem}
  .navbar-nav .nav-item{margin-bottom:0!important}
  .navbar-nav .nav-link,.navbar-nav .btn{display:flex;align-items:center;justify-content:center}
  .navbar-nav .nav-link{padding:.72rem .95rem;border-radius:14px;background:rgba(255,255,255,.08)}
  .lang-switcher{padding:.2rem .28rem}
  .lang-pill{min-width:26px;height:24px;font-size:.68rem}
}
body[data-theme='dark'] .app-navbar.is-scrolled{background:rgba(15,23,42,.92)!important;box-shadow:0 12px 28px rgba(0,0,0,.35)!important}
body[data-theme='dark'] .lang-switcher{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.07)}
body[data-theme='dark'] .lang-pill.active{background:#e5edf8;color:#0f172a}


.navbar-collapse.show,.navbar-collapse.collapsing{background:rgba(13,110,253,.98);margin-top:.8rem;padding:1rem;border-radius:18px;box-shadow:0 18px 36px rgba(12,38,86,.18)}
.navbar-nav .nav-link{font-weight:600}
@media (max-width: 991.98px){
  .nav-menu-list{gap:.55rem}
  .navbar-nav .nav-link{justify-content:flex-start;padding:.82rem 1rem;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
  .navbar-nav .nav-link:hover{background:rgba(255,255,255,.12)}
  .navbar-nav .nav-item .btn{width:100%;justify-content:center;min-height:44px}
  .navbar-nav .nav-item:not(.mobile-menu-actions){margin-bottom:.15rem}
  .mobile-menu-actions{padding-top:.3rem;border-top:1px solid rgba(255,255,255,.14)}
  .mobile-menu-stack{gap:.65rem}
}
body[data-theme='dark'] .navbar-collapse.show,body[data-theme='dark'] .navbar-collapse.collapsing{background:rgba(15,23,42,.98);box-shadow:0 18px 36px rgba(0,0,0,.35)}


/* home buttons same style as login button */
.home-action-wrap{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}

.home-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.home-login-row{
  display:flex;
  margin-top:0;
}

.home-action-row .btn,
.home-login-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:180px;
  padding:.5rem .9rem;
  font-size:14px;
  line-height:1.2;
  border-radius:10px;
  white-space:nowrap;
}

.home-login-btn{
  background:#0d6efd;
  border-color:#0d6efd;
}

.home-login-btn:hover{
  background:#0b5ed7;
  border-color:#0a58ca;
}

@media (max-width:768px){
  .home-action-row,
  .home-login-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .home-action-row .btn,
  .home-login-btn{
    width:auto !important;
    min-width:180px;
    max-width:100%;
    padding:.5rem .9rem;
    font-size:14px;
    border-radius:10px;
    min-height:auto;
  }
  .home-action-row .btn{
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}

.home-action-row .btn:hover{
  background:#0b5ed7;
  border-color:#0a58ca;
  color:#fff;
}
}
/* end home buttons same style as login button by ficman*/

html[data-theme='dark'], html.theme-dark{color-scheme:dark;}
html[data-theme='dark'] body{background:linear-gradient(180deg,#0b1220,#111827);color:#e5edf8;}
html[data-theme='dark'] .hero-card, html[data-theme='dark'] .panel-card, html[data-theme='dark'] .form-card, html[data-theme='dark'] .auth-card, html[data-theme='dark'] .table-card, html[data-theme='dark'] .stat-card, html[data-theme='dark'] .saving-tile, html[data-theme='dark'] .info-tile{background:#172033;color:#e5edf8;border-color:#30415f;box-shadow:0 10px 24px rgba(0,0,0,.26)}
html[data-theme='dark'] .navbar .nav-link, html[data-theme='dark'] .navbar-brand{color:#f8fbff!important}
html[data-theme='dark'] .form-control, html[data-theme='dark'] .form-select{background:#0f172a;color:#e5edf8;border-color:#30415f}
html[data-theme='dark'] .bg-light, html[data-theme='dark'] .bg-light-subtle{background:#111827!important;color:#e5edf8!important}
html[data-theme='dark'] .text-secondary, html[data-theme='dark'] .small-muted, html[data-theme='dark'] .sub, html[data-theme='dark'] .label{color:#b2bfd1!important}
html[data-theme='dark'] .theme-toggle-btn{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}


body.theme-boot{transition:background-color .18s ease,color .18s ease;}
html[data-theme='dark'] body,
body[data-theme='dark']{background:linear-gradient(180deg,#0b1220,#111827);color:#e5edf8;}
html[data-theme='light'] body,
body[data-theme='light']{background:#f5f7fb;color:#0f172a;}

.notification-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
body[data-theme='dark'] .notification-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.26)}