:root{--bg:#ffffff;--card:#ffffff;--muted:#4b5563;--txt:#111827}
*{box-sizing:border-box} html,body,#root{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:#fff;color:var(--txt)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:18px}
.title{color:var(--txt);font-weight:800;font-size:clamp(20px,2.6vw,32px)}
.search{flex:1;display:flex;align-items:center;gap:10px;max-width:520px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:10px 14px}
.search input{flex:1;background:transparent;border:0;color:var(--txt);outline:none;font-size:15px}
.badge{color:var(--muted);font-weight:600}
.section{margin-top:18px} .section h2{color:var(--txt);font-size:18px;margin:0 0 10px 4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:16px;padding:16px;box-shadow:0 4px 10px rgba(0,0,0,.06)}
.cardHead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#f1f5f9;border:1px solid #e2e8f0;color:#1f2937;font-weight:800}
.starBtn{margin-left:auto;background:#f8fafc;border:1px solid #e5e7eb;border-radius:999px;padding:8px 10px;cursor:pointer;color:#f59e0b}
.starBtn[aria-pressed="true"]{background:#fff7ed;border-color:#fbd38d}
.name{color:var(--txt);font-weight:700}
.meta{color:var(--muted);font-size:14px;margin-top:4px;line-height:1.35}
.empty{color:var(--muted);padding:32px;text-align:center}
.hr{height:1px;background:#e5e7eb;margin:6px 0 16px}
.search ion-icon{width:18px;height:18px;color:var(--muted)}
:root{--card-h:180px}

.grid{grid-auto-rows:var(--card-h)}

.card{
  position:relative;
  height:var(--card-h);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.cardHead{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:0;
}

.starBtn{
  position:absolute;
  top:12px;
  right:12px;
  margin-left:0;
}

.avatar{margin-bottom:6px}

.name{
  color:var(--txt);
  font-weight:700;
  text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.meta{text-align:center}

