/* ============================================================
   COLD NEO-BRUTALIST THEME — kirr.dev Mastodon
   Reference: Gumroad, Browserbear aesthetic.
   Bold hard shadows. Cool blues, teals, icy whites.
   Playful + professional. NOT warm, NOT industrial.
   ============================================================ */

/* ----------------------------------------------------------
   PALETTE & DESIGN TOKENS
   ---------------------------------------------------------- */

:root {
  /* Surfaces — cool dark, NOT pure black */
  --nb-base:     #111318;   /* page background — cool very dark */
  --nb-surface:  #181c24;   /* panel / card surface */
  --nb-raised:   #1e2330;   /* elevated / hover state */
  --nb-overlay:  #252c3d;   /* selected / focus state */

  /* Border colors — cool blue-tinted */
  --nb-border-color:       #2a3148;
  --nb-border-color-strong:#3d4d70;

  /* Accent palette — 3 colors only (60-30-10 rule) */
  --nb-blue:     #2563eb;   /* primary — CTAs, active, focus, links */
  --nb-blue-light:#3b82f6;  /* primary hover state */
  --nb-teal:     #2dd4bf;   /* accent — badges, success, verified */
  --nb-pink:     #f472b6;   /* danger — destructive, likes, errors */

  /* Text */
  --nb-text-primary:   #e8eaf6;   /* icy white-blue */
  --nb-text-secondary: #8892b0;   /* muted blue-grey */
  --nb-text-muted:     #5c6b84;   /* very muted */

  /* Hard shadows — NO blur, cool dark undertone (neo-brutalist: 4-8px) */
  --nb-shadow-sm:     3px 3px 0 #090c12;
  --nb-shadow:        5px 5px 0 #090c12;
  --nb-shadow-lg:     8px 8px 0 #090c12;
  --nb-shadow-accent: 5px 5px 0 rgba(37, 99, 235, 0.3);

  /* Border constructs — 3px per neo-brutalist standard */
  --nb-border:        3px solid var(--nb-border-color);
  --nb-border-strong: 3px solid var(--nb-border-color-strong);
  --nb-border-blue:   3px solid var(--nb-blue);

  /* Hover interaction — signature neo-brutalist lift */
  --nb-hover-lift:    translate(-2px, -2px);
  --nb-hover-shadow:  7px 7px 0 #090c12;
  --nb-active-press:  translate(1px, 1px);
  --nb-active-shadow: 2px 2px 0 #090c12;
  --nb-transition:    0.2s ease;

  /* Shape — slight rounding, not 0 (Gumroad energy) */
  --nb-radius: 6px;

  /* Typography */
  --nb-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro',
                  Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --nb-font-sans: system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* ----------------------------------------------------------
   GLOBAL RESET & BASE
   ---------------------------------------------------------- */

body,
.app-body,
body.layout-single-column {
  background-color: var(--nb-base) !important;
  font-family: var(--nb-font-mono) !important;
  color: var(--nb-text-primary) !important;
}

/* ----------------------------------------------------------
   LAYOUT — 3-COLUMN PANELS
   ---------------------------------------------------------- */

.columns-area__panels {
  background-color: var(--nb-base) !important;
  gap: 12px !important;
  padding: 16px !important;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.columns-area__panels__pane--compositional,
.columns-area__panels__pane--navigational {
  background-color: transparent !important;
}

.columns-area__panels__main {
  background-color: transparent !important;
}

.compose-panel,
.navigation-panel {
  background-color: var(--nb-surface) !important;
  border: var(--nb-border) !important;
  box-shadow: var(--nb-shadow) !important;
  border-radius: var(--nb-radius) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.columns-area__panels__pane__inner {
  overflow: hidden !important;
}

.column {
  background-color: var(--nb-surface) !important;
  border: var(--nb-border) !important;
  border-top: none !important;
  box-shadow: var(--nb-shadow) !important;
  border-radius: 0 0 var(--nb-radius) var(--nb-radius) !important;
  overflow: hidden;
}

/* Column header */
.column-header,
.column-header__wrapper {
  background-color: var(--nb-raised) !important;
  border-top: none !important;
  border-bottom: var(--nb-border) !important;
}

.column-header__title {
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nb-text-secondary) !important;
}

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

/* ----------------------------------------------------------
   SCROLLABLE AREAS
   ---------------------------------------------------------- */

.scrollable {
  background-color: var(--nb-surface) !important;
}

.scrollable .scrollable {
  background-color: transparent !important;
}

/* ----------------------------------------------------------
   HIDE SIGN-IN BANNER
   ---------------------------------------------------------- */

.navigation-panel__sign-in-banner,
.sign-in-banner {
  display: none !important;
}

/* ----------------------------------------------------------
   NAVIGATION PANEL
   ---------------------------------------------------------- */

.navigation-panel__logo {
  border-bottom: var(--nb-border) !important;
  padding-bottom: 16px !important;
  margin-bottom: 8px !important;
}

.navigation-panel__logo svg,
.navigation-panel__logo img {
  color: var(--nb-text-primary) !important;
  fill: var(--nb-text-primary) !important;
}

.navigation-panel__logo a {
  color: var(--nb-text-primary) !important;
}

.column-link,
.column-link--transparent {
  border-radius: var(--nb-radius) !important;
  border: 2px solid transparent !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nb-text-secondary) !important;
  transition: none !important;
  padding: 10px 14px !important;
  margin-bottom: 2px !important;
}

.column-link:hover,
.column-link--transparent:hover {
  background-color: var(--nb-raised) !important;
  color: var(--nb-text-primary) !important;
  border-color: var(--nb-border-color) !important;
  box-shadow: var(--nb-shadow-sm) !important;
}

/* Active nav item — blue accent, Gumroad style */
.column-link.active,
.column-link[aria-current="page"] {
  background-color: var(--nb-blue) !important;
  color: #0a0e1a !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  font-weight: 800;
}

.column-link.active .column-link__icon,
.column-link[aria-current="page"] .column-link__icon {
  color: #0a0e1a !important;
}

.column-link__icon {
  color: var(--nb-blue) !important;
}

.column-link:hover .column-link__icon {
  color: var(--nb-blue-light) !important;
}

/* ----------------------------------------------------------
   SEARCH
   ---------------------------------------------------------- */

.search {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  background: var(--nb-raised) !important;
  overflow: hidden;
}

.search:focus-within {
  border-color: var(--nb-blue) !important;
  box-shadow: var(--nb-shadow-accent) !important;
}

.search__input {
  background-color: var(--nb-raised) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--nb-text-primary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.85rem !important;
  caret-color: var(--nb-blue);
  padding: 10px 36px 10px 14px !important;
}

.search__icon-wrapper {
  right: 10px !important;
  color: var(--nb-text-secondary) !important;
}

.search__icon .fa,
.search__icon svg,
.search__icon-wrapper .icon,
.search .icon {
  color: var(--nb-text-secondary) !important;
}

.search__input::placeholder {
  color: var(--nb-text-muted) !important;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.search__input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.search__icon {
  color: var(--nb-text-muted) !important;
}

/* ----------------------------------------------------------
   BUTTONS — the signature element of neo-brutalism
   ---------------------------------------------------------- */

/* Primary CTA button — electric blue, hard shadow */
.button {
  border-radius: var(--nb-radius) !important;
  border: 3px solid rgba(0, 0, 0, 0.2) !important;
  background-color: var(--nb-blue) !important;
  color: #060a14 !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--nb-shadow) !important;
  transition: none !important;
  padding: 9px 20px !important;
}

.button:hover:not(:disabled) {
  background-color: var(--nb-blue-light) !important;
  transform: var(--nb-hover-lift) !important;
  box-shadow: var(--nb-hover-shadow) !important;
}

.button:active:not(:disabled) {
  transform: var(--nb-active-press) !important;
  box-shadow: var(--nb-active-shadow) !important;
}

.button:disabled {
  background-color: var(--nb-raised) !important;
  color: var(--nb-text-muted) !important;
  border-color: var(--nb-border-color) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.button:focus-visible {
  outline: 2px solid var(--nb-blue) !important;
  outline-offset: 3px !important;
}

/* Destructive button — cool pink */
.button.button--destructive,
.button[data-destructive="true"] {
  background-color: var(--nb-pink) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: #0a0414 !important;
}

/* Secondary / outline button */
.button-secondary {
  border-radius: var(--nb-radius) !important;
  border: 3px solid var(--nb-border-color-strong) !important;
  background-color: transparent !important;
  color: var(--nb-text-primary) !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  box-shadow: var(--nb-shadow-sm) !important;
  transition: none !important;
  padding: 9px 20px !important;
}

.button-secondary:hover:not(:disabled) {
  background-color: var(--nb-raised) !important;
  border-color: var(--nb-blue-light) !important;
  color: var(--nb-blue-light) !important;
  transform: var(--nb-hover-lift) !important;
  box-shadow: var(--nb-shadow) !important;
}

.button-secondary:active:not(:disabled) {
  transform: var(--nb-active-press) !important;
  box-shadow: var(--nb-active-shadow) !important;
}

/* Icon action buttons under posts */
.icon-button {
  border-radius: var(--nb-radius) !important;
  color: var(--nb-text-secondary) !important;
  transition: none !important;
  padding: 6px !important;
}

.icon-button:hover {
  color: var(--nb-blue-light) !important;
  background-color: var(--nb-raised) !important;
}

.icon-button.active {
  color: var(--nb-pink) !important;
}

.icon-button.active:hover {
  color: var(--nb-pink) !important;
  background-color: rgba(244, 114, 182, 0.1) !important;
}

/* Boost / reblog — teal */
.status__action-bar .icon-button[title*="Boost"]:hover,
.status__action-bar .icon-button[aria-label*="Boost"]:hover {
  color: var(--nb-teal) !important;
}

/* Reply — blue */
.status__action-bar .icon-button[title*="Reply"]:hover,
.status__action-bar .icon-button[aria-label*="Reply"]:hover {
  color: var(--nb-blue) !important;
}

/* ----------------------------------------------------------
   PROFILE / ACCOUNT HEADER
   ---------------------------------------------------------- */

._comp_account_header__header {
  background-color: var(--nb-surface) !important;
  border-radius: var(--nb-radius) !important;
  overflow: hidden;
}

._comp_account_header__barWrapper {
  background-color: var(--nb-raised) !important;
  border: var(--nb-border) !important;
  border-top: 3px solid var(--nb-blue) !important;
  border-radius: 0 0 var(--nb-radius) var(--nb-radius) !important;
  padding: 16px 24px 24px !important;
}

/* displayNameWrapper: name+badges on left, buttons on right */
._comp_account_header__displayNameWrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
}

._comp_account_header__nameWrapper {
  flex: 1 !important;
  min-width: 0 !important;
}

._comp_account_header__handleHelpButton {
  color: var(--nb-text-secondary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  background: none !important;
  border: none !important;
  padding: 2px 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

._comp_account_header__handleHelpButton svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--nb-text-secondary) !important;
}

._comp_account_header__avatar {
  border: 3px solid var(--nb-blue) !important;
  box-shadow: var(--nb-shadow-accent) !important;
  border-radius: var(--nb-radius) !important;
}

._comp_account_header__avatar img {
  border-radius: calc(var(--nb-radius) - 3px) !important;
  display: block;
}

._comp_account_header__displayNameWrapper {
  font-family: var(--nb-font-mono) !important;
}

._comp_account_header__displayNameWrapper bdi {
  color: var(--nb-text-primary) !important;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}

._comp_account_header__name .account__username {
  color: var(--nb-text-secondary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.82rem;
}

._comp_account_header__badges {
  display: inline-flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}

._comp_account_header__badges .account-role,
._comp_badge__badge {
  border: 3px solid var(--nb-teal) !important;
  background-color: var(--nb-surface) !important;
  color: var(--nb-teal) !important;
  border-radius: var(--nb-radius) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px !important;
  box-shadow: var(--nb-shadow-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

._comp_badge__badge svg {
  width: 14px !important;
  height: 14px !important;
}

._comp_badge__content {
  font-family: var(--nb-font-mono) !important;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nb-teal) !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline !important;
}

._comp_badge__domain {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline !important;
  color: var(--nb-teal) !important;
}

._comp_account_header__buttonsDesktop {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  padding-top: 4px !important;
  position: relative !important;
  z-index: 2 !important;
}

._comp_account_header__buttonsDesktop .icon-button {
  border: var(--nb-border) !important;
  background-color: var(--nb-surface) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  padding: 8px !important;
  color: var(--nb-text-secondary) !important;
}

._comp_account_header__buttonsDesktop .icon-button svg {
  fill: currentColor !important;
  color: inherit !important;
}

._comp_account_header__buttonsDesktop .icon-button:hover {
  background-color: var(--nb-raised) !important;
  color: var(--nb-blue-light) !important;
  transform: var(--nb-hover-lift) !important;
  box-shadow: var(--nb-shadow) !important;
}

._comp_account_header__followButton,
._comp_account_header__barWrapper .button,
._comp_account_header__buttonsDesktop .button,
._comp_account_header__buttonsMobile .button {
  padding: 10px 24px !important;
  background: var(--nb-blue) !important;
  color: #ffffff !important;
  border: 3px solid #1d4ed8 !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow) !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

._comp_account_header__followButton:hover,
._comp_account_header__barWrapper .button:hover,
._comp_account_header__buttonsDesktop .button:hover {
  background: var(--nb-blue-light) !important;
  transform: var(--nb-hover-lift) !important;
  box-shadow: var(--nb-hover-shadow) !important;
}

._comp_account_header__followButton:active,
._comp_account_header__barWrapper .button:active,
._comp_account_header__buttonsDesktop .button:active {
  transform: var(--nb-active-press) !important;
  box-shadow: var(--nb-active-shadow) !important;
}

/* ----------------------------------------------------------
   STATS ROW (followers / following / posts / joined)
   ---------------------------------------------------------- */

._comp_account_header__numberFields,
._comp_number_fields__list {
  border-top: var(--nb-border) !important;
  background-color: var(--nb-surface) !important;
  padding: 0 !important;
  display: flex !important;
}

._comp_number_fields__item {
  border-right: var(--nb-border) !important;
  text-align: center !important;
  padding: 14px 16px !important;
  flex: 1;
}

._comp_number_fields__item:last-child {
  border-right: none !important;
}

._comp_number_fields__item a {
  color: var(--nb-text-primary) !important;
  font-family: var(--nb-font-mono) !important;
  text-decoration: none !important;
  transition: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px;
}

._comp_number_fields__item a:hover .account__counter__number {
  color: var(--nb-blue) !important;
}

._comp_number_fields__item .account__counter__label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nb-text-muted) !important;
  font-family: var(--nb-font-mono) !important;
}

._comp_number_fields__item .account__counter__number {
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--nb-text-primary) !important;
  letter-spacing: -0.02em;
  transition: none;
}

/* ----------------------------------------------------------
   TABS (Activity / Media / Featured)
   ---------------------------------------------------------- */

.tabs-bar__wrapper {
  background-color: var(--nb-raised) !important;
  border: var(--nb-border) !important;
  border-bottom: var(--nb-border) !important;
  border-top: var(--nb-border) !important;
  border-radius: var(--nb-radius) var(--nb-radius) 0 0 !important;
  box-shadow: -4px 0 0 #090c12, 4px 0 0 #090c12 !important;
}

._comp_tab_list__tabList {
  background-color: var(--nb-raised) !important;
  border-bottom: var(--nb-border) !important;
  gap: 0 !important;
}

._comp_tab_list__tab {
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nb-text-secondary) !important;
  padding: 12px 20px !important;
  transition: none !important;
}

._comp_tab_list__tab:hover {
  color: var(--nb-text-primary) !important;
  background-color: var(--nb-overlay) !important;
}

._comp_tab_list__tab.active,
._comp_tab_list__tab[aria-selected="true"] {
  color: var(--nb-blue) !important;
  border-bottom: 3px solid var(--nb-blue) !important;
  background-color: transparent !important;
}

/* ----------------------------------------------------------
   POSTS / STATUSES
   ---------------------------------------------------------- */

.status,
.detailed-status {
  border-bottom: 3px solid var(--nb-border-color) !important;
  background-color: var(--nb-surface) !important;
  transition: none !important;
  padding: 16px !important;
}

.status:hover {
  background-color: var(--nb-raised) !important;
}

.detailed-status {
  padding: 20px !important;
}

.status__content {
  font-family: var(--nb-font-mono) !important;
  color: var(--nb-text-primary) !important;
  line-height: 1.7;
  font-size: 0.92rem;
}

.status__display-name {
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
}

.status__display-name bdi {
  color: var(--nb-text-primary) !important;
  font-weight: 800;
}

.status__display-name .display-name__account {
  color: var(--nb-text-muted) !important;
  font-size: 0.75rem;
}

.status__relative-time,
.status__relative-time a {
  color: var(--nb-text-muted) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.7rem;
}

/* Boost / reblog indicator */
.status__prepend {
  color: var(--nb-teal) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-bottom: 8px !important;
}

.status__prepend .status__display-name,
.status__prepend .status__display-name bdi {
  color: var(--nb-teal) !important;
}

/* Action bar */
.status__action-bar {
  margin-top: 10px !important;
  gap: 4px !important;
}

/* Detailed status meta */
.detailed-status__meta {
  border-top: var(--nb-border) !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
}

.detailed-status__datetime,
.detailed-status__application {
  color: var(--nb-text-muted) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.72rem;
}

/* ----------------------------------------------------------
   AVATARS
   ---------------------------------------------------------- */

.account__avatar,
.account__avatar-overlay,
.status__avatar .account__avatar {
  border-radius: var(--nb-radius) !important;
}

.status__avatar {
  border-radius: var(--nb-radius) !important;
}

/* ----------------------------------------------------------
   MEDIA ATTACHMENTS
   ---------------------------------------------------------- */

.media-gallery {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  overflow: hidden;
  margin-top: 10px;
}

.media-gallery__item {
  border: none !important;
}

.video-player {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  overflow: hidden;
}

/* ----------------------------------------------------------
   CARDS / LINK PREVIEWS
   ---------------------------------------------------------- */

.card,
.status-card {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  background-color: var(--nb-raised) !important;
  transition: none !important;
  overflow: hidden !important;
  margin-top: 10px;
}

.card:hover,
.status-card:hover {
  transform: var(--nb-hover-lift) !important;
  box-shadow: var(--nb-hover-shadow) !important;
  border-color: var(--nb-border-color-strong) !important;
}

.status-card__title {
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  color: var(--nb-text-primary) !important;
  font-size: 0.88rem;
}

.status-card__description {
  color: var(--nb-text-secondary) !important;
  font-size: 0.78rem;
}

.status-card__host {
  color: var(--nb-teal) !important;
  font-size: 0.65rem;
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card__bar {
  background-color: var(--nb-raised) !important;
  border-top: var(--nb-border) !important;
  padding: 12px 14px !important;
}

.card__bar__title {
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  color: var(--nb-text-primary) !important;
}

.card__bar__description {
  color: var(--nb-text-secondary) !important;
  font-size: 0.78rem;
}

.card__bar__host {
  color: var(--nb-teal) !important;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ----------------------------------------------------------
   COMPOSE AREA
   ---------------------------------------------------------- */

.compose-form {
  padding: 0 !important;
}

.compose-form__autosuggest-wrapper {
  background-color: var(--nb-raised) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  overflow: hidden;
}

.compose-form__autosuggest-wrapper:focus-within {
  border-color: var(--nb-blue) !important;
  box-shadow: var(--nb-shadow-accent) !important;
}

.autosuggest-textarea__textarea {
  background-color: transparent !important;
  border: none !important;
  color: var(--nb-text-primary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.9rem !important;
  line-height: 1.65;
  caret-color: var(--nb-blue);
  padding: 14px !important;
}

.autosuggest-textarea__textarea::placeholder {
  color: var(--nb-text-muted) !important;
}

.compose-form__buttons-wrapper {
  border-top: var(--nb-border) !important;
  background-color: var(--nb-surface) !important;
  padding: 8px 12px !important;
}

.compose-form__submit {
  margin-top: 12px !important;
}

.compose-form__submit .button {
  width: 100%;
}

/* Character counter */
.character-counter {
  font-family: var(--nb-font-mono) !important;
  color: var(--nb-text-muted) !important;
  font-size: 0.78rem !important;
}

.character-counter.character-counter--over {
  color: var(--nb-pink) !important;
  font-weight: 700;
}

/* CW warning */
.compose-form__warning {
  background-color: rgba(37, 99, 235, 0.06) !important;
  border: 3px solid var(--nb-blue) !important;
  border-radius: var(--nb-radius) !important;
  color: var(--nb-text-secondary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.82rem;
  padding: 10px 14px !important;
  margin-bottom: 8px;
}

/* Spoiler input */
.spoiler-input__input {
  background-color: var(--nb-raised) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  color: var(--nb-text-primary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.88rem;
  padding: 10px 14px !important;
  caret-color: var(--nb-blue);
}

.spoiler-input__input:focus {
  border-color: var(--nb-blue) !important;
  box-shadow: var(--nb-shadow-accent) !important;
  outline: none !important;
}

/* ----------------------------------------------------------
   BACK BUTTON
   ---------------------------------------------------------- */

.column-back-button {
  background-color: var(--nb-raised) !important;
  border-top: none !important;
  border-bottom: var(--nb-border) !important;
  border-radius: 0 !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nb-text-secondary) !important;
  transition: none !important;
  padding: 12px 16px !important;
}

.column-back-button .column-back-button__icon {
  color: var(--nb-text-secondary) !important;
}

.column-back-button:hover {
  color: var(--nb-blue-light) !important;
  background-color: var(--nb-overlay) !important;
}

.column-back-button:hover .column-back-button__icon {
  color: var(--nb-blue-light) !important;
}

/* ----------------------------------------------------------
   EMPTY STATE
   ---------------------------------------------------------- */

.empty-column-indicator {
  background-color: transparent !important;
  color: var(--nb-text-secondary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border: 2px dashed var(--nb-border-color) !important;
  border-radius: var(--nb-radius) !important;
  padding: 40px 24px !important;
  text-align: center;
  margin: 20px !important;
}

/* ----------------------------------------------------------
   SERVER BANNER (left sidebar)
   ---------------------------------------------------------- */

.server-banner {
  background-color: var(--nb-surface) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  overflow: hidden;
  transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.server-banner:hover {
  transform: var(--nb-hover-lift) !important;
  box-shadow: var(--nb-shadow) !important;
}

.server-banner__introduction {
  color: var(--nb-text-secondary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.82rem;
  line-height: 1.65;
  padding: 16px !important;
}

.server-banner__hero {
  border-bottom: var(--nb-border) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.server-banner__meta {
  border-top: var(--nb-border) !important;
  background-color: var(--nb-raised) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.72rem;
  color: var(--nb-text-secondary) !important;
  padding: 14px 16px !important;
}

.server-banner__meta .account {
  overflow: visible !important;
}

.server-banner__meta .display-name {
  overflow: visible !important;
}

.server-banner__meta .account__avatar {
  border: 3px solid var(--nb-border-color-strong) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
}

.server-banner__meta .display-name__html,
.server-banner__meta .display-name__account {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

/* ----------------------------------------------------------
   SKELETON LOADING PLACEHOLDERS
   ---------------------------------------------------------- */

.skeleton {
  background: var(--nb-raised) !important;
  border: 2px solid var(--nb-border-color) !important;
  border-radius: var(--nb-radius) !important;
  animation: none !important;
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

._ui_components_link_footer__wrapper {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  background-color: var(--nb-surface) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  padding: 16px 20px 12px !important;
  margin-top: 12px !important;
}

._ui_components_link_footer__heading {
  font-family: var(--nb-font-mono) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.58rem;
  color: var(--nb-blue) !important;
  margin-bottom: 10px;
}

._ui_components_link_footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

._ui_components_link_footer__list a {
  color: var(--nb-text-muted) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.7rem;
  text-decoration: none !important;
  transition: none !important;
}

._ui_components_link_footer__list a:hover {
  color: var(--nb-blue-light) !important;
}

/* ----------------------------------------------------------
   NOTIFICATIONS
   ---------------------------------------------------------- */

.notification {
  border-bottom: 3px solid var(--nb-border-color) !important;
  background-color: var(--nb-surface) !important;
  padding: 14px 16px !important;
  transition: none !important;
}

.notification:hover {
  background-color: var(--nb-raised) !important;
}

.notification__message {
  font-family: var(--nb-font-mono) !important;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nb-blue) !important;
  margin-bottom: 8px;
}

.notification--follow .notification__message {
  color: var(--nb-teal) !important;
}

.notification--favourite .notification__message {
  color: var(--nb-pink) !important;
}

.notification--reblog .notification__message {
  color: var(--nb-blue-light) !important;
}

.notification--mention .notification__message {
  color: var(--nb-blue) !important;
}

/* ----------------------------------------------------------
   HASHTAG / MENTION / LINKS
   ---------------------------------------------------------- */

.status__content a.mention,
.status__content a.hashtag,
.status__content a {
  color: var(--nb-blue) !important;
  text-decoration: none !important;
  font-weight: 600;
}

.status__content a.mention:hover,
.status__content a.hashtag:hover,
.status__content a:hover {
  color: var(--nb-blue-light) !important;
  text-decoration: underline !important;
}

/* Trending hashtags */
.trend__name {
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  color: var(--nb-text-primary) !important;
}

.trend__name a {
  color: var(--nb-blue) !important;
  text-decoration: none !important;
}

.trend__name a:hover {
  color: var(--nb-blue-light) !important;
}

.trend__count {
  color: var(--nb-text-muted) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.7rem;
}

/* ----------------------------------------------------------
   DROPDOWNS / MENUS
   ---------------------------------------------------------- */

.dropdown-menu {
  background-color: var(--nb-surface) !important;
  border: var(--nb-border-strong) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-lg) !important;
  padding: 6px !important;
  min-width: 180px;
}

.dropdown-menu__item a,
.dropdown-menu__item button {
  font-family: var(--nb-font-mono) !important;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nb-text-secondary) !important;
  border-radius: var(--nb-radius) !important;
  transition: none !important;
  padding: 8px 12px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.dropdown-menu__item a:hover,
.dropdown-menu__item button:hover {
  background-color: var(--nb-raised) !important;
  color: var(--nb-blue-light) !important;
}

.dropdown-menu__item--dangerous a,
.dropdown-menu__item--dangerous button {
  color: var(--nb-pink) !important;
}

.dropdown-menu__item--dangerous a:hover,
.dropdown-menu__item--dangerous button:hover {
  background-color: rgba(244, 114, 182, 0.08) !important;
  color: var(--nb-pink) !important;
}

.dropdown-menu__separator {
  border-color: var(--nb-border-color) !important;
  margin: 4px 0 !important;
}

/* ----------------------------------------------------------
   MODALS
   ---------------------------------------------------------- */

.modal-root__modal {
  background-color: var(--nb-surface) !important;
  border: var(--nb-border-strong) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-lg) !important;
}

.modal-root__overlay {
  background: rgba(6, 9, 18, 0.88) !important;
  backdrop-filter: blur(2px);
}

.modal-layout {
  background-color: var(--nb-surface) !important;
}

.ui__header {
  border-bottom: var(--nb-border) !important;
  background-color: var(--nb-raised) !important;
}

/* ----------------------------------------------------------
   POLLS
   ---------------------------------------------------------- */

.poll {
  font-family: var(--nb-font-mono) !important;
}

.poll__option {
  border: 3px solid var(--nb-border-color) !important;
  border-radius: var(--nb-radius) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.85rem;
  margin-bottom: 6px !important;
  padding: 8px 12px !important;
  background-color: var(--nb-raised) !important;
  position: relative;
  overflow: hidden;
}

.poll__option:hover {
  border-color: var(--nb-border-color-strong) !important;
}

.poll__chart {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 !important;
  background-color: rgba(37, 99, 235, 0.12) !important;
  z-index: 0;
}

.poll__option__text {
  position: relative;
  z-index: 1;
  color: var(--nb-text-primary) !important;
}

.poll__option.leading {
  border-color: var(--nb-blue) !important;
}

.poll__option.leading .poll__chart {
  background-color: rgba(37, 99, 235, 0.18) !important;
}

.poll__number {
  font-weight: 700;
  color: var(--nb-blue) !important;
  font-size: 0.75rem;
  position: relative;
  z-index: 1;
}

.poll__footer {
  font-size: 0.7rem;
  color: var(--nb-text-muted) !important;
  margin-top: 8px;
  font-family: var(--nb-font-mono) !important;
}

/* ----------------------------------------------------------
   CONTENT WARNINGS
   ---------------------------------------------------------- */

.status__content__spoiler-link {
  background-color: var(--nb-blue) !important;
  color: #060a14 !important;
  border-radius: var(--nb-radius) !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 3px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  transition: none !important;
  padding: 4px 12px !important;
}

.status__content__spoiler-link:hover {
  background-color: var(--nb-blue-light) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: var(--nb-shadow-accent) !important;
}

.status__content__spoiler-link:active {
  transform: var(--nb-active-press) !important;
  box-shadow: var(--nb-active-shadow) !important;
}

.status__content__spoiler {
  color: var(--nb-text-secondary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* ----------------------------------------------------------
   ABOUT PAGE
   ---------------------------------------------------------- */

.about {
  background-color: var(--nb-base) !important;
  padding: 24px !important;
}

.about__header {
  background-color: transparent !important;
  margin-bottom: 24px;
}

.about__header__hero {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow) !important;
  overflow: hidden;
  margin-bottom: 20px;
}

.about__header h1 {
  color: var(--nb-text-primary) !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 900;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.about__header p {
  color: var(--nb-text-secondary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.88rem;
  line-height: 1.65;
}

.about__header p a {
  color: var(--nb-blue) !important;
  font-weight: 700;
}

.about__meta {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow) !important;
  background-color: var(--nb-surface) !important;
  padding: 20px !important;
  margin-bottom: 24px;
}

.about__meta__column {
  font-family: var(--nb-font-mono) !important;
  font-size: 0.82rem;
  color: var(--nb-text-secondary) !important;
}

.about__meta__column h4 {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nb-text-muted) !important;
  margin-bottom: 6px;
}

.about__meta__column p {
  font-size: 0.85rem;
  color: var(--nb-text-primary) !important;
}

.about__meta__divider {
  border-color: var(--nb-border-color) !important;
}

.about__section {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  background-color: var(--nb-surface) !important;
  margin-bottom: 14px !important;
  overflow: hidden;
}

.about__section__title {
  font-family: var(--nb-font-mono) !important;
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nb-text-secondary) !important;
  padding: 14px 20px !important;
  background-color: var(--nb-raised) !important;
  transition: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about__section__title:hover {
  background-color: var(--nb-overlay) !important;
  color: var(--nb-blue-light) !important;
}

.about__section__title[aria-expanded="true"] {
  border-bottom: var(--nb-border) !important;
  color: var(--nb-blue) !important;
}

.about__section__body {
  color: var(--nb-text-secondary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.85rem;
  line-height: 1.65;
  padding: 20px !important;
}

.about__footer {
  color: var(--nb-text-muted) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.72rem;
  margin-top: 24px;
}

.about__mail a {
  color: var(--nb-blue) !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  text-decoration: none;
}

.about__mail a:hover {
  color: var(--nb-blue-light) !important;
  text-decoration: underline;
}

/* ----------------------------------------------------------
   ACCOUNT LIST ITEMS (search results, followers lists)
   ---------------------------------------------------------- */

.account {
  border-bottom: 3px solid var(--nb-border-color) !important;
  background-color: var(--nb-surface) !important;
  padding: 14px 16px !important;
  transition: none !important;
}

.account:hover {
  background-color: var(--nb-raised) !important;
}

.account__display-name bdi {
  color: var(--nb-text-primary) !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 800;
}

.account__display-name .display-name__account {
  color: var(--nb-text-muted) !important;
  font-size: 0.75rem;
}

.account__note {
  color: var(--nb-text-secondary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ----------------------------------------------------------
   BIO FIELDS TABLE
   ---------------------------------------------------------- */

.account__fields {
  font-family: var(--nb-font-mono) !important;
  font-size: 0.82rem;
  border-top: var(--nb-border) !important;
}

.account__field {
  border-bottom: var(--nb-border) !important;
  padding: 8px 16px !important;
}

.account__field__name {
  color: var(--nb-text-muted) !important;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  min-width: 100px;
}

.account__field__value {
  color: var(--nb-text-primary) !important;
}

.account__field.verified .account__field__name,
.account__field.verified .account__field__value {
  color: var(--nb-teal) !important;
}

/* ----------------------------------------------------------
   RELATIONSHIP TAG (Follows you etc.)
   ---------------------------------------------------------- */

.relationship-tag {
  background-color: var(--nb-raised) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  color: var(--nb-text-muted) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 7px !important;
}

/* ----------------------------------------------------------
   BADGES / ROLES
   ---------------------------------------------------------- */

.account-role {
  border: 3px solid var(--nb-blue) !important;
  background: rgba(129, 140, 248, 0.08) !important;
  color: var(--nb-blue) !important;
  border-radius: var(--nb-radius) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 7px !important;
}

/* ----------------------------------------------------------
   GENERIC INPUTS
   ---------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
  background-color: var(--nb-raised) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  color: var(--nb-text-primary) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.88rem;
  padding: 9px 14px !important;
  caret-color: var(--nb-blue);
  transition: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--nb-blue) !important;
  box-shadow: var(--nb-shadow-accent) !important;
  outline: none !important;
}

/* ----------------------------------------------------------
   AUTOSUGGEST DROPDOWN
   ---------------------------------------------------------- */

.autosuggest-textarea__suggestions {
  background-color: var(--nb-surface) !important;
  border: var(--nb-border-strong) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-lg) !important;
  font-family: var(--nb-font-mono) !important;
}

.autosuggest-textarea__suggestions__item {
  color: var(--nb-text-secondary) !important;
  font-size: 0.82rem;
  padding: 8px 12px !important;
  transition: none !important;
}

.autosuggest-textarea__suggestions__item:hover,
.autosuggest-textarea__suggestions__item.selected {
  background-color: var(--nb-raised) !important;
  color: var(--nb-blue-light) !important;
}

/* ----------------------------------------------------------
   EMOJI PICKER
   ---------------------------------------------------------- */

.emoji-mart {
  background-color: var(--nb-surface) !important;
  border: var(--nb-border-strong) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-lg) !important;
}

.emoji-mart-search input {
  background-color: var(--nb-raised) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  color: var(--nb-text-primary) !important;
  font-family: var(--nb-font-mono) !important;
}

.emoji-mart-category-label span {
  background-color: var(--nb-surface) !important;
  color: var(--nb-text-muted) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ----------------------------------------------------------
   NOTIFICATION TOASTS
   ---------------------------------------------------------- */

.notification-bar {
  background-color: var(--nb-surface) !important;
  border: var(--nb-border-strong) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-lg) !important;
  font-family: var(--nb-font-mono) !important;
  font-size: 0.82rem;
  color: var(--nb-text-primary) !important;
}

.notification-bar--success {
  border-color: var(--nb-teal) !important;
}

.notification-bar--failure {
  border-color: var(--nb-pink) !important;
}

/* ----------------------------------------------------------
   MEDIA SPOILER
   ---------------------------------------------------------- */

.media-gallery__item-spoiler {
  background-color: var(--nb-raised) !important;
}

.spoiler-button__overlay__label {
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  font-size: 0.75rem;
}

/* ----------------------------------------------------------
   LOADING INDICATOR
   ---------------------------------------------------------- */

.loading-bar {
  background-color: var(--nb-blue) !important;
  height: 3px !important;
}

.loading-indicator {
  color: var(--nb-text-muted) !important;
  font-family: var(--nb-font-mono) !important;
}

/* ----------------------------------------------------------
   DIVIDERS
   ---------------------------------------------------------- */

hr {
  border-color: var(--nb-border-color) !important;
  border-top-width: 3px;
}

/* ----------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--nb-border-color-strong) var(--nb-base);
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: var(--nb-base);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--nb-border-color-strong);
  border-radius: 0;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--nb-text-muted);
}

/* ----------------------------------------------------------
   TEXT SELECTION
   ---------------------------------------------------------- */

::selection {
  background-color: rgba(37, 99, 235, 0.25) !important;
  color: var(--nb-text-primary) !important;
}

/* ----------------------------------------------------------
   FOCUS STYLES (accessibility)
   ---------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--nb-blue) !important;
  outline-offset: 2px !important;
  border-radius: var(--nb-radius) !important;
}

.skip-link:focus {
  background-color: var(--nb-blue) !important;
  color: #060a14 !important;
  font-family: var(--nb-font-mono) !important;
  font-weight: 700;
  padding: 8px 16px !important;
}