/* ============================================
   social.bazurk.wtf — Custom Mastodon Theme
   Dark Cyberpunk · Cyan / Purple / Pink
   ============================================ */

/* --- FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:wght@400;600;700&display=swap');

:root {
  --cyan:    #00f0ff;
  --purple:  #7b2fff;
  --pink:    #ff2d6b;
  --bg0:     #030810;
  --bg1:     #060d1a;
  --bg2:     #08111f;
  --bg3:     #0a1628;
  --border:  rgba(0, 240, 255, 0.12);
  --text:    #d0e8f0;
  --muted:   rgba(0, 240, 255, 0.45);
}

/* --- BASE --- */
body,
.ui,
.drawer__inner,
.columns-area,
.column,
.timeline-hint {
  background: var(--bg0) !important;
  font-family: 'Exo 2', sans-serif !important;
  color: var(--text) !important;
}

/* --- TOP NAV BAR --- */
.ui__header,
.tabs-bar__wrapper,
.tabs-bar {
  background: var(--bg1) !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink)) 1 !important;
}

.tabs-bar__link {
  color: var(--muted) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}
.tabs-bar__link:hover,
.tabs-bar__link.active {
  color: var(--cyan) !important;
  border-bottom-color: var(--cyan) !important;
  text-shadow: 0 0 8px var(--cyan) !important;
}

/* --- COLUMNS & PANELS --- */
.column > .scrollable,
.column__wrapper,
.drawer__inner,
.drawer__inner__mastodon {
  background: var(--bg1) !important;
}

.column-header,
.column-header__wrapper {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
}

.column-header__title {
  color: var(--cyan) !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  text-shadow: 0 0 10px var(--cyan) !important;
}

.column-header__icon {
  color: var(--cyan) !important;
}

.column-header__button,
.column-header__back-button {
  color: var(--muted) !important;
  background: transparent !important;
}
.column-header__button:hover {
  color: var(--cyan) !important;
  background: rgba(0,240,255,0.07) !important;
}

/* --- STATUS / TOOTS --- */
.status,
.detailed-status {
  background: var(--bg1) !important;
  border-bottom: 1px solid var(--border) !important;
  transition: background 0.15s !important;
}
.status:hover {
  background: var(--bg2) !important;
}

.status__content,
.detailed-status__content {
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Links in toots */
.status__content a,
.detailed-status__content a {
  color: var(--cyan) !important;
  text-decoration: none !important;
}
.status__content a:hover {
  text-shadow: 0 0 6px var(--cyan) !important;
  text-decoration: underline !important;
}

/* Hashtags */
.status__content a.mention,
.status__content a[href*="/tags/"] {
  color: var(--purple) !important;
}
.status__content a.mention:hover,
.status__content a[href*="/tags/"]:hover {
  color: var(--cyan) !important;
  text-shadow: 0 0 6px var(--purple) !important;
}

/* Display name */
.display-name__html,
.account__display-name {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Username @handle */
.display-name__account,
.account__acct {
  color: var(--muted) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
}

/* Timestamp */
.status__relative-time,
.detailed-status__datetime {
  color: rgba(0,240,255,0.3) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
}

/* --- ACTION BUTTONS (reply, boost, fav) --- */
.status__action-bar,
.detailed-status__action-bar {
  border-top: 1px solid var(--border) !important;
}

.status__action-bar-button,
.detailed-status__button {
  color: rgba(0,240,255,0.35) !important;
  transition: color 0.2s, filter 0.2s !important;
}
.status__action-bar-button:hover {
  color: var(--cyan) !important;
  filter: drop-shadow(0 0 4px var(--cyan)) !important;
}

/* Boost active */
.status__action-bar-button.active[aria-label*="oost"],
.icon-button.active .fa-retweet {
  color: var(--purple) !important;
  filter: drop-shadow(0 0 5px var(--purple)) !important;
}

/* Favourite active */
.status__action-bar-button.active[aria-label*="avourite"],
.icon-button.active .fa-star {
  color: var(--pink) !important;
  filter: drop-shadow(0 0 5px var(--pink)) !important;
}

/* --- COMPOSE BOX --- */
.compose-form {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

.compose-form__autosuggest-wrapper,
.autosuggest-textarea__textarea {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-family: 'Exo 2', sans-serif !important;
  font-size: 15px !important;
  caret-color: var(--cyan) !important;
}

.autosuggest-textarea__textarea::placeholder {
  color: rgba(0,240,255,0.25) !important;
}

.compose-form__toolbar,
.compose-form__upload-button-wrapper {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
}

/* Character count */
.character-counter {
  color: var(--muted) !important;
  font-family: 'Share Tech Mono', monospace !important;
}
.character-counter.character-counter--over {
  color: var(--pink) !important;
}

/* --- BUTTONS --- */
.button,
.compose-form .button {
  background: linear-gradient(135deg, var(--cyan), var(--purple)) !important;
  color: #000 !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 4px !important;
  transition: filter 0.2s, transform 0.1s !important;
}
.button:hover {
  filter: brightness(1.2) drop-shadow(0 0 8px var(--cyan)) !important;
  transform: translateY(-1px) !important;
}

.button.button-secondary {
  background: transparent !important;
  color: var(--cyan) !important;
  border: 1px solid var(--cyan) !important;
}
.button.button-secondary:hover {
  background: rgba(0,240,255,0.08) !important;
}

/* --- SEARCH BAR --- */
.search__input {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: 'Share Tech Mono', monospace !important;
  border-radius: 6px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.search__input:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px rgba(0,240,255,0.15) !important;
  outline: none !important;
}
.search__input::placeholder {
  color: var(--muted) !important;
  letter-spacing: 2px !important;
}

.search-results__header {
  background: var(--bg2) !important;
  color: var(--cyan) !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* --- SIDEBAR / NAVIGATION PANEL --- */
.navigation-panel {
  background: var(--bg1) !important;
  border-right: 1px solid var(--border) !important;
}

.navigation-panel .logo {
  filter: drop-shadow(0 0 8px var(--cyan)) !important;
}

.nav-link,
.navigation-panel a {
  color: var(--muted) !important;
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  transition: background 0.15s, color 0.15s !important;
}
.nav-link:hover,
.navigation-panel a:hover,
.nav-link.active {
  background: rgba(0,240,255,0.07) !important;
  color: var(--cyan) !important;
  text-shadow: 0 0 6px var(--cyan) !important;
}

/* --- PROFILE / ACCOUNT PAGES --- */
.account__header {
  background: var(--bg1) !important;
}

.account__header__bio {
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

.account__header__fields {
  border-top: 1px solid var(--border) !important;
}

.account__header__fields dl {
  border-bottom: 1px solid var(--border) !important;
}

.account__header__fields dt {
  color: var(--muted) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.account__header__fields dd {
  color: var(--text) !important;
}

/* Verified field */
.account__header__fields .verified {
  background: rgba(0,240,255,0.08) !important;
  border-left: 3px solid var(--cyan) !important;
}

.account__header__fields .verified dt {
  color: var(--cyan) !important;
}

/* Follower counts */
.account__header__extra__links a {
  color: var(--muted) !important;
  font-family: 'Share Tech Mono', monospace !important;
}
.account__header__extra__links a:hover {
  color: var(--cyan) !important;
}
.account__header__extra__links strong {
  color: #fff !important;
  font-size: 18px !important;
}

/* --- NOTIFICATIONS --- */
.notification__message {
  color: var(--muted) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}

.notification.notification-follow .notification__message .fa {
  color: var(--purple) !important;
}
.notification.notification-favourite .notification__message .fa {
  color: var(--pink) !important;
}
.notification.notification-reblog .notification__message .fa {
  color: var(--cyan) !important;
}
.notification.notification-mention .notification__message .fa {
  color: var(--purple) !important;
}

/* --- SCROLLBARS --- */
::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}
::-webkit-scrollbar-track {
  background: var(--bg0) !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--cyan), var(--purple)) !important;
  border-radius: 2px !important;
}

/* --- MODAL / OVERLAY --- */
.modal-root__modal,
.actions-modal,
.confirmation-modal,
.mute-modal {
  background: var(--bg1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 40px rgba(0,240,255,0.1) !important;
}

.confirmation-modal__title,
.mute-modal__explanation {
  color: var(--text) !important;
}

/* --- MEDIA / IMAGE PREVIEWS --- */
.media-gallery__item-thumbnail {
  border-radius: 6px !important;
  overflow: hidden !important;
}

.status__video-player,
.media-gallery {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
}

/* --- CONTENT WARNINGS --- */
.status__content__spoiler-link {
  background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(123,47,255,0.15)) !important;
  border: 1px solid var(--border) !important;
  color: var(--cyan) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

/* --- POLL --- */
.poll__chart {
  background: linear-gradient(90deg, var(--cyan), var(--purple)) !important;
  border-radius: 2px !important;
}
.poll__chart.leading {
  background: linear-gradient(90deg, var(--purple), var(--pink)) !important;
}
.poll__footer {
  color: var(--muted) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
}

/* --- LOADING SPINNER --- */
.loading-indicator span {
  background: var(--cyan) !important;
}

/* --- GLOBAL GLOW ACCENT TOP BAR --- */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
  z-index: 9999;
  pointer-events: none;
}