:root {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ebebeb;
    --text-primary: #1a1a1a;
    --text-secondary: #7a7a7a;
    --text-inverse: #ffffff;
    --accent-primary: #3b82f6;
    --accent-secondary: #60a5fa;
    --accent-hover: #2563eb;
    --accent-like: #f91880;
    --accent-repost: #00ba7c;
    --link-color: #5b8ec9;
    --border-color: rgba(0, 0, 0, .1);
    --volume-track-bg: rgba(0, 0, 0, .25);
    --block-bg: #ffffff;
    --block-bg-secondary: #f0f0f0;
    --block-hover-bg: #f5f5f5;
    --bg-hover: rgba(0, 0, 0, .05);
    --bg-active: rgba(0, 0, 0, .1);
    --tab-active-bg: #f0f0f0;
    --settings-tab-active-bg: var(--bg-primary);
    --toggle-active-bg: #1a1a1a;
    --glass-bg: rgba(255, 255, 255, .5);
    --nav-gradient: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, .3) 30%, rgba(255, 255, 255, .8) 100%);
    --btn-primary-bg: #1a1a1a;
    --btn-primary-text: #ffffff;
    --shadow-elevated: 0 4px 16px rgb(0 0 0 / 8%);
    --poll-progress-color: rgba(0, 0, 0, .1);
    --poll-selected-progress-color: #000000;
    --poll-inverted-text: #ffffff;
    --transition-normal: .3s ease;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-full: 9999px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-2xl: 48px;
    --sidebar-width: 200px;
    --sidebar-gap: 36px;
    --content-max-width: 650px
}

[data-theme=dark] {
    --bg-primary: #09090b;
    --bg-secondary: #131316;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-inverse: #09090b;
    --accent-primary: #3b82f6;
    --accent-secondary: #60a5fa;
    --accent-hover: #60a5fa;
    --accent-like: #f91880;
    --accent-repost: #00ba7c;
    --link-color: #60a5fa;
    --border-color: rgba(255, 255, 255, .08);
    --volume-track-bg: rgba(255, 255, 255, .2);
    --block-bg: #1c1c21;
    --block-bg-secondary: #27272a;
    --block-hover-bg: #323238;
    --bg-hover: rgba(255, 255, 255, .06);
    --bg-active: rgba(255, 255, 255, .1);
    --tab-active-bg: #323238;
    --settings-tab-active-bg: var(--bg-primary);
    --toggle-active-bg: #3b82f6;
    --glass-bg: rgba(24, 24, 27, .78);
    --nav-gradient: linear-gradient(to bottom, transparent 0%, rgba(9, 9, 11, .35) 30%, rgba(9, 9, 11, .88) 100%);
    --btn-primary-bg: #3b82f6;
    --btn-primary-text: #ffffff;
    --shadow-elevated: 0 8px 32px rgb(0 0 0 / 45%);
    --poll-progress-color: rgba(255, 255, 255, .1);
    --poll-selected-progress-color: #fafafa;
    --poll-inverted-text: #09090b
}

*,*:before,*:after {
    box-sizing: border-box;
    padding: 0
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: scroll
}

body {
    font-family: Inter,-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,sans-serif;
    line-height: 1.5;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    touch-action: pan-x pan-y
}

a {
    color: inherit;
    text-decoration: none
}

ul,ol {
    list-style: none
}

img,picture,video,canvas,svg {
    display: block;
    max-width: 100%
}

input,button,textarea,select {
    font: inherit;
    color: inherit
}

button {
    cursor: pointer;
    background: none;
    border: none
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 600;
    line-height: 1.2
}

@keyframes flash-highlight-light {
    0% {
        background-color: #00000014
    }

    to {
        background-color: transparent
    }
}

@keyframes flash-highlight-dark {
    0% {
        background-color: #ffffff1f
    }

    to {
        background-color: transparent
    }
}

.flash-highlight {
    animation: flash-highlight-light .8s ease-out;
    border-radius: 12px
}

[data-theme=dark] .flash-highlight {
    animation: flash-highlight-dark .8s ease-out
}

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

::-webkit-scrollbar-track {
    background: var(--bg-primary)
}

::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-primary)
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--text-secondary) var(--bg-primary)
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0
}

#root {
    height: 100vh
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.sAbT {
    position: fixed;
    top: 0;
    right: calc(50% + var(--content-max-width) / 2 + var(--sidebar-gap));
    width: var(--sidebar-width);
    height: 100vh;
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.sAbT .wb03 {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.sAbT .VwNT {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 12px;
    transition: all .2s ease
}

.sAbT .VwNT:hover {
    background-color: var(--block-bg);
    color: var(--text-primary)
}

.sAbT .ZQJP {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    color: var(--text-primary)
}

.sAbT .ZQJP .efuY {
    opacity: .3;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: opacity .2s ease
}

.sAbT .ZQJP .efuY:hover {
    opacity: .6
}

.sAbT .J8iq {
    display: flex;
    flex-direction: column;
    margin-top: 32px
}

.sAbT .J8iq .A45D {
    display: flex;
    gap: 18px;
    padding: 16px;
    border-radius: 18px;
    opacity: .5;
    font-weight: 500
}

.sAbT .J8iq .A45D:hover {
    background-color: var(--block-bg)
}

.A34B {
    display: flex;
    gap: 18px;
    padding: 16px;
    border-radius: 18px;
    opacity: .5;
    font-weight: 500
}

.A34B:hover {
    background-color: var(--block-bg)
}

.sAbT .J8iq .A45D.q62g {
    background-color: var(--block-bg);
    opacity: 1
}

.sAbT .J8iq .kEfY {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.sAbT .J8iq .ZPao {
    display: flex;
    gap: 18px;
    padding: 16px;
    border-radius: 18px;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    font-weight: 500;
    opacity: .5;
    cursor: pointer;
    transition: all .2s ease
}

.sAbT .J8iq .ZPao:hover {
    background-color: var(--block-bg)
}

.sAbT .J8iq .ZPao.qe1B {
    opacity: 1
}

.sAbT .J8iq .ZPao.qe1B .xpde {
    animation: a8bs 2s ease-in-out infinite
}

.sAbT .J8iq .xpde {
    width: 24px;
    height: 24px;
    object-fit: contain
}

.sAbT .J8iq .pe3e {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background-color: var(--accent-like);
    border-radius: 9px
}

.xgyL {
    position: fixed;
    inset: 0;
    background: #0006;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: wmfK .2s ease
}

@keyframes wmfK {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes yMof {
    0% {
        opacity: 0;
        transform: scale(1.2)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.Qxj3 {
    position: relative;
    width: fit-content;
    max-width: min(var(--content-max-width),100vw - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: yMof .2s ease
}

.Qxj3.R4cU {
    max-width: min(1100px,100vw - 32px)
}

.C24C {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 32px);
    background: var(--block-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

@media(min-width: 1174px) {
    .C24C {
        border-radius:16px
    }
}

.qUGI .CGWS {
    padding: 0
}

.rThH {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1
}

.hzH7 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary)
}

.c9yn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color .2s ease,background .2s ease
}

.c9yn:hover {
    background: var(--bg-hover);
    color: var(--text-primary)
}

.GFCO {
    align-self: flex-end;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color .2s ease,background .2s ease
}

.GFCO:hover {
    background: var(--bg-hover);
    color: var(--text-primary)
}

.CGWS {
    flex: 1;
    overflow-y: auto;
    padding: 16px
}

.YhB8 {
    align-items: flex-end;
    padding: 0;
    transition: background-color .2s ease
}

.YhB8.b4kH {
    transition: none
}

.YhB8.JVJg {
    animation: Fq69 .2s ease forwards
}

@keyframes Fq69 {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes YuTw {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes kjJl {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(100%)
    }
}

.SWTC {
    width: 100%;
    max-width: 100%;
    height: 90vh;
    max-height: 90vh;
    animation: YuTw .3s ease-out;
    gap: 0;
    align-items: stretch
}

.SWTC.K8J2 {
    animation: kjJl .2s ease-out forwards
}

.SWTC .C24C {
    flex: 1;
    height: 100%;
    max-height: calc(90vh - 24px)
}

@media(min-width: 1174px) {
    .SWTC .C24C {
        border-radius:16px 16px 0 0
    }
}

.SWTC.q6nn .C24C {
    height: 80vh;
    max-height: 80vh
}

.EkjW {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
    cursor: grab;
    touch-action: none;
    background: var(--block-bg);
    border-radius: 16px 16px 0 0
}

.EkjW:active {
    cursor: grabbing
}

.w1rD {
    width: 36px;
    height: 4px;
    background: var(--text-secondary);
    border-radius: 2px
}

.FQzV {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 24px 0;
    color: var(--text-secondary)
}

.FQzV svg {
    animation: KScw 1s linear infinite
}

.nOrT {
    padding: 0;
    width: auto;
    flex: unset;
    color: inherit
}

.nOrT svg {
    width: 16px;
    height: 16px
}

.eTGp svg {
    width: 24px;
    height: 24px
}

.Vu6n svg {
    width: 32px;
    height: 32px
}

.J96q svg {
    width: 48px;
    height: 48px
}

@keyframes KScw {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.XbzE {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: opacity .2s ease,background .2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
}

.XbzE:disabled {
    opacity: .5;
    cursor: not-allowed
}

.XbzE:not(:disabled):hover {
    opacity: .9
}

.BF5f {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text)
}

.yoA3 {
    background: var(--bg-secondary);
    color: var(--text-primary)
}

.JMFf {
    background: transparent;
    color: var(--text-primary)
}

.JMFf:not(:disabled):hover {
    background: var(--bg-secondary)
}

.TXBP {
    background: var(--accent-primary);
    color: #fff
}

.DphA {
    background: var(--error-color, #ef4444);
    color: #fff
}

.MHSj {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 16px
}

@media(max-width: 1173px) {
    .MHSj {
        height:28px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 14px
    }
}

.loq7 {
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 20px
}

@media(max-width: 1173px) {
    .loq7 {
        height:36px;
        padding: 0 16px;
        font-size: 13px;
        border-radius: 18px
    }
}

.Hg0L {
    height: 48px;
    padding: 0 24px;
    font-size: 16px;
    border-radius: 24px
}

@media(max-width: 1173px) {
    .Hg0L {
        height:40px;
        padding: 0 18px;
        font-size: 14px;
        border-radius: 20px
    }
}

.GFTu {
    width: 100%
}

.o6eY {
    padding: 0
}

.o6eY.MHSj {
    width: 32px
}

.o6eY.loq7 {
    width: 40px
}

.o6eY.Hg0L {
    width: 48px
}

.Zu7x {
    pointer-events: none
}

.Zu7x>div {
    color: inherit;
    padding: 0;
    width: auto;
    flex: unset
}

.UTmg {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 340px
}

@media(max-width: 1173px) {
    .UTmg {
        padding:20px;
        max-width: 100%
    }
}

.M5L8 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-align: center
}

@media(max-width: 1173px) {
    .M5L8 {
        font-size:18px
    }
}

.e8bf {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
    line-height: 1.5
}

.e8bf strong {
    color: var(--text-primary)
}

@media(max-width: 1173px) {
    .e8bf {
        font-size:13px
    }
}

.YYtr {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 4px
}

.eHUv {
    position: relative;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--bg-primary)
}

@media(max-width: 1174px) {
    .eHUv {
        background-color:var(--block-bg)
    }
}

.eHUv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.eHUv.jkr5 {
    width: 28px;
    height: 28px
}

.eHUv.jkr5 .wGLu {
    font-size: 12px
}

.eHUv.jkr5 .XLtm {
    width: 8px;
    height: 8px;
    bottom: -2px;
    right: -2px
}

.eHUv.xGuN {
    width: 36px;
    height: 36px
}

.eHUv.xGuN .wGLu {
    font-size: 16px
}

@media(min-width: 1174px) {
    .eHUv.xGuN {
        width:40px;
        height: 40px
    }
}

.eHUv.ARWq {
    width: 40px;
    height: 40px
}

.eHUv.ARWq .wGLu {
    font-size: 18px
}

.eHUv.JTBC {
    width: 100px;
    height: 100px;
    border: 6px solid var(--bg-primary);
    background: var(--bg-primary)
}

.eHUv.JTBC .wGLu {
    font-size: 40px
}

.eHUv.JTBC .XLtm {
    width: 22px;
    height: 22px;
    border-width: 4px;
    border-color: var(--bg-primary);
    bottom: 4px;
    right: 4px
}

@media(min-width: 1174px) {
    .eHUv.JTBC {
        width:120px;
        height: 120px
    }
}

.eHUv.I5So {
    width: 120px;
    height: 120px;
    border: 6px solid var(--bg-primary);
    background: var(--bg-primary)
}

.eHUv.I5So .wGLu {
    font-size: 48px
}

.eHUv.I5So .XLtm {
    width: 24px;
    height: 24px;
    border-width: 4px;
    border-color: var(--bg-primary);
    bottom: 6px;
    right: 6px
}

@media(min-width: 1174px) {
    .eHUv.I5So {
        width:150px;
        height: 150px
    }
}

.wGLu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.c31P {
    position: absolute;
    bottom: -5px;
    right: -5px
}

.XLtm {
    position: absolute;
    border-radius: 50%;
    background-color: #22c55e;
    border: 2px solid var(--block-bg);
    width: 12px;
    height: 12px;
    bottom: -1px;
    right: -1px
}

.Ux2Y {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border: 3px solid var(--block-bg);
    background-color: var(--bg-primary);
    color: #fff;
    padding: 0;
    cursor: pointer;
    outline: none;
    z-index: 1
}

.Ux2Y.qFC3 {
    color: var(--accent)
}

.Ux2Y.GAwo {
    color: #ff5050
}

.AoFr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1;
    min-width: 0
}

.AoFr svg,.AoFr .G0av {
    flex-shrink: 0
}

.AoFr .G0av {
    object-fit: contain
}

.AoFr .B2Nw {
    text-overflow: ellipsis;
    white-space: nowrap
}

.AoFr .WSJw,[data-theme=dark] .AoFr .WSJw {
    filter: drop-shadow(0 2px 16px rgba(0,128,255,.4))
}

.AoFr .WSJw .B2Nw {
    background: linear-gradient(270deg,#0288d1,#26c6da);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

[data-theme=dark] .AoFr .WSJw .B2Nw {
    background: linear-gradient(270deg,#4fc3f7,#e0f7fa);
    -webkit-background-clip: text;
    background-clip: text
}

.AoFr.bzMJ {
    font-size: 12px;
    gap: 4px
}

.AoFr.jHZK {
    font-size: 14px
}

@media(min-width: 1174px) {
    .AoFr.jHZK {
        font-size:15px
    }
}

.AoFr.yEKH {
    font-size: 15px
}

@media(min-width: 1174px) {
    .AoFr.yEKH {
        font-size:16px
    }
}

.AoFr.puRy {
    font-size: 24px;
    gap: 12px;
    line-height: 1.3
}

.AoFr.puRy .B2Nw {
    white-space: normal;
    overflow: visible;
    text-overflow: clip
}

.Ulla {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: default
}

.Ulla.vNyK {
    cursor: pointer
}

.i0kl {
    position: fixed;
    transform: translate(-50%) translateY(-100%) translateY(-8px);
    background: #000000e6;
    color: #ffffffd9;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: w86e .15s ease
}

@keyframes w86e {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.gcnf {
    display: block
}

.lhpx {
    color: #ffffff80
}

.ygvm {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0,0,0,.9)
}

.SAkb {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 16px
}

.wnm0 {
    margin-bottom: 4px
}

.Xa20 {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 320px;
    margin: 0
}

.mHij {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    background-color: #2aabee;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease
}

.mHij:hover {
    background-color: #229ed9
}

.TWZf {
    position: fixed;
    top: 0;
    left: calc(50% + var(--content-max-width) / 2 + var(--sidebar-gap));
    width: var(--sidebar-width);
    height: 100vh;
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.iOAx {
    flex: 1
}

.omRp {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-size: 13px;
    color: var(--text-secondary)
}

.omOO {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.omOO a:hover {
    color: var(--text-primary)
}

.ediY {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: var(--nav-gradient);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    z-index: 1;
    transform: translateY(0);
    transition: transform .3s cubic-bezier(.4,0,.2,1)
}

.ediY.Pe1e {
    transform: translateY(100%)
}

.liP0 {
    position: relative;
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 32px;
    pointer-events: auto;
    padding: 6px;
    box-shadow: var(--shadow-elevated)
}

.liP0:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom,#ffffff40,#ffffff0d);
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

.N0ZZ {
    position: absolute;
    top: 6px;
    bottom: 6px;
    background: var(--tab-active-bg);
    border-radius: 32px;
    transition: all .2s cubic-bezier(.5,0,0,1),opacity .2s ease;
    opacity: 1
}

.N0ZZ.bT7v {
    opacity: 0
}

.AnhZ {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color .2s ease
}

.Jfl6 {
    font-size: 10px;
    font-weight: 500
}

.AnhZ.t7i5 {
    color: var(--text-primary)
}

.FEV3 {
    position: relative;
    order: -1;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: none;
    border-radius: 32px;
    cursor: pointer;
    pointer-events: auto;
    color: var(--text-primary);
    box-shadow: var(--shadow-elevated)
}

.FEV3:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom,#ffffff40,#ffffff0d);
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

.nQw1 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.DeUf {
    width: 24px;
    height: 24px;
    object-fit: contain
}

.DeUf.DcOO {
    animation: JizI 2s ease-in-out infinite
}

@keyframes JizI {
    0%,to {
        filter: drop-shadow(0 0 4px rgba(144,162,255,.2))
    }

    50% {
        filter: drop-shadow(0 0 16px rgb(144,162,255))
    }
}

.aSVJ {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background-color: var(--accent-like);
    border-radius: 8px
}

.hO06 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative
}

.hO06.lUOw {
    border-radius: 12px
}

.hO06 .gZD6 {
    width: 100%;
    display: flex;
    gap: 18px;
    min-width: 0
}

.hO06 .gZD6 .VI3o {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
    overflow-y: auto
}

@media(max-width: 1173px) {
    .hO06 .gZD6 .VI3o {
        font-size:16px
    }
}

.kCNi {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--accent-color);
    border-radius: 12px;
    background: var(--accent-color-transparent, rgba(99, 102, 241, .06));
    pointer-events: none
}

.kCNi svg {
    color: var(--accent-color);
    opacity: .7
}

.kCNi span {
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-color)
}

.zpKZ {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.ZzVZ {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden
}

.ZzVZ img,.ZzVZ video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ZzVZ.h9BK img,.ZzVZ.h9BK video {
    opacity: .6
}

.ZzVZ.E5bj img,.ZzVZ.E5bj video {
    opacity: .4
}

.hQhs {
    position: relative;
    width: 100%;
    height: 100%
}

.UsVU {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 32px;
    height: 32px;
    background: #00000080;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.EfOb {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0000004d
}

.qRTk {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: LmXM .8s linear infinite
}

@keyframes LmXM {
    to {
        transform: rotate(360deg)
    }
}

.PlF9 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ef4444cc;
    padding: 4px
}

.aeNH {
    font-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 1.2
}

.asrP {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0009;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff
}

.ttfJ {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.BjQW {
    display: flex;
    gap: 8px
}

.W9uB {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: color .2s ease,background .2s ease
}

.W9uB:hover {
    background: var(--bg-secondary);
    color: var(--accent-color)
}

.Ec2D {
    display: flex;
    align-items: center;
    gap: 24px
}

.ft87 {
    font-size: 14px;
    color: var(--text-secondary)
}

.ft87.jqTh {
    color: var(--error-color, #ef4444)
}

@media(max-width: 1173px) {
    .ft87 {
        font-size:12px
    }
}

.YBFV {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background-color: var(--bg-primary)
}

.KKRT {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.VTgv {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary)
}

.UJMf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: color .2s ease
}

.UJMf:hover {
    color: var(--text-primary)
}

.CG2H {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    outline: none
}

.CG2H::placeholder {
    color: var(--text-secondary)
}

.QG3V {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.YL8J {
    display: flex;
    align-items: center;
    gap: 8px
}

.WNoT {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    outline: none
}

.WNoT::placeholder {
    color: var(--text-secondary)
}

.cl5N {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: background .2s ease,color .2s ease
}

.cl5N:hover {
    background: var(--error-color, #ef4444);
    color: #fff
}

.hl4Q {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    transition: border-color .2s ease,color .2s ease,background .2s ease
}

.hl4Q:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--bg-secondary)
}

.hl4Q svg {
    width: 16px;
    height: 16px
}

.tvog {
    padding-top: 12px;
    border-top: 1px solid var(--border-color)
}

.YWZg {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary)
}

.YWZg input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color);
    cursor: pointer
}

.W9uB.Z9SL {
    color: var(--accent-color);
    background: var(--bg-secondary)
}

.hK7L {
    position: relative;
    width: 100%;
    padding: 12px;
    border: none;
    outline: none;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    background: transparent;
    overflow-y: auto;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap
}

.hK7L:empty:before,.hK7L.PCh0:before {
    content: attr(data-placeholder);
    color: var(--text-secondary);
    pointer-events: none;
    position: absolute
}

.hK7L .xbUE {
    font-weight: 700
}

.hK7L .aTaO {
    font-style: italic
}

.hK7L .cp16 {
    text-decoration: underline
}

.hK7L .ovv8 {
    text-decoration: line-through
}

.hK7L .AOdw {
    background-color: var(--text-primary);
    color: transparent;
    border-radius: 4px;
    padding: 0 2px;
    cursor: pointer;
    transition: all .2s ease
}

.hK7L .AOdw:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary)
}

.hK7L .XKNB {
    font-family: SF Mono,Fira Code,Consolas,monospace;
    background-color: var(--bg-secondary);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: .9em
}

.hK7L .yAma {
    border-left: 3px solid var(--accent-color);
    padding-left: 12px;
    color: var(--text-secondary);
    font-style: italic;
    display: inline
}

.hK7L .gOKS {
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer
}

.hK7L .gOKS:hover {
    text-decoration: none
}

.WXHn {
    position: fixed;
    z-index: 10000;
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 16px #0003;
    animation: lo1B .15s ease
}

@keyframes lo1B {
    0% {
        opacity: 0;
        transform: translateY(4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.VIiS {
    display: flex;
    gap: 2px
}

.b2Jh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all .15s ease
}

.b2Jh:hover {
    background: var(--bg-secondary)
}

.b2Jh:active {
    transform: scale(.95)
}

.b2Jh.mBZO {
    background: var(--accent-color);
    color: #fff
}

.YBUI {
    display: flex;
    gap: 4px;
    padding: 4px
}

.cW5m {
    width: 200px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    outline: none
}

.cW5m:focus {
    border-color: var(--accent-color)
}

.cW5m::placeholder {
    color: var(--text-secondary)
}

.gZsI {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: var(--accent-color);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .15s ease
}

.gZsI:hover:not(:disabled) {
    opacity: .9
}

.gZsI:disabled {
    opacity: .5;
    cursor: not-allowed
}

.q2wH {
    display: flex;
    flex-direction: column;
    position: sticky;
    bottom: 0;
    background: var(--block-bg);
    padding: 16px;
    border-top: 1px solid var(--border-color)
}

@media(max-width: 1174px) {
    .q2wH {
        border-top:unset;
        padding: 0;
        bottom: 96px;
        margin: 16px;
        background: unset
    }

    [data-comments-modal] .q2wH:not(.tZIF) {
        bottom: 0;
        margin: 0;
        padding: 16px;
        background: transparent;
        border-top: 1px solid var(--border-color)
    }
}

.q2wH {
    min-height: 40px
}

@media(min-width: 1174px) {
    .q2wH:not(.tZIF) {
        border-bottom-left-radius:36px;
        border-bottom-right-radius: 36px
    }
}

.q2wH.tZIF {
    position: relative;
    bottom: auto;
    margin: 24px 0 0;
    padding: 12px 0
}

.rPbO {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    width: 100%
}

.n0jU {
    padding: 0 0 8px;
    margin-left: 52px
}

@media(max-width: 1174px) {
    .n0jU {
        margin-left:0;
        padding-bottom: 6px
    }
}

.LXIj {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg)
}

@media(max-width: 1174px) {
    .LXIj {
        -webkit-backdrop-filter:blur(16px);
        backdrop-filter: blur(16px)
    }
}

.LXIj {
    border-radius: 32px;
    color: var(--text-secondary);
    flex-shrink: 0
}

.LXIj:hover {
    color: var(--text-primary)
}

.LXIj.FE1F {
    transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),margin-left .3s cubic-bezier(.4,0,.2,1)
}

.LXIj.WDfE {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 6px -40px 6px 6px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    transform: translate(40px);
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.4,0,.2,1),margin-right .3s cubic-bezier(.4,0,.2,1)
}

.LXIj.WDfE.LuDQ {
    background-color: var(--glass-bg);
    color: var(--text-secondary);
    cursor: wait
}

.LXIj.WDfE:disabled {
    opacity: .7;
    cursor: not-allowed
}

.KPMg {
    background: var(--glass-bg)
}

@media(max-width: 1174px) {
    .KPMg {
        -webkit-backdrop-filter:blur(16px);
        backdrop-filter: blur(16px)
    }
}

.KPMg {
    border-radius: 20px;
    flex: 1;
    display: flex;
    align-items: end;
    min-height: 40px;
    overflow: hidden;
    position: relative
}

.hWUL .FE1F {
    width: 0;
    opacity: 0;
    transform: translate(20px);
    margin-left: -12px
}

.hWUL .KPMg .WDfE {
    margin-right: 6px;
    transform: translate(0)
}

.Esz6 .FE1F {
    width: 0;
    opacity: 0;
    transform: translate(20px);
    margin-left: -12px
}

.Esz6 .KPMg {
    z-index: 10
}

.uenP {
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    position: relative
}

.wSPh {
    position: absolute;
    right: 8px;
    bottom: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    line-height: 1
}

.wSPh.S3kD {
    color: var(--error-color, #ef4444);
    font-weight: 600
}

.pmGr {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    resize: none;
    overflow-y: auto;
    max-height: 176px;
    line-height: 1.4;
    padding: 10px 0 10px 20px
}

.pmGr::placeholder {
    color: var(--text-secondary)
}

.jYnS {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px;
    color: var(--text-secondary);
    border-radius: 50%;
    transition: color .2s ease,background .2s ease;
    margin-right: 14px
}

.jYnS:hover {
    background: var(--bg-secondary);
    color: var(--accent-color)
}

.hYxM {
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px
}

@media(max-width: 1174px) {
    .hYxM {
        padding:4px 0
    }
}

.JXrG {
    font-size: 12px;
    color: var(--text-secondary)
}

.G0hr {
    color: var(--accent-color);
    font-weight: 500
}

.r4AH {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    border-radius: 50%;
    transition: color .2s ease,background .2s ease
}

.r4AH:hover {
    color: var(--text-primary);
    background: var(--bg-secondary)
}

.wflh {
    position: relative
}

.rCER {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--accent-color);
    border-radius: 20px;
    background: var(--accent-color-transparent, rgba(99, 102, 241, .06));
    pointer-events: none
}

.rCER svg {
    color: var(--accent-color);
    opacity: .7
}

.rCER span {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-color)
}

.bd1f {
    display: flex;
    align-items: flex-end;
    flex: 1;
    min-width: 0
}

.bd1f.Sig1 .mxrj {
    animation: tN64 .3s cubic-bezier(.4,0,.2,1) forwards
}

.bd1f.Sig1 .HVsu {
    animation: Gwk8 .3s cubic-bezier(.4,0,.2,1) .1s forwards
}

@keyframes tN64 {
    0% {
        opacity: 0;
        transform: translate(-20px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes Gwk8 {
    0% {
        opacity: 0;
        transform: translate(20px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

.OLBS {
    display: inline-flex;
    overflow: hidden;
    height: 1em;
    line-height: 1
}

.B7rG {
    display: inline-flex;
    flex-direction: column;
    position: relative
}

.AcpV,.YuXr {
    height: 1em;
    display: flex;
    align-items: center
}

.B7rG.KS8T.I9vf {
    animation: aVM2 .3s cubic-bezier(.4,0,.2,1) forwards
}

.B7rG.KS8T.I9vf .AcpV {
    order: 1;
    animation: lhwT .3s cubic-bezier(.4,0,.2,1) forwards
}

.B7rG.KS8T.I9vf .YuXr {
    order: 2;
    animation: fjwM .3s cubic-bezier(.4,0,.2,1) forwards
}

.B7rG.KS8T.BLhH {
    animation: Y0N1 .3s cubic-bezier(.4,0,.2,1) forwards
}

.B7rG.KS8T.BLhH .YuXr {
    order: 1;
    animation: fjwM .3s cubic-bezier(.4,0,.2,1) forwards
}

.B7rG.KS8T.BLhH .AcpV {
    order: 2;
    animation: lhwT .3s cubic-bezier(.4,0,.2,1) forwards
}

@keyframes aVM2 {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-1em)
    }
}

@keyframes Y0N1 {
    0% {
        transform: translateY(-1em)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes lhwT {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 0
    }
}

@keyframes fjwM {
    0% {
        opacity: 0
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 1
    }
}

.GX6x {
    flex-shrink: 0;
    position: relative;
    display: inline-flex
}

.N7bG {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease,color .2s ease
}

.N7bG:hover {
    background: var(--bg-hover);
    color: var(--text-primary)
}

.xgCN {
    position: fixed;
    z-index: 9999;
    min-width: 180px;
    padding: 6px;
    background: var(--block-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 32px #00000040;
    animation: qpgX .2s cubic-bezier(.16,1,.3,1)
}

.xgCN.y7mQ {
    visibility: hidden;
    pointer-events: none
}

@keyframes qpgX {
    0% {
        opacity: 0;
        transform: scale(.9) translateY(-4px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.z1X4 {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 450;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    transition: background .15s ease
}

.z1X4:hover {
    background: var(--bg-hover)
}

.z1X4:active {
    background: var(--bg-active)
}

.z1X4.XeDf,.z1X4.XeDf .Jqab {
    color: var(--accent-like)
}

.Jqab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary)
}

.cERd {
    flex: 1
}

.Rn1Y {
    height: 1px;
    margin: 6px 8px;
    background: var(--border-color)
}

.R3pX {
    text-decoration: underline
}

.RwQL {
    font-family: SF Mono,Fira Code,Consolas,monospace;
    background-color: var(--bg-secondary);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: .9em
}

.gP2R {
    border-left: 3px solid var(--accent-color);
    padding-left: 12px;
    color: var(--text-secondary);
    font-style: italic
}

.CMdI {
    background-color: var(--text-primary);
    color: transparent;
    border-radius: 4px;
    padding: 0 2px;
    cursor: pointer;
    transition: all .2s ease;
    -webkit-user-select: none;
    user-select: none
}

.CMdI.X7CB {
    background-color: transparent;
    color: var(--text-primary)
}

.P5DI {
    color: var(--link-color);
    text-decoration: none
}

.P5DI:hover {
    text-decoration: underline
}

.d4YF {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500
}

.d4YF:hover {
    text-decoration: underline
}

.eKOW {
    color: var(--link-color);
    text-decoration: none
}

.eKOW:hover {
    text-decoration: underline
}

.ttWw {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    flex-shrink: 0;
    transition: transform .15s ease
}

.ttWw:active {
    cursor: grabbing;
    transform: scale(.97)
}

.ttWw.QXjI:active {
    transform: none
}

.ttWw.QXjI .zpPo {
    filter: blur(30px);
    transform: scale(1.1)
}

.ttWw.IZET .zpPo {
    filter: blur(0);
    transform: scale(1)
}

.ttWw.IZET .Ch4j {
    opacity: 0;
    transition: opacity .4s ease
}

.zpPo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .4s ease,transform .4s ease
}

.Ch4j {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity .4s ease
}

.LjKe {
    position: relative
}

.LjKe.qudP:not([data-count="1"]) {
    margin-left: -50px
}

.stcR {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    max-height: 300px;
    width: 100%
}

@media(min-width: 1174px) {
    .stcR {
        max-height:500px
    }
}

.stcR img,.stcR .JBr6 {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    transition: filter var(--transition-normal)
}

@media(min-width: 1174px) {
    .stcR img,.stcR .JBr6 {
        max-height:500px
    }
}

.C9fb {
    border-radius: 12px;
    overflow: hidden
}

.xaS8 {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x pan-y;
    max-height: 300px
}

@media(min-width: 1174px) {
    .xaS8 {
        max-height:500px
    }
}

.xaS8.qudP {
    margin: 0 -16px;
    padding: 0 16px 0 68px
}

.xaS8::-webkit-scrollbar {
    display: none
}

.xaS8.wgFB {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none
}

@media(min-width: 1174px) {
    .xaS8 {
        border-radius:12px
    }

    .xaS8.qudP {
        margin: 0;
        padding: 0 0 0 50px
    }
}

.xaS8 img,.xaS8 video,.xaS8 .JBr6 {
    flex-shrink: 0;
    max-height: 300px;
    width: auto;
    object-fit: cover;
    border-radius: 12px;
    cursor: grab;
    transition: filter var(--transition-normal),transform .15s ease;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation
}

@media(min-width: 1174px) {
    .xaS8 img,.xaS8 video,.xaS8 .JBr6 {
        max-height:500px
    }
}

.xaS8 img:active,.xaS8 video:active,.xaS8 .JBr6:active {
    cursor: grabbing;
    transform: scale(.98)
}

.xaS8[data-count="1"] {
    width: fit-content
}

.xaS8[data-count="1"] img,.xaS8[data-count="1"] video,.xaS8[data-count="1"] .JBr6 {
    width: auto;
    max-height: 300px;
    object-fit: contain
}

@media(min-width: 1174px) {
    .xaS8[data-count="1"] img,.xaS8[data-count="1"] video,.xaS8[data-count="1"] .JBr6 {
        max-height:500px
    }
}

.gjHT {
    position: relative;
    transform: translate(-50%) translateY(-100%) translateY(-8px);
    background: #000000e6;
    color: #ffffffd9;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap
}

.gjHT.xKnw {
    white-space: normal;
    max-width: 280px;
    text-align: left
}

.gjHT {
    pointer-events: none;
    z-index: 10000;
    animation: JAf4 .15s ease
}

@keyframes JAf4 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.wToh {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0,0,0,.9)
}

.so2s {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.fUy4 {
    display: flex;
    align-items: center;
    gap: 14px
}

.Nboe {
    position: absolute;
    right: 24px;
    margin: -8px
}

.Nboe>div {
    padding: 8px
}

@media(max-width: 1173px) {
    .Nboe {
        right:16px
    }
}

.DreZ {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500
}

.DreZ svg {
    flex-shrink: 0
}

.oICA {
    display: flex;
    flex: 1;
    flex-direction: unset;
    align-items: center;
    gap: 12px;
    line-height: 1;
    min-width: 0;
    padding-right: 32px
}

@media(max-width: 1173px) {
    .oICA {
        padding-right:24px
    }
}

.m8Ma {
    min-width: 0
}

.m8Ma:hover {
    text-decoration: underline
}

.ILpO {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 12px
}

@media(min-width: 1174px) {
    .ILpO {
        font-size:13px
    }
}

.YqWy {
    color: var(--text-secondary)
}

.eA5A {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -8px
}

.LMqE {
    display: flex;
    align-items: center;
    gap: 8px
}

.GJWx,.q9Qo {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-full);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 100%;
    font-variant-numeric: tabular-nums;
    padding: 8px
}

@media(min-width: 1174px) {
    .GJWx,.q9Qo {
        font-size:14px
    }
}

.GJWx svg,.q9Qo svg {
    flex-shrink: 0
}

.GJWx {
    border: none;
    cursor: pointer
}

.GJWx svg {
    transition: transform .2s ease
}

.GJWx:active svg {
    transform: scale(.8)
}

.GJWx.Hkd0 {
    color: var(--accent-like)
}

.GJWx.liked {
    color: var(--accent-like)
}

.GJWx.liked svg,
.GJWx.liked .like-icon {
    color: var(--accent-like);
}

.GJWx:not(.liked) svg.like-icon:not(.liked) {
    color: var(--text-secondary);
}

.GJWx.alp4 {
    color: #ffdc5f
}

.GJWx.mqzz {
    color: var(--accent-repost)
}

.GJWx.nsbC {
    opacity: .4;
    cursor: not-allowed
}

.GJWx.nsbC:active svg {
    transform: none
}

.LHot {
    display: block;
    animation: bdKp .4s ease
}

.lGk4 {
    display: block
}

.uHNP svg {
    animation: none!important
}

@keyframes bdKp {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.3)
    }

    50% {
        transform: scale(.9)
    }

    to {
        transform: scale(1)
    }
}

.IkvX {
    position: relative
}

.nj3o {
    display: flex;
    align-items: center;
    gap: 8px
}

.IF7U {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    cursor: default
}

@media(min-width: 768px) {
    .IF7U {
        display:flex
    }
}

@media(min-width: 1174px) {
    .IF7U {
        font-size:13px
    }
}

.VDLf {
    font-size: 16px;
    line-height: 1
}

.sjio {
    white-space: nowrap
}

.g3BX {
    display: block;
    font-size: 16px;
    line-height: 1
}

@media(min-width: 768px) {
    .g3BX {
        display:none
    }
}

@keyframes zA0e {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.3)
    }

    50% {
        transform: scale(.9)
    }

    to {
        transform: scale(1)
    }
}

.NLRq {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px
}

@media(min-width: 1174px) {
    .NLRq {
        gap:18px;
        padding: 24px;
        border-radius: 36px;
        background-color: var(--block-bg)
    }
}

.ozPS.zgUL {
    display: flex;
    gap: 10px
}

.ozPS .xOfb {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ozPS .wWUc {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.OZ06 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 24px;
    flex-shrink: 0;
    color: var(--text-secondary);
    padding-top: 4px
}

.b0ZW {
    position: relative
}

.wUNi {
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden
}

.wUNi.zJgZ {
    position: relative
}

.wUNi.zJgZ:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom,transparent,var(--block-bg));
    pointer-events: none
}

@media(max-width: 1173px) {
    .wUNi.zJgZ:after {
        background:linear-gradient(to bottom,transparent,var(--bg-primary))
    }
}

.B2MJ {
    display: block;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .2s ease
}

.B2MJ:hover {
    opacity: .8
}

.SY6G {
    border-radius: 16px;
    padding: 12px;
    background: var(--bg-primary);
    cursor: pointer;
    transition: background .2s ease;
    overflow: hidden
}

@media(max-width: 1173px) {
    .SY6G {
        padding:10px;
        border-radius: 12px;
        background: var(--block-bg)
    }
}

.ktHU {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px
}

.Stov {
    color: var(--text-secondary);
    font-size: 12px
}

.RkoF {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden
}

@media(max-width: 1173px) {
    .RkoF {
        font-size:13px
    }
}

.YeK4 {
    margin-top: 8px
}

.HGbu {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px
}

.D6AT {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary)
}

.D6AT svg {
    color: var(--text-secondary)
}

.SZrk {
    display: flex;
    flex-direction: column
}

.KTL1 {
    display: flex;
    position: relative
}

.nW60 {
    position: relative;
    flex-shrink: 0;
    margin-right: 12px
}

.QsvX {
    position: absolute;
    bottom: 0;
    top: 52px;
    left: 50%;
    transform: translate(-50%);
    width: 2px;
    background-color: var(--border-color);
    border-radius: 1px;
    height: calc(100% - 64px)
}

.bR54 {
    flex: 1;
    min-width: 0
}

.KTL1:not(:last-child) .bR54 {
    padding-bottom: 16px
}

.IVtc {
    font-size: 14px;
    color: var(--accent-primary);
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
    text-align: left
}

.IVtc:hover {
    text-decoration: underline
}

.KJck {
    width: 36px;
    height: 36px
}

.n5Vt {
    display: flex;
    gap: 12px
}

.n5Vt.fYFF {
    gap: 10px
}

.n5Vt.fYFF .tuD1 {
    font-size: 11px
}

.n5Vt.fYFF .iOM2 {
    font-size: 13px
}

.n5Vt.fYFF .UJva {
    margin-top: 2px
}

.n5Vt.fYFF .h946 {
    gap: 2px
}

.bAc2 {
    flex-shrink: 0
}

.eR0U {
    text-decoration: none;
    color: inherit
}

.eR0U:hover {
    text-decoration: underline
}

.h946 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0
}

.ujBJ {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px
}

.ujBJ .cC8r {
    opacity: 0;
    transition: opacity .2s ease
}

.ujBJ .cC8r>div {
    padding: 8px;
    margin: -8px
}

@media(max-width: 1173px) {
    .ujBJ .cC8r {
        opacity:1
    }
}

@media(min-width: 1174px) {
    .KTL1:hover .cC8r {
        opacity:1
    }
}

.eck7 {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden
}

.tuD1 {
    color: var(--text-secondary);
    font-size: 12px
}

.iOM2 {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.4
}

.JVPC {
    color: var(--link-color);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer
}

.JVPC:hover {
    text-decoration: underline
}

.BzBP {
    margin-top: 8px
}

.UJva {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px
}

.E9AN {
    position: relative;
    padding: 8px;
    margin: -8px
}

.VaxP {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    padding: 0;
    background: transparent
}

.VaxP:hover {
    color: var(--text-primary)
}

.VaxP.iJ0H {
    color: var(--accent-like)
}

.VaxP.iJ0H svg {
    animation: aNlq .4s ease
}

.VaxP.QdHw {
    color: var(--text-primary)
}

.q3hl {
    animation: gBdN .4s ease
}

.E6cn {
    animation: none
}

.gdmp {
    animation: none!important
}

@keyframes gBdN {
    0% {
        transform: scale(.5)
    }

    50% {
        transform: scale(1.3)
    }

    to {
        transform: scale(1)
    }
}

.uMpP {
    font-size: 12px;
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    background: transparent
}

.uMpP:hover {
    color: var(--text-primary)
}

@keyframes aNlq {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.3)
    }

    50% {
        transform: scale(.9)
    }

    to {
        transform: scale(1)
    }
}

.x82I {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden
}

.DYoW {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    line-height: 1
}

@media(min-width: 1174px) {
    .DYoW {
        padding:24px
    }
}

.Rpki {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary)
}

.RmFi {
    font-size: 14px;
    color: var(--text-secondary)
}

.piYF {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color)
}

.qRUd {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 20px 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    outline: none
}

.qRUd option {
    background: var(--bg-primary);
    color: var(--text-primary)
}

.iFz3 {
    display: flex;
    flex-direction: column;
    flex: 1
}

.EAor {
    padding: 16px
}

@media(min-width: 1174px) {
    .EAor {
        padding:12px 24px
    }
}

.EAor:not(:last-child) {
    border-bottom: 1px solid var(--border-color)
}

.sWb6 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px
}

.eEBg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px
}

.tnk0 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 20px
}

.J1p9 {
    color: var(--text-secondary);
    font-size: 14px
}

.vWRn {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

.iM48 {
    position: relative;
    width: 100%
}

.eJVB {
    padding: 16px;
    border-bottom: 1px solid var(--border-color)
}

@media(min-width: 1174px) {
    .eJVB {
        padding:12px 24px
    }
}

.FQDD {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: sticky;
    bottom: 0;
    background: var(--bg-primary)
}

.AXTv {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    background: var(--block-bg)
}

.BeHb {
    position: relative;
    display: flex;
    align-items: center
}

.NWQO {
    z-index: 10001;
    animation: eqcm .15s ease-out forwards
}

.NWQO.KHb3 {
    animation: nnLa .15s ease-in forwards
}

@keyframes eqcm {
    0% {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes nnLa {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(.9)
    }
}

.KZJd .content {
    padding: 0
}

.jupe {
    width: 700px;
    border-radius: 36px;
    padding: 24px
}

@media(max-width: 1173px) {
    .jupe {
        width:100%;
        padding: 16px;
        border-radius: 0
    }
}

.fjFm {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.SJBt {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color)
}

.zQDp {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary)
}

.HI8m {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

.RCjH {
    flex: 1
}

.acAw {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border-color)
}

.kFOA {
    display: flex;
    gap: 4px
}

.vU6U {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s ease
}

.vU6U:hover {
    background: var(--bg-secondary);
    color: var(--text-primary)
}

.UFde {
    display: flex;
    align-items: center;
    gap: 8px
}

.ePkw {
    font-size: 13px;
    color: var(--text-secondary)
}

.ePkw.zNVX {
    color: var(--color-error)
}

.napJ .content {
    padding: 0
}

.FztL {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden
}

@media(max-width: 1173px) {
    .FztL {
        max-width:100%;
        max-height: 100%;
        border-radius: 0
    }
}

.GOHo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0
}

.OID7 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary)
}

.TWMi {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

@media(min-width: 1174px) {
    .TWMi {
        overflow-y:auto
    }
}

.OxbA .content {
    padding: 0
}

.datX {
    width: 700px;
    height: 100vh;
    border-radius: 36px;
    padding: 24px;
    overflow-y: auto
}

@media(max-width: 1173px) {
    .datX {
        width:100%;
        padding: 16px;
        border-radius: 0
    }
}

.m4wM {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--text-primary)
}

.j4JS .content {
    padding: 0
}

.SbRx {
    width: 700px;
    border-radius: 36px;
    padding: 24px
}

@media(max-width: 1173px) {
    .SbRx {
        width:100%;
        padding: 16px;
        border-radius: 0
    }
}

.VUOS {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.sFeW {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

.Gx3D {
    flex: 1
}

.poAn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border-color)
}

.SE2b {
    display: flex;
    gap: 4px
}

.uLW9 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s ease
}

.uLW9:hover {
    background: var(--bg-secondary);
    color: var(--text-primary)
}

.eGnh {
    display: flex;
    align-items: center;
    gap: 12px
}

.OGOh {
    font-size: 13px;
    color: var(--text-secondary)
}

.OGOh.hwGv {
    color: var(--color-error)
}

.PnrU {
    min-width: 360px;
    max-width: 480px
}

.w24v {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

@media(max-width: 1173px) {
    .w24v {
        padding:20px;
        gap: 16px
    }
}

.V619 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-align: center
}

@media(max-width: 1173px) {
    .V619 {
        font-size:18px
    }
}

.e6Y1 {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

.CnA6 {
    flex: 1;
    min-height: 60px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color .2s ease
}

.CnA6::placeholder {
    color: var(--text-secondary)
}

.CnA6:focus {
    outline: none;
    border-color: var(--accent-primary)
}

@media(max-width: 1173px) {
    .CnA6 {
        font-size:13px;
        padding: 10px
    }
}

.Jaiw {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary)
}

.zsVf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px
}

.OkeH {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.znlA {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 4px
}

.NQF7 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--block-bg);
    border: 3px solid var(--bg-primary)
}

.NQF7.FIwq {
    background: #ef4444
}

.NQF7.wmdx {
    background: #22c55e
}

.NQF7.Uhcx {
    background: #4d8eff
}

.iXuj {
    position: fixed;
    bottom: 36px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    max-width: 380px;
    filter: drop-shadow(0 0 100px var(--bg-primary))
}

.JIRi {
    width: 100%
}

.VOpa {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%
}

.ja8j {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    background: var(--block-bg);
    border-radius: 36px;
    animation: TwYk .3s ease;
    min-width: 280px
}

.ja8j .kZxH {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    overflow: hidden
}

.ja8j .kZxH .CZGA {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    overflow: hidden
}

.ja8j .kZxH .CZGA .EU0L {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ja8j .kZxH .CZGA .fqIK {
    color: var(--text-secondary)
}

.ja8j .kZxH .CZGA .VOGo {
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.ja8j.s6Lf {
    cursor: grabbing
}

.ja8j.jMkq {
    border-left: 3px solid var(--accent-color)
}

.ja8j.eHCM {
    border-left: 3px solid #22c55e
}

.ja8j.UMKb {
    border-left: 3px solid #f59e0b
}

.ja8j.el7O {
    border-left: 3px solid #ef4444
}

@keyframes TwYk {
    0% {
        opacity: 0;
        transform: translate(100%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

.VOGo {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4
}

.KXKI {
    flex-shrink: 0;
    padding: 8px;
    color: var(--text-secondary)
}

.KXKI:hover {
    color: var(--text-primary)
}

@media(max-width: 480px) {
    .iXuj {
        inset:24px 16px auto;
        max-width: none
    }

    .iXuj.SZgD {
        top: 58px
    }

    .ja8j {
        min-width: auto;
        padding: 12px 14px;
        gap: 12px;
        border-radius: 24px;
        animation: Mjob .3s ease
    }

    .ja8j .kZxH {
        gap: 12px
    }

    .ja8j .kZxH .CZGA {
        gap: 4px
    }

    .KXKI {
        display: none
    }

    @keyframes Mjob {
        0% {
            opacity: 0;
            transform: translateY(-100%)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }
}

.KVKw {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translate(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 400px;
    pointer-events: none
}

.XyFk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--block-bg);
    border-radius: 12px;
    filter: drop-shadow(0px 0px 64px var(--bg-primary));
    animation: rGzB .3s ease;
    min-width: 240px;
    pointer-events: auto
}

.XyFk.tl3r {
    animation: ttFy .3s ease forwards
}

.XyFk.e58O {
    background: #22c55e
}

.XyFk.e58O .ecj0,.XyFk.e58O .pI9W {
    color: #fff
}

.XyFk.e58O .NDd9 {
    color: #ffffffb3
}

.XyFk.e58O .NDd9:hover {
    background: #ffffff1a;
    color: #fff
}

.XyFk.BLAi {
    background: #ef4444
}

.XyFk.BLAi .ecj0,.XyFk.BLAi .pI9W {
    color: #fff
}

.XyFk.BLAi .NDd9 {
    color: #ffffffb3
}

.XyFk.BLAi .NDd9:hover {
    background: #ffffff1a;
    color: #fff
}

.ecj0 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px
}

.pI9W {
    flex: 1;
    font-size: 14px;
    line-height: 1.4
}

.NDd9 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s ease,color .2s ease
}

@keyframes rGzB {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes ttFy {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10px)
    }
}

@media(max-width: 480px) {
    .KVKw {
        left:16px;
        right: 16px;
        bottom: 80px;
        transform: none;
        max-width: none
    }

    .XyFk {
        min-width: auto;
        width: 100%
    }
}

.dUmz {
    position: relative;
    display: flex;
    border-radius: 9999px;
    padding: var(--padding)
}

@media(max-width: 1173px) {
    .dUmz:before {
        content:"";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
    }
}

.WDmG {
    position: absolute;
    top: var(--padding);
    bottom: var(--padding);
    background: var(--tab-active-bg);
    border-radius: 9999px;
    transition: all .2s cubic-bezier(.5,0,0,1)
}

.ZHR4 {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: color .2s ease
}

.tMC6 {
    color: var(--text-primary)
}

.Ly9I {
    min-height: 100vh;
    display: flex;
    justify-content: center
}

.yKcj {
    position: relative;
    width: 100%;
    max-width: var(--content-max-width);
    display: flex;
    flex-direction: column
}

@media(max-width: 1173px) {
    .yKcj {
        max-width:100%
    }
}

.MvLi {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 96px
}

@media(min-width: 1174px) {
    .MvLi {
        padding-top:48px;
        padding-bottom: 48px
    }
}

.hUhR {
    width: 100%
}

.RQUX {
    position: relative;
    width: 100%
}

.W1cR {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform;
    border-bottom: 1px solid var(--border-color)
}

@media(min-width: 1174px) {
    .W1cR {
        border-bottom:none
    }
}

.eeG5 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 15px
}

.CpDR {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media(max-width: 1173px) {
    .CpDR {
        gap:0
    }
}

.AQ4z {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 24px;
    background-color: var(--block-bg);
    border-radius: 36px;
    overflow: hidden
}

@media(max-width: 1173px) {
    .AQ4z {
        display:none
    }
}

.bYHr {
    position: sticky;
    top: 24px;
    z-index: 1
}

@media(max-width: 1173px) {
    .bYHr {
        top:0;
        padding: 6px 16px 12px;
        display: flex;
        align-items: center;
        gap: 8px
    }

    .bYHr>:first-child {
        flex: 1;
        min-width: 0
    }
}

.uTne {
    display: none
}

@media(max-width: 1173px) {
    .uTne {
        position:relative;
        flex-shrink: 0;
        width: 45px;
        height: 45px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background: var(--glass-bg);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        color: var(--text-secondary);
        text-decoration: none;
        cursor: pointer;
        border: none;
        transition: background .2s ease
    }

    .uTne:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(to bottom,#ffffff40,#ffffff0d);
        -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none
    }
}

.V2bL,.qgYW {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 15px
}

.qgYW {
    padding: 20px
}

.U9Ky {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 20px;
    text-align: center
}

.U9Ky p {
    color: var(--text-secondary);
    margin: 0
}

.U9Ky button {
    padding: 10px 20px;
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px
}

.U9Ky button:hover {
    opacity: .9
}

.tMpY {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
    color: var(--text-secondary);
    font-size: 15px
}

.NLRq:not(:last-of-type) {
    margin-bottom: 20px;
}
/* Гарантирует, что футер всегда внизу и не наезжает */
.wWUc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Медиа-блок внутри поста — нормальный поток */
.post-media {
    width: 100%;
    clear: both;
}

/* Футер всегда после контента */
.eA5A {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

/* Кнопки действий не должны разрываться */
.LMqE {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Блок просмотров — справа, без сдвигов */
.nj3o {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Галерея — адаптивная, без выпадения */
.image-gallery {
    display: grid;
    gap: 4px;
    width: 100%;
}
.image-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Видео-обёртка */
.video-wrapper {
    width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.post-video {
    width: 100%;
    display: block;
    max-height: 70vh;
    object-fit: contain;
}
.expand-video {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Модальные окна */
.close-modal, .close-lightbox {
    position: absolute;
    top: -30px;
    right: 0;
    background: none;
    border: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}
.lightbox {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}
.lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}
.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    border: none;
    font-size: 32px;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
}
.prev-btn { left: -50px; }
.next-btn { right: -50px; }
.lightbox-counter {
    text-align: center;
    color: white;
    margin-top: 8px;
}
.lightbox-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.lightbox-overlay.active {
    opacity: 1;
}
.lightbox-img {
    transition: opacity 0.15s ease;
}
/* ---------- Превью вложений (форма создания поста) ---------- */
.attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.attachment-item {
    position: relative;
    width: 80px;               /* жёсткая ширина */
    height: 80px;              /* жёсткая высота */
    flex-shrink: 0;            /* запрет сжатия */
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
}

.attachment-item img.preview-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* заполнение без искажения */
    display: block;
}

.video-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: #1da1f2;
    color: white;
    width: 100%;
    height: 100%;
}

/* кружок загрузки */
.progress-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;   /* центрирование без transform */
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #1da1f2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.attachment-item.uploaded .progress-circle {
    display: none;
}

.remove-attach {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ---------- Видео в посте ---------- */
.video-wrapper {
    position: relative;
    width: 100%;
    background: transparent;       /* без чёрного фона */
    border-radius: 12px;           /* закруглённые края */
    overflow: hidden;
    cursor: pointer;
}

.post-video {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: cover;            /* заполнение без полей */
    border-radius: 12px;          /* наследует скругление */
}

/* Прогресс-бар (белый) */
.video-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255,255,255,0.2);
    z-index: 2;
    pointer-events: none;
}
.video-progress-filled {
    height: 100%;
    background: #ffffff;          /* белый вместо синего */
    width: 0%;
    transition: width 0.1s linear;
}

/* Кнопка звука */
.sound-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    padding: 0;
    color: white;
}
.sound-toggle svg {
    width: 20px;
    height: 20px;
}

/* ---------- Модальное окно видео ---------- */
.video-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal {
    position: relative;
    width: 90vw;
    max-width: 900px;
    background: transparent;      /* убрали чёрный фон */
    border-radius: 12px;
    overflow: hidden;
}

.full-video {
    display: block;
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    background: transparent;
    border-radius: 12px;
}

/* Прогресс-бар в модалке */
.modal-progress {
    height: 4px;
    background: rgba(255,255,255,0.2);
}

.video-wrapper {
    position: relative;
    overflow: hidden;
}

.video-progress {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.video-progress-filled {
    height: 100%;
    background: white;
    width: 0%;
    transition: width 0.1s linear;
}
/* Пример: убираем отступы, чтобы окно приложения было без полос */
body.pwa-mode {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
}
/* Настройка навигации для PWA */
body.pwa-mode .bottom-nav {
  /* прозрачный фон, если нужно */
}
/* Для правильного позиционирования блока историй */
.TWZf .iOAx {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 16px;
}
.stories-container {
    flex-shrink: 0;
    margin-top: auto;
}
/* ==========================================
   ПОЛНЫЙ CSS ДЛЯ МОДАЛКИ РЕДАКТИРОВАНИЯ И ПОПАПА
   ========================================== */

/* ---------- АНИМАЦИИ ---------- */
@keyframes CZFl {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ---------- ОВЕРЛЕЙ (K9L7) ---------- */
.K9L7 {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: CZFl 0.2s ease;
}

/* ---------- КОНТЕЙНЕР МОДАЛКИ ---------- */
.T0yM {
    background: var(--block-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1174px) {
    .T0yM {
        border-radius: 16px;
    }
}

.tPbJ {
    width: 700px;
    border-radius: 36px;
    padding: 0;
    /* паддинг убран, т.к. внутренние элементы задают отступы */
}

@media (max-width: 1173px) {
    .tPbJ {
        width: 100%;
        border-radius: 0;
    }
}

/* ---------- ШАПКА МОДАЛКИ ---------- */
.Iogu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
}

.yMr9 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.i81O {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease, background 0.2s ease;
}

.i81O:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ---------- ТЕКСТОВОЕ ПОЛЕ (I Q V N) ---------- */
.iQVN {
    width: calc(100% - 32px);
    margin: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    resize: vertical;
}

.iQVN::placeholder {
    color: var(--text-secondary);
}

.iQVN:focus {
    border-color: var(--accent-primary, #3b82f6);
}

/* ---------- ПАНЕЛЬ ИНСТРУМЕНТОВ (lpVD, lQUF, Irq2, gAKp) ---------- */
.lpVD {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

.lQUF {
    display: flex;
    gap: 4px;
    align-items: center;
}

.Irq2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Кнопка эмодзи / инструментов */
.gAKp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.gAKp:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* ---------- КНОПКИ (ОСНОВНЫЕ И ВТОРИЧНЫЕ) ---------- */
.JtQq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.JtQq:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.JtQq:not(:disabled):hover {
    opacity: 0.9;
}

/* Основная кнопка (чёрная / белая) */
.HU2x {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

/* Вторичная кнопка (серая) */
.dpKM {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Размеры кнопок */
.l1eC {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 16px;
}

@media (max-width: 1173px) {
    .l1eC {
        height: 28px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 14px;
    }
}

.rJC9 {
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 20px;
}

@media (max-width: 1173px) {
    .rJC9 {
        height: 36px;
        padding: 0 16px;
        font-size: 13px;
        border-radius: 18px;
    }
}

.ZZJG {
    height: 48px;
    padding: 0 24px;
    font-size: 16px;
    border-radius: 24px;
}

@media (max-width: 1173px) {
    .ZZJG {
        height: 40px;
        padding: 0 18px;
        font-size: 14px;
        border-radius: 20px;
    }
}

/* ---------- ВЫПАДАЮЩЕЕ МЕНЮ (ПОПАП) ---------- */
.popup-menu,
.poput-menu {
    position: absolute;
    background: var(--block-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    padding: 8px;
    min-width: 220px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.2s, transform 0.2s;
}

.popup-menu ul,
.poput-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.popup-menu button,
.poput-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    text-align: left;
    color: var(--text-primary);
    transition: background 0.15s;
}

.popup-menu button:hover,
.poput-menu button:hover {
    background: var(--bg-hover);
}

.popup-menu .danger,
.poput-menu .danger {
    color: #ef4444;
}

.popup-menu .danger:hover,
.poput-menu .danger:hover {
    background: #fef2f2;
}

/* Разделитель в попапе */
.popup-menu hr,
.poput-menu hr {
    height: 1px;
    background: var(--border-color);
    margin: 4px 8px;
    border: none;
}

/* ---------- ТОСТ-УВЕДОМЛЕНИЯ (showToast) ---------- */
.toast-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* ---------- ДОПОЛНИТЕЛЬНО: КНОПКА МЕНЮ (если её нет) ---------- */
.GX6x.Nboe,
.post-menu-btn,
[data-action="menu"],
.menu-trigger {
    cursor: pointer;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.GX6x.Nboe:hover,
.post-menu-btn:hover,
[data-action="menu"]:hover,
.menu-trigger:hover {
    color: var(--text-primary);
}