:root{ --radius:12px; --shadow:0 6px 20px rgba(0,0,0,.06); --muted:#6b7280; --primary:#0d6efd; }
.matchai-form, .matchai-filters { background:#fff; border:1px solid #eee; padding:16px; border-radius:var(--radius); box-shadow:var(--shadow); }
.matchai-form h3 { margin:0 0 8px; }
.matchai-form .desc { color:var(--muted); font-size:13px; margin:6px 0 12px; }
.matchai-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.matchai-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.matchai-form input, .matchai-form textarea, .matchai-form select { width:100%; padding:10px; border:1px solid #e5e7eb; border-radius:8px; }
.matchai-form button, .button-primary { background:var(--primary); color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; }
.matchai-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
.matchai-card { border:1px solid #eee; border-radius:var(--radius); padding:12px; background:#fff; box-shadow:var(--shadow); }
.matchai-card h4 { margin:8px 0; font-size:18px; display:flex; align-items:center; gap:6px; }
.matchai-card h4::after { content: attr(data-lock); font-size:.9em; opacity:.7; }
.matchai-meta { color:#555; font-size:13px; margin-bottom:8px; }
.matchai-pagination a { padding:6px 10px; border:1px solid #ddd; margin-right:6px; border-radius:6px; text-decoration:none; }
.matchai-pagination a.current { background:#f3f3f3; }
.matchai-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.matchai-gallery .matchai-thumb img { width:100%; height:auto; border-radius:8px; display:block; }
.matchai-video video { width:100%; border-radius:8px; }
.matchai-messaging { display:grid; grid-template-columns:240px 1fr; gap:16px; margin-top:16px; }
.matchai-contacts ul { list-style:none; padding:0; margin:0; }
.matchai-contacts li { margin:0 0 6px; }
.matchai-thread { border:1px solid #eee; border-radius:var(--radius); padding:10px; display:flex; flex-direction:column; height:420px; }
#matchai-log { flex:1; overflow:auto; padding:8px; border-bottom:1px solid #f0f0f0; }
.msg-row { padding:6px 8px; margin:6px 0; border-radius:6px; max-width:70%; }
.msg-row.mine { margin-left:auto; background:#e6f7ff; }
.msg-row.theirs { margin-right:auto; background:#f6f6f6; }
#matchai-send { display:flex; gap:8px; margin-top:8px; }
#matchai-send textarea { flex:1; }
.matchai-profile .profile-card { display:grid; grid-template-columns:320px 1fr; gap:28px; max-width:1100px; margin:24px auto; }
.profile-left .avatar { width:100%; aspect-ratio:1/1; background:#f8fafc; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.profile-left .avatar-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:72px; color:#94a3b8; background:#f1f5f9; }
.profile-left .quick > div { margin:6px 0; color:var(--muted); }
.profile-right h1 { margin:0 0 10px; }
.profile-right .bio { font-size:16px; line-height:1.7; color:#111827; }
.chips { margin-top:12px; }
.chip { display:inline-block; padding:6px 10px; border-radius:999px; background:#f3f4f6; margin:4px 6px 0 0; font-size:13px; }
.cta { margin-top:16px; }
@media (max-width: 900px) { .matchai-profile .profile-card { grid-template-columns:1fr; } .matchai-grid, .matchai-grid-3, .matchai-cards { grid-template-columns:1fr; } }