/* Instagram-inspired Mastodon 4.7 theme
   Applied via Admin → Server settings → Appearance → Custom CSS */

:root {
  --ig-bg: #fafafa;
  --ig-elevated: #ffffff;
  --ig-text: #262626;
  --ig-text-secondary: #737373;
  --ig-muted: #8e8e8e;
  --ig-border: #dbdbdb;
  --ig-hover: #f2f2f2;
  --ig-accent: #0095f6;
  --ig-accent-hover: #1877f2;
  --ig-danger: #ed4956;
  --ig-link: #00376b;
  --ig-nav-width: 244px;
  --ig-feed-pad-x: clamp(16px, 3.2vw, 40px);
  --ig-feed-pad-y: clamp(16px, 2.4vh, 32px);
  --ig-feed-width: min(840px, calc(100vw - var(--ig-nav-width) - (var(--ig-feed-pad-x) * 2)));
  --ig-radius: 12px;
  --ig-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  --ig-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ig-bg: #000000;
    --ig-elevated: #000000;
    --ig-text: #f5f5f5;
    --ig-text-secondary: #a8a8a8;
    --ig-muted: #a8a8a8;
    --ig-border: #262626;
    --ig-hover: #121212;
    --ig-link: #e0f1ff;
    --ig-shadow: none;
  }
}

html[data-color-scheme="light"],
[data-color-scheme="light"] {
  --ig-bg: #fafafa;
  --ig-elevated: #ffffff;
  --ig-text: #262626;
  --ig-text-secondary: #737373;
  --ig-muted: #8e8e8e;
  --ig-border: #dbdbdb;
  --ig-hover: #f2f2f2;
  --ig-link: #00376b;
  --ig-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html[data-color-scheme="dark"],
[data-color-scheme="dark"] {
  --ig-bg: #000000;
  --ig-elevated: #000000;
  --ig-text: #f5f5f5;
  --ig-text-secondary: #a8a8a8;
  --ig-muted: #a8a8a8;
  --ig-border: #262626;
  --ig-hover: #121212;
  --ig-link: #e0f1ff;
  --ig-shadow: none;
}

html,
body,
.app-body,
.ui,
.columns-area,
.columns-area__panels,
.column,
.scrollable,
.getting-started,
.drawer {
  background: var(--ig-bg) !important;
  color: var(--ig-text);
  font-family: var(--ig-font) !important;
}

body,
.app-body {
  letter-spacing: 0.01em;
}

/* ─── App shell: IG three-zone layout ─── */

.columns-area__panels {
  justify-content: flex-start !important;
  gap: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.columns-area__panels__pane--navigational {
  min-width: var(--ig-nav-width) !important;
  max-width: var(--ig-nav-width) !important;
  flex: 0 0 var(--ig-nav-width) !important;
}

.columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
  border-right: 1px solid var(--ig-border);
  background: var(--ig-elevated) !important;
}

.columns-area__panels__main {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  background: var(--ig-bg) !important;
  padding: var(--ig-feed-pad-y) var(--ig-feed-pad-x) 64px !important;
  box-sizing: border-box !important;
}

.columns-area__panels__pane--compositional,
.columns-area__panels__pane--start {
  background: var(--ig-bg) !important;
}

/* ─── Left navigation ─── */

.navigation-panel {
  background: var(--ig-elevated) !important;
  padding: 12px 12px 24px !important;
}

.navigation-panel__logo {
  padding: 16px 12px 28px !important;
}

.navigation-panel__logo img,
.navigation-panel__logo svg,
.logo,
.logo--wordmark svg {
  max-height: 32px;
}

.column-link,
.navigation-panel a.column-link,
.column-link--transparent {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 2px 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--ig-text) !important;
  background: transparent !important;
  border: 0 !important;
}

.column-link:hover,
.column-link--transparent:hover {
  background: var(--ig-hover) !important;
}

.column-link--active,
.column-link.active {
  font-weight: 700 !important;
}

.navigation-panel__compose-button,
.navigation-panel .button,
.compose-form__submit .button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

.navigation-panel__compose-button,
.navigation-panel__compose-button .button,
.button.button--block {
  background: var(--ig-text) !important;
  color: var(--ig-bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.navigation-panel__compose-button:hover,
.navigation-panel__compose-button .button:hover,
.button.button--block:hover {
  opacity: 0.85;
}

.navigation-panel__legal,
.navigation-panel__banner {
  display: none !important;
}

/* Mastodon hides these in the drawer; Instagram desktop needs them */
.navigation-panel__compose-button,
.navigation-panel .navigation-bar {
  display: flex !important;
}

/* ─── Column headers ─── */

.column-header,
.column-header__wrapper,
.column-header__back-button,
.column-header__button {
  background: var(--ig-elevated) !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border) !important;
  box-shadow: none !important;
}

.column-header {
  border-bottom: 1px solid var(--ig-border) !important;
  height: 60px;
}

.column-header__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.column-header__collapsible {
  background: var(--ig-elevated) !important;
}

/* ─── Feed posts ─── */

.item-list,
.status-list,
.scrollable > div {
  background: var(--ig-bg);
}

.status,
.status__wrapper,
.focusable.status {
  background: var(--ig-elevated) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ig-border) !important;
  padding: 12px 0 8px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.status__prepend {
  color: var(--ig-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 16px 8px !important;
}

.status__info {
  padding: 0 16px 10px !important;
  align-items: center;
}

.status__display-name,
.display-name__html,
.display-name__account {
  color: var(--ig-text) !important;
}

.display-name__html {
  font-weight: 600 !important;
  font-size: 14px !important;
}

.display-name__account {
  color: var(--ig-muted) !important;
  font-size: 12px !important;
}

.status__avatar,
.account__avatar {
  border-radius: 50% !important;
}

.status__avatar {
  margin-right: 12px;
}

.status__avatar .account__avatar {
  box-shadow: 0 0 0 2px var(--ig-elevated), 0 0 0 3.5px #e1306c;
}

.status__relative-time,
.status__visibility-icon {
  color: var(--ig-muted) !important;
  font-size: 12px !important;
}

.status__content {
  padding: 0 16px 10px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--ig-text) !important;
}

.status__content a,
.status__content .status-link,
.status__content .mention,
.status__content .hashtag {
  color: var(--ig-link) !important;
}

.status__content p {
  margin-bottom: 0.4em;
}

/* ─── Media: full-bleed, IG feed crop ─── */

.media-gallery,
.audio-player,
.video-player,
.status-card,
.status__card {
  margin: 0 0 8px !important;
  border-radius: 0 !important;
  overflow: hidden;
  border: 0 !important;
}

.media-gallery {
  background: #000 !important;
}

.media-gallery__item,
.media-gallery__item-thumbnail,
.media-gallery__item-thumbnail img,
.media-gallery__gifv video,
.video-player video {
  border-radius: 0 !important;
}

.media-gallery,
.audio-player,
.video-player,
.media-gallery__item,
.media-gallery__item-thumbnail,
.media-gallery__item-thumbnail img,
.media-gallery__gifv video,
.video-player video {
  max-width: 100% !important;
}

.media-gallery--layout-1 {
  min-height: min(320px, 70vw);
}

.media-gallery__item img,
.media-gallery__item-thumbnail img {
  object-fit: cover !important;
}

.status-card,
.status__card {
  margin: 0 16px 10px !important;
  border: 1px solid var(--ig-border) !important;
  border-radius: var(--ig-radius) !important;
  background: var(--ig-elevated) !important;
}

/* ─── Action bar: like / comment / boost / bookmark ─── */

.status__action-bar {
  padding: 6px 10px 4px !important;
  justify-content: flex-start !important;
  gap: 4px;
}

.status__action-bar .icon-button,
.status__action-bar__button-wrapper .icon-button {
  color: var(--ig-text) !important;
  background: transparent !important;
  width: 40px !important;
  height: 40px !important;
}

.status__action-bar .icon-button:hover {
  background: transparent !important;
  transform: scale(1.08);
}

.status__action-bar .icon-button.active,
.status__action-bar .icon-button.star-icon.active,
.status__action-bar .star-icon.active {
  color: var(--ig-danger) !important;
}

.status__action-bar .icon-button.active svg {
  fill: currentColor;
}

/* ─── Profile ─── */

.account-header,
.account__header,
.account__header__bar,
.account__header__tabs,
.account__header__tabs__buttons,
.account__header__extra {
  background: var(--ig-elevated) !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border) !important;
}

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

.account__header .account__avatar,
.account__header__avatar .account__avatar {
  box-shadow: 0 0 0 3px var(--ig-elevated), 0 0 0 5px #e1306c;
}

.account__section-headline,
.account__section-headline a {
  background: var(--ig-elevated) !important;
  color: var(--ig-muted) !important;
  border-color: var(--ig-border) !important;
}

.account__section-headline a.active {
  color: var(--ig-text) !important;
  border-bottom: 1px solid var(--ig-text) !important;
}

.account-gallery__container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3px !important;
  padding: 3px 0 80px !important;
  background: var(--ig-bg) !important;
}

.account-gallery__container > * {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.account-card {
  background: var(--ig-elevated) !important;
  border: 1px solid var(--ig-border) !important;
  border-radius: var(--ig-radius) !important;
}

/* ─── Compose ─── */

.compose-form,
.compose-form__highlightable,
.compose-panel,
.autosuggest-textarea__textarea,
.spoiler-input__input,
.search__input {
  background: var(--ig-elevated) !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border) !important;
  font-family: var(--ig-font) !important;
}

.compose-form__highlightable {
  border: 1px solid var(--ig-border) !important;
  border-radius: var(--ig-radius) !important;
  box-shadow: none !important;
}

.compose-form__submit .button {
  background: var(--ig-accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.compose-form__submit .button:hover {
  background: var(--ig-accent-hover) !important;
}

.search__input {
  border-radius: 8px !important;
  background: var(--ig-hover) !important;
  border: 0 !important;
}

/* ─── Notifications / explore ─── */

.notification,
.notification__message,
.empty-column-indicator,
.error-column,
.regeneration-indicator,
.explore__search-header,
.trends,
.conversation {
  background: var(--ig-elevated) !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border) !important;
}

.empty-column-indicator,
.error-column {
  color: var(--ig-muted) !important;
}

/* ─── Buttons & dropdowns ─── */

.button {
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.button-tertiary,
.button.button-tertiary {
  background: var(--ig-hover) !important;
  color: var(--ig-text) !important;
  border: 0 !important;
}

.dropdown-menu,
.dropdown-menu__item a,
.dropdown-menu__container {
  background: var(--ig-elevated) !important;
  color: var(--ig-text) !important;
  border-color: var(--ig-border) !important;
  border-radius: 12px !important;
}

.modal-root__modal,
.report-modal,
.boost-modal,
.confirmation-modal,
.actions-modal,
.mute-modal,
.block-modal,
.focal-point-modal,
.closed-registrations-modal {
  background: var(--ig-elevated) !important;
  color: var(--ig-text) !important;
  border-radius: 16px !important;
  border: 1px solid var(--ig-border);
}

/* ─── Public / login ─── */

.container-alt,
.form-container,
.simple_form,
.public-layout,
.public-layout .container,
.about-mastodon,
.explore-public {
  background: var(--ig-bg) !important;
  color: var(--ig-text) !important;
  font-family: var(--ig-font) !important;
}

.logo-container {
  margin-bottom: 24px;
}

.form-container {
  max-width: 350px;
  margin: 40px auto;
  background: var(--ig-elevated) !important;
  border: 1px solid var(--ig-border);
  border-radius: 4px;
  padding: 32px 28px 20px !important;
}

.simple_form input[type="email"],
.simple_form input[type="password"],
.simple_form input[type="text"] {
  background: var(--ig-bg) !important;
  color: var(--ig-text) !important;
  border: 1px solid var(--ig-border) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
}

.simple_form .btn,
.simple_form button,
.simple_form input[type="submit"] {
  background: var(--ig-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  width: 100%;
  padding: 8px 16px !important;
}

.form-footer,
.form-footer a {
  color: var(--ig-text-secondary) !important;
}

/* Native Mastodon bottom bar — keep it Instagram-like, do NOT move the top header */
.ui__navigation-bar {
  background: var(--ig-elevated) !important;
  border-top: 1px solid var(--ig-border) !important;
  z-index: 300 !important;
}

.ui__navigation-bar__item {
  color: var(--ig-text) !important;
}

.ui__navigation-bar__item.active {
  color: var(--ig-text) !important;
}

.tabs-bar__wrapper {
  position: sticky !important;
  top: 0 !important;
  bottom: auto !important;
  background: var(--ig-elevated) !important;
  border-bottom: 1px solid var(--ig-border);
  z-index: 80 !important;
}

/* Desktop: pin the drawer as a left Instagram sidebar */
@media (min-width: 760px) {
  .ui__navigation-bar {
    display: none !important;
  }

  .columns-area__panels {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }

  .columns-area__panels__pane--navigational {
    pointer-events: auto !important;
    position: relative !important;
    inset: auto !important;
    width: var(--ig-nav-width) !important;
    min-width: var(--ig-nav-width) !important;
    max-width: var(--ig-nav-width) !important;
    height: auto !important;
    flex: 0 0 var(--ig-nav-width) !important;
    order: -1;
    background: var(--ig-elevated) !important;
  }

  .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
    pointer-events: auto !important;
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;
    transform: none !important;
    width: var(--ig-nav-width) !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--ig-elevated) !important;
    border-right: 1px solid var(--ig-border);
  }

  .columns-area__panels__pane--navigational .navigation-panel,
  .columns-area__panels__pane--navigational .navigation-panel__logo {
    display: flex !important;
  }

  .columns-area__panels__main,
  .columns-area--mobile {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: var(--ig-feed-pad-y) var(--ig-feed-pad-x) 64px !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1400px) {
  :root {
    --ig-feed-pad-x: 40px;
    --ig-feed-pad-y: 28px;
    --ig-feed-width: min(920px, calc(100vw - var(--ig-nav-width) - 80px));
  }
}

@media (max-width: 759px) {
  :root {
    --ig-nav-width: 0px;
    --ig-feed-pad-x: 16px;
    --ig-feed-pad-y: 12px;
    --ig-feed-width: calc(100vw - 32px);
  }

  .columns-area,
  .columns-area--mobile,
  .columns-area__panels {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    max-width: 100% !important;
  }

  .columns-area__panels__main {
    max-width: 100% !important;
    width: 100% !important;
    padding: var(--ig-feed-pad-y) var(--ig-feed-pad-x) calc(80px + env(safe-area-inset-bottom)) !important;
  }

  .status__avatar .account__avatar {
    box-shadow: 0 0 0 2px var(--ig-elevated), 0 0 0 3px #e1306c;
  }

  .form-container {
    border: 0;
    margin: 16px auto;
  }
}

/* ─── Reduce visual noise ─── */

.status__line,
.status__line--first,
.status__line--full {
  display: none !important;
}

.detailed-status {
  background: var(--ig-elevated) !important;
  border-bottom: 1px solid var(--ig-border) !important;
}

.picture-in-picture,
.picture-in-picture__header,
.picture-in-picture__footer {
  background: var(--ig-elevated) !important;
  border-color: var(--ig-border) !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--ig-border);
  border-radius: 8px;
}

:focus-visible {
  outline: 2px solid var(--ig-accent) !important;
  outline-offset: 2px;
}

/* ─── Logged-in home UX ─── */

.ui {
  min-height: 100vh;
}

.columns-area__panels {
  min-height: 100vh;
}

.columns-area__panels__main .column {
  width: 100% !important;
  max-width: var(--ig-feed-width) !important;
  margin: 0 auto !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

.column > .scrollable {
  padding-bottom: 88px !important;
  box-sizing: border-box !important;
}

.column-header {
  position: sticky !important;
  top: 0;
  z-index: 80;
  backdrop-filter: saturate(180%) blur(16px);
}

.column-header__collapsible,
.column-header__advanced-buttons {
  display: none !important;
}

.column-header__title {
  padding-left: 4px;
}

/* Slim IG-like nav: keep Home, Explore, Notifications, New post, Profile */
.navigation-panel a.column-link[href="/public"],
.navigation-panel a.column-link[href="/public/local"],
.navigation-panel a.column-link[href="/lists"],
.navigation-panel a.column-link[href="/bookmarks"],
.navigation-panel a.column-link[href="/favourites"],
.navigation-panel a.column-link[href="/collections"],
.navigation-panel a.column-link[href="/followed_tags"],
.navigation-panel a.column-link[href="/about"],
.navigation-panel a.column-link[href="/settings/preferences"],
.navigation-panel a.column-link[href="/follow_requests"] {
  display: none !important;
}

.navigation-panel .search {
  margin: 0 8px 16px !important;
}

.navigation-bar {
  margin-top: auto;
  padding: 12px 8px !important;
  border-top: 1px solid var(--ig-border);
}

.navigation-bar .account,
.navigation-bar .account__display-name {
  color: var(--ig-text) !important;
}

/* Compose as compact "new post" card, not a second timeline */
.compose-panel {
  padding: 16px 8px 24px !important;
}

.compose-panel .search {
  margin-bottom: 16px;
}

.compose-form__highlightable {
  background: var(--ig-elevated) !important;
}

.compose-form .autosuggest-textarea__textarea,
.autosuggest-textarea__textarea {
  min-height: 72px !important;
  font-size: 15px !important;
}

.compose-form__warning,
.follow-prompt {
  display: none !important;
}

/* Empty home: Instagram-style welcome instead of a blank column */
.empty-column-indicator {
  min-height: calc(100vh - 140px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 48px 28px !important;
  background: var(--ig-bg) !important;
  color: var(--ig-text) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.empty-column-indicator__arrow {
  display: none !important;
}

.empty-column-indicator a {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--ig-accent) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.empty-column-indicator a:hover {
  background: var(--ig-accent-hover) !important;
}

/* Suggested accounts as IG story/suggestion row */
.inline-follow-suggestions {
  background: var(--ig-elevated) !important;
  border-bottom: 1px solid var(--ig-border) !important;
  padding: 12px 0 16px !important;
  margin: 0 !important;
}

.inline-follow-suggestions__header,
.inline-follow-suggestions__title {
  color: var(--ig-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
}

.inline-follow-suggestions__body__scrollable {
  gap: 12px;
  padding: 12px 16px 0 !important;
}

.inline-follow-suggestions__body__scrollable__card {
  background: var(--ig-elevated) !important;
  border: 1px solid var(--ig-border) !important;
  border-radius: 12px !important;
  min-width: 148px;
  padding: 12px 8px !important;
}

.explore-suggestions-card {
  background: var(--ig-elevated) !important;
  border: 1px solid var(--ig-border) !important;
  border-radius: 12px !important;
  color: var(--ig-text) !important;
}

.explore-suggestions-card__avatar .account__avatar {
  box-shadow: 0 0 0 2px var(--ig-elevated), 0 0 0 3.5px #e1306c;
}

/* Feed rhythm: more air between posts, like IG */
.status,
.status__wrapper,
.focusable.status {
  margin-bottom: 8px !important;
  padding-top: 14px !important;
  padding-bottom: 10px !important;
}

.status__content {
  order: 3;
}

.status__action-bar {
  padding-left: 8px !important;
}

/* Hide Mastodon onboarding chrome that fights the feed */
.onboarding__profile,
.navigation-panel__banner,
.critical-update-banner,
.announcements {
  display: none !important;
}

@media (max-width: 1174px) {
  .columns-area__panels__main .column {
    width: 100% !important;
    max-width: var(--ig-feed-width) !important;
  }

  .empty-column-indicator {
    min-height: calc(100vh - 180px) !important;
    font-size: 20px !important;
  }

  .inline-follow-suggestions__body__scrollable__card {
    min-width: 132px;
  }
}

/* ─── Instagram home (advanced / 3-column UI) ───
   Keep the left sidebar. Collapse the middle compose/settings
   column. Center the home feed. Site links go to a global footer. */

@media (min-width: 1175px) {
  .columns-area__panels {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-bottom: 48px !important;
    gap: 0 !important;
  }

  .columns-area__panels__pane--navigational {
    order: 0 !important;
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
  }

  /* Middle column (search + compose + instance links) is not an IG home column */
  .columns-area__panels__pane--compositional,
  .drawer {
    order: 2 !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    border: 0 !important;
  }

  .columns-area__panels__pane--compositional .columns-area__panels__pane__inner,
  .drawer .drawer__inner,
  .drawer .drawer__inner__mastodon {
    position: static !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    transform: none !important;
    inset: auto !important;
  }

  .compose-panel,
  .compose-panel .search,
  .compose-panel .compose-form,
  .columns-area__panels__pane--compositional .navigation-bar,
  .getting-started,
  .getting-started__wrapper,
  .getting-started__trends,
  .server-banner,
  .drawer .search,
  .drawer .compose-form {
    display: none !important;
  }

  .columns-area__panels__main,
  .columns-area {
    order: 1 !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    background: var(--ig-bg) !important;
    padding: var(--ig-feed-pad-y) var(--ig-feed-pad-x) 64px !important;
    box-sizing: border-box !important;
  }

  .columns-area__panels__main .columns-area,
  .columns-area__panels__main .columns-area--mobile {
    width: 100% !important;
    max-width: var(--ig-feed-width) !important;
    margin: 0 auto !important;
  }

  .columns-area__panels__main .column,
  .layout-multiple-columns .column {
    width: 100% !important;
    max-width: var(--ig-feed-width) !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

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

  .columns-area__panels__main .scrollable {
    background: var(--ig-bg) !important;
  }

  /* Feed posts as Instagram cards */
  .columns-area__panels__main .status,
  .columns-area__panels__main .status__wrapper,
  .columns-area__panels__main .focusable.status {
    background: var(--ig-elevated) !important;
    border: 1px solid var(--ig-border) !important;
    border-radius: var(--ig-radius) !important;
    margin: 0 0 14px !important;
    overflow: hidden;
  }

  .columns-area__panels__main .media-gallery {
    border-radius: 0 !important;
  }

  /* Global footer: instance + Mastodon links (was the middle-column footer) */
  .link-footer,
  footer[class*="link_footer"],
  [class*="link_footer__wrapper"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px 14px !important;
    position: fixed !important;
    left: var(--ig-nav-width) !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 250 !important;
    pointer-events: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 20px calc(8px + env(safe-area-inset-bottom)) !important;
    background: var(--ig-elevated) !important;
    border-top: 1px solid var(--ig-border) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: var(--ig-muted) !important;
  }

  .link-footer p,
  footer[class*="link_footer"] section,
  [class*="link_footer__wrapper"] section {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px 12px !important;
    margin: 0 !important;
  }

  .link-footer h2,
  [class*="link_footer__heading"] {
    display: none !important;
  }

  .link-footer ul,
  [class*="link_footer__list"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px 14px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .link-footer a,
  footer[class*="link_footer"] a,
  [class*="link_footer__wrapper"] a,
  [class*="link_footer__version"] {
    color: var(--ig-muted) !important;
    text-decoration: none !important;
    font-weight: 400 !important;
  }

  .link-footer a:hover,
  footer[class*="link_footer"] a:hover {
    color: var(--ig-text) !important;
    text-decoration: underline !important;
  }
}

@media (max-width: 1174px) {
  .link-footer,
  footer[class*="link_footer"],
  [class*="link_footer__wrapper"] {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 12px !important;
    padding: 12px 16px 20px !important;
    font-size: 12px !important;
    color: var(--ig-muted) !important;
    background: var(--ig-bg) !important;
    border-top: 1px solid var(--ig-border) !important;
  }

  .link-footer a,
  footer[class*="link_footer"] a {
    color: var(--ig-muted) !important;
  }
}