/* ===== 喷系论坛 — Clean Dark Theme v3 ===== */
/* Dark, refined, readable — hacker aesthetic without the noise */

/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== Variables ===== */
:root,
[data-theme],
[data-theme^=dark] {
  --body-bg: #111114 !important;
  --body-fg: #d1d5db !important;
  --body-secondary-fg: #6b7280 !important;
  --body-muted-fg: #374151 !important;
  --body-heading-color: #f3f4f6 !important;
  --body-hero-bg: #111114 !important;
  --control-bg: rgba(255,255,255,.04) !important;
  --control-fg: #d1d5db !important;
  --control-border: rgba(255,255,255,.08) !important;
  --control-danger-fg: #ef4444 !important;
  --button-bg: rgba(255,255,255,.04) !important;
  --button-fg: #d1d5db !important;
  --button-primary-bg: #2563eb !important;
  --button-primary-fg: #fff !important;
  --button-primary-hover-bg: #1d4ed8 !important;
  --overlay-bg: rgba(0,0,0,.85) !important;
  --muted-more-fg: #374151 !important;
  --header-bg: #0d0d10 !important;
  --header-fg: #d1d5db !important;
  --header-control-bg: rgba(255,255,255,.04) !important;
  --header-control-fg: #6b7280 !important;
  --sidebar-bg: #0d0d10 !important;
  --sidebar-fg: #6b7280 !important;
  --discussion-list-item-bg-hover: rgba(255,255,255,.02) !important;
  --composer-bg: #161619 !important;
  --composer-fg: #d1d5db !important;
}

/* ===== Base ===== */
body, .App {
  background: #111114 !important;
  color: #d1d5db !important;
  font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Noto Sans SC', sans-serif !important;
  font-weight: 600 !important;
  color: #f3f4f6 !important;
  letter-spacing: -0.01em !important;
}

/* ===== Header ===== */
.App-header {
  background: #0d0d10 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.4) !important;
}

.Header-title a {
  color: #f3f4f6 !important;
  font-weight: 700 !important;
  font-size: 1.1em !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  transition: color .2s !important;
}

.Header-title a:hover {
  color: #60a5fa !important;
}

/* Header controls */
.Header-primary .Button,
.Header-secondary .Button {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: #9ca3af !important;
  font-size: .85em !important;
  border-radius: 6px !important;
  transition: all .2s !important;
}

.Header-primary .Button:hover,
.Header-secondary .Button:hover {
  background: rgba(255,255,255,.08) !important;
  color: #f3f4f6 !important;
  border-color: rgba(255,255,255,.12) !important;
}

.Header-primary .icon,
.Header-secondary .icon,
.Header-navigation .icon {
  color: #6b7280 !important;
  transition: color .2s !important;
}

.Header-primary .icon:hover,
.Header-secondary .icon:hover {
  color: #9ca3af !important;
}

/* Notification badge */
.NotificationGrid .badge,
.Header-secondary .badge {
  background: #ef4444 !important;
  color: #fff !important;
  border: none !important;
  font-size: .65em !important;
  min-width: 16px !important;
  text-align: center !important;
  border-radius: 10px !important;
  padding: 1px 5px !important;
}

/* ===== Sidebar ===== */
.App-navigation {
  background: #0d0d10 !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}

.IndexPage-nav,
.sideNav {
  background: #0d0d10 !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}

.sideNav .Dropdown-header {
  color: #4b5563 !important;
  font-size: .7em !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 14px 16px 6px !important;
}

.sideNav > ul > li > a,
.NavigationNav a {
  color: #6b7280 !important;
  font-size: .88em !important;
  padding: 9px 16px !important;
  border-radius: 6px !important;
  margin: 1px 8px !important;
  transition: all .15s !important;
  border-left: none !important;
}

.sideNav > ul > li > a:hover,
.NavigationNav a:hover {
  color: #f3f4f6 !important;
  background: rgba(255,255,255,.04) !important;
}

.sideNav > ul > li.active > a {
  color: #f3f4f6 !important;
  background: rgba(255,255,255,.06) !important;
  font-weight: 500 !important;
}

/* ===== App Content ===== */
.App-content {
  background: #111114 !important;
}

.container {
  background: transparent !important;
}

/* ===== Index Page ===== */
.IndexPage {
  background: #111114 !important;
}

.IndexPage-title {
  color: #f3f4f6 !important;
  font-weight: 600 !important;
  font-size: 1.05em !important;
}

/* Toolbar */
.IndexPage-toolbar {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding-bottom: 12px !important;
}

.IndexPage-toolbar .Button,
.ButtonGroup .Button {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: #9ca3af !important;
  font-size: .82em !important;
  border-radius: 6px !important;
  transition: all .15s !important;
}

.IndexPage-toolbar .Button:hover,
.ButtonGroup .Button:hover {
  background: rgba(255,255,255,.08) !important;
  color: #f3f4f6 !important;
  border-color: rgba(255,255,255,.12) !important;
}

.IndexPage-toolbar .Button.active,
.ButtonGroup .Button.active {
  background: rgba(37,99,235,.15) !important;
  color: #60a5fa !important;
  border-color: rgba(37,99,235,.3) !important;
}

/* ===== Discussion List ===== */
.DiscussionList {
  border: none !important;
}

.DiscussionList-loadMore .Button {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #6b7280 !important;
  border-radius: 8px !important;
  transition: all .2s !important;
  padding: 10px 24px !important;
}

.DiscussionList-loadMore .Button:hover {
  background: rgba(255,255,255,.06) !important;
  color: #f3f4f6 !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* ===== Discussion List Item ===== */
.DiscussionListItem {
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  transition: background .15s !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
}

.DiscussionListItem:hover {
  background: rgba(255,255,255,.02) !important;
  border-left-color: #2563eb !important;
}

.DiscussionListItem-title {
  margin-bottom: 6px !important;
}

.DiscussionListItem-title a,
.DiscussionListItem-title span {
  color: #e5e7eb !important;
  font-size: .92em !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color .15s !important;
}

.DiscussionListItem-title a:hover {
  color: #60a5fa !important;
}

/* Unread */
.DiscussionListItem-new .DiscussionListItem-title a {
  color: #60a5fa !important;
  font-weight: 600 !important;
}

.DiscussionListItem-new .unread-indicator {
  background: #2563eb !important;
  box-shadow: 0 0 6px rgba(37,99,235,.4) !important;
}

/* Meta info */
.DiscussionListItem-info,
.DiscussionListItem-count,
.DiscussionListItem-meta {
  color: #4b5563 !important;
  font-size: .78em !important;
}

.DiscussionListItem-info a,
.DiscussionListItem-meta a {
  color: #6b7280 !important;
  transition: color .15s !important;
}

.DiscussionListItem-info a:hover,
.DiscussionListItem-meta a:hover {
  color: #60a5fa !important;
}

/* Count badge */
.DiscussionListItem-count {
  background: rgba(37,99,235,.1) !important;
  border: 1px solid rgba(37,99,235,.2) !important;
  color: #60a5fa !important;
  border-radius: 10px !important;
  font-size: .72em !important;
  min-width: 22px !important;
  text-align: center !important;
  padding: 2px 7px !important;
  font-weight: 500 !important;
}

/* ===== Avatar ===== */
.Avatar {
  border: 2px solid rgba(255,255,255,.08) !important;
  border-radius: 50% !important;
  transition: border-color .2s !important;
}

.Avatar:hover {
  border-color: rgba(255,255,255,.2) !important;
}

/* ===== Username ===== */
.username {
  color: #60a5fa !important;
  font-weight: 500 !important;
  transition: color .15s !important;
}

.username:hover {
  color: #93bbfd !important;
}

/* ===== Tags ===== */
.TagLabel {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #9ca3af !important;
  font-size: .75em !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  transition: all .15s !important;
}

.TagLabel:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #e5e7eb !important;
}

/* ===== Discussion Page ===== */
.DiscussionPage {
  background: #111114 !important;
}

.DiscussionPage-nav {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
}

/* ===== Posts ===== */
.Post {
  background: #161619 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-left: 3px solid rgba(37,99,235,.2) !important;
  border-radius: 0 8px 8px 0 !important;
  margin-bottom: 10px !important;
  transition: border-color .2s !important;
}

.Post:hover {
  border-left-color: #2563eb !important;
}

.Post-header {
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

.PostUser {
  color: #6b7280 !important;
}

.Post-body {
  color: #d1d5db !important;
  line-height: 1.8 !important;
  font-size: .92em !important;
}

.Post-body p {
  color: #d1d5db !important;
}

.Post-body a {
  color: #60a5fa !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(96,165,250,.25) !important;
  transition: all .15s !important;
}

.Post-body a:hover {
  color: #93bbfd !important;
  border-bottom-color: #60a5fa !important;
}

.Post-body strong,
.Post-body b {
  color: #f3f4f6 !important;
  font-weight: 600 !important;
}

.Post-body em,
.Post-body i {
  color: #9ca3af !important;
}

/* Inline code */
.Post-body code {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #e5e7eb !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-size: .86em !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Code block */
.Post-body pre {
  background: #0d0d10 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 3px solid rgba(37,99,235,.3) !important;
  color: #d1d5db !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 16px !important;
  overflow-x: auto !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .86em !important;
}

.Post-body pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.Post-body blockquote {
  border-left: 3px solid rgba(255,255,255,.12) !important;
  color: #9ca3af !important;
  padding-left: 16px !important;
  margin-left: 0 !important;
  font-style: italic !important;
}

.Post-body img {
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 6px !important;
  max-width: 100% !important;
}

.Post-body ul,
.Post-body ol {
  color: #d1d5db !important;
  padding-left: 24px !important;
}

.Post-body li {
  margin-bottom: 6px !important;
}

.Post-body li::marker {
  color: #4b5563 !important;
}

.Post-body hr {
  border-color: rgba(255,255,255,.08) !important;
  margin: 20px 0 !important;
}

/* Post actions */
.Post-actions .Button {
  color: #4b5563 !important;
  background: none !important;
  border: none !important;
  font-size: .78em !important;
  transition: color .15s !important;
}

.Post-actions .Button:hover {
  color: #60a5fa !important;
}

.Post-actions .Button.active {
  color: #ef4444 !important;
}

/* ===== Composer ===== */
.Composer,
.ComposerBody {
  background: #161619 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 3px solid rgba(37,99,235,.25) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,.5) !important;
}

.Composer-content {
  background: transparent !important;
}

.ComposerBody-editor textarea,
.TextEditor textarea,
.TextEditor .ProseMirror {
  background: rgba(255,255,255,.02) !important;
  color: #d1d5db !important;
  font-family: 'Inter', 'Noto Sans SC', sans-serif !important;
  font-size: .9em !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 6px !important;
  padding: 14px !important;
  line-height: 1.7 !important;
}

.ComposerBody-editor textarea:focus,
.TextEditor textarea:focus,
.TextEditor .ProseMirror:focus {
  border-color: rgba(37,99,235,.3) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.08) !important;
}

.Composer-controls .Button {
  background: #2563eb !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  transition: all .15s !important;
}

.Composer-controls .Button:hover {
  background: #1d4ed8 !important;
}

/* ===== Dropdown Menus ===== */
.Dropdown-menu {
  background: #1a1a1f !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
  padding: 4px !important;
}

.Dropdown-menu > li > a,
.Dropdown-menu > li > button {
  color: #9ca3af !important;
  font-size: .85em !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  transition: all .12s !important;
}

.Dropdown-menu > li > a:hover,
.Dropdown-menu > li > button:hover {
  background: rgba(255,255,255,.06) !important;
  color: #f3f4f6 !important;
}

.Dropdown-menu > li > a.active,
.Dropdown-menu > li > button.active {
  background: rgba(37,99,235,.12) !important;
  color: #60a5fa !important;
}

.Dropdown-menu .Dropdown-header {
  color: #4b5563 !important;
  font-size: .68em !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 14px 4px !important;
}

/* ===== Notification Panel ===== */
.NotificationList {
  background: #1a1a1f !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

.NotificationList-header {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  color: #f3f4f6 !important;
  font-weight: 600 !important;
}

.Notification {
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  color: #9ca3af !important;
  font-size: .85em !important;
  padding: 12px 16px !important;
  transition: background .12s !important;
}

.Notification:hover {
  background: rgba(255,255,255,.03) !important;
}

.Notification-unread {
  background: rgba(37,99,235,.04) !important;
  border-left: 2px solid rgba(37,99,235,.3) !important;
}

.Notification-content {
  color: #9ca3af !important;
}

.Notification-content .username {
  color: #60a5fa !important;
}

/* ===== Search ===== */
.Search-input input {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #d1d5db !important;
  font-size: .88em !important;
  border-radius: 8px !important;
  transition: all .15s !important;
}

.Search-input input:focus {
  border-color: rgba(37,99,235,.3) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.08) !important;
}

.Search-input input::placeholder {
  color: #374151 !important;
}

.Search-results {
  background: #1a1a1f !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
}

.SearchResult {
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

.SearchResult .DiscussionListItem-title a {
  color: #e5e7eb !important;
}

/* ===== User Profile ===== */
.UserPage {
  background: #111114 !important;
}

.UserCard {
  background: #161619 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
}

.UserCard-identity {
  color: #f3f4f6 !important;
}

.UserCard-info {
  color: #6b7280 !important;
}

/* ===== Settings ===== */
.SettingsPage {
  background: #111114 !important;
}

.SettingsPage .sideNav > ul > li > a {
  color: #6b7280 !important;
}

.SettingsPage .sideNav > ul > li.active > a {
  color: #60a5fa !important;
}

/* ===== Modal Backdrop ===== */
.ModalManager-backdrop,
.Modal-backdrop {
  background: rgba(0,0,0,.8) !important;
  backdrop-filter: blur(8px) !important;
}

.ModalManager-invisibleBackdrop {
  background: transparent !important;
}

/* ===== Modal ===== */
.Modal {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.Modal-body {
  background: #1a1a1f !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 32px 28px !important;
  box-shadow: 0 24px 48px rgba(0,0,0,.6) !important;
  animation: modalIn .25s ease-out !important;
}

@keyframes modalIn {
  0% { opacity: 0; transform: translateY(8px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.Modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.Modal-header {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  margin-bottom: 24px !important;
  padding-bottom: 0 !important;
}

.Modal-header ul {
  display: flex !important;
  gap: 0 !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.Modal-header ul li {
  flex: 1 !important;
  text-align: center !important;
}

.Modal-header ul li a,
.Modal-header ul li button {
  color: #6b7280 !important;
  background: none !important;
  border: none !important;
  padding: 12px 16px !important;
  font-size: .88em !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  width: 100% !important;
  display: block !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
}

.Modal-header ul li.active a,
.Modal-header ul li.active button {
  color: #f3f4f6 !important;
  border-bottom-color: #2563eb !important;
}

.Modal-header ul li a:hover,
.Modal-header ul li button:hover {
  color: #e5e7eb !important;
  border-bottom-color: rgba(37,99,235,.3) !important;
}

.Modal-close {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #6b7280 !important;
  font-size: 1em !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  transition: all .15s !important;
}

.Modal-close:hover {
  background: rgba(239,68,68,.1) !important;
  color: #ef4444 !important;
  border-color: rgba(239,68,68,.2) !important;
}

/* ===== Forms ===== */
.Form-group {
  margin-bottom: 18px !important;
}

.Form-group label,
.LogInModal label,
.SignUpModal label {
  color: #9ca3af !important;
  font-size: .78em !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.Form-group input,
.Form-group textarea,
.FormControl {
  width: 100% !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  color: #f3f4f6 !important;
  font-family: 'Inter', 'Noto Sans SC', sans-serif !important;
  font-size: .9em !important;
  outline: none !important;
  transition: all .15s !important;
  box-sizing: border-box !important;
}

.Form-group input:focus,
.Form-group textarea:focus,
.FormControl:focus {
  border-color: rgba(37,99,235,.4) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.08) !important;
}

.Form-group input::placeholder,
.FormControl::placeholder {
  color: #374151 !important;
  opacity: 1 !important;
}

/* Confirm Password */
input[name="passwordConfirm"] {
  width: 100% !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  color: #f3f4f6 !important;
  font-family: 'Inter', 'Noto Sans SC', sans-serif !important;
  font-size: .9em !important;
  outline: none !important;
  box-sizing: border-box !important;
}

input[name="passwordConfirm"]:focus {
  border-color: rgba(37,99,235,.4) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.08) !important;
}

input[name="passwordConfirm"]::placeholder {
  color: #374151 !important;
}

.password-match-error {
  color: #ef4444 !important;
  font-size: .78em !important;
  margin-top: 6px !important;
}

.Form-group--danger input[name="passwordConfirm"] {
  border-color: rgba(239,68,68,.4) !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.08) !important;
}

/* ===== Buttons ===== */
.Button--primary,
.Button[type="submit"] {
  width: 100% !important;
  padding: 12px !important;
  border-radius: 8px !important;
  background: #2563eb !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: .92em !important;
  letter-spacing: 0.01em !important;
  margin-top: 8px !important;
  transition: all .15s ease !important;
}

.Button--primary:hover,
.Button[type="submit"]:hover {
  background: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.25) !important;
}

.Button--primary:active,
.Button[type="submit"]:active {
  background: #1e40af !important;
  transform: translateY(1px) !important;
}

.Button:not(.Button--primary):not([type="submit"]):not(.Modal-close) {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #9ca3af !important;
  border-radius: 6px !important;
  transition: all .15s !important;
}

.Button:not(.Button--primary):not([type="submit"]):not(.Modal-close):hover {
  background: rgba(255,255,255,.08) !important;
  color: #f3f4f6 !important;
  border-color: rgba(255,255,255,.14) !important;
}

.Button--block {
  width: 100% !important;
}

/* ===== Links in Modal ===== */
.Modal-body a {
  color: #60a5fa !important;
  text-decoration: none !important;
  transition: color .15s !important;
}

.Modal-body a:hover {
  color: #93bbfd !important;
}

/* ===== Form Sections ===== */
.Form-header {
  color: #f3f4f6 !important;
  font-size: 1.3em !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-bottom: 26px !important;
}

.Form-body {
  color: #d1d5db !important;
}

.Form-controls {
  color: #6b7280 !important;
}

.Form--centered {
  text-align: center !important;
}

/* Checkbox */
.Form-group .checkbox-label,
.Form-group .Checkbox,
.Form-group--remember {
  color: #9ca3af !important;
  font-size: .82em !important;
  white-space: nowrap !important;
}

.Form-group .Checkbox--switch .Checkbox-display {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
}

.Form-group .Checkbox--switch .Checkbox-display::after {
  background: #6b7280 !important;
  border-radius: 50% !important;
}

.Form-group .Checkbox--switch input:checked + .Checkbox-display {
  background: rgba(37,99,235,.2) !important;
  border-color: rgba(37,99,235,.4) !important;
}

.Form-group .Checkbox--switch input:checked + .Checkbox-display::after {
  background: #2563eb !important;
}

/* Errors */
.Form-group--danger,
.HelpText {
  color: #ef4444 !important;
  font-size: .78em !important;
}

.Form-group--danger input,
.Form-group--danger .FormControl {
  border-color: rgba(239,68,68,.35) !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.06) !important;
}

.Form-group .helpText,
.Modal-body p {
  color: #6b7280 !important;
  font-size: .8em !important;
}

/* Forgot password */
.Form-group--forgot a {
  color: #60a5fa !important;
  font-size: .78em !important;
}

.Form-group--forgot a:hover {
  color: #93bbfd !important;
}

/* Divider */
.Modal-divider {
  border-color: rgba(255,255,255,.06) !important;
  margin: 20px 0 !important;
}

/* Alert */
.Modal-alert {
  background: rgba(239,68,68,.06) !important;
  border: 1px solid rgba(239,68,68,.15) !important;
  color: #ef4444 !important;
  border-radius: 8px !important;
  font-size: .85em !important;
  padding: 12px 14px !important;
}

/* Social buttons */
.SocialButtons .Button {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #9ca3af !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  transition: all .15s !important;
}

.SocialButtons .Button:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #f3f4f6 !important;
}

/* Loading */
.LoadingIndicator {
  color: #2563eb !important;
}

.LoadingIndicator-dot {
  background: #2563eb !important;
}

/* ===== Login/Signup Modal ===== */
.LogInModal,
.SignUpModal {
  max-width: 420px !important;
}

.LogInModal .Modal-body,
.SignUpModal .Modal-body {
  padding: 36px 32px !important;
  border-radius: 14px !important;
}

.LogInModal .Form-header,
.SignUpModal .Form-header {
  color: #f3f4f6 !important;
  font-size: 1.4em !important;
  font-weight: 700 !important;
  margin-bottom: 28px !important;
}

.LogInModal .Form-group,
.SignUpModal .Form-group {
  margin-bottom: 18px !important;
}

.LogInModal .FormControl,
.SignUpModal .FormControl {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: #f3f4f6 !important;
  font-size: .9em !important;
}

.LogInModal .FormControl:focus,
.SignUpModal .FormControl:focus {
  border-color: rgba(37,99,235,.4) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.08) !important;
}

.LogInModal .Button--primary,
.SignUpModal .Button--primary {
  margin-top: 12px !important;
  font-size: .95em !important;
  padding: 13px 18px !important;
}

.LogInModal .Modal-header,
.SignUpModal .Modal-header {
  text-align: center !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding-bottom: 18px !important;
  margin-bottom: 24px !important;
}

.LogInModal .Form-group--forgot {
  text-align: right !important;
  margin-top: -8px !important;
  margin-bottom: 14px !important;
}

.LogInModal .Form-group--forgot a {
  color: #60a5fa !important;
  font-size: .78em !important;
}

/* Hide remember-me checkbox */
[class*="remember"],
.Form-group--remember,
.LogInModal .Form-group--remember,
.Modal .Form-group--remember {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.LogInModal .Form-group--signUp,
.SignUpModal .Form-group--logIn {
  text-align: center !important;
  margin-top: 20px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

.LogInModal .Form-group--signUp a,
.SignUpModal .Form-group--logIn a {
  color: #60a5fa !important;
  font-size: .84em !important;
  font-weight: 500 !important;
  transition: color .15s !important;
}

.LogInModal .Form-group--signUp a:hover,
.SignUpModal .Form-group--logIn a:hover {
  color: #93bbfd !important;
}

/* ===== Welcome Hero ===== */
.WelcomeHero {
  background: #161619 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  padding: 32px 28px !important;
  margin-bottom: 24px !important;
}

.WelcomeHero h2 {
  color: #f3f4f6 !important;
  font-weight: 600 !important;
  font-size: 1.2em !important;
}

.WelcomeHero p {
  color: #9ca3af !important;
  font-size: .9em !important;
}

.WelcomeHero .Button {
  background: #2563eb !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all .15s !important;
}

.WelcomeHero .Button:hover {
  background: #1d4ed8 !important;
}

/* ===== Badge ===== */
.Badge {
  background: rgba(37,99,235,.12) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(37,99,235,.2) !important;
  border-radius: 4px !important;
}

/* ===== Alerts ===== */
.Alert {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: #9ca3af !important;
  border-radius: 8px !important;
}

.Alert--error,
.Alert--danger {
  background: rgba(239,68,68,.05) !important;
  border-color: rgba(239,68,68,.15) !important;
  color: #ef4444 !important;
}

.Alert--success {
  background: rgba(34,197,94,.05) !important;
  border-color: rgba(34,197,94,.15) !important;
  color: #22c55e !important;
}

/* ===== Footer ===== */
.App-footer {
  color: #374151 !important;
  font-size: .72em !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
  padding-top: 18px !important;
}

.App-footer a {
  color: #4b5563 !important;
  transition: color .15s !important;
}

.App-footer a:hover {
  color: #9ca3af !important;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: #111114 !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.2) !important;
}

/* ===== Selection ===== */
::selection {
  background: rgba(37,99,235,.3) !important;
  color: #f3f4f6 !important;
}

/* ===== Tooltip ===== */
.tooltip {
  background: #1a1a1f !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #d1d5db !important;
  font-size: .82em !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}

/* ===== Placeholder ===== */
.Placeholder {
  color: #374151 !important;
}

/* ===== Event Posts ===== */
.PostStream .EventPost {
  color: #4b5563 !important;
  font-size: .82em !important;
  border-left: 2px solid rgba(255,255,255,.06) !important;
  padding-left: 14px !important;
}

.PostStream .EventPost .username {
  color: #60a5fa !important;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .Modal-body {
    margin: 10px !important;
    padding: 24px 20px !important;
    border-radius: 10px !important;
  }

  .LogInModal,
  .SignUpModal {
    max-width: 100% !important;
  }

  .LogInModal .Modal-body,
  .SignUpModal .Modal-body {
    padding: 28px 22px !important;
  }

  .Form-header {
    font-size: 1.1em !important;
  }

  .Header-title a {
    font-size: .95em !important;
  }

  .WelcomeHero {
    padding: 24px 20px !important;
  }
}

@media (max-width: 480px) {
  .Modal-body {
    padding: 20px 16px !important;
  }

  .LogInModal .Modal-body,
  .SignUpModal .Modal-body {
    padding: 24px 18px !important;
  }

  .Button--primary,
  .Button[type="submit"] {
    padding: 11px !important;
    font-size: .88em !important;
  }
}

/* ===== Focus styles ===== */
*:focus-visible {
  outline: 2px solid rgba(37,99,235,.4) !important;
  outline-offset: 2px !important;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}