:root{
  --green-950:#0c2b21; --green-900:#123a2c; --green-800:#175038; --green-700:#1d6446;
  --gold-500:#c6a15b; --gold-600:#ab8748; --gold-100:#f4ead2;
  --gray-50:#f5f6f4; --gray-100:#eceeea; --gray-200:#dde0da; --gray-600:#5c6660; --gray-800:#2b322c;
  --ink:#182019; --red-600:#b3422f; --red-100:#f7e3de; --amber-600:#a97417; --amber-100:#f6e8cd;
  --blue-600:#2d5f8a; --blue-100:#e0eaf2; --emerald-600:#1d7a4c; --emerald-100:#dcf0e3;
}
body{font-family:'Inter',sans-serif;background:var(--gray-50);color:var(--ink);}
h1,h2,h3,.font-display{font-family:'Lora',serif;}
.tabular{font-variant-numeric:tabular-nums;}

.sidebar{width:250px;flex-shrink:0;background:var(--green-950);color:#eceeea;min-height:100vh;position:sticky;top:0;}
.sidebar-header{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar-header .mosque-name{font-family:'Lora',serif;font-size:17px;font-weight:600;color:#fff;line-height:1.3;}
.sidebar-header .app-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-500);margin-top:4px;}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.35);padding:14px 12px 6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;color:rgba(255,255,255,.78);text-decoration:none;margin-bottom:2px;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--gold-500);color:var(--green-950);font-weight:600;}
.sidebar-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);position:sticky;bottom:0;background:var(--green-950);}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--gold-500);color:var(--green-950);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}

.topbar{background:#fff;border-bottom:1px solid var(--gray-200);padding:14px 24px;}
.topbar-title{font-family:'Lora',serif;font-size:19px;font-weight:600;color:var(--green-950);}
.topbar-sub{font-size:12.5px;color:var(--gray-600);}

.card-app{background:#fff;border:1px solid var(--gray-200);border-radius:10px;box-shadow:0 1px 2px rgba(12,43,33,.06),0 4px 16px rgba(12,43,33,.06);}
.section-title{font-family:'Lora',serif;font-size:16px;font-weight:600;color:var(--green-950);}

.btn-app-primary{background:var(--green-900);color:#fff;border:1px solid var(--green-900);}
.btn-app-primary:hover{background:var(--green-800);color:#fff;}
.btn-app-gold{background:var(--gold-500);color:var(--green-950);border:1px solid var(--gold-500);font-weight:600;}
.btn-app-gold:hover{background:var(--gold-600);color:var(--green-950);}

.badge-amber{background:var(--amber-100);color:var(--amber-600);}
.badge-blue{background:var(--blue-100);color:var(--blue-600);}
.badge-emerald{background:var(--emerald-100);color:var(--emerald-600);}
.badge-red{background:var(--red-100);color:var(--red-600);}
.badge-gray{background:var(--gray-100);color:var(--gray-600);}

.donor-header{background:linear-gradient(135deg,var(--green-950),var(--green-800));border-radius:14px;padding:22px 24px;color:#fff;}
.donor-header .num{font-size:11.5px;letter-spacing:.08em;color:var(--gold-500);text-transform:uppercase;font-weight:700;}

.progress-track{background:var(--gray-100);border-radius:99px;height:8px;overflow:hidden;}
.progress-fill{height:100%;background:var(--gold-500);}

.timeline-note{border-left:3px solid var(--gold-500);padding:8px 0 8px 14px;margin-bottom:10px;}

@media (max-width:900px){
  .sidebar{position:fixed;z-index:50;height:100vh;transform:translateX(-100%);transition:.25s;}
  .sidebar.open{transform:translateX(0);}
}