body { background-color: var(--clr-bg-surface); min-height:100vh; display:flex; flex-direction:column; }

    /* HERO */
    .donors-hero {
      background: var(--grad-primary);
      padding: var(--sp-16) 0 var(--sp-24);
      text-align: center;
      position: relative;
      color: #fff;
      overflow: hidden;
    }
    .donors-hero::before {
      content:''; position:absolute; inset:0;
      background: radial-gradient(ellipse at 20% 80%, rgba(247,168,0,.18) 0%, transparent 60%),
                  radial-gradient(ellipse at 80% 20%, rgba(0,131,143,.35) 0%, transparent 55%);
      z-index:1;
    }
    .donors-hero-content { position:relative; z-index:2; max-width:800px; margin:0 auto; }
    .donors-hero h1 { font-size:clamp(2rem,5vw,3.25rem); font-weight:var(--fw-extrabold); color:#fff; margin-bottom:var(--sp-3); letter-spacing:-.02em; line-height:var(--lh-tight); }
    .donors-hero p  { font-size:var(--fs-lg); color:rgba(255,255,255,.85); max-width:620px; margin:0 auto; line-height:var(--lh-relaxed); }

    .hero-stat-row  { display:flex; gap:var(--sp-8); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-10); }
    .hero-stat      { background:rgba(255,255,255,.10); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-8); text-align:center; min-width:130px; }
    .hero-stat-number { font-family:var(--font-heading); font-size:var(--fs-3xl); font-weight:var(--fw-extrabold); color:var(--clr-accent); line-height:1; }
    .hero-stat-label  { font-size:var(--fs-xs); color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.07em; margin-top:.375rem; }

    /* SIBLING PAGE BANNER */
    .sibling-banner {
      background: var(--clr-accent-pale);
      border-bottom: 1px solid rgba(247,168,0,.25);
      padding: var(--sp-4) 0;
    }
    .sibling-banner-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      flex-wrap: wrap;
    }
    .sibling-banner-text {
      font-size: var(--fs-sm);
      color: var(--clr-text-secondary);
    }
    .sibling-banner-text strong { color: var(--clr-primary); }

    /* CONTROLS */
    .controls-wrap { background:var(--clr-bg-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--sp-5); margin-top:-3.5rem; position:relative; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); flex-wrap:wrap; border:1px solid var(--clr-border-light); margin-bottom:var(--sp-12); }
    .search-box { position:relative; flex:1; max-width:480px; }
    .search-box input { width:100%; padding:.75rem 1rem .75rem 2.75rem; border:1.5px solid var(--clr-border); border-radius:var(--radius-pill); font-size:var(--fs-sm); transition:var(--transition); color:var(--clr-text-primary); background:var(--clr-bg-light); }
    .search-box input:focus { border-color:var(--clr-primary-light); background:var(--clr-bg-white); box-shadow:0 0 0 4px var(--clr-primary-pale); outline:none; }
    .search-box i { position:absolute; left:1.125rem; top:50%; transform:translateY(-50%); color:var(--clr-text-muted); font-size:var(--fs-base); }
    .view-toggle { display:flex; gap:var(--sp-2); background:var(--clr-bg-surface); padding:.25rem; border-radius:var(--radius-pill); border:1px solid var(--clr-border-light); }
    .view-btn { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--clr-text-muted); font-size:var(--fs-base); cursor:pointer; transition:var(--transition); }
    .view-btn.active { background:var(--clr-primary); color:#fff; box-shadow:var(--shadow-sm); }

    /* GRID */
    .donors-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-6); margin-bottom:var(--sp-16); }
    .donor-card { background:var(--clr-bg-white); border-radius:var(--radius-xl); padding:var(--sp-8) var(--sp-6); box-shadow:var(--shadow-sm); border:1px solid var(--clr-border-light); text-align:center; display:flex; flex-direction:column; align-items:center; transition:var(--transition-slow); position:relative; overflow:hidden; }
    .donor-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-accent); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
    .donor-card::after  { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--grad-primary); transform:scaleX(0); transform-origin:right; transition:transform .35s ease; }
    .donor-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--clr-primary-pale); }
    .donor-card:hover::before, .donor-card:hover::after { transform:scaleX(1); }
    .donor-serial { position:absolute; top:var(--sp-4); left:var(--sp-4); width:28px; height:28px; background:var(--clr-primary-pale); color:var(--clr-primary); border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:var(--fw-bold); font-family:var(--font-heading); }
    .donor-photo  { width:100px; height:100px; border-radius:var(--radius-circle); object-fit:cover; margin-bottom:var(--sp-4); border:4px solid var(--clr-primary-pale); box-shadow:var(--shadow-sm); transition:border-color .3s ease; }
    .donor-avatar { width:100px; height:100px; border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:var(--fw-extrabold); font-size:1.75rem; color:#fff; margin-bottom:var(--sp-4); border:4px solid var(--clr-primary-pale); box-shadow:var(--shadow-sm); transition:border-color .3s ease; }
    .donor-card:hover .donor-photo, .donor-card:hover .donor-avatar { border-color:var(--clr-accent); }
    .donor-name   { font-family:var(--font-heading); font-size:var(--fs-sm); font-weight:var(--fw-extrabold); color:var(--clr-primary); margin-bottom:.25rem; line-height:var(--lh-tight); }
    .donor-desc   { font-size:var(--fs-xs); color:var(--clr-text-secondary); font-style:italic; margin-bottom:var(--sp-4); }
    .donor-badge  { display:inline-flex; align-items:center; gap:.375rem; font-size:var(--fs-xs); color:var(--clr-accent-dark); background:var(--clr-accent-pale); padding:.25rem .875rem; border-radius:var(--radius-pill); border:1px solid rgba(247,168,0,.25); margin-top:auto; font-weight:var(--fw-semibold); }

    /* LIST */
    .donors-list { display:none; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-16); }
    .donors-list.active { display:flex; }
    .donors-grid.active { display:grid; }
    .donor-list-item { background:var(--clr-bg-white); border-radius:var(--radius-md); padding:var(--sp-4) var(--sp-6); border:1px solid var(--clr-border-light); box-shadow:var(--shadow-xs); display:flex; align-items:center; gap:var(--sp-4); transition:var(--transition); position:relative; overflow:hidden; }
    .donor-list-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad-accent); transform:scaleY(0); transition:transform .25s ease; border-radius:0 2px 2px 0; }
    .donor-list-item:hover { box-shadow:var(--shadow-md); border-color:var(--clr-accent-light); transform:translateX(4px); }
    .donor-list-item:hover::before { transform:scaleY(1); }
    .list-serial   { width:24px; height:24px; background:var(--clr-primary-pale); color:var(--clr-primary); border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:var(--fw-bold); font-family:var(--font-heading); flex-shrink:0; }
    .list-avatar-sm{ width:48px; height:48px; border-radius:var(--radius-circle); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:var(--fw-bold); font-size:1rem; color:#fff; }
    .list-avatar-sm img { width:100%; height:100%; border-radius:var(--radius-circle); object-fit:cover; }
    .list-name     { font-family:var(--font-heading); font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--clr-primary); flex:1; }
    .list-desc     { font-size:var(--fs-sm); color:var(--clr-text-muted); font-style:italic; }
    .list-badge    { display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-xs); color:var(--clr-accent-dark); font-weight:var(--fw-semibold); background:var(--clr-accent-pale); padding:.2rem .7rem; border-radius:var(--radius-pill); flex-shrink:0; }

    /* EMPTY */
    .empty-state { display:none; text-align:center; padding:var(--sp-12) var(--sp-6); background:var(--clr-bg-white); border-radius:var(--radius-xl); border:1px solid var(--clr-border-light); box-shadow:var(--shadow-sm); margin-bottom:var(--sp-16); }

    /* CTA */
    .donor-cta { background:var(--grad-primary); border-radius:var(--radius-xl); padding:var(--sp-12) var(--sp-8); text-align:center; margin-bottom:var(--sp-16); position:relative; overflow:hidden; }
    .donor-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(247,168,0,.15) 0%, transparent 50%); }
    .donor-cta-inner { position:relative; z-index:1; }
    .donor-cta h2 { font-size:clamp(1.5rem,3vw,2rem); font-weight:var(--fw-extrabold); color:#fff; margin-bottom:var(--sp-3); }
    .donor-cta p  { color:rgba(255,255,255,.82); max-width:550px; margin:0 auto var(--sp-8); line-height:var(--lh-relaxed); }

    @media(max-width:768px){ .controls-wrap{flex-direction:column;} .search-box{max-width:100%;} .donors-grid{grid-template-columns:1fr 1fr;gap:var(--sp-4);} .sibling-banner-inner{flex-direction:column;} }
    @media(max-width:480px){ .donors-grid{grid-template-columns:1fr;} }