/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ── */
:root {
  --red:    #e8192c;
  --dark:   #0d0d0d;
  --card:   #1a1a1a;
  --card2:  #222;
  --border: #2e2e2e;
  --text:   #f0f0f0;
  --muted:  #888;
  --accent: #ff4f6d;
  --green:  #00c853;
  --grad:   linear-gradient(135deg,#e8192c 0%,#ff6b35 100%);
}

html, body { height: 100%; font-family: 'Segoe UI', Arial, sans-serif; background: var(--dark); color: var(--text); }

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .8; }

img { display: block; max-width: 100%; }

/* ── AGE GATE ── */
#age-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #000 url('https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=1600&q=60') center/cover no-repeat;
}
#age-gate::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.85); }
.gate-box {
  position: relative; text-align: center; padding: 48px 40px;
  background: rgba(20,20,20,.96); border: 1px solid var(--border);
  border-radius: 16px; max-width: 460px; width: 90%;
}
.gate-logo  { font-size: 2rem; font-weight: 900; color: var(--accent); margin-bottom: 10px; }
.gate-box h2 { font-size: 1.45rem; margin-bottom: 10px; }
.gate-box p  { color: var(--muted); font-size: .88rem; margin-bottom: 26px; line-height: 1.6; }
.gate-btn    { display:block; width:100%; padding:14px; border:none; border-radius:8px; font-size:.95rem; font-weight:700; cursor:pointer; transition:opacity .2s; }
.gate-enter  { background:var(--grad); color:#fff; margin-bottom:10px; }
.gate-leave  { background:transparent; border:1px solid var(--border); color:var(--muted); }
.gate-btn:hover { opacity:.85; }
.gate-fine   { margin-top:18px; font-size:.72rem; color:#555; }
.gate-fine a { color:#666; }

/* ── NAV ── */
nav {
  position: sticky; top:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 20px; height: 58px;
  background: rgba(13,13,13,.97); border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
}
.nav-logo { font-size:1.4rem; font-weight:900; color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a, .nav-links button {
  color:var(--muted); font-size:.88rem; padding:6px 12px;
  border-radius:6px; transition:background .15s; background:none; border:none; cursor:pointer;
}
.nav-links a:hover, .nav-links button:hover { background:var(--card); color:var(--text); opacity:1; }
.nav-cta { background:var(--grad)!important; color:#fff!important; font-weight:700; }
.badge-pill {
  background:var(--red); color:#fff; font-size:.65rem; font-weight:800;
  padding:2px 6px; border-radius:999px; vertical-align:super; margin-left:2px;
}

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 22px; border-radius:8px; font-size:.9rem; font-weight:700;
  cursor:pointer; border:none; transition:opacity .2s, transform .15s; }
.btn:hover { opacity:.88; transform:translateY(-1px); }
.btn-primary { background:var(--grad); color:#fff; }
.btn-outline  { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-danger   { background:#c0392b; color:#fff; }
.btn-sm       { padding:6px 14px; font-size:.8rem; }
.btn-block    { display:flex; width:100%; }

/* ── HERO ── */
.hero {
  position:relative; min-height:88vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; padding:80px 20px;
}
.hero-bg { position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1800&q=70') center/cover no-repeat;
  filter:brightness(.3); }
.hero-content { position:relative; max-width:700px; }
.hero-badge {
  display:inline-block; background:rgba(232,25,44,.15);
  border:1px solid rgba(232,25,44,.4); color:var(--accent);
  padding:5px 16px; border-radius:999px; font-size:.78rem; font-weight:700;
  margin-bottom:18px; letter-spacing:.4px;
}
.hero h1 { font-size:clamp(2rem,6vw,3.5rem); font-weight:900; line-height:1.15; margin-bottom:18px; }
.hero h1 span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p  { font-size:1.1rem; color:#bbb; margin-bottom:32px; line-height:1.7; }

/* ── SIGNUP FORM (hero) ── */
.signup-form { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px; }
.signup-form select, .signup-form input {
  flex:1 1 150px; padding:13px 14px;
  background:rgba(255,255,255,.07); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:.92rem;
}
.signup-form select option { background:#1a1a1a; }
.signup-form .btn-primary  { flex:1 1 150px; }

/* ── STATS ── */
.stats { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.stat-num { font-size:1.5rem; font-weight:800; color:var(--accent); }
.stat-lbl { font-size:.73rem; color:var(--muted); }

/* ── SECTION ── */
section { padding:72px 20px; }
.section-inner { max-width:1100px; margin:0 auto; }
.section-label { color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.section-title { font-size:clamp(1.5rem,3.5vw,2.3rem); font-weight:900; margin-bottom:14px; }
.section-sub   { color:var(--muted); max-width:580px; line-height:1.7; margin-bottom:44px; font-size:.95rem; }
.bg-alt { background:#111; }

/* ── PROFILE GRID ── */
.profiles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.profile-card  {
  border-radius:12px; overflow:hidden; position:relative; cursor:pointer;
  background:var(--card); border:1px solid var(--border);
  transition:transform .2s, border-color .2s;
}
.profile-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.profile-card img   { width:100%; aspect-ratio:3/4; object-fit:cover; }
.profile-card .info { padding:10px 12px; }
.profile-card .name { font-weight:700; font-size:.9rem; }
.profile-card .meta { color:var(--muted); font-size:.75rem; margin-top:3px; }
.online-dot {
  position:absolute; top:9px; left:9px; width:10px; height:10px;
  background:var(--green); border-radius:50%; border:2px solid var(--dark);
}
.card-tag {
  position:absolute; top:9px; right:9px;
  background:rgba(232,25,44,.88); color:#fff;
  font-size:.68rem; font-weight:800; padding:3px 8px; border-radius:4px;
}

/* ── FEATURES ── */
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.feature-card  {
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:26px 22px;
  transition:border-color .2s;
}
.feature-card:hover { border-color:var(--accent); }
.feature-icon { font-size:1.9rem; margin-bottom:12px; }
.feature-card h3 { font-size:1rem; font-weight:700; margin-bottom:7px; }
.feature-card p  { color:var(--muted); font-size:.87rem; line-height:1.6; }

/* ── HOW IT WORKS ── */
.steps { display:flex; gap:28px; flex-wrap:wrap; }
.step  { flex:1 1 180px; text-align:center; }
.step-num {
  width:52px; height:52px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:900; margin:0 auto 14px;
}
.step h3 { font-size:.95rem; font-weight:700; margin-bottom:7px; }
.step p  { color:var(--muted); font-size:.85rem; line-height:1.6; }

/* ── CTA BAND ── */
.cta-band { background:var(--grad); text-align:center; padding:68px 20px; }
.cta-band h2 { font-size:clamp(1.5rem,4vw,2.5rem); font-weight:900; margin-bottom:14px; }
.cta-band p  { font-size:.96rem; opacity:.9; margin-bottom:28px; }
.btn-white   { background:#fff; color:var(--red); padding:14px 38px; border-radius:8px; font-size:1rem; font-weight:800; display:inline-block; transition:transform .15s; }
.btn-white:hover { transform:scale(1.03); opacity:1; }

/* ── FOOTER ── */
footer {
  background:#080808; border-top:1px solid var(--border);
  padding:44px 20px 24px; text-align:center;
}
.footer-logo  { font-size:1.5rem; font-weight:900; color:var(--accent); margin-bottom:14px; }
.footer-links { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.footer-links a { color:var(--muted); font-size:.83rem; }
.footer-links a:hover { color:var(--text); opacity:1; }
.badges { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.badge  {
  background:var(--card); border:1px solid var(--border); border-radius:5px;
  padding:5px 12px; font-size:.7rem; color:var(--muted); font-weight:600;
}
.footer-disc { max-width:820px; margin:0 auto 16px; font-size:.72rem; color:#555; line-height:1.7; }
.footer-copy { color:#444; font-size:.72rem; }

/* ── AUTH PAGES ── */
.auth-wrap  { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 16px; }
.auth-card  { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:40px 36px; width:100%; max-width:440px; }
.auth-card h2 { font-size:1.6rem; font-weight:900; margin-bottom:6px; }
.auth-card p  { color:var(--muted); font-size:.87rem; margin-bottom:28px; }

/* ── FORM ELEMENTS ── */
.form-group   { margin-bottom:18px; }
.form-group label { display:block; font-size:.83rem; font-weight:600; color:var(--muted); margin-bottom:6px; }
.form-control {
  width:100%; padding:11px 14px;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:.92rem; transition:border-color .2s;
}
.form-control:focus { outline:none; border-color:var(--accent); }
.form-control::placeholder { color:#555; }
select.form-control option { background:var(--card); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-hint { font-size:.75rem; color:var(--muted); margin-top:5px; }
.alert { padding:12px 16px; border-radius:8px; font-size:.88rem; margin-bottom:18px; }
.alert-error   { background:rgba(232,25,44,.12); border:1px solid rgba(232,25,44,.3); color:#ff7a88; }
.alert-success { background:rgba(0,200,83,.1);   border:1px solid rgba(0,200,83,.3);  color:#5effa5; }

/* ── DASHBOARD ── */
.dash-wrap { max-width:1200px; margin:0 auto; padding:28px 18px; }
.dash-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:28px; }
.dash-title  { font-size:1.5rem; font-weight:900; }
.filter-bar  {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:14px 18px; margin-bottom:24px;
}
.filter-bar select, .filter-bar input { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:8px 12px; font-size:.85rem; }
.filter-bar select option { background:var(--card); }

/* ── PROFILE PAGE ── */
.profile-wrap { max-width:900px; margin:0 auto; padding:28px 18px; }
.profile-hero { display:flex; gap:28px; flex-wrap:wrap; margin-bottom:32px; }
.profile-avatar { width:220px; height:280px; border-radius:14px; object-fit:cover; flex-shrink:0; border:2px solid var(--border); }
.profile-info h2 { font-size:1.8rem; font-weight:900; margin-bottom:6px; }
.profile-info .meta { color:var(--muted); margin-bottom:14px; font-size:.9rem; }
.profile-info .bio  { color:#ccc; line-height:1.7; font-size:.95rem; margin-bottom:20px; }
.tag-list { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tag-pill {
  background:rgba(232,25,44,.12); border:1px solid rgba(232,25,44,.25);
  color:var(--accent); padding:4px 12px; border-radius:999px; font-size:.78rem; font-weight:600;
}
.action-btns { display:flex; gap:10px; flex-wrap:wrap; }

/* ── MESSAGES ── */
.msg-wrap  { max-width:1000px; margin:0 auto; padding:28px 18px; display:grid; grid-template-columns:280px 1fr; gap:0; min-height:calc(100vh - 58px); }
.msg-sidebar { border-right:1px solid var(--border); overflow-y:auto; }
.msg-thread  { display:flex; flex-direction:column; }
.conv-item   {
  display:flex; gap:12px; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s;
}
.conv-item:hover, .conv-item.active { background:var(--card2); }
.conv-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.conv-name   { font-weight:700; font-size:.9rem; }
.conv-last   { color:var(--muted); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.conv-time   { color:var(--muted); font-size:.72rem; margin-left:auto; flex-shrink:0; }
.conv-unread { background:var(--red); color:#fff; font-size:.65rem; font-weight:800; padding:2px 6px; border-radius:999px; }
.chat-header { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.chat-header img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.chat-header strong { font-size:1rem; }
.chat-body   { flex:1; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:10px; }
.bubble-wrap { display:flex; gap:8px; align-items:flex-end; }
.bubble-wrap.me { flex-direction:row-reverse; }
.bubble-wrap img { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.bubble {
  max-width:62%; padding:10px 14px; border-radius:14px; font-size:.88rem; line-height:1.55;
  word-break:break-word;
}
.bubble.them { background:var(--card2); color:var(--text); border-bottom-left-radius:4px; }
.bubble.me   { background:var(--grad); color:#fff;         border-bottom-right-radius:4px; }
.bubble-time { font-size:.68rem; color:var(--muted); margin-top:3px; text-align:right; }
.chat-footer { padding:14px 18px; border-top:1px solid var(--border); display:flex; gap:10px; }
.chat-footer input { flex:1; }
.chat-empty  { flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; }

/* ── SETTINGS ── */
.settings-wrap { max-width:680px; margin:0 auto; padding:36px 18px; }
.settings-wrap h2 { font-size:1.5rem; font-weight:900; margin-bottom:28px; }
.avatar-preview { width:100px; height:100px; border-radius:50%; object-fit:cover; border:2px solid var(--border); margin-bottom:14px; }

/* ── POLICY PAGES ── */
.policy-wrap  { max-width:860px; margin:0 auto; padding:52px 20px 80px; }
.policy-wrap h1 { font-size:2rem; font-weight:900; margin-bottom:6px; }
.policy-wrap .sub { color:var(--muted); font-size:.87rem; margin-bottom:40px; }
.policy-wrap h2 { font-size:1.25rem; font-weight:800; margin:40px 0 12px; border-left:3px solid var(--accent); padding-left:12px; }
.policy-wrap p, .policy-wrap li { color:#bbb; font-size:.92rem; margin-bottom:12px; line-height:1.8; }
.policy-wrap ul, .policy-wrap ol { padding-left:22px; margin-bottom:14px; }

/* ── RESPONSIVE ── */
@media(max-width:700px){
  nav .nav-links .hide-mobile { display:none; }
  .signup-form select, .signup-form input, .signup-form .btn-primary { flex:1 1 100%; }
  .form-row { grid-template-columns:1fr; }
  .msg-wrap  { grid-template-columns:1fr; }
  .msg-sidebar { display:none; }
  .profile-avatar { width:100%; height:260px; }
}

/* ── LOADING SPINNER ── */
.spinner { display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── TOAST ── */
#toast {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:12px 20px; font-size:.88rem; transform:translateY(80px); opacity:0;
  transition:all .3s; pointer-events:none;
}
#toast.show { transform:translateY(0); opacity:1; }
#toast.success { border-color:rgba(0,200,83,.4); color:#5effa5; }
#toast.error   { border-color:rgba(232,25,44,.4); color:#ff7a88; }