/* Threads-inspired front-site tone */
:root {
  --page-bg: #0a0a0a;
  --page-bg-strong: #050505;
  --page-surface: #181818;
  --page-surface-soft: #121212;
  --page-ink: #f5f5f5;
  --page-muted: #a3a3a3;
  --ink: #f5f5f5;
  --muted: #a3a3a3;
  --panel: #181818;
  --panel-strong: #101010;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --shadow-md: none;
  --shadow-lg: none;
  --accent: #ffffff;
  --accent-2: #d6d6d6;
  --accent-3: #8e8e8e;
}

body {
  background: var(--page-bg);
  color: var(--page-ink);
}

body.rooms-page,
body.login-page,
body.posts-page,
body.announcement-page,
body.advertise-page,
body.support-page,
body.mobile-app-page,
body.chat-page {
  background: var(--page-bg);
  color: var(--page-ink);
}

.site-header {
  background: rgba(10, 10, 10, 0.94);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
}

.brand {
  color: #ffffff;
  text-shadow: none;
}

.nav-links,
.nav-links a {
  color: var(--page-muted);
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: #f0f0f0;
}

.button.primary {
  background: #ffffff;
  color: #111111;
  box-shadow: none;
}

.button.secondary,
.button.ghost {
  background: var(--page-surface);
  border: 1px solid var(--border);
  color: #f5f5f5;
  box-shadow: none;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: none;
}

.site-footer {
  background: transparent;
  border-top: 1px solid var(--border);
  color: var(--page-muted);
}

body.has-mobile-bottom-nav {
  --mobile-nav-surface: #0d0d0d;
  --mobile-nav-border: rgba(255, 255, 255, 0.1);
  --mobile-nav-ink: #ffffff;
  --mobile-nav-muted: rgba(255, 255, 255, 0.72);
  --mobile-nav-accent: #ffffff;
  --mobile-nav-accent-soft: rgba(255, 255, 255, 0.1);
  --mobile-nav-shadow: none;
  --mobile-sheet-surface: #151515;
}

body.rooms-page .hero-panel,
body.rooms-page .hero-stat,
body.rooms-page .room-card,
body.rooms-page .rooms-empty,
body.rooms-page .mobile-more-sheet__panel,
body.rooms-page .mobile-more-sheet__link {
  background: var(--page-surface);
  border-color: var(--border);
  box-shadow: none;
}

body.rooms-page .hero p,
body.rooms-page .room-meta,
body.rooms-page .mobile-more-sheet__header p,
body.rooms-page .mobile-more-sheet__link small {
  color: var(--page-muted);
}

body.rooms-page .nav-links .nav-posts-link,
body.rooms-page .nav-links .nav-posts-link:hover {
  background: #202020;
  border-color: var(--border-strong);
  color: #ffffff;
}

body.rooms-page .nav-links .nav-posts-link {
  box-shadow: none;
  color: #ffffff;
}

body.rooms-page .mobile-page-chip,
body.rooms-page .mobile-more-sheet__link-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body.rooms-page .room-count {
  background: #ffffff;
  color: #111111;
}

body.login-page .login-panel,
body.login-page .notice-card,
body.login-page .face-card {
  background: var(--page-surface);
  border-color: var(--border);
  box-shadow: none;
}

body.login-page .login-panel small,
body.login-page .form-field label,
body.login-page .face-note,
body.login-page .face-header span,
body.login-page .field-hint,
body.login-page #faceStatus,
body.login-page .notice-list {
  color: var(--page-muted);
}

body.login-page .form-field input,
body.login-page .form-field select,
body.login-page #city,
body.login-page .age-picker-field input,
body.login-page #ageMobile,
body.login-page #age {
  background: #101010 !important;
  border-color: var(--border);
  color: #f5f5f5;
}

body.login-page .form-field input::placeholder,
body.login-page .form-field select::placeholder,
body.login-page #age::placeholder {
  color: #8d8d8d;
}

body.login-page .avatar-picker-preview,
body.login-page .notice-banner,
body.login-page .social-button,
body.login-page .radio-pill {
  background: #202020;
  border-color: var(--border);
  color: #ffffff;
  box-shadow: none;
}

body.login-page .face-preview,
body.login-page .face-placeholder {
  background: #0c0c0c;
}

body.posts-page {
  background: var(--page-bg);
}

body.posts-page .site-header {
  background: rgba(10, 10, 10, 0.94);
  border-bottom-color: var(--border);
  backdrop-filter: none;
}

body.posts-page .nav-links .nav-posts-link {
  background: #1e1e1e;
  border-color: var(--border);
  color: #ffffff;
  box-shadow: none;
}

body.posts-page .posts-hero,
body.posts-page .post-composer-card,
body.posts-page .posts-side-card,
body.posts-page .post-card,
body.posts-page .posts-empty,
body.posts-page .posts-hero-meta,
body.posts-page .post-background-stage,
body.posts-page .post-actions,
body.posts-page .post-toolbar {
  background: var(--page-surface);
  border-color: var(--border);
  box-shadow: none;
}

body.posts-page .posts-hero p,
body.posts-page .posts-hero-label,
body.posts-page .post-composer-hint,
body.posts-page .post-field span,
body.posts-page .post-card-time,
body.posts-page .post-card-location,
body.posts-page .post-card-tag {
  color: var(--page-muted);
}

body.posts-page .posts-hero-value,
body.posts-page .post-card-author,
body.posts-page .post-card-title {
  color: #ffffff;
}

body.posts-page .post-field input,
body.posts-page .post-field textarea,
body.posts-page .post-link-row input,
body.posts-page .post-background-stage textarea {
  background: #101010;
  border-color: var(--border);
  color: #f5f5f5;
}

body.posts-page .post-field input::placeholder,
body.posts-page .post-field textarea::placeholder {
  color: #8d8d8d;
}

body.posts-page .mobile-page-chip {
  background: rgba(255, 255, 255, 0.08);
}

.announcement-hero,
.announcement-content-card {
  background: var(--page-surface);
  border-color: var(--border);
  box-shadow: none;
}

.announcement-meta-card {
  background: var(--page-surface-soft);
  border-color: var(--border);
}

.announcement-status {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: #f5f5f5;
}

body.advertise-page,
body.support-page,
body.mobile-app-page {
  background: var(--page-bg);
}

body.advertise-page .advertise-hero,
body.advertise-page .advertise-form,
body.advertise-page .advertise-sidecard,
body.advertise-page .advertise-success,
body.advertise-page .advertise-copy-card,
body.advertise-page .advertise-hero-note,
body.advertise-page .form-status,
body.mobile-app-page .mobile-app-hero,
body.mobile-app-page .mobile-app-card,
body.mobile-app-page .mobile-app-note,
body.mobile-app-page .mobile-app-paths,
body.mobile-app-page .mobile-app-paths code,
body.support-page .admin-hero,
body.support-page .support-board,
body.support-page .support-messages,
body.support-page .support-message,
body.support-page .admin-session-meta {
  background: var(--page-surface);
  border-color: var(--border);
  box-shadow: none;
  color: var(--page-ink);
}

body.advertise-page .advertise-hero p,
body.advertise-page .advertise-sidecard p,
body.advertise-page .advertise-sidecard li,
body.advertise-page .advertise-success p,
body.mobile-app-page .mobile-app-hero p,
body.mobile-app-page .mobile-app-note p,
body.mobile-app-page .mobile-app-card-copy,
body.support-page .admin-session-time,
body.support-page .support-panel-subtitle {
  color: var(--page-muted);
}

body.mobile-app-page .mobile-app-card-icon {
  background: #202020;
  border: 1px solid var(--border);
  color: #ffffff;
}

body.support-page .support-input {
  background: #101010;
  border: 1px solid var(--border);
  color: #f5f5f5;
}

body.support-page .support-message.official {
  background: #202020;
  border-color: var(--border-strong);
}

body.chat-page .chat-topbar,
body.chat-page[class] .chat-topbar {
  background: #0a0a0a;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

body.chat-page .chat-shell {
  background: transparent;
}

body.chat-page .chat-panel {
  background: rgba(14, 16, 24, 0.34);
  border-color: var(--border);
  box-shadow: none;
}

body.chat-page .sidebar,
body.chat-page .sidebar-card,
body.chat-page .function-row,
body.chat-page .function-avatar,
body.chat-page .topbar-ad-host .og-card,
body.chat-page .attachment-card {
  background: rgba(21, 21, 21, 0.82);
  border-color: var(--border);
  box-shadow: none;
}

body.chat-page .chat-log {
  background: rgba(6, 8, 14, 0.22);
}

body.chat-page .message-meta {
  background: rgba(20, 22, 32, 0.56);
  border-color: var(--border);
  color: #d4d4d4;
  box-shadow: none;
}

body.chat-page .message-meta.private {
  background: rgba(28, 54, 102, 0.58);
  border-color: rgba(132, 197, 255, 0.45);
}

body.chat-page .message-meta.notice {
  background: rgba(245, 248, 255, 0.78);
  border-color: rgba(210, 220, 245, 0.78);
  color: #1a2340;
}

body.chat-page .message-meta.warning {
  background: rgba(120, 24, 24, 0.62);
  border-color: rgba(255, 120, 120, 0.4);
  box-shadow: none;
}

body.chat-page .message-text {
  color: #f5f5f5;
}

body.chat-page .message-text.notice {
  color: #1a2340;
}

body.chat-page .message-text.private {
  color: #f0ddff;
}

body.chat-page .message-text.system {
  color: #cecece;
}

body.chat-page .message-target,
body.chat-page .message-flag,
body.chat-page .action-pill,
body.chat-page .rank-badge,
body.chat-page .admin-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border);
  color: #f5f5f5;
}

body.chat-page .message-input,
body.chat-page .tool-target select {
  background: #101010;
  border-color: var(--border);
  color: #f5f5f5;
}

body.chat-page .chat-input {
  background: #0a0a0a;
  border-top: 1px solid var(--border);
}

body.chat-page .send-btn,
body.chat-page .mini-btn,
body.chat-page .tool-btn,
body.chat-page .tool-btn.subtle,
body.chat-page .attachment-ctrl {
  background: #1f1f1f;
  border-color: var(--border);
  color: #f5f5f5;
}

body.chat-page .mobile-sidebar-backdrop {
  background: rgba(0, 0, 0, 0.7);
}