.page-hero {
  background: linear-gradient(145deg, #07160f, #0e2419);
  color: #fff;
  padding: 6rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.page-hero:after {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  right: -7rem;
  top: -9rem;
  background: radial-gradient(circle, rgba(244, 217, 0, 0.18), transparent 65%);
}
.dashboard-shell {
  min-height: calc(100vh - 80px);
  background: #f5f8f6;
}
.sidebar-card {
  position: sticky;
  top: 105px;
}
.metric-card {
  border: 1px solid #dfe8e2;
  background: #fff;
  border-radius: 24px;
  padding: 1.35rem;
}
.avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  object-fit: cover;
  background: #e7f4ed;
}
.form-note {
  font-size: 0.82rem;
  color: #64748b;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #22c55e;
}
.auth-panel {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 20%, rgba(8, 120, 63, 0.25), transparent 28%),
    linear-gradient(145deg, #07160f, #102c1e);
}
.auth-card {
  max-width: 520px;
  border-radius: 32px;
}
.article-body {
  font-size: 1.08rem;
  line-height: 1.9;
  color: #475569;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #e7f4ed;
  color: #08783f;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 800;
}

/* Phase 2 — engagement */
.member-strip {
  background:
    radial-gradient(circle at 90% 10%, rgba(244,217,0,.22), transparent 26%),
    linear-gradient(135deg, #07160f, #0e2419 58%, #08783f);
  border: 1px solid rgba(255,255,255,.08);
}
.ant-card {
  background: linear-gradient(135deg, #07160f, #08783f);
}
.ant-card__top {
  background:
    radial-gradient(circle at 80% 0%, rgba(244,217,0,.22), transparent 28%),
    linear-gradient(135deg, #08783f, #04552d);
}
.preference-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border:1px solid #dfe8e2;
  border-radius:18px;
  padding:1rem;
  background:#f8faf9;
  font-size:.92rem;
}
.preference-row input[type="checkbox"] {
  width:1.2rem;
  height:1.2rem;
  accent-color:#08783f;
  flex:0 0 auto;
}
.sticky-panel { position:sticky; top:105px; }
.dashboard-nav a,.dashboard-nav button { transition:background .2s ease,color .2s ease; }
.dashboard-nav a:hover,.dashboard-nav button:hover { background:rgba(255,255,255,.08); }
#memberQr img,#memberQr canvas { max-width:100%; height:auto!important; }
@media (max-width: 1199px){ .sticky-panel{ position:static; } }


/* Phase 3 — community reporting */
.issue-timeline { position:relative; padding-left:1.4rem; }
.issue-timeline:before { content:""; position:absolute; left:.35rem; top:.4rem; bottom:.4rem; width:2px; background:rgba(244,217,0,.28); }
.issue-timeline-item { position:relative; padding:0 0 1.6rem .9rem; }
.issue-timeline-item:before { content:""; position:absolute; left:-1.35rem; top:.3rem; width:.72rem; height:.72rem; border-radius:999px; background:#f4d900; box-shadow:0 0 0 5px rgba(244,217,0,.12); }
.community-media { aspect-ratio:16/10; background:#07160f; overflow:hidden; }
.community-map { height:min(68vh,680px); min-height:460px; width:100%; }
@media (max-width: 767px){ .community-map{ min-height:420px; } }

/* Donation / Paystack */
.donation-hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 5rem;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(244,217,0,.16), transparent 24rem),
    radial-gradient(circle at 16% 88%, rgba(8,120,63,.35), transparent 24rem),
    linear-gradient(135deg, #07160f, #0e2419 62%, #123522);
}
.donation-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.donation-hero-card { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.055); backdrop-filter:blur(14px); border-radius:30px; padding:1.6rem; }
.donation-page { background:linear-gradient(180deg,#f5f8f6,#fff 55%); }
.donation-card { background:#fff; border:1px solid #dfe8e2; border-radius:32px; padding:clamp(1.4rem,3vw,2.3rem); }
.donation-secure-badge { display:inline-flex; align-items:center; gap:.45rem; border-radius:999px; background:#e7f4ed; color:#08783f; padding:.55rem .85rem; font-size:.72rem; font-weight:800; letter-spacing:.08em; }
.donation-amount-field { display:flex; align-items:center; border:2px solid #dfe8e2; border-radius:20px; background:#fff; overflow:hidden; transition:.2s ease; }
.donation-amount-field:focus-within { border-color:#08783f; box-shadow:0 0 0 5px rgba(8,120,63,.09); }
.donation-currency { padding-left:1.1rem; color:#08783f; font-size:1.7rem; font-weight:800; }
.donation-amount-field input { width:100%; border:0; outline:0; padding:1rem 1.1rem .95rem .65rem; font-size:2rem; font-weight:800; color:#102119; background:transparent; }
.donation-confirm { display:flex; gap:.8rem; align-items:flex-start; border:1px solid #dfe8e2; background:#f8faf9; border-radius:18px; padding:1rem; font-size:.9rem; color:#475569; }
.donation-confirm input { width:1.15rem; height:1.15rem; margin-top:.1rem; accent-color:#08783f; flex:0 0 auto; }
.donation-submit { width:100%; display:flex; align-items:center; justify-content:center; gap:.75rem; border:0; border-radius:18px; padding:1rem 1.25rem; background:#08783f; color:#fff; font-weight:800; transition:.2s ease; }
.donation-submit:hover:not(:disabled) { background:#04552d; transform:translateY(-1px); }
.donation-submit:disabled { opacity:.55; cursor:not-allowed; }
.donation-info-card { background:#fff; border:1px solid #dfe8e2; border-radius:28px; padding:1.5rem; }
.donation-step { display:grid; grid-template-columns:38px 1fr; gap:.9rem; padding:0 0 1.2rem; }
.donation-step > span { width:38px; height:38px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#e7f4ed; color:#08783f; font-weight:800; }
.donation-step strong { display:block; color:#102119; font-size:.95rem; }
.donation-step p { margin:.25rem 0 0; color:#64748b; font-size:.83rem; line-height:1.6; }
.donation-message { border-radius:18px; padding:1rem; font-size:.9rem; }
.donation-message--info { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.donation-message--success { background:#e7f4ed; color:#04552d; border:1px solid #b9dec8; }
.donation-message--error { background:#fff1f2; color:#9f1239; border:1px solid #fecdd3; }
.donation-spin { display:inline-block; animation:donation-spin .8s linear infinite; }
@keyframes donation-spin { to { transform:rotate(360deg); } }
@media (max-width:767px) { .donation-hero{padding:4.5rem 0 3.5rem}.donation-card{border-radius:24px}.donation-amount-field input{font-size:1.65rem} }