@keyframes vv-doubletap-heart-pop {
    0% {
        opacity: 0;
        transform: translate(-50%,-50%) scale(.45)
    }

    20% {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1.1)
    }

    to {
        opacity: 0;
        transform: translate(-50%,-50%) scale(1)
    }
}

@keyframes vvBtnBounce {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.08)
    }
}

@keyframes vvLikeCountPop {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.16)
    }
}

@keyframes vvDownloadFlash {
    0%,to {
        filter: brightness(1)
    }

    25% {
        filter: brightness(1.2)
    }
}

@keyframes vvSkeleton {
    0% {
        background-position: 200%0
    }

    to {
        background-position: -200%0
    }
}

@keyframes vv-skeleton-shimmer {
    0% {
        background-position: 100%0
    }

    to {
        background-position: -100%0
    }
}

@keyframes vvChatMessageIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.985)
    }

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

:root {
    --bg: #0b1020;
    --card: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.08);
    --primary: var(--brand-primary);
    --primary2: var(--brand-primary-dark);
    --text: #e5e7eb;
    --muted: #94a3b8
}

body {
    background: radial-gradient(circle at top,#16213f,var(--bg) 35%);
    color: var(--text);
    min-height: 100vh
}

.vv-nav {
    background: rgba(11,16,32,.92);
    border-bottom: 1px solid var(--border)
}

.card,.vv-card,.vv-hero {
    border: 1px solid var(--border)
}

.card,.vv-card {
    background: var(--card);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,.22);
    color: var(--text)
}

.vv-hero {
    padding: 2.5rem;
    border-radius: 24px;
    background: linear-gradient(135deg,rgba(37,99,235,.22),rgba(16,185,129,.16))
}

.vv-btn {
    background: linear-gradient(135deg,var(--primary),var(--primary2));
    border: 0
}

.form-control,.form-control:focus,.form-select {
    background: rgba(255,255,255,.04);
    border-color: var(--border);
    color: #fff
}

.form-control::placeholder {
    color: #9ca3af
}

.album-cover img,.album-cover video,.media-tile img,.media-tile video {
    border-radius: 16px;
    background: #020617
}

.stat-box {
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border)
}

.text-muted {
    color: var(--muted)!important
}

.comment-box {
    background: rgba(255,255,255,.03);
    border-radius: 12px;
    padding: .8rem 1rem
}

.upload-dropzone {
    border: 2px dashed rgba(255,255,255,.22);
    border-radius: 18px;
    padding: 2rem;
    text-align: center;
    background: rgba(255,255,255,.02);
    transition: .2s ease;
    cursor: pointer;
	width:100%
}

.upload-dropzone.dragover {
    border-color: #60a5fa;
    background: rgba(59,130,246,.12)
}

.avatar-lg {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.16)
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: #e5e7eb;
    --bs-table-border-color: rgba(255,255,255,.08)
}

a {
    text-decoration: none
}

.album-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start
}

.codebox {
    background: #020617;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 1rem;
    color: #cbd5e1;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    white-space: pre-wrap
}

.cover-picker input[type=radio] {
    display: none
}

.cover-picker label {
    display: block;
    cursor: pointer
}

.cover-picker input[type=radio]:checked+label {
    outline: 3px solid #60a5fa;
    border-radius: 16px
}

.page-link {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.08);
    color: #fff
}

.page-item.active .page-link {
    background: #2563eb;
    border-color: #2563eb
}

.upload-dropzone {
    position: relative
}

.vv-native-picker {
    position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.vv-file-trigger {
    position: relative;
    z-index: 2
}

.vv-file-preview .list-group-item {
    background: rgba(255,255,255,.03)
}

.vv-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999
}

.vv-lightbox.open {
    display: flex
}

.vv-lightbox-inner {
    width: min(1200px,96vw);
    height: min(92vh,920px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem
}

.vv-lightbox-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

.vv-lightbox-stage {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.vv-lightbox-stage img,.vv-lightbox-stage video {
    max-height: 100%;
    background: #020617
}

.vv-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

.vv-lightbox-prev {
    left: 1rem
}

.vv-lightbox-next {
    right: 1rem
}

.vv-lightbox-strip {
    display: flex;
    gap: .75rem;
    overflow: auto;
    padding-bottom: .25rem
}

.vv-lightbox-thumb {
    min-width: 82px;
    width: 82px;
    height: 82px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    background: rgba(255,255,255,.05);
    padding: 0;
    cursor: pointer
}

.vv-lightbox-thumb.active {
    border-color: #60a5fa
}

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

.gallery-grid-item {
    cursor: pointer
}

@media (max-width:768px) {
    .vv-lightbox-inner {
        height: min(94vh,920px)
    }

    .vv-lightbox-thumb {
        min-width: 64px;
        width: 64px;
        height: 64px
    }
}

.vv-lightbox-inner-social,.vv-lightbox-main {
    display: grid;
    gap: 1rem
}

.vv-lightbox-main {
    grid-template-rows: auto 1fr auto
}

.vv-lightbox-side {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 1rem;
    display: grid;
    grid-template-rows: auto auto 1fr auto
}

.vv-lightbox-comments {
    overflow: auto;
    display: grid;
    padding-right: .25rem
}

.vv-lightbox-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center
}

.vv-lightbox-side .form-control {
    min-height: 90px
}

@media (max-width:992px) {
    .vv-lightbox-inner-social {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0,1fr);
        height: min(95vh,980px)
    }

    .vv-lightbox-side {
        max-height: 38vh
    }
}

select.form-control,select.form-select {
    color: #fff;
    background-color: rgba(255,255,255,.04)
}

select option,select.form-control option,select.form-select option {
    color: #111827;
    background: #fff
}

select optgroup,select.form-select optgroup {
    color: #111827;
    background: #f3f4f6
}

.vv-lightbox-stage {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none
}

.vv-lightbox-stage .vv-lightbox-media {
    pointer-events: auto
}

.vv-lightbox {
    padding: .75rem
}

.vv-lightbox-inner-social {
    width: min(1280px,96vw);
    height: min(90vh,900px);
    grid-template-columns: minmax(0,1fr) 320px;
    align-items: stretch
}

.vv-lightbox-main {
    min-width: 0;
    min-height: 0
}

.vv-lightbox-stage {
    min-height: 0;
    height: 100%;
    max-height: calc(90vh - 180px);
    overflow: hidden
}

.vv-lightbox-stage .vv-lightbox-media,.vv-lightbox-stage img,.vv-lightbox-stage video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(90vh - 220px);
    object-fit: contain;
    margin: 0 auto
}

.vv-lightbox-side {
    min-height: 0;
    max-height: calc(90vh - 24px)
}

@media (max-width:992px) {
    .vv-lightbox-inner-social {
        width: min(100vw - 1rem,980px);
        height: min(94vh,980px);
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0,1fr) minmax(240px,34vh)
    }

    .vv-lightbox-stage {
        max-height: calc(60vh - 60px)
    }

    .vv-lightbox-stage .vv-lightbox-media,.vv-lightbox-stage img,.vv-lightbox-stage video {
        max-height: calc(60vh - 90px)
    }

    .vv-lightbox-side {
        max-height: 34vh
    }
}

@media (max-width:576px) {
    .vv-lightbox {
        padding: .5rem
    }

    .vv-lightbox-inner-social {
        width: calc(100vw - 1rem);
        height: calc(100vh - 1rem);
        grid-template-rows: minmax(0,1fr) minmax(230px,38vh);
        gap: .75rem
    }

    .vv-lightbox-top {
        gap: .5rem
    }

    .vv-lightbox-stage {
        max-height: calc(56vh - 50px);
        border-radius: 14px
    }

    .vv-lightbox-stage .vv-lightbox-media,.vv-lightbox-stage img,.vv-lightbox-stage video {
        max-height: calc(56vh - 80px)
    }

    .vv-lightbox-side {
        border-radius: 14px;
        padding: .75rem;
        max-height: 38vh
    }

    .vv-lightbox-thumb {
        min-width: 58px;
        width: 58px;
        height: 58px
    }
}

.row.g-4>.col-md-6.col-xl-4 .card,.row.g-4>.col-md-6.col-xl-4 .vv-card {
    border-radius: 16px
}

.album-cover img,.album-cover video,.media-tile img,.media-tile video {
    aspect-ratio: 1/1;
    max-height: 240px;
    object-fit: cover
}

@media (min-width:1200px) {
    .album-cover img,.album-cover video,.media-tile img,.media-tile video {
        max-height: 220px
    }
}

.vv-card.p-3.h-100 {
    padding: .85rem!important
}

.vv-card .pt-3 {
    padding-top: .75rem!important
}

.fw-semibold.fs-5 {
    font-size: 1rem!important
}

.small.text-muted.mb-3,.text-muted.small.mb-3 {
    margin-bottom: .6rem!important
}

@media (min-width:1400px) {
    .row.g-4>.col-md-6.col-xl-4 {
        width: 25%
    }

    .album-cover img,.album-cover video,.media-tile img,.media-tile video {
        max-height: 200px
    }
}

@media (min-width:1200px) and (max-width:1399.98px) {
    .album-cover img,.album-cover video,.media-tile img,.media-tile video {
        max-height: 210px
    }
}

@media (min-width:1200px) {
    .row.g-4>.col-md-6.col-xl-4 .fw-semibold.fs-5,.row.g-4>.col-md-6.col-xl-4 .fw-semibold.fs-5 a {
        line-height: 1.25
    }

    .row.g-4>.col-md-6.col-xl-4 .small.text-muted,.row.g-4>.col-md-6.col-xl-4 .text-muted.small {
        font-size: .82rem
    }
}

.media-report-box .form-control {
    min-width: 0
}

.album-cover,.media-tile {
    background: rgba(255,255,255,.03);
    border-radius: 14px;
    overflow: hidden
}

.album-cover img,.album-cover video,.media-tile img,.media-tile video {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: auto;
    transform: translateZ(0)
}

img[loading=lazy] {
    content-visibility: auto
}

.comment-box,.stat-box,.vv-card {
    contain: layout paint
}

.row.g-4 {
    --bs-gutter-y: 1.1rem
}

.vv-upload-dropzone {
    min-height: 220px;
	position: relative;
    cursor: pointer;
}

.vv-upload-progress-wrap .progress {
    height: 16px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden
}

.vv-progress-bar {
    background: linear-gradient(135deg,var(--primary),var(--primary2));
    transition: width .2s ease
}

.vv-upload-item,.vv-upload-list {
    display: grid;
    gap: .75rem
}

.vv-upload-item {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: .75rem
}

.vv-upload-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: #020617;
    display: flex;
    align-items: center;
    justify-content: center
}

.vv-upload-icon {
    font-size: 1.3rem;
    color: #cbd5e1
}

.vv-upload-meta {
    min-width: 0
}

.vv-upload-feedback {
    border-radius: 14px
}

.vv-upload-dropzone .btn,.vv-upload-dropzone .vv-file-trigger,.vv-upload-list .btn {
    position: relative
}

.vv-upload-section-title {
    font-size: .9rem;
    color: #cbd5e1;
    font-weight: 700
}

.vv-upload-item-failed {
    border-color: rgba(251,191,36,.35);
    background: rgba(251,191,36,.06)
}

.vv-upload-dropzone .btn,.vv-upload-dropzone .vv-file-trigger,.vv-upload-list .btn {
    z-index: 3
}

#vvFilePreview img {
    display: block
}

.vv-admin-badge {
    font-size: .72rem;
    line-height: 1;
    padding: .35rem .5rem
}

.vv-admin-media-card {
    border-radius: 16px
}

.vv-admin-media-thumb {
    overflow: hidden;
    background: #020617
}

.vv-admin-media-thumb img,.vv-admin-media-thumb video,.vv-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.vv-admin-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.86);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem
}

.vv-admin-lightbox.open {
    display: flex
}

.vv-admin-lightbox-dialog {
    width: min(1000px,96vw);
    max-height: 92vh;
    background: rgba(11,16,32,.96);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(0,0,0,.35)
}

.vv-admin-lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    overflow: hidden
}

.vv-admin-lightbox-stage img,.vv-admin-lightbox-stage video {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    background: #020617
}

.vv-admin-media-card {
    padding: .4rem!important
}

.vv-admin-media-thumb {
    aspect-ratio: 1/1;
    border-radius: 10px
}

.vv-admin-media-card .small {
    font-size: .72rem
}

.vv-admin-media-card .btn {
    padding: .2rem .35rem;
    font-size: .72rem
}

.vv-admin-media-card .form-check-label {
    font-size: .72rem
}

.vv-admin-lightbox-stage-wrap {
    position: relative
}

.vv-admin-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

.vv-admin-lightbox-prev {
    left: .75rem
}

.vv-admin-lightbox-next {
    right: .75rem
}

[data-media-card] {
    transition: transform .15s ease,border-color .15s ease
}

[data-media-card]:hover {
    transform: translateY(-1px)
}

.vv-help-text {
    opacity: 1
}

.form-text.vv-help-text,.vv-help-text {
    color: #cbd5e1!important
}

.form-control[disabled],.form-control[readonly] {
    color: #e5e7eb!important;
    -webkit-text-fill-color: #e5e7eb;
    opacity: 1
}

.vv-album-compact {
    border-radius: 14px
}

.vv-album-compact .album-cover img {
    aspect-ratio: 1/1;
    object-fit: cover
}

.vv-album-compact .fw-semibold {
    font-size: .9rem
}

.vv-album-compact .small {
    font-size: .72rem
}

.vv-album-count-badge {
    position: absolute;
    right: .4rem;
    bottom: .4rem;
    z-index: 2
}

.vv-album-hover {
    overflow: hidden;
    border-radius: 12px
}

.vv-album-hover img,.vv-album-hover video,.vv-media-compact img,.vv-media-compact video {
    transition: transform .22s ease,filter .22s ease
}

.vv-album-hover:hover img,.vv-album-hover:hover video,.vv-media-compact:hover img,.vv-media-compact:hover video {
    transform: scale(1.035);
    filter: saturate(1.04)
}

.vv-album-compact {
    transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease
}

.vv-album-compact:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 14px 28px rgba(0,0,0,.22)
}

.vv-album-count-badge,.vv-album-like-badge {
    background: rgba(2,6,23,.82)
}

.vv-album-badges {
    flex-direction: row;
    max-width: calc(100% - .8rem)
}

.vv-album-cover-wrap {
    position: relative
}

.vv-album-badges {
    position: absolute;
    left: .4rem;
    right: .4rem;
    bottom: .4rem;
    z-index: 2;
    display: flex!important;
    align-items: center;
    justify-content: space-between!important;
    gap: .4rem;
    flex-wrap: nowrap!important;
    pointer-events: none
}

.vv-album-count-badge,.vv-album-like-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(2,6,23,.86);
    border: 1px solid rgba(255,255,255,.1);
    color: #e5e7eb;
    border-radius: 999px;
    padding: .18rem .42rem;
    font-size: .66rem;
    line-height: 1.1;
    backdrop-filter: blur(6px)
}

.vv-album-like-badge {
    justify-content: flex-start
}

.vv-album-count-badge {
    justify-content: flex-end
}

.vv-album-media-card {
    border-radius: 14px
}

.vv-album-media-card .media-tile,.vv-media-compact {
    border-radius: 12px
}

.vv-album-media-card .small {
    font-size: .72rem
}

.vv-media-compact {
    position: relative;
    overflow: hidden
}

.vv-media-compact img,.vv-media-compact video {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block
}

.vv-media-badges {
    position: absolute;
    left: .4rem;
    right: .4rem;
    bottom: .4rem;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: .4rem;
    pointer-events: none
}

.vv-media-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: rgba(2,6,23,.86);
    border: 1px solid rgba(255,255,255,.1);
    color: #e5e7eb;
    border-radius: 999px;
    padding: .18rem .45rem;
    font-size: .68rem;
    line-height: 1.2;
    backdrop-filter: blur(6px)
}

.vv-report-box {
    max-width: 380px
}

.vv-report-toggle.btn-link {
    font-size: .8rem
}

.vv-contributor-avatar {
    width: 56px!important;
    height: 56px!important;
    min-width: 56px!important;
    min-height: 56px!important;
    border-radius: 50%!important;
    object-fit: cover;
    flex-shrink: 0
}

.vv-user-dropdown {
    position: relative
}

@media (max-width:991.98px) {
    .vv-nav-user-wrap {
        width: 100%;
        display: block!important;
        margin-top: 1rem
    }

    .vv-user-dropdown {
        width: 100%;
        display: block
    }

    .vv-user-toggle {
        width: 100%;
        justify-content: flex-start;
        padding: .65rem .75rem;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        background: rgba(255,255,255,.03)
    }

    .vv-user-menu {
        position: static!important;
        transform: none!important;
        inset: auto!important;
        float: none;
        width: 100%;
        margin-top: .5rem!important;
        border-radius: 14px;
        box-shadow: none
    }

    .navbar-collapse .dropdown-menu {
        min-width: 0
    }
}

@media (max-width:991.98px) {
    .vv-upload-dropzone {
        touch-action: manipulation
    }
}

.vv-upload-dropzone {
    cursor: pointer
}

.vv-upload-dropzone .vv-file-label {
    font-weight: 600
}

.vv-admin-media-card-processing {
    opacity: .45;
    pointer-events: none
}

.vv-admin-name {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fbbf24!important;
    font-weight: 700
}

.vv-admin-name-icon {
    color: #f59e0b;
    font-size: .85em
}

a .vv-admin-name,a.vv-admin-name {
    color: #fbbf24!important
}

.text-muted .vv-admin-name {
    color: #fcd34d!important
}

.vv-editor-shell {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,.02)
}

.vv-editor-toolbar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .75rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03)
}

.vv-html-editor {
    min-height: 320px;
    padding: 1rem;
    outline: 0;
    color: #e5e7eb
}

.vv-html-editor h2,.vv-static-page-content h2 {
    font-size: 1.45rem;
    margin: 1.25rem 0 .75rem
}

.vv-html-editor h3,.vv-static-page-content h3 {
    font-size: 1.15rem;
    margin: 1rem 0 .6rem
}

.vv-html-editor p,.vv-static-page-content p {
    margin: 0 0 1rem
}

.vv-html-editor ol,.vv-html-editor ul,.vv-static-page-content ol,.vv-static-page-content ul {
    margin: 0 0 1rem 1.25rem
}

.vv-static-page-content {
    color: #cbd5e1
}

.vv-profile-social:hover,.vv-static-page-content a {
    color: #93c5fd
}

.vv-profile-social {
    color: #e5e7eb
}

.vv-media-main-fit {
    max-height: calc(100vh - 180px);
    object-fit: contain;
    width: 100%;
    background: #020617
}

.vv-media-action-row {
    flex-wrap: nowrap
}

.vv-media-action-btn {
    min-height: 44px;
    border-radius: 14px;
    font-weight: 600
}

@media (max-width:575.98px) {
    .vv-media-action-row {
        flex-wrap: wrap
    }
}

.vv-lightbox-icon-btn {
    min-height: 42px;
    font-weight: 700
}

.vv-lightbox-meta,.vv-lightbox-meta .js-lightbox-open-page {
    display: block
}

@media (max-width:991.98px) {
    .vv-lightbox-actions-row {
        flex-wrap: wrap
    }
}

.vv-lightbox-actions-row {
    justify-content: flex-start
}

.vv-lightbox-like-btn {
    min-height: 42px;
    font-weight: 700
}

.vv-lightbox-icon-btn,.vv-lightbox-like-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px
}

.vv-lightbox-side {
    overflow: auto
}

.vv-lightbox-actions-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap
}

.vv-lightbox-like-btn {
    min-width: 66px
}

.vv-lightbox-icon-btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0
}

.vv-user-notifications-badge {
    font-size: .72rem;
    line-height: 1;
    padding: .35rem .5rem;
    min-width: 1.5rem;
    text-align: center
}

@media (max-width:991.98px) {
    .album-lightbox,.vv-album-lightbox,.vv-lightbox,.vv-lightbox-overlay,[data-lightbox-overlay] {
        align-items: flex-start!important;
        overflow-y: auto!important;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 0 2rem!important
    }

    .album-lightbox-content,.album-lightbox-dialog,.vv-album-lightbox-content,.vv-album-lightbox-dialog,.vv-lightbox-content,.vv-lightbox-dialog,.vv-lightbox-grid,.vv-lightbox-inner,.vv-lightbox-layout,.vv-lightbox-shell,[data-lightbox-dialog] {
        height: auto!important;
        max-height: none!important;
        min-height: 0!important
    }

    .vv-lightbox-comments,.vv-lightbox-meta,.vv-lightbox-panel,.vv-lightbox-side,[data-lightbox-side] {
        max-height: none!important;
        overflow: visible!important
    }

    body.lightbox-open,body.vv-lightbox-open {
        overflow: hidden
    }
}

.album-lightbox-header,.js-lightbox-counter,.js-lightbox-title,.vv-lightbox-header,.vv-lightbox-titlebar,.vv-lightbox-top {
    display: none!important
}

.vv-lightbox-image-wrap,.vv-lightbox-media,.vv-lightbox-stage {
    position: relative
}

.vv-lightbox-close-overlay {
    position: absolute!important;
    top: 14px;
    right: 14px;
    z-index: 25;
    width: 46px;
    min-width: 46px;
    height: 46px;
    border-radius: 999px!important;
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    padding: 0!important;
    backdrop-filter: blur(8px);
    background: rgba(15,23,42,.58)!important;
    border: 1px solid rgba(255,255,255,.8)!important;
    box-shadow: 0 8px 24px rgba(0,0,0,.25)
}

.vv-lightbox-close-overlay .fa-xmark {
    font-size: 1.1rem
}

@media (max-width:991.98px) {
    .vv-lightbox-close-overlay {
        top: 10px;
        right: 10px;
        width: 42px;
        min-width: 42px;
        height: 42px
    }
}

.vv-lightbox-main {
    position: relative
}

.vv-lightbox-counter,.vv-lightbox-title {
    display: none!important
}

.vv-lightbox-comments {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 0
}

.vv-lightbox-comments .comment-box,.vv-lightbox-comments .vv-comment-item {
    position: relative;
    z-index: 1
}

.js-lightbox-comment-form {
    display: block;
    margin-top: 1rem;
    position: relative;
    z-index: 2
}

.js-lightbox-comment-input {
    min-height: 96px;
    resize: vertical
}

.vv-lightbox-side {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

@media (max-width:991.98px) {
    .vv-lightbox-inner-social {
        display: flex!important;
        flex-direction: column!important;
        gap: 1rem!important
    }

    .vv-lightbox-main,.vv-lightbox-side {
        width: 100%!important;
        max-width: 100%!important
    }

    .vv-lightbox-side {
        overflow: visible!important;
        padding-bottom: 2rem!important
    }

    .vv-lightbox-comments {
        max-height: none!important;
        overflow: visible!important
    }

    .js-lightbox-comment-form {
        order: 3
    }

    .vv-lightbox-comments {
        order: 2
    }

    .vv-lightbox-meta {
        order: 1
    }

    .js-lightbox-comment-input {
        min-height: 88px
    }
}

.vv-media-stage {
    position: relative
}

.vv-media-nav {
    position: absolute!important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-radius: 999px!important;
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    background: rgba(15,23,42,.58)!important;
    border: 1px solid rgba(255,255,255,.8)!important
}

.vv-media-nav-prev {
    left: 14px
}

.vv-media-nav-next {
    right: 14px
}

@media (max-width:991.98px) {
    .vv-media-nav {
        width: 44px;
        min-width: 44px;
        height: 44px
    }

    .vv-media-nav-prev {
        left: 10px
    }

    .vv-media-nav-next {
        right: 10px
    }

    body {
        padding-bottom: 84px
    }

    .vv-mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(5,minmax(0,1fr));
        gap: .35rem;
        padding: .55rem .65rem calc(.55rem + env(safe-area-inset-bottom));
        background: rgba(7,12,28,.94);
        backdrop-filter: blur(14px);
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0-8px 30px rgba(0,0,0,.28)
    }

    .vv-mobile-bottom-link {
        min-width: 0;
        color: #cbd5e1;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .28rem;
        padding: .45rem .2rem;
        border-radius: 14px;
        font-size: .72rem;
        line-height: 1.1;
        position: relative
    }

    .vv-mobile-bottom-link i {
        font-size: 1.05rem
    }

    .vv-mobile-bottom-link span:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%
    }

    .vv-mobile-bottom-link.is-active {
        color: #fff;
        background: rgba(255,255,255,.08)
    }

    .vv-mobile-bottom-link-upload {
        color: #fff
    }

    .vv-mobile-bottom-icon-wrap,.vv-mobile-bottom-link-upload i {
        display: inline-flex;
        align-items: center;
        justify-content: center
    }

    .vv-mobile-bottom-link-upload i {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 999px;
        background: linear-gradient(180deg,var(--brand-primary),var(--brand-primary-dark));
        box-shadow: 0 6px 18px rgba(37,99,235,.35)
    }

    .vv-mobile-bottom-icon-wrap {
        position: relative
    }

    .vv-mobile-bottom-badge {
        position: absolute;
        top: -7px;
        right: -10px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: #ef4444;
        color: #fff;
        font-size: .66rem;
        line-height: 18px;
        text-align: center;
        font-weight: 700;
        box-shadow: 0 4px 10px rgba(239,68,68,.35)
    }
}

.vv-doubletap-heart {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(.6);
    opacity: 0;
    z-index: 6;
    pointer-events: none;
    color: #fff;
    font-size: 4rem;
    text-shadow: 0 10px 30px rgba(0,0,0,.35)
}

.vv-doubletap-heart.is-visible {
    animation: vv-doubletap-heart-pop .9s ease forwards
}

.vv-comment-jump {
    border: 0!important;
    box-shadow: none!important
}

.vv-media-stage .vv-media-nav {
    z-index: 5
}

.vv-media-fs-btn {
    position: absolute!important;
    top: 12px;
    right: 12px;
    z-index: 6;
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 999px!important;
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    padding: 0!important;
    background: rgba(15,23,42,.55)!important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.72)!important
}

.vv-mobile-media-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: none
}

.vv-mobile-media-viewer.is-open {
    display: block
}

body.vv-mobile-media-open {
    overflow: hidden
}

.vv-mobile-media-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y pinch-zoom
}

.vv-mobile-media-content {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #000
}

.vv-mobile-media-close {
    position: absolute!important;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 999px!important;
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    padding: 0!important;
    background: rgba(15,23,42,.55)!important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.72)!important
}

.vv-mobile-media-swipe-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    z-index: 10;
    background: rgba(15,23,42,.55);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: .5rem .85rem;
    font-size: .78rem;
    line-height: 1.2;
    backdrop-filter: blur(8px);
    white-space: nowrap
}

.vv-mobile-doubletap-heart {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(.6);
    opacity: 0;
    z-index: 9;
    pointer-events: none;
    color: #fff;
    font-size: 4rem;
    text-shadow: 0 10px 30px rgba(0,0,0,.35)
}

.vv-mobile-doubletap-heart.is-visible {
    animation: vv-doubletap-heart-pop .9s ease forwards
}

@media (min-width:992px) {
    .vv-media-fs-btn,.vv-mobile-media-viewer {
        display: none!important
    }
}

.vv-mobile-controls {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 20;
    transition: opacity .3s
}

.vv-controls-hidden {
    opacity: 0;
    pointer-events: none
}

.vv-mobile-control-btn {
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.vv-mobile-media-content {
    transition: transform .2s ease;
    touch-action: none
}

.vv-mobile-control-btn.is-liked {
    border-color: rgba(239,68,68,.7);
    box-shadow: 0 0 0 1px rgba(239,68,68,.15) inset
}

.vv-mobile-media-close {
    display: none!important
}

.vv-media-action-row {
    align-items: center
}

.vv-media-icon-btn {
    min-height: 46px;
    border: 0!important;
    border-radius: 14px!important;
    display: inline-flex!important;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1rem!important;
    background: rgba(255,255,255,.1)!important;
    color: #fff!important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18)
}

.vv-media-icon-btn:hover {
    background: rgba(255,255,255,.14)!important;
    color: #fff!important
}

.vv-media-icon-btn i {
    font-size: 1rem
}

.vv-main-like-btn,.vv-media-icon-btn {
    justify-content: center
}

.vv-main-like-btn.is-liked {
    background: linear-gradient(135deg,#ef4444,#dc2626)!important;
    color: #fff!important
}

.vv-main-like-btn.is-liked .vv-main-like-icon {
    color: #fff!important
}

.vv-main-like-btn:not(.is-liked) .vv-main-like-icon {
    color: #fff!important
}

.vv-mobile-control-btn.is-liked {
    background: linear-gradient(135deg,#ef4444,#dc2626)!important;
    color: #fff!important;
    border-color: transparent!important
}

.vv-footer-links a:hover,.vv-mobile-control-btn.is-liked .vv-fs-like-icon {
    color: #fff!important
}

.vv-media-action-row {
    display: flex;
    gap: .8rem
}

.vv-media-action-row .vv-media-icon-btn {
    flex: 1 1 0;
    width: 100%
}

.vv-main-like-btn,.vv-media-download-btn {
    flex: 1 1 0;
    width: 100%;
    min-width: 0!important
}

@media (max-width:575px) {
    .vv-media-action-row {
        display: flex!important;
        flex-wrap: nowrap!important
    }

    .vv-media-action-row .vv-media-icon-btn {
        max-width: 50%!important
    }

    .vv-main-like-btn,.vv-media-action-row .vv-media-icon-btn,.vv-media-download-btn {
        flex: 0 0 50%!important;
        width: 50%!important
    }
}

.vv-btn-bounce {
    animation: vvBtnBounce .28s ease
}

.vv-like-count-pop {
    animation: vvLikeCountPop .24s ease
}

.vv-download-flash {
    animation: vvDownloadFlash 1s ease
}

@media (max-width:991.98px) {
    .vv-mobile-hscroll {
        flex-wrap: nowrap!important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: .4rem;
        margin-right: 0;
        margin-left: 0;
        scrollbar-width: none
    }

    .vv-mobile-hscroll::-webkit-scrollbar {
        display: none
    }

    .vv-mobile-hscroll>[class*=col-] {
        flex: 0 0 78%;
        max-width: 78%;
        padding-right: .65rem;
        padding-left: 0
    }

    .vv-mobile-hscroll>[class*=col-]:first-child {
        padding-left: 0
    }

    .vv-mobile-dual-cards {
        row-gap: 1rem
    }

    #vvProfileAlbums,#vvProfileOverview,#vvProfileStats {
        scroll-margin-top: 6.2rem
    }

    .vv-profile-mobile-tabs {
        backdrop-filter: blur(10px)
    }
}

.vv-profile-mobile-tabs {
    position: sticky;
    top: 4rem;
    z-index: 20;
    display: flex;
    gap: .65rem;
    overflow: auto;
    padding: .3rem 0 .9rem;
    margin-bottom: .35rem;
    backdrop-filter: blur(10px)
}

.vv-profile-mobile-tab {
    flex: 0 0 auto;
    padding: .65rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #e5e7eb;
    text-decoration: none;
    white-space: nowrap
}

.vv-profile-mobile-tab.is-active {
    background: linear-gradient(135deg,var(--primary),var(--primary2));
    border-color: transparent;
    color: #fff
}

.vv-profile-album-card .album-cover img,.vv-profile-album-card .album-cover video {
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 14px;
    object-fit: cover
}

.vv-profile-album-card {
    border-radius: 16px
}

.vv-profile-album-card .pt-2 {
    padding-top: .55rem!important
}

.vv-profile-album-card .fw-semibold {
    line-height: 1.2
}

@media (max-width:991.98px) {
    #vvProfileAlbums,#vvProfileOverview,#vvProfileStats {
        scroll-margin-top: 6.2rem
    }
}

.vv-profile-mobile-tabs {
    position: static!important;
    top: auto!important
}

.vv-profile-mobile-tab-logout {
    border-color: rgba(239,68,68,.35);
    color: #fca5a5
}

@media (max-width:991.98px) {
    .vv-mobile-hide-user-menu {
        display: none!important
    }

    #vvMainNavbar {
        transition: transform .24s ease,opacity .24s ease;
        will-change: transform,opacity
    }

    #vvMainNavbar.vv-header-hidden {
        transform: translateY(-100%);
        opacity: .98
    }
}

.vv-notification-chips {
    display: flex;
    gap: .75rem;
    overflow: auto;
    padding-bottom: .25rem;
    scrollbar-width: none
}

.vv-notification-chips::-webkit-scrollbar {
    display: none
}

.vv-notification-chip,.vv-notification-chip-count {
    border-radius: 999px;
    display: inline-flex;
    align-items: center
}

.vv-notification-chip {
    flex: 0 0 auto;
    gap: .55rem;
    padding: .65rem .95rem;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05);
    color: #e5e7eb
}

.vv-notification-chip.is-active {
    background: linear-gradient(135deg,var(--primary),var(--primary2));
    border-color: transparent
}

.vv-notification-chip-count {
    min-width: 24px;
    height: 24px;
    padding: 0 .45rem;
    justify-content: center;
    background: rgba(255,255,255,.12);
    font-size: .78rem
}

.vv-notification-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06)
}

.vv-notification-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    font-size: 1rem
}

.vv-notification-item.is-follow .vv-notification-icon {
    color: #60a5fa
}

.vv-notification-item.is-like .vv-notification-icon {
    color: #f87171
}

.vv-notification-item.is-comment .vv-notification-icon {
    color: #34d399
}

.vv-notification-text {
    line-height: 1.45
}

.vv-notification-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    margin-top: .45rem;
    font-size: .92rem
}

.vv-notification-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
    text-align: right
}

.vv-notification-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none
}

@media (max-width:767.98px) {
    .vv-notification-item {
        grid-template-columns: auto 1fr
    }

    .vv-notification-side {
        grid-column: 2;
        align-items: flex-start;
        text-align: left
    }
}

.vv-infinite-scroll-wrap {
    padding: 1rem 0 0
}

.vv-infinite-scroll-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    color: var(--muted);
    padding: 1rem 0
}

.vv-infinite-scroll-sentinel {
    width: 100%;
    height: 1px
}

.staff-member-name {
    color: #22c55e!important
}

.vv-role-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .16rem .48rem;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1;
    vertical-align: middle;
    margin-left: .28rem
}

.vv-role-badge-staff {
    background: rgba(34,197,94,.16);
    border: 1px solid rgba(34,197,94,.28);
    color: #86efac
}

.vv-role-badge-admin {
    background: rgba(59,130,246,.16);
    border: 1px solid rgba(59,130,246,.28);
    color: #93c5fd
}

.vv-staff-name {
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.vv-staff-name,.vv-staff-name-icon {
    color: #22c55e!important
}

.vv-profile-type-badge {
    font-size: .68rem!important;
    padding: .28rem .5rem!important;
    line-height: 1.05
}

@media (max-width:991.98px) {
    .vv-profile-hero-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem!important
    }

    .vv-profile-hero-avatar {
        flex: 0 0 auto
    }

    .vv-profile-hero-avatar .avatar-lg {
        width: 88px;
        height: 88px
    }

    .vv-profile-hero-main {
        min-width: 0;
        flex: 1 1 auto
    }

    .vv-profile-hero-heading {
        margin-bottom: .35rem
    }

    .vv-profile-hero-heading .h3 {
        margin-bottom: 0!important;
        font-size: 1.15rem;
        line-height: 1.15
    }

    .vv-profile-hero-stats {
        margin-top: .8rem!important;
        gap: .55rem!important
    }

    .vv-profile-hero-stats .badge {
        font-size: .78rem;
        padding: .42rem .62rem
    }

    .vv-profile-hero-socials {
        margin-top: .8rem!important;
        margin-left: 0!important
    }

    .vv-profile-hero-main .mt-2.small,.vv-profile-hero-main .small.text-muted {
        margin-left: 0!important
    }
}

@media (max-width:575.98px) {
    #vvProfileOverview .avatar-lg {
        width: 72px!important;
        height: 72px!important
    }

    #vvProfileOverview .h3 {
        font-size: 1rem!important;
        line-height: 1.15!important
    }

    #vvProfileOverview .badge,#vvProfileOverview .vv-profile-type-badge {
        font-size: .72rem!important;
        line-height: 1!important
    }

    #vvProfileOverview .d-flex.align-items-center.gap-2.flex-wrap {
        gap: .45rem!important
    }

    #vvProfileOverview .small,#vvProfileOverview .text-muted,#vvProfileOverview .vv-profile-social {
        font-size: .82rem!important;
        line-height: 1.25!important
    }

    #vvProfileOverview .badge.text-bg-dark {
        padding: .38rem .55rem!important;
        font-size: .74rem!important
    }

    #vvProfileOverview .btn {
        font-size: .82rem!important;
        padding: .42rem .65rem!important
    }
}

.vv-profile-follow-btn,.vv-profile-report-btn {
    min-height: 38px;
    display: inline-flex!important;
    align-items: center;
    justify-content: center
}

@media (max-width:575.98px) {
    #vvProfileOverview .vv-profile-type-badge {
        font-size: .68rem!important
    }

    #vvProfileOverview .vv-profile-mobile-meta-row {
        order: 2
    }

    #vvProfileOverview .small.text-muted.mt-2 {
        order: 3
    }

    #vvProfileOverview .vv-profile-follow-btn,#vvProfileOverview .vv-profile-report-btn {
        min-height: 36px!important;
        padding: .38rem .62rem!important;
        font-size: .8rem!important
    }

    .vv-profile-top-mobile {
        flex-wrap: nowrap!important;
        align-items: flex-start!important
    }

    .vv-profile-top-avatar {
        flex: 0 0 auto
    }

    .vv-profile-top-avatar .avatar-lg {
        width: 72px!important;
        height: 72px!important
    }

    .vv-profile-top-content {
        min-width: 0;
        flex: 1 1 auto;
        padding-top: .15rem
    }

    .vv-profile-name-row {
        display: flex!important;
        align-items: center!important;
        flex-wrap: wrap!important;
        gap: .45rem!important;
        margin-bottom: .25rem
    }

    .vv-profile-name-row .h3 {
        font-size: 1rem!important;
        line-height: 1.1!important;
        margin-bottom: 0!important
    }

    .vv-profile-mobile-meta-row {
        margin-top: .7rem!important
    }

    .vv-profile-mobile-meta-row .badge.text-bg-dark {
        padding: .38rem .55rem!important;
        font-size: .74rem!important
    }
}

.vv-mobile-dashboard-link {
    font-weight: 600
}

#vvProfileOverview .vv-profile-type-badge {
    font-size: .66rem!important;
    line-height: 1.05;
    padding: .28rem .5rem!important
}

#vvProfileOverview .vv-profile-head {
    display: grid;
    grid-template-columns: 92px minmax(0,1fr);
    gap: 1.1rem;
    align-items: start
}

#vvProfileOverview .vv-profile-head-avatar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start
}

#vvProfileOverview .vv-profile-head-main {
    min-width: 0
}

#vvProfileOverview .vv-profile-head-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .45rem
}

#vvProfileOverview .vv-profile-head-title .h3 {
    line-height: 1.1
}

#vvProfileOverview .vv-profile-bio {
    margin-bottom: .55rem
}

#vvProfileOverview .vv-profile-head-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-top: .25rem
}

#vvProfileOverview .vv-profile-origin {
    margin-top: .65rem
}

#vvProfileOverview .vv-profile-head-actions,#vvProfileOverview .vv-profile-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .8rem
}

#vvProfileOverview .vv-profile-head-actions {
    gap: .7rem
}

#vvProfileOverview .vv-profile-follow-btn,#vvProfileOverview .vv-profile-report-btn {
    min-height: 40px;
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    padding: .5rem .9rem!important
}

@media (max-width:991.98px) {
    #vvProfileOverview .vv-profile-head {
        grid-template-columns: 80px minmax(0,1fr);
        gap: .95rem
    }

    #vvProfileOverview .avatar-lg {
        width: 80px!important;
        height: 80px!important
    }

    #vvProfileOverview .vv-profile-head-title .h3 {
        font-size: 1.05rem!important;
        margin-bottom: 0!important
    }

    #vvProfileOverview .vv-profile-head-socials {
        gap: .55rem .9rem
    }

    #vvProfileOverview .vv-profile-head-actions,#vvProfileOverview .vv-profile-head-meta {
        gap: .55rem
    }
}

@media (max-width:575.98px) {
    #vvProfileOverview .vv-profile-head {
        grid-template-columns: 72px minmax(0,1fr);
        gap: .85rem
    }

    #vvProfileOverview .avatar-lg {
        width: 72px!important;
        height: 72px!important
    }

    #vvProfileOverview .vv-profile-head-title .h3 {
        font-size: .98rem!important
    }

    #vvProfileOverview .vv-profile-head-meta,#vvProfileOverview .vv-profile-head-socials,#vvProfileOverview .vv-profile-origin {
        font-size: .82rem
    }

    #vvProfileOverview .vv-profile-head-meta .badge {
        font-size: .74rem!important;
        padding: .38rem .55rem!important
    }

    #vvProfileOverview .vv-profile-head-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .55rem
    }

    #vvProfileOverview .vv-profile-head-actions form {
        display: block
    }

    #vvProfileOverview .vv-profile-follow-btn,#vvProfileOverview .vv-profile-report-btn {
        width: 100%;
        min-height: 38px;
        font-size: .82rem!important;
        padding: .42rem .65rem!important
    }
}

.vv-dashboard-actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    align-items: center
}

.vv-dashboard-btn {
    min-height: 42px;
    display: inline-flex!important;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem!important
}

@media (max-width:575.98px) {
    .vv-dashboard-actions {
        display: grid!important;
        grid-template-columns: 1fr 1fr;
        gap: .65rem;
        width: 100%
    }

    .vv-dashboard-actions .vv-dashboard-btn {
        width: 100%;
        font-size: .92rem!important;
        margin: 0!important
    }
}

.vv-dashboard-icon-btn {
    min-width: 42px;
    width: 42px;
    padding: .4rem!important;
    display: inline-flex!important;
    align-items: center;
    justify-content: center
}

.vv-dashboard-icon-btn i {
    font-size: .95rem;
    line-height: 1
}

.vv-upload-file-progress,.vv-upload-progress-wrap .vv-progress {
    height: 16px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden
}

.vv-upload-file-progress {
    height: 10px
}

.vv-upload-item {
    grid-template-columns: 64px minmax(0,1fr) 44px;
    align-items: start
}

.vv-upload-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .2rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1;
    white-space: nowrap;
    background: rgba(255,255,255,.07)
}

.vv-upload-state-queued {
    color: #cbd5e1
}

.vv-upload-state-uploading {
    color: #93c5fd
}

.vv-upload-state-processing {
    color: #fcd34d
}

.vv-upload-state-uploaded {
    color: #86efac
}

.vv-upload-state-failed {
    color: #fca5a5
}

.vv-upload-item-success {
    border-color: rgba(34,197,94,.18);
    background: rgba(34,197,94,.05)
}

#vvProgressMeta {
    min-height: 1.25rem
}

@media (max-width:575.98px) {
    .vv-upload-item {
        grid-template-columns: 52px minmax(0,1fr);
        gap: .65rem
    }

    .vv-upload-thumb {
        width: 52px;
        height: 52px
    }

    .vv-upload-item>.d-flex.flex-column {
        grid-column: 2;
        flex-direction: row!important;
        justify-content: flex-end
    }
}

#vvRefreshBtn {
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

[data-media-sort-item] {
    cursor: grab
}

[data-media-sort-item].vv-sort-dragging {
    opacity: .55;
    transform: scale(.98)
}

.vv-report-preview img {
    display: block
}

.vv-report-card {
    border: 1px solid rgba(255,255,255,.06)
}

.vv-report-preview {
    width: 92px;
    min-width: 92px;
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    background: #020617;
    border: 1px solid rgba(255,255,255,.08)
}

.vv-cover-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 31px;
    padding: .4rem .65rem;
    border-radius: .65rem;
    background: rgba(245,158,11,.14);
    border: 1px solid rgba(245,158,11,.35);
    color: #fbbf24;
    font-size: .8rem;
    font-weight: 700
}

.vv-album-media-card form .btn,.vv-delete-media-btn {
    min-height: 31px
}

.vv-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem
}

.vv-icon-btn {
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: #e5e7eb;
    box-shadow: 0 8px 20px rgba(0,0,0,.18)
}

.vv-icon-btn:hover {
    transform: translateY(-1px)
}

.vv-icon-btn-warning {
    background: linear-gradient(135deg,rgba(245,158,11,.95),rgba(217,119,6,.95));
    color: #fff7ed
}

.vv-icon-btn-active {
    background: linear-gradient(135deg,rgba(251,191,36,.98),rgba(245,158,11,.98));
    color: #111827
}

.vv-icon-btn-danger {
    background: linear-gradient(135deg,rgba(239,68,68,.95),rgba(190,24,93,.92));
    color: #fff1f2
}

.vv-media-select {
    cursor: pointer
}

.vv-card-actions {
    align-items: stretch
}

.vv-card-actions form {
    margin: 0;
    display: flex
}

.vv-card-actions .vv-delete-media-btn,.vv-card-actions form .vv-icon-btn {
    height: 42px;
    min-height: 42px
}

@media (max-width:991.98px) {
    #navMain .vv-topnav-desktop-only,.vv-topnav-desktop-only {
        display: none!important
    }
}

.vv-nav-search {
    position: relative;
    align-items: center;
    gap: .55rem
}

.vv-nav-search-desktop {
    flex: 1 1 auto;
    max-width: 520px;
    margin: 0 1rem 0 auto
}

.vv-nav-search-mobile {
    display: flex;
    margin: .8rem 0 .2rem
}

.vv-nav-search-icon {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    z-index: 2
}

.vv-nav-search-input {
    min-height: 42px;
    border-radius: 999px;
    padding-left: 2.5rem;
    padding-right: 6.25rem;
    background: rgba(255,255,255,.06)!important;
    border: 1px solid rgba(255,255,255,.08)!important
}

.vv-nav-search-btn {
    position: absolute;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    padding: .38rem .85rem;
    background: linear-gradient(135deg,var(--primary),var(--primary2));
    color: #fff
}

.vv-nav-search-mobile .vv-nav-search-input {
    padding-right: 3.25rem
}

.vv-nav-search-mobile .vv-nav-search-btn {
    width: 38px;
    padding: 0
}

.vv-search-page-form {
    width: 100%
}

.vv-search-page-inputwrap {
    position: relative
}

.vv-search-page-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    z-index: 2
}

.vv-search-page-input {
    min-height: 52px;
    border-radius: 16px;
    padding-left: 2.7rem;
    padding-right: 7rem
}

.vv-search-page-inputwrap .btn {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    min-height: 42px;
    border-radius: 12px
}

@media (max-width:991.98px) {
    .vv-nav-search-desktop {
        display: none!important
    }
}

@media (min-width:992px) {
    .vv-nav-search-mobile {
        display: none!important
    }
}

.vv-site-footer {
    border-radius: 20px
}

.vv-footer-brand {
    font-size: 1.05rem
}

.vv-footer-brand i {
    color: var(--primary)
}

.vv-footer-links a {
    transition: color .15s ease,opacity .15s ease
}

.vv-footer-copy {
    white-space: nowrap
}

@media (max-width:991.98px) {
    .vv-site-footer {
        padding: 1rem!important
    }

    .vv-footer-brand,.vv-footer-copy,.vv-footer-links {
        justify-content: center!important;
        text-align: center!important
    }

    .vv-footer-copy {
        white-space: normal
    }
}

.vv-dashboard-album-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: nowrap;
    align-items: stretch
}

.vv-dashboard-album-actions .vv-dashboard-album-form .vv-dashboard-album-btn {
    width: 100%;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.vv-dashboard-album-actions .vv-dashboard-album-btn,.vv-dashboard-album-actions .vv-dashboard-album-form {
    flex: 1 1 0
}

.vv-dashboard-album-actions .vv-dashboard-album-form {
    display: flex;
    margin: 0
}

.vv-dashboard-album-actions .vv-dashboard-album-btn {
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.vv-live-search {
    z-index: 50
}

.vv-live-search-dropdown {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    right: 0;
    background: rgba(11,16,32,.98);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.36);
    max-height: min(72vh,620px);
    overflow-y: auto
}

.vv-live-search-section+.vv-live-search-section {
    border-top: 1px solid rgba(255,255,255,.06)
}

.vv-live-search-section-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    padding: .9rem 1rem .45rem
}

.vv-live-search-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    color: #e5e7eb
}

.vv-live-search-item:hover {
    background: rgba(255,255,255,.05)
}

.vv-live-search-thumb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08)
}

.vv-chat-thread-avatar img,.vv-live-search-thumb img,.vv-report-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vv-live-search-avatar {
    border-radius: 50%
}

.vv-live-search-meta {
    min-width: 0;
    display: flex;
    flex-direction: column
}

.vv-live-search-title {
    color: #fff;
    font-weight: 600;
    line-height: 1.2
}

.vv-live-search-subtitle {
    color: #94a3b8;
    font-size: .82rem
}

.vv-live-search-empty {
    padding: 1rem;
    color: #94a3b8
}

.vv-live-search-footer {
    position: sticky;
    bottom: 0;
    padding: .8rem 1rem 1rem;
    background: linear-gradient(180deg,rgba(11,16,32,.82),rgba(11,16,32,.98))
}

.vv-live-search-footer .btn {
    width: 100%
}

.vv-feed-tabs {
    display: flex;
    flex-wrap: wrap
}

.vv-feed-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #cbd5e1;
    text-decoration: none;
    transition: all .15s ease
}

.vv-feed-tab:hover {
    color: #fff;
    background: rgba(255,255,255,.08)
}

.vv-feed-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg,var(--primary),var(--primary2));
    border-color: transparent
}

.vv-profile-cover-upload {
    width: 100%
}

.vv-profile-cover-preview,.vv-public-profile-cover-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 20px;
    display: block
}

.vv-profile-cover-empty,.vv-public-profile-cover-fallback {
    width: 100%;
    height: 220px;
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(59,130,246,.16),rgba(168,85,247,.16));
    border: 1px solid rgba(255,255,255,.08)
}

.vv-profile-avatar-lightbox-trigger {
    display: inline-block;
    cursor: zoom-in
}

.vv-avatar-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.92);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease,visibility .18s ease
}

.vv-avatar-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.vv-avatar-lightbox-img {
    max-width: min(92vw,900px);
    max-height: 86vh;
    border-radius: 24px;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0,0,0,.45)
}

.vv-avatar-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: #fff
}

@media (max-width:768px) {
    .vv-profile-cover-empty,.vv-profile-cover-preview,.vv-public-profile-cover-fallback,.vv-public-profile-cover-img {
        height: 160px;
        border-radius: 18px
    }
}

.vv-profile-settings-avatar,.vv-profile-settings-avatar-fallback {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.vv-profile-settings-avatar-fallback {
    background: rgba(255,255,255,.08)
}

.vv-profile-settings-cover-fallback,.vv-profile-settings-cover-img {
    width: 100%;
    height: 180px;
    border-radius: 20px;
    object-fit: cover;
    display: block
}

.vv-profile-settings-cover-fallback {
    background: linear-gradient(135deg,rgba(59,130,246,.16),rgba(168,85,247,.16));
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1
}

.vv-profile-hero-card {
    position: relative;
    overflow: hidden
}

.vv-profile-hero-card.has-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--vv-profile-cover);
    background-size: cover;
    background-position: center;
    opacity: .42;
    transform: scale(1.02)
}

.vv-profile-hero-card.has-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(15,23,42,.35),rgba(15,23,42,.88))
}

.vv-profile-hero-card>* {
    position: relative;
    z-index: 1
}

.vv-profile-head-avatar .vv-profile-avatar-lightbox-trigger {
    display: inline-block;
    cursor: zoom-in
}

#vvQuickAlbumModal .modal-content,.vv-cover-crop-frame {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px
}

.vv-avatar-crop-frame,.vv-cover-crop-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3/1;
    overflow: hidden;
    background: #020617
}

.vv-avatar-crop-frame::after,.vv-cover-crop-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(255,255,255,.35);
    border-radius: 20px;
    pointer-events: none
}

#vvAvatarCropImage,#vvCoverCropImage,#vvEventCoverCropImage {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none
}

.vv-avatar-crop-frame {
    max-width: 420px;
    aspect-ratio: 1/1;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08)
}

.vv-avatar-crop-frame::after {
    border-radius: 22px
}

.vv-avatar-crop-frame,.vv-cover-crop-frame {
    display: block
}

.vv-topuri-nav {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap
}

.vv-card+.vv-card {
    margin-top: 1.5rem
}

.vv-event-infinite-end {
    opacity: .9
}

.vv-explore-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.vv-explore-filter {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05);
    color: #e5e7eb;
    border-radius: 999px;
    padding: .45rem .8rem
}

.vv-explore-filter.is-active {
    background: linear-gradient(135deg,var(--primary),var(--primary2));
    border-color: transparent;
    color: #fff
}

.vv-explore-media-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .85rem
}

@media (min-width:768px) {
    .vv-explore-media-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }
}

@media (min-width:1200px) {
    .vv-explore-media-grid {
        grid-template-columns: repeat(6,minmax(0,1fr))
    }
}

.vv-explore-media-item {
    min-width: 0
}

.vv-explore-media-card {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease
}

.vv-explore-media-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 42px rgba(0,0,0,.28)
}

.vv-explore-thumb-wrap {
    position: relative
}

.vv-explore-thumb {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    background: #020617
}

.vv-explore-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: .45rem;
    padding: .8rem;
    background: linear-gradient(180deg,rgba(2,6,23,.04)0,rgba(2,6,23,.72) 100%);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none
}

.vv-explore-media-card:hover .vv-explore-overlay {
    opacity: 1
}

.vv-explore-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .58rem;
    border-radius: 999px;
    background: rgba(15,23,42,.8);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: .76rem;
    line-height: 1
}

.vv-explore-end {
    opacity: .9
}

.vv-explore-media-item-video .vv-explore-thumb-wrap::after {
    content: "";
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(2,6,23,.72);
    border: 1px solid rgba(255,255,255,.1)
}

.vv-explore-media-item-video .vv-explore-thumb-wrap::before {
    content: "";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    z-index: 2;
    color: #fff;
    font-size: .7rem
}

.vv-explore-skeleton {
    min-width: 0
}

.vv-explore-skeleton .vv-card {
    overflow: hidden
}

.vv-explore-skeleton-line,.vv-explore-skeleton-media {
    background: linear-gradient(90deg,rgba(255,255,255,.05)0,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 100%);
    background-size: 200% 100%;
    animation: vvSkeleton 1.2s linear infinite
}

.vv-explore-skeleton-media {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 1rem
}

.vv-explore-skeleton-line {
    height: 10px;
    border-radius: 999px;
    margin-top: .65rem
}

.vv-explore-skeleton-line-lg {
    width: 72%
}

.vv-explore-skeleton-line {
    width: 58%
}

.vv-explore-skeleton-line-sm {
    width: 44%
}

.vv-explore-skeleton {
    animation: vv-skeleton-shimmer 1.4s infinite linear;
    background: linear-gradient(90deg,#1f2937 25%,#374151 37%,#1f2937 63%);
    background-size: 400% 100%;
    border-radius: 14px;
    height: 220px
}

.vv-feed-tabs {
    gap: .4rem
}

.vv-feed-tab {
    min-height: 34px;
    padding: .4rem .75rem;
    font-size: .9rem
}

#vvFeedLiveGrid {
    row-gap: .75rem
}

#vvAlbumsArchiveGrid {
    row-gap: .85rem!important;
    --bs-gutter-x: .85rem;
    --bs-gutter-y: .85rem
}

#vvMediaArchiveGrid {
    gap: .85rem
}

@media (min-width:1200px) {
    #vvMediaArchiveGrid {
        grid-template-columns: repeat(6,minmax(0,1fr))
    }
}

.vv-album-picker-group .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.vv-album-picker-add {
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

#vvQuickAlbumModal .modal-content {
    background: rgba(11,16,32,.98)
}

#vvQuickAlbumModal .modal-body,#vvQuickAlbumModal .modal-header {
    color: #e5e7eb
}

.vv-admin-activity-chart {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: .85rem;
    align-items: end;
    min-height: 220px
}

.vv-admin-activity-day {
    display: grid;
    gap: .45rem;
    justify-items: center
}

.vv-admin-activity-bars {
    width: 100%;
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .3rem;
    padding: .5rem;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06)
}

.vv-admin-activity-bar {
    width: 22%;
    min-height: 8px;
    border-radius: 10px 10px 4px 4px
}

.vv-admin-activity-users {
    background: linear-gradient(180deg,rgba(96,165,250,.95),rgba(37,99,235,.9))
}

.vv-admin-activity-albums {
    background: linear-gradient(180deg,rgba(52,211,153,.95),rgba(5,150,105,.9))
}

.vv-admin-activity-media {
    background: linear-gradient(180deg,rgba(251,191,36,.95),rgba(217,119,6,.9))
}

.vv-admin-activity-label {
    font-size: .82rem;
    color: #e5e7eb
}

.vv-admin-activity-meta {
    font-size: .72rem
}

@media (max-width:992px) {
    .vv-admin-activity-chart {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }
}

@media (max-width:576px) {
    .vv-admin-activity-chart {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

.vv-brand-mark,.vv-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    color: #fff
}

.vv-brand-icon,.vv-brand-icon-core {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.vv-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg,rgba(59,130,246,.22),rgba(37,99,235,.12));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 10px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden
}

.vv-brand-icon::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 13px;
    background: linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02))
}

.vv-brand-icon-core {
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color: #fff;
    box-shadow: 0 8px 18px rgba(37,99,235,.35);
    font-size: .85rem
}

.vv-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1
}

.vv-brand-title {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff
}

.vv-brand-subtitle {
    margin-top: .24rem;
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(226,232,240,.78)
}

.navbar-brand.vv-brand-mark:hover,.vv-footer-brand:hover {
    color: #fff;
    opacity: .98
}

@media (max-width:576px) {
    .vv-brand-subtitle {
        display: none
    }

    .vv-brand-icon {
        width: 40px;
        height: 40px
    }

    .vv-brand-icon-core {
        width: 26px;
        height: 26px
    }

    .vv-brand-title {
        font-size: .98rem
    }
}

.vv-nav {
    background: rgba(11,16,32,.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.18)
}

#vvMainNavbar .navbar-nav {
    gap: .35rem
}

#vvMainNavbar .nav-link {
    position: relative;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .58rem .95rem;
    border-radius: 999px;
    color: rgba(226,232,240,.88);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease
}

#vvMainNavbar .nav-link:focus,#vvMainNavbar .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    transform: translateY(-1px)
}

#vvMainNavbar .nav-link.active,#vvMainNavbar .nav-link[aria-expanded=true],#vvMainNavbar .show>.nav-link {
    color: #fff;
    background: linear-gradient(135deg,rgba(59,130,246,.18),rgba(37,99,235,.12));
    box-shadow: inset 0 0 0 1px rgba(96,165,250,.24)
}

#vvMainNavbar .dropdown-menu {
    margin-top: .65rem;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(11,16,32,.98);
    box-shadow: 0 22px 60px rgba(0,0,0,.34);
    padding: .55rem
}

#vvMainNavbar .dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    color: #e5e7eb;
    padding: .6rem .85rem;
    font-weight: 500;
    transition: background .16s ease,color .16s ease,transform .16s ease
}

#vvMainNavbar .dropdown-item:focus,#vvMainNavbar .dropdown-item:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
    transform: translateX(2px)
}

#vvMainNavbar .dropdown-toggle::after {
    margin-left: .45rem
}

.vv-admin-badge {
    box-shadow: 0 0 0 4px rgba(239,68,68,.12)
}

.vv-user-toggle {
    min-height: 42px;
    padding: .38rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .18s ease,border-color .18s ease,transform .18s ease
}

.vv-user-toggle:focus,.vv-user-toggle:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
    transform: translateY(-1px)
}

.vv-user-menu {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 22px 60px rgba(0,0,0,.34);
    padding: .55rem
}

.vv-user-menu .dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 12px
}

@media (max-width:991.98px) {
    #navMain {
        margin-top: .75rem;
        padding: 1rem;
        border-radius: 22px;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.06)
    }

    #vvMainNavbar .navbar-nav {
        gap: .45rem
    }

    #vvMainNavbar .nav-link {
        justify-content: flex-start;
        width: 100%;
        border-radius: 14px;
        padding: .8rem .95rem
    }

    #vvMainNavbar .dropdown-menu {
        margin-top: .5rem;
        border-radius: 16px
    }
}

.vv-password-meter {
    margin-top: .25rem
}

.vv-password-meter-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06)
}

.vv-password-meter-bar span {
    display: block;
    height: 100%;
    width: 0;
    transition: width .18s ease,background .18s ease;
    background: rgba(255,255,255,.18)
}

.vv-password-meter-bar span.is-weak {
    background: linear-gradient(135deg,#ef4444,#dc2626)
}

.vv-password-meter-bar span.is-medium {
    background: linear-gradient(135deg,#f59e0b,#d97706)
}

.vv-password-meter-bar span.is-good {
    background: linear-gradient(135deg,#22c55e,#16a34a)
}

.vv-password-meter-bar span.is-strong {
    background: linear-gradient(135deg,#10b981,#059669)
}

.vv-file-preview {
    scroll-margin-top: 96px
}

.vv-upload-item {
    scroll-margin-top: 110px;
    transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease
}

.vv-upload-item-active {
    border-color: rgba(96,165,250,.55)!important;
    box-shadow: 0 0 0 1px rgba(96,165,250,.22),0 16px 34px rgba(37,99,235,.12);
    transform: translateY(-1px)
}

#vvSubmitBtn[disabled] {
    opacity: 1;
    cursor: progress
}

.vv-chat-sidebar {
    min-height: 72vh
}

.vv-chat-thread-list {
    display: grid;
    gap: .65rem;
    max-height: 64vh;
    overflow: auto;
    padding-right: .15rem
}

.vv-chat-thread-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem;
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    color: #fff;
    text-decoration: none;
    transition: .18s ease
}

.vv-chat-thread-item.is-active,.vv-chat-thread-item:hover {
    background: rgba(59,130,246,.1);
    border-color: rgba(96,165,250,.28);
    color: #fff
}

.vv-chat-thread-avatar {
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08)
}

.vv-chat-thread-avatar.is-lg {
    width: 56px;
    min-width: 56px;
    height: 56px
}

.vv-chat-shell {
    min-height: 72vh;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto
}

.vv-chat-topbar {
    padding: .5rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

.vv-chat-messages {
    padding: 1rem;
    display: grid;
    background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01))
}

.vv-chat-row.is-mine {
    justify-content: flex-end
}

.vv-chat-bubble {
    padding: .5rem 1.1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08)
}

.vv-chat-row.is-mine .vv-chat-bubble {
    background: linear-gradient(135deg,rgba(37,99,235,.26),rgba(29,78,216,.18));
    border-color: rgba(96,165,250,.3)
}

.vv-chat-text {
    white-space: pre-wrap;
    word-break: break-word
}

.vv-chat-time {
    font-size: .62rem;
    color: #94a3b8
}

.vv-chat-attachment {
    display: block;
    width: 100%;
}

.vv-chat-attachment a {
    display: block;
    width: 100%;
    max-width: min(320px, 100%);
}

.vv-chat-attachment img,.vv-chat-attachment video {
    width: 100%;
    max-width: 100%;
    max-height: min(360px, 52vh);
    height: auto;
    border-radius: 14px;
    display: block;
    background: #020617;
    object-fit: contain
}

.vv-chat-composer-wrap {
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02)
}

.vv-chat-toolbar {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: .75rem
}

.vv-chat-emoji-panel {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
    padding: .6rem;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06)
}

.vv-chat-emoji-btn {
    border: 0;
    background: rgba(255,255,255,.05);
    color: #fff;
    border-radius: 10px;
    padding: .35rem .45rem;
    line-height: 1
}

.vv-chat-attachment-preview {
    margin-bottom: .7rem;
    padding: .7rem .85rem;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06)
}

@media (max-width:991.98px) {
    .vv-chat-shell,.vv-chat-sidebar {
        min-height: auto
    }

    .vv-chat-thread-list {
        max-height: none
    }

    .vv-chat-shell {
        grid-template-rows: auto 50vh auto
    }

    .vv-chat-bubble {
        max-width: 92%
    }
}

.vv-chat-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8
}

.vv-chat-search-input {
    padding-left: 2.4rem
}

.vv-chat-row {
    align-items: flex-start
}

.vv-chat-bubble {
    width: auto;
    display: inline-block
}

.vv-chat-typing-indicator {
    padding: 0;
    color: #94a3b8;
    font-size: .84rem;
    display: flex;
    align-items: center;
    gap: .5rem
}

.vv-chat-typing-indicator i {
    font-size: .85rem
}

.vv-chat-toast-wrap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2000;
    display: grid;
    gap: .55rem
}

.vv-chat-toast {
    padding: .8rem 1rem;
    border-radius: 14px;
    background: rgba(11,16,32,.96);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.24);
    opacity: 0;
    transform: translateY(8px);
    transition: .2s ease
}

.vv-chat-toast.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.vv-chat-page-row {
    min-height: calc(100vh - 132px)
}

.vv-chat-main-col,.vv-chat-sidebar-col {
    display: flex
}

.vv-chat-shell,.vv-chat-sidebar {
    width: 100%
}

.vv-chat-shell {
    height: calc(100vh - 160px);
    min-height: calc(100vh - 160px);
    max-height: calc(100vh - 160px)
}

.vv-chat-messages {
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    overflow: auto
}

.vv-chat-bubble {
    max-width: min(78%,680px)
}

.vv-chat-live-bubbles {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1900;
    display: grid;
    gap: .65rem
}

.vv-chat-live-bubble {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 220px;
    max-width: 280px;
    padding: .7rem .8rem;
    border-radius: 18px;
    background: rgba(11,16,32,.96);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.24);
    color: #fff;
    text-decoration: none
}

.vv-chat-live-bubble:hover,.vv-chat-live-group-link:hover {
    color: #fff
}

.vv-chat-live-bubble-avatar {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08)
}

.vv-chat-live-bubble-avatar img,.vv-chat-live-group-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vv-chat-live-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%
}

.vv-chat-live-bubble-name {
    font-size: .92rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vv-chat-live-bubble-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 .45rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .8rem;
    font-weight: 700
}

@media (max-width:991.98px) {
    body.vv-chat-mobile-page>main.container>.alert {
        display: none!important
    }

    body.vv-chat-mobile-page main.container {
        max-width: 100%;
        padding: 0!important;
        margin: 0!important
    }

    body.vv-chat-mobile-page .vv-chat-sidebar-col {
        display: none
    }

    body.vv-chat-mobile-page .vv-chat-topbar {
        padding: .9rem .85rem
    }

    body.vv-chat-mobile-page .vv-chat-messages {
        padding: .9rem
    }

    body.vv-chat-mobile-page .vv-chat-composer-wrap {
        padding: .85rem
    }

    .vv-chat-live-bubbles {
        left: 12px;
        right: 12px;
        bottom: 12px
    }

    .vv-chat-live-bubble {
        min-width: 0;
        max-width: none
    }

    body.vv-chat-mobile-page #vvMainNavbar,body.vv-chat-mobile-page .container.d-lg-none,body.vv-chat-mobile-page .vv-mobile-bottom-nav,body.vv-chat-mobile-page .vv-nav-search,body.vv-chat-mobile-page footer,body.vv-chat-mobile-page main.container>.alert {
        display: none!important
    }

    body.vv-chat-mobile-page {
        overflow: hidden
    }

    body.vv-chat-mobile-page .vv-chat-page-row {
        min-height: 100vh;
        height: 100vh;
        margin: 0
    }

    body.vv-chat-mobile-page .vv-chat-main-col {
        padding: 0
    }

    body.vv-chat-mobile-page .vv-chat-shell {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        border-radius: 0!important;
        border: 0!important
    }

    body.vv-chat-mobile-page #vvChatBody {
        min-height: 44px;
        height: 44px;
        max-height: 44px;
        resize: none
    }

    body.vv-chat-mobile-page .vv-chat-composer .input-group {
        align-items: stretch
    }
}

.vv-chat-live-group {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1900
}

.vv-chat-live-group-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem .45rem .45rem;
    border-radius: 999px;
    background: rgba(11,16,32,.96);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.24);
    color: #fff;
    text-decoration: none
}

.vv-chat-live-group-stack {
    display: flex;
    align-items: center;
    padding-right: .15rem
}

.vv-chat-live-group-avatar {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(11,16,32,.96);
    font-size: .8rem;
    font-weight: 700;
    color: #fff
}

.vv-chat-live-group-avatar:first-child {
    margin-left: 0
}

.vv-chat-live-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 .5rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .84rem;
    font-weight: 800
}

@media (max-width:991.98px) {
    .vv-chat-live-group {
        right: 12px;
        bottom: 12px
    }

    .vv-chat-live-group-link {
        padding: .42rem .52rem .42rem .42rem
    }

    body.vv-chat-mobile-page,html.vv-chat-mobile-html {
        margin: 0!important;
        padding: 0!important;
        height: 100%;
        overflow: hidden
    }

    body.vv-chat-mobile-page main.container {
        padding: 0!important
    }

    body.vv-chat-mobile-page .vv-chat-page-row {
        min-height: 100dvh!important;
        height: 100dvh!important;
        margin: 0!important;
        --bs-gutter-x: 0!important;
        --bs-gutter-y: 0!important
    }

    body.vv-chat-mobile-page .vv-chat-main-col,body.vv-chat-mobile-page .vv-chat-sidebar-col {
        padding: 0!important;
        margin: 0!important
    }

    body.vv-chat-mobile-page .vv-chat-shell {
        height: 100dvh!important;
        min-height: 100dvh!important;
        max-height: 100dvh!important
    }

    body.vv-chat-mobile-page .vv-chat-topbar {
        padding: .25rem .8rem!important
    }

    body.vv-chat-mobile-page .vv-chat-composer-wrap {
        padding: .25rem .8rem calc(.75rem + env(safe-area-inset-bottom))!important
    }

    body.vv-chat-mobile-page #vvChatBody {
        min-height: 40px!important;
        height: 40px!important;
        max-height: 40px!important;
        line-height: 1.2;
        padding-top: .55rem;
        padding-bottom: .55rem
    }
}

.vv-chat-messages {
    display: flex;
    flex-direction: column;
    justify-content: flex-start!important;
    gap: .55rem
}

.vv-chat-row {
    display: flex;
    width: 100%
}

@media (max-width:991.98px) {
    .vv-chat-live-group {
        bottom: 78px!important
    }
}

.vv-chat-thread-item {
    position: relative
}

.vv-chat-thread-online {
    position: absolute;
    left: 42px;
    top: 44px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #0f172a;
    border: 2px solid #0f172a;
    transition: .18s ease
}

.vv-chat-thread-online.is-online {
    background: #22c55e
}

.vv-chat-row-enter {
    animation: vvChatMessageIn .28s ease
}

.vv-chat-seen-indicator {
    padding: 0 .95rem .25rem;
    font-size: .74rem;
    color: #94a3b8;
    text-align: right
}

.vv-chat-jump-bottom {
    position: sticky;
    bottom: 14px;
    margin-left: auto;
    margin-right: auto;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(96,165,250,.28);
    background: rgba(15,23,42,.92);
    color: #fff;
    box-shadow: 0 14px 30px rgba(0,0,0,.22)
}

.vv-chat-jump-bottom span {
    font-size: .82rem
}

.vv-chat-day-divider {
    display: flex;
    justify-content: center;
    margin: .35rem 0 .45rem;
}

.vv-chat-day-divider span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(15,23,42,.72);
    border: 1px solid rgba(255,255,255,.07);
    color: #cbd5e1;
    font-size: .72rem;
    letter-spacing: .01em;
}

.vv-chat-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    margin-top: .45rem;
}

.vv-chat-meta.is-mine {
    justify-content: flex-end;
}

.vv-chat-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    color: #94a3b8;
    font-size: .72rem;
    line-height: 1;
}

.vv-chat-status.is-read {
    color: #60a5fa;
}

.vv-chat-row-system {
    justify-content: flex-start;
    pointer-events: none;
}

#vvChatTypingIndicator {
    min-height: 40px;
    visibility: hidden;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
}

#vvChatTypingIndicator.is-visible {
    visibility: visible;
    opacity: 1;
}

.vv-chat-system-bubble {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: #94a3b8;
    font-size: .8rem;
}

.vv-chat-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: .18rem;
}

.vv-chat-typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    animation: vvChatTypingDot 1s infinite ease-in-out;
}

.vv-chat-typing-dots span:nth-child(2) {
    animation-delay: .16s;
}

.vv-chat-typing-dots span:nth-child(3) {
    animation-delay: .32s;
}

@keyframes vvChatTypingDot {
    0%,80%,100% { opacity: .35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

@media (max-width:991.98px) {
    .vv-chat-day-divider {
        margin: .25rem 0 .35rem;
    }

    .vv-chat-day-divider span {
        font-size: .68rem;
        padding: .25rem .6rem;
    }

    .vv-chat-system-bubble {
        padding: .34rem .65rem;
        font-size: .76rem;
    }
}


/* Chat UI patch: thread preview truncation + tighter mobile layout */
.vv-chat-thread-item {
    min-width: 0;
}

.vv-chat-thread-meta {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.vv-chat-thread-head {
    min-width: 0;
}

.vv-chat-thread-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vv-chat-thread-preview {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

@media (max-width:991.98px) {
    body.vv-chat-mobile-page .vv-chat-topbar {
        padding: .38rem .72rem !important;
        gap: .55rem;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .btn {
        padding: .45rem .65rem;
        line-height: 1.1;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .btn.btn-sm {
        font-size: .95rem;
    }

    body.vv-chat-mobile-page .vv-chat-thread-avatar.is-lg {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .fw-semibold {
        line-height: 1.1;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .small {
        font-size: .82rem;
        line-height: 1.05;
    }

    body.vv-chat-mobile-page .vv-chat-composer-wrap {
        padding: .32rem .72rem calc(.5rem + env(safe-area-inset-bottom)) !important;
    }

    body.vv-chat-mobile-page .vv-chat-toolbar {
        gap: .42rem;
        margin-bottom: .38rem;
    }

    body.vv-chat-mobile-page .vv-chat-toolbar .btn,
    body.vv-chat-mobile-page .vv-chat-toolbar label.btn {
        width: 42px;
        height: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.vv-chat-mobile-page #vvChatBody {
        min-height: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        padding-top: .48rem;
        padding-bottom: .48rem;
    }

    body.vv-chat-mobile-page #vvChatSendBtn {
        min-width: 60px;
        padding-left: .8rem;
        padding-right: .8rem;
    }

    body.vv-chat-mobile-page .vv-chat-messages {
        padding: .72rem;
    }
}


/* Chat mobile compact patch v2: reduce header/footer height further */
@media (max-width: 991.98px) {
    body.vv-chat-mobile-page .vv-chat-topbar {
        padding: .28rem .5rem !important;
        min-height: 72px;
        align-items: center;
    }

    body.vv-chat-mobile-page .vv-chat-topbar > .d-flex {
        min-width: 0;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .gap-2,
    body.vv-chat-mobile-page .vv-chat-topbar .gap-lg-3,
    body.vv-chat-mobile-page .vv-chat-topbar-actions {
        gap: .45rem !important;
    }

    body.vv-chat-mobile-page .vv-chat-thread-avatar.is-lg {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .fw-semibold {
        font-size: 1rem;
        line-height: 1.05;
        margin-bottom: .05rem;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .small {
        font-size: .72rem !important;
        line-height: 1;
    }

    body.vv-chat-mobile-page #vvChatMobileBack,
    body.vv-chat-mobile-page .vv-chat-topbar .btn {
        min-height: 36px;
        height: 36px;
        padding: 0 .7rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: .7rem;
        font-size: .95rem;
        line-height: 1;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .btn.btn-danger {
        min-width: 36px;
        width: 36px;
        padding: 0 !important;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .btn.btn-light {
        padding-left: .72rem !important;
        padding-right: .72rem !important;
        font-size: .9rem;
    }

    body.vv-chat-mobile-page .vv-chat-messages {
        padding: .55rem .55rem .4rem;
    }

    body.vv-chat-mobile-page .vv-chat-composer-wrap {
        padding: .22rem .5rem calc(.38rem + env(safe-area-inset-bottom)) !important;
    }

    body.vv-chat-mobile-page .vv-chat-toolbar {
        gap: .35rem;
        margin-bottom: .24rem;
    }

    body.vv-chat-mobile-page .vv-chat-toolbar .btn,
    body.vv-chat-mobile-page .vv-chat-toolbar label.btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: .7rem;
        font-size: .95rem;
    }

    body.vv-chat-mobile-page .vv-chat-composer .input-group {
        gap: .42rem;
        align-items: center;
    }

    body.vv-chat-mobile-page .vv-chat-composer .input-group > .form-control {
        border-radius: .8rem !important;
    }

    body.vv-chat-mobile-page #vvChatBody {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        padding: .42rem .82rem !important;
        font-size: .96rem;
        line-height: 1.15;
    }

    body.vv-chat-mobile-page #vvChatSendBtn {
        min-width: 50px;
        width: 50px;
        height: 36px;
        padding: 0 !important;
        border-radius: .8rem !important;
        flex: 0 0 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.vv-chat-mobile-page #vvChatSendBtn i {
        margin: 0 !important;
        font-size: 1rem;
        line-height: 1;
    }
}

/* Chat mobile compact patch v3: remove excess header/footer padding and keep more room for messages */
@media (max-width: 991.98px) {
    body.vv-chat-mobile-page .vv-chat-shell {
        grid-template-rows: auto minmax(0,1fr) auto;
    }

    body.vv-chat-mobile-page .vv-chat-topbar {
        padding: 10px .42rem !important;
        gap: .35rem !important;
        min-height: 0 !important;
    }

    body.vv-chat-mobile-page .vv-chat-topbar > .d-flex:first-child {
        gap: .35rem !important;
        min-width: 0;
        flex: 1 1 auto;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .min-w-0 {
        min-width: 0;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .fw-semibold {
        line-height: 1 !important;
        margin: 0 !important;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .small {
        margin-top: 1px;
        margin-bottom: 0 !important;
        line-height: 1 !important;
    }

    body.vv-chat-mobile-page .vv-chat-topbar-actions {
        gap: .35rem !important;
        flex: 0 0 auto;
    }

    body.vv-chat-mobile-page #vvChatMobileBack,
    body.vv-chat-mobile-page .vv-chat-topbar .btn {
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 .62rem !important;
        border-radius: .8rem !important;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .btn.btn-danger {
        width: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
    }

    body.vv-chat-mobile-page .vv-chat-topbar .btn.btn-light {
        min-width: 0;
        padding-left: .72rem !important;
        padding-right: .72rem !important;
    }

    body.vv-chat-mobile-page .vv-chat-thread-avatar.is-lg {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    body.vv-chat-mobile-page .vv-chat-messages {
        padding: .45rem .45rem .25rem !important;
    }

    body.vv-chat-mobile-page #vvChatTypingIndicator {
        min-height: 34px;
    }

    body.vv-chat-mobile-page .vv-chat-composer-wrap {
        padding: 10px .42rem calc(10px + env(safe-area-inset-bottom)) !important;
    }

    body.vv-chat-mobile-page .vv-chat-composer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .35rem;
    }

    body.vv-chat-mobile-page .vv-chat-toolbar {
        order: 1;
        display: flex;
        align-items: center;
        gap: .3rem;
        margin: 0 !important;
        flex: 0 0 auto;
    }

    body.vv-chat-mobile-page .vv-chat-toolbar .btn,
    body.vv-chat-mobile-page .vv-chat-toolbar label.btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: .8rem !important;
        margin: 0 !important;
    }

    body.vv-chat-mobile-page .vv-chat-emoji-panel,
    body.vv-chat-mobile-page .vv-chat-attachment-preview {
        order: 3;
        width: 100%;
        margin-top: .15rem;
        margin-bottom: 0 !important;
    }


    body.vv-chat-mobile-page .vv-chat-attachment {
        width: 100%;
        max-width: 100%;
    }

    body.vv-chat-mobile-page .vv-chat-attachment a {
        display: block;
        width: 100%;
        max-width: min(78vw, 320px);
    }

    body.vv-chat-mobile-page .vv-chat-attachment img {
        width: 100%;
        max-width: 100%;
        max-height: min(44vh, 320px);
        height: auto;
        object-fit: contain;
    }

    body.vv-chat-mobile-page .vv-chat-composer .input-group {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        gap: .35rem !important;
        align-items: center;
        flex-wrap: nowrap;
    }

    body.vv-chat-mobile-page #vvChatBody {
        min-height: 34px !important;
        height: 34px !important;
        max-height: 34px !important;
        padding: .34rem .74rem !important;
        margin: 0 !important;
    }

    body.vv-chat-mobile-page #vvChatSendBtn {
        width: 42px !important;
        min-width: 42px !important;
        height: 34px !important;
        flex: 0 0 42px !important;
        border-radius: .8rem !important;
    }
}

/* smoother message appearance */
.chat-message{
    animation: vvChatFade .18s ease;
}

@keyframes vvChatFade{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
}

/* better textarea resize */
.chat-message-input{
    resize:none;
    overflow:hidden;
}

/* media preview */
.chat-message img{
    max-width:260px;
    border-radius:8px;
    cursor:pointer;
}

/* Chat Features v2 */
.vv-chat-actions{display:flex;align-items:center;gap:6px;margin-top:6px;position:relative}
.vv-chat-action-btn{width:28px;height:28px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:inherit;display:inline-flex;align-items:center;justify-content:center}
.vv-chat-row.is-mine .vv-chat-action-btn{background:rgba(255,255,255,.18)}
.vv-chat-react-picker{position:absolute;left:0;bottom:34px;display:flex;gap:4px;padding:6px 8px;border-radius:999px;background:#111827;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:4}
.vv-chat-row.is-mine .vv-chat-react-picker{left:auto;right:0}
.vv-chat-react-btn{border:0;background:transparent;font-size:18px;line-height:1;padding:2px 4px}
.vv-chat-reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vv-chat-reaction-pill{border:0;color:#efefef;border-radius:999px;padding:2px 8px;background:rgba(255,255,255,.12);font-size:12px}
.vv-chat-reaction-pill.is-active{outline:1px solid rgba(59,130,246,.55);background:rgba(59,130,246,.12)}
.vv-chat-reply-chip{display:block;width:100%;text-align:left;border:0;background:rgba(255,255,255,.10);border-left:3px solid rgba(59,130,246,.9);border-radius:10px;padding:7px 10px;margin-bottom:8px}
.vv-chat-reply-chip strong,.vv-chat-reply-chip span{display:block}
.vv-chat-reply-chip strong{font-size:12px;margin-bottom:2px}
.vv-chat-reply-chip span{font-size:12px;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vv-chat-reply-box{background:rgba(255,255,255,.08);border-left:3px solid #3b82f6;border-radius:12px;padding:8px 10px;margin-bottom:8px}
.vv-chat-reply-box-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:2px}
.vv-chat-reply-close{border:0;background:transparent;color:inherit}
.vv-chat-reply-box-body{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.86}
.vv-chat-edited{font-size:11px;opacity:.72}
.vv-chat-row-highlight .vv-chat-bubble{box-shadow:0 0 0 2px rgba(59,130,246,.35)}
@media (max-width: 768px){
  .vv-chat-actions{margin-top:5px}
  .vv-chat-action-btn{width:26px;height:26px}
  .vv-chat-react-picker{bottom:30px;max-width:min(92vw,280px);overflow:auto}
}

/* Chat Features v2 – modern side actions + existing messages support */
.vv-chat-row-inner{display:flex;align-items:flex-end;gap:10px;max-width:100%}
.vv-chat-row-inner.is-mine{flex-direction:row-reverse}
.vv-chat-bubble-wrap{display:flex;flex-direction:column;min-width:0;max-width:100%}
.vv-chat-actions-rail{position:relative;display:flex;align-items:center;gap:6px;flex:0 0 auto;opacity:.92}
.vv-chat-actions-rail.is-mine{justify-content:flex-end}
.vv-chat-action-btn{width:30px;height:30px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease, background .15s ease, opacity .15s ease}
.vv-chat-action-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.vv-chat-row:hover .vv-chat-action-btn,.vv-chat-row:focus-within .vv-chat-action-btn{opacity:1}
.vv-chat-react-picker{position:absolute;bottom:38px;left:0;display:flex;gap:4px;padding:6px 8px;border-radius:999px;background:#111827;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:4}
.vv-chat-actions-rail.is-mine .vv-chat-react-picker{left:auto;right:0}
.vv-chat-react-btn{border:0;background:transparent;font-size:18px;line-height:1;padding:2px 4px}
.vv-chat-reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vv-chat-reaction-pill{border:0;border-radius:999px;padding:2px 8px;background:rgba(255,255,255,.12);font-size:12px}
.vv-chat-reaction-pill.is-active{outline:1px solid rgba(59,130,246,.55);background:rgba(59,130,246,.12)}
.vv-chat-edited{font-size:11px;opacity:.72}
.vv-chat-row-highlight .vv-chat-bubble{box-shadow:0 0 0 2px rgba(59,130,246,.45)}
.vv-chat-reply-chip{display:block;width:100%;text-align:left;border:0;background:rgba(255,255,255,.10);border-left:3px solid rgba(59,130,246,.9);border-radius:10px;padding:7px 10px;margin-bottom:8px}
.vv-chat-reply-chip strong,.vv-chat-reply-chip span{display:block}
.vv-chat-reply-chip strong{font-size:12px;margin-bottom:2px}
.vv-chat-reply-chip span{font-size:12px;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width: 991.98px){
  .vv-chat-row-inner{gap:8px}
  .vv-chat-actions-rail{gap:5px}
  .vv-chat-action-btn{width:28px;height:28px}
  .vv-chat-react-picker{bottom:34px;max-width:min(92vw,280px);overflow:auto}
}

/* === Chat Features v2 UI fix: subtle centered action rail + mobile reply/composer layout === */
.vv-chat-row-inner{
    width:100%;
    align-items:center !important;
}

.vv-chat-bubble-wrap{
    flex:0 1 auto;
    min-width:0;
    max-width:min(78%,680px);
}

.vv-chat-bubble{
    max-width:100% !important;
}

.vv-chat-actions-rail{
    align-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    opacity:.82;
    margin-top:0;
    padding:0 2px;
}

.vv-chat-action-btn{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.04) !important;
    color:rgba(255,255,255,.86) !important;
    box-shadow:none !important;
    font-size:11px !important;
}

.vv-chat-action-btn:hover{
    background:rgba(255,255,255,.10) !important;
    border-color:rgba(255,255,255,.18) !important;
    transform:none !important;
}

.vv-chat-react-picker{
    bottom:30px !important;
}

.vv-chat-reactions{
    margin-top:5px;
}

.vv-chat-reaction-pill{
    padding:2px 7px;
    font-size:11px;
}

.vv-chat-reply-chip{
    width:100%;
    max-width:100%;
}

.vv-chat-reply-box{
    width:100%;
    display:block;
    margin-bottom:8px;
}

@media (max-width: 991.98px){
    .vv-chat-row-inner{
        gap:6px !important;
    }

    .vv-chat-bubble-wrap{
        max-width:min(80%,92vw);
    }

    .vv-chat-actions-rail{
        gap:6px;
        padding:0 1px;
    }

    .vv-chat-action-btn{
        width:22px !important;
        height:22px !important;
        min-width:22px !important;
        font-size:10px !important;
    }

    .vv-chat-react-picker{
        bottom:28px !important;
        max-width:min(84vw,260px);
        overflow:auto;
    }

    body.vv-chat-mobile-page .vv-chat-composer{
        display:grid !important;
        grid-template-columns:auto 1fr !important;
        grid-template-areas:
            "reply reply"
            "toolbar input"
            "panel panel" !important;
        align-items:center !important;
        gap:.35rem !important;
    }

    body.vv-chat-mobile-page .vv-chat-reply-box{
        grid-area:reply !important;
        width:100% !important;
        margin:0 0 .35rem 0 !important;
    }

    body.vv-chat-mobile-page .vv-chat-toolbar{
        grid-area:toolbar !important;
        order:unset !important;
        margin:0 !important;
    }

    body.vv-chat-mobile-page .vv-chat-composer .input-group{
        grid-area:input !important;
        order:unset !important;
        width:100% !important;
        min-width:0 !important;
    }

    body.vv-chat-mobile-page .vv-chat-emoji-panel,
    body.vv-chat-mobile-page .vv-chat-attachment-preview{
        grid-area:panel !important;
        order:unset !important;
        width:100% !important;
        margin-top:0 !important;
    }
}



/* Chat v6 Advanced UX */
.vv-chat-edited{
    margin-left:6px;
    opacity:.72;
    font-size:11px;
}

.vv-chat-live-badge[hidden]{
    display:none !important;
}

.vv-chat-status.is-read{
    color:#60a5fa;
}

[data-chat-user-status].is-online{
    color:#22c55e;
}

[data-chat-user-status].is-recent{
    color:rgba(255,255,255,.7);
}

.vv-chat-toast{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    padding:10px 14px;
    border-radius:14px;
    background:rgba(15,23,42,.92);
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.vv-auth-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  padding:.45rem;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.vv-auth-switch-tab{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1rem;
  border-radius:14px;
  text-decoration:none;
  color:rgba(226,232,240,.82);
  font-weight:700;
  letter-spacing:.01em;
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.vv-auth-switch-tab:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}
.vv-auth-switch-tab.is-active{
  color:#fff;
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
  box-shadow:0 10px 24px rgba(37,99,235,.28);
}

.vv-chat-row.is-deleted .vv-chat-bubble{
    opacity:.9;
}

.vv-chat-text.is-deleted{
    font-style:italic;
    opacity:.78;
}


.vv-chat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

.vv-chat-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vv-chat-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(2, 6, 23, .92);
}

.vv-chat-lightbox-dialog {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.vv-chat-lightbox-stage {
    width: 100%;
    max-width: min(96vw, 1180px);
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vv-chat-lightbox-stage img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 18px 70px rgba(0, 0, 0, .45);
}

.vv-chat-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .88);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

body.vv-chat-lightbox-open {
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .vv-chat-lightbox-dialog {
        padding: .75rem;
    }

    .vv-chat-lightbox-stage img {
        max-height: 86vh;
        border-radius: 14px;
    }

    .vv-chat-lightbox-close {
        top: .75rem;
        right: .75rem;
    }
}
.vv-mobile-media-viewer{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.96);
  z-index:2000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.vv-mobile-media-viewer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.vv-favorite-btn.is-favorited{
    background:#facc15 !important;
    border-color:#facc15 !important;
    color:#111827 !important;
}
.vv-favorite-btn,
#vvMainLikeBtn{
    transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.vv-btn-pop{
    animation:vvBtnPop .18s ease;
}
@keyframes vvBtnPop{
    0%{transform:scale(1);}
    50%{transform:scale(1.16);}
    100%{transform:scale(1);}
}
.vv-main-like-btn.is-liked{
    box-shadow:0 8px 20px rgba(239,68,68,.22);
}
.vv-favorite-btn.is-favorited{
    box-shadow:0 8px 20px rgba(250,204,21,.22);
}
.vv-mobile-media-viewer{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.96);
  z-index:2000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.vv-mobile-media-viewer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
@media (max-width: 768px){
  .vv-media-action-row,
  .vv-media-action-row.vv-media-action-row-equal{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
    width:100% !important;
    align-items:stretch !important;
  }
  .vv-media-action-row > form,
  .vv-media-action-row > a,
  .vv-media-action-row.vv-media-action-row-equal > form,
  .vv-media-action-row.vv-media-action-row-equal > a{
    width:100% !important;
    min-width:0 !important;
    display:block !important;
    margin:0 !important;
  }
  .vv-media-action-row > form > button,
  .vv-media-action-row > a,
  .vv-media-action-row.vv-media-action-row-equal > form > button,
  .vv-media-action-row.vv-media-action-row-equal > a{
    width:100% !important;
    min-width:0 !important;
    height:56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:18px !important;
    padding:0 10px !important;
  }
  #vvMainLikeBtn,
  #vvFavoriteBtn,
  #vvMediaDownloadBtn{
    width:100% !important;
    max-width:none !important;
  }
  #vvMainLikeBtn .vv-like-count{
    margin-left:8px !important;
  }
}
@media (max-width: 991.98px) and (display-mode: standalone) {
  body.vv-chat-mobile-page .vv-chat-composer {
	bottom: 0!important;
    padding-bottom: max(52px, env(safe-area-inset-bottom, 0px));
  }
}