:root{
  /* Logo blue (from provided image) */
  --page-bg:#1f5fd6;

  --text:#0b1526;
  --muted:rgba(11,21,38,0.72);

  --primary:#2563eb;
  /* Logo green (from provided image) */
  --primary2:#1fb365;
  --accent:#f59e0b;

  --section-bg:#ffffff;
  --section-border:rgba(11,21,38,0.14);
  /* Card typography: titles use brand green, small text stays black/dark like the reference */
  --section-title:#1fb365;
  --section-text:rgba(11,21,38,0.92);
  --section-muted:rgba(11,21,38,0.72);

  --shadow:0 18px 50px rgba(0,0,0,0.18);
  --max:1100px;

  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Heiti SC",sans-serif;
  background: var(--page-bg);
  color: var(--text);
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 1.2rem}

/* Header (white like the reference) */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.94);
  border-bottom:1px solid rgba(11,21,38,0.12);
}

.header-inner{display:grid; grid-template-columns:minmax(200px, 280px) 1fr auto; align-items:center; padding:0.9rem 0; gap:0.9rem}
.brand{display:flex; align-items:center; gap:0.75rem; text-decoration:none}

.logo{
  width:60px;
  height:60px;
  border-radius:18px;
  background:
    url('/logo.jpg') center/cover no-repeat,
    linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.brand-title{display:flex; flex-direction:column; line-height:1.1; max-width: 200px}
.brand-title strong{font-size:1.15rem; letter-spacing:0.2px; color: var(--primary2)}
.brand-title .brand-cn{font-size:0.95rem; color: var(--page-bg)}
.brand-title .tagline{font-size:0.9rem; color: rgba(31,95,214,0.86); max-width: 180px; line-height: 1.2}

.nav-mid{
  display:grid;
  min-width:0;
  grid-auto-flow: row;
  grid-template-columns: repeat(5, minmax(0, max-content));
  grid-template-rows: repeat(2, auto);
  align-items:center;
  justify-content:center;
  column-gap:0.55rem;
  row-gap:0.22rem;
}
.nav-mid a{padding:0.32rem 0.45rem; border-radius:10px; text-decoration:none; color: rgba(11,21,38,0.90); border:1px solid transparent; font-size:0.9rem; white-space:nowrap}
.nav-mid a:hover{border-color: rgba(11,21,38,0.14); background: rgba(11,21,38,0.04)}
.nav-mid a.active{border-color: rgba(11,21,38,0.16); background: rgba(11,21,38,0.06)}

.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:0.65rem; flex-wrap:wrap}
.nav-right a:not(.btn){padding:0.45rem 0.65rem; border-radius:10px; text-decoration:none; color: rgba(11,21,38,0.90); border:1px solid transparent}
.nav-right a:not(.btn):hover{border-color: rgba(11,21,38,0.14); background: rgba(11,21,38,0.04)}

/* Header pill (language selector / login) */
.site-header .pill{border-color: rgba(11,21,38,0.14); background: rgba(11,21,38,0.04); color: rgba(11,21,38,0.90)}
.site-header select{background:#fff; border-color: rgba(11,21,38,0.14); color: rgba(11,21,38,0.92)}
.site-header select option{background:#fff; color: rgba(11,21,38,0.92)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; border-radius:12px; padding:0.7rem 1rem; font-weight:650; text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn.primary{background: linear-gradient(135deg, var(--primary), var(--primary2)); color:white; box-shadow: 0 16px 40px rgba(37,99,235,0.20)}
.btn.secondary{background: rgba(255,255,255,0.92); border-color: rgba(11,21,38,0.14); color: rgba(11,21,38,0.92)}
.btn.ghost{background: transparent; border-color: rgba(11,21,38,0.18); color: rgba(11,21,38,0.92)}
.btn:disabled{opacity:0.6; cursor:not-allowed}

/* Layout */
main{padding:2rem 0 3.5rem}
.section{margin:2.2rem 0}
.grid{display:grid; gap:1rem}
.grid.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 980px){.grid.three{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 720px){.grid.two,.grid.three{grid-template-columns:1fr} .nav-mid{display:none}}

/* Right-side green buttons (Join Us / Donate) */
.btn.green{background: var(--primary2); color: #fff; border-color: transparent; box-shadow:none}
.btn.green:hover{filter: brightness(0.96)}

/* Cards (white sections) */
.card{
  background: var(--section-bg);
  border:1px solid rgba(255,255,255,0.70);
  border-radius:18px;
  padding:1.2rem;
  box-shadow: var(--shadow);
  color: var(--section-text);
}

.card h1,.card h2,.card h3{color: var(--section-title)}
.card h3{margin:0 0 0.4rem}
.card p{color: rgba(11,21,38,0.86)}
.muted{color:var(--muted)}
.card .muted{color: var(--section-muted)}

.kicker{display:inline-flex; gap:0.5rem; align-items:center; color: var(--muted); font-weight:650; letter-spacing:0.18px; font-size:0.9rem}
.card .kicker{color: var(--section-title)}

/* Tables */
.table-scroll{max-height:60vh; overflow:auto; border-radius:14px; border:1px solid var(--section-border); background: var(--section-bg)}
.table-scroll table{width:100%; border-collapse:collapse}
.table-scroll th{position:sticky; top:0; background: rgba(11,21,38,0.06); color: var(--section-text)}

/* Hero */
.hero{display:grid; grid-template-columns: 1.2fr 0.8fr; gap:1.2rem; align-items:stretch; margin-top:0.7rem}
@media (max-width: 900px){.hero{grid-template-columns:1fr}}
.hero .hero-copy{padding:1.4rem 1.4rem 1.6rem}
.hero h1{margin:0.5rem 0 0.6rem; font-size:2.1rem; line-height:1.15}
.hero p{margin:0; font-size:1.05rem; color:var(--section-muted); line-height:1.55}
.hero .hero-actions{display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.1rem}
.hero-visual{position:relative; overflow:hidden}
.hero-visual .image{height:100%; min-height:260px; border-radius:18px; background:
  linear-gradient(135deg, rgba(37,99,235,0.16), rgba(22,163,74,0.12)),
  url('/community.jpg'),
  url('/community.png'),
  url('https://images.unsplash.com/photo-1520975693415-5e2f2722c5a3?auto=format&fit=crop&w=1400&q=60');
  background-size:cover; background-position:center;
  border:1px solid rgba(11,21,38,0.12)
}

.hero-visual .badge{position:absolute; left:14px; bottom:14px; padding:0.55rem 0.7rem; border-radius:14px; background: rgba(10,20,36,0.72); border:1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); max-width: 78%}
.hero-visual .badge .muted{color: rgba(255,255,255,0.72)}

/* Forms */
.form{display:flex; flex-direction:column; gap:0.85rem}
.form label{display:flex; flex-direction:column; gap:0.35rem}
input,select,textarea{background: #fff; border:1px solid rgba(11,21,38,0.14); border-radius:14px; padding:0.75rem 0.85rem; color: rgba(11,21,38,0.92); outline:none; font-size:1rem}
textarea{min-height:120px; resize:vertical}
input::placeholder, textarea::placeholder{color: rgba(11,21,38,0.45)}
small.help{color: rgba(11,21,38,0.60)}
.form .row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0.85rem}
@media (max-width: 720px){.form .row{grid-template-columns:1fr}}

.alert{border-radius:14px; padding:0.75rem 0.85rem; border:1px solid var(--section-border); background: rgba(11,21,38,0.04); color: rgba(11,21,38,0.92)}
.alert.ok{border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.10)}
.alert.err{border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.10)}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.08); padding:1.6rem 0; background: rgba(10,20,36,0.62); color: rgba(255,255,255,0.92)}
.site-footer .muted{color: rgba(255,255,255,0.72)}
.footer-inner{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer-inner .small{font-size:0.9rem; color: rgba(255,255,255,0.72)}
.site-footer .pill{border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.92)}

/* Utility */
.pill{display:inline-flex; align-items:center; gap:0.5rem; padding:0.35rem 0.6rem; border-radius:999px; border:1px solid var(--section-border); background: rgba(11,21,38,0.04); color: rgba(11,21,38,0.86); font-size:0.85rem}
.card .pill{color: rgba(11,21,38,0.86)}
.stat{display:flex; flex-direction:column; gap:0.25rem}
.stat strong{font-size:1.45rem}
.hr{height:1px; background: rgba(11,21,38,0.10); border:0; margin:1rem 0}

/* Dialogs (admin modals) */
dialog{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;
  padding:0;
  background: rgba(15,31,53,0.98);
  color: rgba(255,255,255,0.92);
  color-scheme: dark;
  max-width: calc(var(--max) - 2rem);
  box-shadow: 0 28px 90px rgba(0,0,0,0.65);
}
dialog::backdrop{background: rgba(0,0,0,0.68)}

dialog .card{
  background: rgba(15,31,53,0.98);
  border-color: rgba(255,255,255,0.16);
  box-shadow: none;
  color: rgba(255,255,255,0.92);
}

dialog .card input,dialog .card select,dialog .card textarea{background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.92)}
dialog .card input::placeholder,dialog .card textarea::placeholder{color: rgba(234,240,255,0.55)}
dialog .card small.help{color: rgba(234,240,255,0.65)}