body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin:0; background:#fff; color:#111; }
.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid #eee; position: sticky; top: 0; background: #fff; }
.logo { font-weight:700; text-decoration:none; color:#111; }
.nav a { margin-right: 14px; text-decoration:none; color:#333; }
.nav a.active { font-weight:700; }
.nav-actions .btn { margin-left: 8px; }
.footer { padding: 20px 16px; border-top:1px solid #eee; display:flex; gap:14px; justify-content:center; }
.footer a { color:#333; text-decoration:none; }

.card { border:1px solid #eee; border-radius:12px; padding:16px; margin: 12px 0; background:#fff; }
.link { display:block; }
.link:hover { border-color:#ddd; }
.row { display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

input, textarea, select { width:100%; padding:10px; border-radius:10px; border:1px solid #ddd; margin: 8px 0; }
textarea { min-height: 90px; }
.btn { padding:10px 12px; border-radius:10px; border:1px solid #111; background:#111; color:#fff; cursor:pointer; }
.btn.ghost { background:#fff; color:#111; }
.btn:disabled { opacity: .6; cursor:not-allowed; }

.title { font-weight: 700; font-size: 16px; }
.muted { color:#666; }
.small { font-size: 12px; }
.big { font-size: 22px; font-weight: 800; margin-top: 8px; }
.tag { border:1px solid #ddd; border-radius: 999px; padding: 4px 10px; font-size:12px; color:#333; }

.avatar { width: 64px; height:64px; border-radius: 14px; object-fit: cover; border: 1px solid #eee; }
.avatar.sm { width:48px; height:48px; border-radius: 12px; }
.hostcard { display:flex; gap:12px; align-items:center; margin-top: 12px; }
.miniCard { display:flex; gap:10px; align-items:center; padding: 10px; border:1px solid #eee; border-radius: 12px; }

.chat .messages { height: 420px; overflow:auto; border:1px solid #eee; border-radius: 12px; padding: 12px; }
.chat .composer { display:flex; gap:10px; margin-top: 10px; }
.chat .composer input { margin:0; }
.msg { margin: 10px 0; }
.msg .bubble { display:inline-block; padding: 10px 12px; border-radius: 12px; background:#f4f4f4; max-width: 80%; }
.msg.mine { text-align: right; }
.msg.mine .bubble { background:#111; color:#fff; }
.msg .meta { font-size: 11px; color:#777; margin-top: 2px; }
.unread { border-color:#111; }