:root{--bg:#0b0f19;--card:#111826;--muted:#9aa3b2;--text:#e6e9ef;--accent:#4f46e5;--radius:16px}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}.container{max-width:1100px;margin:0 auto;padding:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border-radius:var(--radius);padding:16px;border:1px solid #1f2937;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.card:hover{border-color:#2e3a4d;transform:translateY(-2px);transition:.2s}
.header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.header img{width:56px;height:56px;border-radius:12px;background:#0b1220;object-fit:cover;object-position:center}
h1{font-size:28px;margin:0 0 12px}h2{font-size:22px;margin:12px 0}h3{font-size:18px;margin:10px 0}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#192030;color:var(--muted);font-size:12px;border:1px solid #263042}
.footer{margin-top:24px;color:var(--muted);font-size:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--accent);border:none;color:white;font-weight:600;cursor:pointer}
.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #2a3648;background:#0f172a;color:var(--text)}
.chat{max-height:320px;overflow:auto;border:1px solid #263042;border-radius:12px;padding:12px;background:#0b1220}
.msg{margin:8px 0}.msg .who{font-weight:700;margin-right:6px}
.bio p{margin:8px 0}
.hints{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hints .badge{cursor:pointer}

/* Scoped 3-column layout only for the people grid */
#people { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch; }
#people .card { display:block; background:#0b1418; border:1px solid #ffffff12; border-radius:16px; overflow:hidden; }
#people .card img { width:100%; height:180px; object-fit:cover; display:block; }
#people .card .header { display:flex; gap:10px; align-items:center; padding:12px; }
#people .card h3 { margin:0; font-size:18px; }
#people .card .badge { margin-top:4px; font-size:12px; opacity:.85; }
@media (max-width: 900px){ #people { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 580px){ #people { grid-template-columns: 1fr; } }