/* 🎨 Colors */

:root {
    color-scheme: light dark;

    --color-bg: #f5f2ef;
    --gradient-bg: linear-gradient(90deg, var(--color-bg), var(--color-bg));
    --color-fg: #2a2d37;
    --color-fg-muted: #948c84;
    --color-secondary-bg: #f2eae4;
    --color-secondary-separator: #ede3db;

    --color-content-bg: #ffffff;
    --color-content-fg: #444a5a;
    --color-content-fg-bold: #000000;
    --color-content-fg-muted: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 40%);
    --color-content-secondary-bg: #f9f6f4;
    --color-content-secondary-separator: rgba(237, 227, 219, 0.4);
    --color-content-bg-focus: #fffcfa;

    --color-accent: #c7a779;
    --color-accent-focus: #e3c396;
    --color-accent-lines: rgba(247, 105, 2, 0.12);
    --color-accent-bg: #f6eddd;
    --color-accent-fg: #ffffff;

    --color-lines: #e1dde4;
    --color-lines-translucent: rgba(0, 0, 0, .15);

    --color-confirm: #79bd9a;
    --color-confirm-bg: rgba(121, 189, 154, 0.3);
    --color-confirm-fg: #4E8A6B;
    
    --color-reject: #df405a;
    --color-reject-bg: rgba(223, 64, 90, 0.3);
}



/* 최초문단중, 선택범위 색 바꾸기 */
::selection {
    color: var(--color-accent-fg);
    background-color: var(--color-accent);
}



/* 🖱️ Scrollbars 
맨마지막에 프사동글이는 지움*/
:root:has(.app-body) *::-webkit-scrollbar-track {
    background-color: var(--color-bg);
    padding: 2px;
}
:root:has(.app-body) *::-webkit-scrollbar-thumb {
    background-color: var(--color-accent);
    border-radius: 8px;
    opacity: .4;
    box-shadow: none;
}
:root:has(.app-body) *::-webkit-scrollbar-track:hover {
    background-color: var(--color-bg);
}
:root:has(.app-body) *::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent);
    opacity: .7;
}
@media screen and (max-width:1174px) {
    :root:has(.app-body) *::-webkit-scrollbar {
        display: none;
    }
}
:root,
* {
    scrollbar-color: var(--color-accent) var(--color-bg);
    scrollbar-width: thin;
}

.app-body {
    --dropdown-shadow:
        0 20px 25px -5px rgba(0, 0, 0, .15),
        0 8px 10px -6px rgba(0, 0, 0, .15);
    --safe-area-bottom: env(safe-area-inset-bottom);
}
@media (display-mode: standalone) {
    .app-body {
        --safe-area-bottom: max(env(safe-area-inset-bottom), 30px);
    }
}

.app-body .loading-bar {
    background-color: var(--color-accent);
}
.app-body .circular-progress {
    color: var(--color-accent);
}

.app-body .redirect__logo {
    color: var(--color-accent);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.app-body .redirect__logo img {
    opacity: 0;
}
.app-body .redirect__message a {
    color: var(--color-accent);
}

.app-body .getting-started,
.app-body .regeneration-indicator,
.app-body .audio-player,
.app-body .compose-form .spoiler-input__input,
.app-body .compose-form__autosuggest-wrapper,
.app-body .compose-form__poll-wrapper select,
.app-body .poll__option input[type=text],
.app-body .report-dialog-modal__textarea,
.app-body .search__input,
.app-body .setting-text,
.app-body .compose-form .compose-form__buttons-wrapper,
.app-body .about__section__body {
    border: 0;
}
.app-body .column-inline-form,
.app-body .column>.scrollable,
.app-body .getting-started,
.app-body .regeneration-indicator {
    background: transparent;
}

:root {
    --background-filter: none;
}





/* Keyframes 뭔지모르겠는데 일단넣고봄 */
@keyframes bounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.6);
    }
    75% {
        transform: scale(.8);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes bounce-sml {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes bounce-vertical {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30%);
    }
    75% {
        transform: translateY(20%);
    }
    100% {
        transform: translate(0);
    }
}
@keyframes launch {
    0% {
        transform: translate(0);
        opacity: 0;
    }
    5% {
        transform: translate(0);
        opacity: 1;
    }
    50% {
        transform: translate(200%, -200%);
        opacity: 0;
    }
    80% {
        transform: translate(200%, -200%);
        opacity: 0;
    }
    85% {
        transform: translate(-20%, 20%);
        opacity: 0;
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}
@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(-10%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadein-short {
    from {
        transform: translate(0, -10px);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}
@keyframes slowin {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes rotate-bounce {
    0% {
        transform: rotate(0) scale(1);
    }
    60% {
        transform: rotate(80deg) scale(1.2);
    }
    100% {
        transform: rotate(60deg) scale(1.1);
    }
}
@keyframes bell-ring {
    0% {
        transform: rotate(0);
    }
    40% {
        transform: rotate(15deg);
    }
    70% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0);
    }
}




/* *️⃣ Icons
   -------- */
/* Bookmark */
.app-body .icon-bookmark {
    color: var(--color-accent);
}
.app-body .detailed-status__button .icon-bookmark {
    color: var(--color-accent);
}
.app-body .icon-button.active .icon-bookmark {
    color: var(--color-accent);
}
/* Favorite */
.app-body .icon-star {
    color: var(--color-accent);
}
.app-body button.icon-button.active .icon-star,
.app-body .notification__message .icon-star,
.app-body .notification-group--favourite .icon-star {
    color: var(--color-accent);
}
.app-body .detailed-status__link .icon-star {
    color: var(--color-accent);
}
.app-body .media-modal__overlay .icon-star {
    color: var(--color-accent);
}
/* Boost */
.app-body .icon-retweet {
    color: var(--color-accent);
}
.app-body button.icon-button.active .icon-retweet,
.app-body .detailed-status__button button.icon-button.active:hover .icon-retweet {
    color: #8a6e46;
}
.app-body .status__prepend__icon .icon-retweet,
.app-body .notification-group--reblog .icon-repeat {
    color: var(--color-accent);
}
.app-body .notification__message .icon-retweet {
    color: var(--color-accent);
}
.app-body .detailed-status__link .icon-retweet {
    color: var(--color-accent);
}
/* Reply */
.app-body .icon-reply,
.app-body .icon-reply-all {
    color: var(--color-accent);
}
.app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) {
    color: var(--color-accent);
}
.app-body .media-modal__overlay :is(.icon-reply, .icon-reply-all) {
    color: var(--color-accent);
}
.app-body .status__prepend__icon .icon-reply,
.app-body .notification-ungrouped__header__icon .icon-reply {
    color: var(--color-accent);
}
/* Ellipsis */
.app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) {
    color: var(--color-accent);
}
.app-body .detailed-status__action-bar .icon-ellipsis-h {
    color: var(--color-accent);
}
.app-body :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close {
    color: var(--color-accent);
}
/* Poll icon */
.app-body .icon-tasks,
.app-body .icon-bar-chart-4-bars {
    color: #ffffff;
}
.app-body .notification__message .icon-tasks,
.app-body .notification-ungrouped .icon-bar-chart-4-bars {
    color: var(--color-accent);
}
.app-body .compose-form .icon-tasks {
    color: var(--color-accent);
}
/* Post icon */
.app-body .icon-quote-right {
    color: var(--color-accent);
}

/* Navigation panel icons */
/* Home icon */
.app-body .icon-home {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-home {
    color: #8a6e46;
}
.layout-multiple-columns .column-link .icon-home {
    color: var(--color-accent);
}
.app-body .notification__message .icon-home,
.app-body .notification-ungrouped .icon-notifications-active {
    color: var(--color-accent);
}
/* Globe icon */
.app-body .column-link .icon-globe,
.app-body .column-header__icon.icon-globe {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-globe {
    color: #8a6e46;
}
.layout-multiple-columns .column-link .icon-globe {
    color: var(--color-accent);
}
/* Hashtag icon */
.app-body .icon-hashtag {
    color: var(--color-accent);
}
/* Explore icon */
.app-body .icon-explore,
.app-body .column-link .icon-explore {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-explore {
    color: #8a6e46;
}
.layout-multiple-columns .column-link .icon-explore {
    color: var(--color-accent);
}
/* Search icon */
.app-body .icon-search {
    color: var(--color-accent);
}
.app-body .ui__header__links .icon-search,
.app-body .search__icon .icon-search {
    color: var(--color-accent);
}
.app-body .column-link .icon-search {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-search {
    color: #8a6e46;
}
.app-body .column-header__icon.icon-search {
    color: var(--color-accent);
}
.app-body .icon-times-circle {
    color: var(--color-accent);
}
/* Notifications icon */
.app-body .column-link .icon-bell,
.app-body .column-header__icon.icon-bell {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-bell {
    color: #8a6e46;
}
/* Direct messages icon */
.app-body .column-link .icon-at,
.app-body .column-header__icon.icon-at {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-at {
    color: #8a6e46;
}
.layout-multiple-columns .column-link .icon-at {
    color: var(--color-accent);
}
/* Bookmarks icon */
.app-body .icon-bookmarks,
.app-body .column-header__icon.icon-bookmarks {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-bookmarks {
    color: #8a6e46;
}
.layout-multiple-columns .column-link .icon-bookmarks {
    color: var(--color-accent);
}
/* Favorites icon */
.app-body .column-link .icon-star,
.app-body .column-header__icon.icon-star {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-star {
    color: #8a6e46;
}
.layout-multiple-columns .column-link .icon-star {
    color: var(--color-accent);
}
/* Lists icon */
.app-body .icon-list-ul,
.app-body .column-header__icon.icon-list-ul {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-list-ul {
    color: #8a6e46;
}
.layout-multiple-columns .column-link .icon-list-ul {
    color: var(--color-accent);
}
.app-body .navigation-panel .list-panel .column-link .icon-list-ul {
    color: var(--color-accent);
    transform: scale(1.8);
}
.app-body .navigation-panel .list-panel .column-link.active .icon-list-ul {
    color: var(--color-accent);
}
/* Settings icon */
.app-body .column-link .icon-cog {
    color: var(--color-accent);
}
.layout-multiple-columns .column-link .icon-cog {
    color: var(--color-accent);
}
/* About page icon */
.app-body .navigation-panel .column-link .icon-ellipsis-h {
    color: var(--color-accent);
}
.app-body .navigation-panel .column-link.active .icon-ellipsis-h {
    color: #8a6e46;
}
/* Moderation icon */
.app-body .icon-flag {
    color: var(--color-accent);
}
.app-body .icon-tachometer {
    color: var(--color-accent);
}
/* Profile settings */
.app-body .navigation-bar .icon-button .icon-bars {
    color: var(--color-accent);
}
.app-body .navigation-bar .icon-button.active .icon-close {
    color: #8a6e46;
}
/* Follow user icon */
.app-body .icon-user-plus,
.app-body .icon-user,
.app-body .icon-person-add {
    color: var(--color-accent);
}
.app-body .active .icon-user-plus {
    color: var(--color-accent);
}
.app-body .column-header__icon.icon-user-plus,
.app-body .column-link .icon-user-plus {
    color: var(--color-accent);
}
.app-body .column-link.active .icon-user-plus {
    color: #8a6e46;
}
.layout-multiple-columns .column-link .icon-user-plus {
    color: var(--color-accent);
}
/* Users icon */
.app-body .icon-users {
    color: var(--color-accent);
}
.app-body .column-link .icon-users {
    color: var(--color-accent);
}
/* Announcement icon */
.app-body .icon-bullhorn {
    color: var(--color-accent);
}
/* Column settings icon */
.app-body .icon-sliders {
    color: var(--color-accent);
}
/* Post visibility icons */
.app-body .icon-globe {
    color: var(--color-accent);
}
.app-body .dropdown-button .icon-globe {
    color: var(--color-accent);
}
.app-body .dropdown-button.active .icon-globe {
    color: #8a6e46;
}
.app-body .icon-unlock {
    color: var(--color-accent);
}
.app-body .dropdown-button .icon-unlock {
    color: var(--color-accent);
}
.app-body .dropdown-button.active .icon-unlock {
    color: #8a6e46;
}
.app-body .icon-lock {
    color: var(--color-accent);
}
.app-body .dropdown-button .icon-lock {
    color: var(--color-accent);
}
.app-body .dropdown-button.active .icon-lock {
    color: #8a6e46;
}
.app-body .icon-at {
    color: var(--color-accent);
}
.app-body .dropdown-button .icon-at {
    color: var(--color-accent);
}
.app-body .dropdown-button.active .icon-at {
    color: var(--color-accent);
}

/* Other icons */
.app-body .icon-paperclip {
    color: var(--color-accent);
}
.app-body .icon-photo-library,
.app-body .edit-indicator__attachments > .icon {
    color: var(--color-accent);
}
.app-body .compose-form__buttons .icon-button:nth-child(3) .icon {
    color: var(--color-accent);
}
.app-body .compose-form__buttons .icon-button:nth-child(3):is(.active, .active:hover) .icon {
    color: var(--color-accent);
}
.app-body .icon-check:is(.verified__mark, .verified-badge__mark) {
    color: var(--color-accent);
}
.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-check {
    color: var(--color-accent);
}
.app-body .account__relationship .icon-check,
.app-body .follow-request-banner .button .icon-check {
    color: var(--color-accent);
}
.app-body .icon-bell {
    color: var(--color-accent);
}
.app-body .icon-bell-o {
    color: var(--color-accent);
}
.app-body .icon-thumb-tack {
    color: var(--color-accent);
}
.app-body .icon-file-text {
    color: var(--color-accent);
}
.app-body
    :is(
        .account--panel,
        .follow-request-banner,
        .account__relationship
    )
    .icon-times {
               color: var(--color-accent);
}
.app-body .account--panel .icon-times,
.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-times {
    color: var(--color-accent);
}
.app-body .account__relationship .icon-times,
.app-body .follow-request-banner .button .icon-times {
    color: var(--color-accent);
}
.app-body .account__header__tabs__buttons .icon-undefined {
    color: var(--color-accent);
}
.app-body .account__header__tabs__buttons .copyable .icon-undefined {
    color: var(--color-accent);
}
.app-body .account__header__tabs__buttons .copied .icon-undefined {
    color: var(--color-accent);
}
.app-body .icon-eye-slash {
    color: var(--color-accent);
}
.app-body .icon-button.overlayed .icon-eye-slash,
.app-body .media-gallery__item__overlay .icon-eye-slash {
    color: var(--color-accent);
}
.app-body .player-button .icon-eye-slash {
    color: var(--color-accent);
}
.app-body .icon-eye {
    color: var(--color-accent);
}
.app-body .icon-eraser {
    color: var(--color-accent);
}
.app-body .icon-pencil {
    color: var(--color-accent);
}
.app-body .icon-edit {
    color: var(--color-accent);
}
@media screen and (min-width:1173px) {
    .app-body .navigation-panel .column-link .icon-home {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-home {
          color: #8a6e46;
    }
    .app-body .navigation-panel .column-link .icon-bell {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-bell {
          color: #8a6e46;
    }
    .app-body .navigation-panel .column-link .icon-explore {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-explore {
          color: #8a6e46;
    }
    .app-body .navigation-panel .column-link .icon-search {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-search {
          color: #8a6e46;
    }
    .app-body .navigation-panel .column-link .icon-globe {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-globe {
          color: #8a6e46;
    }
    .app-body .navigation-panel .column-link .icon-at {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-at {
          color: #8a6e46;
    }
    .app-body .navigation-panel .column-link .icon-bookmarks {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-bookmarks {
          color: #8a6e46;
    }
    .app-body .navigation-panel .column-link .icon-star {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-star {
          color: #8a6e46;
    }
    .app-body .navigation-panel .column-link .icon-list-ul {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-list-ul,
    .app-body .navigation-panel .column-link:has(+ .list-panel > .column-link.active) .icon-list-ul {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link .icon-cog {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link .icon-user-plus {
          color: var(--color-accent);
    }
    .app-body .navigation-panel .column-link.active .icon-user-plus {
          color: var(--color-accent);
    }
    .app-body .icon-flag {
          color: var(--color-accent);
    }
    .app-body .icon-tachometer {
          color: var(--color-accent);
    }
}


/* Links */
.app-body a.status-link:not(.mention, .hashtag),
.app-body a:is(.status-link, .mention, .navigation-bar__profile-edit) span,
.app-body :is(.account__header__fields, .account__header__content) a span {
    text-decoration-line: underline;
    text-decoration-color: var(--color-accent-bg);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.app-body a.status-link:not(.mention, .hashtag):is(:active, :focus, :hover),
.app-body a:is(.status-link, .mention, .navigation-bar__profile-edit):is(:active, :focus, :hover) span,
.app-body :is(.account__header__fields, .account__header__content, .trends__item__name) a:is(:active, :focus, :hover) span,
.app-body
    :is(
        .detailed-status__display-name,
        .reply-indicator__display-name,
        .status__display-name,
        a.account__display-name
    ):is(:active, :focus, :hover)
    .display-name strong,
.app-body .status__prepend a:is(:active, :focus, :hover) bdi,
.app-body a.notification-request__link:is(:active, :focus, :hover) .notification-request__name__display-name strong,
.app-body .more-from-author a:is(:active, :focus, :hover) bdi {
        text-decoration-line: underline;
        text-decoration-color: currentColor;
        text-decoration-thickness: 2px;
        text-underline-offset: 2px;
}
.app-body a.mention:is(:active, :focus, :hover),
.app-body :is(.account__header__fields, .account__header__content) a:is(:active, :focus, :hover),
.app-body :is(.detailed-status__datetime, .status__relative-time):is(:active, :focus, :hover) {
    text-decoration: none !important;
}
.app-body .account__header__fields .verified a span {
    display: inline;
}





/* 📝 Compose panel
   안에있는 드롭다운 색깔바꾸기 */
.app-body .dropdown-button {
    border-radius: 8px;
    border-color: var(--color-accent-bg);
    color: var(--color-accent);
    padding: 5px 8px;
    transition: border-color .2s;
}
.app-body .dropdown-button:hover {
    border-color: var(--color-accent);
}
.app-body .dropdown-button.active,
.app-body .column-settings .dropdown-button.active {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.app-body .column-settings .dropdown-button {
    background-color: var(--color-accent-bg);
}


/* Poll composer */
.app-body .compose-form__poll {
    gap: 3px;
}
.app-body .compose-form__poll .poll__option {
    margin-bottom: 2px;
}
.app-body .poll__option input[type=text] {
    border-radius: 8px;
    padding: 7px 12px;
    border: 1px solid var(--color-lines);
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
    transition: all .2s;
}
.app-body .poll__option input[type=text]:focus {
    border-color: var(--color-accent);
}
.app-body .compose-form__poll__footer {
    margin-top: 5px;
    padding-inline-start: 12px;
    gap: 6px;
    margin-bottom: -10px;
}
.app-body .compose-form__poll__select__label {
    display: none;
}
.app-body .compose-form__poll__select__value {
    background-position: 8px center;
    background-size: 15px;
    background-repeat: no-repeat;
    color: var(--color-accent);
    padding: 4px 8px 4px 27px;
    border-radius: 8px;
    border: 1px solid var(--color-accent-bg);
    font-size: 12px;
    line-height: 1.33;
    transition:
        background-color .2s,
        border-color .2s;
    cursor: pointer;
}
.app-body .compose-form__poll__select__value:is(:active, :hover, :focus) {
    border-color: var(--color-accent);
    outline: 0;
}
.app-body .compose-form__poll__select__value:active {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value {
    color: var(--color-accent);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value:active {
    color: #FFFFFF;
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value {
    color: var(--color-accent);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:active,
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked):active {
    color: #FFFFFF;
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked) {
    color: var(--color-accent);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked) {
    color: var(--color-accent);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked):active {
    color: #FFFFFF;
}

.app-body .compose-form__poll__footer__sep {
    display: none;
}

.app-body .compose-form__poll .poll__option.empty:not(:focus-within) {
    opacity: .8;
}

.app-body .compose-form__poll-wrapper,
.app-body .compose-form__poll-wrapper .poll__footer {
    border-top: 0;
}
.app-body .compose-form__poll-wrapper ul {
    background-color: var(--color-accent-bg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input,
.app-body .compose-form__poll-wrapper select {
    background-color: var(--color-content-bg);
    border: 1px solid var(--color-lines);
    border-radius: 8px;
    color: var(--color-content-fg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input:focus,
.app-body .compose-form__poll-wrapper select:focus {
    border-color: var(--color-accent);
}
.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary {
    padding: 6px 16px;
}
.app-body .compose-form__poll-wrapper .icon-button.disabled {
    color: transparent;
    pointer-events: none;
}
.app-body .compose-form__poll-button .icon-button.active {
    background-color: var(--color-accent);
}
.app-body .compose-form__poll-button .icon-button.active .icon-tasks {
    color: #FFFFFF;
}


/* Polls in posts */
.app-body .muted .poll {
    color: var(--color-content-fg-muted);
}
.app-body .poll__footer {
    color: var(--color-content-fg-muted);
    display: flex;
    flex-flow: wrap;
    gap: 5px;
    align-items: center;
    box-sizing: border-box;
    font-size: 12px;
    padding: 0;
}
.app-body .poll__link {
    color: var(--color-accent);
    text-decoration: none;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--color-accent-bg);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    height: 32px;
    transition: all .3s;
}
.app-body .poll__link:hover {
    border-color: var(--color-accent);
}
.app-body .poll__link:active {
    background-color: var(--color-accent-bg);
}
.app-body .poll__option.editable .poll__input {
    display: none;
}
.app-body .poll li {
    margin-bottom: 4px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.app-body :is(.status, .detailed-status) .poll__option {
    border: 1px solid var(--color-lines-translucent);
    color: var(--color-content-fg);
    font-weight: 500;
    padding: 8px;
    border-radius: 8px;
    transition: all .2s;
    position: relative;
    z-index: 1;
    align-items: center;
}
.app-body .poll__option.selectable {
    cursor: pointer;
}
.app-body .poll__option.selectable:active {
    transform: scale(.98);
}
.app-body .poll__option.selectable:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.app-body .poll__option.selectable:has(.poll__input.active) {
    border-color: var(--color-accent);
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
}
.app-body .poll__option.selectable .poll__input:not(.active) {
    border-width: 0;
    outline-width: 0 !important;
    background-color: var(--color-lines);
    transition:
        background .2s;
}
.app-body .poll__option.selectable:hover .poll__input:not(.active) {
    background-color: var(--color-accent-bg);
}
.app-body .poll__option.selectable .poll__input.active {
    border-width: 3px;
    border-color: var(--color-accent-bg);
    outline-width: 1px !important;
}
.app-body .poll__footer .button.button-secondary {
    box-sizing: border-box;
    padding: 0 16px;
    margin: 0;
    height: 32px;
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
    float: inline-end;
}
.app-body .poll__footer .button.button-secondary:hover {
    background-color: var(--color-accent-focus);
    color: var(--color-accent-fg);
}
.app-body .poll__footer .button.button-secondary:disabled {
    opacity: 1;
    background-color: var(--color-content-secondary-bg);
    color: var(--color-accent);
    display: none;
}
.app-body .poll__footer .button.button-secondary:not(:disabled) {
    animation: bounce-sml .3s ease-out 1;
}
.app-body .poll__footer .button.button-secondary:active {
    transform: scale(.95);
}
.app-body .poll__voted {
    position: absolute;
    right: 3px;
    height: 20px;
    color: var(--color-accent);
}
.app-body .poll__option:has(+ .poll__chart.leading) .poll__voted {
    right: 28px;
    color: var(--color-confirm-fg);
}
.app-body .poll__chart {
    background: var(--color-lines);
    opacity: .8;
    height: auto;
    border-radius: 8px 0 0 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
}
@media (prefers-color-scheme: dark) {
    .app-body .poll__chart {
        opacity: 1;
    }
}
.app-body .poll__chart.leading,
.app-body .muted .poll__chart.leading,
.app-body .poll__option:has(.poll__voted) + .poll__chart.leading {
    background: var(--color-confirm);
    opacity: .5;
}
.app-body .poll__option:has(.poll__voted) {
    border-color: var(--color-accent);
    background-color: transparent;
}
.app-body .poll__option:has(.poll__voted) + .poll__chart {
    background-color: color-mix(in srgb, var(--color-accent), transparent 70%);
    opacity: 1;
}
.app-body .poll__option:has(+ .poll__chart.leading),
.app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) {
    border-color: color-mix(in srgb, var(--color-confirm), transparent 30%);
    color: var(--color-content-fg);
    background-color: transparent;
    background-size: 20px;
    background-position: right 8px center;
    background-repeat: no-repeat;
    color: var(--color-accent);
}
.app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) {
    border-color: var(--color-confirm);
}



/* Emoji picker */
.app-body .emoji-picker-dropdown > .icon-button .icon {
    color: var(--color-accent);
}
.app-body .emoji-picker-dropdown > .icon-button.active .icon {
    color: #FFFFFF;
}
.app-body .emoji-picker-dropdown__menu {
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--color-content-bg);
    border: 1px solid var(--color-lines);
    box-shadow: var(--dropdown-shadow);
}
.app-body .emoji-mart {
    display: block;
}
.app-body .emoji-mart-bar:first-child {
    background-color: var(--color-content-secondary-bg);
    border-color: var(--color-lines);
    padding-top: 2px;
}
.app-body .emoji-mart-anchor-bar {
    background-color: var(--color-accent);
}
.app-body .emoji-mart-anchor-selected {
    color: var(--color-accent);
}
.app-body .emoji-mart-anchor-icon svg path,
.app-body .emoji-mart-anchor-icon svg rect {
    fill: var(--color-content-fg);
}
.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path,
.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect,
.app-body .emoji-mart-search-icon svg path {
    fill: var(--color-accent);
}
.app-body .emoji-mart-search-icon,
.app-body .emoji-mart-search-icon:disabled,
.app-body .emoji-mart-search-icon svg {
    opacity: 1;
}
.app-body .emoji-mart-scroll::-webkit-scrollbar-track {
    background-color: var(--color-content-bg);
}
.app-body .emoji-mart-search,
.app-body .emoji-mart-scroll,
.app-body .emoji-mart-category-label span {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
}
.app-body .emoji-mart-search input {
    background-color: var(--color-accent-bg);
    border-color: var(--color-accent-lines);
    color: var(--color-content-fg);
    border-radius: 8px;
}
.app-body .emoji-mart-search input:focus {
    border-color: var(--color-accent);
    outline: 0;
}
.app-body .emoji-mart-search input::placeholder {
    color: var(--color-accent);
}



/* Zoom on emojis on hover (in post content only */
.app-body .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */
    overflow: visible;
}
.app-body .status__content .emojione {
    transition: transform .8s .8s;
}
.app-body .status__content .emojione:hover {
    transform: scale(2.5);
}


/* Empty columns */
.app-body .empty-column-indicator {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-content-fg);
    border-radius: 0 0 8px 8px;
    contain: content;
}
.app-body .empty-column-indicator a {
    color: var(--color-accent);
}
.app-body .explore__links > .empty-column-indicator {
    border: 0;
}


/* Timeline hint */
.app-body .timeline-hint {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
    border-color: var(--color-lines);
    position: relative;
    padding: 28px;
    padding-left: 75px;
    text-align: left;
    font-size: 95%;
    line-height: 1.5;
}
.app-body .timeline-hint a {
    color: var(--color-accent);
}
.app-body .timeline-hint p {
    opacity: .7;
}
.app-body .timeline-hint::before {
    content: " ";
    display: block;
    background-color: var(--color-content-secondary-bg);
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    z-index: 0;
    border-radius: 8px;
}
.app-body .timeline-hint::after {
    content: " ";
    color: var(--color-accent);
    background-repeat: no-repeat;
    background-position: center;
    opacity: .55;
    position: absolute;
    top: 26px;
    left: 25px;
    width: 40px;
    height: 40px;
}
.app-body .timeline-hint > :is(p, a) {
    position: relative;
    z-index: 0;
}


/* 📤 DMs */
.app-body .follow_requests-unlocked_explanation {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-content-fg);
    border-top: 1px solid var(--color-lines);
    border-bottom: 1px solid var(--color-lines);
}
.app-body .follow_requests-unlocked_explanation a {
    color: var(--color-accent);
}
.app-body .conversation__unread {
    background-color: var(--color-accent);
}
.app-body .conversation__unread {
    color: var(--color-accent-fg);
}
.app-body .conversation__content__names a strong {
    font-weight: bold;
}
.app-body .conversation__content__names,
.app-body .conversation__content__names a,
.app-body .conversation__content__relative-time,
.app-body .conversation .attachment-list__list a,
.app-body .conversation .status__content p {
    color: var(--color-content-fg);
}
.app-body .conversation {
    background-color: var(--color-content-bg);
    border-bottom: 1px solid var(--color-lines);
}
.app-body .conversation.unread:before {
    border-color: var(--color-accent);
}
.app-body .conversation__content__relative-time {
    opacity: .7;
}
.app-body .conversation__content {
    position: relative;
}
.app-body .account__avatar-composite {
    border-radius: 0;
    padding: 1px;
}
.app-body .account__avatar-composite .account__avatar {
    height: auto !important;
}
.app-body .account__avatar-composite__label {
    display: none;
}

.app-body .status__wrapper.status__wrapper-direct,
.app-body .notification__message:has(+ div > .status__wrapper.status__wrapper-direct),
.app-body .notification-ungrouped--direct .notification-ungrouped__header {
    --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%);
}
.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover),
.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar,
.app-body .status__wrapper.status__wrapper-direct.focusable:focus,
.app-body .notification__message:has(+ div > .status__wrapper.status__wrapper-direct .status__content:hover),
.app-body .notification-ungrouped--direct:has(.status__wrapper.status__wrapper-direct .status__content:hover) .notification-ungrouped__header {
    --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 88%);
}

.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend {
    background-color: var(--color-accent);
    margin-inline-start: 10px;
    z-index: 3;
    position: relative;
    outline: 5px solid var(--color-post-bg);
    border-radius: 50px 50px 50px 10px;
    transition: all .2s;
}
.app-body :is(.detailed-status__wrapper-direct) .status__prepend {
    margin-inline-start: 0;
    margin-block-end: 0;
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    border-radius: 8px;
    outline: 0;
    font-size: 13px;
}
.app-body :is(.detailed-status__wrapper-direct):has(.status__prepend) {
    padding-top: 40px;
}
.app-body :is(.status__wrapper-direct):not(:has(.status__line)) .status__prepend {
    margin-inline-start: 66px;
}
.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon-wrapper {
    height: 20px;
}
.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .icon-at {
    color: #ffffff;
}
.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend .status__prepend-icon {
    width: 20px;
    height: 20px;
    transform: scale(.85);
}
.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend > span {
    color: var(--color-accent-fg);
    margin-top: -1px;
}

.app-body .notification-ungrouped--direct .notification-ungrouped__header > .notification-ungrouped__header__icon > svg {
    display: none;
}
.app-body .notification-ungrouped--direct .notification-ungrouped__header > span {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
    border-radius: 50px 50px 50px 10px;
    padding: 3px 12px;
    margin-top: 2px;
    font-size: 90%;
}


/* ⏺️ Horizontal selectors
   (used to navigate subsections on the Explore, Live Feeds and Account pages) */
.app-body
    :is(.account__section-headline, .notification__filter-bar) {
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-lines);
}
.app-body .account__header + .account__section-headline {
    border-left: 0;
    border-right: 0;
}
@media screen and (min-width:890px) and (max-width:1174px) {
    .app-body:not(.layout-multiple-columns) .explore__search-header + .account__section-headline {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .app-body:not(.layout-multiple-columns) .notification__filter-bar {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        margin-top: 10px;
    }
}
@media screen and (max-width:889px) {
    .app-body:not(.layout-multiple-columns) :is(.account__section-headline, .notification__filter-bar) {
        border-left: 0;
        border-right: 0;
    }
}
.app-body
    :is(.account__section-headline, .notification__filter-bar)
    :is(a, button) {
        background-color: var(--color-accent-bg);
        color: var(--color-accent);
        box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
        border-radius: 9px;
        transition: all .2s;
        max-height: 45px;
        padding: 14px 10px;
}
.app-body
    :is(.account__section-headline, .notification__filter-bar)
    .icon {
        margin-top: -1.5px;
}
.app-body
    :is(.account__section-headline, .notification__filter-bar)
    :is(a, button):hover {
        background-color: var(--color-accent-lines);
        color: var(--color-accent);
        box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
}
.app-body
    :is(.account__section-headline, .notification__filter-bar)
    :is(a, button).active {
        background-color: var(--color-content-bg);
        color: var(--color-content-fg);
        box-shadow: 0 0 0 4px var(--color-accent-bg) inset;
}
.app-body
    :is(.account__section-headline, .notification__filter-bar)
    :is(a, button).active::before {
        display: none;
}
.app-body
    :is(.account__section-headline, .notification__filter-bar)
    button {
        background-color: transparent;
}
.app-body
    :is(.account__section-headline, .notification__filter-bar)
    :is(a, button, a.active, button.active)::after {
        display: block;
        position: absolute;
        content: " ";
        width: 2px;
        height: auto;
        background-color: var(--color-accent-lines);
        top: 8px;
        right: -1px;
        left: auto;
        bottom: 8px;
        border-radius: 50px;
        z-index: 1;
        transform: unset;
        border: 0;
}
.app-body
    :is(.account__section-headline, .notification__filter-bar)
    :is(a, button):last-child::after {
        display: none;
}
@media (prefers-color-scheme: dark) {
    .app-body
        :is(.account__section-headline, .notification__filter-bar)
        :is(a, button).active {
            background-color: var(--color-bg);
    }
}

.app-body .notification__filter-bar .icon-reply-all {
    color: var(--color-accent);
}
.app-body .notification__filter-bar .active .icon-reply-all {
    color: var(--color-accent);
}
.app-body .notification__filter-bar .icon-star {
    color: var(--color-accent);
}
.app-body .notification__filter-bar .active .icon-star {
    color: var(--color-accent);
}
.app-body .notification__filter-bar .icon-retweet {
    color: var(--color-accent);
}
.app-body .notification__filter-bar .active .icon-retweet {
    color: var(--color-accent);
}
.app-body .notification__filter-bar .icon-tasks {
    color: var(--color-accent);
}
.app-body .notification__filter-bar .active .icon-tasks {
    color: var(--color-accent);
}
.app-body .notification__filter-bar .icon-home {
    color: var(--color-accent);
}
.app-body .notification__filter-bar .active .icon-home {
    color: var(--color-accent);
}

@media screen and (max-width:889px) {
    .app-body .account__header + .account__section-headline {
        border-radius: 0;
    }
}



/* 👤 Account view
   --------------- */
.app-body .account__header {
    padding-bottom: 5px;
    background-color: var(--color-content-bg);
}
@media screen and (max-width:889px) {
    .app-body .account__header {
        border-left: 0;
        border-right: 0;
    }
}
.app-body .account__header__image {
    height: 200px;
    background-color: var(--color-content-bg);
    border-bottom: 0;
    margin: 0;
}
.app-body .account__header__image img {
    background-color: var(--color-content-secondary-bg);
}
.app-body .account__header__bar {
    border: 0;
}
.app-body .account__header__bar .avatar {
    transition: transform .3s;
}
.app-body .account__header__bar .avatar:active {
    transform: scale(.92);
}
.app-body .account__header__bar .avatar .account__avatar {
    margin: 0;
    border-width: 4px;
    border-color: var(--color-content-bg);
    width: 100px !important;
    height: 100px !important;
    background-color: var(--color-content-bg);
}
.app-body .account__header__tabs__name h1,
.app-body .account__header__tabs__name h1 small {
    color: var(--color-content-fg);
}
.app-body .account__header__tabs__name h1 > span {
    font-size: 18px;
}
.app-body .account__header__tabs__name h1 small > span:first-child {
    opacity: .7;
}
.app-body .account__header__tabs__name .icon-lock {
    height: 20px;
    width: 16px;
    top: unset;
    vertical-align: bottom;
}
.app-body .account__header__content a {
    color: var(--color-accent);
    text-decoration: none;
}
.app-body .account__header__content a:hover {
    text-decoration: underline;
}
.app-body .account__header__extra__links a strong {
    color: var(--color-content-fg-bold);
}
.app-body .account__header__account-note label {
    margin-bottom: 0;
}
.app-body .account__header__account-note label,
.app-body .account__header__account-note textarea::placeholder {
    color: var(--color-content-fg-bold);
    opacity: .5;
    font-style: normal;
}
.app-body .account__header__account-note textarea {
    color: var(--color-content-fg);
    border-radius: 8px;
    font-style: italic;
    margin: 0;
    width: 100%;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: all .2s;
}
.app-body .account__header__account-note textarea:placeholder-shown {
    padding-left: 0;
    padding-right: 0;
}
.app-body .account__header__account-note textarea:focus {
    background-color: var(--color-accent-bg);
    padding-left: 10px;
    padding-right: 10px;
}
.app-body .account__header__account-note textarea:not(:placeholder-shown):not(:focus) {
    outline-color: var(--color-lines);
    box-shadow: 2px 3px var(--color-content-secondary-bg);
}
.app-body .account__header__account-note textarea:not(:placeholder-shown):focus {
    outline-color: var(--color-accent);
    box-shadow: 2px 3px var(--color-accent-bg);
}
.app-body .account__header__badges .account-role {
    color: var(--color-content-fg);
    border: 0;
    border-radius: 50px;
    padding: 0 10px;
    height: 29px;
    background-color: var(--color-content-secondary-bg);
    gap: 5px;
}
.app-body .account__header__badges .account-role span:not(.account-role__domain) {
    font-weight: 500;
}
.app-body .account-role svg {
    opacity: 1;
    color: var(--color-accent);
}
.app-body .account__header__extra__links a,
.app-body .account__header__bio .account__header__content,
.app-body .account__header__bio .account__header__fields dd {
    color: var(--color-content-fg);
}
.app-body .account__header__bio .account__header__fields {
    background-color: var(--color-content-secondary-bg);
    border-radius: 8px;
    border: 0;
}
@media (prefers-color-scheme: dark) {
    .app-body .account__header__bio .account__header__fields {
        background-color: var(--color-secondary-bg);
    }
}
.app-body .account__header__bio .account__header__fields:has(dl:only-child) {
    display: none;
}
.app-body .account__header__bio .account__header__fields dt {
    font-weight: bold;
    font-size: 12px;
}
.app-body .account__header__bio .account__header__fields :is(dl, .verified) {
    border-bottom: 0;
    position: relative;
}
.app-body .account__header__bio .account__header__fields dl:not(:last-child):after {
    display: block;
    content: " ";
    height: 1px;
    bottom: -1px;
    right: 15px;
    background-color: var(--color-lines);
    left: 15px;
    position: absolute;
    border-radius: 50px;
}
@media (prefers-color-scheme: dark) {
    .app-body .account__header__bio .account__header__fields dl:not(:last-child):after {
        background-color: var(--color-accent-bg);
    }
}
.app-body .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0;
}
.app-body .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */
    margin-top: 0;
    border-top-width: 0;
}
.app-body .account__header__bio .account__header__fields .verified :is(a, dd),
.app-body .hover-card .account-fields dl.verified dd a {
    color: var(--color-accent);
    gap: 5px;
}
.app-body .account__header__bio .account__header__fields :is(.verified dt, dt) {
    color: var(--color-content-fg);
}
.app-body .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: none;
}
.app-body .account__header__extra .account__header__fields .verified dd > span:first-child {
    vertical-align: bottom;
}
.app-body .account__header__extra .account__header__fields .verified__mark {
    float: left;
    transform: scale(1.1);
}
.app-body .account__header__bio .account__header__fields .verified:last-child {
    border-bottom: 0;
}

.app-body .account__header__tabs__buttons .icon-button.copied,
.app-body .account__header__tabs__buttons .icon-button.copied:is(:active, :focus, :hover) {
    background-color: rgba(121, 189, 154, 0.3);
}

.app-body .follow-request-banner,
.app-body .moved-account-banner {
    background-color: var(--color-content-secondary-bg);
    border-top: 1px solid var(--color-lines);
}
.app-body .follow-request-banner__message,
.app-body .moved-account-banner__message {
    color: var(--color-content-fg);
}
.app-body .moved-account-banner__message {
    font-weight: bold;
}

.app-body .account__header__tabs__buttons > button:first-child:active {
    transform: scale(.95);
}

.app-body .account__domain-pill,
.app-body .account__domain-pill__popout__handle {
    background-color: color-mix(in srgb, var(--color-accent), transparent 88%);
    color: var(--color-accent);
    border-color: var(--color-accent);
    border-radius: 8px;
    font-weight: 500;
    transition: all .2s;
}
.app-body .account__domain-pill:hover {
    background-color: var(--color-accent-bg);
}
.app-body .account__domain-pill.active {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.app-body .dropdown-animation.account__domain-pill__popout {
    animation: none;
}
.app-body .account__domain-pill__popout {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
    border: 1px solid var(--color-lines);
    border-radius: 8px;
}
.app-body .account__domain-pill__popout__header__icon {
    background-color: var(--color-accent);
}
.app-body .account__domain-pill__popout__handle {
    padding: 12px;
}
.app-body :where(.account__domain-pill__popout__header, .account__domain-pill__popout__parts) :is(h3, h6) {
    color: var(--color-content-fg);
    font-weight: 600;
}
.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon {
    align-items: start;
    padding-top: 2px;
}
.app-body .account__domain-pill__popout__parts > div .account__domain-pill__popout__parts__icon .icon {
    width: 28px;
    height: 28px;
}
.app-body .account__domain-pill__popout__parts > div:first-child .account__domain-pill__popout__parts__icon .icon {
    color: var(--color-accent);
}
.app-body .account__domain-pill__popout__parts > div:last-child .account__domain-pill__popout__parts__icon .icon {
    color: var(--color-accent);
}
.app-body .hover-card {
    background-color: color-mix(in srgb, var(--color-content-bg), transparent 10%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: var(--color-lines);
}
.app-body .hover-card__bio,
.app-body .hover-card .display-name bdi,
.app-body .account-fields,
.app-body .hover-card__number {
    color: var(--color-content-fg);
}
.app-body .hover-card .display-name__html {
    font-weight: 600;
}
.app-body .account-fields {
    font-size: 95%;
}
.app-body .hover-card .account-fields {
    background-color: var(--color-content-secondary-bg);
    border-radius: 8px;
    padding: 8px;
}
.app-body .hover-card .account-fields dl:not(:first-child:last-child) {
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-lines) 70%, transparent);
}
@media (prefers-color-scheme: dark) {
    .app-body .hover-card .account-fields {
        background-color: var(--color-secondary-bg);
    }
    .app-body .hover-card .account-fields dl {
        border-color: var(--color-accent-bg);
    }
}
.app-body .hover-card .account-fields dl:last-child:not(:first-child) {
    padding-top: 6px;
    padding-bottom: 0;
    border-bottom: 0;
}
.app-body .hover-card .account-fields dl dt {
    width: 30%;
    min-width: 30%;
    max-width: 30%;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 80%;
}
.app-body .hover-card .account-fields dl dd {
    text-align: left;
    justify-content: flex-start;
}



/* ✨ Explore tab
   -------------- */
.app-body .explore__links {
    background-color: var(--color-content-bg);
    overflow: hidden;
}
.layout-multiple-columns .explore__links.scrollable {
    background-color: var(--color-content-bg);
    overflow-y: auto;
}
.app-body .explore__links .trends__item {
    background-color: var(--color-content-bg);
    border-bottom: 2px solid var(--color-content-secondary-bg);
    padding: 15px 18px;
}
.app-body .explore__links .trends__item:last-child {
    border-bottom: 0;
}
.app-body .trends__item__name,
.app-body .trends__item__current {
    color: var(--color-fg-muted);
}
.app-body .trends__item__name a {
    color: var(--color-fg);
}
.app-body .getting-started__trends {
    padding: 0;
    display: flex;
    flex-flow: column;
}
.app-body .getting-started__trends h4 {
    border-bottom: 0;
    padding: 0;
}
.app-body .getting-started__trends h4 > :is(a, span) {
    padding: 15px 20px 6px 47px;
    margin-left: 3px;
    font-weight: 500;
    color: var(--color-fg-muted);
    border-left: 4px solid transparent;
    display: block;
    transition: all .3s;
}
.app-body .getting-started__trends h4 a:hover {
    color: var(--color-accent);
}
.app-body .getting-started__trends h4 a:active {
    transform: scale(.95);
}
.app-body .getting-started__trends h4 a::after {
    content: '\2192';
    margin-left: 0;
    opacity: 0;
    transition: all .2s;
}
.app-body .getting-started__trends:hover h4 a::after {
    opacity: 1;
    margin-left: 5px;
}

.app-body .getting-started__trends .trends__item {
    padding-left: 19px;
}
@media screen and (max-width:1174px) {
    .app-body .getting-started__trends {
        display: none;
    }
}

.app-body .trends__item::before {
    color: var(--color-accent);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    min-width: 20px;
    width: 20px;
    height: 20px;
    transform: scale(1.45);
    content: " ";
    display: block;
}
.app-body .trends__item__name span {
    white-space: pre-wrap;
}
.app-body .trends__item__sparkline {
    flex: 0 0 auto;
    position: relative;
    height: 30px;
    width: 30px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--color-content-secondary-bg);
    box-shadow: inset 0 -2px var(--color-accent-bg);
    transform: scale(1.25);
    transition: all .3s;
}
.app-body .getting-started__trends .trends__item__sparkline {
    background-color: var(--color-secondary-bg);
}
@media (prefers-color-scheme: dark) {
    .app-body .getting-started__trends .trends__item__sparkline {
        background-color: var(--color-content-secondary-bg);
    }
}
.app-body .trends__item__sparkline svg {
    width: 50px;
    height: 30px;
    position: absolute;
    right: -2px;
}
.app-body .trends__item__sparkline::after {
    position: absolute;
    display: block;
    content: " ";
    left: 0;
    right: 0;
    height: 2px;
    bottom: 0;
    background-color: var(--color-accent);
    opacity: .4;
}

.app-body .trends__item__sparkline path:last-child {
    stroke: var(--color-accent) !important;
}
.app-body .trends__item__sparkline path:first-child {
    fill: var(--color-accent) !important;
    fill-opacity: .4 !important;
    transform: translate(0px, 0.2px);
}


/* Hashtag header */
.app-body .hashtag-header {
    font-size: 15px;
    padding: 24px 20px;
    margin: 10px;
    border-radius: 8px;
    color: var(--color-content-fg);
    background-color: var(--color-content-secondary-bg);
    border: 0;
}
.app-body .hashtag-header__header {
    margin-bottom: 0;
}
.app-body .hashtag-header__header h1 {
    color: var(--color-content-fg);
}
.app-body .hashtag-header .hashtag-header__header + div {
    color: var(--color-content-fg);
    font-size: 85%;
    opacity: .8;
    margin-top: -5px;
    width: max-content;
}
@media screen and (max-width:460px) {
    .app-body .hashtag-header .hashtag-header__header + div {
        max-width: 55%;
        line-height: 1.5;
        margin-top: -2px;
    }
    .app-body .hashtag-header .hashtag-header__header + div > span {
        display: inline-block;
        margin-right: 5px;
    }
}
.layout-multiple-columns .hashtag-header .hashtag-header__header + div {
    max-width: 55%;
    line-height: 1.5;
    margin-top: -2px;
}
.layout-multiple-columns .hashtag-header .hashtag-header__header + div > span {
    display: inline-block;
    margin-right: 5px;
}

@media screen and (min-width:890px) {
    .app-body .hashtag-header .hashtag-header__header button {
        transform: translate(0, 8px);
    }
}


/* Account recommendations (For You Tab + User directory */
.app-body .scrollable .account-card {
    margin: 0;
    background-color: var(--color-content-bg);
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--color-lines);
}
.app-body .account-card__header {
    padding: 0;
    border-radius: 0;
    height: 128px;
    overflow: hidden;
}
.app-body .scrollable .account-card__bio:after {
    background: linear-gradient(270deg, var(--color-content-bg), transparent);
}
.app-body .account-card__header img {
    background-color: var(--color-content-secondary-bg);
}
.app-body .account-card__title__avatar .account__avatar {
    border: 0;
    border-radius: 50%;
    overflow: visible;
}
.app-body .account-card__title__avatar img {
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--color-content-bg);
}
.app-body .account-card__title .display-name bdi,
.app-body .account-card__counters__item,
.app-body .account-card__counters__item small {
    color: var(--color-content-fg);
}
.app-body .account-card__counters__item small {
    opacity: .7;
}
.account-card__title .display-name bdi .display-name__html {
    font-weight: bold;
}
.app-body .account-card__bio a {
    color: var(--color-accent);
}
.app-body .filter-form {
    background-color: var(--color-content-secondary-bg);
    border-top: 1px solid var(--color-lines);
}
.app-body .filter-form__column {
    padding: 10px 15px;
}

.app-body .explore__suggestions__card {
    border-bottom: 2px solid var(--color-content-secondary-bg);
    gap: 2px;
    padding-bottom: 14px;
}
.app-body .explore__suggestions__card__source span {
    background-color: var(--color-content-secondary-bg);
    padding: 6px 12px;
    display: inline-block;
    border-radius: 50px;
    color: var(--color-fg-muted);
    font-weight: 500;
}
.app-body .explore__suggestions__card__body__main__name-button .display-name__account {
    color: var(--color-content-fg);
    opacity: .75;
}
.app-body .explore__suggestions__card .icon-button {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-fg-muted);
    padding: 6px;
    border: 0;
}
.app-body .explore__suggestions__card .icon-button:is(:active, :hover) {
    background-color: var(--color-accent-bg);
}
@media screen and (min-width:1173px) {
    .app-body .explore__suggestions__card .icon-button {
        opacity: 0;
        transform: translateX(50%);
        transition: all .3s;
    }
    .app-body .explore__suggestions__card:hover .icon-button {
        opacity: 1;
        transform: translateX(0);
    }
}


/* 📰 Trending stories */
.app-body .story {
    background-color: var(--color-content-bg);
    transition: all .3s;
}
.app-body .story:not(:last-child) {
    border-bottom: 2px solid var(--color-content-secondary-separator);
}
.app-body .story,
.app-body .story__details__title {
    color: var(--color-content-fg);
}
.app-body .story__details__title {
    font-weight: bold;
    transition: all .3s;
}
.app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) {
    background-color: var(--color-content-bg-focus);
}
.app-body .story__details__publisher {
    color: var(--color-fg);
}
.app-body .story .story__details__publisher {
    opacity: .7;
    transition: all .3s;
}
.app-body .story:has(:is(.story__thumbnail, .story__details__title):hover) :is(.story__details__publisher, .story__details__title) {
    color: var(--color-accent);
    opacity: 1;
}
.app-body .story__details__shared {
    color: var(--color-fg-muted);
}
.app-body .story__details__shared__pill {
    background-color:
        color-mix(
            in srgb,
            var(--color-accent),
            transparent 92%
        );
    color: var(--color-accent);
    border-radius: 8px;
    transition: all .3s;
}
.app-body .story__details__shared__pill:hover {
    background-color: var(--color-accent-bg);
}
.app-body .story__details__shared__pill:active {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.app-body .story.expanded {
    gap: 20px;
    padding-bottom: 20px;
}
.app-body .story.expanded .story__thumbnail {
    margin: 0;
}
.app-body .story.expanded .story__thumbnail img {
    border-radius: 8px;
}
.app-body .story__details__shared__author-link {
    color: var(--color-content-fg);
}
.app-body .story__details__shared__author-link:hover {
    color: var(--color-accent);
}



/* 🔍 Search field and search results */
.app-body .search {
    margin-bottom: 10px;
    transition: transform .3s;
}
.app-body .search:has(.search__icon:active) {
    transform: scale(.95);
}
.app-body .search__input {
    border-radius: 8px;
    background-color: var(--color-accent-bg);
    color: var(--color-content-fg);
    border: 1px solid var(--color-accent-lines);
    font-weight: 500;
    padding-inline-end: 45px;
    padding-inline-start: 16px;
    outline-offset: 0;
    outline: 0 solid var(--color-accent-bg);
    transition:
        border-color .2s,
        background-color .2s,
        outline .2s;
}
.app-body .search__input::placeholder,
.app-body .compose-form .spoiler-input__input::placeholder {
    font-weight: 500;
    color: var(--color-accent);
}
.app-body .search__input:focus {
    border-color: var(--color-accent);
    background-color: var(--color-content-bg);
    outline: 3px solid var(--color-accent-bg);
    border-radius: 8px;
}
.app-body .search__input:focus::placeholder,
.app-body .compose-form .spoiler-input__input:focus::placeholder {
    color: var(--color-content-fg);
    opacity: .4;
}
.app-body .search__icon .icon {
    padding: 5px;
    transform: scale(1) translateY(-50%);
    background-size: 24px !important;
    top: 50%;
    inset-inline-start: unset;
    inset-inline-end: 12px;
}
.app-body .search__input:not(:placeholder-shown) + .search__icon:hover .icon {
    color: #FFFFFF;
}
.app-body .compose-panel .icon-search,
.app-body .compose-panel .icon-search.active,
.app-body .explore__search-header .icon-search {
    color: #FFFFFF;
}
.app-body .compose-panel .icon-search.active,
.app-body .search__icon .icon-search.active {
    opacity: 1;
    z-index: 1;
}
.app-body .explore__search-results {
    border-radius: 0;
    border: 0;
    background-color: transparent;
    overflow: hidden;
}
.app-body .explore__search-header {
    background-color: transparent;
}
.app-body .explore__search-results .account {
    padding-top: 16px;
}
.app-body .explore__search-results article:last-child > .account {
    border-bottom: 1px solid var(--color-lines);
}
.app-body :is(.explore__search-results, .search-results__section) .trends__item {
    border-bottom: 2px solid var(--color-content-secondary-bg);
}
.app-body :is(.explore__search-results, .search-results__section) article:first-child > .trends__item,
.app-body :is(.explore__search-results, .search-results__section) > .trends__item:first-child,
.app-body :is(.explore__search-results, .search-results__section) > .account:first-child {
    border-top: 1px solid var(--color-lines);
}
.app-body :is(.explore__search-results, .search-results__section) article:last-child > .trends__item,
.app-body :is(.explore__search-results, .search-results__section) > .trends__item:last-child,
.app-body :is(.explore__search-results, .search-results__section) > .account:last-child {
    border-bottom: 1px solid var(--color-lines);
}
.app-body .search-results__section {
    background-color: var(--color-content-bg);
    border-bottom: 0;
}
.app-body .search-results__section__header {
    background-color: var(--color-content-secondary-bg);
    border-bottom: 0;
    color: var(--color-content-fg);
}
.app-body .search-results__section__header button {
    color: var(--color-accent);
}
.app-body .account .account__details > span {
    color: var(--color-content-fg);
}
.app-body .account .account__details .verified-badge {
    color: var(--color-accent);
}
.app-body .account .account__details .verified-badge span {
    font-weight: 500;
}
.app-body .compose-panel:has(> .search.active) {
    overflow: visible;
}
.app-body .search__popout {
    background-color: var(--color-content-bg);
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid var(--color-lines);
    animation: fadein-short .2s 1;
}
.app-body .search__popout h4 {
    font-weight: bold;
}
.app-body .search__popout h4,
.app-body .search__popout__menu__message,
.app-body .search__popout__menu__item {
    color: var(--color-content-fg);
}
.app-body .search__popout__menu__item {
    align-items: center;
    border-radius: 6px;
}
.app-body .search__popout__menu__item mark {
    color: var(--color-content-fg-bold);
}
.app-body .search__popout__menu__item :is(.icon-button, .icon-button .icon) {
    border-radius: 6px;
    transition: none;
}
.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) :is(.icon-button, .icon-button .icon) {
    color: var(--color-accent-fg);
}
.app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover),
.app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) .icon {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-accent);
}
.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover),
.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}

.app-body .search__popout__menu:nth-child(2):not(:has(.search__popout__menu__message)) {
    margin-bottom: 10px;
}
.app-body .search__popout h4:has(+ .search__popout__menu:last-child, + .search__popout__menu__message) {
    background-color: var(--color-content-secondary-bg);
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0;
    border-radius: 6px 6px 0 0;
    color: var(--color-fg-muted);
}
.app-body .search__popout__menu:last-child,
.app-body .search__popout > .search__popout__menu__message:last-child {
    margin: 0 0 -10px;
    background-color: var(--color-content-secondary-bg);
    border-radius: 0 0 6px 6px;
    padding: 5px;
}
.app-body .search__popout > .search__popout__menu__message:last-child {
    padding: 5px 15px 15px;
    color: var(--color-fg-muted);
}
.app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) {
    color: var(--color-fg-muted);
}
.app-body .search__popout__menu:last-child .search__popout__menu__item:not(.selected, :active, :hover, :focus) mark {
    color: var(--color-content-fg);
}

@media screen and (max-width:1174px) {
    .app-body:not(.layout-multiple-columns) .search {
        margin-bottom: 0;
    }
    .app-body:not(.layout-multiple-columns) .explore__search-header {
        padding-top: 2px;
    }
    .app-body:not(.layout-multiple-columns) .search__input {
        padding: 13px;
    }
    .app-body:not(.layout-multiple-columns) .explore__search-header {
        padding: 10px 0;
    }
}
@media screen and (max-width:889px) {
    .app-body:not(.layout-multiple-columns) .explore__search-header {
        padding: 10px;
    }
}

@keyframes makeawish {
    0% {
        transform: scale(120%) translate(0, 0) rotate(0deg);
    }
    100% {
        transform: scale(200%) translate(100vw, 100vh) rotate(600deg);
    }
}
.app-body:has(.search__input[value="Tangerine UI"])::after,
.app-body:has(.search__input[value="tangerine ui"])::after {
    content: "\1F34A";
    position: fixed;
    display: block;
    text-align: center;
    width: 30px;
    height: 30px;
    font-size: 27px;
    line-height: 1.11;
    top: -40px;
    left: -40px;
    animation: 10s linear 0s makeawish;
}



/* Dismissable banners */
.app-body .dismissable-banner {
    background-color: var(--color-accent);
    box-shadow: 0 5px var(--color-content-bg);
    border-radius: 8px;
    border: 0;
    margin: 10px 10px 5px;
}
.app-body .dismissable-banner__message h1 {
    color: var(--color-content-fg);
    margin-bottom: 8px;
}
.app-body .dismissable-banner__message,
.app-body .dismissable-banner .dismissable-banner__action .icon-button {
    color: var(--color-accent-fg);
    font-weight: normal;
}
.app-body .dismissable-banner .dismissable-banner__action .icon-button:hover {
    color: var(--color-accent);
}
.app-body .dismissable-banner__message__actions__wrapper {
    flex-flow: row-reverse;
}
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
    background: var(--color-content-bg);
    margin: 0;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border-radius: 0;
    border-top: 1px solid var(--color-lines);
    border-bottom: 1px solid var(--color-lines);
}
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__action .icon-button {
    color: var(--color-accent);
}
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) .dismissable-banner__message {
    color: var(--color-content-fg);
}
.app-body .dismissable-banner__background-image {
    display: none;
}
.app-body .dismissable-banner__message__actions .button,
.app-body .dismissable-banner__message__actions .button.button-tertiary {
    line-height: 1.75;
    padding: 6px 17px;
}
.app-body .dismissable-banner__message__actions {
    gap: 5px;
}



/* 🔔 Notifications
   중간에 있는 미독알림표시 */
.app-body .notification.unread::before,
.app-body .status__wrapper.unread::before,
.app-body .notification-group--unread:before,
.app-body .notification-ungrouped--unread:before {
    background-color: var(--color-accent);
    width: 4px;
    border: 0;
    top: 5px;
    height: auto;
    bottom: 5px;
    border-radius: 4px;
    left: 5px;
    z-index: 2;
}



/* 📋 Lists tab */
.app-body .column-inline-form {
    background-color: var(--color-content-secondary-bg);
    border: 1px solid var(--color-lines);
    border-bottom: 0;
}
@media screen and (max-width:889px) {
    .app-body .column-inline-form {
        border-left: 0;
        border-right: 0;
    }
}
.app-body .column-inline-form label :is(input, input:focus) {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
    border-radius: 8px;
    border: 1px solid var(--color-lines);
}
.app-body .column-inline-form label input:focus {
    border-color: var(--color-accent);
}
.app-body :is(.column-subheading, .columns-area__panels__main .column-link) {
    background-color: var(--color-content-bg);
    color: var(--color-fg);
}
.app-body .item-list .column-subheading {
    color: var(--color-fg-muted);
    border-top: 0;
    border-bottom: 0;
}
.app-body .getting-started .column-subheading {
    color: var(--color-fg-muted);
}
@media screen and (max-width:889px) {
    .app-body .item-list .column-subheading {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}
.app-body .list-editor {
    background-color: var(--color-content-bg);
}
.app-body .list-editor .drawer__inner {
    background-color: var(--color-content-bg);
    border-radius: 0;
}
.app-body .list-editor__search {
    margin: 10px;
    background-color: var(--color-content-bg);
}
.app-body .list-editor .column-inline-form {
    background-color: var(--color-content-secondary-bg);
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-color: var(--color-lines);
}
.app-body .list-editor .column-inline-form .icon-button {
    color: var(--color-accent);
}
.app-body .list-editor .column-inline-form .icon-button.disabled {
    opacity: .5;
    pointer-events: none;
}
.app-body .list-editor .account {
    border-right: 0 !important;
    border-left: 0 !important;
}
.app-body .list-editor .setting-text {
    width: 100%;
    background-color: var(--color-accent-bg);
    border: 1px solid var(--color-accent-lines);
    border-radius: 8px;
    color: var(--color-content-fg);
}
.app-body .list-editor .setting-text:is(:active, :focus) {
    border-color: var(--color-accent);
    background-color: var(--color-content-bg);
}

.app-body .item-list .column-link {
    margin-left: 0;
    width: 100%;
    border-bottom: 2px solid var(--color-content-secondary-separator);
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
    box-sizing: border-box;
}
.app-body .item-list .column-link:hover {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-accent);
}
.app-body .item-list article:last-child .column-link {
    border-bottom: 0;
}
@media screen and (max-width:889px) {
    .app-body .item-list .column-link {
        border-left: 0;
        border-right: 0;
    }
    .app-body .item-list article:last-child .column-link {
        border-radius: 0;
    }
}

/* List adder dialog */
.app-body :is(.list-adder, .list-adder__account, .list-adder__lists) {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
}
.app-body .list-adder__account {
    margin-top: 12px;
}
.app-body .list-adder .column-inline-form {
    border-radius: 0;
}
.app-body .list-adder .list {
    border-bottom: 2px solid var(--color-content-secondary-separator);
}
.app-body .list-editor .drawer__pager {
    border: none;
    border-radius: 0;
}
.app-body .list-editor .account__relationship .icon-button {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.app-body .list-editor .search .search__input {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--color-accent-lines);
}
.app-body .list-editor .search .search__input:focus {
    border-color: var(--color-accent);
}

/* ➕ Follow requests */
.app-body #Follow-requests {
    margin-bottom: 0;
    z-index: 0;
}
.app-body .account-authorize__wrapper {
    margin: 0;
    border-bottom: 1px solid var(--color-lines);
}
.app-body .account-authorize {
    background-color: var(--color-content-bg);
    padding: 20px
}
.app-body .account--panel {
    background-color: var(--color-content-bg);
    border: 0;
    padding: 0 5px;
}
.app-body .account__header__content {
    color: var(--color-content-fg);
}
.app-body .account--panel__button {
    padding: 0 5px 12px 5px;
}
.app-body .account--panel__button .icon-button {
    width: 100%;
}
.app-body .account--panel__button .icon-button,
.app-body .notification-request__actions .icon-button {
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    transition: all .3s;
    border: 0;
}
.app-body .account--panel button .icon-check {
    color: var(--color-accent);
}
.app-body .account--panel button:is(:active, :focus, :hover) .icon-check {
    color: #FFFFFF;
}
.app-body .account--panel__button:first-child .icon-button,
.app-body .notification-request__actions .icon-button:last-child {
    background-color: var(--color-confirm-bg);
    color: var(--color-confirm-fg);
}
.app-body .account--panel__button:first-child .icon-button:is(:hover, :active),
.app-body .notification-request__actions .icon-button:last-child:is(:hover, :active) {
    background-color: var(--color-confirm);
    color: var(--color-accent-fg);
}
.app-body .account--panel button .icon-times {
    color: var(--color-accent);
}
.app-body .account--panel button:is(:active, :focus, :hover) .icon-times {
    color: #FFFFFF;
}
.app-body .account--panel__button:nth-child(2) .icon-button,
.app-body .notification-request__actions .icon-button:first-child {
    background-color: var(--color-reject-bg);
    color: var(--color-reject);
}
.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active),
.app-body .notification-request__actions .icon-button:first-child:is(:hover, :active) {
    background-color: var(--color-reject);
    color: var(--color-accent-fg);
}
@media screen and (max-width:1174px) {
    .app-body #Follow-requests + .column-back-button--slim .column-back-button {
        position: absolute;
        right: 0;
        margin: 0;
        width: auto;
    }
}



/* Inline Follow Suggesitons */
.app-body .inline-follow-suggestions {
    background-color: var(--color-content-bg);
    border-top: 1px solid var(--color-lines);
    border-bottom: 1px solid var(--color-lines);
    position: relative;
}
.app-body .inline-follow-suggestions__header h3 {
    font-weight: bold;
    color: var(--color-content-fg);
}
.app-body .inline-follow-suggestions__body__scrollable {
    scroll-padding: 60px;
}
.app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar {
    height: 5px;
}
.app-body .inline-follow-suggestions__body__scrollable::-webkit-scrollbar-thumb {
    opacity: 1;
    border-radius: 0;
}
.app-body .inline-follow-suggestions__body__scrollable__card {
    border-radius: 8px;
    background-color: var(--color-content-secondary-bg);
    border: 0;
}
.app-body .inline-follow-suggestions__body__scrollable__card :is(.display-name__html, .display-name__account),
.app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source {
    color: var(--color-content-fg);
}
.app-body .inline-follow-suggestions__body__scrollable__card .display-name__account {
    opacity: .6;
}
.app-body .inline-follow-suggestions__body__scrollable__card .verified-badge {
    color: var(--color-accent);
}
.app-body .inline-follow-suggestions__body__scrollable__card button:active {
    transform: scale(.95);
}
.app-body .inline-follow-suggestions__body__scroll-button__icon {
    background-color: var(--color-accent);
    border-radius: 8px;
    padding: 6px;
    transition: all .3s;
}
.app-body .inline-follow-suggestions__body__scroll-button {
    opacity: 1;
}
.app-body .inline-follow-suggestions__body__scroll-button:is(:active) .inline-follow-suggestions__body__scroll-button__icon {
    transform: scale(.9);
}
.app-body .inline-follow-suggestions__body__scroll-button:is(:active, :focus, :hover) .inline-follow-suggestions__body__scroll-button__icon {
    background-color: var(--color-accent-focus);
}
.app-body .inline-follow-suggestions__body__scroll-button.left {
    background: linear-gradient(to right, var(--color-content-bg), transparent);
    margin-left: -15px;
    padding-left: 21px;
}
.app-body .inline-follow-suggestions__body__scroll-button.right {
    background: linear-gradient(to left, var(--color-content-bg), transparent);
    margin-right: -15px;
    padding-right: 21px;
}

.app-body .inline-follow-suggestions__body__scrollable__card .account__avatar {
    border-radius: 50px;
    background-color: var(--color-content-bg);
    border: 3px solid var(--color-content-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    transform: translateY(3px);
}

.app-body .inline-follow-suggestions .button:is(.button-secondary, .button-tertiary) {
    padding: 7px 18px;
}
.app-body .inline-follow-suggestions__body__scrollable__card__text-stack__source .icon {
    width: 17px;
    height: 17px;
}


.app-body .button,
.app-body .account__header__tabs__buttons .icon-button {
    border-radius: 8px;
}
.app-body .button,
.app-body .button.logo-button,
.app-body .rules-list li:before,
.app-body .icon-with-badge__badge {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
    transition: all .2s;
}
.app-body .button:disabled,
.app-body .button.disabled {
    opacity: .7;
}
.app-body .text-icon-button.active,
.app-body .button.button-tertiary,
.app-body .account__header__fields a,
.app-body .account__header__bio .account__header__fields a,
.app-body .reply-indicator__content a.unhandled-link,
.app-body .status__content a,
.app-body .status__content a.hashtag,
.app-body .status__content a.unhandled-link,
.app-body .column-back-button,
.app-body .about__section__title,
.app-body .prose a,
.app-body .column-link--transparent.active,
.app-body .column-header > .column-header__back-button,
.app-body .column-header__back-button,
.app-body .interaction-modal__icon,
.app-body .status__content a.mention,
.app-body .status__content__read-more-button,
.app-body .link-button,
.app-body .translate-button button,
.app-body .status__content__translate-button,
.app-body .status__action-bar__dropdown .icon-button.active,
.app-body .account__relationship .icon-button.active,
.app-body .account__header__tabs__buttons .icon-button.active,
.app-body .text-btn,
.app-body .detailed-status__action-bar-dropdown .icon-button,
.app-body .notification-bar-action {
    color: var(--color-accent);
}
.app-body .icon-button,
.app-body .icon-button.inverted {
    color: var(--color-content-fg);
}
.app-body .account__header__tabs__buttons .icon-button {
    padding: 6px;
    border: 0;
    color: var(--color-content-fg);
    background-color: var(--color-content-secondary-bg);
}
.app-body .account__header__tabs__buttons .icon-button:hover {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
}
.app-body .account__header__tabs__buttons .icon-button:has(.icon-ellipsis-v, .icon-close).active {
    background-color: var(--color-accent);
}
.app-body .icon-button {
    border-radius: 8px;
    transition: all .2s;
}
.app-body .icon-button:is(:active, :focus, :hover) {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
}
.app-body .account__header__tabs__buttons .icon-button.active .icon-bell {
    animation: bell-ring .4s ease-in 1;
    transform-origin: top center;
}
.app-body .account__header__tabs__buttons .icon-button.active:has(.icon-bell):is(:active, :focus) {
    background-color: var(--color-content-secondary-bg);
}
.app-body .language-dropdown__dropdown {
    background-color: var(--color-content-bg);
    border-radius: 8px;
    border: 1px solid var(--color-lines);
    box-shadow: var(--dropdown-shadow);
    padding: 0;
}
.app-body .language-dropdown__dropdown__results__item {
    border-radius: 8px;
}
.app-body .language-dropdown__dropdown__results__item.active,
.app-body .language-dropdown__dropdown__results__item.active:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) {
    background-color: var(--color-accent-bg);
}
.app-body .language-dropdown__dropdown__results__item__native-name {
    font-weight: bold;
}
.app-body .language-dropdown__dropdown__results__item__common-name {
    opacity: .7;
}
.app-body
:is(.language-dropdown__dropdown__results__item__common-name,
    .language-dropdown__dropdown__results__item__native-name) {
    color: var(--color-content-fg);
}
.app-body
.language-dropdown__dropdown__results__item:is(.active, .active:hover)
:is(.language-dropdown__dropdown__results__item__common-name,
    .language-dropdown__dropdown__results__item__native-name) {
    color: var(--color-accent-fg);
}
.app-body
.language-dropdown__dropdown__results__item:is(:active, :focus, :hover)
:is(.language-dropdown__dropdown__results__item__native-name,
    .language-dropdown__dropdown__results__item__common-name) {
    color: var(--color-accent);
}
.app-body .button:not(.button-secondary):is(:active, :hover),
.app-body .button.button-tertiary:is(:active, :hover),
.app-body .button.logo-button:is(:active, :hover) {
    background-color: var(--color-accent-focus);
}

.app-body .react-toggle {
    transition: transform .3s;
}
.app-body .react-toggle:active {
    transform: scale(.9);
}
.app-body .react-toggle-track,
.app-body .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
    background-color: var(--color-fg-muted);
    transition: all .2s;
}
.app-body .react-toggle-thumb {
    border: 0;
    background-color: #ffffff;
}
.app-body .react-toggle.react-toggle--checked .react-toggle-track,
.app-body .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track,
.app-body .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
    background-color: var(--color-accent);
}
.app-body .react-toggle--checked .react-toggle-thumb {
    border-color: var(--color-accent);
}
.app-body .react-toggle--focus {
    outline: 0;
}

.app-body .radio-button {
    color: var(--color-content-fg);
}
.app-body .radio-button__input,
.app-body .poll__input,
.app-body .check-box__input {
    border-width: 4px;
    border-color: var(--color-content-bg);
    background-color: var(--color-accent-bg);
    outline: 1px solid var(--color-accent) !important;
    outline-offset: -1px;
    transition: transform .3s;
    width: 20px;
    height: 20px;
}
.app-body .radio-button:active .radio-button__input,
.app-body .poll__option:active .poll__input,
.app-body .check-box:active .check-box__input {
    transform: scale(.9);
}
.app-body .radio-button__input.checked,
.app-body .poll__input.active {
    background-color: var(--color-accent);
}
.app-body .check-box__input.checked:before,
.app-body .radio-button__input.checked:before {
    display: none;
}
.app-body .check-box__input.checked,
.app-body .radio-button__input.checked {
    background-color: var(--color-accent);
}
.app-body .check-box__input.checked .icon-check {
    transform: scale(.5);
}

.app-body .dropdown-menu {
    border: 1px solid var(--color-lines);
    border-radius: 8px;
}
.app-body .dropdown-menu,
.app-body .dropdown-menu__container__header,
.app-body .dropdown-menu__item.edited-timestamp__history__item,
.app-body .dropdown-menu__item :is(a, button) {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
    border-color: var(--color-lines);
}

.app-body .dropdown-menu__item a,
.app-body .dropdown-menu__arrow:before {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
    border: 0;
}
.app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) {
    background: var(--color-accent);
    color: var(--color-accent-fg);
    outline: 0;
}
.app-body .dropdown-menu__separator {
    border-color: var(--color-content-secondary-separator);
}

.app-body .dropdown-menu__container__list--scrollable {
    overflow-y: auto;
}

.app-body .privacy-dropdown__dropdown {
    background-color: var(--color-content-bg);
    border-radius: 8px;
    border: 1px solid var(--color-lines);
    box-shadow: var(--dropdown-shadow);
    padding: 8px;
}
.app-body .privacy-dropdown :is(.privacy-dropdown__value, .privacy-dropdown__value),
.app-body .privacy-dropdown__option {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
    border-radius: 6px;
    margin-bottom: 2px;
}
.app-body .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active),
.app-body .privacy-dropdown__option:is(.active, .active:hover, :hover) {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.app-body .privacy-dropdown.active .privacy-dropdown__value:has(.text-icon-button.active) {
    border-radius: 6px 6px 0 0;
}
.app-body .privacy-dropdown__option .privacy-dropdown__option__content,
.app-body .privacy-dropdown__option .privacy-dropdown__option__content strong {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
}
.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content,
.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content strong,
.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content,
.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
.app-body .privacy-dropdown.active .privacy-dropdown__value.active .icon-button,
.app-body .privacy-dropdown .icon-button.inverted.active {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe {
    color: #FFFFFF;
}
.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock {
    color: #FFFFFF;
}
.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock {
    color: #FFFFFF;
}
.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at {
    color: #FFFFFF;
}
.app-body .privacy-dropdown__option .icon-info-circle path {
    fill: var(--color-content-fg);
}
.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-info-circle path {
    fill: var(--color-accent-fg);
}

.app-body .dropdown-animation {
    animation: fadein-short .2s 1;
}

.app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) {
    background-color: transparent;
}
.app-body .button.button-tertiary.button--confirmation {
    color: #4e8a6b;
    background-color: rgba(121, 189, 154, 0.3);
}
.app-body .button.button-tertiary.button--destructive {
    color: #df405a;
    background-color: rgba(223, 64, 90, 0.3);
}
.app-body .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) {
    background-color: #79bd9a;
    color: #ffffff;
}
.app-body .button.button-tertiary.button--destructive:is(:active, :focus, :hover) {
    background-color: #df405a;
    color: #ffffff;
}
@media (prefers-color-scheme: dark) {
    .app-body .button.button-tertiary.button--confirmation {
        color: #72cb9d;
    }
    .app-body .button.button-tertiary.button--destructive {
        color: #f3637b;
    }
}
.app-body
    :is(
        .block-modal__cancel-button,
        .confirmation-modal__cancel-button,
        .confirmation-modal__secondary-button,
        .mute-modal__cancel-button
    ):not(:hover) {
        background-color: color-mix(in srgb, var(--color-accent), transparent 90%);
        color: var(--color-accent);
}
.app-body
    :is(
        .block-modal__cancel-button,
        .confirmation-modal__cancel-button,
        .confirmation-modal__secondary-button,
        .mute-modal__cancel-button
    ):is(:active, :hover) {
        background-color: color-mix(in srgb, var(--color-accent), transparent 70%) !important;
        color: var(--color-accent);
}
.app-body
    :is(
        .block-modal__cancel-button,
        .confirmation-modal__cancel-button,
        .confirmation-modal__secondary-button,
        .mute-modal__cancel-button
    ):active,
    :is(
        .block-modal__cancel-button,
        .confirmation-modal__cancel-button,
        .confirmation-modal__secondary-button,
        .mute-modal__cancel-button
    )
    + button:active {
        transform: scale(.95);
}
.app-body .status__content a.hashtag {
    color: var(--color-accent);
}



/* 🖱️ Interaction modals
   --------------------- */
.app-body .modal-root__modal:not(.media-modal) {
    border: 0;
    outline: 1px solid var(--color-lines-translucent);
}
@media screen and (max-width:1174px) {
    .app-body .modal-root__modal:not(.media-modal) {
        margin-top: unset;
    }
}
.app-body .compare-history-modal {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
}
.app-body .compare-history-modal .report-modal__target {
    border-color: var(--color-lines);
}
.app-body .safety-action-modal {
    border: 1px solid var(--color-lines);
    background-color: var(--color-content-bg);
    border-radius: 8px;
}
.app-body .safety-action-modal__confirmation,
.app-body .safety-action-modal__confirmation strong,
.app-body .safety-action-modal__confirmation h1 {
    color: var(--color-content-fg);
}
.app-body .safety-action-modal__header__icon {
    background-color: var(--color-accent);
}
.app-body .safety-action-modal__header,
.app-body .safety-action-modal__header h1,
.app-body .safety-action-modal__caveats,
.app-body .safety-action-modal__bullet-points {
    color: var(--color-content-fg);
}
.app-body :is(.safety-action-modal__header, .safety-action-modal__confirmation) h1 {
    font-weight: 600;
}
.app-body .safety-action-modal__confirmation h1 {
    font-size: 150%;
    padding-top: 20px;
}
.app-body .safety-action-modal__header h1 + div {
    opacity: .6;
}
.app-body .safety-action-modal__top {
    background-color: transparent;
    border: 0;
}
.app-body .safety-action-modal__bottom {
    background-color: var(--color-content-secondary-bg);
    padding-top: 24px;
    border: 0;
    border-radius: 0 0 8px 8px;
}
.app-body .safety-action-modal__bullet-points__icon .icon {
    transform: scale(1.3);
}
.app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon {
    color: var(--color-accent);
}
.app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon {
    color: var(--color-accent);
}
.app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon {
    color: var(--color-accent);
}
.app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon {
    color: var(--color-accent);
    transform: scale(1);
}
.app-body .safety-action-modal__field-group label {
    color: var(--color-content-fg);
}
.app-body .report-modal {
    background-color: var(--color-content-bg);
}
.app-body .actions-modal {
    background-color: var(--color-content-bg);
}
.app-body .interaction-modal {
    background-color: var(--color-content-bg);
    border-radius: 10px;
    box-shadow: var(--dropdown-shadow);
}
.app-body .interaction-modal,
.app-body .interaction-modal__lead h3 {
    color: var(--color-content-fg);
}
.app-body .interaction-modal__lead p,
.app-body .interaction-modal__choices__choice p {
    color: var(--color-fg);
}
.app-body .interaction-modal__icon {
    transform: scale(1.4) translateX(-2px);
}
.app-body .interaction-modal :is(p, strong) {
    color: var(--color-content-fg);
}
.app-body .interaction-modal p.hint {
    color: var(--color-content-fg-muted);
}
.app-body .interaction-modal :is(.button, .button.button-tertiary) {
    padding: 10px 18px;
}
.app-body .interaction-modal .button.button-tertiary:hover {
    background-color: var(--color-content-secondary-separator);
}
.app-body .copypaste input,
.app-body .interaction-modal__login__input {
    border-color: var(--color-lines);
    background-color: var(--color-content-secondary-bg);
    color: var(--color-content-fg);
    border-radius: 8px;
    outline: 0 solid var(--color-accent-bg);
    transition: all .2s;
}
.app-body .interaction-modal__login.expanded .interaction-modal__login__input {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.app-body .interaction-modal__login__input input::placeholder {
    color: var(--color-content-fg-muted);
}
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
    background-color: var(--color-content-bg);
    border-color: var(--color-accent);
    outline: 3px solid var(--color-accent-bg);
}
.app-body .interaction-modal__login .search__popout {
    border-color: var(--color-lines);
}
.app-body .interaction-modal .copypaste button {
    padding: 8px 18px;
}
.app-body .interaction-modal,
.app-body .boost-modal__container,
.app-body .mute-modal__container,
.app-body .block-modal__container {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
}
.app-body .boost-modal__container {
    margin-bottom: -11px;
}
.app-body .confirmation-modal__container,
.app-body .mute-modal__container,
.app-body .block-modal__container {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
}
.app-body .block-modal__action-bar,
.app-body .boost-modal__action-bar,
.app-body .confirmation-modal__action-bar,
.app-body .mute-modal__action-bar {
    background-color: var(--color-accent-bg);
}
.app-body .block-modal__action-bar > div,
.app-body .boost-modal__action-bar > div,
.app-body .confirmation-modal__action-bar > div,
.app-body .mute-modal__action-bar > div,
.app-body .boost-modal__container .status__content__text,
.app-body .boost-modal__container .display-name strong.display-name__html,
.app-body .boost-modal__container .status__info,
.app-body .boost-modal__container .status__relative-time time,
.app-body .boost-modal__container .status.light .status__visibility-icon {
    color: var(--color-content-fg);
}
.app-body .actions-modal ul li:not(:empty) a {
    color: var(--color-content-fg);
}
.app-body .actions-modal ul li:not(:empty)
a:is(.active,
    .active button,
    :active,
    :active button,
    :focus,
    :focus button,
    :hover,
    :hover button) {
        background-color: var(--color-accent);
        color: var(--color-accent-fg);
}


/* Media modals */
.app-body .modal-root__overlay:has(+ div > .media-modal) {
    background-color: #030303 !important;
}
.app-body .modal-root__overlay {
    background-color: rgb(0, 0, 0, .4);
}
@media (prefers-color-scheme: dark) {
    .app-body .modal-root__overlay {
        background-color: rgb(0, 0, 0, .9);
    }
}
.app-body .media-modal__buttons .icon-button,
.app-body .media-modal__nav {
        background-color: #1e1e1e;
        color: #777777;
        height: 44px;
        width: 44px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: .2s all;

}
.app-body .media-modal__buttons .icon-button:is(:active, :focus, :hover),
.app-body .media-modal__nav:is(:active, :focus, :hover) {
        background-color: #343434;
        color: #ffffff;
}
.app-body .media-modal__close {
    top: 24px;
    left: 24px;
}
.app-body .media-modal__zoom-button {
    top: 24px;
    right: 24px;
}
.app-body .media-modal__nav--left {
    left: 24px;
}
.app-body .media-modal__nav--right {
    right: 24px;
}
@media screen and (max-width:889px) {
    .app-body .media-modal__nav {
        display: none;
    }
}

.app-body .media-modal__overlay .picture-in-picture__footer {
    background-color: transparent
}
.app-body .media-modal__overlay .picture-in-picture__footer .icon-button > svg {
    width: 25px;
    height: 25px;
}
.app-body .media-modal__overlay .picture-in-picture__footer .icon-button:is(:active, :hover, :focus) {
    background-color: transparent !important;
}
.app-body .picture-in-picture__footer .animated-number {
    color: var(--color-accent);
}
.app-body .media-modal__page-dot {
    background-color: #858585;
}
.app-body .media-modal__overlay .icon-external-link path {
    fill: var(--color-accent);
}

.app-body .modal-root > div {
    animation: slowin .3s 1;
}



/* Report modals */
.app-body .report-dialog-modal__lead {
    color: var(--color-content-fg-muted);
}
.app-body .report-dialog-modal {
    background-color: var(--color-content-bg);
}
.app-body .report-dialog-modal .dialog-option,
.app-body .report-dialog-modal .poll__option.dialog-option:last-child {
    border-top: 1px solid var(--color-lines);
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
    border-bottom: 1px solid var(--color-lines);
    padding: 15px;
    margin-bottom: 5px;
    border-radius: 8px;
    transition: all .2s;
}
.app-body .report-dialog-modal .dialog-option:hover,
.app-body .report-dialog-modal .poll__option.dialog-option:hover,
.app-body .report-dialog-modal .dialog-option:has(.poll__input.active) {
    border-top: 1px solid var(--color-accent);
    border-left: 1px solid var(--color-accent);
    border-right: 1px solid var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
}

.app-body .report-dialog-modal .dialog-option .poll__input,
.app-body .report-dialog-modal__textarea:focus {
    border-color: var(--color-accent);
}
.app-body .report-dialog-modal .dialog-option .poll__input.active {
    background-color: var(--color-accent);
}
.app-body .report-dialog-modal .dialog-option .poll__input svg {
    display: none;
}
.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text,
.app-body .report-dialog-modal .dialog-option time,
.app-body .report-dialog-modal .status__content > p:first-child:has(.status__content__spoiler-link) > span,
.app-body .report-dialog-modal__toggle,
.app-body .report-dialog-modal__subtitle,
.app-body .report-modal__comment .setting-text-label,
.app-body .report-dialog-modal .status__content__text p,
.app-body .report-dialog-modal__title,
.app-body .report-modal__target {
    color: var(--color-content-fg);
}
.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong {
    color: var(--color-content-fg-bold)
}
.app-body .report-modal__comment,
.app-body .report-modal__container,
.app-body .report-dialog-modal__container {
    border-color: var(--color-lines);
}
.app-body .report-modal__comment {
    color: var(--color-content-fg-muted);
}
.app-body #upload-modal__description {
    background-color: var(--color-content-bg);
    border: 1px solid var(--color-lines);
    border-radius: 8px;
    color: var(--color-content-fg);
}
.app-body #upload-modal__description:focus {
    border-color: var(--color-accent);
}
.app-body .setting-text__wrapper {
    background-color: var(--color-content-bg);
    border: 0;
}
.app-body .report-dialog-modal__textarea {
    background-color: var(--color-secondary-bg);
    border: 1px solid var(--color-lines);
    border-radius: 8px;
    color: var(--color-content-fg);
}
.app-body .report-dialog-modal__textarea::placeholder {
    color: var(--color-content-fg);
    opacity: .5;
}



/* 🖼️ Picture in Picture */
.app-body .picture-in-picture {
    z-index: 3;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 8px;
    border: 1px solid var(--color-lines);
}
.app-body .picture-in-picture__header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.app-body .picture-in-picture__footer {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.app-body .picture-in-picture .video-player {
    border: 0;
}
.app-body .picture-in-picture__footer,
.app-body .picture-in-picture__header {
    background-color: var(--color-content-bg);
}
.app-body .picture-in-picture__header .display-name span {
    color: var(--color-content-fg-muted);
}

.app-body .picture-in-picture-placeholder {
    border-radius: 8px;
    background-color: var(--color-content-secondary-bg);
    border-color: var(--color-lines);
    color: var(--color-accent);
}

/* ⏯️ Video controls */
.app-body .video-player__seek__progress,
.app-body .video-player__volume__handle,
.app-body .video-player__volume__current,
.app-body .video-player__seek__handle {
    background-color: var(--color-accent);
}


/* 📄 Meta footer */
.app-body .link-footer {
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-flow: column;
    padding: 20px 0 0;
}
.app-body .link-footer p,
.app-body .link-footer a {
    color: var(--color-fg-muted);
}
.app-body .link-footer::after {
    content: var(--meta);
    color: var(--color-fg-muted);
    order: 10;
}


/* Server banner */
.app-body .server-banner__introduction {
    display: none;
}
.app-body .server-banner {
    padding: 0 0 20px;
}
.app-body .server-banner__hero {
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    border: 1px solid var(--color-lines-translucent);
    border-bottom: 0;
    background-color: var(--color-content-bg);
    box-sizing: border-box;
}
.app-body .server-banner__description {
    padding: 20px 15px 20px;
    margin-bottom: 0;
    background-color: var(--color-content-bg);
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
    color: var(--color-content-fg);
}
.app-body .server-banner__meta {
    padding: 0 15px 20px;
    background-color: var(--color-content-bg);
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
    border-bottom: 1px solid var(--color-lines);
    gap: 0;
    margin: 0;
    border-radius: 0 0 8px 8px;
    align-items: end;
}
.app-body .server-banner h4 {
    color: var(--color-fg);
    font-size: 80%;
}
.app-body .server-banner__number {
    color: var(--color-content-fg);
    font-size: 15px;
}
.app-body .server-banner__number-label {
    color: var(--color-content-fg);
}
.app-body .server-banner .account {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}
.app-body .server-banner .account .display-name__account {
    opacity: .7;
}
.app-body .server-banner__meta__column:first-child {
    width: calc(60% - 5px);
}
.app-body .server-banner__meta__column:nth-child(2) {
    width: calc(40% - 5px);
}
.app-body .server-banner .button.button-secondary {
    padding: 10px;
    margin: 10px 0;
}
.app-body .button.button-secondary,
.app-body .button.button-tertiary {
    border: 0;
    background-color: color-mix(in srgb, var(--color-accent), transparent 82%);
    color: var(--color-accent);
}
.app-body .hover-card .button:not(.button--destructive) {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
    line-height: 1.375;
    padding: 10px 18px;
}
.app-body .hover-card .button:not(.button--destructive):hover {
    background-color: var(--color-accent-focus);
}
.app-body .button:is(.button-secondary, .button-tertiary):hover {
    background-color: color-mix(in srgb, var(--color-accent), transparent 70%);
}
.app-body .button.button--destructive:is(:active, :hover, :focus) {
    background-color: var(--color-reject);
    color: var(--color-accent-fg);
}
.app-body .sign-in-banner .button,
.app-body .button:is(.button-secondary, .button-tertiary) {
    padding: 10px 18px;
}
.app-body .sign-in-banner .button:active,
.app-body .button:is(.button-secondary, .button-tertiary):active {
    transform: scale(.95);
}
@media screen and (max-width:1174px) {
    .app-body .button.button-tertiary {
        padding: 7px 18px;
    }
}
.app-body .sign-in-banner {
    padding: 10px;
}
.app-body .navigation-panel__sign-in-banner hr {
    display: block;
    border-color: var(--color-lines-translucent);
    margin: 12px 15px;
    opacity: .5;
}
.app-body .sign-in-banner p {
    color: var(--color-fg-muted);
    padding: 0 5px 5px;
}
.app-body .sign-in-banner p strong {
    color: var(--color-fg);
    font-weight: 500;
}
.app-body .sign-in-banner p:nth-child(2) {
    font-size: 85%;
    line-height: 1.325;
}
.app-body .sign-in-banner p {
    margin-bottom: 25px;
}
.app-body .sign-in-banner p:first-child {
    margin-bottom: 5px;
}



/* 🤗 Onboarding */
.app-body .scrollable.follow-recommendations-container,
.app-body .column-list {
    background-color: var(--color-content-bg);
}
.app-body .column-title .logo {
    display: none;
}
.app-body .column-title h3,
.app-body .column-title p {
    color: var(--color-content-fg);
}
.app-body .column-list {
    border: 0;
}
.app-body .account__note {
    color: var(--color-content-fg-muted);
}

.app-body .onboarding__steps__item,
.app-body .onboarding__link {
    background-color: var(--color-content-secondary-bg);
    margin-bottom: 8px;
    transition: all .2s;
}
.app-body .onboarding__steps__item:is(:active, :focus, :hover),
.app-body .onboarding__link:is(:active, :focus, :hover) {
    background-color: var(--color-accent-bg);
}
.app-body .onboarding__steps__item__icon,
.app-body .onboarding__link {
    color: var(--color-accent);
}
.app-body .onboarding__steps__item__description h6,
.app-body .onboarding__steps__item__description p,
.app-body .onboarding__lead,
.app-body .onboarding__lead strong {
    color: var(--color-content-fg);
}
.app-body .onboarding__steps__item__go svg path,
.app-body .onboarding__link svg path {
    fill: var(--color-accent);
}
.app-body .app-form__avatar-input,
.app-body .app-form__header-input {
    background-color: var(--color-accent-bg);
    transition: all .2s;
}
.app-body .app-form__avatar-input:hover,
.app-body .app-form__header-input:hover {
    background-color: color-mix(in srgb, var(--color-accent), transparent 75%);
}
.app-body .app-form__header-input {
    border-top: 1px solid var(--color-lines);
}
.app-body .app-form__header-input .icon {
    color: var(--color-accent);
    transform: scale(1.4) translateX(-50%) translateY(-25%);
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
}
.app-body .onboarding__profile .app-form__avatar-input {
    border-color: var(--color-content-bg);
    border-radius: 50%;
    border-width: 5px;
}
.app-body .onboarding__profile .app-form__avatar-input img {
    border-radius: 50%;
    background: var(--color-content-secondary-bg);
}
.app-body .onboarding__profile .app-form__header-input img {
    background: var(--color-accent-bg);
}
.app-body .simple_form .input.with_block_label > label,
.app-body .simple_form .input.with_block_label .hint,
.app-body .app-form__toggle__label strong,
.app-body .simple_form .hint {
    color: var(--color-fg);
}
.app-body .app-form__toggle__toggle > div {
    border-color: var(--color-lines);
}
.app-form__avatar-input.selected .icon,
.app-form__header-input.selected .icon {
    color: var(--color-accent);
}
.app-body .simple_form
    :is(
        input[type=datetime-local],
        input[type=email],
        input[type=number],
        input[type=password],
        input[type=text],
        input[type=url],
        textarea
    ) {
        background-color: var(--color-content-secondary-bg);
        border-color: var(--color-lines);
        border-radius: 8px;
        color: var(--color-content-fg);
}
.app-body .simple_form
    :is(
        input[type=datetime-local],
        input[type=email],
        input[type=number],
        input[type=password],
        input[type=text],
        input[type=url],
        textarea
    ):is(:active, :focus) {
        border-color: var(--color-accent);
}
.app-body .column-title {
    margin: -20px -20px 30px;
    padding: 50px 40px 40px;
}
.app-body .column-title:not(:has(.onboarding__illustration)) {
    background-color: var(--color-content-secondary-bg);
}
.app-body .column-title:has(+ .simple_form) {
    margin-bottom: 0;
    background-color: var(--color-content-secondary-bg);
}
.app-body .follow-recommendations {
    background-color: var(--color-content-bg);
}
.app-body .follow-recommendations .account {
    border-left: 0;
    border-right: 0;
    margin-bottom: 15px;
}
.app-body .follow-recommendations .account__note {
    color: var(--color-content-fg);
    opacity: .7;
}
.app-body .follow-recommendations .account__note p {
    overflow: hidden;
}

.app-body .copy-paste-text {
    background-color: var(--color-accent-bg);
    border-color: var(--color-accent-lines);
    color: var(--color-content-fg);
}
.app-body .copy-paste-text:is(:focus, :active),
.app-body .tip-carousel:focus {
    border-color: var(--color-accent);
}
.app-body .copy-paste-text:has(textarea:focus) {
    border-color: var(--color-accent);
}


/* 📢 Announcements 마지막만 수정함 */
.app-body .announcements,
.app-body .announcements::after {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-content-fg);
}
.app-body .announcements {
    overflow: visible;
    z-index: 0;
    box-shadow: 0 -20px var(--color-bg);
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
    border-bottom: 1px solid var(--color-lines);
}
.app-body .announcements__item strong {
    font-weight: 800;
    color: var(--color-content-fg-bold);
}
.app-body .announcements__item__unread {
    color: var(--color-accent);
    background-color: var(--color-accent);
}
.app-body .announcements__pagination,
.app-body .announcements__pagination .icon-button {
    color: var(--color-content-fg);
}
.app-body .announcements__pagination > * {
    vertical-align: middle;
}
.app-body .reactions-bar__item {
    background-color: var(--color-accent-bg);
    border-radius: 8px;
    padding: 2px 8px;
}
.app-body .reactions-bar .emoji-picker-dropdown .icon-button {
    padding: 3px;
}
.app-body .reactions-bar__item:is(:active, :hover, :focus) {
    background-color: var(--color-content-bg);
}
.app-body .reactions-bar__item.active,
.app-body .reactions-bar .emoji-picker-dropdown .icon-button.active.inverted {
    background-color: var(--color-accent);
}
.app-body .reactions-bar__item__count,
.app-body .reactions-bar__item__count .animated-number {
    color: var(--color-accent);
}
.app-body .reactions-bar__item:is(:active, :hover, :focus) .reactions-bar__item__count .animated-number {
    color: var(--color-content-fg);
}
.app-body .reactions-bar__item.active .reactions-bar__item__count .animated-number {
    color: var(--color-accent-fg);
}
.app-body .reactions-bar .emoji-button,
.app-body .announcements__item__content a.unhandled-link,
.app-body .announcements__item__content a {
    color: var(--color-accent);
}
.app-body .announcements .emoji-button {
    margin: 0;
}
@media screen and (max-width:1174px) {
    .app-body .announcements {
        box-shadow: none;
        margin-top: 1px;
        border-left: 0;
        border-right: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .app-body .announcements__mastodon {
        border-radius: 0;
    }
}



/* 404 */
.app-body .empty-column-indicator,
.app-body .error-column {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
}
.app-body .error-column__message h1,
.app-body .error-column__message {
    color: var(--color-content-fg);
}
.app-body .error-column__image {
    margin-top: 0;
}
.app-body .regeneration-indicator {
    background-color: var(--color-content-bg);
}
@media screen and (min-width:890px) {
    .app-body .regeneration-indicator {
        padding-top: 50px;
        padding-bottom: 40px;
    }
}



/* 📜 About page
   ------------- */
.app-body .scrollable.about {
    background-color: var(--color-content-bg);
    border: 1px solid var(--color-lines);
    border-bottom: 0;
    display: flex;
    flex-flow: column;
    padding-bottom: 20px;
    z-index: 1;
}
@media screen and (max-width:889px) {
    .app-body .scrollable.about {
        border-left: 0;
        border-right: 0;
    }
}
.app-body .about__header {
    order: 1;
    margin-bottom: 10px;
}
.app-body .about__section:nth-child(3) {
    order: 3;
}
.app-body .about__meta {
    order: 2;
}
.app-body .about__section:nth-child(4) {
    order: 4;
}
.app-body .about__section:nth-child(5) {
    order: 5;
}
.app-body .about .link-footer {
    order: 6;
}
.app-body .about__footer {
    order: 7;
}
.app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title {
    display: none;
}
.app-body .about__header p,
.app-body .about__meta h4 {
    color: var(--color-fg);
}
.app-body .about__header__hero {
    margin: -20px -20px 20px;
    width: calc(100% + 40px);
    border-radius: 0;
    background-color: var(--color-content-bg);
}
.app-body .about__header__hero,
.app-body .about__meta {
    margin-bottom: 10px;
}
.app-body .about__header > h1 {
    color: var(--color-content-fg);
    margin: 30px 0 0 20px;
    text-align: left;
    font-variant: small-caps;
    font-size: 20px;
}
.app-body .about__header > h1 + p {
    color: var(--color-content-fg);
    opacity: .8;
    text-align: left;
    margin-left: 20px;
    margin-bottom: 15px;
    font-size: 14px;
}
@media screen and (min-width:890px) {
    .app-body .scrollable.about {
        border-radius: 8px 8px 0 0 !important;
    }
    .app-body .about__header__hero {
        border-radius: 6px 6px 0 0;
    }
}
@media screen and (min-width:890px) and (max-width:1174px) {
    .app-body .scrollable.about {
        margin-top: 10px;
    }
}
.app-body .about__mail {
    color: var(--color-content-fg);
}
.app-body .about__meta h4 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
}
.app-body .about__meta .account {
    background: none;
    box-shadow: none;
    padding: 0;
    border-left: 0;
    border-right: 0;
}
.app-body .about__meta__divider {
    border-left: 3px solid var(--color-content-secondary-separator);
}
@media screen and (max-width:600px) {
    .app-body .about__meta__divider {
        border-top: 3px solid var(--color-content-secondary-separator);
        width: 90%;
    }
}
.app-body .about__section:nth-child(3) .about__section__body {
    padding-bottom: 3em;
}
.app-body .about__meta,
.app-body .about__section__title {
    color: var(--color-accent);
    background-color: var(--color-content-secondary-bg);
    border: 0;
    border-radius: 8px;
}
.app-body .about__section.active .about__section__title {
    border-radius: 8px 8px 0 0;
}
.app-body .about__section.active:not(:nth-of-type(3)) .about__section__body {
    border: 0 !important;
    background-color: var(--color-content-secondary-bg);
    border-radius: 0 0 8px 8px;
}

.app-body .prose,
.app-body .prose p,
.app-body .prose b,
.app-body .prose h1,
.app-body .prose h2,
.app-body .prose h3,
.app-body .prose h4,
.app-body .prose h5,
.app-body .prose h6,
.app-body .prose strong,
.app-body .rules-list,
.app-body .about__domain-blocks__domain h6,
.app-body .about__domain-blocks__domain__type {
    color: var(--color-content-fg);
}
.app-body .prose ul > li:before {
    background-color: var(--color-content-fg);
    opacity: .3;
    top: .55em;
    width: 7px;
    height: 7px;
}
.app-body .about__section__body .prose hr {
    border-color: var(--color-content-secondary-separator);
    margin-top: 2em;
    margin-bottom: 2em;
    border-width: 3px;
}
.app-body .hover-card__bio a,
.app-body .hover-card .account-fields a {
    text-decoration: none;
    color: var(--color-accent);
}
.app-body .about__section__body .prose a,
.app-body .about__section__body .prose a:hover,
.app-body .prose a strong,
.app-body .hover-card__bio a span {
    color: var(--color-accent);
    text-decoration-line: underline;
    text-decoration-color: var(--color-accent-bg);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.app-body .about__section__body .prose a:hover :is(span, strong),
.app-body .hover-card__bio a:hover {
    text-decoration-color: var(--color-accent);
}
.app-body .about__section__body .prose small.lang_label {
    margin-left: -2em;
    margin-top: 1px;
    display: block;
    color: var(--color-content-fg-muted);
    font-weight: bold;
    font-size: 80%;
    float: left;
}
.about__section.active .about__section__title {
    background-color: var(--color-accent-bg);
}
.app-body .rules-list__text,
.app-body .rules-list__hint {
    color: var(--color-content-fg);
}
.app-body .rules-list__text {
    font-weight: 600;
}
.app-body .rules-list__hint {
    opacity: .7;
    padding-top: 4px;
}
.app-body .rules-list li {
    border-bottom: 1px solid var(--color-lines);
    padding: 1em 1.75em 1em 3.4em;
}
.app-body .rules-list li:last-child {
    border-bottom: 0;
}
.about__domain-blocks {
    background-color: var(--color-content-bg);
    border: 0;
}
.about__domain-blocks__domain {
    color: var(--color-content-fg);
    border-bottom: 0;
}
.about__domain-blocks__domain:nth-child(2n) {
    background-color: var(--color-content-secondary-bg);
}

@media screen and (min-width:1175px) {
    .app-body .about :is(.link-footer, .about__footer) {
        display: none;
    }
}


/* Keyboard shortcuts page */
.keyboard-shortcuts kbd {
    background-color: var(--color-content-secondary-bg);
    border: 1px solid var(--color-lines);
    box-shadow: 0 1px var(--color-lines-translucent);
    color: var(--color-content-fg);
    border-radius: 5px;
    padding: 3px 8px;
    margin: 0 4px;
    font-weight: 500;
}


/* Privacy Policy page */
.app-body .column > .scrollable.privacy-policy {
    border: 1px solid var(--color-lines);
    background-color: var(--color-content-bg);
    padding-bottom: 20px;
    z-index: 1;
}
@media screen and (min-width:1175px) {
    .app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
}


/* Multi-column layout
   일부발췌 */
.layout-multiple-columns .drawer__tab .icon-cog {
    color: var(--color-accent);
}
.layout-multiple-columns .drawer__tab .icon-globe {
    color: var(--color-accent);
}
.layout-multiple-columns .drawer__tab .icon-users {
    color: var(--color-accent);
}
.layout-multiple-columns .drawer__tab .icon-bars {
    color: var(--color-accent);
}
.layout-multiple-columns .drawer__tab .icon-sign-out {
    color: var(--color-accent);
}
.layout-multiple-columns .column-header__icon.icon-bars {
    color: var(--color-accent);
}

.layout-multiple-columns .flex-spacer,
.layout-multiple-columns .getting-started,
.layout-multiple-columns .getting-started__wrapper,
.layout-multiple-columns .getting-started .column-link,
.layout-multiple-columns .getting-started .column-subheading {
    background-color: var(--color-bg);
}
.layout-multiple-columns .scrollable.getting-started {
    border-left: 0;
    border-right: 0;
    background-color: var(--color-bg);
}
.layout-multiple-columns .getting-started__wrapper {
    padding-bottom: 10px;
    border-radius: 0 0 8px 8px;
}
.layout-multiple-columns .getting-started .column-link {
    color: var(--color-content-fg);
    margin: 0 5px 2px;
    border-radius: 8px;
}
.app-body .getting-started .column-link {
    margin-left: 0;
    font-weight: 500;
    color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) {
    background-color: var(--color-accent-bg);
    color: var(--color-fg);
}
.layout-multiple-columns .getting-started .column-link__icon {
    transform: scale(1.4);
}

.app-body .getting-started .column-link__badge {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
    border-radius: 8px;
    line-height: 0.94;
    font-weight: bold;
    padding-left: 8px;
    padding-right: 8px;
}

.layout-multiple-columns .getting-started__trends .trends__item {
    padding-left: 16px;
}
.layout-multiple-columns .getting-started__trends h4 > :is(a, span) {
    padding-left: 45px;
}

.app-body .switch-to-advanced {
    background-color: var(--color-accent-bg);
    border-radius: 8px;
    color: var(--color-content-fg);
}
.app-body .switch-to-advanced .switch-to-advanced__toggle {
    color: var(--color-accent);
}












/*이 위로 원본 탠저린*/
/*이 아래로 조각코드임*/







/*トゥート背景*/
.drawer__inner{
 background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.0) 100%),
    url("https://wsb.hostdon.ne.jp/m392/media_attachments/files/114/125/237/268/981/993/original/851ba66fa37c9678.png");
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
}


  /*로고 바꾸기*/
.column-link--logo, .column-link--logo:hover,
.column-link--logo:focus,
.column-link--logo:active, .ui__header__logo{
    background-size: contain;
    background-image: url("https://wsb.hostdon.ne.jp/m392/media_attachments/files/114/136/112/328/032/034/original/7f53001ebc9e420b.png");
    background-repeat: no-repeat;
    padding: 5px;
    margin: 10px;
}

.logo {
    visibility: hidden;
}




  /*툿 문구 바꾸기*/
.compose-form__actions .button { color: rgba(255,255,255,0); }
.compose-form__actions .button::before {
  content: "포포토!";
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(255,255,255,1);
  transform: translate3d(-50%, -50%, 0);
}