/* After-dark salon: a high-contrast black, blush, and hot-pink skin. */
:root {
  --ink: #f7f1f5;
  --muted: #b5a8b1;
  --paper: #0d0910;
  --cream: #1a111b;
  --line: #3c263a;
  --coral: #ff4fa3;
  --olive: #bd36a1;
  --navy: #f3b5d6;
  --yellow: #ff9ec9;
  --surface: #171019;
  --surface-raised: #241326;
  --pink-glow: rgba(255, 79, 163, .24);
}

html { background: var(--paper); }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -6%, rgba(204, 34, 135, .22), transparent 28rem),
    radial-gradient(circle at 92% 14%, rgba(255, 79, 163, .13), transparent 24rem),
    var(--paper);
  color: var(--ink);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(rgba(255, 255, 255, .55) .55px, transparent .55px);
  background-size: 5px 5px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

::selection { background: var(--coral); color: #170710; }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

.site-header {
  background: rgba(13, 9, 16, .84);
  border-bottom-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px);
}

.wordmark { color: var(--ink); }
.mark {
  background: var(--coral);
  color: #190811;
  box-shadow: 0 0 0 4px rgba(255, 79, 163, .12), 0 0 22px var(--pink-glow);
}

.main-nav a { color: var(--muted); }
.main-nav a.active,
.main-nav a:hover { color: var(--ink); }
.main-nav a.active { border-bottom-color: var(--coral); }

.feed-toolbar,
.route-heading,
.profile-header,
.profile-post,
.profile-comment,
.profile-upvote,
.chat-panel h2,
.message-form,
.media-strip { border-color: var(--line); }

.subreddit-name { color: var(--ink); }
.eyebrow,
.post-meta .tag,
.content-badge,
.sidebar-links b,
.place-card b { color: var(--coral); }

.sort-label,
.post-meta,
.post-body,
.reddit-markdown,
.comment-body,
.sidebar-card p:not(.eyebrow),
.profile-meta,
.profile-comment p,
.profile-upvote p,
.message b,
.message time,
.route-heading > p:last-child,
.irl-section-card > div > p:last-child,
.irl-locations-heading > p,
.place-card small { color: var(--muted); }

select,
option { color: var(--ink); background: var(--surface); }

.post { border-color: var(--line); }
.post:hover .post-title,
.post-title-link:hover,
.profile-post h3 a:hover,
.profile-comment h3 a:hover { color: var(--coral); }
.post-title-link,
.post-title,
.comment b,
.comment-meta b,
.profile-post h3 a,
.profile-comment h3 a { color: var(--ink); }
.post-actions button,
.comment-footer button,
.score-button,
.post-collapse,
.load-more { color: var(--muted); }
.post-actions button:hover,
.comment-footer button:hover,
.post-collapse:hover,
.load-more:hover,
.source-link:hover { color: var(--coral); }
.score-button.selected,
.score-button:hover { color: var(--coral); }
.score-count { color: var(--ink); }

.comments { border-left-color: var(--surface-raised); }
.comment-collapse-rail::before { background: var(--line); }
.comment-collapse-rail:hover::before,
.comment-collapse-rail:focus-visible::before { background: var(--coral); }
.comment-collapse-rail:hover,
.comment-collapse-rail:focus-visible { color: var(--coral); }
.comment-collapsed-summary b { color: var(--ink); }

.sidebar-card,
.account-card,
.explore-card,
.conversation-panel,
.message,
.post-gallery-unavailable { background: var(--surface); }

.account-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 79, 163, .3);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}
.account-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -72px;
  bottom: -80px;
  border-radius: 50%;
  background: var(--coral);
  filter: blur(34px);
  opacity: .28;
}
.account-card > * { position: relative; z-index: 1; }
.explore-card { border: 1px solid var(--line); }

.sidebar-links a { color: var(--ink); border-color: var(--line); }
.sidebar-links a:hover { color: var(--coral); }

.start-conversation,
.submit-button,
.list-add-button {
  background: var(--coral);
  color: #1a0711;
  border-radius: 2px;
  box-shadow: 0 7px 22px rgba(255, 79, 163, .22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.start-conversation:hover,
.submit-button:hover,
.list-add-button:hover {
  background: #ff72b7;
  transform: translateY(-2px);
  box-shadow: 0 11px 28px rgba(255, 79, 163, .34);
}
.auth-inline,
.account-link,
.logout-button,
.messages-link { color: var(--ink); }
.auth-inline span,
.account-link span,
.logout-button span,
.messages-link span { color: var(--coral); }

.room,
.list-post-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 10px 28px rgba(0, 0, 0, .24);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.room::before,
.list-post-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background: radial-gradient(circle at 100% 0, rgba(255, 255, 255, .28), transparent 42%);
  pointer-events: none;
}
.room > *,
.list-post-card > * { position: relative; }
.room:hover {
  transform: translateY(-4px) rotate(-.35deg);
  border-color: var(--coral);
  box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 18px 34px rgba(0, 0, 0, .36);
}
.room-1, .list-post-card { background: linear-gradient(145deg, #572150, #251126); }
.room-2, .list-post-card:nth-child(3n + 2) { background: linear-gradient(145deg, #b01d71, #4b173f); }
.room-3 { background: linear-gradient(145deg, #7d2762, #251125); }
.room-4, .list-post-card:nth-child(3n) { background: linear-gradient(145deg, #3d1d46, #17101f); }
.room-5, .list-post-card:nth-child(5n) { background: linear-gradient(145deg, #ec4b9b, #68164d); }
.room.coming-soon { opacity: .56; }

.route-heading h1 em,
.connections-section-card h2 em,
.sidebar-card h2 em { color: var(--coral); }
.connections-section-card,
.profile-score { background: var(--surface-raised); border: 1px solid var(--line); }
.connections-section-card:nth-child(even) { background: #211024; }
.waitlist-button.joined { color: #1a0711; }
.place-card { color: var(--ink); }
.place-card:hover { border-color: var(--coral); }
.place-card.add-place { background: transparent; border-color: rgba(255, 79, 163, .55); color: var(--coral); }

.modal-backdrop { background: rgba(5, 2, 7, .78); backdrop-filter: blur(6px); }
.modal {
  background: #171019;
  border: 1px solid rgba(255, 79, 163, .36);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .58), 0 0 45px rgba(255, 79, 163, .12);
}
.modal-close { color: var(--muted); }
.modal input,
.modal textarea,
.modal select,
.comment-form textarea,
.conversation-panel input,
.message-form textarea {
  background: #0e0910;
  border-color: var(--line);
  color: var(--ink);
}
.modal input:focus,
.modal textarea:focus,
.modal select:focus,
.comment-form textarea:focus,
.conversation-panel input:focus,
.message-form textarea:focus { border-color: var(--coral); outline: none; }
.modal label,
.conversation-panel form label { color: var(--muted); }

.comment-form button,
.conversation-panel form button,
.message-form button,
.profile-message-button {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.comment-form button:hover,
.conversation-panel form button:hover,
.message-form button:hover,
.profile-message-button:hover {
  border-color: var(--coral);
  background: var(--coral);
  color: #1a0711;
}
.comment-signin { background: var(--surface-raised); color: var(--ink); }
.profile-message-button span { color: var(--coral); }

.messages-layout { background: var(--surface); border-color: var(--line); }
.conversation-panel { border-color: var(--line); }
.conversation-item { color: var(--ink); border-color: var(--line); }
.conversation-item.active { color: var(--coral); }
.message.mine { background: #5a1b47; color: #fff6fa; }
.message.mine b,
.message.mine time { color: #fac8df; }

.reddit-markdown a,
.source-link { color: #f7a7cf; text-decoration-color: var(--coral); }
.reddit-markdown a:hover { color: var(--coral); }
.reddit-markdown h1,
.reddit-markdown h2,
.reddit-markdown h3,
.reddit-markdown h4,
.reddit-markdown h5,
.reddit-markdown h6,
.reddit-markdown th { color: var(--ink); }
.reddit-markdown code,
.reddit-markdown pre,
.reddit-markdown th,
.post-image,
.reddit-inline-image { background: var(--surface-raised); }
.reddit-markdown blockquote,
.reddit-markdown hr,
.reddit-markdown th,
.reddit-markdown td { border-color: var(--line); }
.reddit-spoiler { background: var(--coral); }
.reddit-spoiler.revealed,
.reddit-spoiler:focus-visible { color: #180811; }

.gallery-control,
.gallery-counter { background: rgba(15, 5, 13, .86); }
.gallery-control:hover,
.gallery-control:focus-visible { background: var(--coral); color: #180811; }

.post-content-wrap.collapsed::after { background: linear-gradient(transparent, var(--paper)); }
.load-more { border-color: var(--line); background: var(--surface); }
.load-more:hover { border-color: var(--coral); }

@media (max-width: 520px) {
  .site-header { background: rgba(13, 9, 16, .94); }
  .account-card { box-shadow: none; }
}