:root { color-scheme: dark; --bg:#0d0911; --panel:#1b1520; --line:rgba(255,255,255,.1); --text:#fff; --muted:#b9aebf; --pink:#ef49a1; --purple:#ca50f4; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at top right,#34183d,transparent 36%),var(--bg); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; }
button,input { font:inherit; }
select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.55; }
[hidden] { display:none!important; }
.topbar { display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:16px max(22px,5vw); border-bottom:1px solid var(--line); background:rgba(13,9,17,.88); }
.logo { text-decoration:none; font-weight:900; font-size:27px; letter-spacing:-1px; }
.logo span { color:var(--purple); }
.nav { display:flex; gap:5px; flex-wrap:wrap; margin-left:auto; }
.nav a { padding:9px 12px; border-radius:9px; text-decoration:none; color:var(--muted); font-size:14px; font-weight:700; }
.nav a:hover,.nav a[aria-current="page"] { color:white; background:rgba(255,255,255,.08); }
.request-count { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:6px; padding:0 5px; border-radius:99px; background:var(--pink); color:#160a17; font-size:11px; font-weight:900; }
.age-badge { display:inline-flex; align-items:center; gap:6px; width:max-content; padding:4px 9px 4px 4px; border:1px solid rgba(139,229,172,.5); border-radius:99px; background:rgba(43,126,78,.2); color:#bff6d1; font-size:12px; font-weight:800; }
.age-badge img { width:25px; height:25px; flex:none; }
.wrap { width:min(1140px,calc(100% - 36px)); margin:42px auto 90px; }
.eyebrow { margin:0 0 12px; color:#dc8af8; text-transform:uppercase; letter-spacing:1.5px; font-size:12px; font-weight:900; }
h1 { font-size:clamp(36px,5vw,56px); letter-spacing:-2px; line-height:1.08; margin:0 0 14px; }
h2 { font-size:21px; margin:0 0 18px; }
.lead { color:var(--muted); line-height:1.6; max-width:670px; font-size:16px; margin:0 0 28px; }
.panel { background:rgba(27,21,32,.94); border:1px solid var(--line); border-radius:20px; padding:clamp(20px,3vw,30px); margin:20px 0; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.card { display:flex; flex-direction:column; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:17px; text-decoration:none; }
.card:hover { border-color:rgba(202,80,244,.5); }
.card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#2a2030; }
.card-photo-empty { display:grid; place-items:center; width:100%; aspect-ratio:4/3; color:var(--muted); background:#2a2030; }
.card-body { padding:18px; }
.card-title { display:block; font-size:19px; font-weight:800; margin-bottom:7px; }
.card-meta { display:block; color:#d695ed; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; }
.presence { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; font-weight:700; }
.presence::before { content:""; width:8px; height:8px; border-radius:50%; background:#776a7e; flex:none; }
.presence-online { color:#bff6d1; }
.presence-online::before { background:#52d884; box-shadow:0 0 0 3px rgba(82,216,132,.16); }
.card-text { display:block; color:var(--muted); line-height:1.5; margin-top:11px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 17px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--purple),var(--pink)); color:white; font-weight:800; text-decoration:none; }
.button.secondary { background:rgba(255,255,255,.07); border:1px solid var(--line); }
.button:focus-visible,.nav a:focus-visible,.card:focus-visible { outline:3px solid #e893ff; outline-offset:3px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; }
.stack { display:grid; gap:13px; }
.notice { color:var(--muted); line-height:1.65; }
.notice.error { color:#ff8aa8; }
.search { display:flex; gap:10px; flex-wrap:wrap; }
.search input { flex:1 1 220px; min-height:44px; border:1px solid var(--line); border-radius:10px; background:#120d17; color:white; padding:10px 13px; }
select,textarea { width:100%; border:1px solid var(--line); border-radius:10px; background:#120d17; color:white; padding:10px 13px; }
.profile-hero { display:grid; grid-template-columns:minmax(220px,350px) 1fr; gap:28px; }
.profile-hero img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; background:#2a2030; }
.profile-hero .card-photo-empty { aspect-ratio:4/5; border-radius:14px; }
.pill { display:inline-block; padding:7px 10px; border-radius:20px; background:rgba(202,80,244,.12); color:#e3a7f7; font-size:12px; font-weight:800; margin:0 7px 8px 0; }
.kink-chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 18px; }
.kink-chip { display:inline-flex; padding:7px 11px; border-radius:99px; background:rgba(202,80,244,.14); border:1px solid rgba(202,80,244,.3); color:#f0cbfa; font-size:13px; font-weight:700; }
.kink-empty { color:var(--muted); font-size:14px; }
.kink-comparison { margin-top:20px; padding:16px; border:1px solid var(--line); border-radius:12px; }
.comparison-row { margin:7px 0; line-height:1.5; }
.comparison-row.match { color:#baf0ce; }
.comparison-row.boundary { color:#ffd3a3; }
.person { padding:15px; border:1px solid var(--line); border-radius:12px; margin:10px 0; }
.person strong { display:block; margin-bottom:5px; }
.actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
@media(max-width:760px) { .nav { order:3; width:100%; margin-left:0; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-hero { grid-template-columns:1fr; } }
@media(max-width:520px) { .grid { grid-template-columns:1fr; } .wrap { margin-top:26px; } }
@media(max-width:760px) {
  .topbar { gap:10px; padding:13px 16px 0; }
  .topbar .logo { font-size:25px; }
  .topbar #user-button { margin-left:auto; }
  .nav { order:3; width:calc(100% + 32px); margin:0 -16px; padding:0 10px 8px; flex-wrap:nowrap; gap:2px; overflow-x:auto; scrollbar-width:thin; overscroll-behavior-x:contain; }
  .nav a { flex:none; min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
}