@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@700;800;900&display=swap');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 8%,rgba(0,126,82,.07),transparent 28%),
    radial-gradient(circle at 88% 16%,rgba(245,196,0,.08),transparent 24%),
    #f7f8f7;
  color:#12213a;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:root{
  --primary:#0b9a4a;
  --primary-strong:#08783b;
  --secondary:#f5c400;
  --navy:#0d2240;
  --ink:#12213a;
  --muted:#667085;
  --line:#e8eeea;
  --card:rgba(255,255,255,.93);
  --radius:26px;
  --shadow:0 18px 55px rgba(24,45,70,.08);
  --shadow-soft:0 10px 35px rgba(24,45,70,.055);
}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
button{transition:.22s ease}
.container{width:min(1280px,94%);margin:auto}

.topbar{
  height:82px;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(19,54,43,.07);
  display:flex;align-items:center;
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(18px);
}
.brand{
  font-family:'Montserrat',sans-serif;
  font-weight:900;font-size:23px;
  letter-spacing:-.8px;color:var(--primary-strong)
}

.grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;padding:28px 0 38px}
.card{
  background:var(--card);
  border:1px solid rgba(12,74,48,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  backdrop-filter:blur(14px);
}
.hero{
  min-height:365px;
  background:linear-gradient(135deg,#073a6c,#0b5b8d 50%,#087b52);
  position:relative;
  isolation:isolate;
}
.hero:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,28,50,.34),rgba(8,28,50,.05) 48%,rgba(8,28,50,.18));
  pointer-events:none;
}
.hero img{width:100%;height:100%;object-fit:cover;display:block;min-height:365px}
.campaign-slogan{z-index:3!important}

.profile{padding:28px 30px;display:flex;gap:24px;align-items:center}
.avatar{
  width:118px;height:118px;border-radius:50%;object-fit:cover;
  border:6px solid #fff;
  box-shadow:0 12px 30px rgba(8,46,34,.13),0 0 0 1px #e7eee9;
}
.profile h1{
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-size:35px;line-height:1.05;
  letter-spacing:-1.1px;color:var(--primary-strong)
}
.profile>div>div:nth-child(2){margin-top:7px;font-size:14px;color:#7a8797}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 12px}
.tag{
  background:linear-gradient(180deg,#f8faf9,#f0f5f2);
  border:1px solid #e2eae5;
  border-radius:999px;padding:7px 12px;
  font-weight:800;font-size:11px;letter-spacing:.1px;color:#42526a
}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{
  width:35px;height:35px;border:1px solid #dce7e0;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:900;
  background:#fff;box-shadow:0 6px 18px rgba(26,54,43,.05);
  transition:.22s ease
}
.socials a:hover{transform:translateY(-2px);border-color:var(--primary);color:var(--primary)}

.section{padding:30px;margin-top:22px}
.section-title{
  color:var(--primary-strong);margin:0;
  font-family:'Montserrat',sans-serif;font-weight:900;
  letter-spacing:-.65px;font-size:25px
}
.section-lead{margin:7px 0 22px;color:#7b8796;font-size:13px;line-height:1.6}

.tabs{display:flex;gap:8px;margin-bottom:24px}
.tab{
  padding:10px 18px;border-radius:999px;background:#f1f5f3;
  font-weight:800;font-size:13px;color:#52606d
}
.tab.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-strong));
  color:#fff;box-shadow:0 9px 22px rgba(11,154,74,.22)
}

/* Premium FAQ */
.faq-list{display:grid;gap:12px}
.faq-item{
  border:1px solid #e7eee9;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(250,252,251,.97));
  overflow:hidden;
  box-shadow:0 7px 24px rgba(34,58,47,.035);
  transition:.25s ease
}
.faq-item:hover{border-color:rgba(11,154,74,.23);transform:translateY(-1px);box-shadow:0 12px 28px rgba(34,58,47,.06)}
.faq-item.open{border-color:rgba(11,154,74,.30);box-shadow:0 14px 34px rgba(11,154,74,.08)}
.faq-q{
  padding:19px 20px;
  font-weight:800;
  color:#20314c;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  line-height:1.45;font-size:14px
}
.faq-q>span{
  float:none!important;
  width:28px;height:28px;min-width:28px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#eef8f2;
  color:var(--primary)!important;
  font-size:18px;line-height:1;
  transition:.25s ease
}
.faq-item.open .faq-q>span{transform:rotate(45deg);background:var(--primary);color:#fff!important}
.faq-a{
  display:none;
  color:#617087;
  padding:0 20px 20px;
  line-height:1.72;
  font-size:13.5px
}
.faq-item.open .faq-a{display:block;animation:faqIn .22s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* Donation card */
.donate{
  padding:22px;
  position:sticky;top:104px;
  border-top:4px solid var(--primary);
}
.donate h3{
  color:var(--primary-strong);margin:0 0 16px;
  font-family:'Montserrat',sans-serif;
  font-size:18px;letter-spacing:-.4px
}
.amounts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.amount,.custom,.btn{
  border:1px solid #dce5df;border-radius:13px;padding:14px;background:#fff;
  font-weight:800;cursor:pointer;text-align:center
}
.amount{color:#25354f;box-shadow:0 5px 16px rgba(34,58,47,.025)}
.amount:hover{border-color:var(--primary);transform:translateY(-1px)}
.amount.active{
  outline:3px solid color-mix(in srgb,var(--primary) 14%,transparent);
  border-color:var(--primary);color:var(--primary-strong)
}
.custom{width:100%;margin-top:10px;text-align:left;outline:none;transition:.2s ease}
.custom:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(11,154,74,.09)}
.btn{
  display:block;width:100%;
  background:linear-gradient(135deg,var(--primary),var(--primary-strong));
  color:#fff;border:none;margin-top:14px;font-size:15px;
  box-shadow:0 12px 24px rgba(11,154,74,.22)
}
.btn:hover{transform:translateY(-1px);box-shadow:0 15px 28px rgba(11,154,74,.27)}
.support{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.55}
.copybox{display:flex;gap:8px}
.copybox input{
  flex:1;border:1px solid #dce5df;border-radius:11px;padding:12px;
  background:#fbfcfb;color:#596578;outline:none
}

/* Tables */
.table-wrap{overflow:auto;border:1px solid #e8eeea;border-radius:17px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:16px;border-bottom:1px solid #edf1ef;text-align:left;font-size:13px}
th{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.55px;
  color:#7c8998;background:#f8faf9;font-weight:900
}
tbody tr:hover{background:#fbfdfc}
.footer{padding:36px 0;color:#778496;text-align:center;font-size:12px}
.notice{
  padding:13px 15px;border-radius:12px;
  background:#effbf4;color:#17633a;margin:12px 0;border:1px solid #d9f2e3
}

/* Forms/admin */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{
  display:block;font-size:11px;font-weight:900;margin-bottom:7px;
  color:#46576c;text-transform:uppercase;letter-spacing:.45px
}
.field input,.field textarea,.field select{
  width:100%;padding:12px 13px;border:1px solid #dce5df;border-radius:11px;
  background:#fff;outline:none;color:#24364e;transition:.2s ease
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(11,154,74,.08)
}
.field textarea{min-height:115px;resize:vertical}.full{grid-column:1/-1}

/* Privacy */
.privacy-cell{display:flex;align-items:center;gap:8px}
.privacy-mask{font-weight:700;letter-spacing:.3px}
.privacy-toggle{
  width:33px;height:33px;border:1px solid #d8e2dc;background:#fff;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;font-size:16px;line-height:1
}
.privacy-toggle:hover{border-color:var(--primary);box-shadow:0 0 0 3px rgba(11,154,74,.08)}
.privacy-toggle .monkey{display:none}.privacy-toggle.revealed .eye{display:none}.privacy-toggle.revealed .monkey{display:inline}

@media(max-width:900px){
  .grid{grid-template-columns:1fr}.donate{position:static}.hero,.hero img{min-height:235px}
  .profile{align-items:flex-start}.profile h1{font-size:27px}.avatar{width:92px;height:92px}
}
@media(max-width:600px){
  .container{width:min(94%,100%)}.profile{flex-direction:column}.amounts,.form-grid{grid-template-columns:1fr}
  .full{grid-column:auto}.grid{padding-top:14px}.card{border-radius:20px}.section{padding:22px}
  .faq-q{padding:17px 16px;font-size:13.2px}.faq-a{padding:0 16px 17px;font-size:13px}
  .section-title{font-size:22px}.hero,.hero img{min-height:205px}.topbar{height:72px}
}


/* ===== PROFILE PREMIUM v1.5.1 ===== */
.profile{
  padding:30px 34px;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:28px;
  align-items:center;
  min-height:210px;
}
.avatar{
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  border:6px solid #fff;
  box-shadow:0 14px 36px rgba(13,34,64,.16),0 0 0 1px #e5ece8;
  justify-self:center;
}
.profile h1{
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-size:42px;
  line-height:1;
  letter-spacing:-1.6px;
  color:var(--primary-strong);
}
.profile>div>div:nth-child(2){
  margin-top:10px;
  font-size:15px;
  color:#758195;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:14px 0 12px;
}
.tag{
  background:linear-gradient(180deg,#fbfcfb,#f1f5f3);
  border:1px solid #dfe7e2;
  border-radius:999px;
  padding:8px 13px;
  font-weight:800;
  font-size:12px;
  color:#26364e;
  box-shadow:0 4px 12px rgba(24,45,70,.025);
}
.tag:last-child{
  background:linear-gradient(135deg,var(--secondary),#ffd94a);
  border-color:rgba(176,132,0,.16);
  color:#18304f;
  font-family:'Montserrat',sans-serif;
  font-weight:900;
}
.socials{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:2px;
}
.socials a{
  width:37px;
  height:37px;
  border:1px solid #dce7e0;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:900;
  background:#fff;
  box-shadow:0 7px 18px rgba(26,54,43,.06);
  transition:.22s ease;
  position:relative;
  overflow:hidden;
}
.socials a:hover{
  transform:translateY(-2px) scale(1.03);
  border-color:var(--primary);
  color:var(--primary);
  box-shadow:0 10px 24px rgba(11,154,74,.12);
}
@media(max-width:900px){
  .profile{
    grid-template-columns:110px minmax(0,1fr);
    gap:20px;
    padding:24px;
    min-height:170px;
  }
  .avatar{width:110px;height:110px}
  .profile h1{font-size:31px}
}
@media(max-width:600px){
  .profile{
    grid-template-columns:1fr;
    text-align:left;
    padding:22px;
    gap:16px;
  }
  .avatar{
    width:112px;
    height:112px;
    justify-self:start;
  }
  .profile h1{
    font-size:30px;
    letter-spacing:-1px;
  }
  .tags{gap:7px}
  .tag{font-size:11px;padding:7px 10px}
  .socials a{width:35px;height:35px}
}