<style>
  /* styles/committee.css */

/* ===== Design tokens ===== */
:root{
  --bg:            #f7f9fc;
  --panel-bg:      #ffffff;
  --text:          #0b1220;
  --muted:         #6b7280;
  --border:        rgba(2,6,23,.08);
  --shadow:        0 10px 25px rgba(2,6,23,.08);
  --brand:         #0d6efd;          /* Bootstrap primary */
  --brand-2:       #10b981;          /* teal accent */
  --brand-ink:     #0b3a8a;
  --chip-bg:       #eef2ff;
  --chip-text:     #1e3a8a;
  --ribbon-grad:   linear-gradient(90deg, #0d6efd, #10b981);
  --pill-active:   #0d6efd;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:          #0b1220;
    --panel-bg:    #0f172a;
    --text:        #e5e7eb;
    --muted:       #9aa3b2;
    --border:      rgba(148,163,184,.18);
    --shadow:      0 10px 25px rgba(0,0,0,.35);
    --chip-bg:     #0b3a8a;
    --chip-text:   #e5edff;
  }
}

/* ===== Page scaffolding ===== */
body{ background: var(--bg); color: var(--text); }
.page-hero{
  padding: 4rem 0 2rem;
  background:
    radial-gradient(1000px 500px at 0% 0%, rgba(13,110,253,.09), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(16,185,129,.09), transparent 60%);
}
.text-gradient{
  background: linear-gradient(135deg, #1e3a8a 0%, var(--brand-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ===== Cards ===== */
.committee-card .card{
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.committee-card .card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(2,6,23,.14) }
.role-ribbon{
  height: 4px; width: 100%;
  background: var(--ribbon-grad);
}

/* Card header icon pill */
.icon-circle{
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(13,110,253,.12), rgba(13,110,253,.04));
  border: 1px solid var(--border);
}

/* ===== Avatars & member line ===== */
.member-item{ align-items: center }
.member-avatar{
  width: 36px; height: 36px; border-radius: 999px; overflow: hidden;
  display: inline-flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 120% at 100% 0%, #c7d2fe 0%, #e0e7ff 45%, #f5f3ff 100%);
  border: 1px solid var(--border);
  margin-right: .75rem;
  flex: 0 0 36px;
}
.member-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block }
.member-avatar .fallback{
  font-weight: 700; font-size: .85rem; color: #334155;
}
.member-name a{ text-decoration: none }
.member-name a:hover{ text-decoration: underline }

/* Inline action icons (site/email) */
.member-actions a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; margin-left: .25rem;
  background: var(--chip-bg); color: var(--chip-text);
  border: 1px solid var(--border);
  transition: transform .15s ease, background .15s ease;
}
.member-actions a:hover{ transform: translateY(-2px) }

/* ===== Filter/search controls ===== */
.btn-outline-primary{
  border-radius: 999px;
  border-color: var(--border);
  color: var(--text);
  background: transparent;
}
.btn-outline-primary.active,
.btn-outline-primary[aria-pressed="true"]{
  color:#fff; background-color: var(--pill-active); border-color: var(--pill-active);
}
.filter-count.badge{
  background: #e9f2ff; color: #0b3a8a; border: 1px solid var(--border);
}
@media (prefers-color-scheme: dark){
  .filter-count.badge{ background: #0b3a8a; color: #e5edff; }
}

.input-group .form-control{
  border-radius: 999px; padding-left: .25rem; background: var(--panel-bg); color: var(--text);
  border: 1px solid var(--border);
}
.input-group-text{
  border-radius: 999px 0 0 999px; background: var(--panel-bg); border: 1px solid var(--border);
  border-right: 0;
}

/* Search highlights */
mark.search-hit{ padding:.1rem .2rem; background: #fff3cd; }

/* Keyboard focus */
:focus-visible{ outline: 3px solid rgba(13,110,253,.45); outline-offset: 2px; border-radius:.5rem }

/* Print */
@media print{
  .page-hero, .input-group, [role="toolbar"], .btn, .badge, .role-ribbon{ display:none !important }
  .card{ box-shadow:none !important; border: 1px solid #bbb !important }
}

  
</style>