/* Main changes for Qlub */

/* Fallback for browsers without :has() */
@media (min-width: 1175px) {
    .compose-panel {
      display: block; /* or your default desktop behavior */
    }
  }
  /* Enhanced behavior where :has() is supported */
  @supports selector(.compose-panel:has(.reply-indicator)) {
    @media (min-width: 1175px) {
      .compose-panel {
        display: none;
      }
      .compose-panel:has(.reply-indicator) {
        display: block;
      }
    }
  }

.navigation-bar {
    display: flex !important;
}
/* 📄 Meta */
:root {
    --version: "v2.5.3";

    --variant-name: "Tangerine";
    --variant-emoji: "\1F34A\00A0";
    --variant: var(--variant-emoji) var(--variant-name);

    --meta: 'Qlub UI for Mastodon: ' var(--version) ' \00B7 ' var(--variant);
}

/* 🎨 Colors */
:root {
    color-scheme: light dark;

    --color-bg: #ffffff;
    --gradient-bg: linear-gradient(90deg, var(--color-bg), var(--color-bg));
    --color-fg: #2a2d37;
    --color-fg-muted: #444a5a;
    --color-secondary-bg: #e8e6f0;
    --color-secondary-separator: #d9d9e8;

    --color-content-bg: #ffffff;
    --color-content-fg: #292938;
    --color-content-fg-bold: #292938;
    --color-content-fg-muted: color-mix(in srgb, var(--color-content-fg), var(--color-content-bg) 40%);
    --color-content-secondary-bg: #faf7f8;
    --color-content-secondary-separator: rgba(237, 227, 219, 0.4);
    --color-content-bg-focus: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 96%);

    --color-accent: #6161ff;
    --color-accent-focus: #6161ff;
    --color-accent-lines: #dfdbe2;
    --color-accent-bg: #ffffff;
    --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);

}
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #111111;
        --gradient-bg: linear-gradient(90deg, var(--color-bg), var(--color-bg));
        --color-fg: #ffffff;
        --color-fg-muted: #6e635e;
        --color-secondary-bg: #20202c;
        --color-secondary-separator: #25201c;

        --color-content-bg: #030303;
        --color-content-fg: var(--color-fg);
        --color-content-fg-bold: #ffffff;
        --color-content-fg-muted: #737373;
        --color-content-secondary-bg: var(--color-secondary-bg);
        --color-content-secondary-separator: #1e1810;
        --color-content-bg-focus: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 90%);

        --color-accent: #6161ff;
        --color-accent-focus: #6161ff;
        --color-accent-lines: #313144;
        --color-accent-bg: #20202c;
        --color-accent-fg: #ffffff;

        --color-lines: #343434;
        --color-lines-translucent: rgba(255, 255, 255, .15);

        --color-confirm-fg: var(--color-confirm);
    }
}
.app-body {
    --background-color: var(--color-bg);
    --background-border-color: var(--color-lines);
    --modal-background-color: var(--color-content-bg);
}
:root {
    /* Mastodon logo */
    --logo: url("data:image/svg+xml,%3Csvg%20width%3D%22270.93338mm%22%20height%3D%22270.95428mm%22%20viewBox%3D%220%200%20270.93338%20270.95428%22%20version%3D%221.1%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%20id%3D%22defs1%22%3E%3ClinearGradient%20id%3D%22paint0_linear_2_2%22%20x1%3D%2261%22%20y1%3D%22130%22%20x2%3D%2261%22%20y2%3D%22-91.5%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22matrix(0.26458333%2C0%2C0%2C0.26458333%2C-352.55094%2C1033.5101)%22%3E%3Cstop%20offset%3D%220.0755157%22%20stop-color%3D%22%23563ACC%22%20id%3D%22stop4-3%22%2F%3E%3Cstop%20offset%3D%220.520094%22%20stop-color%3D%22%236364FF%22%20id%3D%22stop5-9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20xlink%3Ahref%3D%22%23paint0_linear_2_2%22%20id%3D%22linearGradient2%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22matrix(3.413499%2C0%2C0%2C3.413499%2C-1200.7748%2C2206.9559)%22%20x1%3D%2261%22%20y1%3D%22130%22%20x2%3D%2261%22%20y2%3D%22-91.5%22%2F%3E%3C%2Fdefs%3E%3Cg%20id%3D%22layer1%22%20transform%3D%22translate(1129.7257%2C-2293.3539)%22%3E%3Cpath%20id%3D%22path16-3-0-3-7%22%20style%3D%22fill%3Aurl(%23linearGradient2)%3Bstroke-width%3A3.41349%22%20d%3D%22m%20-994.25884%2C2293.3538%20a%20135.46901%2C135.46901%200%200%200%20-135.46686%2C135.468%20135.46901%2C135.46901%200%200%200%20135.46686%2C135.4862%20135.46901%2C135.46901%200%200%200%2053.44252%2C-11.0411%20c%2028.27342%2C10.8725%2050.29022%2C11.6337%2062.42994%2C10.7685%205.5555%2C-0.4108%208.65832%2C-1.1184%208.78703%2C-1.1498%201.41947%2C-0.3316%202.50901%2C-1.6769%202.79337%2C-3.4397%200.2855%2C-1.7609%20-0.30412%2C-3.5966%20-1.4936%2C-4.6807%20-14.59639%2C-13.3085%20-22.08847%2C-25.6507%20-25.94783%2C-34.5695%20a%20135.46901%2C135.46901%200%200%200%2035.45504%2C-91.3701%20135.46901%2C135.46901%200%200%200%20-135.46667%2C-135.4658%20z%20m%20-0.26797%2C45.976%20a%2088.827512%2C88.827515%2085.810999%200%201%2088.82434%2C88.825%2088.827512%2C88.827515%2085.810999%200%201%20-88.82434%2C88.8304%2088.827512%2C88.827515%2085.810999%200%201%20-88.83109%2C-88.8304%2088.827512%2C88.827515%2085.810999%200%201%2088.83109%2C-88.825%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

    /* Post+Notifications icons */
    --icon-reply: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23292938' d='M115.9 448.9C83.3 408.6 64 358.4 64 304C64 171.5 178.6 64 320 64C461.4 64 576 171.5 576 304C576 436.5 461.4 544 320 544C283.5 544 248.8 536.8 217.4 524L101 573.9C97.3 575.5 93.5 576 89.5 576C75.4 576 64 564.6 64 550.5C64 546.2 65.1 542 67.1 538.3L115.9 448.9zM153.2 418.7C165.4 433.8 167.3 454.8 158 471.9L140 505L198.5 479.9C210.3 474.8 223.7 474.7 235.6 479.6C261.3 490.1 289.8 496 319.9 496C437.7 496 527.9 407.2 527.9 304C527.9 200.8 437.8 112 320 112C202.2 112 112 200.8 112 304C112 346.8 127.1 386.4 153.2 418.7z'/%3E%3C/svg%3E");
    --icon-reply-accent: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M576 304C576 436.5 461.4 544 320 544C282.9 544 247.7 536.6 215.9 523.3L97.5 574.1C88.1 578.1 77.3 575.8 70.4 568.3C63.5 560.8 62 549.8 66.8 540.8L115.6 448.6C83.2 408.3 64 358.3 64 304C64 171.5 178.6 64 320 64C461.4 64 576 171.5 576 304z'/%3E%3C/svg%3E");
    --icon-reply-accent-active: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M115.9 448.9C83.3 408.6 64 358.4 64 304C64 171.5 178.6 64 320 64C461.4 64 576 171.5 576 304C576 436.5 461.4 544 320 544C283.5 544 248.8 536.8 217.4 524L101 573.9C97.3 575.5 93.5 576 89.5 576C75.4 576 64 564.6 64 550.5C64 546.2 65.1 542 67.1 538.3L115.9 448.9zM153.2 418.7C165.4 433.8 167.3 454.8 158 471.9L140 505L198.5 479.9C210.3 474.8 223.7 474.7 235.6 479.6C261.3 490.1 289.8 496 319.9 496C437.7 496 527.9 407.2 527.9 304C527.9 200.8 437.8 112 320 112C202.2 112 112 200.8 112 304C112 346.8 127.1 386.4 153.2 418.7z'/%3E%3C/svg%3E");
    --icon-reply-all: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M128,56v96L80,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M85.66,146.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,61.66L43.31,104ZM232,200a8,8,0,0,1-16,0,88.11,88.11,0,0,0-80-87.63V152a8,8,0,0,1-13.66,5.66l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,136,56V96.3A104.15,104.15,0,0,1,232,200ZM120,75.31,91.31,104,120,132.69Z'%3E%3C/path%3E%3C/svg%3E");
    --icon-boost: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23292938' d='M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z'/%3E%3C/svg%3E");
    --icon-boost-accent: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z'/%3E%3C/svg%3E");
    --icon-boost-active: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23292938' d='M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z'/%3E%3C/svg%3E");
    --icon-boost-accent-active: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z'/%3E%3C/svg%3E");
    --icon-star: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%232a2d37' d='M442.9 144C415.6 144 389.9 157.1 373.9 179.2L339.5 226.8C335 233 327.8 236.7 320.1 236.7C312.4 236.7 305.2 233 300.7 226.8L266.3 179.2C250.3 157.1 224.6 144 197.3 144C150.3 144 112.2 182.1 112.2 229.1C112.2 279 144.2 327.5 180.3 371.4C221.4 421.4 271.7 465.4 306.2 491.7C309.4 494.1 314.1 495.9 320.2 495.9C326.3 495.9 331 494.1 334.2 491.7C368.7 465.4 419 421.3 460.1 371.4C496.3 327.5 528.2 279 528.2 229.1C528.2 182.1 490.1 144 443.1 144zM335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1C576 297.7 533.1 358 496.9 401.9C452.8 455.5 399.6 502 363.1 529.8C350.8 539.2 335.6 543.9 320 543.9C304.4 543.9 289.2 539.2 276.9 529.8C240.4 502 187.2 455.5 143.1 402C106.9 358.1 64 297.7 64 229.1C64 155.6 123.6 96 197.1 96C239.8 96 280 116.5 305 151.1L320 171.8L335 151.1z'/%3E%3C/svg%3E");
    --icon-star-accent: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M442.9 144C415.6 144 389.9 157.1 373.9 179.2L339.5 226.8C335 233 327.8 236.7 320.1 236.7C312.4 236.7 305.2 233 300.7 226.8L266.3 179.2C250.3 157.1 224.6 144 197.3 144C150.3 144 112.2 182.1 112.2 229.1C112.2 279 144.2 327.5 180.3 371.4C221.4 421.4 271.7 465.4 306.2 491.7C309.4 494.1 314.1 495.9 320.2 495.9C326.3 495.9 331 494.1 334.2 491.7C368.7 465.4 419 421.3 460.1 371.4C496.3 327.5 528.2 279 528.2 229.1C528.2 182.1 490.1 144 443.1 144zM335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1C576 297.7 533.1 358 496.9 401.9C452.8 455.5 399.6 502 363.1 529.8C350.8 539.2 335.6 543.9 320 543.9C304.4 543.9 289.2 539.2 276.9 529.8C240.4 502 187.2 455.5 143.1 402C106.9 358.1 64 297.7 64 229.1C64 155.6 123.6 96 197.1 96C239.8 96 280 116.5 305 151.1L320 171.8L335 151.1z'/%3E%3C/svg%3E");
    --icon-star-active: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M305 151.1L320 171.8L335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1L576 231.7C576 343.9 436.1 474.2 363.1 529.9C350.7 539.3 335.5 544 320 544C304.5 544 289.2 539.4 276.9 529.9C203.9 474.2 64 343.9 64 231.7L64 229.1C64 155.6 123.6 96 197.1 96C239.8 96 280 116.5 305 151.1z'/%3E%3C/svg%3E");
    /* Navigation icons */
    
    --icon-explore: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23292938' d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/%3E%3C/svg%3E");
    --icon-explore-active: var(--icon-explore-accent-active);
    --icon-explore-accent: var(--icon-explore);
    --icon-explore-accent-active: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/%3E%3C/svg%3E");

    --icon-direct-messages: var(--icon-at);
    --icon-direct-messages-active: var(--icon-at-accent);
    --icon-direct-messages-accent: var(--icon-at);
    --icon-direct-messages-accent-active: var(--icon-at-accent);

    --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E");
    --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E");
    --icon-star-column-link-accent: var(--icon-star-accent);
    --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236161ff' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E");

    /* Post visibility icons */
    --icon-at: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%232a2d37' d='M108.2 322.7C114.3 307.5 112.2 290.1 102.6 276.8C88.1 256.7 80 233.1 80 208C80 141.2 140.5 80 224 80C307.5 80 368 141.2 368 208C368 274.8 307.5 336 224 336C208.1 336 192.9 333.7 178.7 329.5C168.4 326.4 157.3 327 147.3 331L96.9 351.2L108.3 322.7zM32 208C32 243.8 43.6 277.1 63.7 304.8L33.9 379.2C32.6 382.4 32 385.8 32 389.2C32 404 44 416 58.8 416C62.2 416 65.6 415.3 68.8 414.1L165.1 375.6C183.7 381.1 203.5 384 224 384C330 384 416 305.2 416 208C416 110.8 330 32 224 32C118 32 32 110.8 32 208zM416 576C436.6 576 456.3 573 474.9 567.6L571.2 606.1C574.4 607.4 577.8 608 581.2 608C596 608 608 596 608 581.2C608 577.8 607.3 574.4 606.1 571.2L576.4 496.8C596.4 469 608.1 435.7 608.1 400C608.1 317.6 546.4 248.5 463.1 229.3C461.5 245.6 458 261.2 453 276.2C516.9 291 560.2 343.5 560.2 400.1C560.2 425.2 552.1 448.8 537.6 468.9C528 482.2 525.9 499.5 532 514.8L543.4 543.3L493 523.1C483 519.1 471.9 518.6 461.6 521.6C447.4 525.8 432.2 528.1 416.3 528.1C344.1 528.1 289.2 482.4 275.6 426.9C260 430.1 243.9 431.9 227.5 432.1C243.9 514 322.2 576.1 416.3 576.1z'/%3E%3C/svg%3E");
    --icon-at-inv: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M416 208C416 305.2 330 384 224 384C197.3 384 171.9 379 148.8 370L67.2 413.2C57.9 418.1 46.5 416.4 39 409C31.5 401.6 29.8 390.1 34.8 380.8L70.4 313.6C46.3 284.2 32 247.6 32 208C32 110.8 118 32 224 32C330 32 416 110.8 416 208zM416 576C321.9 576 243.6 513.9 227.2 432C347.2 430.5 451.5 345.1 463 229.3C546.3 248.5 608 317.6 608 400C608 439.6 593.7 476.2 569.6 505.6L605.2 572.8C610.1 582.1 608.4 593.5 601 601C593.6 608.5 582.1 610.2 572.8 605.2L491.2 562C468.1 571 442.7 576 416 576z'/%3E%3C/svg%3E");
    --icon-at-accent: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M416 208C416 305.2 330 384 224 384C197.3 384 171.9 379 148.8 370L67.2 413.2C57.9 418.1 46.5 416.4 39 409C31.5 401.6 29.8 390.1 34.8 380.8L70.4 313.6C46.3 284.2 32 247.6 32 208C32 110.8 118 32 224 32C330 32 416 110.8 416 208zM416 576C321.9 576 243.6 513.9 227.2 432C347.2 430.5 451.5 345.1 463 229.3C546.3 248.5 608 317.6 608 400C608 439.6 593.7 476.2 569.6 505.6L605.2 572.8C610.1 582.1 608.4 593.5 601 601C593.6 608.5 582.1 610.2 572.8 605.2L491.2 562C468.1 571 442.7 576 416 576z'/%3E%3C/svg%3E");

    /* Other icons */
    --icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a24,24,0,1,1-24-24A24,24,0,0,1,128,80Zm40,72a24,24,0,1,0,24,24A24,24,0,0,0,168,152Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M40,88H73a32,32,0,0,0,62,0h81a8,8,0,0,0,0-16H135a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16Zm64-24A16,16,0,1,1,88,80,16,16,0,0,1,104,64ZM216,168H199a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16h97a32,32,0,0,0,62,0h17a8,8,0,0,0,0-16Zm-48,24a16,16,0,1,1,16-16A16,16,0,0,1,168,192Z'%3E%3C/path%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root {
        /* Mastodon logo */
        --logo: url("data:image/svg+xml,%3Csvg%20width%3D%22270.93338mm%22%20height%3D%22270.95428mm%22%20viewBox%3D%220%200%20270.93338%20270.95428%22%20version%3D%221.1%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%20id%3D%22defs1%22%3E%3ClinearGradient%20id%3D%22paint0_linear_2_2%22%20x1%3D%2261%22%20y1%3D%22130%22%20x2%3D%2261%22%20y2%3D%22-91.5%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22matrix(0.26458333%2C0%2C0%2C0.26458333%2C-352.55094%2C1033.5101)%22%3E%3Cstop%20offset%3D%220.0755157%22%20stop-color%3D%22%23563ACC%22%20id%3D%22stop4-3%22%2F%3E%3Cstop%20offset%3D%220.520094%22%20stop-color%3D%22%236364FF%22%20id%3D%22stop5-9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20xlink%3Ahref%3D%22%23paint0_linear_2_2%22%20id%3D%22linearGradient2%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22matrix(3.413499%2C0%2C0%2C3.413499%2C-1200.7748%2C2206.9559)%22%20x1%3D%2261%22%20y1%3D%22130%22%20x2%3D%2261%22%20y2%3D%22-91.5%22%2F%3E%3C%2Fdefs%3E%3Cg%20id%3D%22layer1%22%20transform%3D%22translate(1129.7257%2C-2293.3539)%22%3E%3Cpath%20id%3D%22path16-3-0-3-7%22%20style%3D%22fill%3Aurl(%23linearGradient2)%3Bstroke-width%3A3.41349%22%20d%3D%22m%20-994.25884%2C2293.3538%20a%20135.46901%2C135.46901%200%200%200%20-135.46686%2C135.468%20135.46901%2C135.46901%200%200%200%20135.46686%2C135.4862%20135.46901%2C135.46901%200%200%200%2053.44252%2C-11.0411%20c%2028.27342%2C10.8725%2050.29022%2C11.6337%2062.42994%2C10.7685%205.5555%2C-0.4108%208.65832%2C-1.1184%208.78703%2C-1.1498%201.41947%2C-0.3316%202.50901%2C-1.6769%202.79337%2C-3.4397%200.2855%2C-1.7609%20-0.30412%2C-3.5966%20-1.4936%2C-4.6807%20-14.59639%2C-13.3085%20-22.08847%2C-25.6507%20-25.94783%2C-34.5695%20a%20135.46901%2C135.46901%200%200%200%2035.45504%2C-91.3701%20135.46901%2C135.46901%200%200%200%20-135.46667%2C-135.4658%20z%20m%20-0.26797%2C45.976%20a%2088.827512%2C88.827515%2085.810999%200%201%2088.82434%2C88.825%2088.827512%2C88.827515%2085.810999%200%201%20-88.82434%2C88.8304%2088.827512%2C88.827515%2085.810999%200%201%20-88.83109%2C-88.8304%2088.827512%2C88.827515%2085.810999%200%201%2088.83109%2C-88.825%20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

        /* Post+Notifications icons */
        --icon-reply: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M115.9 448.9C83.3 408.6 64 358.4 64 304C64 171.5 178.6 64 320 64C461.4 64 576 171.5 576 304C576 436.5 461.4 544 320 544C283.5 544 248.8 536.8 217.4 524L101 573.9C97.3 575.5 93.5 576 89.5 576C75.4 576 64 564.6 64 550.5C64 546.2 65.1 542 67.1 538.3L115.9 448.9zM153.2 418.7C165.4 433.8 167.3 454.8 158 471.9L140 505L198.5 479.9C210.3 474.8 223.7 474.7 235.6 479.6C261.3 490.1 289.8 496 319.9 496C437.7 496 527.9 407.2 527.9 304C527.9 200.8 437.8 112 320 112C202.2 112 112 200.8 112 304C112 346.8 127.1 386.4 153.2 418.7z'/%3E%3C/svg%3E");
        --icon-reply-accent: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M576 304C576 436.5 461.4 544 320 544C282.9 544 247.7 536.6 215.9 523.3L97.5 574.1C88.1 578.1 77.3 575.8 70.4 568.3C63.5 560.8 62 549.8 66.8 540.8L115.6 448.6C83.2 408.3 64 358.3 64 304C64 171.5 178.6 64 320 64C461.4 64 576 171.5 576 304z'/%3E%3C/svg%3E");
        --icon-reply-accent-active: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M115.9 448.9C83.3 408.6 64 358.4 64 304C64 171.5 178.6 64 320 64C461.4 64 576 171.5 576 304C576 436.5 461.4 544 320 544C283.5 544 248.8 536.8 217.4 524L101 573.9C97.3 575.5 93.5 576 89.5 576C75.4 576 64 564.6 64 550.5C64 546.2 65.1 542 67.1 538.3L115.9 448.9zM153.2 418.7C165.4 433.8 167.3 454.8 158 471.9L140 505L198.5 479.9C210.3 474.8 223.7 474.7 235.6 479.6C261.3 490.1 289.8 496 319.9 496C437.7 496 527.9 407.2 527.9 304C527.9 200.8 437.8 112 320 112C202.2 112 112 200.8 112 304C112 346.8 127.1 386.4 153.2 418.7z'/%3E%3C/svg%3E");
        --icon-reply-all: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M128,56v96L80,104Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M85.66,146.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,61.66L43.31,104ZM232,200a8,8,0,0,1-16,0,88.11,88.11,0,0,0-80-87.63V152a8,8,0,0,1-13.66,5.66l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,136,56V96.3A104.15,104.15,0,0,1,232,200ZM120,75.31,91.31,104,120,132.69Z'%3E%3C/path%3E%3C/svg%3E");
        --icon-boost: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z'/%3E%3C/svg%3E");
        --icon-boost-accent: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z'/%3E%3C/svg%3E");
        --icon-boost-active: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z'/%3E%3C/svg%3E");
        --icon-boost-accent-active: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z'/%3E%3C/svg%3E");
        --icon-star: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M442.9 144C415.6 144 389.9 157.1 373.9 179.2L339.5 226.8C335 233 327.8 236.7 320.1 236.7C312.4 236.7 305.2 233 300.7 226.8L266.3 179.2C250.3 157.1 224.6 144 197.3 144C150.3 144 112.2 182.1 112.2 229.1C112.2 279 144.2 327.5 180.3 371.4C221.4 421.4 271.7 465.4 306.2 491.7C309.4 494.1 314.1 495.9 320.2 495.9C326.3 495.9 331 494.1 334.2 491.7C368.7 465.4 419 421.3 460.1 371.4C496.3 327.5 528.2 279 528.2 229.1C528.2 182.1 490.1 144 443.1 144zM335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1C576 297.7 533.1 358 496.9 401.9C452.8 455.5 399.6 502 363.1 529.8C350.8 539.2 335.6 543.9 320 543.9C304.4 543.9 289.2 539.2 276.9 529.8C240.4 502 187.2 455.5 143.1 402C106.9 358.1 64 297.7 64 229.1C64 155.6 123.6 96 197.1 96C239.8 96 280 116.5 305 151.1L320 171.8L335 151.1z'/%3E%3C/svg%3E");
        --icon-star-accent: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M442.9 144C415.6 144 389.9 157.1 373.9 179.2L339.5 226.8C335 233 327.8 236.7 320.1 236.7C312.4 236.7 305.2 233 300.7 226.8L266.3 179.2C250.3 157.1 224.6 144 197.3 144C150.3 144 112.2 182.1 112.2 229.1C112.2 279 144.2 327.5 180.3 371.4C221.4 421.4 271.7 465.4 306.2 491.7C309.4 494.1 314.1 495.9 320.2 495.9C326.3 495.9 331 494.1 334.2 491.7C368.7 465.4 419 421.3 460.1 371.4C496.3 327.5 528.2 279 528.2 229.1C528.2 182.1 490.1 144 443.1 144zM335 151.1C360 116.5 400.2 96 442.9 96C516.4 96 576 155.6 576 229.1C576 297.7 533.1 358 496.9 401.9C452.8 455.5 399.6 502 363.1 529.8C350.8 539.2 335.6 543.9 320 543.9C304.4 543.9 289.2 539.2 276.9 529.8C240.4 502 187.2 455.5 143.1 402C106.9 358.1 64 297.7 64 229.1C64 155.6 123.6 96 197.1 96C239.8 96 280 116.5 305 151.1L320 171.8L335 151.1z'/%3E%3C/svg%3E");
        --icon-explore: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/%3E%3C/svg%3E");
        --icon-explore-active: var(--icon-explore-accent-active);
        --icon-explore-accent: var(--icon-explore);
        --icon-explore-accent-active: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/%3E%3C/svg%3E");

        --icon-direct-messages: var(--icon-at);
        --icon-direct-messages-active: var(--icon-at-accent);
        --icon-direct-messages-accent: var(--icon-at);
        --icon-direct-messages-accent-active: var(--icon-at-accent);

        --icon-star-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M229.06,108.79l-48.7,42,14.88,62.79a8.4,8.4,0,0,1-12.52,9.17L128,189.09,73.28,222.74a8.4,8.4,0,0,1-12.52-9.17l14.88-62.79-48.7-42A8.46,8.46,0,0,1,31.73,94L95.64,88.8l24.62-59.6a8.36,8.36,0,0,1,15.48,0l24.62,59.6L224.27,94A8.46,8.46,0,0,1,229.06,108.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z'%3E%3C/path%3E%3C/svg%3E");
        --icon-star-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E");
        --icon-star-column-link-accent: var(--icon-star-accent);
        --icon-star-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236161ff' viewBox='0 0 256 256'%3E%3Cpath d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'%3E%3C/path%3E%3C/svg%3E");

        /* Post visibility icons */
        --icon-at: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M108.2 322.7C114.3 307.5 112.2 290.1 102.6 276.8C88.1 256.7 80 233.1 80 208C80 141.2 140.5 80 224 80C307.5 80 368 141.2 368 208C368 274.8 307.5 336 224 336C208.1 336 192.9 333.7 178.7 329.5C168.4 326.4 157.3 327 147.3 331L96.9 351.2L108.3 322.7zM32 208C32 243.8 43.6 277.1 63.7 304.8L33.9 379.2C32.6 382.4 32 385.8 32 389.2C32 404 44 416 58.8 416C62.2 416 65.6 415.3 68.8 414.1L165.1 375.6C183.7 381.1 203.5 384 224 384C330 384 416 305.2 416 208C416 110.8 330 32 224 32C118 32 32 110.8 32 208zM416 576C436.6 576 456.3 573 474.9 567.6L571.2 606.1C574.4 607.4 577.8 608 581.2 608C596 608 608 596 608 581.2C608 577.8 607.3 574.4 606.1 571.2L576.4 496.8C596.4 469 608.1 435.7 608.1 400C608.1 317.6 546.4 248.5 463.1 229.3C461.5 245.6 458 261.2 453 276.2C516.9 291 560.2 343.5 560.2 400.1C560.2 425.2 552.1 448.8 537.6 468.9C528 482.2 525.9 499.5 532 514.8L543.4 543.3L493 523.1C483 519.1 471.9 518.6 461.6 521.6C447.4 525.8 432.2 528.1 416.3 528.1C344.1 528.1 289.2 482.4 275.6 426.9C260 430.1 243.9 431.9 227.5 432.1C243.9 514 322.2 576.1 416.3 576.1z'/%3E%3C/svg%3E");
        --icon-at-inv: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M416 208C416 305.2 330 384 224 384C197.3 384 171.9 379 148.8 370L67.2 413.2C57.9 418.1 46.5 416.4 39 409C31.5 401.6 29.8 390.1 34.8 380.8L70.4 313.6C46.3 284.2 32 247.6 32 208C32 110.8 118 32 224 32C330 32 416 110.8 416 208zM416 576C321.9 576 243.6 513.9 227.2 432C347.2 430.5 451.5 345.1 463 229.3C546.3 248.5 608 317.6 608 400C608 439.6 593.7 476.2 569.6 505.6L605.2 572.8C610.1 582.1 608.4 593.5 601 601C593.6 608.5 582.1 610.2 572.8 605.2L491.2 562C468.1 571 442.7 576 416 576z'/%3E%3C/svg%3E");
        --icon-at-accent: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236161ff' d='M416 208C416 305.2 330 384 224 384C197.3 384 171.9 379 148.8 370L67.2 413.2C57.9 418.1 46.5 416.4 39 409C31.5 401.6 29.8 390.1 34.8 380.8L70.4 313.6C46.3 284.2 32 247.6 32 208C32 110.8 118 32 224 32C330 32 416 110.8 416 208zM416 576C321.9 576 243.6 513.9 227.2 432C347.2 430.5 451.5 345.1 463 229.3C546.3 248.5 608 317.6 608 400C608 439.6 593.7 476.2 569.6 505.6L605.2 572.8C610.1 582.1 608.4 593.5 601 601C593.6 608.5 582.1 610.2 572.8 605.2L491.2 562C468.1 571 442.7 576 416 576z'/%3E%3C/svg%3E");

        /* Other icons */
        --icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a24,24,0,1,1-24-24A24,24,0,0,1,128,80Zm40,72a24,24,0,1,0,24,24A24,24,0,0,0,168,152Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M40,88H73a32,32,0,0,0,62,0h81a8,8,0,0,0,0-16H135a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16Zm64-24A16,16,0,1,1,88,80,16,16,0,0,1,104,64ZM216,168H199a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16h97a32,32,0,0,0,62,0h17a8,8,0,0,0,0-16Zm-48,24a16,16,0,1,1,16-16A16,16,0,0,1,168,192Z'%3E%3C/path%3E%3C/svg%3E");
    }
}

body.app-body  {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif;
}

::selection {
    color: var(--color-accent-fg);
    background-color: var(--color-accent);
}

.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,
.app-body .load-more .loading-indicator .circular-progress {
    color: var(--color-accent);
}

.app-body .redirect__logo {
    background-image: var(--logo);
    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;
}

.app-body .account__avatar {
    background-color: var(--color-content-secondary-bg);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
.app-body .navigation-bar .account__avatar {
    background-color: var(--color-content-bg);
}
.app-body .account__avatar img {
    border-radius: 50%;
}

/* 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);
    }
}


/* Rordered layout */
.app-body .columns-area__panels__pane--navigational {
    order: 1;
}
.app-body .columns-area__panels__main {
    contain: inline-size;
    order: 2;
}
.app-body .columns-area__panels__pane--compositional {
    order: 3;
}
/* Advanced layout: reorder actual .columns-area children */
.layout-multiple-columns .link-footer {
    display: none !important;
}
.layout-multiple-columns .columns-area > .column:has(> .navigation-panel) {
    order: 1 !important;
}
.layout-multiple-columns .columns-area > .column:has(.column-header__icon.icon-home) {
    order: 2 !important;
}
.layout-multiple-columns .columns-area > .column:has(.column-header__icon.icon-bell) {
    order: 3 !important;
}
.layout-multiple-columns .columns-area > .drawer {
    order: 4 !important;
}
/* Advanced layout: responsive column widths */
.layout-multiple-columns .columns-area {
    --col-width: clamp(420px, 24vw, 420px);
}
.layout-multiple-columns .columns-area > :is(.drawer, .column) {
    flex: 1 1 var(--col-width);
    min-width: var(--col-width);
}
.app-body .columns-area--mobile .column {
    flex: unset;
}
.app-body .columns-area--mobile .column:focus-within {
    overflow: visible;
}
.app-body .scrollable,
.app-body .column > .scrollable {
    background-color: var(--color-content-bg);
    border-right: 1px solid var(--color-lines);
    border-left: 1px solid var(--color-lines);
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    padding-bottom: 20px;
}
.app-body .dismissable-banner + .scrollable {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.app-body .columns-area--mobile {
    padding: 0;
}
.layout-multiple-columns .columns-area {
    padding-left: 10px;
    padding-right: 10px;
}
@media screen and (max-width: 1600px) {
    .layout-multiple-columns .columns-area > .column:has(.column-header__icon.icon-bell) {
        display: none;
    }
}
.app-body .columns-area__panels {
    gap: 10px;
}
@media screen and (max-width:770px) {
    .app-body:not(.layout-multiple-columns) .scrollable,
    .app-body:not(.layout-multiple-columns) .column > .scrollable {
        border-right: 0;
        border-left: 0;
    }
}
@media screen and (min-width:1175px) {
    .app-body .columns-area__panels__main {
        max-width: 580px;
        padding: 0;
    }
    .app-body .columns-area__panels__main::before {
        display: block;
        content: "";
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 580px;
        height: 100%;
        box-shadow: 0 20px 30px #0000000f;
        background-color: var(--color-content-bg);
        border-radius: 10px 10px 0 0;
    }
}
@media screen and (max-width:1174px) {
    .app-body .columns-area__panels {
        gap: 0;
    }
}

/* *️⃣ Icons
   -------- */
.app-body .icon {
    height: 20px;
    width: 20px;
}
.app-body .verified-badge .icon {
    width: 18px;
    height: 18px;
}
.app-body .account__header__buttons .icon-button .icon {
    height: 24px;
    width: 24px;
}
.app-body .status__visibility-icon .icon {
    height: 1em;
    width: 1em;
}
.app-body .detailed-status__meta .icon,
.app-body .dropdown-button .icon {
    height: 15px;
    width: 15px;
}
.app-body .icon-button {
    padding: 2px;
}
.app-body
    :is(
        .icon-star,
        .icon-retweet,
        .icon-Boost-icon,
        .icon-Unboost-icon,
        .reblog-menu-item .icon,
        .reblog-menu-item.dropdown-menu__item--highlighted .icon,
        .icon-Quote-icon,
        .icon-quote,
        .reblog-menu-item:last-child .icon,
        .reblog-menu-item.dropdown-menu__item--highlighted:last-child .icon,
        .icon-repeat,
        .icon-reply,
        .icon-reply-all,
        .icon-notifications-active,
        .icon-explore,
        .icon-at,
        .icon-sliders,
        .edit-indicator__attachments > .icon,
        .account--panel .icon-times,
        .follow-request-banner .icon-times,
        .account__relationship .icon-times,
        .follow-request-banner .button .icon-check,
        .account--panel button .icon-check,
        .account__relationship .icon-check,
        .account__header__buttons .icon-close,
        .app-form__header-input .icon,
        .account__domain-pill__popout__parts__icon .icon,
        .safety-action-modal__bullet-points__icon .icon,
        .ui__navigation-bar__item[href="/explore"] .icon,
    )
    path {
        display: none;
}

.app-body
    :is(
        .icon-star,
        .icon-retweet,
        .icon-Boost-icon,
        .icon-Unboost-icon,
        .reblog-menu-item .icon,
        .reblog-menu-item.dropdown-menu__item--highlighted .icon,
        .icon-Quote-icon,
        .icon-quote,
        .reblog-menu-item:last-child .icon,
        .reblog-menu-item.dropdown-menu__item--highlighted:last-child .icon,
        .icon-repeat,
        .icon-reply,
        .icon-reply-all,
        .icon-notifications-active,
        .icon-explore,
        .icon-at,
        .icon-flag,
        .icon-tachometer,
        .icon-bars,
        .icon-bar-chart-4-bars,
        .icon-bullhorn,
        .icon-sliders,
        .icon-lock,
        .edit-indicator__attachments > .icon,
        .icon-photo-library,
        .icon-thumb-tack,
        .icon-file-text,
        .account--panel .icon-times,
        .follow-request-banner .icon-times,
        .account__relationship .icon-times,
        .icon-check:is(.verified__mark, .verified-badge__mark),
        .follow-request-banner .button .icon-check,
        .account--panel button .icon-check,
        .account__relationship .icon-check,
        .status__action-bar .icon-close,
        .icon-sign-out,
        .icon-eraser,
        .icon-pencil,
        .icon-edit,
        .app-form__header-input .icon,
        .account__domain-pill__popout__parts__icon .icon,
        .safety-action-modal__bullet-points__icon .icon,
        .ui__navigation-bar__item[href="/home"] .icon,
        .ui__navigation-bar__item[href="/explore"] .icon,
        .ui__navigation-bar__item[href="/publish"] .icon,
        .ui__navigation-bar__item[href="/notifications"] .icon,
        .ui__navigation-bar__item[href="/menu"] .icon,
        button.ui__navigation-bar__item .icon
    ) {
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
}

/* Favorite */
.app-body .icon-star {
    background-image: var(--icon-star);
}
.app-body button.icon-button.active .icon-star,
.app-body .notification__message .icon-star,
.app-body .notification-group--favourite .icon-star {
    background-image: var(--icon-star-active);
}
.app-body .detailed-status__link .icon-star {
    background-image: var(--icon-star);
    margin: 0;
}
.app-body .media-modal__overlay .icon-star {
    background-image: var(--icon-star);
}
/* Boost */
.app-body .icon-retweet,
.app-body .icon-Boost-icon,
.app-body .reblog-menu-item .icon {
    background-image: var(--icon-boost);
}
.app-body button.icon-button.active .icon-retweet,
.app-body .detailed-status__button button.icon-button.active:hover .icon-retweet,
.app-body .icon-Unboost-icon,
.app-body .reblog-menu-item.dropdown-menu__item--highlighted .icon {
    background-image: var(--icon-boost-accent-active);
}
.app-body .status__prepend__icon .icon-retweet,
.app-body .notification-group--reblog .icon-repeat {
    background-image: var(--icon-boost-active);
}
.app-body .notification__message .icon-retweet {
    background-image: var(--icon-boost-active);
}
.app-body .detailed-status__link .icon-retweet {
    background-image: var(--icon-boost);
    margin: 0;
}
.app-body
    button.icon-button:is(
        .reblogPrivate:where(.disabled, [disabled]),
        .reblogPrivate:where(.disabled, [disabled]):hover,
        .disabled,
        .disabled:hover
    )
    .icon-retweet {
        background-image: var(--icon-boost-active);
        opacity: .2 !important;
        pointer-events: none;
}
.app-body .boost-modal__action-bar .icon-retweet {
    background-image: var(--icon-boost-accent);
    vertical-align: middle;
}
.app-body .media-modal__overlay .icon-retweet {
    background-image: var(--icon-boost-accent);
}


/* Reply */
.app-body .icon-reply,
.app-body .icon-reply-all {
    background-image: var(--icon-reply);
}
.app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) {
    background-image: var(--icon-reply);
}
.app-body .media-modal__overlay :is(.icon-reply, .icon-reply-all) {
    background-image: var(--icon-reply);
}
.app-body .status__prepend__icon .icon-reply,
.app-body .notification-ungrouped__header__icon .icon-reply {
    background-image: var(--icon-reply-accent-active);
}

/* Navigation panel icons */
.app-body .column-link__icon {
    transform: scale(1.45);
    margin-right: 7px;
    margin-left: 3px;
}

/* Explore icon */
.app-body .icon-explore,
.app-body .column-link .icon-explore {
    background-image: var(--icon-explore);
}
.app-body .column-link.active .icon-explore {
    background-image: var(--icon-explore-active);
}
.layout-multiple-columns .column-link .icon-explore {
    background-image: var(--icon-explore-accent);
}
.app-body .navigation-panel .column-link .icon-explore {
    background-image: var(--icon-explore-accent);
}
.app-body .ui__navigation-bar__item[href="/explore"] .icon {
    background-image: var(--icon-explore);
}
.app-body .navigation-panel .column-link.active .icon-explore {
    background-image: var(--icon-explore-accent-active);
}
.app-body .ui__navigation-bar__item[href="/explore"].active .icon {
    background-image: var(--icon-explore-active);
}

/* Direct messages icon */
.app-body .column-link .icon-at,
.app-body .column-header__icon.icon-at {
    background-image: var(--icon-direct-messages);
}
.app-body .column-link.active .icon-at {
    background-image: var(--icon-direct-messages-active);
}
.layout-multiple-columns .column-link .icon-at {
    background-image: var(--icon-direct-messages-accent);
}
.app-body .navigation-panel .column-link .icon-at {
    background-image: var(--icon-direct-messages-accent);
}
.app-body .navigation-panel .column-link.active .icon-at {
    background-image: var(--icon-direct-messages-accent-active);
}

/* Favorites icon */
.app-body .column-link .icon-star,
.app-body .column-header__icon.icon-star {
    background-image: var(--icon-star-column-link);
}
.app-body .column-link.active .icon-star {
    background-image: var(--icon-star-column-link-active);
}
.layout-multiple-columns .column-link .icon-star {
    background-image: var(--icon-star-column-link-accent);
}
.app-body .navigation-panel .column-link .icon-star {
    background-image: var(--icon-star-column-link-accent);
}
.app-body .navigation-panel .column-link.active .icon-star {
    background-image: var(--icon-star-column-link-accent-active);
}

/* Profile settings */
.app-body .navigation-bar .icon-button:is(:active, :focus, :hover) {
    background-color: transparent;
}

/* Column settings icon */
.app-body .icon-sliders {
    background-image: var(--icon-sliders);
}

/* Post visibility icons */
.app-body .icon-at {
    background-image: var(--icon-at);
}
.app-body .dropdown-button .icon-at {
    background-image: var(--icon-at-accent);
}
.app-body .dropdown-button.active .icon-at {
    background-image: var(--icon-at-inv);
}


/* Links */
.app-body a.status-link:not(.mention, .hashtag),
.app-body .status__content a.unhandled-link,
.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: color-mix(in srgb, var(--color-accent), transparent 55%);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.app-body a.status-link:not(.mention, .hashtag):is(:active, :focus, :hover),
.app-body .status__content a.unhandled-link: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;
}
.app-body a.mention:not(.hashtag) > span {
    font-weight: 500;
}
.app-body a:is(.mention, .hashtag) > span {
    color: var(--color-content-fg);
}



/* 📝 Compose panel
   ---------------- */
.app-body .compose-form {
    gap: 0;
}
.app-body .scrollable:has(> .compose-form) {
    background-color: var(--color-bg);
}
.app-body .compose-form .navigation-bar {
    border-radius: 8px 8px 0 0;
    padding: 23px 15px 15px 18px;
    position: relative;
    background-color: var(--color-content-bg);
    border-top: 1px solid var(--color-lines);
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
}
.app-body .navigation-bar strong {
    color: var(--color-content-fg);
}
.app-body .navigation-bar .account {
    background-color: transparent;
    padding-left: 0;
    padding-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}
.app-body .navigation-bar .account__display-name {
    line-height: 1.25;
}
.app-body :is(.compose-form .navigation-bar, .reply-indicator) .account__avatar {
    outline: 6px solid var(--color-content-bg);
    border-radius: 50%;
    position: relative;
    z-index: 2;
}
.app-body .reply-indicator__line {
    z-index: 1;
}
.app-body .compose-form__highlightable {
    border-top: 0;
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
    border-bottom: 1px solid var(--color-lines);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: var(--color-content-bg);
}
/* One duration for the whole “frame” — the shell is several siblings; default bundle CSS
   can set different transition timing per box, so the top and bottom can feel out of sync. */
.app-body .compose-form .reply-indicator,
.app-body .compose-form .navigation-bar,
.app-body .compose-form .compose-form__warning,
.app-body .compose-form .compose-form__highlightable {
    transition: border-color 0.2s ease;
}
.app-body .compose-form .reply-indicator:has(~ .compose-form__highlightable:focus-within),
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within),
.app-body .compose-form .compose-form__warning:has(~ .compose-form__highlightable:focus-within),
.app-body .compose-form__highlightable:focus-within {
    border-color: var(--color-accent);
}
.app-body .compose-form .reply-indicator + .navigation-bar,
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within),
.app-body .reply-indicator {
    background-color: var(--color-content-bg);
}
.app-body .compose-form__highlightable.active {
    box-shadow: none;
}
.app-body .compose-form
    :is(
        .autosuggest-textarea__suggestions,
        .autosuggest-textarea__textarea,
        .autosuggest-textarea__suggestions__item,
        .compose-form__modifiers
    ) {
        background-color: var(--color-content-bg);
        color: var(--color-content-fg);
        border: 0;
        border-top: 0;
        border-radius: 0;
}
.app-body .compose-form .autosuggest-textarea__textarea {
    padding-inline-start: 20px;
}
.app-body .compose-form .autosuggest-textarea__textarea::placeholder {
    font-size: 130%;
    opacity: .5;
}
.app-body .autosuggest-textarea__textarea::placeholder,
.app-body .autosuggest-account .display-name__html {
    color: var(--color-content-fg);
}
.app-body .autosuggest-account .display-name__account,
.app-body .hover-card .display-name__account,
.app-body .hover-card .account-fields dl dt {
    color: var(--color-content-fg-muted);
}
.app-body .autosuggest-textarea__suggestions {
    background-color: var(--color-content-bg);
    border: 1px solid var(--color-lines);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, .25),
        0 8px 10px -6px rgba(0, 0, 0, .25);
}
.app-body .autosuggest-textarea__suggestions__item {
    color: var(--color-content-fg);
}
.app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover),
.app-body .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.app-body .autosuggest-textarea__suggestions,
.app-body .autosuggest-textarea__suggestions__item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.app-body .autosuggest-account .account__avatar {
    border: 0;
}
.app-body .dropdown-button {
    border: 0;
    color: var(--color-content-fg);
    padding: 5px 8px;
}
.app-body .dropdown-button:hover {
    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);
}
.app-body .dropdown-button.warning:not(.active) {
    border-color: var(--color-reject);
    color: var(--color-reject)
}
.app-body .reply-indicator {
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
    border-top: 1px solid var(--color-lines);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: none;
    margin: 0;
    padding: 18px 15px 0 18px;
    color: var(--color-content-fg);
}
.app-body .reply-indicator p {
    overflow: hidden;
}
.app-body .reply-indicator__line::before {
    background-color: var(--color-accent);
    z-index: 1;
    opacity: .6;
}
.app-body .reply-indicator + .navigation-bar {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 16px;
}
.app-body .reply-indicator .display-name__account,
.app-body .reply-indicator__attachments {
    color: var(--color-content-fg);
    opacity: .7;
}
.app-body .reply-indicator__attachments {
    margin-top: 8px;
}

.app-body .edit-indicator {
    background-color: var(--color-content-secondary-bg);
    border-bottom: 0;
    gap: 2px;
    padding-inline-start: 20px;
    padding-bottom: 17px;
}
.app-body .edit-indicator__header {
    color: var(--color-content-fg);
}
.app-body .edit-indicator__header > *:not(.edit-indicator__cancel) {
    opacity: .7;
}
.app-body .edit-indicator__content {
    color: var(--color-content-fg);
}
.app-body .edit-indicator__content a {
    color: var(--color-accent);
}
.app-body .edit-indicator__attachments {
    color: var(--color-content-fg);
    opacity: .7;
}

.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active) {
    border: 1px solid var(--color-accent-bg);
    color: var(--color-accent);
    border-radius: 8px;
}
.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover {
    border-color: var(--color-accent);
}
.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):active {
    background-color: var(--color-accent-bg);
}




.app-body .compose-form .compose-form__warning {
    background-color: var(--color-accent-bg);
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
    border-radius: 0;
    box-shadow: none;
}
.app-body .compose-form .compose-form__warning,
.app-body .simple_form .recommended,
.app-body .compose-form .compose-form__warning,
.app-body .compose-form .compose-form__warning a,
.app-body .reply-indicator__content a,
.app-body .navigation-bar__profile-edit {
    color: var(--color-accent);
}
.app-body .simple_form .recommended {
    border-color: var(--color-lines);
}
.app-body .compose-form__sensitive-button .icon-button:hover {
    background-color: transparent;
}
.app-body .compose-form__sensitive-button input[type=checkbox]:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}
.app-body .spoiler-input__border {
    display: none;
}
.app-body .compose-form .autosuggest-input {
    box-sizing: border-box;
}
.app-body .compose-form .spoiler-input.spoiler-input--visible {
    margin-bottom: 0;
    height: auto;
    background-color: var(--color-content-bg);
}
.app-body .compose-form .spoiler-input .autosuggest-input {
    background-color: var(--color-content-bg);
    border-top: 0;
    border-bottom: 0;
    padding: 10px;
}
.app-body .compose-form .spoiler-input__input {
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
    border: 1px solid var(--color-accent-lines);
    margin-bottom: 0;
    border-radius: 8px;
    padding: 8px 15px 8px 36px;
    font-weight: 500;
}
.app-body .compose-form .spoiler-input__input:focus {
    border-color: var(--color-accent);
    background-color: var(--color-content-bg);
}
.app-body .display-name {
    color: var(--color-content-fg);
}
.app-body .compose-form__upload .icon-button.compose-form__upload__delete .icon {
    width: 15px;
    height: 15px;
}
.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button {
    color: #ffffff;
}
.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) {
    background-color: rgba(0, 0, 0, .4);
}
@media screen and (max-width:1175px) {
    .app-body:not(.layout-multiple-columns) .compose-form {
        padding: 15px;
    }
}

.app-body .compose-form .attachment-list.compact .icon {
    color: var(--color-content-fg-muted);
    vertical-align: bottom;
}

.app-body .compose-form .status__quote {
    margin: 10px 10px 0;
}
.app-body .compose-form .status--is-quote .status__content {
    font-size: 14px;
}
.app-body .compose-form .status--is-quote .status__relative-time {
    padding-inline-end: 25px;
}
.app-body .compose-form .status__quote-cancel {
    position: absolute;
    inset-inline-end: 6px;
    inset-block-start: 8px;
    z-index: 2;
}


.app-body .character-counter {
    color: var(--color-content-fg);
    opacity: 0.9;
    font-size: 15px;
    transform-origin: right center;
}
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter {
    opacity: 1;
    margin-right: 0;
}
.app-body .character-counter--over {
    color: #df405a;
    font-weight: 500;
}

.compose-form__footer {
    gap: 10px;
    padding: 0;
}
/* Flatten footer so visibility + language sit after emoji, before character counter */
.app-body .compose-form__footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.app-body .compose-form__actions {
    display: contents;
    border-radius: 0 0 8px 8px;
    padding: 0;
    align-items: center;
}
.app-body .compose-form__buttons {
    display: contents;
    gap: 8px;
}
.app-body .compose-form__footer > * {
    order: 10;
}
.app-body .compose-form__footer .compose-form__upload-button {
    order: 1;
}
.app-body .compose-form__footer .compose-form__poll-button {
    order: 2;
}
.app-body .compose-form__footer button.icon-button[aria-controls="cw-spoiler-input"] {
    order: 3;
}
.app-body .compose-form__footer .emoji-picker-dropdown {
    order: 4;
}
.app-body .compose-form__footer .compose-form__dropdowns {
    order: 5;
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    max-width: max-content;
}
.app-body .compose-form__footer .character-counter {
    order: 6;
}
.app-body .compose-form__footer .compose-form__submit {
    order: 7;
    margin-inline-start: auto;
}
.app-body .compose-form__dropdowns {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 8px;
    padding: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: max-content;
}
.app-body .compose-form__dropdowns > div {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}
.app-body .compose-form__dropdowns .dropdown-button__label {
    display: none;
}
.app-body .compose-form__dropdowns .dropdown-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    width: auto;
    flex: 0 0 auto;
    padding: 4px;
    border-radius: 6px;
}
.app-body .compose-form__dropdowns .dropdown-button .icon {
    width: 18px;
    height: 18px;
    transform: scale(1.2);
}
.app-body .compose-form__buttons .icon-button {
    padding: 4px;
    border-radius: 6px;
    background: transparent;
}
.app-body .compose-form__buttons .icon {
    transform: scale(1.2);
    width: 18px;
}
.app-body .compose-form__buttons .icon-button:is(.active, .active:hover) {
    background: transparent;
}


.app-body .upload-area__background {
    background-color: var(--color-secondary-bg);
    border-radius: 8px;
}
.app-body .upload-area__content {
    border-color: var(--color-accent-focus);
    border-radius: 8px;
}
.app-body .upload-progress__tracker {
    background-color: var(--color-accent);
}
.app-body .upload-progress__backdrop {
    background-color: var(--color-accent-bg);
}
.app-body .upload-progress .icon {
    color: var(--color-accent)
}
.app-body .upload-progress__message,
.app-body .upload-progress__message span {
    color: var(--color-content-fg);
}
.app-body .compose-form__upload .icon-button {
    background-color: rgba(0, 0, 0, .75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--color-accent-fg);
    border-radius: 8px;
    padding: 6px;
}
.app-body .compose-form__upload .icon-button:hover {
    background-color: #444;
    color: var(--color-accent-fg);
}

/* Poll composer */
.app-body .compose-form__poll {
    gap: 3px;
}
.app-body .compose-form__poll .poll__option {
    margin-bottom: 2px;
    padding: 0 10px;
}
.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);
}
.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: 10px;
    gap: 6px;
    margin-bottom: -3px;
}
.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;
    background-color: var(--color-content-bg);
    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;
    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__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);
}


/* 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;
}
.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;
    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);
}
.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: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;
}
.app-body .poll__option:has(.poll__voted):has(+ .poll__chart.leading) {
    border-color: var(--color-confirm);
}

/* Emoji picker */
.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-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);
}

/* 💬 Posts
   -------- */
.app-body .reply-indicator__content,
.app-body .status__content {
    color: var(--color-content-fg);
}
.app-body .account__display-name strong,
.app-body .status__display-name strong,
.app-body .status__info .status__display-name .display-name__account,
.app-body .status__prepend a bdi {
    color: var(--color-content-fg);
}
.app-body .translate-button {
    color: var(--color-content-fg-muted);
}
.app-body .translate-button__meta,
.app-body .translate-button button,
.app-body .status__content__translate-button {
    font-size: 85%;
}
.app-body .status__content__translate-button,
.app-body .translate-button .link-button {
    width: 32px;
    height: 32px;
    bottom: 13px;
    right: 52px;
    padding: 0px;
    position: absolute;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
    background-color: transparent;
}
.app-body .compose-form .status__content__translate-button,
.app-body .compose-form .translate-button .link-button {
    display: none;
}
.app-body .detailed-status .status__content__translate-button,
.app-body .detailed-status .translate-button .link-button {
    background-size: 25px;
    width: 40px;
    height: 40px;
    right: 60px;
    bottom: 20px;
}
.app-body .status--is-quote :is(.status__content__translate-button, .translate-button .link-button) {
    display: none;
}
@media screen and (max-width:770px) {
    .app-body .status__content__translate-button,
    .app-body .translate-button .link-button {
        bottom: 10px;
    }
    .app-body .notification-ungrouped .status__content__translate-button,
    .app-body .notification-ungrouped .translate-button .link-button {
        bottom: 13px;
        right: 55px;
    }
}
.app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child
    :is(
        .translate-button .link-button,
        .status__content__translate-button
    ) {
        bottom: 12px;
}
.app-body .status__content__translate-button:hover,
.app-body .translate-button .link-button:hover {
    background-color: var(--color-accent-bg);
}
.app-body .translate-button .link-button,
.app-body .detailed-status .translate-button .link-button,
.app-body .translate-button .link-button:hover,
.app-body .detailed-status .translate-button .link-button:hover {
    background-color: var(--color-accent);
    transform: scale(.8);
}
.app-body .status__content__translate-button > span,
.app-body .translate-button .link-button > span,
.app-body .notification .status__content__translate-button {
    display: none;
}
.app-body .account__display-name strong,
.app-body .status__display-name strong,
.app-body .notification-request__name__display-name strong,
.app-body .status__prepend a bdi {
    font-weight: bold;
}
.app-body .status {
    margin-left: 56px;
    padding: 0 10px;
    border-bottom: 0;
}
.app-body .status__wrapper,
.app-body .detailed-status__wrapper {
    --color-post-bg: var(--color-content-bg);
    background-color: var(--color-post-bg);
    padding: 13px 12px;
    position: relative;
}
@media screen and (max-width:770px) {
    .app-body .status__wrapper:not(:has(.status--is-quote)) {
        padding: 10px 8px;
    }
    .app-body .notification-ungrouped .status__wrapper:not(:has(.status--is-quote)) {
        padding: 13px 12px;
    }
}
.app-body .scrollable > div:first-child > div:first-child > .status__wrapper,
.app-body .scrollable > div:first-child > .status__wrapper,
.app-body .explore__search-results > div:first-child > .status__wrapper {
    border-top: 1px solid var(--color-lines);
}
.app-body .scrollable > div:last-child > div:last-child > .status__wrapper,
.app-body .scrollable > div > article:last-child > div > .status__wrapper,
.app-body .search-results__section > div:last-child >.status__wrapper {
    border-bottom: 1px solid var(--color-lines);
}
.app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper {
    border-top: 0;
}
.app-body .status__info {
    min-height: 22px;
    height: auto;
    gap: 2px;
    margin-inline-start: -56px;
    padding: 0;
    margin-bottom: 10px;
    line-height: 0.625;
    align-items: start;
}
.app-body .status__info .status__display-name {
    overflow: visible;
    align-items: start;
    max-height: none;
}
.app-body .status__info .status__display-name .display-name__account {
    opacity: .6;
}
.app-body .status__relative-time {
    height: 22px;
    color: var(--color-content-fg);
    display: flex;
    position: absolute;
    inset-inline-end: 23px;
    z-index: 1;
}
@media screen and (max-width: 770px) {
    .app-body .status__relative-time {
        inset-inline-end: 20px;
    }
}
.app-body .status__relative-time > * {
    opacity: .6;
}
.app-body .status__relative-time::before,
.app-body .status__relative-time::after {
    position: absolute;
    content: " ";
    display: block;
    height: 100%;
    z-index: -1;
}
.app-body .status__relative-time::before {
    width: 20px;
    inset-inline-start: -20px;
    background: linear-gradient(90deg, transparent, var(--color-post-bg));
}
.app-body .status__relative-time::after {
    inset-inline-start: 0;
    inset-inline-end: 0;
    background-color: var(--color-post-bg);
}
.app-body .status__relative-time time + abbr {
    display: inline-block;
    width: auto;
    height: auto;
    order: 2;
    margin: 0 4px 0 0;
    background: none;
    color: var(--color-content-fg-muted);
}
.app-body .status__relative-time .status__visibility-icon {
    order: 1;
}
.app-body .status__relative-time time {
    order: 3;
}
.app-body .status__relative-time time + abbr {
    order: 2;
}
.app-body .status__avatar {
    margin-bottom: -10px;
    z-index: 2;
    border-radius: 50%;
    outline: 6px solid var(--color-post-bg);
    background-color: var(--color-post-bg);
}
.app-body .status__prepend + .status .status__avatar .account__avatar-overlay-base .account__avatar {
    width: 46px !important;
    height: 46px !important;
}
.app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay {
    position: absolute;
    top: -34px;
    right: -38px;
    pointer-events: none;
}
.app-body .status__prepend + .status .status__avatar .account__avatar-overlay-overlay .account__avatar {
    width: 29px !important;
    height: 29px !important;
}
.app-body .reply-indicator__content,
.app-body .status__content {
    line-height: 1.4;
    position: static;
}

.app-body .e-content blockquote,
.app-body .reply-indicator__content blockquote,
.app-body .status__content__text blockquote {
    color: var(--color-content-fg);
    border-color: var(--color-lines);
    font-style: italic;
}
.app-body :is(.status__content__text, .e-content, .edit-indicator__content, .reply-indicator__content) blockquote::before {
    background-color: var(--color-content-fg);
}


/* 📏 Post dividers */
/* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */
.app-body .status:not(.status--is-quote)::before,
.app-body .notification__message::before {
    position: absolute;
    background-color: var(--color-lines);
    height: 1px;
    width: 100%;
    top: -1px;
    inset-inline-start: unset;
    inset-inline-end: 0;
    content: "";
    opacity: .7;
}
.app-body .status.status--in-thread:not(.status--first-in-thread)::before {
    width: calc(100% - 78px);
}
@media screen and (max-width:770px) {
    .app-body .status.status--in-thread:not(.status--first-in-thread)::before {
        width: calc(100% - 73px);
    }
}
@media (prefers-color-scheme: dark) {
    .app-body .status::before,
    .app-body .notification__message::before {
        opacity: 1;
    }
}

/* Remove border between posts when applicable */
.app-body .notification .status::before, /* no dividers on posts _inside_ notifications */
.app-body .account-timeline__header + article .status::before, /* no divider above first post on profile pages */
.app-body .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */
.app-body .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */
.app-body .hashtag-header + article .status::before,
.app-body .search-results__section .search-results__section__header + div .status::before,
.app-body .dismissable-banner + article .status::before {
    display: none;
}
@media screen and (min-width:890px) and (max-width:1175px) { /* no divider above first post in a column thread on medium-size devices */
    .app-body .scrollable > div:first-child > div:first-child > .status__wrapper .status::before,
    .app-body .scrollable > div > article:first-child > div > .status__wrapper .status::before{
        display: none;
    }
}

/* 👥 Threaded replies */
.app-body .status--first-in-thread:not(.status--is-quote) {
    border-top: 0;
}
.app-body .status--first-in-thread:not(.status--is-quote)::before {
    width: 100%;
    right: 0;
}
.app-body .status--in-thread
    :is(
        .attachment-list,
        .audio-player,
        .hashtag-bar,
        .media-gallery,
        .picture-in-picture-placeholder,
        .status-card,
        .status__action-bar,
        .status__content,
        .video-player
    ) {
        margin-left: 0;
        width: auto;
}
.app-body .status__line--first {
    height: 100%;
}
.app-body .status__line--full {
    height: calc(100% + 32px);
}
/* Default lines when replying in real time */
.app-body div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) {
    height: 0;
}
/* Hide line before first in thread */
.app-body div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full),
.app-body div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) {
    height: 0;
}
.app-body div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line {
    height: calc(100% - 32px) !important;
}

.app-body div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full,
.app-body .status__line--full.status__line--first {
    top: 32px;
    height: 100%;
    z-index: 1;
}
.app-body .detailed-status {
    background-color: transparent;
    border-top: 0;
}
/* Threaded line, actually */
.app-body .status__line {
    margin-inline-start: 6px;
    border-inline-start: 2px solid var(--color-accent);
    -webkit-border-start: 2px solid var(--color-accent);
    opacity: .6;
}
.app-body .status__line--full::before {
    background-color: var(--color-accent);
}
/* Hide the "stub" from the first status line */
div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full,
.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line,
.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before {
    top: 32px;
}
@media screen and (max-width:770px) {
    .app-body .status__line {
        inset-inline-start: 35px;
    }
}


/* ⏺️ Posts when in focus */
.app-body
    :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus,
.app-body
    :is(.focusable, .status__wrapper.focusable):focus
    :is(.detailed-status, .detailed-status__action-bar),
.app-body .focusable:focus .notification-ungrouped__header,
.app-body .focusable:focus .status__wrapper,
.app-body .focusable:focus {
        outline: 0;
        --color-post-bg: var(--color-content-bg-focus);
        background-color: var(--color-post-bg);
}
.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus .status__avatar {
    outline: 6px solid var(--color-post-bg);
}

/* 👁️ Post detailed view */
.app-body .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */
    background-color: var(--color-post-bg);
    border-top: 1px solid var(--color-lines);
    border-bottom: 1px solid var(--color-lines);
    padding-bottom: 20px;
    z-index: 1;
    box-shadow:
        inset 0 -5px var(--color-content-secondary-bg),
        inset 0 -6px var(--color-lines);
}
.app-body .scrollable > div:is(:last-child, :only-child) .detailed-status__wrapper:last-child {
    padding-bottom: 12px;
    box-shadow: none;
}
@media screen and (max-width:770px) {
    .app-body .detailed-status {
        padding: 8px 8px 14px;
    }
}
.app-body .detailed-status .detailed-status__display-avatar .account__avatar {
    width: 60px !important;
    height: 60px !important;
}
.app-body .detailed-status .status__content {
    line-height: 1.27;
}
.app-body .detailed-status {
    padding-bottom: 8px;
}
.app-body .detailed-status,
.app-body .detailed-status__action-bar {
    background-color: var(--color-content-bg);
    border: 0;
}
.app-body .detailed-status__display-name strong,
.app-body .detailed-status__display-name .display-name__account {
    color: var(--color-content-fg);
}
.app-body .detailed-status__display-name strong {
    font-size: 18px;
    font-weight: bold;
}
.app-body :is(.compose-panel, .compose-form) .detailed-status__display-name strong {
    font-size: 14px;
}
.app-body .detailed-status__display-name .display-name__account {
    opacity: .7;
}
.app-body .detailed-status__meta {
    color: var(--color-content-fg);
    display: flex;
    align-items: start;
    flex-flow: row wrap;
    font-size: 15px;
    gap: 5px;
    border-top: 1px solid color-mix(in srgb, var(--color-lines), transparent 20%);
    margin-top: 25px;
    padding-top: 12px;
    overflow: hidden;
    position: relative;
}
.app-body .detailed-status__meta::before {
    position: absolute;
    content: " ";
    display: block;
    height: 100%;
    z-index: 1;
    width: 30px;
    inset-inline-end: 0;
    background: linear-gradient(90deg, transparent, var(--color-post-bg));
}
.app-body .detailed-status__meta__line {
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    gap: 6px;
    position: relative;
    opacity: .6;
}
.app-body .detailed-status__meta__line:first-child {
    color: transparent;
    padding-left: 20px;
    padding-right: 5px;
    gap: 0;
    margin-left: 0;
}
.app-body .detailed-status__meta__line:first-child svg {
    position: absolute;
    left: 0;
}
.app-body .detailed-status__meta__line:first-child > * {
    color: var(--color-content-fg);
    white-space: nowrap;
}
.app-body .detailed-status__meta__line:last-child {
    flex: 100%;
    /* The "·" between links is a flex item with order:0; it sorts before the links
       (order:1+2), so any gap: here becomes empty space *before* favourites. Use gap:0
       and space the links with margin on reblogs instead. */
    gap: 0;
    /* Mastodon puts a "·" text node between reblogs and favourites; font-size:0 collapses it. */
    font-size: 0;
    line-height: 0;
}
.app-body .detailed-status__meta__line:last-child > .detailed-status__link,
.app-body .detailed-status__meta__line:last-child > .dropdown-menu__text-button {
    font-size: 15px;
    line-height: 1.3;
}

.app-body .detailed-status__link:is([href$="/reblogs"], :has(.detailed-status__quotes), [href$="/quotes"], [href$="/favourites"]) {
    color: var(--color-content-fg-muted);
    padding-left: 20px;
    border-radius: 8px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 15px;
}
.app-body .detailed-status__link[href$="/reblogs"] {
    background-image: var(--icon-boost);
    order: 2;
}
.app-body .detailed-status__link[href$="/favourites"] {
    background-image: var(--icon-star);
    order: 1;
}
.app-body .detailed-status__meta__line:last-child .detailed-status__link[href$="/reblogs"] {
    margin-inline-start: 6px;
}
.app-body .detailed-status__meta__line .dropdown-menu__text-button {
    overflow: hidden;
    padding-left: 20px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 15px;
    text-align: start;
}
.app-body .detailed-status__meta__line .dropdown-menu__text-button:is(:hover) {
    text-decoration: none;
}
.app-body .detailed-status__action-bar {
    padding: 0 12px;
    justify-content: left;
    gap: 8px;
    width: auto;
}
@media screen and (max-width:770px) {
    .app-body .detailed-status__action-bar {
        padding-left: 0;
        padding-right: 0;
    }
}
.app-body .detailed-status__button {
    width: auto;
    height: auto;
    flex: 0 0 auto;
}
.app-body .detailed-status__action-bar-dropdown {
    display: flex;
    position: static;
    right: auto;
    width: auto;
    flex: 0 0 auto;
}
.app-body .detailed-status__meta .animated-number {
    color: var(--color-content-fg);
    font-weight: 700;
}
.app-body .detailed-status__meta .dropdown-menu__text-button .animated-number {
    font-weight: 500;
}
.app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) .animated-number {
    color: var(--color-content-fg);
    font-weight: 500;
}
.app-body .status__action-bar__button:has(.icon-button__counter > .animated-number) {
    padding-left: 4px;
    padding-right: 4px;
    margin-right: 2px;
}
.app-body
    :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
    .active
    .icon-retweet + .icon-button__counter > .animated-number {
        color: var(--color-accent);
}
.app-body
    :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
    .active
    .icon-star + .icon-button__counter
    > .animated-number {
        color: var(--color-accent);
}

.app-body article > .account {
    padding: 16px;
}
.app-body .account-timeline__header + article > .account {
    border-top: 1px solid var(--color-lines);
}
.app-body .detailed-status__link {
    display: inline-flex;
    position: static;
    gap: 4px;
}

/* Hashtag bar */
.app-body .hashtag-bar a,
.app-body .hashtag-bar .link-button {
    color: var(--color-content-fg-muted);
}
.app-body .hashtag-bar a {
    font-weight: 500;
}
.app-body .hashtag-bar .link-button {
    margin-left: 3px;
}
.app-body .hashtag-bar a {
    background-color:
        color-mix(
            in srgb,
            var(--color-content-fg),
            transparent 92%
        );
    padding: 3px 8px;
    border-radius: 8px;
}
.app-body .hashtag-bar a:hover,
.app-body .hashtag-bar .link-button:hover {
    color: var(--color-accent);
}
.app-body .hashtag-bar a:hover {
    background-color: var(--color-accent-bg);
}
.app-body .hashtag-bar a:active,
.app-body .hashtag-bar a:focus {
    color: var(--color-accent-fg);
    background-color: var(--color-accent);
}
.app-body .hashtag-bar a:hover span {
    text-decoration: none;
}

/* ⭐ Action bar */
.app-body .status__action-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 8px;
    gap: 9px;
}
/* Favourite → Reply → Boost (then bookmark, more) — Mastodon default is reply, boost, favourite */
.app-body .status__action-bar > .status__action-bar__button-wrapper {
    order: 10;
}
.app-body .status__action-bar > .status__action-bar__button-wrapper:has(.star-icon) {
    order: 1;
}
.app-body .status__action-bar > .status__action-bar__button-wrapper:has(.icon-reply),
.app-body .status__action-bar > .status__action-bar__button-wrapper:has(.icon-reply-all) {
    order: 2;
}
.app-body
    .status__action-bar
    > .status__action-bar__button-wrapper:has(.icon-retweet, .icon-Boost-icon, .icon-Unboost-icon) {
    order: 3;
}
.app-body .status__action-bar > .status__action-bar__button-wrapper:has(.bookmark-icon) {
    order: 4;
    margin-inline-start: auto;
}
.app-body .status__action-bar > .status__action-bar__button-wrapper:has(.icon-ellipsis-h) {
    order: 5;
}
.app-body .detailed-status__action-bar {
    display: flex;
    flex-wrap: wrap;
}

.app-body .detailed-status__action-bar > .detailed-status__button:has(.star-icon) {
    order: 1;
}
.app-body .detailed-status__action-bar > .detailed-status__button:has(.icon-reply),
.app-body .detailed-status__action-bar > .detailed-status__button:has(.icon-reply-all) {
    order: 2;
}
.app-body
    .detailed-status__action-bar
    > .detailed-status__button:has(.icon-retweet, .icon-Boost-icon, .icon-Unboost-icon) {
    order: 3;
}
.app-body .detailed-status__action-bar > .detailed-status__button:has(:is(.bookmark-icon, .icon-bookmark)) {
    order: 4;
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    margin-inline-start: auto;
}
.app-body .detailed-status__action-bar > .detailed-status__action-bar-dropdown {
    order: 5;
}
.app-body .picture-in-picture__footer {
    display: flex;
    flex-wrap: wrap;
}
.app-body .picture-in-picture__footer > * {
    order: 10;
}
.app-body .picture-in-picture__footer > *:has(.star-icon) {
    order: 1;
}
.app-body .picture-in-picture__footer > *:has(.icon-reply),
.app-body .picture-in-picture__footer > *:has(.icon-reply-all) {
    order: 2;
}
.app-body
    .picture-in-picture__footer
    > *:has(.icon-retweet, .icon-Boost-icon, .icon-Unboost-icon) {
    order: 3;
}
.app-body .picture-in-picture__footer > *:has(.bookmark-icon) {
    order: 4;
    margin-inline-start: auto;
}
.app-body .picture-in-picture__footer > *:has(.icon-ellipsis-h) {
    order: 5;
}
.app-body .status__action-bar .status__action-bar__button-wrapper {
    flex-grow: 0;
}
/* Timeline more menu: Web uses horizontal dots in some builds, vertical in others */
.app-body .status__wrapper .status__action-bar > .status__action-bar__button-wrapper:has(:is(.icon-ellipsis-h, .icon-ellipsis-v)) {
    top: 13px;
    inset-inline-end: 12px;
    bottom: auto;
    z-index: 6;
}
.app-body .notification-ungrouped .status__wrapper .status__action-bar > .status__action-bar__button-wrapper:has(:is(.icon-ellipsis-h, .icon-ellipsis-v)) {
    inset-inline-end: 17px;
}

.app-body .status__action-bar .icon-button.disabled {
    pointer-events: none;
}
.app-body
    :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
    .icon-button:not(.active):not(:active):not(:focus)
    :is(.icon-star, .icon-reply, .icon-reply-all, .icon-retweet, .icon-Boost-icon, .bookmark-icon, .icon-bookmark, .icon-ellipsis-h, .icon-ellipsis-v) {
        opacity: .8;
}
.app-body
    :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
    .icon-button.active:has(:is(.bookmark-icon, .icon-bookmark))
    :is(.bookmark-icon, .icon-bookmark) {
        color: var(--color-accent);
}
.app-body
    :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer)
    .icon-button:is(
        :active,
        .active:active,
        :focus,
        .active:focus
    ) {
        background-color: transparent;
}



.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet {
    opacity: 1;
}


.app-body .status__action-bar .icon-button,
.app-body .detailed-status__action-bar .icon-button {
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    position: relative;
}
.app-body .detailed-status__action-bar .icon-button {
    min-width: 40px;
    height: 40px;
}
.app-body .detailed-status__action-bar .icon-button > .icon {
    width: 25px;
    height: 25px;
}
.app-body .detailed-status__action-bar .icon-button
.app-body .icon-button.star-icon.active,
.app-body .notification__favourite-icon-wrapper .star-icon {
    color: var(--color-accent);
}
/* Disable favorite "bouncy" effect */
.app-body .icon-button.star-icon,
.app-body .icon-button.star-icon .icon-star,
.app-body .icon-button.star-icon.active,
.app-body .icon-button.star-icon.active .icon-star {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}
.app-body .status__prepend {
    display: inline-flex;
    padding: 0 10px;
    margin-top: 3px;
    margin-bottom: 5px;
    margin-left: 66px;
    height: 29px;
    gap: 5px;
    border-radius: 50px;
    align-items: center;
    background-color: var(--color-content-secondary-bg);
    color: var(--color-content-fg);
    font-size: 13px;
}
.app-body .status__prepend:has(.status__prepend__icon .icon-retweet) {
    padding-left: 35px;
}
.app-body .status__prepend__icon {
    height: 20px;
    text-align: right;
}
.app-body .status__prepend .status__prepend__icon:has(.icon-retweet) {
    order: 2;
}
.app-body .status__prepend__icon .icon {
    transform: scale(.9);
}
.app-body .detailed-status__wrapper .status__prepend__icon {
    width: 46px;
}
.app-body .status__prepend > span {
    color: var(--color-fg-muted);
    white-space: nowrap;
}
.app-body .status__prepend:has(.status__prepend__icon > .icon-thumb-tack) > span {
    color: var(--color-content-fg);
    font-weight: 600;
}
.app-body .status__prepend .muted .emojione {
    opacity: 1;
}
.app-body .status-card,
.app-body .status-card.compact {
    background-color: var(--color-content-bg);
    border: 1px solid var(--color-lines);
    box-shadow: none;
    border-radius: 9px;
}
.app-body .status-card:hover,
.app-body .status-card.compact:hover {
    background-color: var(--color-content-bg-focus);
    border-color: var(--color-lines);
}
.app-body .status-card:active,
.app-body .status-card.compact:active {
    transform: scale(.98);
}
.app-body .status-card__image {
    background: var(--color-content-secondary-bg);
}
.app-body .status-card__image .icon {
    width: 32px;
    height: 32px;
}
.app-body .status-card__title {
    order: 1;
    line-height: 1.3;
    font-size: 18px;
    margin-bottom: 3px;
}
.app-body .status-card__host {
    order: 2;
}
.app-body .status-card__description {
    order: 3;
}
.app-body .status-card__image:has(.icon-file-text:only-child),
.app-body .status-card__description:empty  {
    display: none;
}
.app-body .status-card__title,
.app-body .status-card__description,
.app-body .status-card__author,
.app-body .status-card__host {
    color: var(--color-content-fg);
}
.app-body .status-card__host {
    color: var(--color-content-fg-muted);
}
.app-body .status-card:active .status-card__host,
.app-body .status-card:focus .status-card__host,
.app-body .status-card:hover .status-card__host {
    color: var(--color-accent);
}
.app-body .status-card:active .status-card__author,
.app-body .status-card:active .status-card__description,
.app-body .status-card:active .status-card__title,
.app-body .status-card:focus .status-card__author,
.app-body .status-card:focus .status-card__description,
.app-body .status-card:focus .status-card__title,
.app-body .status-card:hover .status-card__author,
.app-body .status-card:hover .status-card__description,
.app-body .status-card:hover .status-card__title {
    color: var(--color-content-fg);
}
.app-body .status-card__author strong {
    font-weight: 500;
}
@media screen and (max-width:770px) {
    .app-body .status-card:not(.expanded) .status-card__image {
        width: 80px;
    }
    .app-body .status-card:not(.expanded,:has(.icon-file-text)) .status-card__content {
        padding-top: 0;
        padding-bottom: 0;
    }
    .app-body .status-card[href*="/@" i]:not(.expanded,:has(.icon-file-text)) .status-card__content {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .app-body .status-card:not(.expanded) .status-card__host {
        margin-bottom: 2px;
        font-size: 12px;
    }
    .app-body .status-card:not(.expanded) .status-card__title {
        font-size: 16px;
    }
    .app-body .status-card:not(.expanded) .status-card__description {
        margin-top: 2px;
        font-size: 12px;
    }
}
.layout-multiple-columns .status-card:not(.expanded) .status-card__image {
    width: 80px;
}
.layout-multiple-columns .status-card:not(.expanded,:has(.icon-file-text),[href*="/@" i]) .status-card__content {
    padding-top: 0;
    padding-bottom: 0;
}
.layout-multiple-columns .status-card:not(.expanded) .status-card__host {
    margin-bottom: 2px;
    font-size: 12px;
}
.layout-multiple-columns .status-card:not(.expanded) .status-card__title {
    font-size: 16px;
}
.layout-multiple-columns .status-card:not(.expanded) .status-card__description {
    margin-top: 2px;
    font-size: 12px;
}
.app-body .status-card:has(+ .more-from-author) {
    box-sizing: border-box;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
}
.app-body .status-card + .more-from-author {
    background-color: var(--color-content-secondary-bg);
    border: 1px solid var(--color-lines);
    border-top: 0;
}
.app-body .more-from-author {
    color: var(--color-content-fg);
    overflow: hidden;
}
.app-body .more-from-author .logo {
    color: var(--color-content-fg);
    min-width: 16px;
    height: 16px;
}
.app-body .more-from-author > span {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    mask-image: linear-gradient(90deg, black 80%, transparent 96%);
}
.app-body .notification-ungrouped  .more-from-author :is(.account__avatar) {
    width: 16px !important;
    height: 16px !important;
}
.app-body .more-from-author a:is(:active, :hover, :focus) {
    color: var(--color-accent);
}
.app-body .more-from-author a {
    color: var(--color-content-fg);
    font-weight: 700;
}
.app-body .status__content p {
    margin-bottom: 12px;
}
.app-body .status__content p:last-child {
    margin-bottom: 0;
}
.app-body .content-warning {
    background: none;
    color: var(--color-content-fg);
    margin-inline-start: 0;
    margin-top: 2px;
    margin-bottom: 5px;
    border: 0;
    padding: 0 0 25px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.26;
    position: relative;
}
.app-body .detailed-status .content-warning {
    font-size: 19px;
    line-height: 1.26;
}
.app-body .status--is-quote .content-warning {
    font-size: 15px;
}
.app-body .content-warning > p {
    font-weight: bold;
}
.app-body .content-warning--filter .filter-name {
    color: var(--color-content-fg);
    font-weight: bold;
}
.app-body .content-warning::before,
.app-body .content-warning::after {
    display: none;
}
.app-body .content-warning .link-button {
    background-color: transparent;
    width: 100%;
    text-align: start;
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: end;
    text-decoration: none;
}
.app-body .content-warning .link-button span {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left 7px center;
    background-size: auto 18px;
    border: 1px solid var(--color-lines);
    border-radius: 8px;
    text-transform: initial;
    font-size: 12px;
    line-height: 1.33;
    font-weight: 500;
    color: var(--color-content-fg);
    padding: 5px 8px 5px 30px;
    margin: 0;
    vertical-align: middle;
    display: inline-block;
    transform-origin: center left;
    position: relative;
    z-index: 1;
}
.app-body .content-warning .link-button:hover span {
    border-color: rgba(68, 74, 90, .6);
}
@media (prefers-color-scheme: dark) {
    .app-body .content-warning .link-button:hover span {
        border-color: rgba(255, 255, 255, .3);
    }
}
.app-body .content-warning .link-button:active span {
    transform: scale(.95);
}
@media (prefers-color-scheme: dark) {
    .app-body :is(.reply-indicator__content, .status__content) .status__content__spoiler-link:hover span {
        border-color: rgba(255, 255, 255, .3);
    }
}

.app-body .icon-button.overlayed {
    background-color: rgba(0, 0, 0, .1);
    border-radius: 7px;
}
.app-body .icon-button.overlayed:hover {
    background-color: rgba(0, 0, 0, .4);
}
.app-body .status__wrapper--filtered__button {
    color: var(--color-accent);
}
.app-body .status__wrapper--filtered {
    color: var(--color-content-fg);
    border-top: 1px solid var(--color-lines);
    border-bottom: 1px solid var(--color-lines);
    padding: 12px;
    margin-top: -1px;
}

.app-body .media-gallery {
    gap: 4px;
    grid-template-columns: calc(50% - 2px) calc(50% - 2px);
    grid-template-rows: calc(50% - 2px) calc(50% - 2px);
}

.app-body .media-gallery__item {
    border-radius: 8px !important;
    outline: 1px solid var(--color-lines-translucent);
    outline-offset: -1px;
}

/* Quote posts */
.app-body .status__quote {
    margin-inline-start: 0;
    border-radius: 10px;
    border: 1px solid var(--color-lines);
    width: auto;
}
.app-body .status__quote:has(:is(.status__content,.status__info):hover) {
    border-color: var(--color-accent);
}
.app-body .status__quote:has(:is(.status__content,.status__info):active) {
    transform: scale(.98);
}
.app-body .status__quote-icon {
    color: var(--color-accent);
}
.app-body .status__quote .status__quote-icon {
    display: none;
}
.app-body .status__quote .status__wrapper {
    border-radius: 10px;
}
.app-body .status--is-quote {
    margin-inline-start: 0;
    padding: 0;
    overflow: hidden;
    min-height: 48px;
}
.app-body .status--is-quote .status__info {
    margin-inline-start: 0;
    margin-block-end: 5px;
}
.app-body .status--is-quote .status__info .status__display-name {
    gap: 6px;
}
.app-body .status--is-quote .account__avatar {
    width: 20px !important;
    height: 20px !important;
}
.app-body .status__quote-author-button {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-content-fg);
}
.app-body .status--is-quote .display-name__account {
    font-size: unset;
    letter-spacing: unset;
}
.app-body .status--is-quote .status__relative-time {
    inset-inline-end: 15px;
}
.app-body .status--is-quote .status__relative-time time + abbr {
    height: 18px;    
}
.app-body .status--is-quote .status__content {
    letter-spacing: unset;
}
.app-body .status__quote--error {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-content-fg);
    border: 0;
}
.app-body .compose-form .status--is-quote .status__quote--error {
    margin-inline-start: 0;
    margin-inline-end: 0;
}
.app-body .status__quote:has(.skeleton) .status__avatar {
    display: none;
}
.app-body .status__quote:has(.skeleton) .status {
    margin-inline-start: 0;
    padding: 2px 10px;
    flex-direction: column;
    display: flex;
    justify-content: center;

    & .status__info {
        margin-inline-start: 0;
    }
}
.app-body .skeleton {
    background-color: var(--color-content-secondary-bg);
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-accent), transparent 50%), var(--color-content-secondary-bg), color-mix(in srgb, var(--color-accent), transparent 50%));
}


.app-body div:not(.detailed-status) > .media-gallery:has(.media-gallery__item.standalone),
.app-body .status > *:not(.status__info, .status__content, .status__action-bar, .status__line, .status-card, .status__quote, div:has(> .video-player)) {
    max-height: 450px;
    min-height: unset;
    width: auto;
}
.app-body .status--in-thread .more-from-author {
    margin-inline-start: 0;
}
.app-body .account-gallery__container {
    gap: 4px;
    padding: 4px;
}
.app-body .media-gallery__item,
.app-body .media-gallery__item-thumbnail,
.app-body .media-gallery__item-gifv-thumbnail {
    cursor: pointer;
}
.app-body .media-gallery__item:active {
    transform: scale(.98);
}
.app-body .media-gallery__item-thumbnail img,
.app-body .info-tooltip {
    border-radius: 8px;
}
.app-body .media-gallery__gifv:is(:active, :hover)::after {
    display: none;
}
.app-body .picture-in-picture .video-player::after {
    border-radius: 0;
}
.app-body .media-gallery__preview,
.app-body .video-player {
    background-color: var(--color-content-secondary-bg);
}
.app-body .video-player__controls {
    background: rgba(0, 0, 0, .2);
    backdrop-filter: blur(20px);
}
.app-body .media-gallery__preview {
    outline: 1px solid rgba(0, 0, 0, 0.05);
    outline-offset: -1px;
    height: calc(100% - 1px);
    border-radius: 8px;
}
.app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview {
    outline: 1px solid var(--color-lines-translucent);
}
.app-body .media-gallery__actions__pill {
    border-radius: 6px;
    padding: 3px 8px;
    font-weight: 500;
    background-color: rgba(0, 0, 0, .1);
}
.app-body .spoiler-button__overlay__label,
.app-body .spoiler-button__overlay__label:is(:focus, :hover),
.app-body .spoiler-button__overlay:is(:focus, :hover) .spoiler-button__overlay__label {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--color-content-bg);
    border: 1px solid rgba(0, 0, 0, .1);
    color: var(--color-content-fg);
    border-radius: 8px;
}
.app-body .spoiler-button__overlay__label > span:first-child {
    font-weight: bold;
}

.app-body :is(.media-gallery__alt__label, .media-gallery__gifv__label) {
    background-color: rgba(0, 0, 0, .1);
    border-radius: 6px;
}
.app-body .spoiler-button:not(.spoiler-button--minified) ~ .media-gallery__item :is(.media-gallery__alt__label, .media-gallery__gifv__label) {
    display: none;
}

.app-body .info-tooltip {
    background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
    border: 1px solid var(--color-lines-translucent);
}
.app-body .info-tooltip :is(p, h4) {
    color: var(--color-content-fg);
}
.app-body .info-tooltip h4 {
    font-weight: bold;
}


/* 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;
}




/* 📤 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);
    margin: 0;
    border-radius: 0;
}
.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) 96%);
}
.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) 98%);
}
.app-body .notification-ungrouped--direct,
.app-body .notification-group--direct,
.app-body .notification-group--annual-report {
    --color-post-bg: var(--color-content-bg);
    background-color: var(--color-post-bg);

}

.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;
}
.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 {
    background-image: var(--icon-at-inv);
}
.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%;
}



/* ⏺️ Column headers
   ----------------- */
.app-body .tabs-bar__wrapper {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
@media screen and (min-width:1175px) {
    .app-body .tabs-bar__wrapper {
        box-shadow: inset 0 10px var(--color-bg), 0 -10px var(--color-bg);
        border-radius: 8px 8px 0 0;
        border-top-color: var(--color-bg);
    }
    .app-body .tabs-bar__wrapper:has(#tabs-bar__portal:empty) {
       border-radius: 0;
    }
}
.app-body .column-header__wrapper.active::before {
    top: -17px;
    bottom: unset;
    opacity: 30%;
    height: 35px;
    width: 100%;
    background: radial-gradient(ellipse, var(--color-accent) 0, transparent 60%);
}
.app-body .column-header__wrapper.active {
    box-shadow: none;
}
@media screen and (min-width:1175px) {
    .app-body .column-header__wrapper.active::before {
        top: unset;
        bottom: -15px;
        border-top: 1px solid var(--color-lines-translucent);
    }
    .app-body .column-header__wrapper.active {
        box-shadow: 0 1px 0 var(--color-lines-translucent);
    }
}
.app-body .column-header {
    border-radius: 8px;
}
.app-body .column-header,
.app-body .column-back-button {
    background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
    color: var(--color-content-fg);
    border-right: 1px solid var(--color-lines);
    border-left: 1px solid var(--color-lines);
    border-top: 1px solid var(--color-lines);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    height: 50px;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.app-body .column-back-button {
    padding-left: 15px;
}
.app-body .column-header__button,
.app-body .column-header__back-button {
    background-color: transparent;
    border: 0;
}
.app-body .column-header__button {
    color: var(--color-content-fg);
    border-radius: 6px;
    height: 42px;
    margin: 4px 4px 4px 0;
}
.app-body .column-header__button:active {
    transform: scale(.8);
}
.app-body .column-header__icon {
    transform: scale(1.2);
}
.app-body .column-header__title {
    font-weight: 400;
}
.app-body .column-header > button,
.app-body .column-header .column-header__back-button {
    font-weight: 400;
}
.app-body .column-header.active .column-header__icon {
    color: var(--color-accent);
    text-shadow: none;
}
.app-body .column-header__button:is(.active, .active:hover, :hover) {
    color: var(--color-accent);
    background-color: var(--color-accent-bg);
}
.app-body .column-header__button.active .icon {
    transform: none;
}
@media screen and (max-width:1175px) {
    .app-body:not(.layout-multiple-columns) .column-header__wrapper::after,
    .app-body:not(.layout-multiple-columns) .column-back-button::after {
        display: none;
    }
    .app-body .column-header__buttons {
        height: 55px;
    }
    .app-body:not(.layout-multiple-columns) .column-header__button,
    .app-body:not(.layout-multiple-columns) .column-header__button:is(.active, .active:hover, :hover) {
        padding: 0 12px;
        height: 35px !important;
        align-self: center;
    }
}

.app-body .column-back-button--slim-button::after {
    display: none;
}
.app-body .column-back-button--slim-button {
    top: -50px
}
@media screen and (max-width:1175px) {
    .app-body:not(.layout-multiple-columns) .column-back-button--slim-button {
        height: 50px;
    }
}
@media screen and (min-width:1175px) {
    .app-body:not(.layout-multiple-columns) .column-back-button--slim-button {
        display: none;
    }
}
.app-body .column-back-button__icon {
    margin-inline-end: 0;
}
.app-body :is(.column-header__back-button, .column-back-button) span,
.app-body .column-header__back-button {
    position: relative;
}
.app-body :is(.column-header__back-button, .column-back-button):hover {
    text-decoration: none;
}
.app-body :is(.column-header__back-button, .column-back-button) span::before,
.app-body .column-header__back-button:has(> svg:last-child)::before {
    content: " ";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    top: 4px;
    z-index: -1;
    border-radius: 8px;
    background-color: transparent;
}
.app-body :is(.column-header__back-button, .column-back-button) span::before {
    left: -35px;
    right: -12px;
    bottom: -11px;
    top: -10px;
}

.app-body :is(.column-header__back-button, .column-back-button):active span::before,
.app-body .column-header__back-button:has(> svg:last-child):active::before {
    transform: scale(.9);
}

.app-body :is(.load-gap, .load-more) {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-accent);
    border-bottom: 0;
    display: flex;
    justify-content: center;
    padding: 8px;
}
.app-body :is(.load-gap, .load-more):is(:active, :hover) {
    background-color: var(--color-accent-lines);
}

.app-body .column-header__collapsible {
    background-color: var(--color-content-secondary-bg);
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
    border-bottom: 0;
}
.app-body .column-header__collapsible:is(:not(.collapsed), .animating) {
    border-bottom: 1px solid var(--color-lines);
}
.app-body .column-header__select-row {
    border-color: var(--color-lines);
}
.app-body .column-header__select-row__actions button {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
    border-color: var(--color-accent-bg);
}
.app-body .column-header__select-row__actions button:hover {
    border-color: var(--color-accent);
}
.app-body .column-header__select-row__actions button.active {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
@media screen and (max-width:1175px) {
    .app-body:not(.layout-multiple-columns) .column-header__collapsible {
        box-shadow: none;
        border-radius: 0;
    }
    .app-body .column-header__select-row {
        border-color: var(--color-lines);
        background-color: var(--color-content-secondary-bg);
        position: absolute;
        inset-inline-start: -45px;
        inset-inline-end: -55px;
        border-width: 0 0 1px;
    }
}
.app-body .column-header__collapsible-inner {
    border: 0;
}
.app-body .column-settings__section {
    color: var(--color-content-fg-bold);
}
.app-body .setting-toggle__label {
    color: var(--color-content-fg);
}
.app-body .column-header > button {
    padding: 0 0 0 15px;
    gap: 15px;
}
.app-body .column-header > button:nth-child(2) {
    padding-left: 0;
}
.app-body .column-header :is(.column-header__back-button, .column-back-button) {
    gap: 5px;
}
.app-body .column-header .column-header__back-button {
    padding-right: 15px;
}
@media screen and (max-width:1174px) {
    .app-body:not(.layout-multiple-columns)
        :is(
            .column-header,
            .column-back-button,
            .column-header__button,
            .column-header__back-button
        ) {
            height: 55px;
            border: 0;
    }
    .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) {
        border-bottom: 1px solid var(--color-lines);
    }
}
@media (min-width:771px) and (max-width:1174px) {
    .app-body:not(.layout-multiple-columns) .tabs-bar__wrapper {
        border-color: transparent;
    }
    .app-body .scrollable,
    .app-body .column > .scrollable,
    .app-body .column-header__collapsible {
        border-right: 0;
    }
    .app-body .column-header,
    .app-body .column-back-button {
        border-left: 1px solid var(--color-lines) !important;
    }
}
@media (max-width:770px) {
    .app-body:not(.layout-multiple-columns) .column-header__wrapper {
        border-right: 0;
        border-left: 0;
    }
    .app-body:not(.layout-multiple-columns) .column-header__collapsible {
        border-right: 0;
        border-left: 0;
    }
}



/* ⏺️ Horizontal selectors
   (used to navigate subsections on the Explore, Live Feeds and Account pages) */
.app-body
    :is(.account__section-headline, .notification__filter-bar) {
    border: 1px solid var(--color-accent-lines);
}
.app-body .account__header + .account__section-headline {
    border-left: 0;
    border-right: 0;
}
@media screen and (max-width:770px) {
    .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) {
        color: var(--color-content-fg);
        border-radius: 9px;
        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 {
        color: var(--color-accent);
}
.app-body
    :is(.account__section-headline, .notification__filter-bar)
    :is(a, button).active {
        color: var(--color-accent);
}
.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):last-child::after {
        display: none;
}

.app-body .notification__filter-bar .icon-reply-all {
    background-image: var(--icon-reply-accent);
}
.app-body .notification__filter-bar .active .icon-reply-all {
    background-image: var(--icon-reply);
}
.app-body .notification__filter-bar .icon-star {
    background-image: var(--icon-star-accent);
}
.app-body .notification__filter-bar .active .icon-star {
    background-image: var(--icon-star);
}
.app-body .notification__filter-bar .icon-retweet {
    background-image: var(--icon-boost-accent);
}
.app-body .notification__filter-bar .active .icon-retweet {
    background-image: var(--icon-boost);
}



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


/* 📍 Navigation panel
   ------------------- */
.app-body .navigation-panel__menu {
    display: flex;
    flex-flow: column;
}
.app-body .column-link--transparent {
    color: var(--color-fg);
}
.app-body .column-link--transparent:has(+ .navigation-panel__list-panel__header__sep) {
    max-width: 80%;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.app-body .navigation-panel__list-panel__header__sep {
    position: relative;
    margin: 0 4px 0 0;
}
.app-body .navigation-panel__list-panel__header__sep::before {
    position: absolute;
    content: " ";
    top: -15px;
    display: block;
    height: 51px;
    width: 20px;
    inset-inline-start: -21px;
    background: linear-gradient(90deg, transparent, var(--color-bg));
}
@media screen and (max-width:760px) {
    .app-body .navigation-panel__list-panel__header__sep::before {
        display: none;
        background: linear-gradient(90deg, transparent, var(--color-content-secondary-bg));
    }
}
.app-body .navigation-panel__list-panel__header .icon-button {
    padding: 8px;
}
.app-body .ui__header__logo .logo--icon {
    display: none;
}
.app-body .ui__header__links .button.button-secondary {
    padding: 8px 15px;
}
.app-body .ui__navigation-bar__item[href="/publish"] {
    /* Keep publish in the mobile bottom bar (not floating FAB). */
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: none;
    bottom: auto;
    right: auto;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}
.app-body .ui__navigation-bar__item {
    border-top: 0;
    padding-top: 18px;
    padding-bottom: 18px;
}
.app-body .ui__navigation-bar__item[href="/publish"] {
    order: 3;
}
.app-body .ui__navigation-bar__item[href="/home"] {
    order: 1;
}
.app-body .ui__navigation-bar__item[href="/explore"] {
    order: 2;
}
.app-body .ui__navigation-bar__item[href="/notifications"] {
    order: 4;
}
.app-body button.ui__navigation-bar__item {
    order: 5;
}
.app-body .button.navigation-panel__compose-button {
    min-height: 46px;
    max-height: 46px;
    margin: 12px 16px 12px;
    inset-inline-end: 0;
    padding: 0 10px;
    display: inline-flex;
    gap: 0;
    justify-content: center;
    text-align: center;
    border-radius: 9999px;
    box-shadow:
        0 1px 1px rgba(0, 0, 0, .2),
        0 2px 10px rgba(0, 0, 0, .2);
}
.app-body .button.navigation-panel__compose-button .icon {
    display: none;
}
.app-body .ui__navigation-bar {
    background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
    backdrop-filter: blur(20px);
    border-color: var(--color-lines);
}
.app-body .ui__navigation-bar .icon {
    transform: scale(1.3);
}

.app-body .navigation-panel .navigation-bar {
    padding: 22px 22px 14px;
}

.app-body .column-link--logo {
    margin-left: 2px;
}

.app-body .column-link.column-link--logo,
.app-body .ui__header__logo {
    display: inline-flex;
    flex-grow: unset;
    padding: 0;
    border: 0;
    width: 50px;
    height: 50px;
    background-image: var(--logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px auto;
}
.app-body .column-link.column-link--logo svg,
.app-body .ui__header__logo svg {
    display: none;
}
.app-body .column-header__title .logo {
    opacity: 0;
    visibility: hidden;
}
.app-body .column-header__title:has(> .logo)::before {
    content: " ";
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    inset-inline-start: 14px;
    inset-block-start: 14px;
    background-image: var(--logo);
    background-repeat: no-repeat;
    background-size: cover;
}
.app-body .navigation-panel__logo {
    margin-bottom: 5px;
    margin-left: 10px;
}
.app-body .navigation-panel__list-panel__header {
    padding-inline-end: 10px;
}
.app-body .column-link:not(.column-link--logo) {
    padding: 15px 5px 16px 24px;
    gap: 7px;
    border: 0;
    font-size: 18px;
    overflow: visible;
    transform-origin: 60px center;
}

.app-body .column-link--transparent:hover {
    border-radius: 8px;
    padding-right: 20px;
}
.app-body .column-link--transparent span {
    position: relative;
}
@media screen and (min-width:1175px) {
    .app-body .column-link--transparent span::before {
        content: " ";
        left: -50px;
        background-color: transparent;
        top: -14px;
        right: -16px;
        position: absolute;
        border-radius: 10px;
        z-index: -1;
        bottom: -14px;
    }
    .app-body .column-link--transparent:is(.active, .active:hover) span::before {
        background-color: transparent;
    }
    .app-body .column-link--transparent:active {
        transform: none;
    }
}
.app-body .icon-with-badge__badge {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
    border-radius: 20px;
    top: -4px;
    font-weight: bold;
    border: 0;
    z-index: 1;
}
.app-body .compose-panel hr,
.app-body .navigation-panel .list-panel hr,
.app-body .navigation-panel hr {
    display: none !important;
}
.app-body .column-link span {
    vertical-align: middle;
}
@media screen and (max-width:770px) {
    .app-body .columns-area__panels__main {
        width: 100%;
    }
}

.app-body .columns-area__panels__pane--overlay {
    background: color-mix(in srgb, var(--color-content-bg), transparent 15%);
}
@media screen and (max-width: 759px) {
    .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
        backdrop-filter: blur(10px);
    }
}
@media screen and (max-width: 1174px) {
    .app-body .columns-area__panels__pane--navigational .navigation-panel {
        border: 0
    }
}

/* Popper wraps the menu in a transformed root; z-index on the inner panel does not escape
   that context, so a fixed nav (z-index: 20) and compositional column (19) can paint above
   the overlay. Only lift above those — z-index: 10000 on every .dropdown-menu was breaking
   overlay / stacking in Qlub (e.g. multiple compose poppers staying visible on top of each
   other). A modest value is enough. */
.app-body div[data-popper-placement]:has(> .dropdown-menu),
.app-body div[data-floating-ui-placement]:has(> .dropdown-menu),
.app-body div[data-popper-placement]:has(.emoji-picker-dropdown__menu),
.app-body div[data-floating-ui-placement]:has(.emoji-picker-dropdown__menu),
.app-body div[data-popper-placement]:has(
        :where(
            .visibility-dropdown__dropdown,
            .privacy-dropdown__dropdown,
            .language-dropdown__dropdown
        )
    ),
.app-body div[data-floating-ui-placement]:has(
        :where(
            .visibility-dropdown__dropdown,
            .privacy-dropdown__dropdown,
            .language-dropdown__dropdown
        )
    ) {
    z-index: 30 !important;
}


/* 👤 Account view
   --------------- */
.app-body .account__header {
    padding-bottom: 5px;
    background-color: var(--color-content-bg);
}
@media screen and (max-width:770px) {
    .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__buttons .button {
    padding: 7px 18px;
}
.app-body .account__header__buttons .button[href="/settings/profile"] {
    background-color: var(--color-accent);
    color: var(--color-accent-fg)
}
.app-body .account__header__buttons .button[href="/settings/profile"]:is(:hover, :active) {
    background-color: var(--color-accent-focus);
}
.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:active {
    transform: scale(.92);
}
.app-body .account__header__bar .avatar .account__avatar {
    border-radius: 50%;
    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 var(--color-lines);
    outline-offset: -1px;
    box-shadow: 2px 3px var(--color-content-secondary-bg);
}
.app-body .account__header__account-note textarea:focus {
    background-color: var(--color-accent-bg);
    outline-color: var(--color-accent);
    padding-left: 10px;
    padding-right: 10px;
}
.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__header__familiar-followers {
    color: var(--color-content-fg-muted);
}
.app-body .account__header__familiar-followers a:any-link {
    color: var(--color-content-fg);
    font-weight: bold;
}
.app-body .avatar-group--compact .account__avatar {
    box-shadow: 0 0 0 2px var(--color-content-bg);
}

.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__buttons .icon-button.copied,
.app-body .account__header__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__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;
}
.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 .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 {
    background-image: var(--icon-direct-messages-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__numbers {
    color: var(--color-content-fg);
}
.app-body .hover-card__numbers {
    gap: 5px;
}
.app-body .hover-card .display-name__html {
    font-weight: 600;
}
.app-body .account-fields {
    font-size: 95%;
}
.app-body .hover-card .account-fields:not(:empty) {
    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;
}

/* Pinned posts carousel */
.app-body .column-subheading {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-fg-muted);
}
.app-body .featured-carousel {
    position: relative;
    padding-bottom: 7px;
}
.app-body .featured-carousel__header {
    margin: 16px 20px 0 0;
    gap: 0;
    padding: 0;
    z-index: 1;
    position: relative;
}
.app-body .featured-carousel__title {
    background-color: var(--color-bg);
    color: var(--color-fg-muted);
    border-radius: 50px;
    margin-left: 75px;
    margin-right: auto;
    padding: 5px 12px;
    gap: 5px;
    flex-grow: 0;
}
.app-body .featured-carousel__header .icon-button:has(.icon-chevron-left, .icon-chevron-right) {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-fg-muted);
    outline: 1px solid color-mix(in srgb, var(--color-fg), transparent 95%);
    outline-offset: -1px;
    padding: 5px 12px;
    border-radius: 50px;
    color: var(--color-accent);
}
.app-body .featured-carousel__header .icon-button:has(.icon-chevron-left, .icon-chevron-right):hover {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
}
.app-body .featured-carousel__header .icon-button:has(.icon-chevron-left) {
    border-radius: 50px 0 0 50px;
}
.app-body .featured-carousel__header .icon-button:has(.icon-chevron-right) {
    border-radius: 0 50px 50px 0;
}
.app-body .featured-carousel__header .icon-button + span:has(+ .icon-button) {
    background-color: var(--color-content-secondary-bg);
    color: var(--color-fg-muted);
    padding: 6px 10px;
    margin: 0 -1px;
    outline: 1px solid color-mix(in srgb, var(--color-fg), transparent 95%);
    outline-offset: -1px;
    width: 55px;
    box-sizing: border-box;
    text-align: center;
}

.app-body .featured-carousel::before {
    position: absolute;
    display: block;
    right: 0;
    top: 50px;
    bottom: 7px;
    width: 20%;
    z-index: 2;
    content: "";
    background-image: linear-gradient(to left, color-mix(in srgb, var(--color-content-bg), transparent 30%), transparent);
}
.app-body .featured-carousel:has(.featured-carousel__slides > .featured-carousel__slide:only-child)::before {
    display: none;
}
.app-body .featured-carousel::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    width: 100%;
    content: "";
    border-top: 1px solid var(--color-lines);
    background-color: var(--color-content-secondary-bg);
}
.app-body .featured-carousel__slide:not([inert]) {
    flex-basis: 75%;
}
.app-body .featured-carousel__slide:only-child {
    flex-basis: 100%;
}
.app-body .featured-carousel__slide[inert] {
    transform: scale(0.9);
    transform-origin: left center;
}

@media screen and (max-width:770px) {
    .app-body .featured-carousel__header {
        margin-right: 17px;
    }
    .app-body .featured-carousel__title {
        margin-left: 17px;
    }
    .app-body .featured-carousel__slide:not([inert]) {
        flex-basis: 100%;
    }
    .app-body .featured-carousel::before {
        display: none;
    }
}
.layout-multiple-columns .featured-carousel__header {
    margin-right: 17px;
}
.layout-multiple-columns .featured-carousel__title {
    margin-left: 17px;
}
.layout-multiple-columns .featured-carousel__slide:not([inert]) {
    flex-basis: 100%;
}
.layout-multiple-columns .featured-carousel::before {
    display: none;
}


/* ✨ 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;
    gap: 13px;
}
.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 45px;
    margin-left: 3px;
    font-weight: 500;
    color: var(--color-fg-muted);
    border-left: 4px solid transparent;
    display: block;
}
.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;
}
.app-body .getting-started__trends:hover h4 a::after {
    opacity: 1;
    margin-left: 5px;
}

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

.app-body .trends__item::before {
    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);
}
.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: 10px;
}
.app-body .hashtag-header__header h1 {
    color: var(--color-content-fg);
}
.app-body .hashtag-header .hashtag-header__header + div {
    color: var(--color-content-fg);
    opacity: .8;
    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;
}

/* Account recommendations (Trending > People 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__link .display-name__account {
    color: var(--color-content-fg);
}
.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%);
    }
    .app-body .explore-suggestions-card:hover .icon-button {
        opacity: 1;
        transform: translateX(0);
    }
}


/* 📰 Trending stories */
.app-body .story {
    background-color: var(--color-content-bg);
}
.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;
}
.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;
}
.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;
}
.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;
}
.app-body:not(.layout-multiple-columns) .navigation-panel .search {
    margin-bottom: 10px;
}

.app-body .search__icon-wrapper {
    top: 50%;
    transform: translateY(-50%);
}
.app-body .search__input:where(:not(.active), .active) {
    border-radius: 8px;
    background-color: var(--color-accent-bg);
    color: var(--color-content-fg);
    border: 1px solid var(--color-accent-lines);
    font-weight: 500;
    outline-offset: 0;
    outline: 0 solid var(--color-accent-bg);
}
.app-body .search.active .search__input {
    border-radius: 8px;
}
.app-body .search__input {
    color: var(--color-content-fg-muted);
}
.app-body .search__input::placeholder,
.app-body .compose-form .spoiler-input__input::placeholder {
    font-weight: 500;
    color: var(--color-content-fg-muted);
}
.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 {
    transform: scale(1.2);
}
.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);
}
.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;
}
.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) .explore__search-header {
        padding: 10px;
        border-left: 1px solid var(--color-lines);
    }
}
@media screen and (max-width:770px) {
    .app-body:not(.layout-multiple-columns) .explore__search-header {
        padding: 10px;
        border-left: 0;
    }
}

@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;
}

/* 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 .status.muted
    :is(
        .status__content,
        .status__content a,
        .status__content p,
        .status__display-name strong
    ),
.app-body .attachment-list__list a {
    color: var(--color-content-fg-muted);
}
.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: 8px;
    border: 0;
    top: 5px;
    height: auto;
    bottom: 5px;
    border-radius: 8px;
    left: 5px;
    z-index: 2;
}
.app-body .notification__message {
    padding: 12px 12px 5px;
    background-color: var(--color-post-bg);
    color: var(--color-content-fg-bold);
}
.app-body .notification__display-name {
    font-weight: bold;
    color: var(--color-content-fg);
}
.app-body .notification__report {
    background-color: var(--color-content-bg);
    border-bottom: 0;
    padding-top: 10px;
    gap: 15px;
}
.app-body .notification__report__details {
    color: var(--color-content-fg);
}
.app-body .notification__message .icon {
    color: var(--color-accent);
    width: 18px;
    margin-left: 38px;
    text-align: right;
    background-position: center right;
}
@media screen and (max-width:770px) {
    .app-body .notification__message .icon {
        margin-left: 34px;
    }
}
.app-body .notification .status__wrapper {
    padding-top: 0;
}
.app-body
    :is(
        .notification-favourite,
        .notification-reblog,
        .notification-poll,
        .notification-status
    )
    .status__action-bar {
        display: none;
}
.app-body .account,
.app-body .notification-request {
    background-color: var(--color-content-bg);
    border-bottom: 2px solid var(--color-content-secondary-bg);
    padding-left: 22px;
    padding-top: 12px;
}
.app-body .notification .account {
    border-bottom: 0;
}
.app-body .explore__search-results .account {
    padding-top: 16px;
}
.app-body .account__relationship .icon-button {
    background-color: var(--color-content-secondary-bg);
    border: 0;
}
.app-body
.notification
.account:has(.account__wrapper > .account__relationship > button:nth-child(2))
.display-name__account {
    display: block;
}
.app-body
.notification
.account:has(.account__wrapper > .account__relationship > button:nth-child(2))
.display-name {
    margin-bottom: 0;
}

@media screen and (min-width:890px) {
    .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) {
        padding-left: 32px;
        padding-right: 22px;
    }
}
@media screen and (max-width:770px) {
    .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) {
        padding-left: 27px;
    }
}
@media screen and (max-width:1175px) {
    .app-body .account {
        padding-left: 18px;
    }
}
.app-body .notification .account__relationship .icon-button {
    padding: 5px;
    border-radius: 8px;
}
.app-body .notification .account__relationship .icon-button:first-child {
    background-color: var(--color-confirm-bg);
}
.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) {
    background-color: var(--color-confirm);
}
.app-body .notification .account__relationship .icon-button:last-child {
    background-color: var(--color-reject-bg);
}
.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) {
    background-color: var(--color-reject);
}

@media screen and (max-width:1175px) {
    .app-body .notification-list {
        bottom: calc(5rem + var(--safe-area-bottom));
    }
}
.app-body .notification-bar {
    background-color: color-mix(in srgb, var(--color-content-bg), transparent 25%);
    color: var(--color-content-fg);
    border: 1px solid var(--color-lines-translucent);
    align-items: center;
    box-shadow: var(--dropdown-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.app-body .notification-bar__action {
    color: var(--color-accent);
}
.app-body .notification-bar__action:is(:active, :focus, :hover) {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
}

.app-body .column-settings h3,
.app-body .app-form__toggle,
.app-body .app-form__toggle__label .hint {
    color: var(--color-content-fg-bold);
}
.app-body .column-header__setting-btn {
    font-weight: 600;
}
.app-body .column-settings h3 {
    margin-bottom: 12px;
    font-weight: 500;
}
.app-body .column-settings section {
    border-color: var(--color-lines);
}
.app-body .column-settings section:not(:first-child) {
    padding-bottom: 25px;
}
.app-body .app-form__toggle__label .hint {
    opacity: .5;
}

.app-body .filtered-notifications-banner {
    background-color: var(--color-content-bg);
    color: var(--color-accent);
    border: 0;
    position: relative;
    padding: 25px;
}
.app-body .filtered-notifications-banner::before {
    position: absolute;
    display: block;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    content: " ";
    background-color: var(--color-content-secondary-bg);
    border-radius: 8px;
}
.app-body .filtered-notifications-banner:is(:active, :hover, :focus)::before {
    background-color: color-mix(in srgb, var(--color-accent), transparent 88%);
}
.app-body .filtered-notifications-banner:hover::before {
    left: 6px;
    right: 6px;
    top: 8px;
    bottom: 8px;
}
.app-body .filtered-notifications-banner:active::before {
    transform: scale(.98);
}
.app-body .filtered-notifications-banner > * {
    z-index: 1;
}
.app-body .filtered-notifications-banner .filtered-notifications-banner__badge,
.app-body .filtered-notifications-banner:is(:active, :focus, :hover) .filtered-notifications-banner__badge,
.app-body .notification-request__name .filtered-notifications-banner__badge,
.app-body .notification-request .account__avatar__counter {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
    border-radius: 50px;
}
.app-body .notification-request .account__avatar__counter {
    width: 19px;
    height: 19px;
    box-sizing: border-box;
}
.app-body .filtered-notifications-banner__badge__badge {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
    font-weight: 600;
}
.app-body .filtered-notifications-banner__text {
    color: var(--color-content-fg);
}
.app-body .filtered-notifications-banner__text strong {
    font-weight: 600;
}
.app-body .filtered-notifications-banner .notification-group__icon {
    justify-content: center;
}
.app-body .notification-request__name__display-name,
.app-body .notification-request__name {
    color: var(--color-content-fg);
    letter-spacing: unset;
}
.app-body .notification-request {
    padding-top: 15px;
}
@media screen and (max-width:1175px) {
    .app-body .notification-request {
        margin-top: 60px;
    }
}
.app-body .notification-group {
    padding: 16px 23px;
}
.app-body .notification-group,
.app-body .notification-ungrouped {
    border: none;
    position: relative;
}
@media screen and (max-width: 770px) {
    .app-body .notification-group {
        padding: 16px 12px;
    }
}

.app-body :is(.notification-group, .notification-ungrouped)::after,
.app-body .filtered-notifications-banner::after {
    position: absolute;
    display: block;
    background-color: var(--color-lines);
    height: 1px;
    width: 100%;
    right: 0;
    bottom: 0;
    content: " ";
    opacity: .7;
}
.app-body .notification-ungrouped {
    padding: 0;
}
.app-body .notification-ungrouped .status__wrapper > .status:not(.status--is-quote) > .status__info :is(.status__avatar, .account__avatar) {
    height: 46px !important;
    width: 46px !important;
}
.app-body .notification-ungrouped
    :is(
        .attachment-list,
        .audio-player,
        .hashtag-bar,
        .media-gallery,
        .more-from-author,
        .picture-in-picture-placeholder,
        .status-card,
        .status__action-bar,
        .status__content,
        .video-player
    ) {
        margin-left: 0;
        width: 100%;
}
.app-body .notification-ungrouped__header {
    margin-bottom: -6px;
    padding-top: 16px;
    z-index: 1;
    position: relative;
    font-weight: 500;
    color: var(--color-accent);
    background-color: var(--color-post-bg);
}
@media screen and (max-width: 770px) {
    .app-body .notification-ungrouped__header {
        padding-inline-start: 12px;
    }
}
.app-body .notification-ungrouped--direct .notification-ungrouped__header {
    background-color: var(--color-post-bg);
}
.app-body .notification-ungrouped > * > .status__wrapper {
    padding-inline-start: 23px;
    padding-inline-end: 23px;
}
@media screen and (max-width: 770px) {
    .app-body .notification-ungrouped > * > .status__wrapper {
        padding-inline-start: 12px;
        padding-inline-end: 12px;
    }
}

.app-body .notification-ungrouped--mention:not(.notification-ungrouped--direct) .notification-ungrouped__header {
    display: none;
}
.app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) {
    width: 46px;
    height: 40px;
    justify-content: end;
}
.app-body :is(.notification-group__icon, .notification-ungrouped__header__icon) svg {
    width: 25px;
    height: 25px;
}
.app-body .notification-ungrouped .status::before {
    display: none;
}
.app-body .notification-group__main {
    overflow: unset;
}
.app-body .notification-group__main__status {
    border: 1px solid var(--color-content-secondary-bg);
    background-color: var(--color-content-secondary-bg);
    padding: 10px 12px 12px;
}
.app-body .notification-group__main__status:hover {
    border-color: var(--color-accent);
}
.app-body .notification-group__main__status:active {
    transform: scale(.98);
}
.app-body
    :is(
        .notification-group__main__header__label,
        .notification-group__embedded-status__account,
        .notification-ungrouped__header
    )
    :is(
        bdi,
        bdi > strong
    ) {
        color: var(--color-content-fg);
        font-weight: 700;
}
.app-body .notification-group__main__header__label {
    color: var(--color-content-fg);
    justify-content: space-between;
}
.app-body .notification-group__main__header__label time {
    color: var(--color-content-fg-muted);
}
.app-body .notification-group__embedded-status__account {
    color: var(--color-content-fg);
}
.app-body .notification-group__main__additional-content {
    color: var(--color-fg-muted);
}
.app-body .notification-group__embedded-status .account__avatar {
    opacity: 1;
}

.app-body .notification-group__main__header__label-separator {
    display: none;
}
.app-body .notification-group .avatar-group {
    gap: 2px;
    --avatar-height: 40px !important;
}
.app-body .notification-group .avatar-group .account__avatar {
    margin-inline-end: -4px;
    width: 40px !important;
    height: 40px !important;
    outline: 2px solid var(--color-content-bg);
}

/* 📋 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:770px) {
    .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 .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:770px) {
    .app-body .item-list .column-subheading {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}
.app-body .lists__item {
    border-bottom: 2px solid var(--color-content-secondary-bg);
}
.app-body .lists__item__title,
.app-body .app-form__link__text strong {
    color: var(--color-content-fg);
}
.app-body .lists__item__title:hover {
    color: var(--color-accent);
    background-color: var(--color-content-secondary-bg);
}
.app-body .lists__item__title .icon {
    display: none;
}
.app-body .simple_form .input.with_label .label_input>label {
    color: var(--color-content-fg);
}
.app-body .column-search-header {
    padding: 15px;
}
.app-body .simple_form select,
.app-body .column-search-header input {
    border-radius: 8px;
    background-color: var(--color-content-secondary-bg);
    color: var(--color-content-fg);
}
.app-body .column-search-header input {
    background-color: var(--color-content-bg);
}
.app-body .column-search-header input:focus {
    border-color: var(--color-accent);
}
.app-body .app-form__link__text {
    color: var(--color-fg-muted);
}
.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:770px) {
    .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;
    border: 0;
}
.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: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:1175px) {
    .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__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;
}
.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 {
    padding: 6px 17px;
}
.app-body .button,
.app-body .account__header__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);
}
.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__buttons .icon-button.active,
.app-body .text-btn,

.app-body .notification-bar-action {
    color: var(--color-accent);
}
.app-body .icon-button,
.app-body .detailed-status__action-bar-dropdown .icon-button,
.app-body .icon-button.inverted {
    color: var(--color-content-fg);
}
.app-body .account__header__buttons .icon-button {
    padding: 10px;
    border: 0;
    color: var(--color-content-fg);
    background-color: var(--color-content-secondary-bg);
}
.app-body .account__header__buttons .icon-button:hover {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
}

.app-body .icon-button {
    padding: 5px;
    border-radius: 8px;
}
.app-body .icon-button:is(:active, :focus, :hover) {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
}

.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: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);
}
.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;
    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;
    /* Stacking is carried by the Popper / Floating UI root (rule above), not 10000 here:
     * that matched the old root value and over-stacked every menu site-wide. */
    z-index: 1;
}
.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):not(:disabled):not([aria-disabled=true]) {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
    outline: 0;
}
.app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover):not(:disabled):not([aria-disabled=true]) :is(.icon, .icon-Boost-icon, .icon-Unboost-icon, .icon-Quote-icon) {
    filter: brightness(0) invert(1);
}
.app-body .dropdown-menu__item :is(a, button):is([aria-disabled=true], :disabled) {
    filter: brightness(.95) grayscale(1);
    opacity: .6;
    &:is(:focus) {
        background-color: transparent;
        color: var(--color-content-fg);
    }
}
.app-body .dropdown-menu__separator {
    border-color: var(--color-content-secondary-separator);
}

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

.app-body .visibility-dropdown > button {
    background-color: var(--color-content-secondary-bg);
    border: 1px solid var(--color-lines);
    border-radius: 8px;
    color: var(--color-content-fg);
}
.app-body .visibility-dropdown > button:is(:hover) {
    border-color: var(--color-accent);
    cursor: pointer;
}
.app-body .visibility-dropdown > button:is(:focus, :active, .active) {
    border-color: var(--color-accent);
}

.app-body .visibility-dropdown__label {
    font-weight: 800;
}

.app-body .visibility-modal__quote-warning {
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-lines);
    border-radius: 6px;
    & :is(p, h3) {
        color: var(--color-content-fg);
    }
}

.app-body :is(.privacy-dropdown__dropdown, .visibility-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 :is(.privacy-dropdown, .visibility-dropdown) :is(.privacy-dropdown__value, .visibility-dropdown__value),
.app-body :is(.privacy-dropdown__option, .visibility-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) {
    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 :is(.privacy-dropdown__option, .visibility-dropdown__option) :is(.privacy-dropdown__option__content, .visibility-dropdown__option__content),
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option) :is(.privacy-dropdown__option__content, .visibility-dropdown__option__content) strong {
    background-color: var(--color-content-bg);
    color: var(--color-content-fg);
}
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option):hover,
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option):hover :is(.privacy-dropdown__option__content, .visibility-dropdown__option__content),
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option):hover :is(.privacy-dropdown__option__content, .visibility-dropdown__option__content) strong {
    background-color: var(--color-accent-bg);
    color: var(--color-content-fg);
}
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option):is(.active, .active:hover),
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option).active :is(.privacy-dropdown__option__content, .visibility-dropdown__option__content),
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option).active :is(.privacy-dropdown__option__content, .visibility-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 :is(.privacy-dropdown__option, .visibility-dropdown__option):is(.active, .active:hover) .icon-at {
    background-image: var(--icon-at-inv);
}
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option) .icon-info-circle path,
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option):hover .icon-info-circle path {
    fill: var(--color-content-fg);
}
.app-body :is(.privacy-dropdown__option, .visibility-dropdown__option):is(.active, .active:hover) .icon-info-circle path {
    fill: var(--color-accent-fg);
}

.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 .safety-action-modal__top, .safety-action-modal__bottom {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.app-body .modal-root__modal:not(.media-modal) {
    border: 0;
    outline: 1px solid var(--color-lines-translucent);
}
.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 .dialog-modal {
    border-radius: 8px;
}
@media screen and (max-width: 630px) {
    .app-body .dialog-modal {
        border-radius: 8px 8px 0 0;
    }
}
.app-body .dialog-modal__header {
    border-color: var(--color-lines);
}
.app-body .dialog-modal__content__description,
.app-body .visibility-dropdown__helper {
    color: var(--color-fg-muted);
}
.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);
    transform: scale(1.1);
}
.app-body .safety-action-modal__header__icon .icon {
    filter: brightness(1000%) saturate(0) contrast(1000%);
}
.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__status {
    border-color: var(--color-lines);
}
.app-body .safety-action-modal__header h1 + div {
    color: var(--color-fg-muted);
}
.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:nth-child(3) .safety-action-modal__bullet-points__icon .icon {
    background-image: var(--icon-direct-messages);
}
.app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon {
    background-image: var(--icon-reply);
    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 .actions-modal :is(a, button) {
    color: var(--color-content-fg);
}
.app-body .actions-modal a:is(:hover, :active, :focus),
.app-body .actions-modal button:is(:hover, button:active, button:focus) {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.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);
}
.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);
}

.app-body .hotkey-combination kbd {
    background-color: var(--color-content-secondary-bg);
}


/* Media modals */
.app-body .modal-root__overlay:has(+ div > .media-modal) {
    background-color: #030303 !important;
    opacity: 1;
}
.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;

}
.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--prev {
    left: 8px;
}
.app-body .media-modal__nav--next {
    right: 8px;
}
@media screen and (max-width:770px) {
    .app-body .media-modal__nav {
        display: none;
    }
}

.app-body .media-modal__overlay {
    max-width: none;
}
.app-body .media-modal__overlay .picture-in-picture__footer {
    background: transparent;
    justify-content: center;
}
.app-body .media-modal__overlay .picture-in-picture__footer > *:not(:last-child) {
    display: none;
}
.app-body .media-modal__overlay .picture-in-picture__footer > button:last-child {
    position: absolute;
    bottom: 8px;
    inset-inline-end: 8px;
    background-color: #1e1e1e;
    color: #777777;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.app-body .media-modal__overlay .picture-in-picture__footer > button:last-child:is(:active, :focus, :hover) {
    background-color: #343434;
}
.app-body .media-modal__overlay .picture-in-picture__footer > button:last-child a {
    filter: grayscale(1);
}
.app-body .media-modal__overlay .picture-in-picture__footer .icon-button > svg {
    width: 25px;
    height: 25px;
}
.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);
}

/* 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;
}
.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;
}

.app-body .help-button {
    background-color: var(--color-accent);
    &:is(:active, :focus, :hover) {
        background-color: var(--color-accent-focus);
    }
}



/* 🖼️ 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;
    border: none;
}
.app-body .picture-in-picture__footer {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: none;
}
.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);
}

/* 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 {
    line-height: 1.375;
    padding: 10px 18px;
}
.app-body .hover-card .button:not(.button--destructive) {
    background-color: var(--color-accent);
    color: var(--color-accent-fg);
}
.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:active,
.app-body .button:is(.button-secondary, .button-tertiary):active {
    transform: scale(.95);
}
@media screen and (max-width:1175px) {
    .app-body .button.button-tertiary {
        padding: 7px 18px;
    }
}
.app-body .sign-in-banner {
    padding: 10px;
}
.app-body .navigation-panel__sign-in-banner hr {
    display: none !important;
}
.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 {
    display: none;
}
.app-body .sign-in-banner p:first-child {
    margin-bottom: 5px;
}
.app-body .sign-in-banner .button {
    padding: 10px 18px;
}
@media screen and (max-width:1175px) {
    .app-body .sign-in-banner {
        padding: 0;
        margin: 15px;
    }
}



/* 🤗 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;
}
.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);
}
.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 {
    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:1175px) {
    .app-body .announcements {
        border-left: 0;
        border-right: 0;
    }
    .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:770px) {
    .app-body .scrollable.about {
        border-left: 0;
        border-right: 0;
    }
}
@media screen and (max-width:1175px) {
    .app-body .scrollable.about {
        border-top: 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 .scrollable.about .about__meta + .about__section > .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:1175px) {
    .app-body .scrollable.about {
        border-radius: 8px 8px 0 0 !important;
    }
    .app-body .about__header__hero {
        border-radius: 6px 6px 0 0;
    }
}
.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;
}
.app-body .rules-languages > label {
    color: var(--color-content-fg);
}
.app-body .rules-languages > select {
    background-color: var(--color-accent-bg);
    border: 1px solid var(--color-accent-lines);
    border-radius: 8px;
    color: var(--color-content-fg);
}
.app-body .rules-languages > select:is(:hover) {
    border-color: var(--color-accent);
    cursor: pointer;
}
.app-body .rules-languages > select:is(:focus, :active) {
    border-color: var(--color-accent);
}
.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);
}

/* 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;
    }
}



/* 👋 Hide superfluous UI */
.app-body div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr,
.app-body .navigation-panel__legal > hr,
.app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */
.app-body .search-banner ~ .search, /* Hide search field for logged out users */
.app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ {
    display: none;
}



/* Multi-column layout
   ------------------- */

.layout-multiple-columns .scrollable,
.layout-multiple-columns .column > .scrollable {
    max-height: 100%;
}
.layout-multiple-columns .column {
    width: 400px;
    padding-bottom: 0;
}
.layout-multiple-columns .drawer__inner__mastodon {
    display: none;
}
.layout-multiple-columns :is(.drawer__inner, .drawer__inner.darker) {
    background: transparent;
}
.layout-multiple-columns .drawer__header {
    display: none;
    background-color: var(--color-content-bg);
    border: 1px solid var(--color-lines);
    border-radius: 8px;
    margin-bottom: 0;
}
.layout-multiple-columns .drawer__tab {
    border-radius: 6px;
    height: 40px;
    padding: 5px;
    margin: 5px;
    box-sizing: border-box;
    border: 0;
}
.layout-multiple-columns .drawer__tab .icon {
    transform: scale(1.2);
}
.layout-multiple-columns .drawer__tab:active {
    transform: scale(.9);
}
.layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) {
    background-color: var(--color-accent-bg);
}
.layout-multiple-columns .drawer__tab .icon-bars {
    background-image: var(--logo);
}
.layout-multiple-columns .navigation-panel hr {
    display: block !important;
}

.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;
}

.layout-multiple-columns :is(.column-header, .column-back-button) {
    background-color: var(--color-content-bg);
}

.layout-multiple-columns .column-header__setting-btn {
    font-weight: 600;
}

.layout-multiple-columns .column:has(> .getting-started) {
    width: 330px;
}
.layout-multiple-columns
    .column:has(> .getting-started)
    :is(.column-header, .column-back-button),
.layout-single-column .navigation-bar:has(+ .getting-started) {
    display: none;
}

.layout-multiple-columns .getting-started__trends {
    margin-bottom: 10px;
}

.layout-multiple-columns .search-results__header,
.layout-multiple-columns .explore__search-header {
    display: none;
}

.layout-multiple-columns .drawer {
    width: 280px;
}
.layout-multiple-columns
    .drawer:has(> .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
        width: 400px;
}
.layout-multiple-columns .drawer__inner:has(> .search-results > .search-results__section) {
    z-index: 2;
    background-color: var(--color-content-bg);
    border-left: 1px solid var(--color-lines);
    border-right: 1px solid var(--color-lines);
}

.layout-multiple-columns
    .drawer
    > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section) {
        margin-bottom: 0;
}
.layout-multiple-columns
    .drawer
    > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
    > .search__input {
        border-radius: 8px 8px 0 0;
}

.layout-multiple-columns .drawer__pager {
    border-radius: 0;
    border: 0;
}
.layout-multiple-columns
    .drawer
    > .search:has(+ .drawer__pager > .drawer__inner > .search-results > .search-results__section)
    > .search__popout {
        border-radius: 0 0 8px 8px;
        margin-top: 0;
}

.layout-multiple-columns .drawer__inner:has(.search-results .empty-column-indicator) {
    z-index: 3;
}
.layout-multiple-columns .search-results .empty-column-indicator {
    border: 1px solid var(--color-lines);
    border-radius: 8px;
}

.layout-multiple-columns .compose-form {
    padding: 0;
}



.layout-multiple-columns .list-editor__accounts + .drawer__inner.backdrop {
    background-color: var(--color-content-bg);
}

@media screen and (min-width:630px) and (max-width:1175px) {
    .layout-multiple-columns
        :is(
            .column-header,
            .column-back-button
        ) {
            border-top: 1px solid var(--color-lines);
            border-right: 1px solid var(--color-lines);
            border-left: 1px solid var(--color-lines);
            border-top-left-radius: 8px !important;
            border-top-right-radius: 8px !important;
    }
}

.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);
}

/* Keep mobile navigation panel elements visible on desktop widths */
@media screen and (min-width:1175px) {
    .app-body .navigation-panel__legal {
        display: block !important;
    }
    .app-body .button.navigation-panel__compose-button {
        display: inline-flex !important;
    }
    .app-body .navigation-panel .navigation-bar {
        display: block !important;
    }
}

/* Pin nav to the viewport left edge; keep the main column centered in the window */
@media screen and (min-width:1175px) {
    .app-body:not(.layout-multiple-columns) .columns-area__panels__pane--navigational {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 285px;
        z-index: 20;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        /*background-color: var(--color-content-bg);
        border-right: 1px solid var(--color-lines);*/
    }
    .app-body:not(.layout-multiple-columns)
        .columns-area__panels__pane--navigational
        .columns-area__panels__pane__inner {
        min-height: 100%;
    }
    .app-body:not(.layout-multiple-columns) .columns-area__panels__main {
        flex: 0 0 580px;
        max-width: 580px;
        width: 580px;
        margin-left: max(285px, calc(50vw - 290px));
        margin-right: auto;
    }
    .app-body:not(.layout-multiple-columns) .columns-area__panels__pane--compositional {
        --compose-panel-width: 285px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: calc(max(285px, 50vw - 290px) + 580px + 10px);
        width: var(--compose-panel-width);
        z-index: 19;
        overflow-y: auto;
        overflow-x: visible;
        box-sizing: border-box;
        padding-top: 0;
    }
    .app-body:not(.layout-multiple-columns)
        .columns-area__panels__pane--compositional
        :is(.search, .drawer__inner__mastodon, .getting-started__footer, .navigation-panel__legal, .link-footer) {
        display: none !important;
    }
}

/* Explore page: show search header (override Mastodon bundle that hides
   .layout-single-column .explore__search-header, e.g. in light color scheme) */
.app-body.layout-single-column .explore__search-header {
    display: flex !important;
}

/* Search only on Explore — hide search field in the sidebar nav (all widths) */
.app-body .navigation-panel .search {
    display: none !important;
}

/* Hide nav entry for live/local timeline (e.g. …/public/local) */
.app-body .navigation-panel .column-link[href*="/public/local"],
.app-body .navigation-panel a[href*="/public/local"]:is(.column-link, .column-link--transparent),
.app-body .ui__navigation-bar__item[href*="/public/local"] {
    display: none !important;
}

/* Hide Favorites nav entry */
.app-body .navigation-panel .column-link[href*="/favourites"],
.app-body .navigation-panel .column-link[href*="/favorites"],
.app-body .navigation-panel a[href*="/favourites"]:is(.column-link, .column-link--transparent),
.app-body .navigation-panel a[href*="/favorites"]:is(.column-link, .column-link--transparent) {
    display: none !important;
}

/* Single-column: profile block at bottom of sidebar (after menu / À propos) */
.app-body:not(.layout-multiple-columns)
    .columns-area__panels__pane--navigational
    .columns-area__panels__pane__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.app-body:not(.layout-multiple-columns) .navigation-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.app-body:not(.layout-multiple-columns) .navigation-panel__menu {
    display: flex;
    flex-direction: column;
}
.app-body:not(.layout-multiple-columns) .navigation-panel > .navigation-bar {
    order: 100;
    margin-top: auto;
}
.app-body:not(.layout-multiple-columns) .navigation-panel__menu .navigation-bar {
    order: 100;
    margin-top: auto;
}
.app-body:not(.layout-multiple-columns) .navigation-panel > .navigation-panel__compose-button {
    order: 101;
    margin-top: 8px;
}
.app-body:not(.layout-multiple-columns) .navigation-panel__menu > .navigation-panel__compose-button,
.app-body:not(.layout-multiple-columns) .navigation-panel__menu > .button.navigation-panel__compose-button {
    order: 101;
    margin-top: 8px;
}