@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

:root {
  --bg:           #0d0d0d;
  --bg-2:         #161616;
  --bg-3:         #1e1e1e;
  --bg-4:         #262626;
  --accent:       #c97e7e;
  --accent-light: #d99090;
  --accent-dim:   rgba(201,126,126,0.13);
  --accent-border:rgba(201,126,126,0.28);
  --text:         #f0ede6;
  --text-2:       rgba(240,237,230,0.60);
  --text-3:       rgba(240,237,230,0.35);
  --border:       rgba(255,255,255,0.08);
  --border-2:     rgba(255,255,255,0.14);
  --font-display: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; }
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; border-bottom: 0.5px solid var(--border); position: sticky; top: 0; z-index: 100; background: rgba(13,13,13,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.navbar-logo { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.3px; }
.navbar-dot { color: var(--accent); }
.navbar-right { display: flex; align-items: center; gap: 12px; }
.navbar-member-badge { font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); border: 0.5px solid var(--accent-border); padding: 4px 10px; border-radius: 20px; }
.navbar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-dim); border: 0.5px solid var(--accent-border); color: var(--accent); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.btn-ghost { background: transparent; border: 0.5px solid var(--border-2); color: var(--text); padding: 8px 18px; border-radius: 24px; font-size: 13px; font-family: var(--font-body); transition: border-color .2s, background .2s; cursor: pointer; }
.btn-ghost:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
.btn-primary { background: var(--accent); border: none; color: var(--text); padding: 8px 20px; border-radius: 24px; font-size: 13px; font-weight: 500; font-family: var(--font-body); transition: background .2s, transform .1s; cursor: pointer; }
.btn-primary:hover { background: var(--accent-light); }
.btn-primary:active { transform: scale(.97); }
.spinner { width: 36px; height: 36px; border: 2px solid var(--border-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .navbar { padding: 16px 20px; } .navbar-logo { font-size: 17px; } }