/* Color mode is independent from the seasonal background. */
#header .header-leading-actions {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    transform: translateY(-50%);
}

#header .meta,
#header.has-install-action .meta,
#header.has-social-action .meta,
#header.has-install-action.has-social-action .meta {
    max-width: calc(100% - 112px);
}

#header.has-social-action .meta,
#header.has-install-action.has-social-action .meta {
    max-width: calc(100% - 160px);
}

#header .meta .fw-bold {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-theme-btn::before,
.header-theme-btn::after { display: none; }
.header-theme-btn:disabled { cursor: default; }
.header-theme-btn i { transition: transform .36s cubic-bezier(.22, .8, .2, 1); }
.header-theme-btn:active i { transform: rotate(24deg) scale(.9); }

.color-mode-bg-snapshot {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transform: translateZ(0);
    transition: opacity .74s cubic-bezier(.45, 0, .55, 1);
}
.color-mode-bg-snapshot.is-fading { opacity: 0; }
.color-mode-bg-snapshot__detail {
    position: absolute;
    inset: 0;
}
:root.is-color-mode-transitioning body {
    transition-property: background-color;
    transition-duration: .74s;
    transition-timing-function: cubic-bezier(.45, 0, .55, 1);
}

.color-mode-particles {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}
.color-mode-spark {
    position: absolute;
    color: #a6e4c3;
    line-height: 1;
    text-shadow: 0 0 10px rgba(101, 217, 166, .5);
    animation: color-mode-sparkle 2.4s cubic-bezier(.18, .56, .22, 1) both;
}
.color-mode-spark.is-snow { color: #e2f4ff; text-shadow: 0 0 10px rgba(161, 211, 245, .6); }
.color-mode-spark.is-day { color: #f2c871; text-shadow: 0 0 10px rgba(229, 172, 75, .55); }
@keyframes color-mode-sparkle {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-25deg); }
    14% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(12deg); }
    52% { opacity: .82; transform: translate(calc(-50% + var(--particle-mid-x)), calc(-50% + var(--particle-mid-y))) scale(.86) rotate(32deg); }
    to { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(.36) rotate(68deg); }
}
.color-mode-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e9d28e;
    box-shadow: 0 0 7px rgba(255, 227, 157, .7);
    animation: color-mode-drift .8s ease-out both;
}
.color-mode-particle.is-snow {
    width: 7px;
    height: 7px;
    background: #f7fcff;
    box-shadow: 0 0 5px rgba(210, 232, 251, .7);
}
.color-mode-particle.is-day { background: #f4cb76; }
@keyframes color-mode-drift {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
    25% { opacity: .95; }
    to { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(.65); }
}

:root[data-color-mode="night"] {
    --night-text: #e8f0ef;
    --night-muted: #a8bbbf;
    --night-line: rgba(203, 226, 228, .14);
    --night-surface: #1b2a30;
    --night-surface-raised: #24363c;
    --sidebar-glass-rgb: 39, 63, 61;
}

:root[data-color-mode="night"][data-feed-background="winter"] {
    --night-text: #edf3fa;
    --night-muted: #b2c1d2;
    --night-line: rgba(210, 227, 246, .16);
    --night-surface: #202e42;
    --night-surface-raised: #2a3a50;
    --sidebar-glass-rgb: 43, 60, 82;
}

:root[data-color-mode="night"] body,
:root[data-color-mode="night"] #main-app,
:root[data-color-mode="night"] .wrapper { color: var(--night-text); }

:root[data-color-mode="night"] #pwa-bg-layer::before { display: none; }
:root[data-color-mode="night"][data-feed-background="custom"] #pwa-bg-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(7, 18, 24, .58);
}

:root[data-color-mode="night"] .header-install-btn,
:root[data-color-mode="night"] #header .meta,
:root[data-color-mode="night"] .header-social-link {
    color: var(--night-text);
    background: rgba(25, 40, 48, .82);
    border-color: rgba(207, 231, 233, .19);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 9px 25px rgba(0,0,0,.16);
}
:root[data-color-mode="night"] .header-install-btn:hover,
:root[data-color-mode="night"] .header-install-btn:focus-visible { color: #fff; background: rgba(48, 69, 79, .96); }
:root[data-color-mode="night"] #header .meta .fw-bold { color: var(--night-text); }
:root[data-color-mode="night"] #header .meta .caption { color: var(--night-muted); }

:root[data-color-mode="night"] .post-card {
    background: rgba(var(--app-card-rgb), .96);
    border-color: var(--night-line);
    box-shadow: 0 16px 35px rgba(3, 10, 17, .24);
}
:root[data-color-mode="night"] .post-card.is-context-active { border-color: rgba(218, 235, 239, .34); }
:root[data-color-mode="night"] .app-boot-card,
:root[data-color-mode="night"] .post-quick-sheet,
:root[data-color-mode="night"] .picker-reaction { color: var(--night-text); background: var(--night-surface); border-color: var(--night-line); }
:root[data-color-mode="night"] .picker-emoji:hover { background: var(--night-surface-raised); }
:root[data-color-mode="night"] .post-quick-actions__emojis,
:root[data-color-mode="night"] .post-quick-sheet {
    background: rgba(var(--sidebar-glass-rgb), .88);
    border-color: rgba(218, 237, 239, .22);
    box-shadow: 0 20px 48px rgba(0, 7, 12, .35), inset 0 1px 0 rgba(255, 255, 255, .09);
    backdrop-filter: blur(20px) saturate(1.06);
    -webkit-backdrop-filter: blur(20px) saturate(1.06);
}
:root[data-color-mode="night"] .post-quick-emoji {
    color: var(--night-text);
    -webkit-tap-highlight-color: transparent;
}
:root[data-color-mode="night"] .post-quick-emoji:hover,
:root[data-color-mode="night"] .post-quick-emoji:focus-visible,
:root[data-color-mode="night"] .post-quick-emoji.active {
    background: rgba(var(--app-accent-rgb), .22);
}
:root[data-color-mode="night"] .post-quick-row {
    color: var(--night-text);
    -webkit-tap-highlight-color: transparent;
}
:root[data-color-mode="night"] .post-quick-row i { color: rgb(var(--app-accent-rgb)); }
:root[data-color-mode="night"] .post-quick-row:hover,
:root[data-color-mode="night"] .post-quick-row:focus-visible,
:root[data-color-mode="night"] .post-quick-row:active {
    color: var(--night-text);
    background: rgba(230, 246, 244, .1);
}
:root[data-color-mode="night"] .post-quick-row.is-copied,
:root[data-color-mode="night"] .post-quick-row.is-copied i {
    color: rgb(var(--app-accent-rgb));
}
:root[data-color-mode="night"] .post-card .post-body,
:root[data-color-mode="night"] .post-card .post-body :is(p, div, span, strong, h1, h2, h3, h4),
:root[data-color-mode="night"] .post-card .post-footer { color: var(--night-text); }
:root[data-color-mode="night"] .post-card .post-footer .date,
:root[data-color-mode="night"] .post-card .post-body .text-muted { color: var(--night-muted) !important; }
:root[data-color-mode="night"] .post-card .post-body a { color: rgb(var(--app-accent-rgb)) !important; }
:root[data-color-mode="night"] .post-card .post-body .badge-reaction {
    color: var(--night-text);
    background: rgba(197, 220, 226, .1);
    border-color: var(--night-line);
}
:root[data-color-mode="night"] .post-card .post-body .badge-reaction.active {
    background: rgba(var(--app-accent-rgb), .28);
    border-color: rgba(var(--app-accent-rgb), .6);
}
:root[data-color-mode="night"] .post-card .post-body .badge-reaction[data-emoji-id="trophy"] {
    color: #f9df91;
    background: rgba(238, 200, 97, .2);
    box-shadow: none;
}
:root[data-color-mode="night"] .post-card .post-body .badge-reaction[data-emoji-id="trophy"].active {
    color: #ffe7a1;
    background: rgba(245, 199, 82, .32);
}
:root[data-color-mode="night"] .post-card .post-body .badge-reaction[data-emoji-id="trophy"] span:last-child {
    color: inherit;
}
:root[data-color-mode="night"] .reaction-feedback-burst {
    color: var(--night-text);
    background: rgba(31, 48, 56, .88);
    border-color: rgba(var(--app-accent-rgb), .48);
    box-shadow: 0 10px 28px rgba(2, 10, 18, .36), inset 0 1px 0 rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

:root[data-color-mode="night"] #footer .lang-switcher,
:root[data-color-mode="night"] #footer .btn-notify,
:root[data-color-mode="night"] #footer .footer-inner > .btn-footer {
    color: var(--night-text);
    background: rgba(25, 40, 48, .9);
    border-color: var(--night-line);
}
:root[data-color-mode="night"] #footer .btn-notify,
:root[data-color-mode="night"] #footer .btn-notify:hover {
    color: var(--night-text) !important;
    background: rgba(31, 48, 56, .94) !important;
    border: 1px solid rgba(var(--app-accent-rgb), .34) !important;
    box-shadow: 0 9px 26px rgba(2, 10, 18, .3), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
:root[data-color-mode="night"] #footer .lang-switcher,
:root[data-color-mode="night"] #footer .footer-inner > .btn-footer {
    background: rgba(29, 47, 54, .82) !important;
    border-color: rgba(220, 239, 242, .18) !important;
}
:root[data-color-mode="night"] #footer .lang-switcher .btn-footer,
:root[data-color-mode="night"] #footer .lang-switcher .btn-footer:hover,
:root[data-color-mode="night"] #footer .lang-switcher .btn-footer:focus,
:root[data-color-mode="night"] #footer .lang-switcher .btn-footer:active {
    color: var(--night-text);
    background: transparent !important;
    -webkit-tap-highlight-color: transparent;
}
:root[data-color-mode="night"] #footer .lang-switcher:active,
:root[data-color-mode="night"] #footer .footer-inner > .btn-footer:active,
:root[data-color-mode="night"] #footer .btn-notify:active,
:root[data-color-mode="night"] #header .meta:active,
:root[data-color-mode="night"] .header-install-btn:active {
    color: var(--night-text) !important;
    background: rgba(49, 75, 79, .86) !important;
    border-color: rgba(var(--app-accent-rgb), .34) !important;
    -webkit-tap-highlight-color: transparent;
}
:root[data-color-mode="night"] .scroll-latest-btn,
:root[data-color-mode="night"] .scroll-latest-btn:hover,
:root[data-color-mode="night"] .scroll-latest-btn:focus-visible {
    color: rgb(var(--app-accent-rgb));
    background: rgba(29, 47, 54, .84) !important;
    border-color: rgba(220, 239, 242, .2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 22px rgba(0, 7, 13, .25);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
:root[data-color-mode="night"] .post-share-float,
:root[data-color-mode="night"] .post-share-float:hover,
:root[data-color-mode="night"] .post-share-float:focus-visible {
    width: 40px;
    height: 40px;
    right: -7px;
    bottom: 27px;
    color: #fff;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-tap-highlight-color: transparent;
}
:root[data-color-mode="night"] .post-share-float i {
    font-size: 24px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
:root[data-color-mode="night"] .post-share-float:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .72);
    outline-offset: -3px;
}
:root[data-color-mode="night"] .lang-switcher .dropdown-menu,
:root[data-color-mode="night"] .modal-content,
:root[data-color-mode="night"] .share-sheet-panel,
:root[data-color-mode="night"] .share-sheet-cancel {
    color: var(--night-text);
    background: var(--night-surface);
    border-color: var(--night-line);
}
:root[data-color-mode="night"] .lang-switcher .dropdown-menu {
    background: rgba(28, 45, 49, .94);
    border-color: rgba(218, 237, 239, .2);
    box-shadow: 0 16px 36px rgba(1, 9, 13, .34);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
:root[data-color-mode="night"] .lang-switcher .dropdown-item:hover,
:root[data-color-mode="night"] .lang-switcher .dropdown-item:focus,
:root[data-color-mode="night"] .lang-switcher .dropdown-item.active {
    color: var(--night-text);
    background: rgba(var(--app-accent-rgb), .2);
}
:root[data-color-mode="night"] .lang-switcher .dropdown-item:not(.active):hover,
:root[data-color-mode="night"] .lang-switcher .dropdown-item:not(.active):focus {
    background: rgba(231, 245, 242, .1);
}
:root[data-color-mode="night"] #modal-shield .modal-header {
    color: var(--night-text);
    background: transparent;
    border-bottom: 0;
}
:root[data-color-mode="night"] #modal-shield .modal-content {
    background: rgba(27, 45, 49, .96);
    border-color: rgba(218, 237, 239, .16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
:root[data-color-mode="night"] #modal-shield .modal-title { color: var(--night-text); }
:root[data-color-mode="night"] #modal-shield .btn-close-modal {
    color: rgb(var(--app-accent-rgb));
    background: transparent;
}
:root[data-color-mode="night"] #modal-shield .btn-close-modal:hover,
:root[data-color-mode="night"] #modal-shield .btn-close-modal:focus-visible { background: rgba(231, 245, 242, .1); }
:root[data-color-mode="night"] #modal-shield .help-tabs {
    border-color: rgba(224, 243, 238, .16);
    background: rgba(224, 243, 238, .035);
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 3px 12px rgba(3, 15, 17, .08);
}
:root[data-color-mode="night"] #modal-shield .help-tab { color: var(--night-muted); }
:root[data-color-mode="night"] #modal-shield .help-tab.is-active {
    color: var(--night-text);
}
:root[data-color-mode="night"] #modal-shield .help-body { color: var(--night-text); }
:root[data-color-mode="night"] #modal-shield .install-check {
    border-top-color: var(--night-line);
    background: transparent;
}
:root[data-color-mode="night"] #modal-shield .install-check__button {
    color: var(--night-text);
    background: rgba(224, 243, 238, .045);
    border-color: rgba(224, 243, 238, .2);
    box-shadow: inset 0 1px rgba(255, 255, 255, .07);
}
:root[data-color-mode="night"] #modal-shield .install-check__button:hover,
:root[data-color-mode="night"] #modal-shield .install-check__button:focus-visible {
    background: rgba(224, 243, 238, .1);
}
:root[data-color-mode="night"] #modal-shield .install-check__status {
    color: var(--night-muted);
}
:root[data-color-mode="night"] .modal-content :is(.modal-title, .modal-body, .modal-header, .modal-footer),
:root[data-color-mode="night"] .share-sheet-panel :is(.share-sheet-title, .share-sheet-title strong),
:root[data-color-mode="night"] .lang-switcher .dropdown-item { color: var(--night-text); }
:root[data-color-mode="night"] .modal-content .text-muted,
:root[data-color-mode="night"] .share-sheet-title span { color: var(--night-muted) !important; }
:root[data-color-mode="night"] .modal-header,
:root[data-color-mode="night"] .modal-footer { border-color: var(--night-line); }
:root[data-color-mode="night"] .modal-handle { background: rgba(220, 235, 240, .3); }
:root[data-color-mode="night"] .btn-close-modal { color: var(--night-text); background: var(--night-surface-raised); border-color: var(--night-line); }
:root[data-color-mode="night"] .share-sheet-social > span:last-child { color: var(--night-text); }
:root[data-color-mode="night"] .share-sheet-panel,
:root[data-color-mode="night"] .share-sheet-cancel {
    background: rgba(var(--sidebar-glass-rgb), .95);
    border-color: rgba(218, 237, 239, .2);
    box-shadow: 0 20px 58px rgba(0, 7, 12, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
}
:root[data-color-mode="night"] .share-sheet-social {
    min-height: 74px;
    background: transparent;
}
:root[data-color-mode="night"] .share-sheet-native {
    color: #8dcdeb;
    background: transparent;
    border: 0;
    -webkit-tap-highlight-color: transparent;
}
:root[data-color-mode="night"] .share-sheet-social > span:last-child {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
:root[data-color-mode="night"] .share-sheet-copy {
    color: #8dcdeb;
    background: transparent;
    border-top-color: rgba(218, 237, 239, .13);
}
:root[data-color-mode="night"] .share-sheet-cancel { color: #8dcdeb; }
:root[data-color-mode="night"] .share-sheet-native:hover,
:root[data-color-mode="night"] .share-sheet-native:active,
:root[data-color-mode="night"] .share-sheet-copy:active {
    color: #b9e6f7;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}
:root[data-color-mode="night"] .share-sheet-native:focus-visible {
    color: #b9e6f7;
    background: transparent;
    outline: 2px solid #8dcdeb;
    outline-offset: 2px;
}
:root[data-color-mode="night"] .share-sheet-social:active,
:root[data-color-mode="night"] .share-sheet-cancel:active {
    background: rgba(230, 246, 244, .1);
    -webkit-tap-highlight-color: transparent;
}

:root[data-color-mode="night"] .sidebar {
    --sidebar-green: rgb(var(--app-accent-rgb));
    color: var(--night-text);
    background-color: #14232a;
    background-image: linear-gradient(rgba(11, 29, 29, .76), rgba(11, 29, 29, .8)), var(--app-night-bg-mobile);
    background-size: 100% 100%, 440px auto;
    background-repeat: no-repeat, repeat;
}
:root[data-color-mode="night"][data-night-season="winter"] .sidebar {
    background-color: #19263a;
    background-image: linear-gradient(rgba(15, 27, 46, .76), rgba(15, 27, 46, .8)), var(--app-night-bg-mobile);
}
:root[data-color-mode="night"] .sidebar-info { color: var(--night-text); }
:root[data-color-mode="night"] .sidebar-actions,
:root[data-color-mode="night"] .sidebar-card {
    background: rgba(var(--sidebar-glass-rgb), .6);
    border: 1px solid rgba(226, 243, 242, .17);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 8, 14, .12);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
:root[data-color-mode="night"] .sidebar-action span,
:root[data-color-mode="night"] .sidebar-bio,
:root[data-color-mode="night"] .menu-item,
:root[data-color-mode="night"] .menu-item p { color: var(--night-text); }
:root[data-color-mode="night"] .sidebar-card-label,
:root[data-color-mode="night"] .menu-item .menu-item-arrow { color: var(--night-muted); }
:root[data-color-mode="night"] .sidebar-action + .sidebar-action::before { background: var(--night-line); }
:root[data-color-mode="night"] .sidebar-action:active,
:root[data-color-mode="night"] .menu-item:active { background: rgba(var(--app-accent-rgb), .16); }
:root[data-color-mode="night"] .sidebar-qr-view,
:root[data-color-mode="night"] .qr-sheet { color: var(--night-text); background: var(--night-surface); }
:root[data-color-mode="night"] .sidebar-qr-view { background: rgba(5, 13, 20, .82); }
:root[data-color-mode="night"] .qr-sheet {
    background: rgba(var(--sidebar-glass-rgb), .94);
    border: 1px solid rgba(var(--app-accent-rgb), .23);
    box-shadow: 0 24px 70px rgba(0, 5, 11, .42), inset 0 1px 0 rgba(255, 255, 255, .14);
    backdrop-filter: blur(22px) saturate(1.08);
    -webkit-backdrop-filter: blur(22px) saturate(1.08);
}
:root[data-color-mode="night"] .qr-switch,
:root[data-color-mode="night"] .qr-close,
:root[data-color-mode="night"] .qr-primary-action { color: var(--night-text); background: rgba(7, 20, 28, .42); }
:root[data-color-mode="night"] .qr-switch__btn { color: var(--night-muted); }
:root[data-color-mode="night"] .qr-switch__btn.is-active { color: var(--night-text); background: rgba(var(--app-accent-rgb), .24); }
:root[data-color-mode="night"] .qr-code-frame {
    width: min(100%, 288px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
:root[data-color-mode="night"] .qr-primary-action {
    border: 1px solid rgba(var(--app-accent-rgb), .2);
}

body.is-language-switching #main-app {
    opacity: .76;
    transform: translateY(3px);
    transition: opacity .2s ease, transform .2s ease;
}

@media (prefers-reduced-transparency: reduce) {
    :root[data-color-mode="night"] #header .meta { background: #203139 !important; border-color: rgba(220, 239, 242, .2) !important; }
    :root[data-color-mode="night"] .sidebar-actions,
    :root[data-color-mode="night"] .sidebar-card,
    :root[data-color-mode="night"] .qr-sheet { background: var(--night-surface-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
    :root[data-color-mode="night"] .scroll-latest-btn { background: #203139 !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
    :root[data-color-mode="night"] .share-sheet-panel,
    :root[data-color-mode="night"] .share-sheet-cancel,
    :root[data-color-mode="night"] .lang-switcher .dropdown-menu,
    :root[data-color-mode="night"] .post-quick-actions__emojis,
    :root[data-color-mode="night"] .post-quick-sheet { background: var(--night-surface-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 420px) {
    #header .meta,
    #header.has-install-action .meta,
    #header.has-social-action .meta,
    #header.has-install-action.has-social-action .meta { max-width: calc(100% - 92px); }
    #header.has-social-action .meta,
    #header.has-install-action.has-social-action .meta {
        max-width: calc(100% - 134px);
        transform: translateX(-22px);
    }
    #header .meta .caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .color-mode-particles { display: none; }
    body.is-language-switching #main-app { opacity: 1; transform: none; transition: none; }
}