/*
  Mastodon Bird UI v2
  Refactored for maintainability, lower selector cost, and easier theming.

  Notes:
  - This version keeps the Twitter-like layout and interaction feel.
  - It intentionally removes the giant duplicated SVG icon system.
  - It relies mostly on Mastodon's existing icon fonts/glyphs and CSS tokens.
  - It preserves reduced-motion support, responsive layout, readable cards,
    sticky side panels, and the action-bar emphasis from the original.
*/

/* ==================================
   01. TOKENS
   ================================== */

:root {
  /* brand */
  --bird-brand: #595aff;
  --bird-brand-2: #8c8dff;
  --bird-brand-twitter: #1d9bf0;

  /* dark theme base */
  --bird-bg: #1e2028;
  --bird-bg-soft: #232543;
  --bird-bg-mud: #272c40;
  --bird-bg-elevated: #232543;
  --bird-bg-overlay: #5b708366;
  --bird-fg: #ffffff;
  --bird-fg-soft: #f7f9f9;
  --bird-dim: #717c9b;
  --bird-dim-2: #8493a7;
  --bird-border: #38384d;
  --bird-thread: #434264;
  --bird-accent: var(--bird-brand-2);
  --bird-accent-strong: var(--bird-brand);
  --bird-green: #00ba7c;
  --bird-red: #f91880;
  --bird-yellow: #ffac33;
  --bird-verified: #79bd9a;
  --bird-destructive: #df405a;
  --bird-shadow-soft: 0 10px 30px rgb(0 0 0 / 0.12);
  --bird-shadow-card: 0 6px 20px rgb(0 0 0 / 0.08);

  /* alpha tokens */
  --bird-bg-75: rgb(30 32 40 / 0.75);
  --bird-light-shade: rgb(255 255 255 / 0.03);
  --bird-focusable: rgb(255 255 255 / 0.055);
  --bird-profile-button-hover: rgb(241 239 244 / 0.10);
  --bird-column-link-hover: rgb(247 247 249 / 0.10);
  --bird-action-hover: rgb(96 105 132 / 0.15);

  /* typography */
  --bird-font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bird-font-size: 15px;
  --bird-font-size-sm: 13px;
  --bird-font-size-md: 14px;
  --bird-font-size-lg: 17px;
  --bird-font-size-xl: 20px;
  --bird-font-weight-bold: 700;

  /* spacing */
  --bird-gap-1: 4px;
  --bird-gap-2: 8px;
  --bird-gap-3: 12px;
  --bird-gap-4: 16px;
  --bird-gap-5: 20px;
  --bird-gap-6: 24px;

  /* radii */
  --bird-radius-sm: 4px;
  --bird-radius-md: 10px;
  --bird-radius-lg: 16px;
  --bird-radius-pill: 9999px;

  /* sizes */
  --bird-avatar: 48px;
  --bird-avatar-sm: 32px;
  --bird-control-sm: 36px;
  --bird-control-md: 42px;
  --bird-control-lg: 50px;
  --bird-icon-size: 18px;
  --bird-icon-notification: 28px;

  /* layout */
  --bird-main-panel: 600px;
  --bird-side-panel: 260px;
  --bird-column-width: 380px;

  /* effects */
  --bird-header-shadow: 0 1px 0 rgb(140 141 255 / 0.30);
  --bird-header-glow: radial-gradient(ellipse, rgb(99 100 255 / 0.23) 0, rgb(99 100 255 / 0) 60%);
  --bird-compose-gradient: linear-gradient(180deg, rgb(30 32 40 / 1) 0%, rgb(30 32 40 / 1) 53%, rgb(30 32 40 / 0.81) 76%, rgb(30 32 40 / 0.71) 87%, rgb(30 32 40 / 0.46) 97%, rgb(30 32 40 / 0) 100%);

  /* transitions */
  --bird-transition-fast: 120ms ease;
  --bird-transition: 200ms ease;
}

/* ==================================
   02. THEME OVERRIDES
   ================================== */

body.theme-mastodon-light.layout-multiple-columns {
  --bird-bg: #ffffff;
  --bird-bg-soft: #f7f9f9;
  --bird-bg-mud: #e5e1ed;
  --bird-bg-elevated: #ffffff;
  --bird-bg-overlay: #6a5b8366;
  --bird-fg: #1f1b23;
  --bird-fg-soft: #1f1b23;
  --bird-dim: #9388a6;
  --bird-dim-2: #9388a6;
  --bird-border: #e6e1ed;
  --bird-thread: #e1e8ed;
  --bird-accent: var(--bird-brand);
  --bird-accent-strong: var(--bird-brand);
  --bird-green: #17bf63;
  --bird-red: #e0245e;
  --bird-light-shade: rgb(0 0 0 / 0.03);
  --bird-focusable: rgb(0 0 0 / 0.05);
  --bird-profile-button-hover: rgb(31 27 35 / 0.10);
  --bird-column-link-hover: rgb(31 27 35 / 0.10);
  --bird-bg-75: rgb(255 255 255 / 0.75);
  --bird-compose-gradient: linear-gradient(180deg, rgb(255 255 255 / 1) 0%, rgb(255 255 255 / 1) 53%, rgb(255 255 255 / 0.81) 76%, rgb(255 255 255 / 0.71) 87%, rgb(255 255 255 / 0.46) 97%, rgb(255 255 255 / 0) 100%);
}

body.theme-contrast.layout-multiple-columns {
  --bird-dim: #b8b3c0;
  --bird-dim-2: #d2ccd9;
  --bird-border: #5a5371;
  --bird-focusable: rgb(255 255 255 / 0.08);
}

@media (min-width: 1175px) and (max-width: 1260px) {
  :root {
    --bird-main-panel: 500px;
    --bird-side-panel: 265px;
  }
}

@media (max-width: 500px) {
  :root {
    --bird-font-size-xl: 17px;
  }
}

/* ==================================
   03. RESET / GLOBALS
   ================================== */

.layout-multiple-columns,
.layout-multiple-columns *,
.layout-multiple-columns *::before,
.layout-multiple-columns *::after {
  box-sizing: border-box;
}

body.embed,
body.layout-multiple-columns {
  background-color: var(--bird-bg);
  color: var(--bird-fg);
  font-family: var(--bird-font-stack);
}

.layout-multiple-columns {
  scrollbar-color: var(--bird-border) transparent;
  scrollbar-width: thin;
}

.layout-multiple-columns::-webkit-scrollbar,
.layout-multiple-columns .scrollable::-webkit-scrollbar,
.layout-multiple-columns textarea::-webkit-scrollbar,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar,
.layout-multiple-columns .reply-indicator::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.layout-multiple-columns::-webkit-scrollbar-thumb,
.layout-multiple-columns .scrollable::-webkit-scrollbar-thumb,
.layout-multiple-columns textarea::-webkit-scrollbar-thumb,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb,
.layout-multiple-columns .reply-indicator::-webkit-scrollbar-thumb {
  background: var(--bird-border);
  border-radius: var(--bird-radius-pill);
}

.layout-multiple-columns::-webkit-scrollbar-thumb:hover,
.layout-multiple-columns .scrollable::-webkit-scrollbar-thumb:hover,
.layout-multiple-columns textarea::-webkit-scrollbar-thumb:hover,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover,
.layout-multiple-columns .reply-indicator::-webkit-scrollbar-thumb:hover {
  background: var(--bird-dim);
}

.layout-multiple-columns::-webkit-scrollbar-track,
.layout-multiple-columns .scrollable::-webkit-scrollbar-track,
.layout-multiple-columns textarea::-webkit-scrollbar-track,
.layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track,
.layout-multiple-columns .reply-indicator::-webkit-scrollbar-track {
  background: transparent;
}

.layout-multiple-columns .ui {
  display: flex;
  width: 100%;
}

.layout-multiple-columns .ui__header__logo svg,
.layout-multiple-columns .column-link.column-link--logo svg,
.layout-multiple-columns .emoji-mart-anchor-bar,
.layout-multiple-columns .drawer__inner__mastodon,
.layout-multiple-columns .column-header .column-header__icon:not(.fa-hashtag):not(.fa-user-plus):not(.fa-user-times) {
  display: none;
}

/* ==================================
   04. TYPOGRAPHY / COMMON COLORS
   ================================== */

.layout-multiple-columns .account__header__tabs__name h1,
.layout-multiple-columns .account__header__bio .account__header__content,
.layout-multiple-columns .reply-indicator__content,
.layout-multiple-columns .status__content,
.layout-multiple-columns .status__content p,
.layout-multiple-columns .detailed-status__display-name strong,
.layout-multiple-columns .status__info .display-name strong.display-name__html,
.layout-multiple-columns .notification__message,
.layout-multiple-columns .privacy-dropdown__option,
.layout-multiple-columns .privacy-dropdown__option__content strong,
.layout-multiple-columns .language-dropdown__dropdown__results__item,
.layout-multiple-columns .emoji-mart-search input,
.layout-multiple-columns .compose-form .autosuggest-textarea__textarea,
.layout-multiple-columns .compose-form .spoiler-input__input,
.layout-multiple-columns .account__section-headline a.active,
.layout-multiple-columns .account__section-headline button.active,
.layout-multiple-columns .notification__filter-bar a.active,
.layout-multiple-columns .notification__filter-bar button.active {
  color: var(--bird-fg-soft);
}

.layout-multiple-columns .poll__link,
.layout-multiple-columns .status .status__relative-time,
.layout-multiple-columns .status .status__visibility-icon,
.layout-multiple-columns .search-popout > h4,
.layout-multiple-columns .search__popout > h4,
.layout-multiple-columns .status-card .status-card__description,
.layout-multiple-columns .status-card.compact .status-card__description,
.layout-multiple-columns .dropdown-menu__container__header,
.layout-multiple-columns .navigation-bar > a,
.layout-multiple-columns .character-counter,
.layout-multiple-columns .text-icon-button,
.layout-multiple-columns .empty-column-indicator,
.layout-multiple-columns .timeline-hint,
.layout-multiple-columns .status__display-name.muted,
.layout-multiple-columns .setting-text-label,
.layout-multiple-columns .account__header__bio .account__header__fields dt,
.layout-multiple-columns .account__header__bio .account__header__fields dd,
.layout-multiple-columns .trends__item__current,
.layout-multiple-columns .emoji-mart,
.layout-multiple-columns .emoji-mart-anchors,
.layout-multiple-columns .reply-indicator .display-name *,
.layout-multiple-columns .status__display-name,
.layout-multiple-columns .status__prepend,
.layout-multiple-columns .compose-form .compose-form__modifiers,
.layout-multiple-columns .compose-form .autosuggest-account .display-name__account,
.layout-multiple-columns .attachment-list.compact .fa,
.layout-multiple-columns .link-footer p,
.layout-multiple-columns .link-footer p a,
.layout-multiple-columns .muted .status__content,
.layout-multiple-columns .muted .status__content a,
.layout-multiple-columns .muted .status__content p,
.layout-multiple-columns .muted .status__display-name strong {
  color: var(--bird-dim);
}

.layout-multiple-columns .status__info .display-name .display-name__account,
.layout-multiple-columns .display-name__account,
.layout-multiple-columns .account .account__display-name,
.layout-multiple-columns .column-settings__section,
.layout-multiple-columns .setting-toggle__label {
  color: var(--bird-dim);
}

.layout-multiple-columns .about__section__title,
.layout-multiple-columns .account__header__bio .account__header__fields a,
.layout-multiple-columns .column-back-button,
.layout-multiple-columns .emoji-mart-anchor.emoji-mart-anchor-selected,
.layout-multiple-columns .text-icon-button.active,
.layout-multiple-columns .empty-column-indicator a,
.layout-multiple-columns .column-header__back-button,
.layout-multiple-columns .link-button,
.layout-multiple-columns .reply-indicator__content a,
.layout-multiple-columns .status__content a,
.layout-multiple-columns .column-link--transparent.active,
.layout-multiple-columns .status__content__read-more-button {
  color: var(--bird-accent);
}

.layout-multiple-columns .relationship-tag {
  background-color: var(--bird-bg-mud);
  color: var(--bird-fg-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 1;
}

.layout-multiple-columns h4,
.layout-multiple-columns .search__popout h4,
.layout-multiple-columns .search-popout h4,
.layout-multiple-columns .server-banner h4 {
  text-transform: none;
}

/* ==================================
   05. SURFACES / BORDERS
   ================================== */

.layout-multiple-columns :is(
  .column-select__menu,
  .column-select__menu *,
  .column-settings__hashtags .column-select__control,
  .about__meta,
  .about__section__title,
  .announcements,
  .report-dialog-modal,
  .report-modal__target,
  .compose-form .autosuggest-textarea__suggestions,
  .privacy-dropdown__dropdown,
  .drawer__backdrop,
  .list-editor__account,
  .list-editor,
  .list-editor__lists,
  .list-adder__account,
  .list-adder,
  .list-adder__lists,
  .dropdown-menu__arrow::before,
  .dropdown-menu,
  .dropdown-menu__item a,
  .dropdown-menu__item button,
  .emoji-mart-category-label span,
  .emoji-mart-bar:first-child,
  .emoji-picker-dropdown__menu,
  .privacy-dropdown.active .privacy-dropdown__value,
  .emoji-mart-search input,
  .emoji-mart-scroll,
  .emoji-mart-search,
  .follow_requests-unlocked_explanation,
  .dismissable-banner,
  .block-modal__action-bar,
  .boost-modal__action-bar,
  .confirmation-modal__action-bar,
  .mute-modal__action-bar,
  .setting-text__wrapper,
  .setting-text,
  .report-modal__comment,
  .report-modal__container,
  .actions-modal,
  .block-modal,
  .boost-modal,
  .compare-history-modal,
  .confirmation-modal,
  .mute-modal,
  .report-modal,
  .column-header__collapsible-inner,
  .explore__search-header .search__popout,
  .search__popout,
  .search-popout
) {
  background-color: var(--bird-bg-elevated);
  border-color: var(--bird-bg-elevated);
  color: var(--bird-fg-soft);
}

.layout-multiple-columns :is(
  .account__header__bar,
  .about__meta__divider,
  .poll__footer,
  .report-dialog-modal .poll__option.dialog-option,
  .account,
  .report-dialog-modal__container,
  .dropdown-menu__item.edited-timestamp__history__item,
  .dropdown-menu__container__header,
  .compare-history-modal .report-modal__target,
  .account__section-headline,
  .detailed-status__action-bar,
  .column-back-button,
  .column-header,
  .audio-player,
  .video-player,
  .media-gallery,
  .compose-form .spoiler-input__input,
  .compose-form__autosuggest-wrapper,
  .compose-form__poll-wrapper,
  .compose-form__poll-wrapper select,
  .poll__option input[type="text"],
  .report-dialog-modal__textarea,
  .search__input,
  .setting-text,
  .dropdown-menu__separator,
  .status,
  .emoji-mart-search input,
  .conversation,
  .setting-text__wrapper,
  .status-card,
  .status-card.compact
) {
  border-color: var(--bird-border);
}

.layout-multiple-columns .dismissable-banner {
  border: 1px solid var(--bird-border);
}

.layout-multiple-columns :is(
  .search-popout,
  .search__popout,
  .dropdown-menu,
  .emoji-picker-dropdown__menu
) {
  box-shadow: var(--bird-shadow-soft);
}

/* ==================================
   06. TRANSPARENCY / LOWER SPECIFICITY SURFACES
   ================================== */

.layout-multiple-columns :is(
  .status__wrapper-direct,
  .focusable:focus .detailed-status,
  .focusable:focus .detailed-status__action-bar,
  .compose-form__poll-wrapper select,
  .poll__option input[type="text"],
  .language-dropdown__dropdown,
  .report-dialog-modal__textarea,
  .column-inline-form,
  .scrollable .account-card,
  .explore__search-header,
  .empty-column-indicator,
  .column-link,
  .columns-area__panels__pane--navigational .navigation-panel,
  .tabs-bar__wrapper .column-back-button,
  .account__header,
  .column-header__back-button,
  .compose-form .compose-form__modifiers,
  .compose-form .autosuggest-textarea__textarea,
  .compose-form .spoiler-input__input,
  .compose-panel .compose-form__autosuggest-wrapper,
  .compose-form .compose-form__buttons-wrapper,
  .column-header__button,
  .account__section-headline button,
  .notification__filter-bar button,
  .account__section-headline,
  .notification__filter-bar,
  .tabs-bar__wrapper,
  .column-header,
  .detailed-status,
  .detailed-status__action-bar,
  .column > .scrollable,
  .getting-started,
  .getting-started__wrapper,
  .flex-spacer
) {
  background-color: transparent;
}

.layout-multiple-columns :is(
  .column-inline-form,
  .column > .scrollable,
  .error-column,
  .getting-started,
  .regeneration-indicator,
  .column-back-button,
  .column-header
) {
  border: 0;
}

/* ==================================
   07. LOGO / HEADER / TABS
   ================================== */

.layout-multiple-columns .ui__header__logo,
.layout-multiple-columns .column-link.column-link--logo {
  background-image: url('data:image/svg+xml,%3Csvg class="mastodon-logo" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 216.4144 232.00976"%3E%3Cdefs%3E%3ClinearGradient id="gradient" x2="0%25" y2="100%25" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0%25" stop-color="%23595aff"/%3E%3Cstop offset="100%25" stop-color="%23595aff"/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="url(%23gradient)"/%3E%3Cpath d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="%23fff"/%3E%3C/svg%3E');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px auto;
  height: var(--bird-control-lg);
  width: var(--bird-control-lg);
  padding: 0;
}

.layout-multiple-columns :is(
  .ui__header,
  .columns-area__panels__main > div.tabs-bar__wrapper,
  .tabs-bar__wrapper
) {
  background-color: var(--bird-bg-75);
  border-color: var(--bird-border);
  padding: 0;
}

@supports (backdrop-filter: blur(12px)) {
  .layout-multiple-columns :is(
    .ui__header,
    .columns-area__panels__main > div.tabs-bar__wrapper,
    .tabs-bar__wrapper
  ) {
    backdrop-filter: blur(12px);
  }
}

.layout-multiple-columns .column-header {
  font-size: var(--bird-font-size-xl);
  font-weight: var(--bird-font-weight-bold);
}

.layout-multiple-columns .column-header__wrapper.active {
  box-shadow: var(--bird-header-shadow);
}

.layout-multiple-columns .column-header__wrapper.active::before {
  background: var(--bird-header-glow);
}

.layout-multiple-columns .column-subheading {
  background-color: transparent;
  color: var(--bird-fg);
  font-size: var(--bird-font-size-lg);
  font-weight: var(--bird-font-weight-bold);
  text-transform: none;
}

.layout-multiple-columns .account__section-headline a,
.layout-multiple-columns .account__section-headline button,
.layout-multiple-columns .notification__filter-bar a,
.layout-multiple-columns .notification__filter-bar button {
  font-size: var(--bird-font-size);
  transition: background-color var(--bird-transition), color var(--bird-transition);
}

.layout-multiple-columns .notification__filter-bar {
  border-bottom: 1px solid var(--bird-border);
  border-left: 0;
  border-right: 0;
}

.layout-multiple-columns .notification__filter-bar button:hover,
.layout-multiple-columns .account__section-headline a:hover {
  background-color: var(--bird-column-link-hover);
}

.layout-multiple-columns .account__section-headline a.active::after,
.layout-multiple-columns .account__section-headline button.active::after,
.layout-multiple-columns .notification__filter-bar a.active::after,
.layout-multiple-columns .notification__filter-bar button.active::after {
  background-color: var(--bird-accent);
  border-radius: var(--bird-radius-pill);
  border: 0;
  height: 4px;
  min-width: 56px;
}

.layout-multiple-columns .account__section-headline a.active::before,
.layout-multiple-columns .account__section-headline button.active::before,
.layout-multiple-columns .notification__filter-bar a.active::before,
.layout-multiple-columns .notification__filter-bar button.active::before {
  display: none;
}

/* ==================================
   08. SEARCH / INPUTS
   ================================== */

.layout-multiple-columns .search__popout,
.layout-multiple-columns .search-popout {
  left: 15px;
  max-width: calc(100% - 30px) !important;
  width: calc(100% - 30px) !important;
}

.layout-multiple-columns .search {
  margin-inline: 10px;
}

.layout-multiple-columns .search .search__icon .fa-search::before {
  content: "";
}

.layout-multiple-columns .search .search__icon .fa-search {
  background-color: var(--bird-bg-mud);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  top: 10px;
}

.layout-multiple-columns .search .search__icon .fa-search::after {
  content: "\f002";
  font-family: FontAwesome;
  color: var(--bird-dim);
  font-size: 14px;
}

.layout-multiple-columns .search__icon .fa-times-circle {
  top: 14px;
}

.layout-multiple-columns input.setting-text,
.layout-multiple-columns .search__input,
.layout-multiple-columns .list-editor input.setting-text,
.layout-multiple-columns .list-adder input.setting-text,
.layout-multiple-columns .list-editor__search .search__input,
.layout-multiple-columns .embed-modal .embed-modal__container .embed-modal__html {
  background-color: var(--bird-bg-mud);
  border: 1px solid var(--bird-bg-mud);
  border-radius: 32px;
  color: var(--bird-dim);
  font-size: var(--bird-font-size);
  height: var(--bird-control-md);
  padding: 0 20px;
}

.layout-multiple-columns .list-editor input.setting-text,
.layout-multiple-columns .list-adder input.setting-text,
.layout-multiple-columns .embed-modal .embed-modal__container .embed-modal__html,
.layout-multiple-columns .list-editor__search .search__input {
  background-color: transparent;
  border-color: var(--bird-border);
  border-radius: var(--bird-radius-md);
  height: 38px;
}

.layout-multiple-columns input.setting-text:focus,
.layout-multiple-columns .search__input:focus,
.layout-multiple-columns .poll__option input[type="text"],
.layout-multiple-columns .report-dialog-modal__textarea,
.layout-multiple-columns .emoji-mart-search > input:focus {
  color: var(--bird-fg-soft);
}

.layout-multiple-columns .poll__option input[type="text"] {
  background-color: transparent;
}

.layout-multiple-columns .poll__option input[type="text"]:focus {
  border-color: var(--bird-accent);
}

.layout-multiple-columns .search__input::placeholder,
.layout-multiple-columns input::placeholder,
.layout-multiple-columns input.setting-text::placeholder,
.layout-multiple-columns .poll__option input[type="text"]::placeholder,
.layout-multiple-columns .report-dialog-modal__textarea::placeholder,
.layout-multiple-columns .emoji-mart-search > input::placeholder,
.layout-multiple-columns .compose-form__autosuggest-wrapper textarea::placeholder,
.layout-multiple-columns .compose-form .spoiler-input__input::placeholder {
  color: var(--bird-dim);
  opacity: 1;
}

.layout-multiple-columns input:focus-visible,
.layout-multiple-columns textarea:focus-visible,
.layout-multiple-columns button:focus-visible,
.layout-multiple-columns a:focus-visible {
  outline: 2px solid var(--bird-accent);
  outline-offset: 2px;
}

/* ==================================
   09. MODALS / OVERLAYS
   ================================== */

.layout-multiple-columns .modal-root__overlay {
  background-color: var(--bird-bg-overlay) !important;
  color: var(--bird-fg-soft) !important;
}

.layout-multiple-columns .modal-root__modal .display-name strong,
.layout-multiple-columns .modal-root__modal .status__content {
  color: var(--bird-fg-soft) !important;
}

.layout-multiple-columns .media-modal__overlay .picture-in-picture__footer {
  display: none;
}

.layout-multiple-columns .media-modal__navigation button,
.layout-multiple-columns .image-loader button {
  align-items: center;
  color: var(--bird-fg-soft) !important;
  display: inline-flex;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--bird-font-size-xl) !important;
  width: 36px !important;
  height: 36px !important;
  margin: 4px !important;
  top: 2px !important;
}

.layout-multiple-columns .media-modal__navigation button {
  top: 5px !important;
}

/* ==================================
   10. LAYOUT: PANELS / COLUMNS / DRAWER
   ================================== */

.layout-multiple-columns .columns-area__panels__pane { order: 3; }
.layout-multiple-columns .columns-area__panels__main { order: 2; }
.layout-multiple-columns .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational { order: 1; }

.layout-multiple-columns .drawer {
  order: 999999;
  padding: 0 10px;
  width: var(--bird-column-width);
}

.layout-multiple-columns .drawer__header,
.layout-multiple-columns .drawer__inner {
  background-color: var(--bird-bg);
  border-color: var(--bird-bg);
}

.layout-multiple-columns .columns-area__panels__pane,
.layout-multiple-columns .columns-area__panels__pane__inner,
.layout-multiple-columns .compose-panel {
  min-width: var(--bird-side-panel);
  width: var(--bird-side-panel);
}

.layout-multiple-columns .columns-area__panels__pane--compositional {
  flex-grow: 1;
  height: 100vh;
  max-width: 350px;
  overflow: visible;
  position: sticky;
  top: 0;
}

.layout-multiple-columns .columns-area__panels__pane--compositional .columns-area__panels__pane__inner {
  position: static;
  width: 100% !important;
}

.layout-multiple-columns .compose-panel,
.layout-multiple-columns .compose-panel .compose-form,
.layout-multiple-columns .compose-form__autosuggest-wrapper {
  overflow: visible;
}

.layout-multiple-columns .compose-panel .compose-form {
  background-color: transparent;
  margin-bottom: 0;
  position: relative;
  z-index: 4;
}

.layout-multiple-columns .compose-form__autosuggest-wrapper,
.layout-multiple-columns .compose-form__buttons-wrapper {
  border: 0;
}

.layout-multiple-columns .columns-area__panels__main > div {
  border-left: 1px solid var(--bird-border);
  border-right: 1px solid var(--bird-border);
}

.layout-multiple-columns .column {
  border-right: 1px solid var(--bird-border);
  padding-left: 0;
  padding-right: 0;
  width: var(--bird-column-width);
}

@media (min-width: 1175px) {
  .layout-multiple-columns .columns-area__panels__main {
    max-width: calc(var(--bird-main-panel) + (var(--bird-gap-3) * 4));
    padding-left: calc(var(--bird-gap-3) * 2);
    padding-right: calc(var(--bird-gap-3) * 2);
  }

  .layout-multiple-columns .navigation-panel {
    margin-right: -20px;
    padding-left: 0 !important;
    padding-right: 20px;
  }

  .layout-multiple-columns .ui__header,
  .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper,
  .layout-multiple-columns .tabs-bar__wrapper {
    margin-right: -2px;
  }
}

/* ==================================
   11. NAVIGATION PANEL
   ================================== */

.layout-multiple-columns .navigation-panel {
  box-sizing: border-box;
  margin-top: 0;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: none;
}

.layout-multiple-columns .navigation-panel::-webkit-scrollbar,
.dropdown-menu__container__list--scrollable::-webkit-scrollbar {
  display: none;
}

.columns-area__panels__pane--navigational .navigation-panel {
  border: 0;
  height: 100%;
}

.layout-multiple-columns .navigation-panel hr {
  visibility: hidden;
}

.layout-multiple-columns .navigation-panel__logo hr {
  margin: 0;
}

.layout-multiple-columns .column-link,
.layout-multiple-columns .column-subheading {
  align-items: center;
  color: var(--bird-fg-soft);
  display: flex;
  gap: var(--bird-gap-3);
  overflow: visible;
  font-size: var(--bird-font-size);
  padding: calc(var(--bird-gap-3) + 4px) calc(var(--bird-gap-3) * 1.5) calc(var(--bird-gap-3) + 4px) var(--bird-gap-3);
  transition: color var(--bird-transition), background-color var(--bird-transition), transform var(--bird-transition-fast);
}

.layout-multiple-columns .column-link:hover,
.layout-multiple-columns .column-link:focus {
  background-color: var(--bird-column-link-hover);
}

.layout-multiple-columns .column-link__icon,
.layout-multiple-columns .column-link > i {
  margin: 0;
  min-width: 1.3em;
}

.layout-multiple-columns .column-link--transparent.active {
  color: var(--bird-fg-soft);
  font-weight: var(--bird-font-weight-bold);
}

.layout-multiple-columns .icon-with-badge__badge {
  background-color: var(--bird-accent-strong);
  border-color: var(--bird-bg);
  border-radius: 50%;
  font-size: 11px;
  left: 12px;
  top: -6px;
}

@media screen and (min-width: 890px) {
  .layout-multiple-columns .navigation-panel__logo { order: 1; }
  .layout-multiple-columns .column-link[href="/home"] { order: 2; }
  .layout-multiple-columns .column-link[href="/notifications"] { order: 3; }
  .layout-multiple-columns .column-link[href="/explore"] { order: 4; }
  .layout-multiple-columns .column-link[href="/public/local"] { order: 5; }
  .layout-multiple-columns .column-link[href="/public"] { order: 6; }
  .layout-multiple-columns .column-link[href="/conversations"] { order: 7; }
  .layout-multiple-columns .column-link[href="/follow_requests"] { order: 8; }
  .layout-multiple-columns .column-link[href="/bookmarks"] { order: 9; }
  .layout-multiple-columns .column-link[href="/favourites"] { order: 10; }
  .layout-multiple-columns .column-link[href="/settings/preferences"] { order: 11; }
  .layout-multiple-columns .column-link[href="/lists"] { order: 12; }
  .layout-multiple-columns .list-panel { order: 13; }
  .layout-multiple-columns .navigation-panel__sign-in-banner,
  .layout-multiple-columns .navigation-panel__legal { order: 14; }
  .layout-multiple-columns .flex-spacer { order: 15; }
  .layout-multiple-columns .getting-started__trends { order: 16; }

  .layout-multiple-columns .list-panel > hr,
  .layout-multiple-columns .list-panel + hr {
    display: none;
  }

  .layout-multiple-columns .list-panel {
    display: none;
    opacity: 0;
    transition: opacity var(--bird-transition);
  }

  .layout-multiple-columns .list-panel:focus,
  .layout-multiple-columns .list-panel:hover,
  .layout-multiple-columns .column-link[href="/lists"]:focus ~ .list-panel,
  .layout-multiple-columns .column-link[href="/lists"]:hover ~ .list-panel {
    display: block;
    opacity: 1;
  }

  .layout-multiple-columns .list-panel .column-link {
    display: flex;
  }
}

/* ==================================
   12. STATUS / TOOT LAYOUT
   ================================== */

.layout-multiple-columns article,
.layout-multiple-columns .status__prepend,
.layout-multiple-columns .notification__message,
.layout-multiple-columns .status {
  transition:
    color var(--bird-transition),
    background-color var(--bird-transition),
    border-color var(--bird-transition),
    opacity var(--bird-transition),
    transform var(--bird-transition);
}

.layout-multiple-columns article:hover,
.layout-multiple-columns article:focus {
  background-color: var(--bird-light-shade);
}

.layout-multiple-columns .focusable:focus,
.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item.selected,
.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item:hover,
.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item:focus,
.layout-multiple-columns .compose-form .autosuggest-textarea__suggestions__item:active {
  background: var(--bird-focusable);
}

.account__avatar[style="width: 46px; height: 46px;"],
.layout-multiple-columns .status__avatar {
  width: var(--bird-avatar) !important;
  height: var(--bird-avatar) !important;
  min-width: var(--bird-avatar) !important;
  min-height: var(--bird-avatar) !important;
  max-width: var(--bird-avatar) !important;
  max-height: var(--bird-avatar) !important;
}

.layout-multiple-columns .account-card__title__avatar .account__avatar,
.layout-multiple-columns .account-card__title__avatar img,
.layout-multiple-columns .account__avatar > img,
.layout-multiple-columns .column > .scrollable .status__avatar img {
  border: 0;
  border-radius: 50%;
  box-shadow: rgb(255 255 255 / 0.03) 0 0 2px inset;
}

.layout-multiple-columns .status .status__info {
  align-items: flex-start;
  display: flex;
  gap: var(--bird-gap-3);
  height: calc(var(--bird-gap-3) * 2);
  justify-content: flex-start;
  margin-bottom: 0;
  padding-bottom: calc(var(--bird-gap-3) / 2);
}

.layout-multiple-columns .status__info .status__display-name {
  align-items: flex-start;
  display: inline-flex;
  gap: var(--bird-gap-3);
  order: 1;
  overflow: visible;
}

.layout-multiple-columns .status__info .display-name {
  display: flex;
  gap: calc(var(--bird-gap-3) / 2);
}

.layout-multiple-columns .status__info::before {
  content: "·";
  color: var(--bird-dim);
  display: inline-block;
  font-size: var(--bird-font-size);
  font-weight: 400;
  height: 20px;
  margin-left: -6px;
  margin-right: -10px;
  order: 2;
  position: relative;
}

.layout-multiple-columns .status__info .status__relative-time {
  height: unset;
  order: 3;
}

.layout-multiple-columns .status__action-bar,
.layout-multiple-columns .attachment-list,
.layout-multiple-columns .status__content__read-more-button,
.layout-multiple-columns .status .status__content,
.layout-multiple-columns .notification.notification-admin-sign-up .display-name__account {
  font-size: var(--bird-font-size);
  padding-left: calc(var(--bird-avatar) + var(--bird-gap-3));
  padding-top: 0;
}

.layout-multiple-columns .conversation .attachment-list,
.layout-multiple-columns .translate ~ .status__content__read-more-button,
.layout-multiple-columns .reply-indicator .attachment-list,
.layout-multiple-columns .conversation .status__action-bar {
  padding-left: 0;
}

[dir="rtl"] .layout-multiple-columns .status__action-bar,
[dir="rtl"] .layout-multiple-columns .attachment-list,
[dir="rtl"] .layout-multiple-columns .status__content__read-more-button,
[dir="rtl"] .layout-multiple-columns .status .status__content {
  padding-left: 0;
  padding-right: calc(var(--bird-avatar) + var(--bird-gap-3));
}

.layout-multiple-columns .status .audio-player,
.layout-multiple-columns .status .video-player,
.layout-multiple-columns .status .media-gallery {
  margin-left: auto;
  width: calc(100% - (var(--bird-avatar) + var(--bird-gap-3))) !important;
}

.layout-multiple-columns .status .status-card {
  margin-left: calc(var(--bird-avatar) + var(--bird-gap-3));
}

.layout-multiple-columns .status__prepend {
  padding-left: calc(var(--bird-avatar) - 4px);
}

.layout-multiple-columns .status__prepend + .status {
  padding-top: 10px;
}

.layout-multiple-columns .muted .status__info *,
.layout-multiple-columns .muted .status__info .display-name * {
  color: var(--bird-fg-soft);
}

/* ==================================
   13. STATUS MEDIA / CARDS
   ================================== */

.layout-multiple-columns .media-gallery__item-thumbnail img,
.layout-multiple-columns .audio-player,
.layout-multiple-columns .video-player video,
.layout-multiple-columns .media-gallery__gifv video,
.layout-multiple-columns .media-gallery__preview {
  backface-visibility: hidden;
  border-radius: var(--bird-radius-md);
}

.layout-multiple-columns a.status-card,
.layout-multiple-columns a.status-card.compact {
  background-color: transparent;
  border: 1px solid var(--bird-border);
  border-radius: var(--bird-radius-md);
  display: block;
  overflow: hidden;
}

.layout-multiple-columns a.status-card .status-card__image-image,
.layout-multiple-columns a.status-card .status-card__image-image.compact {
  border-radius: 0;
}

.layout-multiple-columns a.status-card .status-card__content,
.layout-multiple-columns a.status-card.compact .status-card__content {
  display: grid;
  gap: calc(var(--bird-gap-3) / 2);
  padding: var(--bird-gap-3);
}

.layout-multiple-columns a.status-card .status-card__host,
.layout-multiple-columns a.status-card.compact .status-card__host,
.layout-multiple-columns a.status-card .status-card__description,
.layout-multiple-columns a.status-card.compact .status-card__description {
  color: var(--bird-dim);
}

.layout-multiple-columns a.status-card .status-card__host,
.layout-multiple-columns a.status-card.compact .status-card__host,
.layout-multiple-columns a.status-card .status-card__title,
.layout-multiple-columns a.status-card.compact .status-card__title {
  font-size: var(--bird-font-size);
  margin: 0;
}

.layout-multiple-columns a.status-card .status-card__title,
.layout-multiple-columns a.status-card.compact .status-card__title {
  color: var(--bird-fg);
  font-weight: 400;
  line-height: 1.3;
  white-space: inherit;
}

/* ==================================
   14. DETAILED STATUS
   ================================== */

.layout-multiple-columns .detailed-status .status__content {
  font-size: var(--bird-font-size-lg);
}

.layout-multiple-columns .detailed-status__meta,
body.embed .detailed-status__meta {
  color: var(--bird-dim);
  font-size: var(--bird-font-size);
}

body.embed .detailed-status__meta {
  line-height: 1.5;
}

.layout-multiple-columns .detailed-status__favorites,
.layout-multiple-columns .detailed-status__reblogs,
body.embed .detailed-status__reblogs,
body.embed .detailed-status__favorites {
  display: inline-flex;
  gap: 4px;
  font-size: var(--bird-font-size);
}

.layout-multiple-columns .detailed-status__meta .animated-number,
body.embed .detailed-status__meta .animated-number,
body.embed .detailed-status__reblogs,
body.embed .detailed-status__favorites {
  color: var(--bird-fg-soft);
  font-weight: var(--bird-font-weight-bold);
}

.layout-multiple-columns .detailed-status__reblogs::after,
body.embed .detailed-status__reblogs::after {
  content: "Boosts";
  color: var(--bird-dim);
  font-weight: 500;
}

.layout-multiple-columns .detailed-status__favorites::after,
body.embed .detailed-status__favorites::after {
  content: "Favourites";
  color: var(--bird-dim);
  font-weight: 500;
}

.layout-multiple-columns .detailed-status__meta .detailed-status__link .fa-star,
.layout-multiple-columns .detailed-status__meta .detailed-status__link .fa-retweet,
body.embed .detailed-status__meta .detailed-status__link .fa-star,
body.embed .detailed-status__meta .detailed-status__link .fa-retweet {
  display: none;
}

/* ==================================
   15. ACTION BAR / BUTTONS / ICONS
   ================================== */

.layout-multiple-columns .icon-button {
  color: var(--bird-dim);
  transition: color var(--bird-transition), background-color var(--bird-transition), opacity var(--bird-transition), transform var(--bird-transition-fast);
}

.layout-multiple-columns .icon-button:hover {
  color: var(--bird-accent);
}

.layout-multiple-columns .status__action-bar .icon-button,
.layout-multiple-columns .detailed-status__action-bar .icon-button {
  border-radius: 50%;
  height: unset !important;
  width: unset !important;
  position: relative;
}

.layout-multiple-columns .status__action-bar .fa {
  font-size: 14.6px;
  min-width: 18px;
}

.layout-multiple-columns .status__action-bar .icon-button--with-counter {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

@media screen and (min-width: 890px) {
  .layout-multiple-columns .status__action-bar .icon-button {
    width: 50px !important;
  }

  .layout-multiple-columns .conversation .status__action-bar .icon-button {
    width: auto !important;
  }
}

.layout-multiple-columns .status__action-bar .icon-button::after,
.layout-multiple-columns .detailed-status__action-bar .icon-button::after {
  background-color: var(--bird-action-hover);
  border-radius: 50%;
  content: "";
  height: 36px;
  width: 36px;
  left: 0;
  top: -8px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(1px);
  z-index: -1;
}

.layout-multiple-columns .status__action-bar .icon-button:hover::after,
.layout-multiple-columns .detailed-status__action-bar .icon-button:hover::after {
  opacity: 1;
}

.layout-multiple-columns .status__action-bar .icon-button[disabled],
.layout-multiple-columns .detailed-status__action-bar .icon-button[disabled] {
  opacity: .5;
  pointer-events: none;
}

.layout-multiple-columns .status__action-bar button.icon-button:hover .fa-retweet,
.layout-multiple-columns .status__action-bar button.icon-button.active .fa-retweet,
.layout-multiple-columns .detailed-status__action-bar button.icon-button:hover .fa-retweet,
.layout-multiple-columns .detailed-status__action-bar button.icon-button.active .fa-retweet {
  color: var(--bird-green);
}

.layout-multiple-columns button.icon-button:hover i.fa-retweet ~ span,
.layout-multiple-columns button.icon-button.active i.fa-retweet ~ span {
  color: var(--bird-green);
}

.layout-multiple-columns button.icon-button:hover i.fa-star ~ span,
.layout-multiple-columns button.icon-button.active i.fa-star ~ span,
.layout-multiple-columns .icon-button.star-icon.active,
.layout-multiple-columns .notification__favourite-icon-wrapper .star-icon {
  color: var(--bird-red);
}

.layout-multiple-columns .status button.icon-button:hover .fa-bookmark,
.layout-multiple-columns .status button.icon-button.active .fa-bookmark,
.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-bookmark,
.layout-multiple-columns .detailed-status__action-bar .icon-button.active .fa-bookmark {
  color: var(--bird-red);
}

.layout-multiple-columns .status button.icon-button:hover .fa-mail-reply,
.layout-multiple-columns .status button.icon-button:hover .fa-reply,
.layout-multiple-columns .status button.icon-button:hover .fa-reply-all,
.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-mail-reply,
.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-reply,
.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-reply-all {
  color: var(--bird-brand);
}

.layout-multiple-columns .status button.icon-button:hover .fa-share-alt,
.layout-multiple-columns .status button.icon-button:hover .fa-share,
.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-share-alt,
.layout-multiple-columns .detailed-status__action-bar .icon-button:hover .fa-share {
  color: var(--bird-brand);
}

.layout-multiple-columns .notification.notification-reblog .status__action-bar,
.layout-multiple-columns .notification.notification-favourite .status__action-bar {
  display: none;
}

/* Buttons */
.layout-multiple-columns .button,
.layout-multiple-columns .compose-form__buttons button,
.layout-multiple-columns .notification__report__actions .button,
.layout-multiple-columns .column-inline-form button,
.layout-multiple-columns .explore__suggestions .account-card__actions__button button,
.layout-multiple-columns .account__header__tabs__buttons .button,
.layout-multiple-columns .account__header__tabs__buttons .icon-button,
body.embed .button.logo-button {
  border-radius: var(--bird-radius-pill);
}

.layout-multiple-columns .notification__report__actions .button,
.layout-multiple-columns .column-inline-form button,
.layout-multiple-columns .explore__suggestions .account-card__actions__button button,
.layout-multiple-columns .account__header__tabs__buttons .button,
body.embed .button.logo-button {
  background-color: transparent;
  color: var(--bird-fg-soft);
  font-size: var(--bird-font-size);
  padding-left: 16px;
  padding-right: 16px;
  transition: background-color var(--bird-transition), color var(--bird-transition), border-color var(--bird-transition);
}

.layout-multiple-columns .notification__report__actions .button,
.layout-multiple-columns .column-inline-form button,
.layout-multiple-columns .explore__suggestions .account-card__actions__button button,
.layout-multiple-columns .account__header__tabs__buttons .button,
.layout-multiple-columns .account__header__tabs__buttons .icon-button,
body.embed .button.logo-button {
  border: 1px solid var(--bird-border);
}

.layout-multiple-columns .account__header__tabs__buttons .icon-button {
  align-items: center;
  color: var(--bird-fg-soft);
  display: inline-flex;
  justify-content: center;
}

.layout-multiple-columns .account__header__tabs__buttons .icon-button .fa::before {
  font-size: 17px;
}

.layout-multiple-columns .explore__suggestions .account-card__actions__button button:hover,
.layout-multiple-columns .account__header__tabs__buttons .button:hover,
.layout-multiple-columns .account__header__tabs__buttons .button:focus,
.layout-multiple-columns .account__header__tabs__buttons .icon-button.active,
.layout-multiple-columns .account__header__tabs__buttons .icon-button:hover,
.layout-multiple-columns .account__header__tabs__buttons .icon-button:focus,
.layout-multiple-columns .column-inline-form button:hover,
body.embed .button.logo-button:hover {
  background-color: var(--bird-profile-button-hover);
  color: var(--bird-fg-soft);
}

.layout-multiple-columns .compose-form__publish-button-wrapper button,
.layout-multiple-columns .server-banner .button,
.layout-multiple-columns .sign-in-banner .button,
.layout-multiple-columns .ui__header__links .button {
  background-color: var(--bird-accent-strong);
  border-color: var(--bird-accent-strong);
  color: var(--bird-fg-soft);
  transition: background-color var(--bird-transition), border-color var(--bird-transition), color var(--bird-transition);
}

.layout-multiple-columns .compose-form__publish-button-wrapper button:hover,
.layout-multiple-columns .compose-form__publish-button-wrapper button:focus,
.layout-multiple-columns .server-banner .button:hover,
.layout-multiple-columns .server-banner .button:focus,
.layout-multiple-columns .sign-in-banner .button:hover,
.layout-multiple-columns .sign-in-banner .button:focus,
.layout-multiple-columns .ui__header__links .button:hover,
.layout-multiple-columns .ui__header__links .button:focus {
  background-color: var(--bird-accent);
  border-color: var(--bird-accent);
}

.layout-multiple-columns .button.button-tertiary {
  background-color: transparent !important;
  border: 1px solid var(--bird-accent-strong) !important;
  color: var(--bird-fg-soft);
  padding: 6px 17px;
}

.layout-multiple-columns .button.button-tertiary:hover,
.layout-multiple-columns .button.button-tertiary:focus {
  background-color: var(--bird-accent) !important;
  border-color: var(--bird-accent) !important;
  color: var(--bird-bg) !important;
}

.layout-multiple-columns .button.button-secondary {
  background-color: transparent !important;
  border: 1px solid var(--bird-dim);
  color: var(--bird-dim);
}

.layout-multiple-columns .button.button-secondary:hover {
  background-color: var(--bird-fg-soft) !important;
  border-color: var(--bird-fg-soft);
  color: var(--bird-bg);
}

.layout-multiple-columns .block-modal__cancel-button,
.layout-multiple-columns .confirmation-modal__cancel-button,
.layout-multiple-columns .confirmation-modal__secondary-button,
.layout-multiple-columns .mute-modal__cancel-button {
  background-color: transparent;
  color: var(--bird-dim);
  font-size: var(--bird-font-size-md);
}

.layout-multiple-columns .block-modal__cancel-button:hover,
.layout-multiple-columns .block-modal__cancel-button:focus,
.layout-multiple-columns .confirmation-modal__cancel-button:hover,
.layout-multiple-columns .confirmation-modal__cancel-button:focus,
.layout-multiple-columns .confirmation-modal__secondary-button:hover,
.layout-multiple-columns .confirmation-modal__secondary-button:focus,
.layout-multiple-columns .mute-modal__cancel-button:hover,
.layout-multiple-columns .mute-modal__cancel-button:focus {
  background-color: transparent;
  color: var(--bird-dim-2);
}

/* ==================================
   16. NOTIFICATIONS
   ================================== */

.layout-multiple-columns .notification__message {
  display: grid;
  gap: var(--bird-gap-3);
  grid-template-columns: minmax(0, var(--bird-avatar)) minmax(0, 1fr);
  height: calc(var(--bird-gap-3) * 2);
}

.layout-multiple-columns .notification__message i {
  font-size: var(--bird-icon-notification);
}

.layout-multiple-columns .notification__message > span {
  display: block;
  margin-top: calc(var(--bird-avatar-sm) + 6px);
  overflow: visible;
}

.layout-multiple-columns .notification__message > span > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout-multiple-columns .notification__message > div {
  display: flex;
  justify-content: flex-end;
}

.layout-multiple-columns .notification .notification__display-name {
  position: relative;
  z-index: 99;
}

.layout-multiple-columns .notification .account__avatar-overlay-base {
  display: none;
}

.layout-multiple-columns .notification .account__avatar,
.layout-multiple-columns .notification .account__avatar-overlay-overlay .account__avatar,
.layout-multiple-columns .notification .account__avatar-overlay-overlay {
  width: var(--bird-avatar-sm) !important;
  height: var(--bird-avatar-sm) !important;
  min-width: var(--bird-avatar-sm) !important;
  min-height: var(--bird-avatar-sm) !important;
  position: absolute;
}

.layout-multiple-columns .notification .status__relative-time,
.layout-multiple-columns .notification .status__info::before {
  display: none;
}

.layout-multiple-columns .notification .account__relationship {
  border-radius: 50%;
  height: 24px;
  transform: translateY(-4px);
  width: 24px;
}

.layout-multiple-columns .notification .account__relationship:hover {
  background-color: var(--bird-action-hover);
}

.layout-multiple-columns .notification .account__relationship .icon-button,
.layout-multiple-columns .account__relationship .icon-button {
  background-color: transparent;
}

.layout-multiple-columns .notification .account__relationship .fa::before,
.layout-multiple-columns .account__wrapper .account__relationship .icon-button.active .fa::before,
.layout-multiple-columns .explore__search-results .account__relationship .icon-button.active .fa::before,
.layout-multiple-columns .notification .account__relationship .icon-button.active .fa::before,
.layout-multiple-columns .explore__search-results .icon-button:focus .fa::before,
.layout-multiple-columns .notification .account__relationship .icon-button:focus .fa::before,
.layout-multiple-columns .explore__search-results .icon-button:hover .fa::before,
.layout-multiple-columns .notification .account__relationship .icon-button:hover .fa::before {
  color: var(--bird-dim);
}

.layout-multiple-columns .explore__search-results .icon-button.active:hover .fa::before,
.layout-multiple-columns .notification .account__relationship .icon-button.active:hover .fa::before {
  color: var(--bird-red);
}

.layout-multiple-columns .notification .fa.fa-user-plus::before,
.layout-multiple-columns .notification .fa.fa-home::before,
.layout-multiple-columns .notification .fa.fa-flag::before,
.layout-multiple-columns .notification .fa.fa-tasks::before,
.layout-multiple-columns .notification .fa.fa-retweet::before {
  color: var(--bird-accent-strong);
}

.layout-multiple-columns .notification__favourite-icon-wrapper .fa.fa-retweet {
  color: var(--bird-green);
}

.layout-multiple-columns .conversation--unread,
.layout-multiple-columns .notification.unread,
.layout-multiple-columns .status__wrapper.unread {
  background-color: var(--bird-bg-soft);
}

.layout-multiple-columns .notification:hover .notification__message {
  background-color: transparent;
}

/* ==================================
   17. PROFILE / ACCOUNT HEADER
   ================================== */

.layout-multiple-columns .getting-started__trends h4,
.layout-multiple-columns .account__header__bar {
  border-color: var(--bird-border);
}

.layout-multiple-columns .account__header__image {
  height: 200px;
}

.layout-multiple-columns .account__header__bar .avatar {
  margin-left: 0 !important;
}

.layout-multiple-columns .account__header__bar .avatar .account__avatar {
  background-color: transparent;
  border: 0;
  width: 90px !important;
  height: 90px !important;
}

.layout-multiple-columns .account__header__tabs {
  overflow: visible;
}

.layout-multiple-columns .account__header__tabs .account-role {
  display: none;
  width: 90px;
}

.layout-multiple-columns .account__header__bio .account__header__fields {
  background-color: transparent;
  color: var(--bird-dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bird-gap-3);
  padding: 0;
}

.layout-multiple-columns .account__header__bio .account__header__fields dl {
  background-color: transparent;
  border: 0;
  color: var(--bird-dim);
  display: inline-flex;
  gap: calc(var(--bird-gap-3) / 2);
  padding: 0;
  font-size: var(--bird-font-size);
  font-weight: 400;
}

.layout-multiple-columns .account__header__bio .account__header__fields dt {
  display: none;
}

.layout-multiple-columns .account__header__bio .account__header__fields dt:not([title]) {
  display: inline-flex;
  font-weight: 400;
  gap: calc(var(--bird-gap-3) / 2);
  text-transform: none;
}

.layout-multiple-columns .account__header__bio .account__header__fields dt:not([title])::before {
  content: "\f073";
  font-family: FontAwesome;
  color: var(--bird-dim);
}

.layout-multiple-columns .account__header__fields .verified a,
.layout-multiple-columns .account__header__bio .account__header__fields .verified a,
.layout-multiple-columns .account__header__bio .account__header__fields .verified dd,
.layout-multiple-columns .account__header__bio .account__header__fields .verified dt {
  color: var(--bird-verified);
}

/* ==================================
   18. LISTS / TRENDS / SMALL AREAS
   ================================== */

.layout-multiple-columns .list-editor__search {
  padding: 15px;
}

.layout-multiple-columns .list-editor .column-inline-form button,
.layout-multiple-columns .list-adder .column-inline-form button,
.layout-multiple-columns .list-editor .column-inline-form button::before {
  min-height: 38px;
  width: 100% !important;
}

.layout-multiple-columns .list-editor .list__display-name,
.layout-multiple-columns .list-adder .list__display-name {
  display: flex;
  gap: var(--bird-gap-3);
}

.layout-multiple-columns .getting-started__trends {
  margin-top: calc(var(--bird-gap-3) * 2);
}

.layout-multiple-columns .getting-started__trends h4 {
  border: 0;
  color: var(--bird-fg);
  font-size: var(--bird-font-size-xl);
  font-weight: var(--bird-font-weight-bold);
  line-height: 24px;
  margin-bottom: var(--bird-gap-3);
}

.layout-multiple-columns .trends__item__name {
  display: grid;
  gap: 4px;
}

.layout-multiple-columns .trends__item__name a {
  font-size: var(--bird-font-size);
}

.layout-multiple-columns .trends__item__sparkline path:last-child {
  stroke: var(--bird-accent) !important;
}

.layout-multiple-columns .server-banner__meta__column {
  max-width: 60%;
  width: unset;
}

.layout-multiple-columns .timeline-hint strong {
  display: block;
  margin-bottom: var(--bird-gap-3);
}

.layout-multiple-columns .timeline-hint br {
  display: none;
}

.layout-multiple-columns .empty-column-indicator {
  min-height: 120px;
}

/* ==================================
   19. COMPOSE / CW / POLLS / WARNINGS
   ================================== */

.layout-multiple-columns .compose-form .compose-form__warning {
  background-color: var(--bird-dim);
  color: var(--bird-bg);
  box-shadow: none;
}

.layout-multiple-columns .reply-indicator {
  background-color: var(--bird-bg-mud);
  color: var(--bird-fg-soft);
}

.layout-multiple-columns .reply-indicator__content .status__content__spoiler-link,
.layout-multiple-columns .status__content__spoiler-link {
  background-color: var(--bird-bg-soft);
  color: var(--bird-dim-2);
  font-weight: 500;
  margin-left: calc(var(--bird-gap-3) / 2) !important;
  vertical-align: baseline;
}

.layout-multiple-columns .reply-indicator__content .status__content__spoiler-link:hover,
.layout-multiple-columns .reply-indicator__content .status__content__spoiler-link:focus,
.layout-multiple-columns .status__content .status__content__spoiler-link:hover,
.layout-multiple-columns .status__content .status__content__spoiler-link:focus {
  background-color: var(--bird-bg-soft);
  color: var(--bird-fg-soft);
}

.layout-multiple-columns .notification .reply-indicator__content .status__content__spoiler-link,
.layout-multiple-columns .notification .status__content__spoiler-link {
  color: var(--bird-dim);
}

.layout-multiple-columns .compose-form__poll-wrapper select,
.layout-multiple-columns .poll__option input[type="text"] {
  color: var(--bird-fg-soft);
}

.layout-multiple-columns .poll__chart {
  background-color: var(--bird-dim);
}

@media (min-width: 889px) {
  .layout-multiple-columns .compose-form .autosuggest-textarea__textarea {
    max-height: 20vh !important;
    overflow-y: auto !important;
    resize: none;
  }
}

@media (min-width: 889px) and (max-height: 1000px) {
  .layout-multiple-columns .compose-form .autosuggest-textarea__textarea {
    max-height: 10vh !important;
    resize: none;
  }
}

/* ==================================
   20. DIRECT / PRIVATE MESSAGE FLAG
   ================================== */

.layout-multiple-columns .detailed-status-direct {
  position: relative;
}

.layout-multiple-columns .status__wrapper-direct::after,
.layout-multiple-columns .detailed-status-direct::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-top: 20px solid var(--bird-accent);
}

.layout-multiple-columns .notification .status__wrapper-direct::after {
  top: -40px;
}

/* ==================================
   21. THREADS (SIMPLIFIED)
   ================================== */

.layout-multiple-columns .scrollable > div > div .status.status-reply {
  border-color: transparent;
  position: relative;
}

.layout-multiple-columns .scrollable > div:not(:has(.status__thread)) .status.status-reply {
  border-color: var(--bird-border);
}

.layout-multiple-columns .scrollable > div > div.status__thread,
.layout-multiple-columns .scrollable > div > div.status__thread:has(.status__thread) > div.status__thread:not(.status__thread--last-item),
.layout-multiple-columns .scrollable > div > div:not([class]) > div.status__thread {
  border-bottom: 1px solid var(--bird-border);
}

@supports selector(:has(*)) {
  .layout-multiple-columns .scrollable > div > .status__thread .status.status-reply .status__avatar::before,
  .layout-multiple-columns .scrollable > div > .status__thread ~ .status__thread .status.status-reply .status__avatar::before {
    content: "";
    position: absolute;
    top: 24px;
    left: calc((var(--bird-avatar) / 2) + 15px);
    width: 2px;
    height: 100%;
    background-color: var(--bird-thread);
  }

  .layout-multiple-columns .scrollable > div > .status__thread.status__thread--first-item .status.status-reply .status__avatar::before {
    top: 60px;
  }
}

/* ==================================
   22. EMBEDS
   ================================== */

body.embed .entry .detailed-status {
  backface-visibility: hidden;
  background-color: rgb(0 0 0 / 0.35);
  border-radius: var(--bird-radius-md) !important;
  overflow: hidden;
}

/* ==================================
   23. MOBILE / TABLET
   ================================== */

@media (max-width: 1174px) {
  .layout-multiple-columns .detailed-status__action-bar .icon-button::after,
  .layout-multiple-columns .status__action-bar .icon-button::after,
  .layout-multiple-columns .detailed-status__action-bar-dropdown .icon-button::after {
    display: none;
  }

  .layout-multiple-columns .columns-area__panels__main {
    width: calc(100% - var(--bird-side-panel));
  }
}

@media (min-width: 889px) and (max-width: 1174px) {
  .layout-multiple-columns .columns-area__panels__main > div {
    border-right: 0;
  }

  .layout-multiple-columns .columns-area__panels {
    width: calc(100% - 1px);
  }

  .layout-multiple-columns .columns-area__panels__main > .tabs-bar__wrapper {
    border-right: 0;
  }
}

@media screen and (max-width: 889px) {
  .layout-multiple-columns .ui::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(48px + 56px);
    background-color: var(--bird-bg-75);
    z-index: 1;
  }

  @supports (backdrop-filter: blur(12px)) {
    .layout-multiple-columns .ui::after {
      backdrop-filter: blur(12px);
    }
  }

  .layout-multiple-columns .navigation-bar {
    z-index: 2;
  }

  .layout-multiple-columns .tabs-bar__wrapper {
    margin-right: 0;
    position: sticky;
    top: 55px;
    z-index: 2;
  }

  .layout-multiple-columns .columns-area__panels__main {
    order: 1;
    position: unset;
    width: 100%;
  }

  .layout-multiple-columns .columns-area__panels {
    flex-direction: column;
    justify-content: flex-start;
  }

  .layout-multiple-columns .columns-area__panels__main > div,
  .layout-multiple-columns .columns-area__panels__main > div.columns-area.columns-area--mobile {
    border: 0;
  }

  .layout-multiple-columns .ui__header {
    align-items: center;
    border-bottom: 0;
    box-sizing: border-box;
    display: flex;
    height: 56px;
    justify-content: space-between;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  .layout-multiple-columns .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
    background-color: var(--bird-bg);
    border-top: 1px solid var(--bird-border);
    bottom: 0;
    left: 0;
    height: 3.5rem;
    max-height: 16vh;
    width: 100vw;
  }

  .layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel {
    flex-direction: row;
    gap: 0;
    height: 100%;
    overflow-x: auto;
    padding: 0;
  }

  .layout-multiple-columns .columns-area__panels__pane--navigational .navigation-panel .flex-spacer {
    display: none;
  }

  .layout-multiple-columns .navigation-panel .column-link,
  .layout-multiple-columns .navigation-panel .list-panel,
  .layout-multiple-columns .navigation-panel hr,
  .layout-multiple-columns .navigation-panel .navigation-panel__logo {
    order: 99;
  }

  .layout-multiple-columns .navigation-panel .navigation-panel__legal,
  .layout-multiple-columns .navigation-panel .column-link {
    flex: 0 0 calc(100vw / 4);
    padding: 0;
  }

  .layout-multiple-columns .navigation-panel .navigation-panel__legal {
    order: 999;
    text-align: center;
  }

  .layout-multiple-columns .column-link {
    justify-content: center;
    margin-right: unset;
    padding: 0 var(--bird-gap-3);
    width: 38px;
  }

  .layout-multiple-columns .item-list .column-link {
    padding-bottom: 4px;
    padding-top: 4px;
    width: unset;
  }

  .layout-multiple-columns .column-link:hover,
  .layout-multiple-columns .column-link:focus {
    background-color: transparent !important;
  }

  .layout-multiple-columns .columns-area__panels__pane--navigational .column-link__icon {
    font-size: 24px;
  }

  .layout-multiple-columns .columns-area__panels__pane--navigational .column-link__icon.fa-fw {
    font-size: 22px;
  }

  .layout-multiple-columns .columns-area__panels__pane--navigational .column-link__icon.fa-home {
    font-size: 27px;
  }

  .layout-multiple-columns .columns-area__panels__pane--navigational .column-link__icon.fa-users,
  .layout-multiple-columns .columns-area__panels__pane--navigational .column-link__icon.fa-bell {
    font-size: 20px;
  }

  .layout-multiple-columns .columns-area__panels__pane--navigational .column-link__icon.fa-star,
  .layout-multiple-columns .columns-area__panels__pane--navigational .column-link__icon.fa-bookmark,
  .layout-multiple-columns .columns-area__panels__pane--navigational .column-link__icon.fa-bell {
    font-size: 18px;
    position: relative;
    top: 1px;
  }

  .layout-multiple-columns .account__header__bar .avatar .account__avatar {
    width: 106px !important;
    height: 106px !important;
  }

  .layout-multiple-columns .account__header__image {
    height: 157px;
  }

  .layout-multiple-columns .column > .scrollable {
    padding-bottom: 55px;
  }

  .layout-multiple-columns .compose-form {
    padding-bottom: calc(3.5rem + (var(--bird-gap-3) * 2));
  }

  .layout-multiple-columns .column-subheading ~ article {
    padding-top: calc(var(--bird-gap-3) / 2);
    padding-bottom: calc(var(--bird-gap-3) / 2);
  }

  .layout-multiple-columns .actions-modal ul li:not(:empty) a {
    color: var(--bird-fg-soft);
  }
}

@media (hover: none) {
  .layout-multiple-columns .notification__filter-bar button.active:hover,
  .layout-multiple-columns .account__section-headline a.active:hover {
    background-color: transparent;
  }
}

/* ==================================
   24. ACCESSIBILITY / ALT BADGE
   ================================== */

@supports selector(:has(*)) {
  .layout-multiple-columns .media-gallery__item-thumbnail:has(> img:not([alt]))::after,
  .layout-multiple-columns .video-player:has(> video:not([title]))::after,
  .layout-multiple-columns .media-gallery__gifv:has(> video:not([title]))::after {
    align-self: flex-end;
    background-color: var(--bird-bg-75);
    border-radius: var(--bird-radius-sm);
    bottom: 4px;
    color: var(--bird-fg-soft);
    content: "No alt";
    display: flex;
    font-size: 9px;
    font-weight: 500;
    height: 14px;
    justify-self: flex-end;
    line-height: 14px;
    opacity: 1;
    padding: 2px 5px;
    position: absolute;
    right: 4px;
    text-transform: uppercase;
    z-index: 3;
  }

  .layout-multiple-columns .media-gallery__item-thumbnail:has(> img:not([alt])):hover::after,
  .layout-multiple-columns .video-player:has(> video:not([title])):hover::after,
  .layout-multiple-columns .media-gallery__gifv:has(> video:not([title])):hover::after,
  .layout-multiple-columns .media-gallery__item-thumbnail:has(> img:not([alt])):focus::after,
  .layout-multiple-columns .video-player:has(> video:not([title])):focus::after,
  .layout-multiple-columns .media-gallery__gifv:has(> video:not([title])):focus::after {
    background-color: var(--bird-red);
  }

  .layout-multiple-columns .notification .status__content:has(.status__content__text:empty) + .attachment-list {
    margin-top: 0;
  }

  .layout-multiple-columns .status .status__content:has(.status__content__text:empty) + .audio-player,
  .layout-multiple-columns .status .status__content:has(.status__content__text:empty) + .video-player,
  .layout-multiple-columns .status .status__content:has(.status__content__text:empty) + .media-gallery,
  .layout-multiple-columns .detailed-status .status__content:has(.status__content__text:empty) + .audio-player,
  .layout-multiple-columns .detailed-status .status__content:has(.status__content__text:empty) + .video-player,
  .layout-multiple-columns .detailed-status .status__content:has(.status__content__text:empty) + .media-gallery {
    margin-top: calc(var(--bird-gap-3) / 2);
  }
}

/* ==================================
   25. MOTION / PERFORMANCE
   ================================== */

.layout-multiple-columns .poll__option input[type="text"],
.layout-multiple-columns .status__content,
.layout-multiple-columns .icon-button,
.layout-multiple-columns .column-link,
.layout-multiple-columns .button,
.layout-multiple-columns .account__section-headline a,
.layout-multiple-columns .notification__filter-bar button {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .layout-multiple-columns *,
  .layout-multiple-columns *::before,
  .layout-multiple-columns *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==================================
   26. MODERN PRESET OVERRIDES
   ================================== */

:root {
  --bird-bg: #0f1115;
  --bird-bg-soft: #151923;
  --bird-bg-mud: #1a2030;
  --bird-bg-elevated: #171b26;

  --bird-fg: #f5f7fb;
  --bird-fg-soft: #eef2ff;
  --bird-dim: #98a2b3;
  --bird-dim-2: #b0bacb;

  --bird-border: rgba(255, 255, 255, 0.08);
  --bird-thread: rgba(255, 255, 255, 0.12);

  --bird-accent: #7c8cff;
  --bird-accent-strong: #6a7cff;

  --bird-light-shade: rgba(255, 255, 255, 0.03);
  --bird-focusable: rgba(124, 140, 255, 0.12);
  --bird-action-hover: rgba(124, 140, 255, 0.14);
  --bird-bg-75: rgba(15, 17, 21, 0.72);

  --bird-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.22);
  --bird-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.18);

  --bird-radius-sm: 8px;
  --bird-radius-md: 14px;
  --bird-radius-lg: 20px;

  --bird-gap-2: 10px;
  --bird-gap-3: 14px;
  --bird-gap-4: 18px;
  --bird-gap-5: 24px;

  --bird-avatar: 44px;
  --bird-avatar-sm: 30px;
}

.layout-multiple-columns .ui__header,
.layout-multiple-columns .tabs-bar__wrapper,
.layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper {
  background: rgba(15, 17, 21, 0.66);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@supports (backdrop-filter: blur(18px)) {
  .layout-multiple-columns .ui__header,
  .layout-multiple-columns .tabs-bar__wrapper,
  .layout-multiple-columns .columns-area__panels__main > div.tabs-bar__wrapper {
    backdrop-filter: blur(18px) saturate(140%);
  }
}

.layout-multiple-columns .columns-area__panels__main > div,
.layout-multiple-columns .column {
  border-left-color: transparent;
  border-right-color: transparent;
}

.layout-multiple-columns .status,
.layout-multiple-columns .conversation,
.layout-multiple-columns .notification {
  box-shadow: inset 0 -1px 0 var(--bird-border);
}

.layout-multiple-columns article:hover,
.layout-multiple-columns article:focus {
  background-color: var(--bird-light-shade);
}

.layout-multiple-columns a.status-card,
.layout-multiple-columns a.status-card.compact {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow: var(--bird-shadow-card);
}

.layout-multiple-columns .media-gallery__item-thumbnail img,
.layout-multiple-columns .video-player video,
.layout-multiple-columns .audio-player,
.layout-multiple-columns .media-gallery__preview {
  border-radius: 16px;
}

.layout-multiple-columns .account__section-headline,
.layout-multiple-columns .notification__filter-bar {
  padding: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  width: fit-content;
  margin: 8px auto 12px;
}

.layout-multiple-columns .account__section-headline a,
.layout-multiple-columns .account__section-headline button,
.layout-multiple-columns .notification__filter-bar a,
.layout-multiple-columns .notification__filter-bar button {
  border-radius: 9999px;
  padding: 10px 14px;
}

.layout-multiple-columns .account__section-headline a.active,
.layout-multiple-columns .account__section-headline button.active,
.layout-multiple-columns .notification__filter-bar a.active,
.layout-multiple-columns .notification__filter-bar button.active {
  background: rgba(124, 140, 255, 0.14);
}

.layout-multiple-columns .account__section-headline a.active::after,
.layout-multiple-columns .account__section-headline button.active::after,
.layout-multiple-columns .notification__filter-bar a.active::after,
.layout-multiple-columns .notification__filter-bar button.active::after {
  display: none;
}

.layout-multiple-columns .icon-button {
  transition:
    color 160ms ease,
    transform 160ms ease,
    opacity 160ms ease,
    background-color 160ms ease;
}

.layout-multiple-columns .icon-button:hover {
  transform: translateY(-1px);
}

.layout-multiple-columns .status__action-bar .icon-button::after,
.layout-multiple-columns .detailed-status__action-bar .icon-button::after {
  background-color: rgba(255, 255, 255, 0.04);
  height: 34px;
  width: 34px;
}

.layout-multiple-columns .status__info .display-name strong.display-name__html {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.layout-multiple-columns .status__relative-time,
.layout-multiple-columns .display-name__account,
.layout-multiple-columns .status__visibility-icon {
  font-size: 12.5px;
}