*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --mbg:#1a1a1a;
  --mbg-card:#2a2a2a;
  --mbg-modal:#fff;
  --maccent:#5dadec;
  --mtext:#f0f0f0;
  --mtext-sub:#aaa;
  --mradius:8px;
}
#members-app{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  background:var(--mbg);
  color:var(--mtext);
  line-height:1.6;
  max-width:1200px;
  margin:0 auto;
  padding:20px 16px;
}
#members-app h1{
  text-align:center;
  font-size:2rem;
  letter-spacing:.15em;
  margin-bottom:8px;
  color:var(--maccent);
}
#members-app .subtitle{text-align:center;color:var(--mtext-sub);margin-bottom:32px;font-size:.9rem}
#members-app .filters{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-bottom:32px;
}
#members-app .filters button{
  background:transparent;
  border:1px solid #555;
  color:var(--mtext-sub);
  padding:6px 16px;
  border-radius:20px;
  cursor:pointer;
  font-size:.85rem;
  transition:all .2s;
}
#members-app .filters button:hover{border-color:var(--maccent);color:var(--maccent)}
#members-app .filters button.active{
  background:var(--maccent);
  border-color:var(--maccent);
  color:#000;
  font-weight:600;
}
#members-app .grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:16px;
}
@media(max-width:1024px){#members-app .grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:640px){
  #members-app .grid{grid-template-columns:repeat(4,1fr);gap:6px}
  #members-app .card-body{padding:6px 6px 10px}
  #members-app .card-pos{font-size:.65rem}
  #members-app .card-name{font-size:.75rem}
  #members-app .card-name-en{font-size:.6rem}
}
#members-app .card{
  background:var(--mbg-card);
  border-radius:var(--mradius);
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
#members-app .card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(93,173,236,.15)}
#members-app .card-img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#333}
#members-app .card-img.placeholder{object-fit:contain;padding:20%;background:#2a2a2a}
#members-app .card-body{padding:14px 14px 16px}
#members-app .card-pos{font-size:.75rem;color:var(--maccent);font-weight:600;letter-spacing:.05em}
#members-app .card-name{font-size:.95rem;font-weight:700;margin-top:2px}
#members-app .card-name-en{font-size:.7rem;color:var(--mtext-sub);margin-top:1px}
#members-app .loading{text-align:center;padding:60px 0;color:var(--mtext-sub);font-size:1rem}
#members-app .no-results{text-align:center;padding:60px 0;color:var(--mtext-sub)}

#members-modal-overlay{
  display:none !important;
  position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;
  background:rgba(0,0,0,.7) !important;
  z-index:100000 !important;
  justify-content:center !important;align-items:center !important;
  padding:20px !important;
}
#members-modal-overlay.open{display:flex !important}
#members-modal-overlay .members-modal{
  background:#fff !important;
  color:#222 !important;
  border-radius:12px !important;
  max-width:520px !important;width:100% !important;
  max-height:90vh !important;overflow-y:auto !important;
  position:relative !important;
  animation:membersModalIn .25s ease !important;
}
@keyframes membersModalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
#members-modal-overlay .modal-close{
  position:sticky !important;top:0 !important;
  text-align:right !important;
  padding:12px 16px 0 !important;
  z-index:1 !important;
}
#members-modal-overlay .modal-close button{
  background:none !important;border:none !important;color:#666 !important;font-size:1.5rem !important;cursor:pointer !important;
  width:36px !important;height:36px !important;border-radius:50% !important;
  transition:background .2s !important;
}
#members-modal-overlay .modal-close button:hover{background:rgba(0,0,0,.08) !important}
#members-modal-overlay .modal-img{
  width:60% !important;max-width:240px !important;aspect-ratio:3/4 !important;object-fit:cover !important;
  border-radius:8px !important;display:block !important;margin:0 auto 16px !important;background:#eee !important;
}
#members-modal-overlay .modal-img.placeholder{object-fit:contain !important;padding:20% !important}
#members-modal-overlay .modal-content{padding:0 24px 28px !important}
#members-modal-overlay .modal-name{font-size:1.4rem !important;font-weight:700 !important;text-align:center !important;color:#222 !important}
#members-modal-overlay .modal-name-en{font-size:.85rem !important;color:#666 !important;text-align:center !important;margin-bottom:12px !important}
#members-modal-overlay .modal-badge{
  display:flex !important;justify-content:center !important;gap:8px !important;flex-wrap:wrap !important;margin-bottom:16px !important;
}
#members-modal-overlay .modal-badge span{
  background:rgba(93,173,236,.15) !important;
  color:#5dadec !important;
  padding:3px 12px !important;
  border-radius:12px !important;
  font-size:.8rem !important;
  font-weight:600 !important;
}
#members-modal-overlay .modal-info dl{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  gap:6px 16px !important;
  font-size:.88rem !important;
}
#members-modal-overlay .modal-info dt{color:#666 !important;white-space:nowrap !important}
#members-modal-overlay .modal-info dd{color:#222 !important}
#members-modal-overlay .modal-comment-label{
  font-size:.75rem !important;
  color:#5dadec !important;
  font-weight:600 !important;
  margin-bottom:6px !important;
  letter-spacing:.05em !important;
}
#members-modal-overlay .modal-comment{
  background:rgba(0,0,0,.03) !important;
  border-left:3px solid #5dadec !important;
  padding:12px 16px !important;
  border-radius:0 8px 8px 0 !important;
  font-size:.88rem !important;
  line-height:1.8 !important;
  white-space:pre-wrap !important;
  color:#222 !important;
}