/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg-primary: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: #EFF6FF;
    --primary-gradient: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    --accent: #3B82F6;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --text-blue: #1E3A8A;
    --border-color: #E2E8F0;
    --border-hover: #CBD5E1;
    --success: #10B981;
    --danger: #EF4444;
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.02);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.02);
    --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.03);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

html, body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-main);
    line-height: 1.5;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

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

main, .main-container, .walks-layout {
    flex: 1;
}

/* Header & Navigation */
header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    position: sticky;
    top: 0;
    z-index: 10000;
    pointer-events: auto;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
}

.header-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: .6rem 1rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    box-sizing: border-box;
    position: relative;
    z-index: 10000;
}

.logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.logo-img {
    height: 70px;
    width: auto;
    max-height: 72px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.logo-img:hover {
    transform: scale(1.03);
}

.logo-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.nav-links-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nav-gap, .1rem);
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    overflow: hidden; /* страховка: меню не наезжает на логотип и профиль */
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    z-index: 10001;
}

.nav-links-center::-webkit-scrollbar { display: none; }



.nav-link {
    text-decoration: none;
    color: #475569;
    font-weight: 600;
    font-size: var(--nav-font, .85rem);
    padding: .5rem var(--nav-pad-x, .45rem);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    position: relative;
    z-index: 10001;
    cursor: pointer;
    pointer-events: auto;
}

.nav-link:hover {
    color: var(--primary);
    background-color: transparent;
}

.nav-link.active {
    color: var(--primary);
    font-weight: 700;
    background-color: transparent;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: .52rem;
    right: .52rem;
    height: 3px;
    background: var(--primary);
    border-radius: 3px;
}

/* Dedicated red accent for the active giveaways section */
.giveaway-nav-link {
    color: #E11D48 !important;
    transition: none !important;
}

.giveaway-nav-link.active {
    color: #E11D48 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 8px rgba(225, 29, 72, 0.16);
}

.giveaway-nav-link.active::after {
    left: .75rem;
    right: .75rem;
    height: 4px;
    bottom: -3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #DC2626, #F43F5E, #FB7185);
    box-shadow: 0 3px 10px rgba(225, 29, 72, .35);
}

.giveaway-nav-link:hover { color: #BE123C !important; }

/* Same red accent inside the mobile More menu */
.mobile-more-item.giveaway-more-item {
    color: #E11D48 !important;
    transition: none !important;
}

.mobile-more-item.giveaway-more-item .mobile-more-item-icon {
    color: #E11D48 !important;
}

.mobile-more-item.giveaway-more-item.active,
.mobile-more-item.giveaway-more-item:active {
    background: #FFF1F2 !important;
    color: #E11D48 !important;
    font-weight: 800 !important;
}

.mobile-more-item.giveaway-more-item.active .mobile-more-item-icon,
.mobile-more-item.giveaway-more-item:active .mobile-more-item-icon {
    background: #FFE4E6 !important;
    color: #E11D48 !important;
}

[data-theme="dark"] .mobile-more-item.giveaway-more-item.active,
[data-theme="dark"] .mobile-more-item.giveaway-more-item:active {
    background: rgba(225, 29, 72, .16) !important;
    color: #FDA4AF !important;
}

[data-theme="dark"] .mobile-more-item.giveaway-more-item.active .mobile-more-item-icon,
[data-theme="dark"] .mobile-more-item.giveaway-more-item:active .mobile-more-item-icon {
    background: rgba(225, 29, 72, .24) !important;
    color: #FDA4AF !important;
}

.nav-auth-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex-shrink: 0;
    justify-self: end;
    grid-column: 3;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-left: .6rem;
    border-left: 1px solid var(--border-color);
}

.nav-user-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1750px) and (min-width: 821px) {
    .logo-img { height: 60px; max-height: 64px; }
    .nav-user-name { max-width: 130px; }
    .header-container { gap: .7rem; padding-left: .9rem; padding-right: .9rem; }
    #quick-mood-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 1300px) and (min-width: 821px) {
    #quick-mood-label { display: none; }
    .quick-mood-btn { padding-left: .55rem; padding-right: .5rem; }
}

@media (max-width: 1380px) and (min-width: 821px) {
    .header-container {
        grid-template-columns: minmax(125px, auto) minmax(0, 1fr) minmax(250px, auto);
        padding-right: 1rem;
        padding-left: 1rem;
        gap: .65rem;
    }

    .nav-links-center { width: 100%; justify-content: center; }

    .nav-user { gap: .45rem; padding-left: .6rem; }
    .nav-user-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 1120px) and (min-width: 821px) {
    .header-container { grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto; }
    .nav-user-name { display: none; }
    .nav-user { padding-left: .5rem; }
}

.nav-user-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
}

.nav-user-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-blue);
    text-decoration: none;
}

/* Layout */
main {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto 4rem auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Standalone admin panel page (no site header/footer) */
main.admin-standalone-main {
    max-width: 1400px;
    margin-top: 2.5rem;
}

/* Chat page: remove bottom margin so chat fills viewport cleanly */
main:has(.chat-container) {
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/* Typography & Titles */
.section-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text-blue);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: -0.3px;
}

/* Cards & Layout Grids */
.grid-users {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.card-user {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.card-user:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.4);
}

.card-photo-wrapper {
    position: relative;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    background-color: #F1F5F9;
}

.card-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-mood-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-blue);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.card-body {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-name-age {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.25rem;
}

.card-status {
    font-size: 0.92rem;
    color: #334155;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-rating-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Mood Tabs Bar & Filters */
.tabs-mood {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    padding: 4px 2px 10px 2px;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.tabs-mood::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.tab-mood-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F8FAFC;
    color: #475569;
    border: 1.5px solid #E2E8F0;
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    text-decoration: none;
}

.tab-mood-item:hover {
    background: #FFFFFF;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.tab-mood-item.active {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF !important;
    border-color: #2563EB !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.tab-mood-item.active svg {
    stroke: #FFFFFF !important;
}

.card-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1rem;
}

.interest-tag {
    font-size: 0.78rem;
    background-color: #EFF6FF;
    color: #1E40AF;
    border: 1px solid #BFDBFE;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.card-footer {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.btn-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    text-decoration: none;
    background-color: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    box-sizing: border-box;
}

.btn-card:hover {
    background-color: var(--primary);
    color: white;
}

/* Filter Form Box */
.filter-form-box {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group-search {
    flex: 1 1 240px;
}

.filter-group-gender {
    flex: 0 0 140px;
}

.filter-reset-btn {
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Tabs Navigation */
.tabs-mood {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
}

.tab-mood-item {
    text-decoration: none;
    padding: 0.45rem 1rem;
    height: 38px;
    box-sizing: border-box;
    background-color: var(--bg-card);
    border: 1px solid #CBD5E1;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
    white-space: nowrap;
}

.tab-mood-item:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: var(--primary-light);
}

.tab-mood-item.active {
    border-color: var(--primary);
    color: #FFFFFF;
    background-color: var(--primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* Forms (Login/Register) */
.auth-wrapper {
    max-width: 500px;
    margin: 4rem auto;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-blue);
    margin-bottom: 0.5rem;
    text-align: center;
}

.auth-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    transition: var(--transition);
    outline: none;
    color: var(--text-main);
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input-file {
    padding: 0.5rem 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.btn-submit {
    display: block;
    width: 100%;
    background: var(--primary-gradient);
    color: white;
    font-weight: 700;
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    transition: var(--transition);
    margin-top: 1.5rem;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.btn-submit:active {
    transform: translateY(0);
}

.auth-redirect {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.auth-redirect a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.auth-redirect a:hover {
    text-decoration: underline;
}

/* Leaflet Map styles */
.map-container {
    width: 100%;
    height: 300px;
    min-height: 280px;
    background-color: #E2E8F0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.map-help-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

/* Profiles detail styling */
.profile-detail-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .profile-detail-grid {
        grid-template-columns: 1fr;
    }
}

.profile-sidebar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.profile-main-photo {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
    aspect-ratio: 1/1;
    margin-bottom: 1.25rem;
    border: 3px solid var(--primary-light);
}

/* ===== Photo gallery on profile page ===== */
.profile-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
}
.gallery-item {
    background: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gallery-item:hover {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}
.gallery-item.is-avatar {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}
.gallery-photo-wrap {
    position: relative;
}
.gallery-photo {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: zoom-in;
    display: block;
}
.gallery-avatar-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(90deg, #1D4ED8, #6D28D9);
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    box-shadow: 0 3px 8px rgba(29, 78, 216, 0.35);
}
.gallery-caption {
    font-size: 0.8rem;
    color: var(--text-blue);
    min-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gallery-owner-controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.gallery-caption-form {
    display: flex;
    gap: 0.35rem;
    margin: 0;
}
.gallery-caption-input {
    flex: 1;
    min-width: 0;
    padding: 5px 10px;
    font-size: 0.78rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #FFFFFF;
    font-family: inherit;
}
.gallery-caption-input:focus {
    outline: 2px solid var(--primary-light);
    border-color: var(--primary);
}
.gallery-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--border-color);
    background: #FFFFFF;
    color: var(--text-blue);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.gallery-ctrl-btn:hover {
    background: var(--primary-light);
}
.gallery-ctrl-avatar {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #BFDBFE;
}
.gallery-ctrl-delete {
    background: #FDE8E8;
    color: var(--danger);
    border-color: #FBD5D5;
}

/* ===== Custom gallery uploader (drag&drop zone + previews) ===== */
.gallery-upload-zone {
    border: 2px dashed #BFDBFE;
    background: linear-gradient(135deg, #F8FAFF 0%, #EFF6FF 100%);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.gallery-upload-zone:hover,
.gallery-upload-zone.dragover {
    border-color: var(--primary);
    background: #EFF6FF;
    transform: scale(1.01);
}
.gallery-upload-zone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--primary);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
    margin-bottom: 0.7rem;
}
.gallery-upload-zone-title {
    font-weight: 700;
    color: var(--text-blue);
    font-size: 1rem;
}
.gallery-upload-zone-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
.gallery-upload-zone-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}
.gallery-preview-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}
.gallery-preview-item {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    animation: galleryPreviewIn 0.25s ease both;
}
@keyframes galleryPreviewIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
.gallery-preview-item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}
.gallery-preview-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.65);
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.gallery-preview-remove:hover {
    background: var(--danger);
}
.gallery-preview-caption {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 0.78rem;
    font-family: inherit;
    background: #F8FAFC;
    min-width: 0;
}
.gallery-preview-caption:focus {
    outline: 2px solid var(--primary-light);
    border-color: var(--primary);
    background: #FFFFFF;
}
.gallery-upload-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

/* ===== Registration consent checkboxes ===== */
.reg-consents {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
}
.consent-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-blue);
    cursor: pointer;
    line-height: 1.45;
}
.consent-item input {
    margin-top: 2px;
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    cursor: pointer;
}
.consent-item a {
    color: var(--primary);
    font-weight: 600;
}

/* ===== Legal document pages (privacy.php, terms.php) ===== */
.doc-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border-color);
    padding: 0.8rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
}
.doc-header-title {
    font-weight: 800;
    color: var(--text-blue);
    font-size: 1rem;
}
.doc-back-link {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.doc-back-link:hover { text-decoration: underline; }
.doc-main {
    max-width: 900px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}
.doc-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    padding: 2rem;
}
.doc-card h1 {
    color: var(--text-blue);
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}
.doc-card h2 {
    color: var(--text-blue);
    font-size: 1.05rem;
    margin: 1.4rem 0 0.5rem;
}
.doc-card p,
.doc-card li {
    color: var(--text-blue);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.doc-card ul { padding-left: 1.2rem; }
.doc-card a { color: var(--primary); }
.doc-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.doc-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.doc-iframe {
    width: 100%;
    height: 75vh;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #F8FAFC;
}

.profile-info-item {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.profile-info-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.profile-info-val {
    font-size: 1rem;
    color: var(--text-main);
    font-weight: 500;
}

.profile-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-section-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    max-width: 100%;
}

.profile-section-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}

.profile-section-title-wrap .profile-section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.profile-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-blue);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.3;
    word-break: break-word;
}

.profile-section-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* Reviews List */
.reviews-container {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Interactive 5-Star Rating Component */
.interactive-star-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.star-rating-btn {
    background: transparent;
    border: none;
    padding: 3px;
    cursor: pointer;
    color: #CBD5E1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: transform 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.star-rating-btn svg {
    width: 26px;
    height: 26px;
}

.star-rating-btn:hover,
.star-rating-btn:active {
    transform: scale(1.18);
}

.star-rating-btn.active,
.star-rating-btn.hover {
    color: #F59E0B; /* Golden star */
}

.rating-label-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: #D97706;
    margin-left: 8px;
}

[data-theme="dark"] .rating-label-text {
    color: #FBBF24;
}

/* Review Textarea Sizing & Contrast */
textarea.form-input.review-textarea,
textarea.form-input {
    min-height: 110px !important;
    line-height: 1.5 !important;
    padding: 0.75rem 1rem !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* Modern Clean Review Card Layout */
.review-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.review-item:last-child {
    margin-bottom: 0;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0.65rem;
}

.review-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.review-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.review-author {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-blue, #1E293B);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.review-author:hover {
    color: var(--primary);
}

.review-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1;
}

.review-meta-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.review-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #F59E0B;
}

.review-comment {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-main);
    word-break: break-word;
    margin: 0;
}

/* Walks Section styling */
.walks-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.walks-right-column {
    position: sticky;
    top: 90px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1150px) {
    .walks-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .walks-right-column {
        position: static;
    }
}

.walks-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.walk-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: var(--transition);
}

.walk-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

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

.walk-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-blue);
}

.walk-creator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.9rem;
}

.walk-creator:hover {
    color: var(--primary);
}

.walk-creator-photo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.walk-details-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #475569;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #F1F5F9;
}

.walk-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.walk-detail-item strong {
    color: var(--text-main);
}

.walk-desc {
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.5;
}

.walk-card-footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #F1F5F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.walk-criteria-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    background-color: #F1F5F9;
    color: var(--text-muted);
    padding: 5px 11px;
    border-radius: 12px;
    font-weight: 500;
}

.walk-criteria-badge.match {
    background-color: #DEF7EC;
    color: #03543F;
}

.walk-criteria-badge.no-match {
    background-color: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
}

/* Locked Walk Details */
.walk-locked-alert {
    background-color: var(--primary-light);
    border: 1px dashed var(--primary);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    margin-top: 0.5rem;
}

.walk-locked-text {
    font-size: 0.85rem;
    color: var(--text-blue);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

/* Chat Modules - Premium WOW UI Redesign */
.chat-container {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Fill all remaining viewport height after the header */
    height: calc(100vh - var(--header-height, 130px) - 3rem);
    min-height: 520px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
    border-radius: var(--radius-lg);
}

@media (max-width: 840px) {
    .chat-container {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 70vh;
    }
}

.chat-rooms-sidebar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Sidebar Search Box */
.chat-search-wrapper {
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}
.chat-search-input {
    background: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-main);
    transition: all 0.2s ease;
}
.chat-search-input:focus {
    background: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Site Navbar Unread Messages Badge (Red Circle) */
.nav-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #EF4444;
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    margin-left: 6px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    vertical-align: middle;
    animation: nav-badge-pulse 2s infinite ease-in-out;
}
@keyframes nav-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Sidebar Delete Dialog Icon Button */
.btn-sidebar-delete-dialog {
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    flex-shrink: 0;
    transition: all 0.18s ease;
}
.chat-room-btn:hover .btn-sidebar-delete-dialog {
    display: inline-flex;
}
.btn-sidebar-delete-dialog:hover {
    background: #EF4444;
    color: #FFFFFF;
    transform: scale(1.1);
}
.chat-room-btn.active .btn-sidebar-delete-dialog {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}
.chat-room-btn.active .btn-sidebar-delete-dialog:hover {
    background: #EF4444;
    color: #FFFFFF;
}

/* Scrollable Container for all 15+ dialogs and rooms */
.chat-sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}
.chat-sidebar-scroll::-webkit-scrollbar {
    width: 5px;
}
.chat-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.chat-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 10px;
}
.chat-sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
}

.sidebar-section-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Section Header */
.sidebar-section-title {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.5rem 0 0.25rem 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar-section-title:first-child {
    margin-top: 0.1rem;
}

/* Chat Item (Room / Dialog) */
.chat-room-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.88rem;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    position: relative;
    user-select: none;
    cursor: pointer;
}

.chat-room-btn:hover {
    background: #F1F5F9;
    transform: none;
}

.chat-room-btn.active {
    background: #2563EB;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

.chat-room-btn.active .chat-room-title,
.chat-room-btn.active .chat-dialog-name {
    color: #FFFFFF !important;
}
.chat-room-btn.active .dialog-status-text {
    color: rgba(255, 255, 255, 0.82) !important;
}
.chat-room-btn.active .dialog-status-text.online {
    color: #86EFAC !important;
}
.chat-room-btn.active .chat-room-icon-box {
    background: rgba(255, 255, 255, 0.2) !important;
}
.chat-room-btn.active svg {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    fill: #FFFFFF;
    color: #FFFFFF;
}

/* Avatar with Online Status Indicator */
.chat-dialog-avatar-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.chat-dialog-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #E2E8F0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.chat-avatar-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    background: #94A3B8;
    transition: all 0.2s ease;
}
.chat-avatar-status-dot.online {
    background: #10B981;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3);
}
.chat-room-btn.active .chat-avatar-status-dot {
    border-color: #2563EB;
}

/* Dialog Meta Text */
.chat-dialog-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-dialog-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.chat-dialog-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-dialog-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.dialog-status-text {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dialog-status-text.online {
    color: #059669;
    font-weight: 600;
}

.chat-main {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Moderator badge for admin messages/dialogs */
.chat-admin-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, #1D4ED8, #6D28D9);
    color: #FFFFFF;
    white-space: nowrap;
    vertical-align: middle;
}

/* Banner shown inside the chat area when the admin enters chats from the panel */
.chat-admin-mode-banner {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.55rem 1.2rem;
    background: linear-gradient(90deg, #EFF6FF, #EEF2FF);
    border-bottom: 1px solid #BFDBFE;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1D4ED8;
}
.chat-admin-mode-text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.chat-admin-mode-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Chats page in admin mode: no site header, chat fills the viewport */
main.chat-admin-standalone {
    margin: 1rem auto;
}

.chat-header {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    z-index: 5;
    min-height: 56px;
    box-sizing: border-box;
    width: 100%;
}

.chat-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.chat-header-avatar-link {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    line-height: 1;
}

.chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    display: block;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
}

.chat-header-room-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary);
    flex-shrink: 0;
}

.chat-header-info-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
    justify-content: center;
    gap: 2px;
}

.chat-header-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.chat-header-user-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-blue);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
    line-height: 1.25;
}

.chat-header-user-name:hover {
    color: var(--primary);
}

.user-online-badge-wrapper {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.chat-header-subtitle {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1.2;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Telegram Light Wallpaper Background */
.chat-messages-box {
    flex-grow: 1;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background-color: #EBF3FA;
    background-image: 
        radial-gradient(rgba(37, 99, 235, 0.09) 1.5px, transparent 1.5px),
        radial-gradient(rgba(148, 163, 184, 0.16) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px;
    scroll-behavior: auto;
    position: relative;
}

.chat-messages-box::-webkit-scrollbar {
    width: 6px;
}

.chat-messages-box::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

/* Telegram Message Items & Bubbles */
.chat-message-item {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    max-width: 78%;
    min-width: 0;
    position: relative;
    margin-top: 12px;
    box-sizing: border-box;
    animation: msg-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes msg-pop-in {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-message-item.self {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg-photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    border: 2px solid #FFFFFF;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.chat-msg-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    flex: 0 1 auto;
}

.chat-msg-username {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1D4ED8;
    padding-left: 6px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chat-message-item.self .chat-msg-username {
    text-align: right;
    padding-right: 6px;
    color: #2563EB;
}

/* Telegram Speech Bubbles with Tails */
.chat-msg-bubble {
    position: relative;
    background: #FFFFFF;
    color: #0F172A;
    border: 1px solid rgba(203, 213, 225, 0.85);
    padding: 0.55rem 0.85rem;
    border-radius: 16px 16px 16px 4px;
    font-size: 0.92rem;
    line-height: 1.45;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    word-break: break-word;
    overflow-wrap: anywhere;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.chat-msg-text {
    display: inline;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.chat-message-item:not(.self) .chat-msg-bubble::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #FFFFFF transparent transparent;
}

.chat-message-item.self .chat-msg-bubble {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    border: 1px solid rgba(37, 99, 235, 0.35);
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.chat-message-item.self .chat-msg-bubble::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #1D4ED8 transparent transparent transparent;
}

/* Telegram Inline Meta (Time & Checkmarks) */
.chat-msg-meta-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 500;
    margin-left: 8px;
    float: right;
    position: relative;
    top: 4px;
    margin-bottom: -1px;
    user-select: none;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.chat-message-item:not(.self) .chat-msg-meta-inline {
    color: #64748B;
}

.chat-message-item.self .chat-msg-meta-inline {
    color: rgba(255, 255, 255, 0.85);
}

.msg-read-status {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #64748B;
}

.chat-message-item.self .msg-read-status {
    color: rgba(255, 255, 255, 0.7);
}

.chat-message-item.self .msg-read-status.read {
    color: #7FE8D3; /* Vivid teal checkmark — perfect on blue */
    filter: drop-shadow(0 0 3px rgba(127, 232, 211, 0.5));
}

.msg-read-status svg {
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}

.msg-read-status svg path {
    stroke: currentColor !important;
    fill: none !important;
}

/* Telegram Hover Action Popover Bar */
.chat-msg-actions {
    position: absolute;
    top: -34px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(203, 213, 225, 0.9);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    border-radius: 20px;
    padding: 3px 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
    white-space: nowrap;
    pointer-events: auto;
}

.chat-message-item.self .chat-msg-actions {
    right: 0;
    left: auto;
}

.chat-message-item:not(.self) .chat-msg-actions {
    left: 0;
    right: auto;
}

.chat-message-item:hover .chat-msg-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(-2px);
}

.chat-action-btn {
    background: transparent;
    border: none;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    user-select: none;
}

.chat-action-btn svg {
    fill: currentColor;
    flex-shrink: 0;
}

.chat-action-btn:hover {
    background: #F1F5F9;
    color: #1E293B;
}

.chat-action-btn.delete-btn:hover {
    background: #FEE2E2;
    color: #EF4444;
}

/* Custom Delete Confirmation Modal System */
.custom-modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modal-fade-in 0.2s ease-out forwards;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.custom-modal-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 2rem 1.75rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(226, 232, 240, 0.9);
    transform: scale(0.95);
    animation: modal-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-sizing: border-box;
}

@keyframes modal-pop {
    to { transform: scale(1); }
}

.custom-modal-icon-ring {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #EF4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.custom-modal-icon-ring svg {
    fill: #EF4444;
}

.custom-modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 0.5rem 0;
}

.custom-modal-desc {
    font-size: 0.9rem;
    color: #64748B;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.custom-modal-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-modal-cancel {
    flex: 1;
    height: 42px;
    background: #F1F5F9;
    color: #475569;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-cancel:hover {
    background: #E2E8F0;
    color: #0F172A;
}

.btn-modal-delete {
    flex: 1;
    height: 42px;
    background: #EF4444;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    transition: all 0.2s ease;
}

.btn-modal-delete:hover {
    background: #DC2626;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
}

.chat-action-btn.delete-btn:hover svg {
    fill: #EF4444;
}

/* Unread Badge Notification System */
.badge-unread {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
    border: 2px solid #FFFFFF;
    line-height: 1;
    box-sizing: border-box;
    animation: badge-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-room-btn.active .badge-unread {
    background: #FFFFFF;
    color: #1D4ED8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: none;
}

@keyframes badge-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Sidebar Search Box */
.chat-search-wrapper {
    padding: 0.5rem 0.5rem 0.85rem 0.5rem;
}

.chat-search-input {
    width: 100%;
    box-sizing: border-box;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    outline: none;
    color: var(--text-main);
    transition: var(--transition);
}

.chat-search-input:focus {
    background: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Telegram Bottom Input Bar */
.chat-input-form {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.chat-input-main-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

.chat-input-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background: #F1F5F9;
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 4px 16px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-input-wrapper:focus-within {
    background: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12);
}

.chat-input {
    flex-grow: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-main);
    padding: 0.6rem 0;
}

.btn-send {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.btn-send svg {
    width: 18px;
    height: 18px;
    fill: white;
    transition: transform 0.25s ease;
    margin-left: 2px;
}

.btn-send:hover {
    transform: scale(1.08) rotate(-6deg);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5);
}

.btn-send:active {
    transform: scale(0.95);
}

/* Meetups Dashboard Widget */
.meetup-widget {
    margin-bottom: 2rem;
}

.meetup-widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-blue);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.walks-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.walk-action-wrap {
    margin-left: auto;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}

.meetup-card {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.meetup-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.meetup-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.meetup-card-desc {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    font-weight: 450;
}

.btn-participate, .meetup-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary-gradient);
    color: white;
    font-weight: 700;
    height: 42px;
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 0.86rem;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
    transition: var(--transition);
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}

#header-register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary-gradient);
    color: white;
    font-weight: 700;
    height: 42px;
    padding: 0 1.25rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
    transition: var(--transition);
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}

.btn-participate:hover, #header-register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
    color: white;
}

.btn-participate:active, #header-register-btn:active {
    transform: translateY(0);
}

.walks-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.btn-section-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary-gradient);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.84rem;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-sm, 8px);
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.btn-section-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
    color: #FFFFFF;
}

.btn-section-action:active {
    transform: translateY(0);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    height: 42px;
    width: auto;
    min-width: fit-content;
    max-width: 100%;
    padding: 0 1.25rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid rgba(37, 99, 235, 0.15);
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition);
    white-space: nowrap;
    box-sizing: border-box;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary-gradient);
    color: white;
    font-weight: 700;
    height: 42px;
    width: auto;
    min-width: fit-content;
    max-width: 100%;
    padding: 0 1.25rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 0.86rem;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
    transition: var(--transition);
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}

.afisha-mobile-action-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
}

.afisha-mobile-action-grid.has-ticket {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.afisha-mobile-action-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px;
    height: auto;
    padding: 10px 12px;
    box-sizing: border-box;
    font-size: .9rem;
    font-weight: 700;
    white-space: normal;
    text-align: center;
}

.afisha-cover-upload { width: 100%; }
.afisha-details-card { padding:0 !important; overflow:hidden; }
.afisha-details-head { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border-color); background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(14,165,233,.025)); }
.afisha-details-head-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; border-radius:12px; background:var(--primary); color:#fff; box-shadow:0 6px 14px rgba(37,99,235,.2); }
.afisha-details-head-icon svg path { fill:#fff !important; }
.afisha-details-head .avito-section-heading { margin:0; padding:0; border:0; font-size:1.12rem; }
.afisha-details-head p { margin:3px 0 0; color:var(--text-muted); font-size:.76rem; }
.afisha-details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:8px 20px 14px; }
.afisha-detail-row { display:grid; grid-template-columns:38px minmax(90px,.7fr) minmax(0,1.3fr); align-items:center; gap:10px; min-width:0; padding:14px 10px; border-bottom:1px solid var(--border-color); }
.afisha-detail-row:nth-last-child(-n+2) { border-bottom:0; }
.afisha-detail-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:rgba(37,99,235,.09); color:var(--primary); }
.afisha-detail-icon svg path { fill:currentColor !important; }
.afisha-detail-icon--green { background:rgba(16,185,129,.1); color:#059669; }
.afisha-detail-icon--violet { background:rgba(139,92,246,.1); color:#7C3AED; }
.afisha-detail-row .avito-spec-label { color:var(--text-muted); font-size:.78rem; font-weight:600; }
.afisha-detail-row .avito-spec-val { min-width:0; color:var(--text-main); font-size:.86rem; font-weight:800; text-align:right; overflow-wrap:anywhere; }
.afisha-detail-subvalue { display:block; margin-top:3px; color:var(--text-muted); font-size:.72rem; font-weight:500; }
.afisha-price-badge { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:4px 10px; border-radius:999px; background:rgba(16,185,129,.1); color:#047857; font-size:.78rem; font-weight:900; }
.afisha-people-badge { color:#7C3AED !important; }
[data-theme="dark"] .afisha-details-head { background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(14,165,233,.04)); }
[data-theme="dark"] .afisha-price-badge { color:#6EE7B7; background:rgba(16,185,129,.14); }
@media(max-width:700px){ .afisha-details-grid{grid-template-columns:1fr;padding:6px 14px 12px}.afisha-detail-row,.avito-details-box .afisha-detail-row{display:grid !important;grid-template-columns:36px minmax(82px,.7fr) minmax(0,1.3fr) !important;align-items:center !important;gap:8px !important;padding:12px 2px !important;border-bottom:1px solid var(--border-color) !important}.afisha-detail-row:last-child{border-bottom:0 !important}.afisha-detail-row:nth-last-child(2){border-bottom:1px solid var(--border-color) !important}.afisha-detail-row .avito-spec-val{text-align:right !important}.afisha-details-head{padding:16px}.afisha-details-head-icon{width:38px;height:38px;flex-basis:38px} }
.promo-logo-uploader {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 10px;
    border: 1px dashed #93C5FD;
    border-radius: 14px;
    background: var(--bg-secondary);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.promo-logo-uploader:hover { border-color:var(--primary); background:#EFF6FF; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.promo-logo-uploader:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.promo-logo-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.promo-logo-preview { display:flex; align-items:center; justify-content:center; width:76px; height:70px; overflow:hidden; border:1px solid var(--border-color); border-radius:11px; background:var(--bg-card); color:var(--primary); }
.promo-logo-preview img { display:block; width:100%; height:100%; padding:6px; object-fit:contain; box-sizing:border-box; }
.promo-logo-placeholder[hidden], .promo-logo-preview img[hidden] { display:none; }
.promo-logo-copy { min-width:0; }
.promo-logo-copy strong { display:block; margin-bottom:4px; color:var(--text-main); font-size:.84rem; }
.promo-logo-copy small { display:block; overflow:hidden; color:var(--text-muted); font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }
.promo-logo-button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:7px 12px; border-radius:9px; background:var(--primary); color:#fff; font-size:.75rem; font-weight:800; white-space:nowrap; }
.promo-logo-remove { display:flex; align-items:center; gap:6px; margin-top:7px; color:#BE123C; font-size:.76rem; cursor:pointer; }
[data-theme="dark"] .promo-logo-uploader:hover { background:#191C24; }
@media(max-width:620px){ .promo-logo-uploader{grid-template-columns:64px minmax(0,1fr)}.promo-logo-preview{width:64px;height:60px}.promo-logo-button{grid-column:1/-1;width:100%} }

/* Compact promo-code workspace in admin */
.promo-admin-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.promo-admin-header p { margin:4px 0 0; color:var(--text-muted); font-size:.8rem; }
.promo-admin-eyebrow { display:inline-flex; align-items:center; gap:6px; margin-bottom:7px; color:#15803D; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.promo-admin-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.promo-admin-stats > div { display:flex; align-items:center; gap:9px; min-height:54px; padding:9px 13px; border:1px solid var(--border-color); border-radius:13px; background:var(--bg-card); box-shadow:var(--shadow-sm); box-sizing:border-box; }
.promo-admin-stats strong { color:var(--text-main); font-size:1.25rem; }
.promo-admin-stats span { color:var(--text-muted); font-size:.76rem; }
.promo-admin-create-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; margin-bottom:18px; }
.promo-admin-card { margin:0 !important; padding:16px !important; border-radius:16px !important; }
.promo-admin-card-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid var(--border-color); }
.promo-admin-card-head > span { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:0 0 30px; border-radius:9px; background:var(--primary); color:#fff; font-size:.78rem; font-weight:900; }
.promo-admin-card-head h3 { margin:0; color:var(--text-main); font-size:1rem; }
.promo-admin-card-head p { margin:2px 0 0; color:var(--text-muted); font-size:.7rem; }
.promo-admin-form .form-row { gap:10px; }
.promo-admin-form .form-group { margin-bottom:10px; }
.promo-admin-form .form-label { margin-bottom:5px; font-size:.74rem; }
.promo-admin-form .form-input { min-height:40px; padding:8px 11px; font-size:.82rem; border-radius:10px; }
.promo-admin-form textarea.form-input { min-height:68px; }
.promo-admin-form .promo-logo-uploader { min-height:76px; grid-template-columns:58px minmax(0,1fr) auto; padding:8px; }
.promo-admin-form .promo-logo-preview { width:58px; height:54px; }
.promo-admin-more { margin:4px 0 10px; overflow:hidden; border:1px solid var(--border-color); border-radius:11px; background:var(--bg-secondary); }
.promo-admin-more > summary { display:flex; align-items:center; gap:6px; padding:9px 11px; color:var(--primary); font-size:.76rem; font-weight:800; cursor:pointer; list-style:none; }
.promo-admin-more > summary::-webkit-details-marker { display:none; }
.promo-admin-more-body { padding:10px; border-top:1px solid var(--border-color); background:var(--bg-card); }
.promo-admin-form-footer { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:11px; border-top:1px solid var(--border-color); }
.promo-admin-check { display:flex; align-items:center; gap:6px; color:var(--text-main); font-size:.76rem; font-weight:700; }
.promo-admin-position { display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.72rem; }
.promo-admin-position .form-input { width:64px; min-height:36px; padding:6px 8px; }
.promo-admin-form-footer .btn-primary,.promo-admin-form-footer .btn-secondary,.promo-admin-form-footer .btn-danger { width:auto; min-width:0; min-height:38px; height:auto; padding:8px 13px; font-size:.76rem; }
.promo-admin-list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:18px 0 8px; }
.promo-admin-list-head h3 { margin:0; color:var(--text-main); font-size:1rem; }
.promo-admin-list-head p { margin:2px 0 0; color:var(--text-muted); font-size:.7rem; }
.promo-admin-list-head > span { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:26px; padding:0 8px; border-radius:999px; background:var(--primary-light); color:var(--primary); font-size:.72rem; font-weight:900; }
.promo-admin-list { display:grid; gap:7px; }
.promo-admin-entity { overflow:hidden; border:1px solid var(--border-color); border-radius:13px; background:var(--bg-card); box-shadow:0 2px 7px rgba(15,23,42,.04); }
.promo-admin-entity > summary { display:grid; grid-template-columns:44px minmax(0,1fr) auto auto 20px; align-items:center; gap:10px; min-height:62px; padding:8px 12px; cursor:pointer; list-style:none; }
.promo-admin-entity > summary::-webkit-details-marker { display:none; }
.promo-admin-entity[open] { border-color:rgba(37,99,235,.3); box-shadow:0 7px 18px rgba(15,23,42,.07); }
.promo-admin-entity[open] .promo-admin-chevron { transform:rotate(180deg); }
.promo-admin-entity-logo,.promo-admin-offer-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; overflow:hidden; border-radius:10px; background:var(--bg-secondary); color:var(--primary); font-weight:900; }
.promo-admin-entity-logo img { width:100%; height:100%; padding:4px; object-fit:contain; box-sizing:border-box; }
.promo-admin-entity-main { min-width:0; }
.promo-admin-entity-main strong,.promo-admin-entity-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.promo-admin-entity-main strong { color:var(--text-main); font-size:.84rem; }
.promo-admin-entity-main small { margin-top:2px; color:var(--text-muted); font-size:.68rem; }
.promo-admin-entity-count { color:var(--text-muted); font-size:.7rem; white-space:nowrap; }
.promo-admin-status { display:inline-flex; align-items:center; justify-content:center; min-height:25px; padding:3px 8px; border-radius:999px; font-size:.66rem; font-weight:900; white-space:nowrap; }
.promo-admin-status.is-live { background:rgba(16,185,129,.1); color:#047857; }
.promo-admin-status.is-hidden { background:rgba(148,163,184,.13); color:#64748B; }
.promo-admin-chevron { color:var(--text-muted); font-size:1rem; transition:transform .2s ease; }
.promo-admin-discount { color:#15803D; font-size:.84rem; font-weight:900; white-space:nowrap; }
.promo-admin-edit-form { padding:14px; border-top:1px solid var(--border-color); background:var(--bg-secondary); }
.promo-admin-edit-form .form-group { margin-bottom:10px; }
.promo-admin-edit-form .form-label { margin-bottom:5px; font-size:.73rem; }
.promo-admin-edit-form .form-input { min-height:39px; padding:8px 10px; font-size:.8rem; }
.promo-admin-reveals { display:inline-flex; align-items:center; gap:5px; color:var(--text-muted); font-size:.7rem; }
[data-theme="dark"] .promo-admin-status.is-live { color:#6EE7B7; background:rgba(16,185,129,.14); }
[data-theme="dark"] .promo-admin-discount,[data-theme="dark"] .promo-admin-eyebrow { color:#86EFAC; }
@media(max-width:980px){ .promo-admin-create-grid{grid-template-columns:1fr}.promo-admin-stats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:620px){ .promo-admin-header{align-items:stretch;flex-direction:column}.promo-admin-header .btn-secondary{width:100%}.promo-admin-stats{grid-template-columns:1fr}.promo-admin-stats>div{min-height:46px}.promo-admin-card{padding:12px !important}.promo-admin-form .form-row,.promo-admin-edit-form .form-row{grid-template-columns:1fr}.promo-admin-form .promo-logo-uploader{grid-template-columns:54px minmax(0,1fr)}.promo-admin-form .promo-logo-preview{width:54px;height:50px}.promo-admin-entity>summary{grid-template-columns:40px minmax(0,1fr) auto 18px;gap:8px}.promo-admin-entity-logo,.promo-admin-offer-icon{width:40px;height:40px}.promo-admin-entity-count{display:none}.promo-admin-status{grid-column:2}.promo-admin-discount{grid-column:2}.promo-admin-chevron{grid-column:4;grid-row:1/3}.promo-admin-form-footer{align-items:stretch}.promo-admin-form-footer .btn-primary,.promo-admin-form-footer .btn-secondary,.promo-admin-form-footer .btn-danger{flex:1}.promo-admin-position{margin-left:auto} }
.promo-company-create { position:relative; }
.promo-company-create > summary { list-style:none; cursor:pointer; }
.promo-company-create > summary::-webkit-details-marker { display:none; }
.promo-company-create[open] { width:100%; }
.promo-company-create[open] > summary { margin-left:auto; width:max-content; }
.promo-company-create > .promo-admin-card { margin-top:12px !important; }
.promo-company-search { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; margin-bottom:12px; }
.promo-company-search .form-input { min-height:42px; }
.promo-company-search .btn-secondary { width:auto; min-width:90px; }
.promo-company-directory { display:grid; gap:8px; }
.promo-company-row { display:grid; grid-template-columns:48px minmax(0,1fr) 90px auto 90px; align-items:center; gap:12px; min-height:68px; padding:9px 14px; border:1px solid var(--border-color); border-radius:14px; background:var(--bg-card); box-shadow:0 2px 8px rgba(15,23,42,.04); text-decoration:none; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.promo-company-row:hover { transform:translateY(-1px); border-color:rgba(37,99,235,.35); box-shadow:0 7px 18px rgba(15,23,42,.07); }
.promo-company-metric { text-align:right; }
.promo-company-metric strong,.promo-company-metric small { display:block; }
.promo-company-metric strong { color:var(--text-main); font-size:.9rem; }
.promo-company-metric small { color:var(--text-muted); font-size:.65rem; }
.promo-company-open { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; color:var(--primary); font-size:.72rem; font-weight:800; white-space:nowrap; }
.promo-company-pagination { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:14px; flex-wrap:wrap; }
.promo-company-pagination a { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px; border:1px solid var(--border-color); border-radius:9px; background:var(--bg-card); color:var(--text-main); font-size:.75rem; font-weight:800; text-decoration:none; }
.promo-company-pagination a.active { border-color:var(--primary); background:var(--primary); color:#fff; }
.promo-admin-empty { padding:28px 16px; border:1px dashed var(--border-color); border-radius:13px; color:var(--text-muted); font-size:.82rem; text-align:center; }
.promo-company-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; color:var(--primary); font-size:.78rem; font-weight:800; text-decoration:none; }
.promo-company-detail-head { display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:15px; padding:16px; margin-bottom:12px; border:1px solid var(--border-color); border-radius:16px; background:var(--bg-card); box-shadow:var(--shadow-sm); }
.promo-company-detail-logo { display:flex; align-items:center; justify-content:center; width:72px; height:64px; overflow:hidden; border-radius:13px; background:var(--bg-secondary); color:var(--primary); font-size:1.2rem; font-weight:900; }
.promo-company-detail-logo img { width:100%; height:100%; padding:5px; object-fit:contain; box-sizing:border-box; }
.promo-company-detail-head h2 { margin:0 0 3px; color:var(--text-main); font-size:1.25rem; }
.promo-company-detail-head p { margin:0; color:var(--text-muted); font-size:.75rem; }
.promo-company-detail-actions .btn-secondary { width:auto; }
.promo-company-detail-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.promo-company-tool { border:1px solid var(--border-color); border-radius:13px; background:var(--bg-card); overflow:hidden; }
.promo-company-tool > summary { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 12px; color:var(--primary); font-size:.78rem; font-weight:900; cursor:pointer; list-style:none; }
.promo-company-tool > summary::-webkit-details-marker { display:none; }
.promo-company-tool--create > summary { background:var(--primary); color:#fff; }
.promo-company-tool[open] { grid-column:1/-1; }
.promo-company-tool > .promo-admin-form,.promo-company-tool > .promo-admin-edit-form { border-top:1px solid var(--border-color); }
@media(max-width:760px){ .promo-company-row{grid-template-columns:44px minmax(0,1fr) auto 18px;gap:8px;padding:8px 10px}.promo-company-row .promo-admin-status{grid-column:2}.promo-company-metric{grid-column:3;grid-row:1/3}.promo-company-open{grid-column:4;grid-row:1/3;font-size:0}.promo-company-open svg{width:16px !important;height:16px !important}.promo-company-search{grid-template-columns:minmax(0,1fr) auto}.promo-company-search a.btn-secondary{grid-column:1/-1}.promo-company-detail-head{grid-template-columns:58px minmax(0,1fr);gap:10px}.promo-company-detail-logo{width:58px;height:54px}.promo-company-detail-actions{grid-column:1/-1}.promo-company-detail-actions .btn-secondary{width:100%}.promo-company-detail-tools{grid-template-columns:1fr}.promo-company-tool[open]{grid-column:auto}.promo-company-create[open]>.promo-admin-card{padding:12px !important} }
.afisha-modal-footer {
    display: grid;
    grid-template-columns: auto minmax(0, max-content);
    justify-content: end;
    gap: 10px;
    width: 100%;
    margin-top: 1.5rem;
    box-sizing: border-box;
}
.afisha-modal-footer .btn-secondary,
.afisha-modal-footer .btn-primary {
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    padding: 10px 18px;
    box-sizing: border-box;
}
.afisha-cover-upload > input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.afisha-cover-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 210px;
    padding: 24px;
    box-sizing: border-box;
    border: 2px dashed #BFDBFE;
    border-radius: 16px;
    background: linear-gradient(145deg, #F8FBFF, #F3F6FF);
    color: var(--text-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.afisha-cover-dropzone:hover {
    border-color: var(--primary);
    background: #EFF6FF;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}
.afisha-cover-upload-icon {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--primary);
}
.afisha-cover-dropzone strong { margin-bottom: 5px; color: var(--text-main); font-size: .95rem; }
.afisha-cover-dropzone span:last-child { font-size: .78rem; }
.afisha-cover-preview {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.afisha-cover-preview[hidden] { display: none; }
.afisha-cover-preview > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--bg-secondary);
}
.afisha-cover-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}
.afisha-cover-file-info { min-width: 0; }
.afisha-cover-file-info strong,
.afisha-cover-file-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afisha-cover-file-info strong { color: var(--text-main); font-size: .82rem; }
.afisha-cover-file-info small { margin-top: 2px; color: var(--text-muted); font-size: .72rem; }
.afisha-cover-preview-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.afisha-cover-change,
.afisha-cover-remove {
    min-height: 34px;
    padding: 7px 11px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}
.afisha-cover-change { display: inline-flex; align-items: center; background: var(--primary-light); color: var(--primary); }
.afisha-cover-remove { background: #FEE2E2; color: #BE123C; }
[data-theme="dark"] .afisha-cover-dropzone { border-color: #334155; background: #14151A; }
[data-theme="dark"] .afisha-cover-dropzone:hover { border-color: #60A5FA; background: #191C24; }
[data-theme="dark"] .afisha-cover-remove { background: rgba(190, 18, 60, .2); color: #FDA4AF; }
@media (max-width: 480px) {
    .afisha-cover-dropzone { min-height: 180px; padding: 18px; }
    .afisha-cover-preview-bar { align-items: stretch; flex-direction: column; }
    .afisha-cover-preview-actions { width: 100%; }
    .afisha-cover-change, .afisha-cover-remove { flex: 1; justify-content: center; }
    .afisha-modal-footer {
        grid-template-columns: minmax(0, .72fr) minmax(0, 1.65fr);
        padding: 0;
    }
    .afisha-modal-footer .btn-secondary,
    .afisha-modal-footer .btn-primary {
        width: 100%;
        min-width: 0;
        padding-right: 8px;
        padding-left: 8px;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 390px) {
    .afisha-mobile-action-grid.has-ticket { grid-template-columns: 1fr; }
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
    color: white;
}
.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary:hover {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
}

.btn-secondary:active {
    transform: translateY(0);
}

.registered-tag {
    display: inline-block;
    background-color: #DEF7EC;
    color: #03543F;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

/* Alert Notification box */
.alert-box {
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.alert-success {
    background-color: #DEF7EC;
    color: #03543F;
    border: 1px solid #BCF0DA;
}

.alert-error {
    background-color: #FDE8E8;
    color: #9B1C1C;
    border: 1px solid #FBD5D5;
}

.admin-standalone-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

/* ============ Admin Panel Layout: content + right sticky sidebar ============ */
.admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 1.5rem;
    align-items: start;
}

.admin-content {
    min-width: 0;
    width: 100%;
}

.admin-section {
    display: none;
}

.admin-section.active {
    display: block;
    animation: admin-fade-in 0.25s ease;
}

@keyframes admin-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Right sticky navigation */
.admin-sidebar {
    position: sticky;
    top: 1.5rem;
    z-index: 5;
    width: 100%;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    box-shadow: var(--shadow-sm);
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.admin-nav-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.admin-nav-item.active {
    background: var(--primary-gradient, linear-gradient(135deg, #2563EB 0%, #3B82F6 100%));
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.admin-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-nav-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.admin-nav-item.active .admin-nav-icon svg path {
    fill: #FFFFFF !important;
}

.admin-nav-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-nav-badge {
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
    background: #EF4444;
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.3;
}

.admin-nav-item.active .admin-nav-badge {
    background: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .admin-nav {
    background: #13151B;
    border-color: var(--border-color);
}

@media (max-width: 1300px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        margin-bottom: 0.5rem;
    }

    .admin-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .admin-nav::-webkit-scrollbar {
        display: none;
    }

    .admin-nav-item {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .admin-nav-item.active {
        box-shadow: none;
    }
}

/* ============ ADMIN TABLES SYSTEM & WOW USER MODERATION ============ */
.admin-table-container {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
    width: 100%;
    box-sizing: border-box;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

.admin-table th {
    background: #F8FAFC;
    color: #475569;
    padding: 0.65rem 0.5rem;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    white-space: nowrap;
    vertical-align: middle;
}

.admin-table td {
    padding: 0.55rem 0.5rem;
    font-size: 0.84rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    vertical-align: middle !important;
    transition: background 0.15s ease;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: rgba(37, 99, 235, 0.02);
}

[data-theme="dark"] .admin-table th {
    background: #181B22;
    color: #94A3B8;
}

[data-theme="dark"] .admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* User table specific layout - fits 100% without horizontal scroll */
.admin-table-users {
    width: 100%;
    table-layout: auto;
}

.admin-table-users td:first-child,
.admin-table-users th:first-child {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    text-align: center;
    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
}

.admin-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border: 1.5px solid var(--border-color, #E2E8F0);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.admin-user-info-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    max-width: 135px;
}

/* Giveaways editor */
.gw-prize-editor-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1rem 0 .65rem; }
.gw-prize-counter { color:var(--text-muted); font-size:.78rem; white-space:nowrap; }
.gw-prize-row { padding:1rem; margin-bottom:.75rem; border:1px solid var(--border-color); border-radius:14px; background:var(--bg-secondary,#F8FAFC); }
.gw-prize-row-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.7rem; }
.gw-prize-num { color:var(--text-blue); font-size:.82rem; font-weight:800; }
.gw-prize-remove { border:0; border-radius:8px; background:rgba(239,68,68,.1); color:#DC2626; cursor:pointer; padding:.25rem .55rem; }
.gw-prize-fields { display:grid !important; grid-template-columns:minmax(180px,220px) minmax(260px,1fr) 88px; align-items:start; gap:1rem; }
.gw-prize-fields .form-group { width:auto !important; min-width:0; }
.gw-prize-fields .gw-prize-image-field { flex:none !important; width:auto !important; }
.gw-prize-image-preview { display:block; width:54px; height:54px; object-fit:cover; border-radius:10px; margin-bottom:.45rem; border:1px solid var(--border-color); }
.gw-prize-upload { width:100%; }
.gw-image-picker { position:relative; display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:40px; padding:.55rem .7rem; border:1px solid #C4B5FD; border-radius:11px; background:linear-gradient(135deg,#F5F3FF,#FDF2F8); color:#6D28D9; cursor:pointer; font-size:.78rem; font-weight:800; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-sizing:border-box; }
.gw-image-picker:hover { transform:translateY(-1px); border-color:#8B5CF6; box-shadow:0 6px 16px rgba(124,58,237,.16); }
.gw-image-picker-icon { display:inline-flex; align-items:center; justify-content:center; width:21px; height:21px; border-radius:7px; background:#8B5CF6; color:#fff; font-size:1rem; line-height:1; }
.gw-image-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.gw-image-preview-box { display:flex; align-items:center; justify-content:center; width:100%; height:220px; margin-top:.55rem; overflow:hidden; border:1px solid #DDD6FE; border-radius:12px; background:#F8FAFC; color:#94A3B8; font-size:.72rem; text-align:center; box-sizing:border-box; }
.gw-image-preview-box.is-empty { border-style:dashed; background:linear-gradient(145deg,#FAFAFF,#FFF7FB); }
.gw-image-preview-box img { width:100%; height:100%; object-fit:contain; display:block; background:rgba(255,255,255,.82); }
.gw-image-file-name { margin-top:.35rem; overflow:hidden; color:var(--text-muted); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.gw-add-prize-btn { width:100%; margin-top:.25rem; padding:.7rem 1rem; border:1px dashed #A78BFA; border-radius:12px; background:rgba(139,92,246,.06); color:#7C3AED; cursor:pointer; font-weight:800; }
.gw-prize-form-actions { display:flex; justify-content:flex-end; margin-top:1rem; }

@media (max-width:1300px) {
    .admin-layout { display:flex; flex-direction:column; }
    .admin-sidebar { order:-1; width:100%; }
}

@media (max-width:640px) {
    .admin-standalone-main { overflow-x:hidden; }
    .admin-nav { scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
    .admin-nav-item { flex:0 0 auto; min-width:max-content; }
    #section-giveaways .profile-section-card { padding:1rem !important; }
    #section-giveaways .form-row { flex-direction:column; gap:.65rem; }
    #section-giveaways .gw-prize-fields { display:grid !important; grid-template-columns:1fr; gap:.65rem; }
    #section-giveaways .form-row .form-group { flex:1 1 auto !important; width:100%; }
    #section-giveaways .gw-image-preview-box { width:min(100%,220px); height:270px; }
    .gw-prize-row { padding:.8rem; }
    .gw-prize-form-actions { justify-content:stretch; }
    .gw-prize-form-actions .btn-submit { width:100% !important; }
    #section-giveaways .admin-table-container { overflow-x:auto; }
    #section-giveaways .admin-table { min-width:720px; }
}

/* Venues admin buttons */
.admin-btn-approve, .admin-btn-reject, .admin-btn-neutral, .admin-btn-danger {
    border: none;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    margin-right: 3px;
}
.admin-btn-approve:active, .admin-btn-reject:active, .admin-btn-neutral:active, .admin-btn-danger:active { transform: scale(0.95); }
.admin-btn-approve { background: #D1FAE5; color: #065F46; }
.admin-btn-approve:hover { background: #10B981; color: #fff; }
.admin-btn-reject { background: #FEE2E2; color: #991B1B; }
.admin-btn-reject:hover { background: #EF4444; color: #fff; }
.admin-btn-neutral { background: #E5E7EB; color: #374151; }
.admin-btn-neutral:hover { background: #9CA3AF; color: #fff; }
.admin-btn-danger { background: #FEE2E2; color: #991B1B; }
.admin-btn-danger:hover { background: #DC2626; color: #fff; }
#section-venues .admin-table-container { overflow-x:auto; }
#section-venues .admin-table { min-width: 860px; }
[data-theme="dark"] .admin-btn-approve { background: rgba(16,185,129,0.16); color:#6EE7B7; }
[data-theme="dark"] .admin-btn-reject, [data-theme="dark"] .admin-btn-danger { background: rgba(239,68,68,0.16); color:#FCA5A5; }
[data-theme="dark"] .admin-btn-neutral { background: rgba(148,163,184,0.16); color:#CBD5E1; }

.admin-user-fullname {
    font-weight: 800;
    font-size: 0.86rem;
    color: var(--text-main, #0F172A);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.25;
    transition: color 0.15s ease;
}

.admin-user-fullname:hover {
    color: var(--primary, #2563EB);
}

.admin-user-username {
    font-size: 0.74rem;
    color: var(--text-muted, #64748B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.admin-user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.admin-badge-mod {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border: 1px solid #FCD34D;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
}

.admin-badge-blocked {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: #FEE2E2;
    color: #B91C1C;
    border: 1px solid #FECACA;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin-badge-mute {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: #EDE9FE;
    color: #6D28D9;
    border: 1px solid #DDD6FE;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Contacts Column */
.admin-contacts-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 130px;
}

.admin-contact-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    color: var(--text-main, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-contact-item svg {
    flex-shrink: 0;
    color: var(--primary, #2563EB);
    opacity: 0.85;
    width: 12px;
    height: 12px;
}

.admin-contact-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-contact-empty {
    color: var(--text-muted, #94A3B8);
    font-size: 0.8rem;
}

/* Age / Gender */
.admin-age-gender-cell {
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--text-main);
}

.admin-val-age {
    font-weight: 700;
}

.admin-val-sep {
    color: var(--text-muted, #94A3B8);
    margin: 0 2px;
}

.admin-val-gender {
    font-weight: 600;
    color: var(--text-muted, #64748B);
}

/* Mood pill */
.admin-mood-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #F1F5F9;
    border: 1px solid var(--border-color, #E2E8F0);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    white-space: nowrap;
}

.admin-mood-pill svg {
    width: 13px;
    height: 13px;
}

[data-theme="dark"] .admin-mood-pill {
    background: rgba(255, 255, 255, 0.05);
}

/* Rating badge */
.admin-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #D97706;
    white-space: nowrap;
}

.admin-rating-badge svg {
    color: #F59E0B;
    width: 12px;
    height: 12px;
}

/* Date Cell */
.admin-date-cell {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.admin-date-main {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-main, #0F172A);
}

.admin-date-sub {
    font-size: 0.7rem;
    color: var(--text-muted, #64748B);
}

/* Action Buttons */
.admin-actions-cell {
    width: 136px;
    min-width: 136px;
    max-width: 142px;
    padding: 0.5rem 0.6rem;
    box-sizing: border-box;
}

.admin-actions-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
}

.btn-admin-act {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    transition: all 0.15s ease !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.btn-admin-act--mod {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
}

.btn-admin-act--mod:hover {
    background: #DBEAFE !important;
    color: #1E40AF !important;
    border-color: #93C5FD !important;
}

.btn-admin-act--unmod {
    background: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FCD34D !important;
}

.btn-admin-act--unmod:hover {
    background: #FDE68A !important;
    color: #78350F !important;
}

.btn-admin-act--block {
    background: #FEF2F2 !important;
    color: #B91C1C !important;
    border-color: #FECACA !important;
}

.btn-admin-act--block:hover {
    background: #FEE2E2 !important;
    color: #991B1B !important;
    border-color: #FCA5A5 !important;
}

.btn-admin-act--unblock {
    background: #ECFDF5 !important;
    color: #047857 !important;
    border-color: #A7F3D0 !important;
}

.btn-admin-act--unblock:hover {
    background: #D1FAE5 !important;
    color: #065F46 !important;
}

.btn-admin-act--delete {
    background: #FFF1F2 !important;
    color: #E11D48 !important;
    border-color: #FECDD3 !important;
}

.btn-admin-act--delete:hover {
    background: #E11D48 !important;
    color: #FFFFFF !important;
    border-color: #E11D48 !important;
}

.btn-danger {
    background-color: #FDE8E8;
    color: var(--danger);
    border: 1px solid #FBD5D5;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    transition: var(--transition);
}

.btn-danger:hover {
    background-color: var(--danger);
    color: white;
}

/* Welcome Hero Box */
.welcome-hero {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(37, 99, 235, 0.15);
}

.welcome-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-blue);
    margin-bottom: 0.5rem;
}

.welcome-desc {
    font-size: 1.1rem;
    color: var(--text-main);
    max-width: 600px;
}

/* ==========================================================================
   AUTH DROPDOWN DRAWER (TOP-TO-BOTTOM SPRING MODAL)
   ========================================================================== */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.auth-drawer {
    position: fixed;
    top: -120%; /* Hidden off-screen at top */
    left: 50%;
    right: auto;
    transform: translate(-50%, 0);
    width: 480px;
    max-width: 95%;
    max-height: 85vh;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    z-index: 100001;
    transition: top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
}

.auth-drawer.open {
    top: 50%;
    transform: translate(-50%, -50%); /* EXACT DEAD CENTER VERTICALLY AND HORIZONTALLY */
    opacity: 1;
}

.auth-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(255, 255, 255, 0.5);
}

.auth-drawer-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-blue);
    letter-spacing: -0.5px;
}

.auth-drawer-close {
    background: rgba(15, 23, 42, 0.05);
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.auth-drawer-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    transform: rotate(90deg);
}

.auth-drawer-body {
    flex-grow: 1;
    padding: 2rem 1.5rem;
    overflow-y: auto;
}

.auth-section {
    opacity: 0;
    transform: translateY(10px);
    display: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.auth-section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.auth-drawer-error {
    background-color: #FDE8E8;
    color: #9B1C1C;
    border: 1px solid #FBD5D5;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: none;
    animation: shake 0.4s ease;
}
.auth-drawer-error--blocked {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #FFF7ED;
    border-color: #FDBA74;
    color: #9A3412;
}
.auth-drawer-error--blocked strong {
    font-size: 0.9rem;
}
[data-theme="dark"] .auth-drawer-error--blocked {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.35);
    color: #FDBA74;
}

/* Sidebar Message Count Pill Badge */
.room-msg-count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    background: #E2E8F0;
    color: var(--text-muted);
    transition: all 0.25s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.chat-room-btn:hover .room-msg-count {
    background: #CBD5E1;
    color: var(--text-main);
}

.chat-room-btn.active .room-msg-count {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* Form customizations inside drawer */
.auth-drawer .form-input {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-color: rgba(226, 232, 240, 0.9);
}

.auth-drawer .form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

/* Premium Mood Badges */
.auth-drawer label.mood-pill-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F1F5F9;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    border: 2px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-drawer label.mood-pill-item:hover {
    background: #E2E8F0;
    transform: translateY(-1px);
    color: var(--text-main);
}

.auth-drawer label.mood-pill-item:has(input[type="radio"]:checked) {
    background-color: var(--primary-light) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px) scale(1.02);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@media (max-width: 580px) {
    .auth-drawer {
        width: 92% !important;
        max-width: 92% !important;
        top: -120% !important;
    }
    .auth-drawer.open {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* ==========================================================================
   HERO CARD TABLE (PREMIUM HEADER BANNER)
   ========================================================================== */

.hero-card-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    padding: 2.25rem;
    margin-bottom: 2.5rem;
    align-items: center;
    overflow: hidden;
}

/* Read Receipt Checkmark Status */
.msg-read-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.msg-read-status svg {
    width: 15px;
    height: 15px;
}

.msg-read-status.sent svg path {
    fill: #475569 !important;
}

.msg-read-status.read svg path {
    fill: #2563EB !important;
}

/* Unread Dialog Counter Badge */
.badge-unread {
    background: #4F46E5;
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(79, 70, 229, 0.25);
    margin-left: auto;
    min-width: 20px;
    text-align: center;
    display: inline-block;
}

.hero-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.hero-city-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 4px 12px;
    border-radius: 20px;
    width: fit-content;
}

.hero-card-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--text-blue);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.hero-card-desc {
    color: #334155;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
}

.hero-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F1F5F9;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid #E2E8F0;
    transition: var(--transition);
    min-width: 0;
    cursor: default;
}

.hero-feature-item:hover {
    background: #F1F5F9;
    border-color: var(--primary);
    transform: translateY(-2px);
}

.hero-feature-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.hero-feature-item strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
    white-space: nowrap;
}

.hero-feature-item span {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    display: block;
}

.hero-card-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 240px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.hero-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-card-box:hover .hero-card-image {
    transform: scale(1.04);
}

.hero-image-overlay-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: -0.2px;
}

@media (max-width: 960px) {
    .hero-card-box {
        grid-template-columns: 1fr;
    }
    .hero-features-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PHOTO UPLOADER & PREVIEW COMPONENT
   ========================================================================== */

.photo-upload-zone {
    position: relative;
    border: 2px dashed #CBD5E1;
    border-radius: var(--radius-md);
    background: #F8FAFC;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.photo-upload-zone:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.photo-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

.photo-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.upload-icon {
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.upload-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.upload-subtext {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.photo-preview-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0.5rem auto 1rem auto;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #2563EB, #60A5FA);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.2);
    display: block;
}

.photo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #FFFFFF;
    display: block;
    border: 2px solid #FFFFFF;
    box-sizing: border-box;
}

.photo-remove-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #EF4444;
    color: #FFFFFF;
    border: 2.5px solid #FFFFFF;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45);
    transition: var(--transition);
    z-index: 25;
}

.photo-remove-btn svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
    width: 16px;
    height: 16px;
    display: block;
}

.photo-remove-btn:hover {
    background: #DC2626;
    transform: scale(1.15);
}

.btn-cancel-outline {
    background-color: #FFFFFF;
    color: #334155;
    border: 1.5px solid #94A3B8;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    box-sizing: border-box;
}

.btn-cancel-outline:hover {
    background-color: #F1F5F9;
    border-color: #64748B;
    color: #0F172A;
    transform: translateY(-1px);
}

.mood-radio-chip {
    transition: var(--transition);
}

.mood-radio-chip:has(input:checked) {
    background: #EFF6FF !important;
    border-color: #2563EB !important;
    color: #1E40AF !important;
    box-shadow: 0 0 0 1px #2563EB;
}

#filter-reset-btn {
    background-color: #F1F5F9;
    color: #334155;
    border: 1px solid #CBD5E1;
    font-weight: 600;
    padding: 0.65rem 1.15rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    cursor: pointer;
    transition: var(--transition);
}

#filter-reset-btn:hover {
    background-color: #E2E8F0;
    color: #0F172A;
    border-color: #94A3B8;
}

.map-wrapper-relative {
    position: relative;
}

.btn-locate-me {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: #FFFFFF;
    color: #1E3A8A;
    border: 1px solid #CBD5E1;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.btn-locate-me:hover {
    background: #2563EB;
    color: #FFFFFF;
    border-color: #2563EB;
}

.online-indicator {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.online-indicator.active {
    background-color: #DEF7EC;
    color: #03543F;
    border: 1px solid #86EFAC;
}

.online-indicator.offline {
    background-color: #F1F5F9;
    color: #64748B;
    border: 1px solid #E2E8F0;
}

/* Company Toggle Button & Badges */
.btn-company-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: var(--transition);
    text-decoration: none;
}

.btn-company-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.btn-company-toggle.active {
    background: linear-gradient(135deg, #4F46E5 0%, #3730A3 100%);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.6);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
}

.badge-needs-company {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: linear-gradient(135deg, #4F46E5 0%, #3730A3 100%);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
    letter-spacing: -0.2px;
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION DOCK (Native-Like Bar)
   ========================================================================== */
.mobile-bottom-dock {
    display: none;
}

/* ============ Mobile "More" bottom sheet menu ============ */
.mobile-more-btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #64748B;
    padding: 0;
    margin: 0;
    outline: none;
    box-shadow: none !important;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.mobile-more-btn.active .mobile-more-icon {
    color: var(--primary, #2563EB);
}

.mobile-more-btn.active .mobile-more-icon svg {
    transform: rotate(90deg);
}

.mobile-more-icon svg {
    transition: transform 0.25s ease;
}

.mobile-more-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-more-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mobile-more-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1);
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

.mobile-more-overlay.open .mobile-more-sheet {
    transform: translateY(0);
}

.mobile-more-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-color);
    margin: 10px auto 6px;
    flex-shrink: 0;
}

.mobile-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-more-user {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-main);
    min-width: 0;
}

.mobile-more-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border: 2px solid var(--primary-light);
}

.mobile-more-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-more-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mobile-more-user-info strong {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

.mobile-more-user-info span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.mobile-more-close {
    background: var(--bg-secondary, #F1F5F9);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.15s ease, transform 0.15s ease;
}

.mobile-more-close:hover {
    background: #E2E8F0;
    transform: rotate(90deg);
}

.mobile-more-grid {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 4px;
    gap: 2px;
}

.mobile-more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 14px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: background 0.15s ease;
}

.mobile-more-item:active,
.mobile-more-item.active {
    background: var(--primary-light);
    color: var(--primary);
}

.mobile-more-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-more-item-icon svg {
    display: block;
}

.mobile-more-item.mobile-more-danger {
    color: #DC2626;
}

.mobile-more-item.mobile-more-danger .mobile-more-item-icon {
    background: #FEE2E2;
    color: #DC2626;
}

[data-theme="dark"] .mobile-more-sheet {
    background: #13151B;
}

[data-theme="dark"] .mobile-more-item.mobile-more-danger .mobile-more-item-icon {
    background: rgba(220, 38, 38, 0.15);
}

@media (min-width: 821px) {
    .mobile-more-overlay {
        display: none;
    }
}

.chat-mobile-back-btn {
    display: none;
}

/* ==========================================================================
   RESPONSIVE DESIGN & MOBILE ADAPTATION SYSTEM
   ========================================================================== */

/* Large Tablets & Desktop (<= 1150px) */
@media (max-width: 1150px) {
    .walks-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .walks-right-column {
        position: static !important;
        margin-top: 1.5rem;
    }
}

/* Medium Tablets (<= 992px) */
@media (max-width: 992px) {
    .profile-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .chat-container {
        grid-template-columns: 280px 1fr !important;
        gap: 0 !important;
    }
}

/* Mobile Devices & Tablets (<= 820px) — NATIVE MOBILE EXPERIENCE */
@media (max-width: 820px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Prevent accidental auto-zoom on iOS Safari when tapping inputs */
    input, textarea, select {
        font-size: 16px !important;
    }

    /* Profile page: use the full available width on mobile */
    main:has(.profile-detail-grid) {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 0.5rem !important;
        margin: 1.25rem auto 4rem auto !important;
        box-sizing: border-box !important;
    }

    /* Mobile Theme Toggle Button: Positioned neatly above the bottom dock */
    .theme-toggle-btn {
        display: flex !important;
        position: fixed !important;
        right: 14px !important;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.22) !important;
        z-index: 9990 !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
    }

    .theme-toggle-btn:active {
        transform: scale(0.92) !important;
    }

    .theme-toggle-btn .theme-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* 1 Column Grid for All Content Feeds */
    .grid-users,
    .cards-grid,
    .posts-grid,
    .walks-grid,
    .hub-grid {
        grid-template-columns: 1fr !important;
        gap: 1.15rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }    /* Mobile User Cards: Ultra-Compact & Fully Visible (No Cropping, No Screen Overflow) */
    .walks-layout,
    .walks-layout > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .grid-users {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .card-user {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    }

    .card-photo-wrapper {
        padding-top: 0 !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        background-color: var(--bg-card) !important;
    }

    .card-photo {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .card-mood-badge {
        top: 8px !important;
        right: 8px !important;
        padding: 4px 8px !important;
        font-size: 0.72rem !important;
    }

    .card-body {
        padding: 0.75rem 0.85rem !important;
        gap: 0.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .card-name-age {
        font-size: 1.05rem !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .card-rating-badge {
        font-size: 0.8rem !important;
        margin-top: 2px !important;
    }

    .card-status {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.4rem !important;
        word-break: break-word !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .card-interests {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .interest-tag {
        font-size: 0.72rem !important;
        padding: 2px 6px !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .card-footer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .btn-card,
    .card-footer .btn-card,
    .card-footer .btn-participate {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 7px 6px !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: var(--radius-sm) !important;
        text-align: center !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Mobile Bottom Navigation Dock (Visible on Mobile) */
    .mobile-bottom-dock {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: rgba(255, 255, 255, 0.94) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
        box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08) !important;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px) !important;
    }

    .mobile-dock-container {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        height: 56px !important;
        align-items: center !important;
        max-width: 560px !important;
        margin: 0 auto !important;
        padding: 0 2px !important;
    }

    .mobile-dock-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: #64748B !important;
        gap: 1px !important;
        padding: 2px 0 !important;
        min-width: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: color 0.15s ease, transform 0.15s ease !important;
    }

    .mobile-dock-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-dock-icon svg {
        width: 19px !important;
        height: 19px !important;
    }

    .mobile-dock-label {
        font-size: 0.58rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: -0.2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        padding: 0 1px !important;
    }

    .mobile-dock-item.active {
        color: #2563EB !important;
        font-weight: 700 !important;
    }

    .mobile-dock-item.active .mobile-dock-icon {
        transform: scale(1.08) !important;
    }

    .mobile-dock-avatar-img {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 1.5px solid currentColor !important;
    }

    .mobile-dock-badge {
        position: absolute !important;
        top: -4px !important;
        right: -8px !important;
        background: #EF4444 !important;
        color: #FFFFFF !important;
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        border-radius: 10px !important;
        min-width: 16px !important;
        height: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
        border: 2px solid #FFFFFF !important;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45) !important;
    }

    /* Premium Sticky Mobile Top Header */
    .header-container {
        display: flex !important;
        padding: 0 12px !important;
        height: 60px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .logo-link {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    .logo-img {
        height: 56px !important;
        max-height: 60px !important;
        width: auto !important;
        object-fit: contain !important;
        transition: transform 0.2s ease !important;
    }

    /* Hide desktop center nav links on mobile (Bottom dock handles primary navigation!) */
    .nav-links-center {
        display: none !important;
    }

    .nav-auth-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        max-width: calc(100% - 150px) !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    #header-login-btn,
    .nav-auth-right a[href*="auth=login"] {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        padding: 5px 8px !important;
        color: var(--text-main) !important;
        background: transparent !important;
        text-decoration: none !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        transition: background 0.15s ease !important;
    }

    #header-login-btn:hover,
    .nav-auth-right a[href*="auth=login"]:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }

    [data-theme="dark"] #header-login-btn,
    [data-theme="dark"] .nav-auth-right a[href*="auth=login"] {
        color: #E2E8F0 !important;
    }

    [data-theme="dark"] #header-login-btn:hover,
    [data-theme="dark"] .nav-auth-right a[href*="auth=login"]:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    #header-register-btn,
    .nav-auth-right a[href*="auth=register"] {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 1 auto !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
        background: var(--primary-gradient) !important;
        color: #FFFFFF !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    @media (max-width: 420px) {
        .header-container { padding-right: 8px !important; padding-left: 8px !important; gap: 4px !important; }
        .logo-img { height: 50px !important; max-height: 54px !important; }
        .nav-auth-right { gap: 3px !important; max-width: calc(100% - 132px) !important; }
        #header-login-btn,
        .nav-auth-right a[href*="auth=login"] { padding-right: 5px !important; padding-left: 5px !important; font-size: .74rem !important; }
        #header-register-btn,
        .nav-auth-right a[href*="auth=register"] { padding-right: 8px !important; padding-left: 8px !important; font-size: .72rem !important; }
    }
    
    .nav-user {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .nav-user-photo {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        border: 2px solid var(--primary) !important;
    }

    .nav-user-name {
        display: none !important;
    }

    .nav-user a[href="/logout"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(239, 68, 68, 0.08) !important;
        color: #EF4444 !important;
        margin-left: 2px !important;
        text-decoration: none !important;
    }

    .nav-user a[href="/logout"] svg {
        width: 16px !important;
        height: 16px !important;
    }

    .quick-mood-btn {
        padding: 5px 9px !important;
        font-size: 0.85rem !important;
        gap: 4px !important;
        border-radius: 20px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-card) !important;
    }

    #quick-mood-label {
        display: none !important;
    }

    .main-container {
        padding: 0.75rem 0.65rem calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Hub Headers & Controls (Meetups & Afisha) — FULL-WIDTH RESPONSIVE CARDS */
    .hub-header-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 1.25rem 1rem !important;
        gap: 1rem !important;
        margin-bottom: 1rem !important;
        border-radius: var(--radius-lg) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .hub-header-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hub-header-badge {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        font-size: 0.72rem !important;
        line-height: 1.4 !important;
        padding: 4px 10px !important;
        gap: 4px !important;
        max-width: 100% !important;
    }

    .hub-header-title {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        margin-bottom: 0.4rem !important;
    }

    .hub-header-desc {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }

    .hub-header-actions {
        width: 100% !important;
        margin-top: 0.25rem !important;
    }

    .hub-header-actions .btn-hub-create,
    .hub-header-actions .hub-btn-primary,
    .hub-header-actions a.btn-hub-create {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 11px 16px !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }

    .hub-controls-bar {
        padding: 0.65rem !important;
        margin-bottom: 1rem !important;
    }

    .hub-controls-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }

    .hub-time-segmented {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 3px !important;
        box-sizing: border-box !important;
    }

    .hub-time-segmented::-webkit-scrollbar {
        display: none !important;
    }

    .hub-time-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }

    .hub-search-form {
        width: 100% !important;
        display: flex !important;
        gap: 6px !important;
    }

    .hub-search-wrap {
        flex: 1 1 auto !important;
    }

    .hub-search-input {
        width: 100% !important;
        font-size: 16px !important;
    }

    .hub-search-btn {
        flex-shrink: 0 !important;
        padding: 0 16px !important;
    }

    /* Walks & Widgets Section Headers on Mobile */
    .walks-section-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 1.25rem !important;
        margin-bottom: 0.85rem !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .btn-section-action {
        height: 32px !important;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Hub & Afisha Cards Grid Mobile Full-Width (Anti-Shift / Anti-Overflow) */
    .hub-cards-grid {
        display: grid !important;
        grid-template-columns: 100% !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .hub-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Modal Form Rows Mobile 1-Column Layout (Anti-Truncation / Anti-Skew) */
    .form-row,
    .custom-modal-body .form-row,
    .custom-modal-dialog .form-row,
    .listing-create-modal .form-row,
    .post-create-modal .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Custom Modals & Dialogs on Mobile (Centered, Symmetrical, No Overflow) */
    .custom-modal-overlay {
        padding: 10px !important;
        align-items: center !important;
    }

    .custom-modal-dialog {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 0 !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .custom-modal-header {
        padding: 1rem 1.15rem !important;
        background: var(--bg-card) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
        flex-shrink: 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .custom-modal-body {
        padding: 1.15rem 1rem !important;
        gap: 0.85rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
    }

    /* Modal & Post Create Action Buttons Alignment on Mobile */
    .post-modal-actions,
    .post-create-actions,
    .post-create-form-actions,
    .custom-modal-footer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 1.25rem !important;
        padding-top: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .post-modal-actions .btn-secondary,
    .post-create-actions .btn-secondary,
    .post-create-form-actions .btn-secondary,
    .post-modal-actions .btn-submit,
    .post-create-actions .btn-submit,
    .post-create-form-actions .btn-submit,
    .post-create-form-actions .btn-post-submit,
    .post-modal-actions .btn-danger,
    .post-create-actions .btn-danger,
    .custom-modal-footer .btn-secondary,
    .custom-modal-footer .btn-primary,
    .custom-modal-footer .btn-submit-afisha,
    .custom-modal-footer .btn-submit-meetup,
    .custom-modal-footer button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border-radius: 12px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Hide Desktop Site Footer on Mobile Devices */
    .site-footer {
        display: none !important;
    }

    /* Prevent Horizontal Overflow Globally on Mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .profile-section-card {
        padding: 1.15rem 1rem !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .profile-section-title-wrap {
        gap: 0.5rem !important;
        margin-bottom: 0.85rem !important;
        padding-bottom: 0.45rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .profile-section-title-wrap .profile-section-title {
        font-size: 1.12rem !important;
        line-height: 1.25 !important;
    }

    .profile-section-btn {
        height: 30px !important;
        padding: 0 10px !important;
        font-size: 0.76rem !important;
    }

    /* HIDE FLOATING THEME TOGGLE ON CHATS PAGE TO PREVENT BUTTON OVERLAPPING */
    body.chats-page .theme-toggle-btn,
    body.chats-page #theme-toggle-btn,
    .chat-container ~ .theme-toggle-btn,
    #chat-container ~ #theme-toggle-btn {
        display: none !important;
    }

    /* Screen 1: Default state (dialogs & rooms list) */
    main:has(.chat-container),
    body.chats-page main,
    main.chat-admin-standalone {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        height: calc(100vh - 60px - 56px - env(safe-area-inset-bottom, 0px)) !important;
        height: calc(100dvh - 60px - 56px - env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Screen 2: Active chat conversation (Full screen mode like Telegram/WhatsApp) */
    body.chats-page:has(.chat-view-active) header,
    body:has(.chat-container.chat-view-active) header {
        display: none !important;
    }

    body.chats-page:has(.chat-view-active) .mobile-bottom-dock,
    body:has(.chat-container.chat-view-active) .mobile-bottom-dock,
    .chat-container.chat-view-active ~ .mobile-bottom-dock {
        display: none !important;
    }

    body.chats-page:has(.chat-view-active) main,
    main:has(.chat-container.chat-view-active) {
        height: 100% !important;
        height: 100dvh !important;
        height: var(--vvh, 100dvh) !important;
        max-height: var(--vvh, 100dvh) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Keep body responsive to visualViewport without fixed positioning jumps on iOS keyboard open */
    html, body.chats-page {
        height: 100% !important;
        height: var(--vvh, 100dvh) !important;
        max-height: var(--vvh, 100dvh) !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        width: 100% !important;
    }

    /* Telegram/WhatsApp Style 1-Screen Mobile Chat Experience */
    .chat-container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: var(--bg-primary) !important;
    }

    /* Screen 1: Dialogs list is shown by default */
    .chat-container:not(.chat-view-active) .chat-rooms-sidebar {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0.65rem 0.5rem 0 0.5rem !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    .chat-container:not(.chat-view-active) .chat-sidebar-scroll,
    .chat-rooms-sidebar .chat-sidebar-scroll {
        padding-bottom: 90px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Soften active item on mobile dialog list so it does not look like a harsh solid blue block */
    .chat-container:not(.chat-view-active) .chat-room-btn.active,
    .chat-rooms-sidebar .chat-room-btn.active {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--text-main) !important;
        box-shadow: none !important;
        border: 1px solid rgba(37, 99, 235, 0.15) !important;
    }

    .chat-container:not(.chat-view-active) .chat-room-btn.active .chat-room-title,
    .chat-container:not(.chat-view-active) .chat-room-btn.active .chat-dialog-name,
    .chat-rooms-sidebar .chat-room-btn.active .chat-room-title,
    .chat-rooms-sidebar .chat-room-btn.active .chat-dialog-name {
        color: var(--text-main) !important;
    }

    .chat-container:not(.chat-view-active) .chat-room-btn.active .dialog-status-text,
    .chat-rooms-sidebar .chat-room-btn.active .dialog-status-text {
        color: var(--text-muted) !important;
    }

    .chat-container:not(.chat-view-active) .chat-room-btn.active .dialog-status-text.online,
    .chat-rooms-sidebar .chat-room-btn.active .dialog-status-text.online {
        color: #059669 !important;
    }

    .chat-container:not(.chat-view-active) .chat-room-btn.active .chat-room-icon-box,
    .chat-rooms-sidebar .chat-room-btn.active .chat-room-icon-box {
        background: rgba(37, 99, 235, 0.12) !important;
    }

    .chat-container:not(.chat-view-active) .chat-room-btn.active svg,
    .chat-rooms-sidebar .chat-room-btn.active svg {
        fill: var(--primary) !important;
        color: var(--primary) !important;
    }

    .chat-container:not(.chat-view-active) .chat-room-btn.active .chat-avatar-status-dot,
    .chat-rooms-sidebar .chat-room-btn.active .chat-avatar-status-dot {
        border-color: #FFFFFF !important;
    }

    .chat-container:not(.chat-view-active) .chat-main {
        display: none !important;
    }

    /* Screen 2: Active chat conversation is shown full-screen */
    .chat-container.chat-view-active .chat-rooms-sidebar {
        display: none !important;
    }

    .chat-container.chat-view-active .chat-main {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .chat-mobile-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 5px 8px !important;
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--primary) !important;
        border-radius: 8px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        border: none !important;
        cursor: pointer !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        margin-right: 2px !important;
        white-space: nowrap !important;
    }

    .chat-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        padding: 0.4rem 0.65rem !important;
        gap: 6px !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid var(--border-color) !important;
        border-radius: 0 !important;
        background: var(--bg-card, #FFFFFF) !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
    }

    .chat-header-content {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        width: 100% !important;
        max-width: none !important;
        overflow: hidden !important;
    }

    .chat-header-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    .chat-header-room-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .chat-header-info-col {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        overflow: hidden !important;
        justify-content: center !important;
        gap: 1px !important;
    }

    .chat-header-name-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .chat-header-user-name {
        font-size: 0.94rem !important;
        font-weight: 700 !important;
        color: var(--text-blue) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        max-width: 100% !important;
        line-height: 1.2 !important;
    }

    .user-online-badge-wrapper {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .user-online-badge-wrapper .online-indicator {
        font-size: 0.7rem !important;
        padding: 1.5px 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        letter-spacing: -0.2px !important;
    }

    .chat-header-subtitle {
        font-size: 0.72rem !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
        line-height: 1.15 !important;
    }

    .chat-header > div {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .chat-header h1,
    .chat-header h2 {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.95rem !important;
        margin: 0 !important;
    }

    .chat-messages-box {
        padding: 0.65rem 0.5rem !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #chat-messages-list {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .chat-message-item {
        max-width: 88% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .chat-msg-content-wrapper {
        min-width: 0 !important;
        max-width: calc(100% - 40px) !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
    }

    .chat-message-item.self .chat-msg-content-wrapper {
        max-width: 100% !important;
    }

    .chat-msg-bubble {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .chat-reply-quote {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .chat-reply-text {
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .chat-input-form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 6px 8px !important;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        background: var(--bg-card) !important;
        border-top: 1px solid var(--border-color) !important;
    }

    .chat-input-main-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .chat-context-bar {
        width: 100% !important;
        align-items: center;
        gap: 8px;
        padding: 5px 10px;
        background: rgba(37, 99, 235, 0.08);
        border-left: 3px solid #2563EB;
        border-radius: 10px;
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        flex-shrink: 0;
    }

    .chat-context-bar[style*="display: none"],
    .chat-context-bar[style*="display:none"],
    .chat-photo-preview[style*="display: none"],
    .chat-photo-preview[style*="display:none"] {
        display: none !important;
    }

    .chat-context-icon {
        color: #2563EB !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .chat-context-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .chat-context-info {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
    }

    .chat-context-title {
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        color: #1D4ED8 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .chat-context-text {
        font-size: 0.72rem !important;
        color: var(--text-muted, #64748B) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .chat-context-bar .chat-photo-remove,
    .chat-photo-preview .chat-photo-remove,
    .chat-photo-remove {
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.08) !important;
        color: #475569 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin-left: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }

    .chat-context-bar .chat-photo-remove svg,
    .chat-photo-preview .chat-photo-remove svg,
    .chat-photo-remove svg {
        width: 14px !important;
        height: 14px !important;
        pointer-events: none !important;
    }

    .chat-photo-preview {
        width: 100% !important;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        background: rgba(37, 99, 235, 0.06);
        border: 1px dashed rgba(37, 99, 235, 0.25);
        border-radius: 10px;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .chat-photo-preview img {
        width: 38px !important;
        height: 38px !important;
        border-radius: 6px !important;
        object-fit: cover !important;
    }

    .chat-audio-preview[style*="display: none"],
    .chat-audio-preview[style*="display:none"] {
        display: none !important;
    }

    .chat-audio-preview {
        width: 100% !important;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        box-sizing: border-box;
        flex-shrink: 0;
    }

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

    .chat-audio-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .audio-track-name {
        max-width: 120px !important;
    }

    .chat-input-wrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 2px 8px !important;
        border-radius: 22px !important;
        background: var(--bg-hover, #F1F5F9) !important;
        border: 1.5px solid var(--border-color) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .chat-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        font-size: 16px !important;
        padding: 6px 4px !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        color: var(--text-main) !important;
        box-sizing: border-box !important;
    }

    .emoji-toggle-btn {
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        background: transparent !important;
        color: #64748B !important;
        cursor: pointer !important;
    }

    .emoji-toggle-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    .chat-action-buttons {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .btn-send,
    .btn-voice-mic {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .btn-send.btn-action-hidden,
    .btn-voice-mic.btn-action-hidden,
    .btn-send[style*="display:none"],
    .btn-send[style*="display: none"],
    .btn-voice-mic[style*="display:none"],
    .btn-voice-mic[style*="display: none"] {
        display: none !important;
    }

    /* Mobile User Profile Refinements */
    .profile-detail-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .profile-sidebar,
    .profile-content,
    .profile-section-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 1.15rem 1rem !important;
        border-radius: var(--radius-lg) !important;
    }

    .profile-main-photo {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1 !important;
        border-radius: var(--radius-md) !important;
    }

    .profile-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .gallery-upload-zone {
        padding: 1.2rem 0.8rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hero & Welcome Banners */
    .welcome-banner {
        padding: 1.15rem 1rem !important;
        margin-bottom: 1.15rem !important;
    }
    
    .welcome-banner > div,
    .welcome-banner-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }

    .welcome-title {
        font-size: 1.25rem !important;
    }

    .hero-card-box {
        padding: 1.15rem 1rem !important;
        margin-bottom: 1.25rem !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .hero-card-title {
        font-size: 1.25rem !important;
        line-height: 1.25 !important;
    }

    .hero-card-desc {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }
    
    .hero-features-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    /* Filter Form Stacking */
    .filter-form-box {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        padding: 0.85rem !important;
    }

    .filter-group-search,
    .filter-group-gender,
    .filter-reset-btn {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Tabs Mood Horizontal Scroll */
    .radio-mood-grid,
    .tabs-mood {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        gap: 6px !important;
    }

    .tab-mood-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Auth Wrapper */
    .auth-wrapper {
        padding: 1.15rem 1rem !important;
        margin: 0.5rem 0 !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 0.85rem !important;
    }

    /* Mobile Bottom Sheet Modals */
    .custom-modal-backdrop,
    .admin-block-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .custom-modal-dialog,
    .custom-modal-card,
    .admin-block-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        animation: mobile-sheet-up 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    @keyframes mobile-sheet-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

/* Extra Small Phones (<= 480px) Header Fine Tuning */
@media (max-width: 480px) {
    .nav-user-name {
        display: none !important;
    }
    #quick-mood-label {
        display: none !important;
    }
    .quick-mood-btn {
        padding: 5px 8px !important;
    }
}

/* Dark Theme Mobile Overrides */
[data-theme="dark"] .mobile-bottom-dock {
    background: rgba(18, 19, 24, 0.95) !important;
    border-top-color: #2D2F39 !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .mobile-dock-item {
    color: #94A3B8 !important;
}

[data-theme="dark"] .mobile-dock-item.active {
    color: #60A5FA !important;
}

[data-theme="dark"] .mobile-dock-badge {
    border-color: #181920 !important;
}

[data-theme="dark"] .chat-mobile-back-btn {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60A5FA !important;
}

/* Dark Theme Welcome Banner & Hero Contrast Fixes */
.welcome-banner {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}
.welcome-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
    color: var(--text-blue);
}
.welcome-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-main);
}
.welcome-mood-highlight {
    color: var(--primary);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 5px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    padding: 2px 10px;
    border-radius: 999px;
    margin: 0 4px;
    line-height: 1.2;
}
.welcome-mood-highlight svg {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.welcome-mood-highlight span {
    display: inline-block;
    vertical-align: middle;
}
[data-theme="dark"] .welcome-mood-highlight {
    color: #93C5FD;
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .welcome-banner {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(37, 99, 235, 0.08) 100%);
    border-color: rgba(59, 130, 246, 0.28);
}
[data-theme="dark"] .welcome-title {
    color: #93C5FD;
}
[data-theme="dark"] .welcome-desc {
    color: #E2E8F0;
}
[data-theme="dark"] .hero-card-box {
    background: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .hero-card-title {
    color: #93C5FD;
}
[data-theme="dark"] .hero-card-desc {
    color: #CBD5E1;
}
[data-theme="dark"] .hero-feature-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
}
[data-theme="dark"] .hero-feature-item strong {
    color: #FFFFFF;
}
[data-theme="dark"] .hero-feature-item span {
    color: #94A3B8;
}

/* Completely remove Leaflet attribution flag icons */
.leaflet-attribution-flag,
.leaflet-control-attribution svg,
.leaflet-control-attribution img,
.leaflet-control-attribution a[href*="leaflet"] svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.leaflet-control-attribution {
    font-size: 0.75rem !important;
    background: rgba(255, 255, 255, 0.85) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    color: #475569 !important;
}

/* --- Site Footer Styling --- */
.site-footer {
    background: #0F172A;
    color: #F8FAFC;
    padding-top: 3.5rem;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    border-top: 3px solid var(--primary);
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem 1.5rem;
    display: grid;
    grid-template-columns: 2.2fr 1fr 1.2fr 1.4fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}



@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.footer-col-brand {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.footer-logo {
    display: inline-block;
    width: 100%;
    max-width: 360px;
    text-decoration: none;
}

.footer-logo-img {
    width: 100%;
    max-width: 360px;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 16px rgba(96, 165, 250, 0.55)) brightness(1.3) contrast(1.15);
    transition: var(--transition);
}

.footer-logo:hover .footer-logo-img {
    filter: drop-shadow(0 0 22px rgba(96, 165, 250, 0.8)) brightness(1.4) contrast(1.2);
    transform: scale(1.02);
}

.footer-desc {
    font-size: 0.88rem;
    color: #94A3B8;
    line-height: 1.6;
    max-width: 360px;
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.footer-badge {
    background: rgba(37, 99, 235, 0.15);
    color: #60A5FA;
    border: 1px solid rgba(96, 165, 250, 0.25);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 1.2rem;
    letter-spacing: -0.01em;
}

.footer-heading::after {
    content: '';
    display: block;
    width: 24px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    margin-top: 6px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.footer-links a {
    color: #CBD5E1;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: var(--transition);
}

.footer-links a:hover {
    color: #60A5FA;
    padding-left: 4px;
}

.footer-bottom {
    background: #020617;
    border-top: 1px solid #1E293B;
    padding: 1.25rem 1.5rem;
    width: 100%;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    font-size: 0.85rem;
    color: #64748B;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Telegram-Style Emoji Picker & Composer Styles */
.emoji-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
    margin-right: 8px;
}

.emoji-toggle-btn:hover {
    background: #E2E8F0;
    color: var(--primary);
}

.emoji-picker-popover {
    position: absolute;
    bottom: 68px;
    left: 20px;
    width: 290px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    border-radius: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: picker-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes picker-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.emoji-picker-header {
    display: flex;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
    padding: 0 6px;
}

.emoji-picker-tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748B;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    user-select: none;
    transition: all 0.15s ease;
}

.emoji-picker-tab:hover {
    color: #0F172A;
}

.emoji-picker-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 12px 12px 24px 12px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.emoji-picker-grid::-webkit-scrollbar {
    width: 4px;
}

.emoji-picker-grid::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 2px;
}

.emoji-item {
    font-size: 1.45rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    line-height: 1;
    overflow: visible;
}

.emoji-item:hover {
    background: #EFF6FF;
    transform: scale(1.3) translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

/* ==========================================================================
   ANIMATIONS WOW SUITE: 2 (Floating Hearts), 5 (Fluid Pill Slider), 10 (Typing Wave)
   ========================================================================== */

/* --- Feature 2: Floating Hearts & Sparkles Particle Animation --- */
.floating-particle-heart {
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    font-size: 1.25rem;
    user-select: none;
    line-height: 1;
    will-change: transform, opacity;
    animation: float-heart-up 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes float-heart-up {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
    }
    40% {
        opacity: 0.95;
        transform: translate(calc(-50% + var(--dx)), calc(-50% - 35px)) scale(1.25) rotate(var(--dr));
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx) * 1.6), calc(-50% - 80px)) scale(0.7) rotate(calc(var(--dr) * 1.8));
    }
}

/* --- Feature 5: Fluid Pill Slider for Mood Tabs --- */
.tabs-mood {
    position: relative;
}

.tab-mood-slider {
    position: absolute;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    border-radius: 30px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 1;
}

.tab-mood-item {
    position: relative;
    z-index: 2;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.tab-mood-item.active {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

/* --- Feature 10: Telegram/iMessage Style Typing Bubble INSIDE Chat Wallpaper --- */
.chat-typing-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    margin: 8px 0 6px 0;
    width: fit-content;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px 18px 18px 4px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    font-size: 0.83rem;
    color: #1E293B;
    animation: typing-bubble-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    position: relative;
    z-index: 10;
    align-self: flex-start;
}

@keyframes typing-bubble-pop {
    0% { opacity: 0; transform: translateY(6px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.typing-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
    flex-shrink: 0;
}

.typing-info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.typing-name {
    font-weight: 700;
    color: #1E3A8A;
    font-size: 0.84rem;
}

.typing-action {
    font-weight: 500;
    color: #475569;
    font-size: 0.82rem;
}

.typing-dots-wave {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;
    padding: 0;
    background: transparent !important;
    border: none !important;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    animation: typing-dot-fluid-wave 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) { 
    animation-delay: 0s; 
    background: #60A5FA;
}
.typing-dot:nth-child(2) { 
    animation-delay: 0.22s; 
    background: #3B82F6;
}
.typing-dot:nth-child(3) { 
    animation-delay: 0.44s; 
    background: #2563EB;
}

@keyframes typing-dot-fluid-wave {
    0%, 60%, 100% {
        transform: translateY(0) scale(0.85);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px) scale(1.3);
        opacity: 1;
        box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
    }
}

/* --- Quick Mood Switcher Badge & Dropdown --- */
.quick-mood-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.quick-mood-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(224, 231, 255, 0.95));
    border: 1px solid rgba(191, 219, 254, 0.9);
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #1E40AF;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}

.quick-mood-btn:hover {
    transform: translateY(-1px) scale(1.03);
    background: linear-gradient(135deg, rgba(224, 231, 255, 1), rgba(219, 234, 254, 1));
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
    border-color: #60A5FA;
}

.quick-mood-arrow {
    font-size: 0.7rem;
    color: #3B82F6;
    margin-left: 1px;
    transition: transform 0.2s ease;
}

.quick-mood-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 210px;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
    padding: 8px;
    z-index: 99999;
    animation: quick-mood-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes quick-mood-pop {
    0% { opacity: 0; transform: translateY(-8px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.quick-mood-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #94A3B8;
    padding: 4px 10px 8px 10px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 4px;
}

.quick-mood-options {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.quick-mood-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
}

.quick-mood-opt:hover {
    background: #F1F5F9;
    color: #1D4ED8;
    transform: translateX(3px);
}

.quick-mood-opt.active {
    background: #EFF6FF;
    color: #1D4ED8;
    font-weight: 700;
}

/* --- Voice Message Recording & Playback Style Suite --- */
.btn-voice-mic {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.btn-voice-mic:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

.btn-voice-mic:active {
    transform: scale(0.95);
}

.btn-voice-mic.recording {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
    animation: voice-mic-pulse 1.2s infinite;
}

@keyframes voice-mic-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.voice-record-overlay {
    position: absolute;
    left: 45px;
    right: 12px;
    top: 0;
    bottom: 0;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 5;
}

.voice-record-dot {
    font-size: 0.9rem;
    animation: voice-dot-flash 1s infinite alternate;
}

@keyframes voice-dot-flash {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

.voice-record-timer {
    font-weight: 700;
    color: #EF4444;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
}

.voice-record-hint {
    color: #64748B;
    font-size: 0.85rem;
    flex-grow: 1;
    font-weight: 600;
}

.btn-cancel-voice {
    border: none;
    background: transparent;
    color: #EF4444;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}

.btn-cancel-voice:hover {
    background: #FEF2F2;
}

/* Voice Message Bubble Player */
.voice-bubble {
    position: relative;
    padding: 4px 38px 4px 8px !important;
}

.chat-message-item.self .voice-bubble {
    padding: 4px 44px 4px 8px !important;
}

.voice-bubble .chat-msg-meta-inline {
    position: absolute !important;
    right: 8px;
    bottom: 4px;
    margin: 0 !important;
    z-index: 10;
}

.voice-player-container {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 0;
    max-width: none;
    width: max-content;
    user-select: none;
}

.voice-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #3B82F6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.self .voice-play-btn {
    background: #FFFFFF;
    color: #2563EB;
}

.voice-play-btn:hover {
    transform: scale(1.08);
}

.voice-player-timeline {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 78px;
    width: 78px;
}

.voice-player-waveform-wrapper {
    position: relative;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
}

.voice-player-waveform {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
    height: 100%;
    width: 100%;
}

.voice-wave-bar {
    width: 3px;
    background: rgba(0, 0, 0, 0.34);
    border-radius: 1.5px;
    transition: background 0.1s ease;
}

.self .voice-wave-bar {
    background: rgba(255, 255, 255, 0.62);
}

/* Colored active bars as progress */
.voice-wave-bar.active {
    background: #3B82F6;
}

.self .voice-wave-bar.active {
    background: #FFFFFF;
}

.voice-progress-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
    margin: 0;
}

.voice-player-meta {
    font-size: 0.66rem;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 700;
    line-height: 1;
}

.self .voice-player-meta {
    color: rgba(255, 255, 255, 0.85);
}

.voice-speed-btn {
    font-size: 0.68rem;
    font-weight: 800;
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.1);
    border: none;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    outline: none;
}

.self .voice-speed-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.voice-speed-btn:hover {
    transform: scale(1.05);
}

/* ============ Music / Audio File Bubble Player ============ */
.audio-bubble {
    position: relative;
    padding: 4px 52px 4px 8px !important;
    max-width: 330px;
}

.chat-message-item.self .audio-bubble {
    padding: 4px 58px 4px 8px !important;
}

.audio-bubble .chat-msg-meta-inline {
    position: absolute !important;
    right: 8px;
    bottom: 4px;
    margin: 0 !important;
    z-index: 10;
    float: none !important;
}

.chat-audio-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 100%;
    padding: 2px 0;
    user-select: none;
}

.audio-play-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--primary-gradient, linear-gradient(135deg, #2563EB 0%, #3B82F6 100%));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.audio-play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}

.audio-play-btn:active {
    transform: scale(0.96);
}

.self .audio-play-btn {
    background: #FFFFFF;
    color: var(--primary, #2563EB);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.audio-track-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audio-track-name {
    font-size: 0.83rem;
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.audio-track-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-progress-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.14);
    outline: none;
    cursor: pointer;
    margin: 0;
}

.self .audio-progress-slider {
    background: rgba(255, 255, 255, 0.28);
}

.audio-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3B82F6;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.self .audio-progress-slider::-webkit-slider-thumb {
    background: #FFFFFF;
    border-color: var(--primary, #2563EB);
}

.audio-progress-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3B82F6;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.self .audio-progress-slider::-moz-range-thumb {
    background: #FFFFFF;
    border-color: var(--primary, #2563EB);
}

.audio-progress-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}

.audio-track-time {
    font-size: 0.66rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1;
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
}

.self .audio-track-time {
    color: rgba(255, 255, 255, 0.85);
}

.audio-file-badge {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.1);
    padding: 3px 6px;
    border-radius: 6px;
    align-self: flex-start;
    margin-top: 2px;
}

.self .audio-file-badge {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
}

/* Playing state: subtle pulse on the button */
.chat-audio-card.playing .audio-play-btn {
    animation: audio-btn-pulse 1.6s ease-in-out infinite;
}

@keyframes audio-btn-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); }
    50% { box-shadow: 0 2px 16px rgba(37, 99, 235, 0.65); }
}

.self .chat-audio-card.playing .audio-play-btn {
    animation: audio-btn-pulse-self 1.6s ease-in-out infinite;
}

@keyframes audio-btn-pulse-self {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
    50% { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); }
}

/* ============ Attached audio preview in the composer ============ */
.chat-audio-preview {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--primary-light, #EFF6FF);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 12px;
    max-width: 100%;
}

.chat-audio-preview-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-gradient, linear-gradient(135deg, #2563EB 0%, #3B82F6 100%));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-audio-preview-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-audio-preview-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-audio-preview-size {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.chat-audio-preview .chat-photo-remove {
    flex-shrink: 0;
}






/* ============ CONTACTS COMPLETION GATE (mandatory email/phone modal) ============ */
.contacts-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(1200px 600px at 50% -10%, rgba(37, 99, 235, 0.22), rgba(15, 23, 42, 0.72) 60%, rgba(15, 23, 42, 0.85));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: contactsGateFadeIn 0.35s ease both;
}

@keyframes contactsGateFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.contacts-gate-overlay--leaving {
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.contacts-gate-card {
    width: 100%;
    max-width: 460px;
    background: var(--bg-card, #FFFFFF);
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 8px 20px rgba(15, 23, 42, 0.15);
    padding: 2.4rem 2.2rem 2.2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: contactsGateCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes contactsGateCardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.contacts-gate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--primary-gradient, linear-gradient(135deg, #2563EB 0%, #3B82F6 100%));
}

.contacts-gate-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light, #EFF6FF);
    color: var(--primary, #2563EB);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
    animation: contactsGatePulse 2.4s ease-in-out infinite;
}

@keyframes contactsGatePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18); }
    50% { transform: scale(1.06); box-shadow: 0 10px 32px rgba(37, 99, 235, 0.30); }
}

.contacts-gate-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.contacts-gate-subtitle {
    font-size: 0.92rem;
    color: var(--text-muted, #64748B);
    line-height: 1.55;
    margin-bottom: 1.5rem;
}

.contacts-gate-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: var(--danger, #EF4444);
    border-radius: var(--radius-sm, 10px);
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: left;
    animation: contactsGateShake 0.4s ease;
}

@keyframes contactsGateShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

.contacts-gate-card .form-group {
    text-align: left;
    margin-bottom: 1rem;
}

.contacts-gate-card .form-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main, #0F172A);
    margin-bottom: 0.35rem;
    display: block;
}

.contacts-gate-input-wrap {
    position: relative;
}

.contacts-gate-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: #94A3B8;
    pointer-events: none;
    z-index: 1;
}

.contacts-gate-input {
    padding-left: 46px !important;
    height: 50px !important;
    font-size: 0.95rem !important;
    border-radius: var(--radius-sm, 10px) !important;
    transition: var(--transition, all 0.3s ease) !important;
}

.contacts-gate-input:focus {
    border-color: var(--primary, #2563EB) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

.contacts-gate-input:focus + .contacts-gate-input-icon,
.contacts-gate-input-wrap:focus-within .contacts-gate-input-icon {
    color: var(--primary, #2563EB);
}

.contacts-gate-btn {
    width: 100%;
    height: 50px;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm, 10px) !important;
    margin-top: 0.4rem;
    background: var(--primary-gradient, linear-gradient(135deg, #2563EB 0%, #3B82F6 100%)) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    transition: var(--transition, all 0.3s ease) !important;
}

.contacts-gate-btn:hover {
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.contacts-gate-btn:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

/* ============ COOKIE CONSENT BANNER ============ */
.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 9000;
    width: calc(100% - 3rem);
    max-width: 720px;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18), 0 6px 16px rgba(15, 23, 42, 0.08);
    padding: 1.1rem 1.4rem;
    animation: cookieBannerIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cookieBannerIn {
    from { opacity: 0; transform: translateX(-50%) translateY(24px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.cookie-banner--leaving {
    opacity: 0;
    transform: translateX(-50%) translateY(24px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.cookie-banner-icon {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    border: 1px solid #FED7AA;
}

.cookie-banner-text {
    flex: 1;
    min-width: 0;
}

.cookie-banner-title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-main, #0F172A);
    margin-bottom: 0.2rem;
}

.cookie-banner-desc {
    font-size: 0.85rem;
    color: var(--text-muted, #64748B);
    line-height: 1.5;
}

.cookie-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-btn {
    height: 42px;
    padding: 0 1.2rem !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
    border-radius: var(--radius-sm, 10px) !important;
}

#cookie-accept-btn {
    background: var(--primary-gradient, linear-gradient(135deg, #2563EB 0%, #3B82F6 100%)) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
}

@media (max-width: 640px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        bottom: calc(88px + env(safe-area-inset-bottom));
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 120px - env(safe-area-inset-bottom));
        padding: 0.9rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
    }

    .cookie-banner-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .cookie-banner-title { font-size: 0.96rem; }
    .cookie-banner-desc { font-size: 0.8rem; line-height: 1.42; }

    .cookie-banner-actions {
        flex-direction: row;
        width: 100%;
        flex: 0 0 auto;
    }

    .cookie-btn {
        flex: 1;
        width: 100% !important;
        min-height: 44px;
        margin: 0 !important;
    }
}

@media (max-width: 640px) and (max-height: 700px) {
    .cookie-banner {
        gap: 0.55rem;
        bottom: calc(80px + env(safe-area-inset-bottom));
        padding: 0.75rem;
    }
    .cookie-banner-icon { width: 44px; height: 44px; }
    .cookie-banner-desc { font-size: 0.75rem; }
}

/* ============ ADMIN BLOCK USER MODAL ============ */
.admin-block-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: contactsGateFadeIn 0.25s ease both;
}

.admin-block-modal {
    width: 100%;
    max-width: 440px;
    background: var(--bg-card, #FFFFFF);
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    padding: 2rem 1.8rem 1.8rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: contactsGateCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.admin-block-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
}

.admin-block-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FEF2F2;
    color: var(--danger, #EF4444);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.18);
}

.admin-block-modal-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin-bottom: 0.45rem;
}

.admin-block-modal-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted, #64748B);
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.admin-block-modal .form-group {
    text-align: left;
    margin-bottom: 1.1rem;
}

.admin-block-modal textarea.form-input {
    width: 100%;
    resize: vertical;
    min-height: 84px;
    font-size: 0.92rem;
}

.admin-block-modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

/* ============ SUPPORT PAGE ============ */
.support-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.support-ticket-item {
    background: var(--bg-primary, #F8FAFC);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-md, 16px);
    padding: 0.9rem 1rem;
    transition: var(--transition, all 0.3s ease);
}

.support-ticket-item:hover {
    border-color: var(--border-hover, #CBD5E1);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.03));
}

.support-container textarea.form-input {
    width: 100%;
    resize: vertical;
    min-height: 120px;
    font-size: 0.92rem;
}

@media (max-width: 860px) {
    .support-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ ADMIN TICKETS AJAX ACTIONS ============ */
.ticket-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ticket-action-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ============ GLOBAL CUSTOM TOAST ============ */
.global-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%) translateY(20px);
    z-index: 99999;
    max-width: min(92vw, 480px);
    background: rgba(15, 23, 42, 0.94);
    color: #F8FAFC;
    padding: 0.8rem 1.3rem;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
}

.global-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.global-toast--error {
    background: rgba(185, 28, 28, 0.95);
}

.global-toast--success {
    background: rgba(4, 120, 87, 0.95);
}

/* ============ GLOBAL CUSTOM CONFIRM MODAL ============ */
.global-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: contactsGateFadeIn 0.25s ease both;
}

.global-confirm-modal {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card, #FFFFFF);
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    padding: 2rem 1.8rem 1.8rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: contactsGateCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.global-confirm-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
}

.global-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FEF2F2;
    color: var(--danger, #EF4444);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.18);
}

.global-confirm-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin-bottom: 0.45rem;
}

.global-confirm-desc {
    font-size: 0.9rem;
    color: var(--text-muted, #64748B);
    line-height: 1.5;
    margin-bottom: 1.3rem;
    word-break: break-word;
}

.global-confirm-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.global-confirm-ok--danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, .24);
}

.global-confirm-ok--danger:hover {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    box-shadow: 0 8px 20px rgba(220, 38, 38, .32);
}

/* ============ VOICE PLAYER: playing pulse (duration-agnostic) ============ */
.voice-player-container.playing .voice-wave-bar {
    animation: voiceBarPulse 0.9s ease-in-out infinite;
    transform-origin: center bottom;
}

.voice-player-container.playing .voice-wave-bar:nth-child(3n) {
    animation-delay: 0.12s;
}

.voice-player-container.playing .voice-wave-bar:nth-child(3n+1) {
    animation-delay: 0.28s;
}

@keyframes voiceBarPulse {
    0%, 100% { transform: scaleY(0.55); }
    50% { transform: scaleY(1.2); }
}

/* ============ CHAT PHOTO MESSAGES ============ */
.chat-photo-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(37, 99, 235, 0.06);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.chat-photo-preview img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-color, #E2E8F0);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,0.05));
}

.chat-photo-remove {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.7);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.chat-photo-remove:hover {
    background: var(--danger, #EF4444);
    transform: scale(1.1);
}

.chat-msg-bubble.photo-bubble {
    padding: 6px;
    overflow: hidden;
}

.chat-msg-photo-caption {
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 2px 6px 8px;
    word-break: break-word;
}

.chat-msg-photo-img {
    display: block;
    max-width: min(320px, 100%);
    max-height: 340px;
    width: auto;
    border-radius: 12px;
    cursor: zoom-in;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.chat-msg-photo-img:hover {
    transform: scale(1.015);
}

.self .chat-msg-photo-img {
    cursor: zoom-in;
}

/* ============ CHAT PHOTO LIGHTBOX ============ */
.chat-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 15, 30, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    animation: contactsGateFadeIn 0.25s ease both;
}

.chat-photo-lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    cursor: zoom-out;
    animation: contactsGateCardIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chat-photo-lightbox-close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-photo-lightbox-close:hover {
    background: rgba(239, 68, 68, 0.85);
    transform: scale(1.08);
}

/* ============ CHAT PHOTO MESSAGES (Telegram-style) ============ */
.chat-msg-bubble.photo-bubble {
    padding: 0;
    overflow: hidden;
    border-radius: 16px 16px 16px 4px;
    line-height: 0;
}

.chat-message-item.self .chat-msg-bubble.photo-bubble {
    border-radius: 16px 16px 4px 16px;
}

.chat-msg-photo-wrap {
    position: relative;
    line-height: 0;
}

.chat-msg-photo-img {
    display: block;
    max-width: min(320px, 100%);
    max-height: 380px;
    width: auto;
    border-radius: 0;
    cursor: zoom-in;
    object-fit: cover;
}

.chat-msg-photo-time {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.55);
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    user-select: none;
    pointer-events: none;
}

.chat-msg-photo-caption {
    padding: 9px 13px 10px;
    font-size: 0.92rem;
    line-height: 1.5;
    word-break: break-word;
    background: #FFFFFF;
    color: #0F172A;
}

.chat-message-item.self .chat-msg-photo-caption {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
}

/* ============ CHAT PHOTO: Telegram-style ============ */
/* Size constraints live on the BUBBLE (fixed/responsive caps), and the
   photo always fills the bubble width — so no empty area next to the
   photo even when the caption text is long (caption just wraps) */
.chat-msg-bubble.photo-bubble {
    max-width: min(320px, calc(100vw - 110px));
    min-width: min(220px, calc(100vw - 140px));
}

.chat-msg-photo-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 380px;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
    cursor: zoom-in;
}

/* Time is shown only as the overlay pill on the photo (like Telegram),
   so hide the duplicate inline meta strip inside photo bubbles */
.chat-msg-bubble.photo-bubble .chat-msg-meta-inline {
    display: none;
}

/* ============ CHAT: reply / edit / moderation / user card ============ */
.chat-msg-photo-click {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.chat-msg-photo-click:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px #2563EB;
}

.chat-msg-username-click {
    cursor: pointer;
}

.chat-msg-username-click:hover {
    text-decoration: underline;
}

/* Reply quote block inside a bubble */
.chat-reply-quote {
    margin: 2px 0 6px 0;
    padding: 5px 8px;
    border-left: 3px solid #2563EB;
    background: rgba(37, 99, 235, 0.08);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.chat-message-item.self .chat-reply-quote {
    border-left-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.22);
}

.chat-reply-name {
    font-size: 0.76rem;
    font-weight: 700;
    color: #1D4ED8;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.chat-message-item.self .chat-reply-name {
    color: #FFFFFF;
}

.chat-reply-text {
    font-size: 0.78rem;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    max-width: 100%;
    display: block;
}

.chat-message-item.self .chat-reply-text {
    color: rgba(255, 255, 255, 0.9);
}

.chat-msg-text {
    display: inline;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: normal;
}

.chat-message-item.self .chat-msg-text {
    color: #FFFFFF;
}

/* Hidden (moderated) message placeholder */
.chat-msg-bubble.hidden-bubble::before {
    display: none;
}

.msg-edited {
    font-size: 0.7rem;
    opacity: 0.75;
    margin-right: 4px;
}

.msg-highlight {
    animation: msg-highlight-flash 1.6s ease;
}

@keyframes msg-highlight-flash {
    0%, 60% { background: rgba(37, 99, 235, 0.14); border-radius: 12px; }
    100% { background: transparent; }
}

/* Reply / Edit context bar above the input row */
.chat-context-bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(37, 99, 235, 0.06);
    border-left: 3px solid #2563EB;
    border-radius: 10px;
    box-sizing: border-box;
}

.chat-context-icon {
    color: #2563EB;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.chat-context-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-context-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1D4ED8;
}

.chat-context-text {
    font-size: 0.78rem;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-photo-remove {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.08);
    color: #475569;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    z-index: 10;
    transition: background 0.15s ease, transform 0.15s ease;
}

.chat-photo-remove:hover {
    background: rgba(15, 23, 42, 0.18);
    transform: scale(1.1);
}

.chat-photo-remove:active {
    transform: scale(0.92);
    background: rgba(239, 68, 68, 0.2);
    color: #DC2626;
}

.chat-photo-remove svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
    fill: currentColor;
}

[data-theme="dark"] .chat-context-bar {
    background: rgba(59, 130, 246, 0.12) !important;
    border-left-color: #3B82F6 !important;
}

[data-theme="dark"] .chat-context-title {
    color: #93C5FD !important;
}

[data-theme="dark"] .chat-context-text {
    color: #94A3B8 !important;
}

[data-theme="dark"] .chat-photo-remove {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .chat-photo-remove:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Hide-message moderation modal */
.hide-reason-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 1rem 0;
    text-align: left;
}

.hide-reason-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #F1F5F9;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0F172A;
    cursor: pointer;
}

.hide-reason-option input {
    accent-color: #2563EB;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* User card popup */
.user-card-modal {
    position: relative;
    padding-top: 3rem;
}

.user-card-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #F1F5F9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.user-card-close:hover {
    background: #EF4444;
    color: #FFFFFF;
}

.user-card-modal img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #2563EB;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

.user-card-name {
    margin: 0.8rem 0 0.2rem;
    font-size: 1.2rem;
    color: #0F172A;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.user-card-meta {
    font-size: 0.85rem;
    color: #64748B;
}

.user-card-status {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    color: #334155;
}

.user-card-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 0.7rem;
}

.user-card-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1D4ED8;
    background: rgba(37, 99, 235, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
}

.user-card-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 1.1rem;
}

/* ============================================================
   DARK THEME (data-theme="dark")
   ============================================================ */
.theme-toggle-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 99999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.theme-toggle-btn:hover { transform: translateY(-2px); }
.theme-icon { display: flex; align-items: center; justify-content: center; }
.theme-icon-sun { display: none; }

[data-theme="dark"] {
    color-scheme: dark;
    /* Base: deep blue-tinted charcoal, NOT pure black */
    --bg-primary: #101116;
    --bg-card: #191A21;
    --bg-secondary: #14151A;
    --primary: #3B82F6;
    --primary-hover: #60A5FA;
    --primary-light: rgba(59, 130, 246, 0.14);
    --primary-gradient: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --accent: #60A5FA;
    --text-main: #E9EAEF;
    --text-muted: #9AA0AC;
    --text-blue: #A5C8F5;
    --border-color: #2A2C35;
    --border-hover: #3A3D47;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] body {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .theme-icon-sun { display: flex; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* ---------- Header / footer ---------- */
[data-theme="dark"] header {
    background: rgba(16, 17, 22, 0.88);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .nav-link { color: var(--text-main); }
[data-theme="dark"] .nav-user-name { color: var(--text-main); }
[data-theme="dark"] .site-footer { background: #14151A; }
[data-theme="dark"] .footer-desc,
[data-theme="dark"] .footer-copyright { color: var(--text-muted); }

/* ---------- Cards & panels ---------- */
[data-theme="dark"] .card-user,
[data-theme="dark"] .profile-section-card,
[data-theme="dark"] .walk-card,
[data-theme="dark"] .user-card-modal,
[data-theme="dark"] .auth-drawer,
[data-theme="dark"] .doc-card,
[data-theme="dark"] .contacts-gate-card,
[data-theme="dark"] .global-confirm-modal,
[data-theme="dark"] .admin-block-modal,
[data-theme="dark"] .cookie-banner,
[data-theme="dark"] .gallery-preview-item,
[data-theme="dark"] .photo-upload-zone,
[data-theme="dark"] .meetup-card,
[data-theme="dark"] .review-item,
[data-theme="dark"] .support-ticket-item,
[data-theme="dark"] .custom-modal-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}
[data-theme="dark"] .user-card-status { color: #C9CDD6; }
[data-theme="dark"] .user-card-chip { color: #93C5FD; background: rgba(59, 130, 246, 0.16); }
[data-theme="dark"] .walk-card-footer { border-top-color: var(--border-color); }
[data-theme="dark"] .profile-info-label { color: var(--text-muted); }
[data-theme="dark"] .profile-info-val { color: var(--text-main); }
[data-theme="dark"] .interest-tag { background: rgba(59, 130, 246, 0.13); color: #93C5FD; }
[data-theme="dark"] .section-title { color: var(--text-main); }
[data-theme="dark"] .review-comment,
[data-theme="dark"] .review-author-name { color: var(--text-main); }

/* Inline light placeholders */
[data-theme="dark"] [style*="F8FAFC"] { background-color: #17181D !important; }

/* ---------- Forms & inputs ---------- */
[data-theme="dark"] .form-input,
[data-theme="dark"] .chat-input,
[data-theme="dark"] .chat-search-input,
[data-theme="dark"] .gallery-preview-caption,
[data-theme="dark"] .gallery-caption-input,
[data-theme="dark"] textarea.form-input,
[data-theme="dark"] select.form-input {
    background: #101116;
    color: var(--text-main);
    border-color: var(--border-color);
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .chat-input:focus,
[data-theme="dark"] .chat-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .chat-input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .form-label { color: var(--text-main); }
[data-theme="dark"] select.form-input option { background: #191A21; color: var(--text-main); }

/* ---------- Tabs / pills / consents ---------- */
[data-theme="dark"] .tab-mood-item:not(.active) { background: #17181D; color: var(--text-muted); border-color: var(--border-color); }
[data-theme="dark"] .mood-pill-item { background: #202128; color: var(--text-main); border-color: var(--border-color); }
[data-theme="dark"] .reg-consents { background: #17181D; border-color: var(--border-color); }
[data-theme="dark"] .consent-item { color: var(--text-main); }

/* ---------- Buttons ---------- */
[data-theme="dark"] .btn-secondary { background: #202128; color: var(--text-main); border-color: var(--border-color); }
[data-theme="dark"] .btn-secondary:hover { background: #2A2C35; }
[data-theme="dark"] .btn-cancel-outline { color: var(--text-main); border-color: var(--border-color); }
[data-theme="dark"] .btn-locate-me { background: #202128; color: var(--text-main); border-color: var(--border-color); }

/* Tinted inline button colors → muted dark variants */
[data-theme="dark"] [style*="#ECFDF5"] { background: rgba(16, 185, 129, 0.14) !important; color: #6EE7B7 !important; border-color: rgba(16, 185, 129, 0.32) !important; }
[data-theme="dark"] [style*="#DEF7EC"] { background: rgba(16, 185, 129, 0.14) !important; color: #6EE7B7 !important; border-color: rgba(16, 185, 129, 0.32) !important; }
[data-theme="dark"] [style*="#FEF2F2"] { background: rgba(239, 68, 68, 0.13) !important; color: #FCA5A5 !important; border-color: rgba(239, 68, 68, 0.32) !important; }
[data-theme="dark"] [style*="#FEE2E2"] { background: rgba(239, 68, 68, 0.16) !important; color: #FCA5A5 !important; }
[data-theme="dark"] [style*="#FFFBEB"] { background: rgba(245, 158, 11, 0.13) !important; color: #FCD34D !important; border-color: rgba(245, 158, 11, 0.32) !important; }
[data-theme="dark"] [style*="#FEF3C7"] { background: rgba(245, 158, 11, 0.16) !important; color: #FBBF24 !important; }
[data-theme="dark"] [style*="#EFF6FF"] { background: rgba(59, 130, 246, 0.14) !important; color: #93C5FD !important; border-color: rgba(59, 130, 246, 0.32) !important; }
[data-theme="dark"] [style*="#FDE8E8"] { background: rgba(239, 68, 68, 0.14) !important; color: #FCA5A5 !important; border-color: rgba(239, 68, 68, 0.32) !important; }

/* ---------- Alerts ---------- */
[data-theme="dark"] .alert-box { background: #17181D; border-color: var(--border-color); color: var(--text-main); }
[data-theme="dark"] .alert-box.alert-success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); color: #6EE7B7; }
[data-theme="dark"] .alert-box.alert-error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); color: #FCA5A5; }

/* ---------- Admin tables ---------- */
[data-theme="dark"] .admin-table { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .admin-table th { background: #14151A; color: var(--text-muted); border-color: var(--border-color); }
[data-theme="dark"] .admin-table td { border-color: var(--border-color); color: var(--text-main); }
[data-theme="dark"] .admin-table tr:hover td { background: #202128; }

/* ---------- Chats ---------- */
[data-theme="dark"] .chat-rooms-sidebar { background: #13151B; border-color: var(--border-color); }
[data-theme="dark"] .chat-search-input { background: #1A1D26; border-color: #282D3D; color: #E2E8F0; }
[data-theme="dark"] .chat-search-input:focus { background: #202432; border-color: #3B82F6; }
[data-theme="dark"] .chat-main { background: var(--bg-primary); }
[data-theme="dark"] .chat-messages-box {
    background: #0D0E13;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.07) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(59, 130, 246, 0.05) 0%, transparent 45%);
}
[data-theme="dark"] .chat-room-btn { color: var(--text-main); }
[data-theme="dark"] .chat-room-btn:hover { background: #1A1D26; }
[data-theme="dark"] .chat-room-btn.active { 
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.35) 0%, rgba(29, 78, 216, 0.25) 100%);
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .chat-room-btn.active .chat-avatar-status-dot { border-color: #1e293b; }
[data-theme="dark"] .chat-dialog-avatar { background: #202128; border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .chat-avatar-status-dot { border-color: #13151B; }
[data-theme="dark"] .dialog-status-text.online { color: #34D399; }
[data-theme="dark"] .chat-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
[data-theme="dark"] .chat-msg-bubble {
    background: #202128;
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .chat-message-item:not(.self) .chat-msg-bubble::before { border-color: transparent #202128 transparent transparent; }
[data-theme="dark"] .chat-msg-bubble.hidden-bubble { background: rgba(239, 68, 68, 0.12); color: var(--text-muted); }
[data-theme="dark"] .voice-bubble { background: #202128; color: var(--text-main); }
[data-theme="dark"] .audio-bubble { background: #202128; color: var(--text-main); }
[data-theme="dark"] .chat-input-wrapper { background: #101116; border-color: var(--border-color); }
[data-theme="dark"] .chat-reply-quote { background: rgba(148, 163, 184, 0.12); }
[data-theme="dark"] .chat-msg-username { color: #A5C8F5; }
[data-theme="dark"] .chat-msg-photo-caption { background: #202128; color: var(--text-main); }
[data-theme="dark"] .chat-message-item.self .chat-msg-photo-caption { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: #FFFFFF; }
[data-theme="dark"] .chat-photo-preview { background: rgba(59, 130, 246, 0.1); border-color: var(--border-color); }
[data-theme="dark"] .chat-audio-preview { background: rgba(59, 130, 246, 0.1); border-color: var(--border-color); }
[data-theme="dark"] .chat-header { border-color: var(--border-color); background: var(--bg-card); }
[data-theme="dark"] .chat-input-form { background: var(--bg-card); border-color: var(--border-color); }

/* Voice player dark tweaks */
[data-theme="dark"] .voice-wave-bar { background: rgba(233, 234, 239, 0.32); }
[data-theme="dark"] .self .voice-wave-bar { background: rgba(255, 255, 255, 0.6); }
[data-theme="dark"] .voice-player-meta { color: rgba(233, 234, 239, 0.55); }
[data-theme="dark"] .voice-speed-btn { color: #93C5FD; background: rgba(59, 130, 246, 0.14); }

/* Audio player dark tweaks */
[data-theme="dark"] .audio-progress-slider { background: rgba(233, 234, 239, 0.2); }
[data-theme="dark"] .self .audio-progress-slider { background: rgba(255, 255, 255, 0.28); }
[data-theme="dark"] .audio-track-time { color: rgba(233, 234, 239, 0.55); }
[data-theme="dark"] .audio-file-badge { color: #93C5FD; background: rgba(59, 130, 246, 0.14); }
[data-theme="dark"] .self .audio-file-badge { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }

/* Popovers / dropdowns */
[data-theme="dark"] .emoji-picker-popover { background: #202128; border-color: var(--border-color); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
[data-theme="dark"] .emoji-picker-tab { color: var(--text-muted); }
[data-theme="dark"] .emoji-picker-tab.active { color: #93C5FD; }
[data-theme="dark"] .quick-mood-dropdown { background: #202128; border-color: var(--border-color); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
[data-theme="dark"] .quick-mood-opt { color: var(--text-main); }
[data-theme="dark"] .quick-mood-opt:hover { background: #2A2C35; }

/* Typing indicator */
[data-theme="dark"] .chat-typing-box { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .typing-name { color: var(--text-main); }
[data-theme="dark"] .typing-action { color: var(--text-muted); }

/* ---------- Auth drawer ---------- */
[data-theme="dark"] .auth-drawer-header { background: #14151A; border-bottom: 1px solid var(--border-color); }
[data-theme="dark"] .auth-drawer-close { color: var(--text-main); }
[data-theme="dark"] .auth-drawer-error { background: rgba(239, 68, 68, 0.14); color: #FCA5A5; border-color: rgba(239, 68, 68, 0.3); }

/* ---------- Uploads / gallery ---------- */
[data-theme="dark"] .gallery-upload-zone { background: linear-gradient(135deg, #17181D 0%, #1C1D24 100%); border-color: #3A3D47; }
[data-theme="dark"] .gallery-upload-zone-icon { background: #202128; color: #60A5FA; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .photo-upload-placeholder { color: var(--text-muted); }
[data-theme="dark"] .upload-icon { color: #60A5FA; background: rgba(59, 130, 246, 0.14); }
[data-theme="dark"] .upload-text { color: var(--text-main); }
[data-theme="dark"] .upload-subtext { color: var(--text-muted); }

/* ---------- Modals (dark-safe) ---------- */
[data-theme="dark"] .chat-photo-lightbox { background: rgba(8, 9, 13, 0.93); }
[data-theme="dark"] .global-toast { background: rgba(233, 234, 239, 0.94); color: #101116; }

/* ---------- Docs pages ---------- */
[data-theme="dark"] .doc-header { background: #14151A; border-color: var(--border-color); }
[data-theme="dark"] .doc-iframe { background: #101116; border-color: var(--border-color); }

/* ---------- Walk drawer ---------- */
[data-theme="dark"] .walk-drawer,
[data-theme="dark"] .auth-drawer-body { background: var(--bg-card); color: var(--text-main); }

/* ---------- Dark theme: remaining components ---------- */
[data-theme="dark"] .card-photo-wrapper { background: #202128; }
[data-theme="dark"] .tab-mood-item:hover { background: #202128; }
[data-theme="dark"] .gallery-item { background: #17181D; border-color: var(--border-color); }
[data-theme="dark"] .gallery-ctrl-btn { background: #202128; color: var(--text-main); }
[data-theme="dark"] .walk-criteria-badge { background: #202128; color: var(--text-main); border-color: var(--border-color); }
[data-theme="dark"] .walk-criteria-badge.no-match { background: rgba(239, 68, 68, 0.14); color: #FCA5A5; border-color: rgba(239, 68, 68, 0.3); }
[data-theme="dark"] .chat-action-btn:hover { background: rgba(148, 163, 184, 0.15); }
[data-theme="dark"] .btn-modal-cancel { background: #202128; color: var(--text-main); }
[data-theme="dark"] .auth-drawer label.mood-pill-item { background: #202128; color: var(--text-main); border-color: var(--border-color); }
[data-theme="dark"] .hero-feature-item { background: #17181D; border-color: var(--border-color); }
[data-theme="dark"] .hero-feature-item:hover { background: #202128; }
[data-theme="dark"] .hero-feature-item span { color: var(--text-muted); }
[data-theme="dark"] .photo-preview-img { background: #202128; }
[data-theme="dark"] #filter-reset-btn { background: #202128; color: var(--text-main); border-color: var(--border-color); }
[data-theme="dark"] .online-indicator.offline { background: #3A3D47; }
[data-theme="dark"] .voice-record-overlay { background: rgba(239, 68, 68, 0.92); }
[data-theme="dark"] .hide-reason-option { background: var(--bg-card); color: var(--text-main); border-color: var(--border-color); }
[data-theme="dark"] .user-card-close { background: rgba(32, 33, 40, 0.85); color: var(--text-main); }
[data-theme="dark"] .emoji-picker-header { background: #17181D; border-color: var(--border-color); }
[data-theme="dark"] .emoji-item:hover { background: #2A2C35; }
[data-theme="dark"] .typing-dot { background: #9AA0AC; }
[data-theme="dark"] .typing-dots-wave .typing-dot { background: #60A5FA; }

/* Welcome banner inline gradient */
[data-theme="dark"] [style*="#EFF6FF"] { background: linear-gradient(135deg, #17181D 0%, #101116 100%) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] [style*="#DBEAFE"] { background: #17181D !important; }

/* ============ THEME SWITCH CASCADE (View Transitions) ============ */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

.theme-toggle-btn .theme-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============ PROFILE SAVED POPUP ============ */
.profile-saved-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: contactsGateFadeIn 0.25s ease both;
}

.profile-saved-overlay--leaving {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.profile-saved-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25), 0 8px 20px rgba(15, 23, 42, 0.12);
    padding: 1.8rem 2.6rem;
    animation: profileSavedIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes profileSavedIn {
    from { opacity: 0; transform: scale(0.7) translateY(16px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.profile-saved-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.22);
    animation: profileSavedPulse 1.6s ease-in-out infinite;
}

@keyframes profileSavedPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.22); }
    50% { transform: scale(1.07); box-shadow: 0 10px 30px rgba(16, 185, 129, 0.34); }
}

.profile-saved-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-main, #0F172A);
}

/* ============ WALK CREATE DRAWER (centered modal) ============ */
.walk-create-drawer {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) scale(0.92);
    width: 480px;
    max-width: 95%;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: block !important;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: var(--bg-card);
    color: var(--text-main);
}

.walk-create-drawer.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* ============ POSTS: DZEN STYLE FEED & DEDICATED PAGES ============ */
.posts-dzen-container {
    max-width: 860px;
    margin: 0 auto 3rem;
    width: 100%;
}

.posts-dzen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
}

.posts-dzen-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted, #64748B);
    line-height: 1.5;
    margin: 0;
}

.dzen-feed-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* --- DZEN POST CARD (IMAGE ON THE LEFT) --- */
.dzen-post-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-lg, 20px);
    padding: 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.4rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,0.06));
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.dzen-post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(15,23,42,0.09));
    border-color: #CBD5E1;
}

.dzen-card-thumb-wrap {
    width: 240px;
    min-width: 240px;
    height: 165px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-primary, #F8FAFC);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    flex-shrink: 0;
}

.dzen-card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.dzen-post-card:hover .dzen-card-thumb-img {
    transform: scale(1.04);
}

.dzen-card-thumb-placeholder {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #3B82F6;
}

.dzen-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
}

.dzen-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.dzen-card-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}

.dzen-author-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.dzen-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.dzen-author-name {
    font-weight: 700;
    color: var(--text-main, #0F172A);
    transition: color 0.2s;
}

.dzen-author-name:hover {
    color: var(--primary, #2563EB);
    text-decoration: underline;
}

.dzen-meta-dot {
    color: var(--text-muted, #94A3B8);
    font-size: 0.8rem;
}

.dzen-card-date {
    color: var(--text-muted, #64748B);
    font-size: 0.8rem;
}

.dzen-card-title-link {
    text-decoration: none;
    margin-bottom: 0.4rem;
    display: block;
}

.dzen-card-title {
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.dzen-card-title:hover {
    color: var(--primary, #2563EB);
}

.dzen-card-excerpt {
    font-size: 0.92rem;
    color: var(--text-muted, #64748B);
    line-height: 1.55;
    margin: 0 0 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dzen-excerpt-link {
    color: inherit;
    text-decoration: none;
}

.dzen-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.4rem;
}

.dzen-card-reactions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.post-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-color, #E2E8F0);
    color: var(--text-muted, #64748B);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-react-btn:hover {
    border-color: var(--primary, #2563EB);
    color: var(--primary, #2563EB);
}

.post-react-btn.like.active {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10B981;
    color: #10B981;
}

.post-react-btn.dislike.active {
    background: rgba(239, 68, 68, 0.12);
    border-color: #EF4444;
    color: #EF4444;
}

.dzen-comments-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border-color, #E2E8F0);
    color: var(--text-muted, #64748B);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dzen-comments-badge:hover {
    border-color: var(--primary, #2563EB);
    color: var(--primary, #2563EB);
    background: rgba(37, 99, 235, 0.06);
}

.dzen-views-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--text-muted, #64748B);
    font-size: 0.82rem;
    font-weight: 700;
}

.post-views-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #64748B);
    white-space: nowrap;
}

.post-views-meta svg path { fill: currentColor !important; }

/* Выделенный счётчик просмотров статьи — прижат к правому краю мета-строки */
.post-views-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 7px 14px;
    border: 1px solid rgba(37, 99, 235, .22);
    border-radius: 999px;
    background: rgba(37, 99, 235, .07);
    color: var(--primary, #2563EB);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.post-views-badge svg,
.post-views-badge svg path {
    fill: currentColor !important;
    flex-shrink: 0;
}

.post-views-badge-num {
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.post-views-badge-label {
    color: var(--text-muted, #64748B);
    font-weight: 600;
}

[data-theme="dark"] .post-views-badge {
    border-color: rgba(96, 165, 250, .28);
    background: rgba(96, 165, 250, .12);
    color: #93C5FD;
}

[data-theme="dark"] .post-views-badge-label { color: #94A3B8; }

@media (max-width: 640px) {
    .post-views-badge {
        margin-left: 0;
        padding: 6px 12px;
        font-size: .78rem;
    }
    .post-views-badge-num { font-size: .88rem; }
}

.chat-action-toast {
    width: min(460px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    padding: 12px 18px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 14px;
    background: rgba(15, 23, 42, .94);
    color: #fff;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .24);
    animation: chatToastIn .2s ease-out both;
}
.chat-action-toast--error {
    border-color: rgba(185, 28, 28, .35);
    background: rgba(220, 38, 38, .96);
}

.account-status-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(9px);
}
.account-status-overlay[hidden] { display: none; }
.account-status-card {
    width: min(430px, calc(100vw - 32px));
    padding: 28px 24px 24px;
    border: 1px solid rgba(248, 113, 113, .35);
    border-radius: 22px;
    background: var(--bg-card);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .34);
    text-align: center;
    animation: accountStatusIn .28s cubic-bezier(.16,1,.3,1) both;
    box-sizing: border-box;
}
.account-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: #FEE2E2;
    color: #DC2626;
    font-size: 1.75rem;
    font-weight: 900;
}
.account-status-card h2 { margin: 0 0 9px; color: var(--text-main); font-size: 1.25rem; }
.account-status-card p { margin: 0 auto 18px; max-width: 340px; color: var(--text-muted); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.account-status-countdown { color: var(--text-muted); font-size: .8rem; }
.account-status-countdown strong { color: #DC2626; font-size: 1rem; }
.account-status-progress { height: 5px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: #FEE2E2; }
.account-status-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#EF4444,#F97316); transform-origin: left; animation: accountStatusProgress 15s linear forwards; }
[data-theme="dark"] .account-status-icon { background: rgba(220,38,38,.18); color: #FCA5A5; }
[data-theme="dark"] .account-status-progress { background: rgba(220,38,38,.18); }
@keyframes accountStatusIn { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes accountStatusProgress { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@keyframes chatToastIn {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 620px) {
    .chat-action-toast {
        bottom: calc(78px + env(safe-area-inset-bottom));
        width: calc(100vw - 24px);
        padding: 11px 14px;
        border-radius: 13px;
        font-size: .78rem;
    }
}

.dzen-read-more-link {
    color: var(--primary, #2563EB);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.dzen-read-more-link:hover {
    background: rgba(37, 99, 235, 0.08);
    text-decoration: underline;
}

.dzen-empty-feed {
    text-align: center;
    color: var(--text-muted, #64748B);
    padding: 3.5rem 1rem;
    background: var(--bg-card, #FFFFFF);
    border-radius: var(--radius-lg, 20px);
    border: 1px dashed var(--border-color, #E2E8F0);
    font-size: 1.05rem;
}

/* Loader */
.posts-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.8rem;
    gap: 6px;
}

.posts-loader-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary, #2563EB);
    animation: postsDotBounce 1.2s ease-in-out infinite;
}

.posts-loader-dot:nth-child(2) { animation-delay: 0.15s; }
.posts-loader-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes postsDotBounce {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-6px); opacity: 1; }
}

/* ============ DEDICATED ARTICLE VIEW PAGE ============ */
.post-article-container {
    max-width: 820px;
    margin: 0 auto 3rem;
    width: 100%;
}

.post-page-nav-bar {
    margin-bottom: 1.2rem;
}

.btn-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted, #64748B);
    text-decoration: none;
    padding: 6px 14px;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 999px;
    transition: all 0.2s ease;
}

.btn-back-link:hover {
    color: var(--primary, #2563EB);
    border-color: var(--primary, #2563EB);
    background: rgba(37, 99, 235, 0.05);
}

.post-article-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-lg, 24px);
    padding: 2.2rem 2.4rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,0.06));
}

.post-article-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0 0 1.2rem;
    line-height: 1.28;
    letter-spacing: -0.02em;
}

.post-article-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.4rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    flex-wrap: wrap;
}

.post-article-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-article-author-avatar-link {
    text-decoration: none;
}

.post-article-author-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}

.post-article-author-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main, #0F172A);
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
}

.post-article-author-name:hover {
    color: var(--primary, #2563EB);
    text-decoration: underline;
}

.post-article-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: var(--text-muted, #64748B);
}

.post-dot-sep {
    color: var(--text-muted, #94A3B8);
}

.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--danger, #EF4444);
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger-outline:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: var(--danger, #EF4444);
}

.post-article-cover-wrap {
    margin-bottom: 1.8rem;
    border-radius: 16px;
    overflow: hidden;
    max-height: 440px;
    background: var(--bg-primary, #F8FAFC);
}

.post-article-cover-img {
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: cover;
    display: block;
}

.post-article-body {
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-main, #0F172A);
    word-break: break-word;
    margin-bottom: 2rem;
}

.post-article-body p {
    margin-bottom: 1.1rem;
}

.post-article-body h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 1.6rem 0 0.8rem;
    line-height: 1.35;
}

.post-article-body blockquote {
    margin: 1.4rem 0;
    padding: 0.8rem 1.2rem;
    border-left: 4px solid var(--primary, #2563EB);
    background: var(--bg-primary, #F8FAFC);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: var(--text-main, #0F172A);
}

.post-article-body img {
    max-width: 100%;
    border-radius: 14px;
    margin: 1.2rem 0;
    display: block;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.post-article-body a {
    color: var(--primary, #2563EB);
    text-decoration: underline;
    font-weight: 600;
}

/* Article Action & Share Bar */
.post-article-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--border-color, #E2E8F0);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    margin-bottom: 2.2rem;
    margin-top: 1.8rem;
    flex-wrap: wrap;
}

.post-article-reactions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.post-article-share {
    display: flex;
    align-items: center;
}

.post-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-primary, #F8FAFC);
    border: 1px solid var(--border-color, #E2E8F0);
    color: var(--text-main, #0F172A);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.post-share-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--primary, #2563EB);
    color: var(--primary, #2563EB);
    transform: translateY(-1px);
}

.post-share-btn:active {
    transform: translateY(0);
}

.post-share-btn.copied {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

/* Comments Section */
.post-comments-section {
    margin-top: 1.5rem;
}

.post-comments-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-comments-count {
    font-size: 1.05rem;
    color: var(--text-muted, #64748B);
    font-weight: 700;
}

.post-comment-form {
    display: flex;
    gap: 14px;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.post-comment-my-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.post-comment-input-wrap {
    flex: 1;
}

.post-comment-textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 75px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    border-radius: 12px;
    border: 1px solid var(--border-color, #E2E8F0);
    background: var(--bg-card, #FFFFFF);
    color: var(--text-main, #0F172A);
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.post-comment-textarea:focus {
    outline: none;
    border-color: var(--primary, #2563EB);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.post-comments-guest-notice {
    padding: 1.25rem 1.5rem;
    background: var(--bg-primary, #F8FAFC);
    border: 1px dashed var(--border-color, #E2E8F0);
    border-radius: var(--radius-md, 16px);
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted, #64748B);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.post-comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.post-comment-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.post-comment-avatar-link {
    flex-shrink: 0;
    text-decoration: none;
}

.post-comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.post-comment-bubble {
    flex: 1;
    background: var(--bg-primary, #F8FAFC);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 14px;
    padding: 0.9rem 1.15rem;
}

.post-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
}

.post-comment-author {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-main, #0F172A);
    text-decoration: none;
}

.post-comment-author:hover {
    color: var(--primary, #2563EB);
    text-decoration: underline;
}

.post-comment-date {
    font-size: 0.78rem;
    color: var(--text-muted, #94A3B8);
}

.post-comment-text {
    font-size: 0.94rem;
    color: var(--text-main, #0F172A);
    line-height: 1.55;
    word-break: break-word;
}

/* --- Комментарии: ответы, реакции, редактирование --- */
.post-comment-body {
    flex: 1;
    min-width: 0;
}

.post-comment-edited {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--text-muted, #94A3B8);
}

.post-comment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0 0 4px;
}

.post-comment-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted, #64748B);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.post-comment-react-btn svg,
.post-comment-react-btn svg path { fill: currentColor !important; }

.post-comment-react-btn:hover {
    background: rgba(100, 116, 139, .1);
    color: var(--text-main, #0F172A);
}

.post-comment-react-btn.like.active {
    background: rgba(37, 99, 235, .1);
    border-color: rgba(37, 99, 235, .3);
    color: var(--primary, #2563EB);
}

.post-comment-react-btn.dislike.active {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .3);
    color: #EF4444;
}

.post-comment-react-count { font-variant-numeric: tabular-nums; }

.post-comment-action-link {
    padding: 4px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #64748B);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.post-comment-action-link:hover {
    background: rgba(37, 99, 235, .08);
    color: var(--primary, #2563EB);
}

.post-comment-replies {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.9rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border-color, #E2E8F0);
}

.post-comment-item-reply .post-comment-avatar {
    width: 34px;
    height: 34px;
}

.post-comment-reply-form,
.post-comment-edit-form {
    margin-top: 0.7rem;
}

.post-comment-edit-textarea,
.post-comment-reply-textarea {
    width: 100%;
    resize: vertical;
    min-height: 62px;
    font-size: 0.92rem;
    line-height: 1.5;
    box-sizing: border-box;
}

.post-comment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0.5rem;
}

.post-comment-mini-btn {
    padding: 0.42rem 1rem;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted, #64748B);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.post-comment-mini-btn:hover {
    background: rgba(100, 116, 139, .1);
    color: var(--text-main, #0F172A);
}

.post-comment-mini-btn.primary {
    border-color: var(--primary, #2563EB);
    background: var(--primary, #2563EB);
    color: #fff;
}

.post-comment-mini-btn.primary:hover { filter: brightness(1.07); color: #fff; }

[data-theme="dark"] .post-comment-replies { border-left-color: var(--border-color, #334155); }

[data-theme="dark"] .post-comment-react-btn:hover,
[data-theme="dark"] .post-comment-mini-btn:hover {
    background: rgba(148, 163, 184, .16);
    color: var(--text-main, #F1F5F9);
}

[data-theme="dark"] .post-comment-react-btn.like.active {
    background: rgba(96, 165, 250, .16);
    border-color: rgba(96, 165, 250, .34);
    color: #93C5FD;
}

[data-theme="dark"] .post-comment-mini-btn { border-color: var(--border-color, #334155); }

@media (max-width: 640px) {
    .post-comment-replies { padding-left: 0.65rem; }
    .post-comment-actions { gap: 2px; }
    .post-comment-react-btn,
    .post-comment-action-link { padding: 4px 7px; font-size: 0.74rem; }
}

/* Dark Theme overrides for posts */
[data-theme="dark"] .post-article-card,
[data-theme="dark"] .post-create-card,
[data-theme="dark"] .dzen-post-card {
    background: var(--bg-card, #1E293B);
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .post-article-title,
[data-theme="dark"] .post-create-page-title,
[data-theme="dark"] .dzen-card-title,
[data-theme="dark"] .post-comments-title,
[data-theme="dark"] .post-comment-author {
    color: var(--text-main, #F1F5F9);
}

[data-theme="dark"] .post-article-body {
    color: var(--text-main, #E2E8F0);
}

[data-theme="dark"] .post-article-footer-bar {
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .post-react-btn,
[data-theme="dark"] .post-share-btn,
[data-theme="dark"] .dzen-comments-badge,
[data-theme="dark"] .btn-back-link {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color, #334155);
    color: var(--text-muted, #94A3B8);
}

[data-theme="dark"] .post-react-btn:hover,
[data-theme="dark"] .post-share-btn:hover,
[data-theme="dark"] .dzen-comments-badge:hover,
[data-theme="dark"] .btn-back-link:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--primary, #3B82F6);
    color: #93C5FD;
}

[data-theme="dark"] .post-comments-guest-notice,
[data-theme="dark"] .post-comment-bubble {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .post-comment-text {
    color: var(--text-main, #E2E8F0);
}

[data-theme="dark"] .post-comment-textarea {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color, #334155);
    color: var(--text-main, #F1F5F9);
}

/* ============ DEDICATED POST CREATE PAGE ============ */
.post-create-page-container {
    max-width: 820px;
    margin: 0 auto 3rem;
    width: 100%;
}

.post-create-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-lg, 24px);
    padding: 2.2rem 2.4rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,0.06));
}

.post-create-card-header {
    margin-bottom: 1.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.post-create-page-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0 0 0.4rem;
}

.post-create-page-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted, #64748B);
    margin: 0;
}

.post-title-input {
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0.85rem 1.1rem;
}

.post-cover-dropzone {
    border: 2px dashed var(--border-color, #CBD5E1);
    border-radius: 16px;
    padding: 1.8rem;
    text-align: center;
    background: var(--bg-primary, #F8FAFC);
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-cover-dropzone:hover {
    border-color: var(--primary, #2563EB);
    background: rgba(37, 99, 235, 0.03);
}

.post-cover-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cover-upload-icon {
    color: var(--primary, #2563EB);
    margin-bottom: 4px;
}

.cover-upload-text {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main, #0F172A);
}

.cover-upload-subtext {
    font-size: 0.82rem;
    color: var(--text-muted, #64748B);
}

.post-cover-preview-img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.photo-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.photo-remove-btn:hover {
    background: var(--danger, #EF4444);
}

/* Editor */
.post-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: var(--bg-primary, #F8FAFC);
    border: 1px solid var(--border-color, #E2E8F0);
    border-bottom: none;
    border-radius: var(--radius-sm, 12px) var(--radius-sm, 12px) 0 0;
    flex-wrap: wrap;
}

.post-tool-btn {
    min-width: 36px;
    height: 34px;
    padding: 0 8px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-main, #0F172A);
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.post-tool-btn:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary, #2563EB);
}

.post-tool-sep {
    width: 1px;
    height: 20px;
    background: var(--border-color, #E2E8F0);
    margin: 0 4px;
}

.post-editor-page {
    min-height: 280px;
    max-height: 600px;
    overflow-y: auto;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 0 0 var(--radius-sm, 12px) var(--radius-sm, 12px);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-main, #0F172A);
    outline: none;
    word-break: break-word;
    background: var(--bg-card, #FFFFFF);
}

.post-editor-page:focus {
    border-color: var(--primary, #2563EB);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.post-editor-page:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, #94A3B8);
    pointer-events: none;
}

.post-editor-page img {
    max-width: 100%;
    border-radius: 12px;
    margin: 8px 0;
}

.post-editor-page a {
    color: var(--primary, #2563EB);
    text-decoration: underline;
}

.post-create-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 680px) {
    .dzen-post-card {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    .dzen-card-thumb-wrap {
        width: 100%;
        min-width: 100%;
        height: 200px;
    }
    .post-article-card,
    .post-create-card {
        padding: 1.4rem 1.2rem;
    }
    .post-article-title {
        font-size: 1.5rem;
    }
}

/* Dark Theme Adjustments */
[data-theme="dark"] .dzen-post-card { background: #181920; border-color: #2D2F39; }
[data-theme="dark"] .dzen-post-card:hover { border-color: #3F4252; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
[data-theme="dark"] .dzen-card-thumb-wrap { background: #101116; }
[data-theme="dark"] .dzen-card-thumb-placeholder { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); color: #60A5FA; }
[data-theme="dark"] .post-article-card { background: #181920; border-color: #2D2F39; }
[data-theme="dark"] .post-create-card { background: #181920; border-color: #2D2F39; }
[data-theme="dark"] .btn-back-link { background: #181920; border-color: #2D2F39; color: #94A3B8; }
[data-theme="dark"] .post-comment-bubble { background: #121318; border-color: #2D2F39; }
[data-theme="dark"] .post-comment-form-box { background: #121318; border-color: #2D2F39; }
[data-theme="dark"] .post-editor-toolbar { background: #121318; border-color: #2D2F39; }
[data-theme="dark"] .post-editor-page { background: #181920; border-color: #2D2F39; color: #E2E8F0; }
[data-theme="dark"] .dzen-empty-feed { background: #181920; border-color: #2D2F39; }

/* ============ LISTINGS & MODALS ============ */
.listings-container {
    max-width: 1140px;
    margin: 0 auto 3rem;
    width: 100%;
}

.listings-header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-lg, 24px);
    padding: 1.8rem 2.2rem;
    margin-bottom: 1.6rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,0.06));
    flex-wrap: wrap;
    gap: 1.2rem;
}

.listings-header-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0 0 0.3rem;
}

.listings-header-desc {
    font-size: 0.95rem;
    color: var(--text-muted, #64748B);
    margin: 0;
    line-height: 1.5;
}

/* Listings CTA Button */
.btn-listing-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    padding: 0 1.6rem;
    border-radius: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
}

.btn-listing-create .btn-listing-create-icon,
.btn-listing-create svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.btn-listing-create svg path,
.btn-listing-create-icon path {
    fill: #FFFFFF !important;
}

.btn-listing-create:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: #FFFFFF !important;
    text-decoration: none;
}

.btn-listing-create:hover .btn-listing-create-icon,
.btn-listing-create:hover svg {
    transform: rotate(90deg) scale(1.1);
}

.btn-listing-create:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

@media (max-width: 640px) {
    .btn-listing-create {
        width: 100%;
    }
}

.listings-filters-box {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-md, 18px);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,0.06));
}

.listings-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.listing-filter-chip {
    background: var(--bg-primary, #F8FAFC);
    border: 1px solid var(--border-color, #E2E8F0);
    color: var(--text-main, #0F172A);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1;
    white-space: nowrap;
}

.listing-filter-chip:hover {
    border-color: var(--primary, #2563EB);
    color: var(--primary, #2563EB);
    background: rgba(37, 99, 235, 0.04);
}

.listing-filter-chip.active {
    background: var(--primary, #2563EB) !important;
    border-color: var(--primary, #2563EB) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.listing-mine-chip {
    margin-left: auto;
}

.listing-filter-sep {
    width: 1px;
    height: 22px;
    background: var(--border-color, #E2E8F0);
    margin: 0 4px;
}

/* Listings Grid */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.4rem;
    align-items: stretch;
}

.listing-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,0.06));
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.listing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(15,23,42,0.1));
    border-color: #CBD5E1;
}

.listing-card-cover {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    height: 240px;
    background: var(--bg-primary, #F8FAFC);
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-card-cover img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: auto;
    transition: transform 0.4s ease;
}

.listing-card:hover .listing-card-cover img {
    transform: scale(1.03);
}

.listing-card-cover-empty {
    height: 240px;
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94A3B8);
}

.listing-card-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #FFFFFF;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(4px);
}

.listing-badge-sell { background: rgba(37, 99, 235, 0.92); }
.listing-badge-buy { background: rgba(16, 185, 129, 0.92); }
.listing-badge-free { background: rgba(245, 158, 11, 0.92); }
.listing-badge-rent { background: rgba(139, 92, 246, 0.92); }

.listing-card-body {
    padding: 1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.listing-card-cat {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748B);
    cursor: pointer;
}

.listing-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0;
    line-height: 1.38;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.listing-card-title:hover {
    color: var(--primary, #2563EB);
}

.listing-card-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary, #2563EB);
    min-height: 1.4em;
}

.listing-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color, #F1F5F9);
}

.listing-card-author {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #64748B);
}

.listing-card-date {
    font-size: 0.76rem;
    color: var(--text-muted, #94A3B8);
    white-space: nowrap;
}

/* ============ LISTING MODALS (CREATE & VIEW) ============ */
.post-create-modal,
.listing-create-modal,
.post-view-modal,
.listing-view-modal {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 24px;
    padding: 2.2rem 2.4rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    animation: contactsGateCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.post-create-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.post-create-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0;
    letter-spacing: -0.01em;
}

.post-create-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-primary, #F8FAFC);
    border: 1px solid var(--border-color, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-muted, #64748B);
    padding: 0;
}

.post-create-close:hover {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger, #EF4444);
    border-color: rgba(239, 68, 68, 0.25);
    transform: rotate(90deg);
}

/* Modal Form Fields */
.listing-create-modal .form-group,
.post-create-modal .form-group {
    margin-bottom: 1.25rem;
    text-align: left;
}

.listing-create-modal .form-row,
.post-create-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.listing-create-modal .form-label,
.post-create-modal .form-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-main, #0F172A);
    margin-bottom: 0.45rem;
}

.listing-create-modal .form-input,
.post-create-modal .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 10px;
    background: var(--bg-primary, #F8FAFC);
    color: var(--text-main, #0F172A);
    font-size: 0.92rem;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.listing-create-modal .form-input:focus,
.post-create-modal .form-input:focus {
    outline: none;
    border-color: var(--primary, #2563EB);
    background: var(--bg-card, #FFFFFF);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.listing-create-modal textarea.form-input,
.post-create-modal textarea.form-input {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

.listing-create-modal select.form-input,
.post-create-modal select.form-input {
    cursor: pointer;
}

/* Phone toggle & hint */
.listing-phone-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.listing-phone-toggle input {
    display: none;
}

.listing-toggle-custom {
    position: relative;
    width: 38px;
    height: 22px;
    background: var(--border-color, #CBD5E1);
    border-radius: 999px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.listing-toggle-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.listing-phone-toggle input:checked + .listing-toggle-custom {
    background: var(--primary, #2563EB);
}

.listing-phone-toggle input:checked + .listing-toggle-custom::after {
    transform: translateX(16px);
}

.listing-toggle-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main, #0F172A);
}

.listing-form-hint {
    font-size: 0.8rem;
    color: var(--text-muted, #64748B);
    margin: 0.45rem 0 0.2rem;
    line-height: 1.45;
}

/* Photo Upload Zone */
.photo-upload-zone {
    position: relative;
    border: 2px dashed var(--border-color, #CBD5E1);
    border-radius: 16px;
    background: var(--bg-primary, #F8FAFC);
    padding: 1.4rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.photo-upload-zone:hover,
.photo-upload-zone.dragover {
    border-color: var(--primary, #2563EB);
    background: rgba(37, 99, 235, 0.04);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.photo-upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.photo-upload-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary, #2563EB);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}

.photo-upload-zone:hover .photo-upload-icon {
    transform: scale(1.08);
}

.photo-upload-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main, #0F172A);
}

.photo-upload-subtext {
    font-size: 0.78rem;
    color: var(--text-muted, #64748B);
}

.listing-photos-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.listing-photo-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    border: 1px solid var(--border-color, #E2E8F0);
    background: var(--bg-card, #FFFFFF);
}

.listing-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
    display: block;
}

.listing-photo-thumb-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    background: var(--danger, #EF4444);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    transition: transform 0.15s ease, background 0.15s ease;
    padding: 0;
}

.listing-photo-thumb-remove:hover {
    background: #DC2626;
    transform: scale(1.15);
}

/* Post View Modal */
.post-view-body {
    padding: 1rem 0 0;
}

.post-view-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0 0 0.6rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.post-view-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.post-view-content {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-main, #0F172A);
    word-break: break-word;
    margin-bottom: 1.2rem;
    background: var(--bg-primary, #F8FAFC);
    padding: 1.2rem;
    border-radius: 14px;
    border: 1px solid var(--border-color, #E2E8F0);
}

/* View Modal Gallery */
.listing-view-gallery {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
}

.listing-view-gallery img {
    height: 190px;
    width: auto;
    max-width: 100%;
    border-radius: 14px;
    cursor: zoom-in;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.listing-view-badge {
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    color: #FFFFFF;
    background: var(--primary, #2563EB);
    line-height: 1;
}

.listing-view-badge-cat {
    background: var(--text-muted, #64748B);
}

.listing-view-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary, #2563EB);
    margin-bottom: 0.7rem;
    min-height: 1.4em;
}

.listing-view-contact {
    margin-top: 0.8rem;
    margin-bottom: 0.5rem;
}

/* Modal & Post Actions Flexbox */
.post-modal-actions,
.post-create-actions,
.post-create-form-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-color, #E2E8F0);
    width: 100%;
    box-sizing: border-box;
}

.post-modal-actions .btn-secondary,
.post-create-actions .btn-secondary,
.post-create-form-actions .btn-secondary {
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    min-width: 120px;
    margin: 0 !important;
    padding: 0 1.6rem !important;
    border-radius: 12px !important;
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, #E2E8F0);
    background: var(--bg-primary, #F8FAFC);
    color: var(--text-main, #0F172A);
    cursor: pointer;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap !important;
}

.post-modal-actions .btn-secondary:hover,
.post-create-actions .btn-secondary:hover,
.post-create-form-actions .btn-secondary:hover {
    background: #E2E8F0;
    border-color: #CBD5E1;
    transform: translateY(-1px);
}

.post-modal-actions .btn-submit,
.post-create-actions .btn-submit,
.post-create-form-actions .btn-submit,
.post-create-form-actions .btn-post-submit {
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    min-width: 150px;
    margin: 0 !important;
    padding: 0 1.8rem !important;
    border-radius: 12px !important;
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary, #2563EB);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap !important;
}

.post-modal-actions .btn-submit:hover,
.post-create-actions .btn-submit:hover,
.post-create-form-actions .btn-submit:hover,
.post-create-form-actions .btn-post-submit:hover {
    background: var(--primary-hover, #1D4ED8);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.post-modal-actions .btn-danger,
.post-create-actions .btn-danger {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    min-width: 120px;
    margin: 0 !important;
    padding: 0 1.4rem !important;
    border-radius: 12px !important;
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger, #EF4444);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-modal-actions .btn-danger:hover,
.post-create-actions .btn-danger:hover {
    background: #DC2626;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

[data-theme="dark"] .chat-header {
    background: rgba(18, 19, 24, 0.96) !important;
    border-color: #2D2F39 !important;
}

[data-theme="dark"] .chat-header-user-name {
    color: #93C5FD !important;
}

[data-theme="dark"] .chat-header-room-icon {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60A5FA !important;
}

[data-theme="dark"] .chat-mobile-back-btn {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #60A5FA !important;
}

[data-theme="dark"] .chat-container:not(.chat-view-active) .chat-room-btn.active,
[data-theme="dark"] .chat-rooms-sidebar .chat-room-btn.active {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .chat-container:not(.chat-view-active) .chat-room-btn.active .chat-room-title,
[data-theme="dark"] .chat-container:not(.chat-view-active) .chat-room-btn.active .chat-dialog-name,
[data-theme="dark"] .chat-rooms-sidebar .chat-room-btn.active .chat-room-title,
[data-theme="dark"] .chat-rooms-sidebar .chat-room-btn.active .chat-dialog-name {
    color: #F8FAFC !important;
}

/* Listings Empty State */
.listings-empty-box {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--bg-card, #FFFFFF);
    border: 1px dashed var(--border-color, #E2E8F0);
    border-radius: var(--radius-lg, 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.listings-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary-light, #EFF6FF);
    color: var(--primary, #2563EB);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.listings-empty-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0 0 0.4rem;
}

.listings-empty-desc {
    font-size: 0.92rem;
    color: var(--text-muted, #64748B);
    margin: 0 0 1.2rem;
    max-width: 420px;
    line-height: 1.5;
}

/* Mobile responsive */
@media (max-width: 820px) {
    .post-create-modal,
    .listing-create-modal,
    .post-view-modal,
    .listing-view-modal {
        padding: 1.4rem 1.15rem !important;
        border-radius: 18px !important;
    }
    .listing-create-modal .form-row,
    .post-create-modal .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }
    .post-modal-actions,
    .post-create-actions,
    .post-create-form-actions,
    .custom-modal-footer {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-top: 1.25rem !important;
        padding-top: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .post-modal-actions .btn-secondary,
    .post-create-actions .btn-secondary,
    .post-create-form-actions .btn-secondary,
    .custom-modal-footer .btn-secondary {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 80px !important;
        max-width: 110px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .post-modal-actions .btn-submit,
    .post-create-actions .btn-submit,
    .post-create-form-actions .btn-submit,
    .post-create-form-actions .btn-post-submit,
    .post-modal-actions .btn-danger,
    .post-create-actions .btn-danger,
    .custom-modal-footer .btn-primary,
    .custom-modal-footer .btn-submit-afisha,
    .custom-modal-footer .btn-submit-meetup,
    .custom-modal-footer button:not(.btn-secondary) {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        font-size: clamp(0.76rem, 3.4vw, 0.88rem) !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Dark Theme for Listings & Modals */
[data-theme="dark"] .listings-header-card { background: #181920; border-color: #2D2F39; }
[data-theme="dark"] .listings-filters-box { background: #181920; border-color: #2D2F39; }
[data-theme="dark"] .listing-filter-chip { background: #101116; border-color: #2D2F39; color: #E2E8F0; }
[data-theme="dark"] .listing-card { background: #181920; border-color: #2D2F39; }
[data-theme="dark"] .listing-card:hover { border-color: #3F4252; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .listing-card-cover { background: #101116; }
[data-theme="dark"] .listing-card-cover-empty { background: linear-gradient(135deg, #181920 0%, #101116 100%); color: #64748B; }

[data-theme="dark"] .post-create-modal,
[data-theme="dark"] .listing-create-modal,
[data-theme="dark"] .post-view-modal,
[data-theme="dark"] .listing-view-modal {
    background: #181920;
    border-color: #2D2F39;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .post-create-head {
    border-color: #2D2F39;
}

[data-theme="dark"] .post-create-title,
[data-theme="dark"] .post-view-title {
    color: #F8FAFC;
}

[data-theme="dark"] .post-create-close {
    background: #101116;
    border-color: #2D2F39;
    color: #94A3B8;
}

[data-theme="dark"] .post-create-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
    border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="dark"] .listing-create-modal .form-label,
[data-theme="dark"] .post-create-modal .form-label {
    color: #E2E8F0;
}

[data-theme="dark"] .listing-create-modal .form-input,
[data-theme="dark"] .post-create-modal .form-input {
    background: #101116;
    border-color: #2D2F39;
    color: #F8FAFC;
}

[data-theme="dark"] .listing-create-modal .form-input:focus,
[data-theme="dark"] .post-create-modal .form-input:focus {
    border-color: var(--primary, #3B82F6);
    background: #14151C;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .listing-toggle-custom {
    background: #2D2F39;
}

[data-theme="dark"] .listing-toggle-custom::after {
    background: #E2E8F0;
}

[data-theme="dark"] .listing-phone-toggle input:checked + .listing-toggle-custom {
    background: var(--primary, #3B82F6);
}

[data-theme="dark"] .listing-toggle-label {
    color: #E2E8F0;
}

[data-theme="dark"] .listing-form-hint {
    color: #94A3B8;
}

[data-theme="dark"] .photo-upload-zone {
    background: #121318 !important;
    border-color: #2D2F39 !important;
}

[data-theme="dark"] .photo-upload-zone:hover,
[data-theme="dark"] .photo-upload-zone.dragover {
    border-color: var(--primary, #3B82F6) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

[data-theme="dark"] .photo-upload-icon {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

[data-theme="dark"] .photo-upload-text {
    color: #F8FAFC;
}

[data-theme="dark"] .photo-upload-subtext {
    color: #94A3B8;
}

[data-theme="dark"] .listing-photo-thumb {
    background: #101116;
    border-color: #2D2F39;
}

[data-theme="dark"] .listing-photo-thumb-remove {
    border-color: #181920;
}

[data-theme="dark"] .post-view-content {
    background: #121318;
    border-color: #2D2F39;
    color: #E2E8F0;
}

[data-theme="dark"] .post-modal-actions,
[data-theme="dark"] .post-create-actions,
[data-theme="dark"] .post-create-form-actions {
    border-color: #2D2F39;
}

[data-theme="dark"] .post-modal-actions .btn-secondary,
[data-theme="dark"] .post-create-actions .btn-secondary,
[data-theme="dark"] .post-create-form-actions .btn-secondary {
    background: #101116;
    border-color: #2D2F39;
    color: #E2E8F0;
}

[data-theme="dark"] .post-modal-actions .btn-secondary:hover,
[data-theme="dark"] .post-create-actions .btn-secondary:hover,
[data-theme="dark"] .post-create-form-actions .btn-secondary:hover {
    background: #1E202A;
    border-color: #3F4252;
}

[data-theme="dark"] .btn-listing-create {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    box-shadow: 0 4px 18px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-listing-create:hover {
    background: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
    box-shadow: 0 8px 26px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-listing-create:active {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

/* ==========================================================================
   PREMIUM HUB DESIGN SYSTEM (MEETUPS & AFISHA)
   ========================================================================== */

/* Hero Header Card */
.hub-header-card {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    padding: 2.25rem 2.5rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03);
}

.hub-header-card--meetups {
    background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.04) 0%, transparent 60%),
                #FFFFFF;
}

.hub-header-card--afisha {
    background: radial-gradient(circle at 10% 20%, rgba(244, 63, 94, 0.05) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(251, 113, 133, 0.04) 0%, transparent 60%),
                #FFFFFF;
}

.hub-header-card--posts {
    background: radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(5, 150, 105, 0.04) 0%, transparent 60%),
                #FFFFFF;
    padding: 20px 24px;
    gap: 24px;
    margin-bottom: 16px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.hub-header-card--posts .hub-header-content {
    max-width: 440px;
}

.hub-header-card--posts .hub-header-badge {
    padding: 4px 10px;
    margin-bottom: 8px;
    font-size: 0.75rem;
}

.hub-header-card--posts .hub-header-title {
    margin-bottom: 4px;
    font-size: 1.65rem;
    line-height: 1.15;
    white-space: nowrap;
}

.hub-header-card--posts .hub-header-desc {
    max-width: 430px;
    font-size: 0.86rem;
    line-height: 1.5;
}

.hub-header-card--posts .hub-header-actions {
    flex-wrap: nowrap;
    gap: 8px;
}

.hub-header-card--posts .btn-hub-create {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 0.84rem;
}

.hub-header-card--horo {
    background: radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(124, 58, 237, 0.04) 0%, transparent 60%),
                #FFFFFF;
}

.hub-header-card--listings {
    background: radial-gradient(circle at 10% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(217, 119, 6, 0.04) 0%, transparent 60%),
                #FFFFFF;
}

.hub-header-card--walks {
    background: radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.05) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(2, 132, 199, 0.04) 0%, transparent 60%),
                #FFFFFF;
}

.hub-header-card--venues {
    background: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.05) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.04) 0%, transparent 60%),
                #FFFFFF;
}

.hub-header-card--venues .hub-header-badge {
    background: rgba(37, 99, 235, 0.06);
    color: #2563EB;
    border-color: rgba(37, 99, 235, 0.14);
}

.hub-header-content {
    max-width: 750px;
}

.hub-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 235, 0.06);
    color: #2563EB;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 0.85rem;
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.hub-header-card--afisha .hub-header-badge {
    background: rgba(225, 29, 72, 0.06);
    color: #E11D48;
    border-color: rgba(225, 29, 72, 0.12);
}

.hub-header-card--posts .hub-header-badge {
    background: rgba(16, 185, 129, 0.06);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.14);
}

.hub-header-card--horo .hub-header-badge {
    background: rgba(139, 92, 246, 0.06);
    color: #7C3AED;
    border-color: rgba(139, 92, 246, 0.14);
}

.hub-header-card--listings .hub-header-badge {
    background: rgba(245, 158, 11, 0.06);
    color: #D97706;
    border-color: rgba(245, 158, 11, 0.14);
}

.hub-header-card--walks .hub-header-badge {
    background: rgba(14, 165, 233, 0.06);
    color: #0284C7;
    border-color: rgba(14, 165, 233, 0.14);
}

.hub-header-badge-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}

.hub-header-count {
    font-weight: 700;
}

.hub-header-title {
    font-size: 2rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 0.6rem 0;
    letter-spacing: -0.025em;
    line-height: 1.22;
}

.hub-header-desc {
    font-size: 0.95rem;
    color: #64748B;
    margin: 0;
    line-height: 1.6;
}

.hub-header-actions {
    flex-shrink: 0;
}

.btn-hub-create {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1.4rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #FFFFFF !important;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.btn-hub-create--meetup {
    background: linear-gradient(135deg, #4F46E5 0%, #3B82F6 100%);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-hub-create--meetup:hover {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-hub-create--venues {
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-hub-create--venues:hover {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-hub-create--afisha {
    background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-hub-create--afisha:hover {
    background: linear-gradient(135deg, #FB7185 0%, #F43F5E 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-hub-create--posts {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-hub-create--posts:hover {
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-hub-create--listings {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-hub-create--listings:hover {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-hub-create--walks {
    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-hub-create--walks:hover {
    background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Controls: Segmented Time Bar & Integrated Search */
.hub-controls-bar {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.hub-controls-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.hub-time-segmented {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 4px;
    gap: 3px;
    box-shadow: var(--shadow-sm);
}
.hub-time-btn {
    padding: 7px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.hub-time-btn:hover {
    color: var(--text-blue);
    background: rgba(37, 99, 235, 0.05);
}
.hub-time-btn.active {
    background: #2563EB;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Search Form */
.hub-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 380px;
}
.hub-search-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}
.hub-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.hub-search-input {
    width: 100%;
    padding: 0.55rem 2rem 0.55rem 2.3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 0.88rem;
    color: var(--text-dark);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}
.hub-search-input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.hub-search-clear {
    position: absolute;
    right: 10px;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.hub-search-clear:hover {
    color: var(--danger);
}
.hub-search-btn {
    padding: 0.55rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-blue);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
.hub-search-btn:hover {
    border-color: #2563EB;
    color: #2563EB;
    background: rgba(37, 99, 235, 0.04);
}

/* Category Pills Scroll (NO UGLY SCROLLBAR) */
.hub-category-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hub-category-scroll::-webkit-scrollbar {
    display: none;
}
.hub-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-sm);
}
.hub-cat-pill:hover {
    border-color: #2563EB;
    color: #2563EB;
    transform: translateY(-1px);
}
.hub-cat-pill.active {
    background: #0F172A;
    color: #FFFFFF;
    border-color: #0F172A;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.hub-cat-pill-icon {
    display: flex;
    align-items: center;
}

/* Hub Cards Grid */
.hub-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

/* Single Card Component */
.hub-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
}
.hub-card--passed {
    opacity: 0.78;
    filter: saturate(0.8);
    background: rgba(248, 250, 252, 0.85);
}

/* Cover & Visual Elements */
.hub-card-cover {
    position: relative;
    width: 100%;
    height: 195px;
    overflow: hidden;
    background: #0F172A;
}
.hub-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.hub-card:hover .hub-card-img {
    transform: scale(1.04);
}
.hub-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}
.hub-placeholder-icon-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.hub-placeholder-cat-name {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Floating Badges */
.hub-cover-badges-top {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}
.hub-badge-cat {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hub-badge-spots {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.9);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
}
.hub-badge-spots--low {
    background: rgba(220, 38, 38, 0.9);
}
.hub-badge-price {
    background: #10B981;
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

/* Passed Overlay */
.hub-cover-passed-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.85) 100%);
    padding: 2rem 1rem 0.8rem 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 3;
}
.hub-passed-badge {
    background: #DC2626;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Card Body */
.hub-card-body {
    padding: 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.hub-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.5rem;
}
.hub-meta-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #4F46E5;
}
.hub-meta-date--afisha {
    color: #E11D48;
}
.hub-meta-date--passed {
    color: var(--text-muted);
}
.hub-ended-pill {
    font-size: 0.72rem;
    font-weight: 700;
    color: #DC2626;
    background: #FEE2E2;
    padding: 2px 7px;
    border-radius: 4px;
}

.hub-card-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--text-blue);
    margin: 0 0 0.5rem 0;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.hub-card-location {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
    line-height: 1.4;
}
.hub-loc-venue {
    font-weight: 600;
    color: var(--text-dark);
}
.hub-loc-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.hub-card-desc {
    font-size: 0.88rem;
    color: var(--text-dark);
    line-height: 1.55;
    margin: 0 0 1.25rem 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Attendees Component */
.hub-attendees-box {
    background: rgba(241, 245, 249, 0.6);
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.95rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
}
.hub-attendees-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.hub-attendees-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.hub-avatars-pile {
    display: flex;
    align-items: center;
}
.hub-avatar-bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    margin-right: -8px;
    overflow: hidden;
    display: inline-block;
    transition: transform 0.15s ease;
}
.hub-avatar-bubble:hover {
    transform: scale(1.2) translateY(-2px);
    z-index: 5;
}
.hub-avatar-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hub-avatar-count-more {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-left: 12px;
}
.hub-first-attendee-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Card Footer & Action Buttons */
.hub-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
    gap: 8px;
}
.hub-creator-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.hub-creator-pill img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.hub-creator-texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.hub-creator-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.hub-creator-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.hub-actions-cluster {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.hub-btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
.hub-btn-action--primary {
    background: #4F46E5;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
.hub-btn-action--primary:hover {
    background: #4338CA;
    transform: translateY(-1px);
}
.hub-btn-action--joined {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}
.hub-btn-action--joined:hover {
    background: #FEF2F2;
    color: #DC2626;
    border-color: #FECACA;
}
.hub-btn-disabled {
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--border-color);
    cursor: not-allowed;
}

/* Afisha specific actions */
.hub-afisha-left-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hub-btn-bookmark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: var(--radius-md);
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.hub-btn-bookmark:hover {
    border-color: #E11D48;
    color: #E11D48;
}
.hub-btn-bookmark--active {
    background: #FFF1F2;
    border-color: #FECDD3;
    color: #E11D48;
    font-weight: 700;
}
.hub-bm-icon {
    display: flex;
    align-items: center;
}
.hub-bm-count {
    font-size: 0.72rem;
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 999px;
}
.hub-btn-bookmark--active .hub-bm-count {
    background: rgba(225, 29, 72, 0.12);
}

.hub-btn-ticket {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    background: #E11D48;
    color: #FFFFFF !important;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
    transition: all 0.2s ease;
}
.hub-btn-ticket:hover {
    background: #BE123C;
    transform: translateY(-1px);
}

.hub-btn-icon-subtle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.hub-btn-icon-subtle:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.08);
}
.hub-btn-icon-danger {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.hub-btn-icon-danger:hover {
    color: #EF4444;
    border-color: #EF4444;
    background: #FEE2E2;
    transform: scale(1.08);
}

/* Empty State Card */
.hub-empty-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 4rem 2rem;
    text-align: center;
    border: 1px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-sm);
}
.hub-empty-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.hub-empty-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-blue);
    margin: 0 0 0.5rem 0;
}
.hub-empty-desc {
    color: var(--text-muted);
    max-width: 460px;
    margin: 0 auto 1.75rem auto;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Custom Modal */
.custom-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.custom-modal-dialog {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    max-height: 90dvh;
    box-shadow: 0 24px 48px rgba(0,0,0,0.25);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.custom-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
}
.custom-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-blue);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.custom-modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}
.custom-modal-close:hover {
    color: var(--danger);
}
.custom-modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}

/* Styled Photo Dropzone for Afisha and Events */
.afisha-photo-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1.25rem 1rem;
    border: 1.5px dashed var(--border-color, #CBD5E1);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-primary, #F8FAFC);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-sizing: border-box;
}

.afisha-photo-dropzone:hover {
    border-color: var(--primary, #2563EB);
    background: var(--primary-light, #EFF6FF);
}

.afisha-photo-dropzone-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
}

.afisha-photo-dropzone-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.afisha-photo-dropzone-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main, #0F172A);
}

.afisha-photo-dropzone-sub {
    font-size: 0.8rem;
    color: var(--text-muted, #64748B);
}

.custom-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #E2E8F0);
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

@media (min-width: 821px) {
    .custom-modal-footer .btn-secondary {
        width: auto;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 0 1.5rem;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.9rem;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .custom-modal-footer .btn-primary,
    .custom-modal-footer .btn-submit-afisha,
    .custom-modal-footer .btn-submit-meetup {
        width: auto;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 0 1.75rem;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.9rem;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        white-space: nowrap;
    }
}

/* Event & Meetup Detail View Modal */
.hub-view-modal-dialog {
    max-width: 620px;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.hub-view-cover-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    background: #0F172A;
    overflow: hidden;
}

.hub-view-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-view-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hub-view-cover-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.hub-view-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.7);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    z-index: 3;
    backdrop-filter: blur(6px);
    transition: background 0.2s;
}

.hub-view-close-btn:hover {
    background: rgba(239, 68, 68, 0.85);
}

.hub-view-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hub-view-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-blue);
    margin: 0;
    line-height: 1.3;
}

.hub-view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: var(--bg-main);
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

@media (max-width: 580px) {
    .hub-view-grid {
        grid-template-columns: 1fr;
    }
}

.hub-view-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hub-view-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.hub-view-item-content {
    display: flex;
    flex-direction: column;
}

.hub-view-item-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.hub-view-item-val {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-blue);
}

.hub-view-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-main);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.hub-view-organizer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}

.hub-view-organizer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.hub-view-organizer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-light);
}

.hub-view-organizer-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-blue);
}

.hub-view-organizer-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.hub-view-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}

/* Dark Theme Overrides */
[data-theme="dark"] .hub-header-card {
    background: #16171F;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .hub-header-card--meetups {
    background: radial-gradient(circle at 12% 18%, rgba(99, 102, 241, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(99, 102, 241, 0.22);
}
[data-theme="dark"] .hub-header-card--afisha {
    background: radial-gradient(circle at 12% 18%, rgba(244, 63, 94, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(251, 113, 133, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(244, 63, 94, 0.22);
}
[data-theme="dark"] .hub-header-card--posts {
    background: radial-gradient(circle at 12% 18%, rgba(16, 185, 129, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(5, 150, 105, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(16, 185, 129, 0.22);
}
[data-theme="dark"] .hub-header-card--horo {
    background: radial-gradient(circle at 12% 18%, rgba(139, 92, 246, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(124, 58, 237, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(139, 92, 246, 0.22);
}
[data-theme="dark"] .hub-header-card--listings {
    background: radial-gradient(circle at 12% 18%, rgba(245, 158, 11, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(217, 119, 6, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(245, 158, 11, 0.22);
}
[data-theme="dark"] .hub-header-card--walks {
    background: radial-gradient(circle at 12% 18%, rgba(14, 165, 233, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(2, 132, 199, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(14, 165, 233, 0.22);
}

[data-theme="dark"] .hub-header-card--venues {
    background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 60%),
                radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.07) 0%, transparent 60%),
                var(--bg-card);
}

[data-theme="dark"] .hub-header-card--venues .hub-header-badge {
    background: rgba(59, 130, 246, 0.14);
    color: #93C5FD;
    border-color: rgba(96, 165, 250, 0.24);
}
[data-theme="dark"] .hub-header-card--meetups .hub-header-badge {
    background: rgba(99, 102, 241, 0.12);
    color: #A5B4FC;
    border-color: rgba(99, 102, 241, 0.25);
}
[data-theme="dark"] .hub-header-card--afisha .hub-header-badge {
    background: rgba(244, 63, 94, 0.12);
    color: #FDA4AF;
    border-color: rgba(244, 63, 94, 0.25);
}
[data-theme="dark"] .hub-header-card--posts .hub-header-badge {
    background: rgba(16, 185, 129, 0.12);
    color: #6EE7B7;
    border-color: rgba(16, 185, 129, 0.25);
}
[data-theme="dark"] .hub-header-card--horo .hub-header-badge {
    background: rgba(139, 92, 246, 0.12);
    color: #C4B5FD;
    border-color: rgba(139, 92, 246, 0.25);
}
[data-theme="dark"] .hub-header-card--listings .hub-header-badge {
    background: rgba(245, 158, 11, 0.12);
    color: #FCD34D;
    border-color: rgba(245, 158, 11, 0.25);
}
[data-theme="dark"] .hub-header-card--walks .hub-header-badge {
    background: rgba(14, 165, 233, 0.12);
    color: #7DD3FC;
    border-color: rgba(14, 165, 233, 0.25);
}
[data-theme="dark"] .hub-header-title {
    color: #F8FAFC !important;
}
[data-theme="dark"] .hub-header-desc {
    color: #94A3B8 !important;
}

[data-theme="dark"] .hub-time-segmented,
[data-theme="dark"] .hub-cat-pill,
[data-theme="dark"] .hub-card,
[data-theme="dark"] .hub-empty-card,
[data-theme="dark"] .custom-modal-dialog {
    background: #181920;
    border-color: #2D2F39;
}
[data-theme="dark"] .hub-card--passed {
    background: #131418;
}
[data-theme="dark"] .hub-cat-pill.active {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #FFFFFF;
}
[data-theme="dark"] .hub-attendees-box {
    background: #131418;
    border-color: #2D2F39;
}
[data-theme="dark"] .hub-btn-bookmark,
[data-theme="dark"] .hub-btn-icon-subtle,
[data-theme="dark"] .hub-btn-icon-danger,
[data-theme="dark"] .hub-search-btn,
[data-theme="dark"] .hub-search-input {
    background: #121318;
    border-color: #2D2F39;
    color: #E2E8F0;
}
[data-theme="dark"] .hub-btn-bookmark--active {
    background: rgba(225, 29, 72, 0.2);
    border-color: rgba(225, 29, 72, 0.4);
    color: #FB7185;
}
[data-theme="dark"] .hub-header-title,
[data-theme="dark"] .hub-card-title,
[data-theme="dark"] .hub-empty-title,
[data-theme="dark"] .afisha-photo-dropzone {
    background: #121318;
    border-color: #2D2F39;
}
[data-theme="dark"] .afisha-photo-dropzone:hover {
    border-color: #3B82F6;
    background: rgba(59, 130, 246, 0.08);
}
[data-theme="dark"] .afisha-photo-dropzone-icon {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}
[data-theme="dark"] .afisha-photo-dropzone-title {
    color: #F1F5F9;
}
[data-theme="dark"] .custom-modal-footer {
    border-color: #2D2F39;
}
[data-theme="dark"] .custom-modal-footer .btn-secondary {
    background: #1E2029;
    border-color: #2D2F39;
    color: #E2E8F0;
}
[data-theme="dark"] .custom-modal-footer .btn-secondary:hover {
    background: #282A36;
    border-color: #3F4252;
}

/* ==========================================================================
   SUBTLE REPORT LINK BUTTON (COMPLAINT ACTION)
   ========================================================================== */
.btn-report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: none;
    padding: 4px 8px;
    margin: 4px auto 0 auto;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    opacity: 1;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-report-link span {
    border-bottom: 1.5px dashed #94A3B8;
    line-height: 1.25;
    transition: all 0.2s ease;
}

.btn-report-link svg {
    color: #64748B;
    opacity: 0.9;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.btn-report-link:hover {
    color: #DC2626;
}

.btn-report-link:hover span {
    border-bottom-color: #DC2626;
}

.btn-report-link:hover svg {
    color: #DC2626;
    opacity: 1;
    transform: scale(1.15);
}

[data-theme="dark"] .btn-report-link {
    color: #CBD5E1;
}

[data-theme="dark"] .btn-report-link span {
    border-bottom-color: #64748B;
}

[data-theme="dark"] .btn-report-link svg {
    color: #94A3B8;
}

[data-theme="dark"] .btn-report-link:hover {
    color: #F87171;
}

[data-theme="dark"] .btn-report-link:hover span {
    border-bottom-color: #F87171;
}

[data-theme="dark"] .btn-report-link:hover svg {
    color: #F87171;
}

/* ==========================================================================
   MODERATOR BADGE & VIOLATION MODERATION SYSTEM
   ========================================================================== */

}
[data-theme="dark"] .hub-header-card--meetups {
    background: radial-gradient(circle at 12% 18%, rgba(99, 102, 241, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(99, 102, 241, 0.22);
}
[data-theme="dark"] .hub-header-card--afisha {
    background: radial-gradient(circle at 12% 18%, rgba(244, 63, 94, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(251, 113, 133, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(244, 63, 94, 0.22);
}
[data-theme="dark"] .hub-header-card--posts {
    background: radial-gradient(circle at 12% 18%, rgba(16, 185, 129, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(5, 150, 105, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(16, 185, 129, 0.22);
}
[data-theme="dark"] .hub-header-card--horo {
    background: radial-gradient(circle at 12% 18%, rgba(139, 92, 246, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(124, 58, 237, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(139, 92, 246, 0.22);
}
[data-theme="dark"] .hub-header-card--listings {
    background: radial-gradient(circle at 12% 18%, rgba(245, 158, 11, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(217, 119, 6, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(245, 158, 11, 0.22);
}
[data-theme="dark"] .hub-header-card--walks {
    background: radial-gradient(circle at 12% 18%, rgba(14, 165, 233, 0.09) 0%, transparent 60%),
                radial-gradient(circle at 88% 82%, rgba(2, 132, 199, 0.05) 0%, transparent 60%),
                #16171F;
    border-color: rgba(14, 165, 233, 0.22);
}
[data-theme="dark"] .hub-header-card--meetups .hub-header-badge {
    background: rgba(99, 102, 241, 0.12);
    color: #A5B4FC;
    border-color: rgba(99, 102, 241, 0.25);
}
[data-theme="dark"] .hub-header-card--afisha .hub-header-badge {
    background: rgba(244, 63, 94, 0.12);
    color: #FDA4AF;
    border-color: rgba(244, 63, 94, 0.25);
}
[data-theme="dark"] .hub-header-card--posts .hub-header-badge {
    background: rgba(16, 185, 129, 0.12);
    color: #6EE7B7;
    border-color: rgba(16, 185, 129, 0.25);
}
[data-theme="dark"] .hub-header-card--horo .hub-header-badge {
    background: rgba(139, 92, 246, 0.12);
    color: #C4B5FD;
    border-color: rgba(139, 92, 246, 0.25);
}
[data-theme="dark"] .hub-header-card--listings .hub-header-badge {
    background: rgba(245, 158, 11, 0.12);
    color: #FCD34D;
    border-color: rgba(245, 158, 11, 0.25);
}
[data-theme="dark"] .hub-header-card--walks .hub-header-badge {
    background: rgba(14, 165, 233, 0.12);
    color: #7DD3FC;
    border-color: rgba(14, 165, 233, 0.25);
}
[data-theme="dark"] .hub-header-title {
    color: #F8FAFC !important;
}
[data-theme="dark"] .hub-header-desc {
    color: #94A3B8 !important;
}

[data-theme="dark"] .hub-time-segmented,
[data-theme="dark"] .hub-cat-pill,
[data-theme="dark"] .hub-card,
[data-theme="dark"] .hub-empty-card,
[data-theme="dark"] .custom-modal-dialog {
    background: #181920;
    border-color: #2D2F39;
}
[data-theme="dark"] .hub-card--passed {
    background: #131418;
}
[data-theme="dark"] .hub-cat-pill.active {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #FFFFFF;
}
[data-theme="dark"] .hub-attendees-box {
    background: #131418;
    border-color: #2D2F39;
}
[data-theme="dark"] .hub-btn-bookmark,
[data-theme="dark"] .hub-btn-icon-subtle,
[data-theme="dark"] .hub-btn-icon-danger,
[data-theme="dark"] .hub-search-btn,
[data-theme="dark"] .hub-search-input {
    background: #121318;
    border-color: #2D2F39;
    color: #E2E8F0;
}
[data-theme="dark"] .hub-btn-bookmark--active {
    background: rgba(225, 29, 72, 0.2);
    border-color: rgba(225, 29, 72, 0.4);
    color: #FB7185;
}
[data-theme="dark"] .hub-header-title,
[data-theme="dark"] .hub-card-title,
[data-theme="dark"] .hub-empty-title,
[data-theme="dark"] .custom-modal-title {
    color: #F1F5F9;
}
[data-theme="dark"] .hub-loc-venue {
    color: #E2E8F0;
}

/* ==========================================================================
   SUBTLE REPORT LINK BUTTON (COMPLAINT ACTION)
   ========================================================================== */
.btn-report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: none;
    padding: 4px 8px;
    margin: 4px auto 0 auto;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    opacity: 1;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-report-link span {
    border-bottom: 1.5px dashed #94A3B8;
    line-height: 1.25;
    transition: all 0.2s ease;
}

.btn-report-link svg {
    color: #64748B;
    opacity: 0.9;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.btn-report-link:hover {
    color: #DC2626;
}

.btn-report-link:hover span {
    border-bottom-color: #DC2626;
}

.btn-report-link:hover svg {
    color: #DC2626;
    opacity: 1;
    transform: scale(1.15);
}

[data-theme="dark"] .btn-report-link {
    color: #CBD5E1;
}

[data-theme="dark"] .btn-report-link span {
    border-bottom-color: #64748B;
}

[data-theme="dark"] .btn-report-link svg {
    color: #94A3B8;
}

[data-theme="dark"] .btn-report-link:hover {
    color: #F87171;
}

[data-theme="dark"] .btn-report-link:hover span {
    border-bottom-color: #F87171;
}

[data-theme="dark"] .btn-report-link:hover svg {
    color: #F87171;
}
/* ==========================================================================
   MODERATOR BADGE & VIOLATION MODERATION SYSTEM
   ========================================================================== */

.chat-mod-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border: 1px solid #FCD34D;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.18);
    vertical-align: middle;
}

.chat-mod-star {
    color: #D97706;
    font-size: 0.82rem;
    display: inline-block;
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.6));
    animation: starPulse 2.5s infinite ease-in-out;
}

@keyframes starPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.4)); }
    50% { transform: scale(1.22); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.9)); }
}

[data-theme="dark"] .chat-mod-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.35) 100%);
    color: #FDE68A;
    border-color: rgba(245, 158, 11, 0.5);
}

/* Chat Restricted Warning Banners (Muted / Blocked) */
.chat-restricted-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    margin: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.3s ease;
}

.chat-restricted-banner.muted {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    border: 1.5px solid #C4B5FD;
    color: #5B21B6;
}

.chat-restricted-banner.blocked {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 1.5px solid #FCA5A5;
    color: #991B1B;
}

[data-theme="dark"] .chat-restricted-banner.muted {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.2) 0%, rgba(91, 33, 182, 0.3) 100%);
    border-color: rgba(167, 139, 250, 0.4);
    color: #DDD6FE;
}

[data-theme="dark"] .chat-restricted-banner.blocked {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(185, 28, 28, 0.3) 100%);
    border-color: rgba(248, 113, 113, 0.4);
    color: #FECACA;
}

.restricted-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.restricted-text-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.88rem;
}

.restricted-text-box strong {
    font-size: 0.95rem;
    font-weight: 700;
}

/* Moderator Hover Action Button */
.chat-action-btn.mod-violation-btn {
    color: #D97706;
}

.chat-action-btn.mod-violation-btn:hover {
    background: #FEF3C7;
    color: #B45309;
}

[data-theme="dark"] .chat-action-btn.mod-violation-btn {
    color: #FBBF24;
}

[data-theme="dark"] .chat-action-btn.mod-violation-btn:hover {
    background: rgba(245, 158, 11, 0.25);
    color: #FDE68A;
}

/* ==========================================================================
   HIGH-END TELEGRAM/DISCORD STYLE VIOLATION MODAL
   ========================================================================== */

.violation-modal-card {
    max-width: 480px !important;
    width: 100% !important;
    padding: 1.6rem 1.75rem !important;
    border-radius: 24px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.3), 0 0 1px 1px rgba(255, 255, 255, 0.8) inset !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    position: relative !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .violation-modal-card {
    background: #181920 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6) !important;
}

.violation-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F1F5F9;
    border: none;
    cursor: pointer;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.violation-modal-close:hover {
    background: #FEE2E2;
    color: #EF4444;
    transform: rotate(90deg) scale(1.05);
}

[data-theme="dark"] .violation-modal-close {
    background: rgba(255, 255, 255, 0.08);
    color: #94A3B8;
}

[data-theme="dark"] .violation-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

.violation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    padding-right: 36px;
}

.violation-icon-ring {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #D97706;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.22);
}

[data-theme="dark"] .violation-icon-ring {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.violation-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.violation-title {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    color: var(--text-blue, #0F172A) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
}

.violation-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted, #64748B);
    line-height: 1.3;
}

/* Offender Card */
.violation-offender-box {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1rem;
}

[data-theme="dark"] .violation-offender-box {
    background: linear-gradient(135deg, #13141B 0%, #1A1B24 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.offender-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.offender-avatar-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E2E8F0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-theme="dark"] .offender-avatar-badge {
    background: #2D2F39;
    color: #94A3B8;
}

.offender-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-blue, #0F172A);
}

.offender-id {
    font-size: 0.75rem;
    color: var(--text-muted, #94A3B8);
    font-weight: 500;
}

.offender-quote-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.offender-quote-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94A3B8;
}

.offender-quote-text {
    font-size: 0.84rem;
    color: #334155;
    background: rgba(255, 255, 255, 0.85);
    border-left: 3px solid var(--primary, #3B82F6);
    padding: 6px 10px;
    border-radius: 0 8px 8px 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .offender-quote-text {
    background: rgba(0, 0, 0, 0.35);
    color: #E2E8F0;
}

/* Segmented Tabs */
.violation-segmented-tabs {
    display: flex;
    gap: 4px;
    background: #F1F5F9;
    padding: 4px;
    border-radius: 14px;
    margin-bottom: 1.15rem;
}

[data-theme="dark"] .violation-segmented-tabs {
    background: #111218;
}

.v-segment-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-muted, #64748B);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.v-segment-btn:hover {
    color: var(--text-main, #0F172A);
}

.v-segment-btn.active {
    background: #FFFFFF;
    color: var(--text-blue, #0F172A);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transform: scale(1.01);
}

[data-theme="dark"] .v-segment-btn.active {
    background: #252733;
    color: #FFFFFF;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.v-tab-icon {
    font-size: 0.95rem;
    line-height: 1;
}

/* Form Sections Inside Tab Panels */
.vtab-field-section {
    margin-bottom: 0.9rem;
    text-align: left;
}

.vtab-section-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748B;
    display: block;
    margin-bottom: 6px;
}

[data-theme="dark"] .vtab-section-label {
    color: #94A3B8;
}

.violation-chips-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.violation-chip {
    padding: 6px 13px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #F8FAFC;
    color: #475569;
    border: 1.5px solid #E2E8F0;
    cursor: pointer;
    transition: all 0.16s ease;
    user-select: none;
}

.violation-chip:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #0F172A;
    transform: translateY(-1px);
}

.violation-chip.active {
    background: #EDE9FE;
    color: #6D28D9;
    border-color: #8B5CF6;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.18);
}

#block-duration-chips .violation-chip.active,
#block-reason-chips .violation-chip.active {
    background: #FEE2E2;
    color: #B91C1C;
    border-color: #EF4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.18);
}

#del-type-chips .violation-chip.active,
#del-reason-chips .violation-chip.active {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #3B82F6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18);
}

[data-theme="dark"] .violation-chip {
    background: #14151C;
    border-color: #262833;
    color: #94A3B8;
}

[data-theme="dark"] .violation-chip:hover {
    background: #1E202B;
    border-color: #3B3E4F;
    color: #F1F5F9;
}

[data-theme="dark"] .violation-chip.active {
    background: rgba(139, 92, 246, 0.25);
    color: #DDD6FE;
    border-color: #8B5CF6;
}

[data-theme="dark"] #block-duration-chips .violation-chip.active,
[data-theme="dark"] #block-reason-chips .violation-chip.active {
    background: rgba(239, 68, 68, 0.22);
    color: #FECACA;
    border-color: #EF4444;
}

[data-theme="dark"] #del-type-chips .violation-chip.active,
[data-theme="dark"] #del-reason-chips .violation-chip.active {
    background: rgba(59, 130, 246, 0.22);
    color: #BFDBFE;
    border-color: #3B82F6;
}

.vtab-custom-input {
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.85rem;
    font-family: inherit;
    background: #F8FAFC;
    color: var(--text-main);
    box-sizing: border-box;
    transition: all 0.2s;
}

.vtab-custom-input:focus {
    outline: none;
    border-color: var(--primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

[data-theme="dark"] .vtab-custom-input {
    background: #14151C;
    border-color: #262833;
    color: #F8FAFC;
}

.vtab-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    margin-top: 10px;
    user-select: none;
    transition: all 0.15s;
}

.vtab-checkbox-label:hover {
    background: #F1F5F9;
}

[data-theme="dark"] .vtab-checkbox-label {
    background: #14151C;
    border-color: #262833;
    color: #CBD5E1;
}

.vtab-checkbox {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
}

.violation-footer-actions {
    display: flex;
    gap: 10px;
    margin-top: 1.25rem;
}

.btn-vmodal-cancel {
    flex: 1;
    height: 42px;
    background: #F1F5F9;
    color: #475569;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-vmodal-cancel:hover {
    background: #E2E8F0;
    color: #0F172A;
}

[data-theme="dark"] .btn-vmodal-cancel {
    background: #252733;
    color: #CBD5E1;
}

[data-theme="dark"] .btn-vmodal-cancel:hover {
    background: #333644;
    color: #FFFFFF;
}

.btn-vmodal-submit {
    flex: 1.5;
    height: 42px;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-vmodal-mute {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.btn-vmodal-mute:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}

.btn-vmodal-block,
.btn-vmodal-delete {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.btn-vmodal-block:hover,
.btn-vmodal-delete:hover {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
}

/* ==========================================================================
   HIDDEN MESSAGE MODERATION BADGE IN CHAT
   ========================================================================== */

.chat-msg-bubble.hidden-bubble {
    background: rgba(239, 68, 68, 0.05) !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    color: var(--text-muted, #64748B) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    padding: 7px 12px !important;
    border-radius: 14px !important;
    min-width: 170px;
    max-width: 340px;
}

[data-theme="dark"] .chat-msg-bubble.hidden-bubble {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #94A3B8 !important;
}

.chat-message-item.self .chat-msg-bubble.hidden-bubble {
    background: rgba(239, 68, 68, 0.05) !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    color: var(--text-muted, #64748B) !important;
}

[data-theme="dark"] .chat-message-item.self .chat-msg-bubble.hidden-bubble {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #94A3B8 !important;
}

.chat-msg-hidden {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
}

.chat-msg-hidden-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    color: #DC2626;
    letter-spacing: -0.1px;
    line-height: 1.3;
}

[data-theme="dark"] .chat-msg-hidden-header {
    color: #F87171;
}

.chat-msg-hidden-icon {
    flex-shrink: 0;
    opacity: 0.85;
    color: #DC2626;
}

[data-theme="dark"] .chat-msg-hidden-icon {
    color: #F87171;
}

.chat-msg-hidden-reason {
    font-size: 0.77rem;
    color: #64748B;
    line-height: 1.35;
    padding-left: 20px;
    word-break: break-word;
    font-style: normal;
}

[data-theme="dark"] .chat-msg-hidden-reason {
    color: #94A3B8;
}

.chat-msg-hidden-reason-label {
    font-weight: 600;
    color: var(--text-muted, #94A3B8);
}

[data-theme="dark"] .chat-msg-hidden-reason-label {
    color: #64748B;
}

/* ==========================================================================
   AVITO-STYLE DEDICATED LISTING PAGE & SIDEBAR
   ========================================================================== */

.listing-card-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.avito-page-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3.5rem;
}

.avito-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.avito-breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.avito-breadcrumbs a:hover {
    color: var(--primary);
}

.avito-bc-sep {
    opacity: 0.45;
}

.avito-bc-current {
    color: var(--text-main);
    font-weight: 600;
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avito-layout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.avito-main-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.avito-header-box {
    margin-bottom: 4px;
}

.avito-listing-title {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-main);
    margin-bottom: 0.85rem;
    word-break: break-word;
}

.avito-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.avito-meta-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.avito-type-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}

.avito-type-sell {
    background: #DCFCE7;
    color: #166534;
}

.avito-type-buy {
    background: #DBEAFE;
    color: #1E40AF;
}

.avito-type-free {
    background: #FEF3C7;
    color: #92400E;
}

.avito-type-rent {
    background: #F3E8FF;
    color: #6B21A8;
}

.avito-cat-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.avito-meta-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.avito-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.avito-meta-dot {
    opacity: 0.4;
}

/* Gallery */
.avito-gallery-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.avito-gallery-main {
    position: relative;
    width: 100%;
    height: 480px;
    background: var(--bg-hover, #F8FAFC);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    border: 1px solid var(--border-color);
}

#avito-main-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: auto;
    transition: transform 0.3s ease;
    user-select: none;
}

.avito-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
    padding: 0;
}

.avito-gallery-arrow svg,
.avito-gallery-arrow svg path {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

.avito-gallery-arrow:hover {
    background: rgba(15, 23, 42, 0.95);
    transform: translateY(-50%) scale(1.1);
    color: #FFFFFF !important;
}

.avito-arrow-prev {
    left: 14px;
}

.avito-arrow-next {
    right: 14px;
}

.avito-gallery-counter {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(15, 23, 42, 0.75);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.avito-gallery-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.avito-thumb {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.6;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    background: #0F172A;
}

.avito-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avito-thumb.active,
.avito-thumb:hover {
    border-color: var(--primary);
    opacity: 1;
    transform: scale(1.04);
}

.avito-gallery-empty {
    width: 100%;
    height: 320px;
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1.5px dashed var(--border-color);
}

.avito-empty-icon {
    color: var(--text-muted);
    opacity: 0.6;
}

.avito-mobile-price-card {
    display: none;
}

/* Sections */
.avito-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.avito-section-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.avito-params-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.avito-param-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}

[data-theme="dark"] .avito-param-row {
    border-bottom-color: rgba(255,255,255,0.06);
}

.avito-param-label {
    color: var(--text-muted);
    font-weight: 500;
}

.avito-param-value {
    color: var(--text-main);
    font-weight: 700;
    text-align: right;
}

.avito-desc-content {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text-main);
    word-break: break-word;
}

.avito-location-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0.4rem 0;
}

.avito-location-pin {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avito-location-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 2px;
}

.avito-location-sub {
    font-size: 0.86rem;
    color: var(--text-muted);
}

.avito-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 0.5rem;
}

.btn-share-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-share-link:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* RIGHT STICKY SIDEBAR (AVITO STYLE) */
.avito-sidebar-col {
    position: relative;
}

.avito-sticky-card {
    position: sticky;
    top: 90px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.avito-sidebar-price {
    margin-bottom: 2px;
}

.avito-price-main {
    font-size: 2.15rem;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.avito-price-sub {
    font-size: 0.86rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
    display: block;
}

.avito-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-avito-phone {
    width: 100%;
    min-height: 50px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    padding: 0.6rem 1rem;
    text-align: center;
}

.btn-avito-phone:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #FFFFFF;
}

.btn-avito-phone.revealed {
    background: #059669;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

.btn-avito-phone-guest {
    background: var(--bg-hover);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: none;
    font-size: 0.9rem;
}

.btn-avito-phone-guest:hover {
    background: var(--border-color);
    color: var(--text-main);
    transform: none;
    box-shadow: none;
}

.btn-avito-chat {
    width: 100%;
    min-height: 50px;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.98rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    padding: 0.6rem 1rem;
    text-align: center;
}

.btn-avito-chat:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
    background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
    color: #FFFFFF;
}

.avito-owner-badge {
    background: rgba(37, 99, 235, 0.08);
    border: 1px dashed rgba(37, 99, 235, 0.25);
    color: var(--primary);
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.avito-phone-notice {
    background: var(--bg-hover);
    color: var(--text-muted);
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border-color);
}

.avito-sidebar-divider {
    border: 0;
    height: 1px;
    background: var(--border-color);
    margin: 2px 0;
}

/* Seller Card */
.avito-seller-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.avito-seller-avatar-link {
    position: relative;
    flex-shrink: 0;
}

.avito-seller-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.avito-seller-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10B981;
    border: 2px solid var(--bg-card);
}

.avito-seller-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.avito-seller-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avito-seller-name:hover {
    color: var(--primary);
}

.avito-seller-type {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
}

.avito-seller-joined {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.avito-seller-mood {
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* Safety Guarantee Box */
.avito-safety-card {
    background: rgba(37, 99, 235, 0.04);
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.avito-safety-icon {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.avito-safety-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.avito-safety-text strong {
    color: var(--text-main);
    font-weight: 700;
}

/* Owner Controls */
.avito-owner-controls {
    padding-top: 2px;
}

.btn-avito-edit {
    width: 100%;
    padding: 0.75rem;
    background: rgba(37, 99, 235, 0.08);
    border: 1.5px solid rgba(37, 99, 235, 0.25);
    color: var(--primary);
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-avito-edit:hover {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-avito-delete {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    color: #EF4444;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-avito-delete:hover {
    background: #EF4444;
    color: #FFFFFF;
    border-color: #EF4444;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Lightbox Overlay */
.avito-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    cursor: zoom-out;
}

.avito-lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border: none;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.avito-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

#avito-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    cursor: default;
}

/* Dark Theme Overrides */
[data-theme="dark"] .avito-gallery-main {
    background: #181920;
}

[data-theme="dark"] .avito-gallery-empty {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-color);
}

[data-theme="dark"] .avito-type-sell {
    background: rgba(16, 185, 129, 0.2);
    color: #6EE7B7;
}

[data-theme="dark"] .avito-type-buy {
    background: rgba(59, 130, 246, 0.2);
    color: #93C5FD;
}

[data-theme="dark"] .avito-type-free {
    background: rgba(245, 158, 11, 0.2);
    color: #FCD34D;
}

[data-theme="dark"] .avito-type-rent {
    background: rgba(168, 85, 247, 0.2);
    color: #D8B4FE;
}

[data-theme="dark"] .avito-safety-card {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Organizer & Venue Cards (Afisha Specific) */
.avito-organizer-box,
.avito-venue-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

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

.btn-avito-edit {
    width: 100%;
    min-height: 46px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    color: var(--primary);
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-avito-edit:hover {
    background: var(--primary);
    color: #FFFFFF;
}

.btn-avito-delete {
    width: 100%;
    min-height: 46px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #EF4444;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-avito-delete:hover {
    background: #EF4444;
    color: #FFFFFF;
}

/* Responsive Breakpoints for Avito & Afisha Single Pages */
@media (max-width: 900px) {
    .avito-layout-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .avito-sidebar-col {
        order: 2;
    }

    .avito-main-col {
        order: 1;
    }

    .avito-sidebar-price {
        display: none !important;
    }

    .avito-gallery-main {
        height: auto;
        max-height: 320px;
    }

    .avito-listing-title {
        font-size: 1.45rem;
    }

    .avito-mobile-price-card {
        display: flex !important;
        flex-direction: column !important;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 1.15rem 1.25rem;
        box-shadow: var(--shadow-sm);
        gap: 10px;
    }

    .avito-mobile-price-card .avito-price-main {
        font-size: 1.75rem;
        font-weight: 900;
        color: var(--text-main);
    }
}

@media (max-width: 768px) {
    .avito-page-container {
        padding: 0.75rem 0.5rem 6.5rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    .avito-breadcrumbs {
        font-size: 0.78rem;
        gap: 4px;
        margin-bottom: 0.75rem;
        line-height: 1.4;
        flex-wrap: wrap;
    }

    .avito-bc-current {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }

    .avito-header-box {
        margin-bottom: 8px;
    }

    .avito-listing-title {
        font-size: 1.28rem;
        line-height: 1.3;
        margin-bottom: 0.65rem;
        word-break: break-word;
    }

    .avito-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .avito-meta-badges {
        gap: 6px;
        flex-wrap: wrap;
    }

    .avito-meta-stats {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.8rem;
        color: var(--text-muted);
        flex-wrap: wrap;
    }

    .avito-gallery-main {
        height: auto;
        max-height: 240px;
        border-radius: var(--radius-md);
    }

    .hub-view-cover-placeholder {
        height: 160px !important;
        border-radius: var(--radius-md) !important;
    }

    .avito-section-card,
    .avito-details-box,
    .avito-desc-section,
    .avito-organizer-box,
    .avito-venue-box,
    .avito-price-box {
        padding: 1.15rem 1rem !important;
        border-radius: var(--radius-lg) !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .avito-specs-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .avito-spec-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .avito-spec-row:last-child {
        border-bottom: none !important;
    }

    .avito-spec-label {
        font-size: 0.82rem !important;
        color: var(--text-muted) !important;
        font-weight: 500 !important;
        flex-shrink: 0 !important;
    }

    .avito-spec-val {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        text-align: right !important;
        word-break: break-word !important;
    }

    .avito-section-heading {
        font-size: 1.1rem;
        margin-bottom: 0.65rem;
        padding-bottom: 0.45rem;
    }

    .avito-price-main {
        font-size: 1.65rem;
    }

    .btn-avito-phone,
    .btn-avito-chat,
    .btn-avito-edit,
    .btn-avito-delete {
        min-height: 46px;
        font-size: 0.92rem;
        width: 100% !important;
    }

    .avito-seller-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .avito-organizer-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .avito-venue-box {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .avito-sticky-panel {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
}

/* ==== Hero feature tooltips (hover) ==== */
.hero-feature-item { position: relative; }
.hero-feature-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 240px;
    max-width: 82vw;
    background: #FFFFFF;
    color: #0F172A;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 16px 40px -6px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.08);
    padding: 12px 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 120;
    pointer-events: none;
    text-align: left;
}
.hero-feature-tooltip::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 13px;
    height: 13px;
    background: #FFFFFF;
    border-right: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}
.hero-feature-item:hover .hero-feature-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.hero-feature-tooltip .tooltip-title {
    font-size: 0.84rem;
    font-weight: 800;
    margin-bottom: 7px;
    color: #1E40AF;
}
.hero-feature-tooltip .tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    padding: 3px 0;
}
.hero-feature-tooltip .tooltip-note {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed #E2E8F0;
    font-size: 0.76rem;
    color: #64748B;
    line-height: 1.45;
}
.hero-feature-tooltip--narrow { width: 210px; }
[data-theme="dark"] .hero-feature-tooltip {
    background: #1E293B;
    color: #E2E8F0;
    border-color: #334155;
}
[data-theme="dark"] .hero-feature-tooltip::after { background: #1E293B; border-color: #334155; }
[data-theme="dark"] .hero-feature-tooltip .tooltip-title { color: #93C5FD; }
[data-theme="dark"] .hero-feature-tooltip .tooltip-row { color: #CBD5E1; }
[data-theme="dark"] .hero-feature-tooltip .tooltip-note { color: #94A3B8; border-color: #334155; }

/* ========================================================================== */
/* AUTHOR REWARDS                                                             */
/* ========================================================================== */
.hub-header-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.btn-hub-create--author { background:#151A17; box-shadow:0 4px 14px rgba(21,26,23,.2); }
.btn-hub-create--author:hover { background:#2A312C; transform:translateY(-2px); box-shadow:0 8px 20px rgba(21,26,23,.25); }
.btn-hub-create--author:focus-visible,.author-primary:focus-visible,.author-secondary:focus-visible { outline:3px solid #86D9AE; outline-offset:3px; }
.post-read-timer { position:sticky; top:84px; z-index:8; float:right; display:flex; align-items:center; gap:10px; margin:-10px -10px 12px 16px; padding:9px 12px; border:1px solid #D5DDD8; border-radius:10px; background:rgba(248,250,249,.94); color:#59645D; font-size:12px; backdrop-filter:blur(10px); }
.post-read-timer strong { min-width:42px; color:#15271C; font-size:15px; font-variant-numeric:tabular-nums; }
.post-read-timer.is-complete { background:#E9F8F0; border-color:#A7E5C3; color:#23603D; }
.post-limit-lock { display:inline-flex; padding:8px 12px; border:1px solid #D5DDD8; border-radius:8px; background:#F3F6F4; color:#465149; font-size:13px; font-weight:700; }
.author-shell,.author-admin-shell { width:min(1220px,calc(100% - 40px)); margin:0 auto; padding:48px 0 80px; color:#172019; }
.author-kicker { display:inline-block; margin-bottom:12px; color:#207A4A; font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.author-onboarding { display:grid; grid-template-columns:1.05fr .95fr; min-height:620px; overflow:hidden; border:1px solid #DDE5E0; border-radius:24px; background:#F5F7F5; box-shadow:0 24px 60px rgba(28,48,35,.08); }
.author-onboarding-copy { display:flex; flex-direction:column; justify-content:center; padding:64px; background:#DFF5E8; }
.author-onboarding-copy h1 { max-width:600px; margin:0 0 24px; color:#132419; font-size:clamp(42px,5vw,72px); line-height:1.02; letter-spacing:-.055em; }
.author-onboarding-copy p { max-width:560px; margin:0; color:#405149; font-size:18px; line-height:1.7; }
.author-onboarding-lead { max-width:520px!important; margin:0!important; font-size:16px!important; line-height:1.55!important; }
.author-earning-rates { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.author-earning-rate { display:flex; flex-direction:column; gap:6px; width:max-content; padding:13px 16px; border:1px solid #B9DCC6; border-radius:12px; background:rgba(255,255,255,.58); }
.author-earning-value { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.author-earning-value strong { color:#173A27; font-size:27px; line-height:1; letter-spacing:-.04em; }
.author-earning-value span { color:#207A4A; font-size:13px; font-weight:900; }
.author-earning-rate small { color:#5F7567; font-size:11px; line-height:1.3; white-space:nowrap; }
.author-earning-rate--primary { border-color:#16834B; background:#16834B; box-shadow:0 8px 18px rgba(22,131,75,.16); }
.author-earning-rate--primary strong,.author-earning-rate--primary span { color:#F5FFF8; }
.author-earning-rate--primary small { color:#C4E9D1; }
.author-rate-line { display:flex; align-items:center; gap:12px; width:max-content; margin-top:36px; padding:14px 16px; border:1px solid #ACDABB; border-radius:12px; background:rgba(255,255,255,.58); }
.author-rate-line span { color:#71907B; }
.author-join-card { display:flex; flex-direction:column; gap:16px; justify-content:center; padding:56px; background:#FBFCFB; }
.author-join-card h2 { margin:0 0 8px; font-size:28px; }
.author-join-card label,.author-panel label { display:grid; gap:7px; color:#33463A; font-size:13px; font-weight:700; }
.author-check { display:flex!important; grid-template-columns:none!important; align-items:flex-start; gap:10px!important; font-weight:500!important; line-height:1.5; }
.author-check input { width:18px; height:18px; margin-top:2px; accent-color:#16834B; }
.author-primary,.author-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 18px; border:0; border-radius:10px; font:700 14px/1.2 inherit; text-decoration:none; cursor:pointer; transition:background .18s ease,transform .18s ease; }
.author-primary { background:#16834B; color:#F7FFF9!important; }
.author-primary:hover { background:#116D3D; }
.author-primary:disabled { opacity:.45; cursor:not-allowed; }
.author-secondary { border:1px solid #CCD8D0; background:#F7FAF8; color:#1C3425; }
.author-secondary:hover { background:#EAF2ED; }
.author-privacy-note { margin:0; color:#718079; font-size:12px; line-height:1.5; }
.author-block-banner,.author-admin-message { display:grid; gap:5px; margin-bottom:20px; padding:18px 20px; border-radius:12px; }
.author-block-banner { border:1px solid #F0C1B6; background:#FFF1ED; color:#7B3023; }
.author-admin-message { border:1px solid #B7D9C5; background:#ECF8F1; color:#24543A; }
.author-admin-message p { margin:4px 0 0; line-height:1.6; }
.author-dashboard-head,.author-admin-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.author-dashboard-head h1,.author-admin-head h1 { margin:0 0 8px; font-size:clamp(32px,5vw,52px); letter-spacing:-.045em; }
.author-dashboard-head p,.author-admin-head p { margin:0; color:#68736C; }
.author-tabs { display:flex; gap:6px; margin-bottom:20px; padding:5px; width:max-content; border:1px solid #DCE4DF; border-radius:12px; background:#EFF3F0; }
.author-tab { padding:9px 18px; border:1px solid transparent; border-radius:8px; color:#55635A; font-size:13px; font-weight:700; text-decoration:none; }
.author-tab:hover { color:#1C2B22; }
.author-tab.active { border-color:#C8D6CD; background:#FFFFFF; color:#1C2B22; box-shadow:0 2px 6px rgba(24,48,33,.06); }
.author-requisites-panel { max-width:560px; }
.author-requisites-form { display:grid; gap:14px; }
.author-requisites-form label { display:grid; gap:6px; color:#3E5044; font-size:13px; font-weight:700; }
.author-requisites-form .form-input { min-height:44px; padding:10px 12px; border-color:#D5DED8; border-radius:9px; font-size:14px; }
.author-requisites-form .author-primary { width:max-content; min-width:200px; }
.author-rules { border:1px solid #D5E0D9; border-radius:12px; background:#F8FBF9; }
.author-rules--inline { margin-bottom:4px; }
.author-rules--bottom { margin-top:20px; }
.author-rules > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; cursor:pointer; list-style:none; color:#1C2C22; font-size:14px; font-weight:800; }
.author-rules > summary::-webkit-details-marker { display:none; }
.author-rules > summary::after { content:'+'; flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:#E3F0E8; color:#1E7C49; font-size:16px; line-height:1; transition:transform .15s ease; }
.author-rules[open] > summary::after { content:'−'; }
.author-rules-hint { color:#748078; font-size:12px; font-weight:500; }
.author-rules-body { padding:0 16px 16px; border-top:1px solid #E7EEE9; }
.author-rules-section { padding:14px 0; border-bottom:1px solid #E7EEE9; }
.author-rules-section:last-child { border-bottom:0; }
.author-rules-section h4 { margin:0 0 8px; color:#173A27; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.author-rules-section ul { margin:0; padding:0; list-style:none; }
.author-rules-section li { position:relative; margin:6px 0; padding-left:16px; color:#4A5A4F; font-size:13px; line-height:1.5; }
.author-rules-section li::before { content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:#22A05B; }
.author-rules-section p { margin:6px 0; color:#4A5A4F; font-size:13px; line-height:1.5; }
[data-theme="dark"] .author-rules { border-color:#333B35; background:#1B201C; }
[data-theme="dark"] .author-rules > summary { color:#EDF3EE; }
[data-theme="dark"] .author-rules > summary::after { background:#22352A; color:#5BD390; }
[data-theme="dark"] .author-rules-body { border-color:#333B35; }
[data-theme="dark"] .author-rules-section { border-color:#333B35; }
[data-theme="dark"] .author-rules-section h4 { color:#8AD8A9; }
[data-theme="dark"] .author-rules-section li, [data-theme="dark"] .author-rules-section p { color:#A9B5AC; }
[data-theme="dark"] .author-tabs { border-color:#333B35; background:#1B201C; }
[data-theme="dark"] .author-tab { color:#A9B5AC; }
[data-theme="dark"] .author-tab.active { border-color:#39443C; background:#242A25; color:#EDF3EE; }
.author-metrics { display:grid; grid-template-columns:1.35fr repeat(3,1fr); gap:12px; margin-bottom:28px; }
.author-metric { display:grid; gap:8px; min-height:140px; padding:22px; border:1px solid #DDE5E0; border-radius:14px; background:#FBFCFB; }
.author-metric--balance { background:#173A27; border-color:#173A27; color:#F4FFF7; }
.author-metric span { color:#637068; font-size:13px; font-weight:700; }
.author-metric--balance span,.author-metric--balance small { color:#B8DCC6; }
.author-metric strong { align-self:end; font-size:25px; letter-spacing:-.03em; }
.author-metric small { color:#7C8880; font-size:12px; }
.author-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.author-side { display:grid; gap:16px; }
.author-panel { padding:22px; border:1px solid #DDE5E0; border-radius:14px; background:#FBFCFB; }
.author-panel form { display:grid; gap:12px; }
.author-panel summary { cursor:pointer; font-weight:800; }
.author-panel details[open] summary { margin-bottom:16px; }
.author-panel-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }
.author-panel-head div { display:grid; gap:4px; }
.author-panel-head span { font-size:17px; font-weight:800; }
.author-panel-head small { color:#748078; }
.author-post-list { display:grid; }
.author-post-row { display:grid; grid-template-columns:minmax(220px,1fr) 95px 140px 130px; gap:18px; align-items:center; padding:17px 0; border-top:1px solid #E4EAE6; }
.author-post-row:first-child { border-top:0; }
.author-post-main { display:grid; gap:5px; min-width:0; }
.author-post-main a { overflow:hidden; color:#1B2B21; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.author-post-main time,.author-post-stat span { color:#7B867F; font-size:12px; }
.author-post-stat { display:grid; gap:4px; }
.author-post-state { justify-self:end; padding:6px 9px; border-radius:999px; background:#EAF8F0; color:#247347; font-size:11px; font-weight:800; }
.author-post-state.is-limit { background:#F0F1EF; color:#515B54; }
.author-empty { padding:44px 20px; text-align:center; color:#6E7A72; }
.author-empty strong { display:block; margin-bottom:8px; color:#27332B; font-size:20px; }
.author-empty a { color:#167346; font-weight:800; }
.author-empty.compact { padding:20px; }
.author-history { margin-top:20px; }
.author-history-list { display:grid; }
.author-history-list>div { display:grid; grid-template-columns:140px 160px 140px 1fr; gap:16px; padding:13px 0; border-top:1px solid #E4EAE6; font-size:13px; }
.author-history-list time,.author-history-list small { color:#768179; }
.author-status { font-weight:800; }
.author-status--paid,.is-positive { color:#13713F; }
.author-status--rejected,.is-negative { color:#AA3E2D; }
.author-admin-total { display:grid; min-width:120px; padding:16px; border-radius:12px; background:#173A27; color:white; }
.author-admin-total span { color:#B8DCC6; font-size:12px; }
.author-admin-total strong { font-size:28px; }
.author-admin-layout { display:grid; grid-template-columns:330px minmax(0,1fr); gap:20px; align-items:start; }
.author-admin-list { display:grid; gap:8px; position:sticky; top:20px; }
.author-admin-person { display:grid; gap:10px; padding:16px; border:1px solid #DDE5E0; border-radius:12px; background:#FBFCFB; color:#213128; text-decoration:none; }
.author-admin-person.active { border-color:#79B995; background:#EFF9F3; }
.author-admin-person div { display:grid; gap:3px; }
.author-admin-person span,.author-admin-person small { color:#738078; font-size:12px; }
.author-admin-person i { width:max-content; padding:4px 7px; border-radius:999px; font-size:10px; font-style:normal; font-weight:800; }
.author-admin-person i.active { background:#E3F6EB; color:#187142; }
.author-admin-person i.blocked { background:#FDECE8; color:#9A3B2D; }
.author-admin-detail { display:grid; gap:18px; }
.author-admin-profile { display:flex; justify-content:space-between; gap:20px; padding:24px; border-radius:14px; background:#173A27; color:#F5FFF7; }
.author-admin-profile h2 { margin:0 0 7px; }
.author-admin-profile p,.author-admin-profile small { color:#BFDCC9; }
.author-admin-profile>strong { font-size:24px; white-space:nowrap; }
.author-admin-card-number { display:block; width:max-content; margin-top:10px; padding:8px 10px; border:1px solid rgba(255,255,255,.18); border-radius:8px; color:#F4FFF7; background:rgba(255,255,255,.08); font:700 13px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; }
.author-admin-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.author-admin-cards h3 { margin:0; }
.author-payout-admin-list { display:grid; gap:10px; }
.author-payout-admin-list form { display:grid; grid-template-columns:170px minmax(160px,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid #E1E8E3; border-radius:10px; }
.author-payout-admin-list form>div:first-child { display:grid; gap:4px; }
.author-payout-actions { display:flex; gap:6px; }
.author-payout-actions button { padding:8px 10px; border:0; border-radius:7px; background:#E7EEE9; cursor:pointer; }
.author-payout-actions .paid { background:#DCF5E7; color:#126A3B; }
.author-payout-actions .rejected { background:#FCE9E5; color:#9B3527; }
[data-theme="dark"] .author-shell,[data-theme="dark"] .author-admin-shell { color:#E6ECE8; }
[data-theme="dark"] .author-onboarding,[data-theme="dark"] .author-panel,[data-theme="dark"] .author-metric,[data-theme="dark"] .author-admin-person { background:#191D1A; border-color:#343B36; }
[data-theme="dark"] .author-onboarding-copy { background:#193226; }
[data-theme="dark"] .author-onboarding-copy h1,[data-theme="dark"] .author-post-main a,[data-theme="dark"] .author-empty strong { color:#F0F5F2; }
[data-theme="dark"] .author-onboarding-copy p,[data-theme="dark"] .author-dashboard-head p,[data-theme="dark"] .author-panel-head small { color:#AAB5AE; }
[data-theme="dark"] .author-join-card { background:#151815; }

@media (max-width:900px) {
    .author-shell,.author-admin-shell { width:min(100% - 24px,760px); padding-top:24px; }
    .author-onboarding,.author-admin-layout { grid-template-columns:1fr; }
    .author-onboarding-copy,.author-join-card { padding:32px; }
    .author-onboarding-copy h1 { font-size:44px; }
    .author-metrics { grid-template-columns:1fr 1fr; }
    .author-grid { grid-template-columns:1fr; }
    .author-admin-list { position:static; grid-template-columns:1fr 1fr; }
    .author-admin-cards { grid-template-columns:1fr; }
    .author-post-row { grid-template-columns:minmax(180px,1fr) 90px 130px; }
    .author-post-state { grid-column:1/-1; justify-self:start; }
    .author-history-list>div { grid-template-columns:120px 1fr; }
    .author-payout-admin-list form { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .hub-header-actions { width:100%; flex-direction:column; }
    .hub-header-actions .btn-hub-create { width:100%; justify-content:center; }
    .author-onboarding-copy,.author-join-card { padding:24px; }
    .author-onboarding-copy h1 { font-size:36px; }
    .author-earning-rates { flex-direction:column; }
    .author-dashboard-head,.author-admin-head { align-items:flex-start; flex-direction:column; }
    .author-metrics { grid-template-columns:1fr; }
    .author-post-row { grid-template-columns:1fr 1fr; }
    .author-post-main { grid-column:1/-1; }
    .author-admin-list { grid-template-columns:1fr; }
    .author-admin-profile { flex-direction:column; }
    .post-read-timer { float:none; top:70px; width:100%; margin:0 0 16px; justify-content:space-between; }
}

@media (max-width:820px) {
    .hub-header-card--posts .hub-header-title {
        white-space: normal !important;
    }
}
@media (prefers-reduced-motion:reduce) {
    .btn-hub-create--author,.author-primary,.author-secondary { transition:none; }
}

/* ========================================================================== */
/* AUTHOR ADMIN V2 — OPERATIONAL WORKSPACE                                    */
/* ========================================================================== */
.author-admin-body {
    background: #F3F6F4;
}

.author-admin-v2 {
    width: min(1480px, calc(100% - 48px));
    padding: 32px 0 64px;
}

.aa-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.aa-page-head h1 {
    margin: 0 0 8px;
    color: #17231B;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.aa-page-head p {
    max-width: 760px;
    margin: 0;
    color: #637068;
    font-size: 15px;
    line-height: 1.55;
}

.aa-back-link {
    flex: none;
    padding: 10px 14px;
    border: 1px solid #D2DCD5;
    border-radius: 9px;
    background: #FAFCFA;
    color: #294032;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.aa-back-link:hover {
    border-color: #9DB8A7;
    background: #EDF5F0;
}

.aa-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.aa-overview article {
    display: grid;
    gap: 6px;
    min-height: 120px;
    padding: 20px;
    border: 1px solid #D9E2DC;
    border-radius: 12px;
    background: #FAFCFA;
}

.aa-overview article.needs-attention {
    border-color: #E5C58E;
    background: #FFF8E9;
}

.aa-overview span {
    color: #68766D;
    font-size: 12px;
    font-weight: 700;
}

.aa-overview strong {
    align-self: end;
    color: #17231B;
    font-size: 29px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.aa-overview small {
    color: #849087;
    font-size: 12px;
}

.aa-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    padding: 6px;
    border: 1px solid #D7E1DA;
    border-radius: 14px;
    background: #E9EEEB;
}

.aa-tab {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #445249;
    text-decoration: none;
}

.aa-tab:hover {
    background: rgba(255, 255, 255, 0.52);
}

.aa-tab.active {
    border-color: #CBD9CF;
    background: #FFFFFF;
    color: #1E3025;
    box-shadow: 0 3px 10px rgba(24, 48, 33, 0.07);
}

.aa-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #DDE7E0;
    color: #3F6650;
}

.aa-tab.active .aa-tab-icon {
    background: #DDF1E4;
    color: #1E7C49;
}

.aa-tab > span:nth-child(2) {
    display: grid;
    gap: 3px;
}

.aa-tab strong {
    font-size: 14px;
}

.aa-tab small {
    color: #738078;
    font-size: 11px;
}

.aa-tab > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border-radius: 999px;
    background: #E3E9E5;
    color: #47564D;
    font-size: 12px;
}

.aa-tab > b.attention {
    background: #E64832;
    color: #FFFFFF;
}

.aa-payouts-page {
    display: grid;
    gap: 18px;
}

.aa-payouts-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border: 1px solid #D9E2DC;
    border-radius: 14px;
    background: #FAFCFA;
}

.aa-payouts-intro h2 {
    margin: 0 0 7px;
    color: #192A20;
    font-size: 26px;
    letter-spacing: -0.025em;
}

.aa-payouts-intro p {
    max-width: 760px;
    margin: 0;
    color: #6B776F;
    font-size: 13px;
    line-height: 1.55;
}

.aa-queue-counter {
    display: grid;
    min-width: 130px;
    padding: 15px 18px;
    border-radius: 11px;
    background: #173A27;
    color: #F4FFF7;
}

.aa-queue-counter span,
.aa-queue-counter small {
    color: #AED1BA;
    font-size: 11px;
}

.aa-queue-counter strong {
    margin: 4px 0;
    font-size: 29px;
    line-height: 1;
}

.aa-payout-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px;
    border: 1px solid #BCD9C7;
    border-radius: 14px;
    background: #EAF7EF;
    color: #24553A;
}

.aa-payout-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #D4EEDD;
}

.aa-payout-empty strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
}

.aa-payout-empty p {
    margin: 0;
    color: #557461;
    font-size: 13px;
}

.aa-payout-queue {
    display: grid;
    gap: 12px;
}

.aa-request-card {
    scroll-margin-top: 24px;
    overflow: hidden;
    border: 1px solid #D8E1DB;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 5px 18px rgba(22, 45, 30, 0.04);
}

.aa-request-card:target {
    border-color: #3A9A63;
    box-shadow: 0 0 0 4px rgba(58, 154, 99, 0.14), 0 8px 24px rgba(22, 45, 30, 0.08);
}

.aa-request-head {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid #E3E9E5;
    background: #F7FAF8;
}

.aa-request-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.aa-request-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #DDEEE3;
    color: #216941;
    font-size: 17px;
    font-weight: 900;
}

.aa-request-person > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.aa-request-person strong {
    overflow: hidden;
    color: #1D2D23;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aa-request-person span {
    color: #748078;
    font-size: 11px;
}

.aa-request-money {
    display: grid;
    gap: 3px;
    text-align: right;
}

.aa-request-money span {
    color: #758078;
    font-size: 10px;
}

.aa-request-money strong {
    color: #143A25;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.aa-request-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 20px;
}

.aa-request-details > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #E3E9E5;
    border-radius: 9px;
    background: #FBFCFB;
}

.aa-request-details span,
.aa-author-comment span {
    color: #78847C;
    font-size: 10px;
    font-weight: 700;
}

.aa-request-details strong {
    overflow: hidden;
    color: #25352B;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aa-request-card-number {
    position: relative;
    padding-right: 72px !important;
}

.aa-request-card-number button {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 5px 7px;
    border: 1px solid #CBD7CF;
    border-radius: 6px;
    background: #F1F5F2;
    color: #385244;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.aa-author-comment {
    margin: 0 20px 14px;
    padding: 10px 12px;
    border-left: 3px solid #AFCDBA;
    background: #F3F8F5;
}

.aa-author-comment p {
    margin: 4px 0 0;
    color: #44554A;
    font-size: 12px;
    line-height: 1.45;
}

.aa-request-action-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
    gap: 14px;
    padding: 14px 20px 18px;
    border-top: 1px solid #E5EBE7;
}

.aa-request-action-form label {
    display: grid;
    gap: 5px;
    color: #526158;
    font-size: 11px;
    font-weight: 700;
}

.aa-request-action-form .form-input {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    border-color: #D5DED8;
    border-radius: 8px;
    font-size: 12px;
}

.aa-request-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.aa-request-actions a,
.aa-request-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid #D0DAD3;
    border-radius: 7px;
    background: #F5F8F6;
    color: #34453A;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.aa-request-actions .approve {
    border-color: #9EBFE5;
    background: #EDF5FF;
    color: #2C5F99;
}

.aa-request-actions .paid {
    border-color: #91CDA9;
    background: #E5F6EB;
    color: #15673B;
}

.aa-request-actions .rejected {
    border-color: #E3B4AA;
    background: #FCECE8;
    color: #943827;
}

.aa-payout-history {
    padding: 20px;
    border: 1px solid #D9E2DC;
    border-radius: 14px;
    background: #FAFCFA;
}

.aa-workspace {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.aa-authors-panel {
    position: sticky;
    top: 20px;
    overflow: hidden;
    border: 1px solid #D9E2DC;
    border-radius: 14px;
    background: #FAFCFA;
}

.aa-panel-title {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid #E1E8E3;
}

.aa-panel-title > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.aa-panel-title h2 {
    margin: 0;
    color: #1B2A20;
    font-size: 19px;
}

.aa-panel-title span {
    color: #77847C;
    font-size: 12px;
}

.aa-panel-title input {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #D5DED8;
    border-radius: 8px;
    background: #FFFFFF;
    color: #1A2920;
    font: inherit;
}

.aa-panel-title input:focus {
    border-color: #46966B;
    outline: 3px solid rgba(70, 150, 107, 0.14);
}

.aa-author-list {
    display: grid;
    gap: 8px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding: 10px;
}

.aa-author-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #F4F7F5;
    color: #203027;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease;
}

.aa-author-card:hover {
    border-color: #B7CABD;
    background: #EFF5F1;
}

.aa-author-card.active {
    border-color: #388E60;
    background: #E9F5ED;
    box-shadow: inset 3px 0 #23824F;
}

.aa-author-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.aa-author-card-top > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.aa-author-card-top strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aa-author-card-top > div span {
    color: #748078;
    font-size: 12px;
}

.aa-author-card-money {
    display: grid;
    gap: 3px;
}

.aa-author-card-money span {
    color: #748078;
    font-size: 11px;
}

.aa-author-card-money strong {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.aa-author-card-stats {
    display: flex;
    gap: 14px;
    color: #66736B;
    font-size: 11px;
}

.aa-author-card-stats b {
    color: #26372D;
}

.aa-open-author {
    color: #247348;
    font-size: 11px;
    font-weight: 800;
}

.aa-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.aa-status.active,
.aa-status.paid {
    background: #E0F4E8;
    color: #17683D;
}

.aa-status.blocked,
.aa-status.rejected {
    background: #FBE9E5;
    color: #963929;
}

.aa-status.pending {
    background: #FFF0CE;
    color: #85580A;
}

.aa-status.approved {
    background: #E5EEFF;
    color: #2E5C9F;
}

.aa-status.limit {
    background: #ECEFED;
    color: #4D5851;
}

.aa-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

.aa-profile-card,
.aa-profile-main,
.aa-finance-summary,
.aa-actions-section,
.aa-data-section,
.aa-action-grid,
.aa-action-card,
.aa-table-wrap,
.aa-payout-list,
.aa-payout-row {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.aa-empty-detail {
    padding: 64px 24px;
    border: 1px dashed #C8D4CC;
    border-radius: 14px;
    background: #FAFCFA;
    text-align: center;
}

.aa-empty-detail strong {
    display: block;
    margin-bottom: 8px;
    color: #24342A;
    font-size: 20px;
}

.aa-empty-detail p {
    margin: 0;
    color: #738078;
}

.aa-profile-card {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    overflow: hidden;
    border-radius: 14px;
    background: #173A27;
    color: #F5FFF7;
}

.aa-profile-main {
    padding: 24px;
}

.aa-profile-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.aa-profile-title-row > div > span {
    color: #A8D3B7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.aa-profile-title-row h2 {
    margin: 5px 0 0;
    font-size: 25px;
    line-height: 1.2;
}

.aa-profile-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    color: #BFD7C8;
    font-size: 13px;
}

.aa-payment-details {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 10px;
    margin-top: 20px;
}

.aa-payment-details > div {
    display: grid;
    gap: 4px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
}

.aa-payment-details span {
    color: #AFC8B8;
    font-size: 10px;
}

.aa-payment-details strong {
    color: #F3FFF6;
    font-size: 12px;
}

.aa-card-detail {
    position: relative;
    padding-right: 74px !important;
}

.aa-card-detail button {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #F1FFF5;
    font-size: 10px;
    cursor: pointer;
}

.aa-finance-summary {
    display: grid;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.11);
}

.aa-finance-summary > div {
    display: grid;
    gap: 5px;
    padding: 18px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.aa-finance-summary > div:first-child {
    border-top: 0;
}

.aa-finance-summary span,
.aa-finance-summary small {
    color: #AED0BA;
    font-size: 11px;
}

.aa-finance-summary strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.aa-warning-banner {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #E7B8AA;
    border-radius: 10px;
    background: #FFF0EB;
    color: #743123;
    font-size: 13px;
}

.aa-actions-section,
.aa-data-section {
    padding: 20px;
    border: 1px solid #D9E2DC;
    border-radius: 14px;
    background: #FAFCFA;
}

.aa-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.aa-section-heading > div {
    display: grid;
    gap: 3px;
}

.aa-section-heading span {
    color: #1C2C22;
    font-size: 18px;
    font-weight: 800;
}

.aa-section-heading small {
    color: #748078;
    font-size: 12px;
}

.aa-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.aa-action-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #DEE6E1;
    border-radius: 11px;
    background: #FFFFFF;
}

.aa-action-card--payment {
    border-color: #BFD6C7;
    background: #F6FBF8;
}

.aa-action-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 58px;
}

.aa-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #E5F3EA;
    color: #1C7545;
    font-size: 12px;
    font-weight: 900;
}

.aa-action-head h3 {
    margin: 0 0 3px;
    color: #1B2A20;
    font-size: 15px;
}

.aa-action-head p {
    margin: 0;
    color: #748078;
    font-size: 11px;
    line-height: 1.45;
}

.aa-action-card label,
.aa-payout-row label {
    display: grid;
    gap: 5px;
    color: #435248;
    font-size: 11px;
    font-weight: 700;
}

.aa-action-card .form-input,
.aa-payout-row .form-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 9px 11px;
    border-color: #D5DED8;
    border-radius: 8px;
    background: #FBFCFB;
    color: #1C2921;
    font-size: 13px;
}

.aa-action-card textarea.form-input {
    min-height: 76px;
    resize: vertical;
}

.aa-action-card .author-primary,
.aa-action-card .author-secondary {
    width: 100%;
    margin-top: auto;
}

.aa-available-note {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #E7F4EC;
}

.aa-available-note span {
    color: #52715F;
    font-size: 10px;
}

.aa-available-note strong {
    color: #175B37;
    font-size: 17px;
}

.aa-form-hint {
    color: #8A5F19;
    font-size: 11px;
    line-height: 1.4;
}

.aa-table-wrap {
    overflow-x: auto;
    border: 1px solid #E0E7E2;
    border-radius: 10px;
}

.aa-table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    font-size: 13px;
}

.aa-table th {
    padding: 10px 12px;
    background: #F1F5F2;
    color: #68766D;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.aa-table td {
    padding: 13px 12px;
    border-top: 1px solid #E5EBE7;
    color: #243229;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.aa-table tr[id] {
    scroll-margin-top: 24px;
}

.aa-table tr[id]:target td {
    background: #EAF7EF;
}

.aa-table td:first-child {
    min-width: 220px;
}

.aa-table td a {
    display: block;
    color: #1D5E3A;
    font-weight: 800;
}

.aa-table td small {
    display: block;
    margin-top: 4px;
    color: #7B877F;
}

.aa-payout-list {
    display: grid;
    gap: 10px;
}

.aa-payout-row {
    display: grid;
    grid-template-columns: 180px 130px minmax(190px, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 14px;
    border: 1px solid #DFE6E1;
    border-radius: 10px;
    background: #FFFFFF;
}

.aa-payout-amount {
    display: grid;
    gap: 4px;
}

.aa-payout-amount strong {
    color: #17281E;
    font-size: 18px;
}

.aa-payout-amount span {
    color: #758179;
    font-size: 11px;
}

.aa-payout-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.aa-payout-actions button {
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid #D1DBD4;
    border-radius: 7px;
    background: #F5F8F6;
    color: #2D3D33;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.aa-payout-actions .approve {
    border-color: #9CBCE7;
    background: #EEF5FF;
    color: #285890;
}

.aa-payout-actions .paid {
    border-color: #A8D5B9;
    background: #E8F7EE;
    color: #17693E;
}

.aa-payout-actions .rejected {
    border-color: #E5B7AD;
    background: #FCEDE9;
    color: #963929;
}

.aa-final-state {
    align-self: center;
    color: #718078;
    font-size: 11px;
    font-weight: 700;
}

.aa-author-card:focus-visible,
.aa-back-link:focus-visible,
.aa-card-detail button:focus-visible,
.aa-payout-actions button:focus-visible {
    outline: 3px solid rgba(42, 139, 83, 0.25);
    outline-offset: 2px;
}

@media (max-width: 1180px) {
    .aa-workspace {
        grid-template-columns: 290px minmax(0, 1fr);
    }
    .aa-profile-card {
        grid-template-columns: 1fr;
    }
    .aa-finance-summary {
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0;
    }
    .aa-finance-summary > div {
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    .aa-finance-summary > div:first-child {
        border-left: 0;
    }
    .aa-action-grid {
        grid-template-columns: 1fr 1fr;
    }
    .aa-action-card--payment {
        grid-column: 1 / -1;
    }
    .aa-payout-row {
        grid-template-columns: 160px 120px 1fr;
    }
    .aa-payout-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .aa-request-details {
        grid-template-columns: 1fr 1fr;
    }
    .aa-request-action-form {
        grid-template-columns: 1fr;
    }
    .aa-request-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 820px) {
    .author-admin-v2 {
        width: min(100% - 24px, 720px);
        padding-top: 20px;
        padding-bottom: 96px;
    }
    .aa-page-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .aa-overview {
        grid-template-columns: 1fr 1fr;
    }
    .aa-workspace {
        grid-template-columns: 1fr;
    }
    .aa-authors-panel {
        position: static;
    }
    .aa-author-list {
        max-height: 340px;
    }
    .aa-payment-details {
        grid-template-columns: 1fr;
    }
    .aa-finance-summary {
        grid-template-columns: 1fr;
    }
    .aa-finance-summary > div {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 0;
    }
    .aa-action-grid {
        grid-template-columns: 1fr;
    }
    .aa-action-card--payment {
        grid-column: auto;
    }
    .aa-payout-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .aa-payout-actions {
        grid-column: auto;
    }
    .aa-payout-actions button,
    .aa-action-card .author-primary,
    .aa-action-card .author-secondary {
        min-height: 44px;
    }
    .aa-tabs {
        grid-template-columns: 1fr;
    }
    .aa-payouts-intro {
        align-items: flex-start;
        flex-direction: column;
    }
    .aa-queue-counter {
        min-width: 120px;
    }
    .aa-request-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .aa-request-head > .aa-status {
        grid-column: 1 / -1;
    }
    .aa-request-details {
        grid-template-columns: 1fr 1fr;
    }
    .aa-request-actions a,
    .aa-request-actions button {
        min-height: 44px;
    }
}

@media (max-width: 520px) {
    .aa-overview {
        grid-template-columns: 1fr;
    }
    .aa-overview article {
        min-height: 96px;
    }
    .aa-profile-main,
    .aa-actions-section,
    .aa-data-section {
        padding: 16px;
    }
    .aa-profile-title-row {
        flex-direction: column;
    }
    .aa-author-card-top {
        flex-direction: column;
    }
    .aa-tab {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        padding: 9px 10px;
    }
    .aa-request-head {
        grid-template-columns: 1fr;
    }
    .aa-request-money {
        text-align: left;
    }
    .aa-request-head > .aa-status {
        grid-column: auto;
    }
    .aa-request-details {
        grid-template-columns: 1fr;
    }
    .aa-request-action-form {
        padding: 14px;
    }
    .aa-request-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .author-admin-body {
    background: #101310;
}

[data-theme="dark"] .aa-page-head h1,
[data-theme="dark"] .aa-overview strong,
[data-theme="dark"] .aa-panel-title h2,
[data-theme="dark"] .aa-section-heading span,
[data-theme="dark"] .aa-action-head h3,
[data-theme="dark"] .aa-table td,
[data-theme="dark"] .aa-payout-amount strong {
    color: #E9EFEB;
}

[data-theme="dark"] .aa-overview article,
[data-theme="dark"] .aa-authors-panel,
[data-theme="dark"] .aa-actions-section,
[data-theme="dark"] .aa-data-section,
[data-theme="dark"] .aa-action-card,
[data-theme="dark"] .aa-payout-row,
[data-theme="dark"] .aa-table {
    border-color: #303832;
    background: #181C19;
}

[data-theme="dark"] .aa-tabs {
    border-color: #303A33;
    background: #171C18;
}

[data-theme="dark"] .aa-tab.active,
[data-theme="dark"] .aa-payouts-intro,
[data-theme="dark"] .aa-request-card,
[data-theme="dark"] .aa-payout-history {
    border-color: #303A33;
    background: #1B201C;
    color: #E8EEE9;
}

[data-theme="dark"] .aa-payouts-intro h2,
[data-theme="dark"] .aa-request-person strong,
[data-theme="dark"] .aa-request-money strong,
[data-theme="dark"] .aa-request-details strong {
    color: #E9F0EB;
}

[data-theme="dark"] .aa-request-head,
[data-theme="dark"] .aa-request-details > div,
[data-theme="dark"] .aa-author-comment {
    border-color: #333D36;
    background: #202621;
}

[data-theme="dark"] .aa-author-card {
    background: #1E2420;
    color: #E2E9E4;
}

[data-theme="dark"] .aa-author-card.active {
    border-color: #4A9C6A;
    background: #20372A;
}

[data-theme="dark"] .aa-table th,
[data-theme="dark"] .aa-panel-title input,
[data-theme="dark"] .aa-action-card .form-input,
[data-theme="dark"] .aa-payout-row .form-input {
    border-color: #364038;
    background: #202621;
    color: #E8EEE9;
}

@media (prefers-reduced-motion: reduce) {
    .aa-author-card {
        transition: none;
    }
}

/* ========================================================================== */
/* БЕСИТ В НН — QUICK CITY FEED                                               */
/* ========================================================================== */
.besit-body { background:#F3F4F2; }
.besit-shell { width:min(760px,calc(100% - 32px)); margin:0 auto; padding:32px 0 88px; }
.besit-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; padding:24px 28px; border:1px solid #E1DBD5; border-radius:16px; background:#FBF9F6; }
.besit-eyebrow { display:block; margin-bottom:7px; color:#C8462E; font-size:11px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.besit-intro h1 { margin:0 0 7px; color:#1E211E; font-size:clamp(34px,6vw,54px); line-height:.98; letter-spacing:-.055em; }
.besit-intro p { max-width:530px; margin:0; color:#6C716D; font-size:14px; line-height:1.55; }
.besit-intro-mark { display:grid; flex:none; min-width:104px; padding:13px 15px; border-radius:10px; background:#252825; color:#F8FAF8; text-align:right; }
.besit-intro-mark strong { font-size:24px; line-height:1; }
.besit-intro-mark span { margin-top:5px; color:#BFC5C0; font-size:10px; }
.besit-composer { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; margin-bottom:18px; padding:16px; border:1px solid #DBDEDB; border-radius:14px; background:#FFFFFF; box-shadow:0 5px 18px rgba(33,39,34,.04); }
.besit-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.besit-composer form { min-width:0; }
.besit-composer textarea { width:100%; min-height:76px; padding:7px 5px; box-sizing:border-box; resize:vertical; border:0; outline:0; background:transparent; color:#232723; font:500 16px/1.5 inherit; }
.besit-composer textarea::placeholder { color:#969C97; }
.besit-compose-actions { display:flex; align-items:center; gap:10px; padding-top:10px; border-top:1px solid #ECEFEC; }
.besit-media-button { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border-radius:8px; color:#4A554D; font-size:12px; font-weight:800; cursor:pointer; }
.besit-media-button:hover { background:#F2F5F2; color:#C8462E; }
.besit-media-button input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.besit-media-button svg { width:19px; height:19px; fill:currentColor; }
.besit-counter { margin-left:auto; color:#929993; font-size:11px; }
.besit-counter b { color:#6C746E; }
.besit-publish { min-height:38px; padding:8px 14px; border:0; border-radius:8px; background:#C8462E; color:#FFF9F6; font:800 12px/1 inherit; cursor:pointer; }
.besit-publish:hover { background:#A93824; }
.besit-preview { position:relative; overflow:hidden; margin:8px 0 10px; border-radius:12px; background:#151715; }
.besit-preview[hidden] { display:none; }
.besit-preview img,.besit-preview video { display:block; width:100%; max-height:320px; object-fit:contain; }
.besit-preview button { position:absolute; z-index:2; top:10px; right:10px; width:32px; height:32px; border:0; border-radius:50%; background:rgba(20,22,20,.75); color:#FFF; font-size:22px; cursor:pointer; }
.besit-login-prompt { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; padding:16px 20px; border:1px solid #E2D1C9; border-radius:12px; background:#FFF6F1; color:#5C3D34; text-decoration:none; }
.besit-login-prompt span { font-size:13px; }
.besit-login-prompt strong { color:#B43B25; font-size:13px; }
.besit-feed { display:grid; gap:14px; }
.besit-card { overflow:hidden; border:1px solid #DADFDA; border-radius:14px; background:#FFFFFF; box-shadow:0 4px 16px rgba(34,42,36,.035); }
.besit-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; }
.besit-author { display:flex; align-items:center; gap:10px; min-width:0; color:#242A25; text-decoration:none; }
.besit-author img { flex:none; width:38px; height:38px; border-radius:50%; object-fit:cover; }
.besit-author span { display:grid; gap:2px; min-width:0; }
.besit-author strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.besit-author small { color:#858C86; font-size:10px; }
.besit-card-head form { flex:none; }
.besit-delete { width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:#8E958F; font-size:20px; cursor:pointer; }
.besit-delete:hover { background:#F8E9E5; color:#B33B27; }
.besit-text { padding:2px 16px 15px; color:#282D29; font-size:15px; line-height:1.55; overflow-wrap:anywhere; }
.besit-media { display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:120px; padding:14px; background:#E8EEF7; }
.besit-media img { display:block; width:auto; max-width:100%; max-height:360px; object-fit:contain; }
.besit-media video { display:block; width:100%; max-height:400px; object-fit:contain; }
.besit-reactions { display:flex; align-items:center; gap:7px; padding:11px 13px; border-top:1px solid #ECEFEC; }
.besit-react { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:7px 10px; border:0; border-radius:8px; background:transparent; color:#646D66; font:700 11px/1 inherit; cursor:pointer; }
.besit-react:hover { background:#F2F5F2; }
.besit-react svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.besit-react b { min-width:14px; font-variant-numeric:tabular-nums; }
.besit-react.active { background:#FBE9E4; color:#C54029; }
.besit-react.active svg { fill:currentColor; }
.besit-react.dislike.active { background:#ECEEF5; color:#505A78; }
.besit-empty { padding:64px 24px; border:1px dashed #CBD1CC; border-radius:14px; text-align:center; }
.besit-empty strong { display:block; margin-bottom:7px; color:#303731; font-size:19px; }
.besit-empty p { margin:0; color:#7B837D; font-size:13px; }
.besit-publish:focus-visible,.besit-media-button:focus-within,.besit-react:focus-visible,.besit-delete:focus-visible { outline:3px solid rgba(200,70,46,.22); outline-offset:2px; }
[data-theme="dark"] .besit-body { background:#111411; }
[data-theme="dark"] .besit-intro,[data-theme="dark"] .besit-composer,[data-theme="dark"] .besit-card { border-color:#333A34; background:#1B1F1B; }
[data-theme="dark"] .besit-intro h1,[data-theme="dark"] .besit-composer textarea,[data-theme="dark"] .besit-author,[data-theme="dark"] .besit-text { color:#EAF0EB; }
[data-theme="dark"] .besit-intro p,[data-theme="dark"] .besit-author small { color:#A0A9A2; }
[data-theme="dark"] .besit-compose-actions,[data-theme="dark"] .besit-reactions { border-color:#343B35; }
@media(max-width:600px){
    .besit-shell { width:min(100% - 16px,520px); padding-top:14px; }
    .besit-intro { align-items:flex-start; flex-direction:column; padding:20px; }
    .besit-intro-mark { min-width:92px; text-align:left; }
    .besit-composer { grid-template-columns:34px minmax(0,1fr); padding:12px; }
    .besit-avatar { width:34px; height:34px; }
    .besit-compose-actions { flex-wrap:wrap; }
    .besit-media-button span { display:none; }
    .besit-publish { min-height:44px; }
    .besit-login-prompt { align-items:flex-start; flex-direction:column; }
    .besit-card { border-radius:12px; }
    .besit-react { min-height:44px; }
    .besit-react span { display:none; }
}
@media(prefers-reduced-motion:reduce){.besit-publish,.besit-react,.besit-media-button{transition:none;}}

/* Registration CAPTCHA: mood recognition */
.registration-captcha { position:relative; margin:18px 0; padding:16px; overflow:hidden; border:1px solid #CFE0F6; border-radius:12px; background:#F7FAFF; }
.registration-captcha-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.registration-captcha-head>div { display:grid; gap:3px; }
.registration-captcha-head span { color:#2563EB; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.registration-captcha-head strong { color:#1E2F4D; font-size:14px; }
.registration-captcha-head button { padding:6px 9px; border:1px solid #BDD2EF; border-radius:7px; background:#FFFFFF; color:#41658F; font-size:11px; font-weight:700; cursor:pointer; }
.registration-captcha-head button:hover { border-color:#84AEE7; color:#1D4ED8; }
.registration-captcha-head button:disabled { opacity:.5; cursor:wait; }
.registration-captcha-body { display:grid; grid-template-columns:92px minmax(0,1fr); gap:14px; align-items:center; }
.registration-captcha-picture { display:flex; align-items:center; justify-content:center; width:92px; height:92px; border:1px solid #D5E3F5; border-radius:12px; background:#FFFFFF; box-shadow:0 4px 12px rgba(37,99,235,.06); }
.registration-captcha-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.registration-captcha-options label { display:block; cursor:pointer; }
.registration-captcha-options input { position:absolute; opacity:0; pointer-events:none; }
.registration-captcha-options span { display:flex; align-items:center; justify-content:center; min-height:38px; padding:7px 9px; box-sizing:border-box; border:1px solid #D5E1F1; border-radius:8px; background:#FFFFFF; color:#425675; font-size:12px; font-weight:700; text-align:center; transition:border-color .15s,background .15s,color .15s; }
.registration-captcha-options label:hover span { border-color:#91B4E5; background:#EFF6FF; }
.registration-captcha-options input:checked+span { border-color:#2563EB; background:#E7F0FF; color:#1D4ED8; box-shadow:0 0 0 2px rgba(37,99,235,.1); }
.registration-captcha-options input:focus-visible+span { outline:3px solid rgba(37,99,235,.2); outline-offset:2px; }
.registration-captcha-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
[data-theme="dark"] .registration-captcha { border-color:#304967; background:#17243A; }
[data-theme="dark"] .registration-captcha-head strong { color:#E5EEFC; }
[data-theme="dark"] .registration-captcha-picture,[data-theme="dark"] .registration-captcha-options span,[data-theme="dark"] .registration-captcha-head button { border-color:#38516F; background:#202F47; color:#C6D7EE; }
@media(max-width:480px){.registration-captcha-body{grid-template-columns:1fr}.registration-captcha-picture{width:100%;height:88px}.registration-captcha-options{grid-template-columns:1fr 1fr}}

/* White-blue visual alignment with the main site */
.besit-body { background:#F4F7FB; }
.besit-shell { width:min(800px,calc(100% - 32px)); padding-top:24px; }
.besit-intro { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:16px; margin-bottom:16px; padding:20px 22px; border:1px solid #D9E4F2; border-radius:14px; background:#FFFFFF; box-shadow:0 5px 20px rgba(37,99,235,.05); }
.besit-intro-icon { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:12px; background:#EAF2FF; color:#2563EB; }
.besit-intro-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.besit-intro-copy { min-width:0; }
.besit-eyebrow { margin-bottom:5px; color:#2563EB; font-size:10px; }
.besit-intro h1 { margin-bottom:4px; color:#14213D; font-size:clamp(28px,5vw,42px); line-height:1.05; }
.besit-intro p { max-width:560px; color:#64748B; font-size:13px; }
.besit-intro-mark { min-width:82px; padding:10px 12px; border:1px solid #C9DDFC; border-radius:10px; background:#EFF6FF; color:#1D4ED8; text-align:center; }
.besit-intro-mark strong { font-size:21px; }
.besit-intro-mark span { margin-top:3px; color:#5274A9; }
.besit-composer { padding:14px; border-color:#D7E2F0; border-radius:13px; box-shadow:0 5px 18px rgba(30,64,175,.045); }
.besit-composer:focus-within { border-color:#80A9EC; box-shadow:0 0 0 3px rgba(37,99,235,.09),0 5px 18px rgba(30,64,175,.045); }
.besit-avatar { box-shadow:0 0 0 2px #E5EEFB; }
.besit-composer textarea { min-height:64px; color:#17233B; }
.besit-composer textarea::placeholder { color:#94A3B8; }
.besit-compose-actions { border-color:#E6EDF7; }
.besit-media-button { color:#426188; }
.besit-media-button:hover { background:#EFF6FF; color:#2563EB; }
.besit-counter b { color:#476488; }
.besit-publish { background:linear-gradient(135deg,#10B981 0%,#059669 100%); color:#FFFFFF; box-shadow:0 4px 14px rgba(16,185,129,.25),inset 0 1px 0 rgba(255,255,255,.22); }
.besit-publish:hover { background:linear-gradient(135deg,#34D399 0%,#10B981 100%); box-shadow:0 7px 18px rgba(16,185,129,.32); }
.besit-preview { background:#E9EFF8; }
.besit-login-prompt { border-color:#CADDFC; background:#EFF6FF; color:#405B84; }
.besit-login-prompt strong { color:#1D4ED8; }
.besit-feed { gap:12px; }
.besit-card { border-color:#D9E3F0; border-radius:13px; box-shadow:0 4px 15px rgba(30,64,175,.035); }
.besit-author { color:#1D2A44; }
.besit-author img { box-shadow:0 0 0 2px #E5EEFB; }
.besit-author small { color:#7890B1; }
.besit-delete:hover { background:#EEF4FD; color:#2563EB; }
.besit-text { color:#23314A; }
.besit-media { background:#E8EEF7; }
.besit-reactions { border-color:#E5EDF7; }
.besit-react { color:#607793; }
.besit-react:hover { background:#EFF6FF; color:#2563EB; }
.besit-react.active { background:#E8F1FF; color:#2563EB; }
.besit-react.dislike.active { background:#EDF1F8; color:#475569; }
.besit-empty { border-color:#BFD3ED; background:#FAFCFF; }
.besit-empty strong { color:#1E3154; }
.besit-empty p { color:#7186A4; }
.besit-publish:focus-visible,.besit-media-button:focus-within,.besit-react:focus-visible,.besit-delete:focus-visible { outline-color:rgba(37,99,235,.25); }
.besit-hub-header { margin-bottom:16px; }
.besit-hub-header .hub-header-content { max-width:470px; }
.besit-hub-header .hub-header-actions { flex:none; }
[data-theme="dark"] .besit-body { background:#0F172A; }
[data-theme="dark"] .besit-intro,[data-theme="dark"] .besit-composer,[data-theme="dark"] .besit-card { border-color:#2B3B55; background:#182235; }
[data-theme="dark"] .besit-intro-icon { background:#21375D; color:#7EAAFF; }
[data-theme="dark"] .besit-intro h1,[data-theme="dark"] .besit-composer textarea,[data-theme="dark"] .besit-author,[data-theme="dark"] .besit-text { color:#E8EFFB; }
[data-theme="dark"] .besit-intro-mark { border-color:#35517B; background:#1E3152; color:#9EBEFF; }
[data-theme="dark"] .besit-media { background:#101827; }
@media(max-width:600px){
    .besit-shell { width:min(100% - 16px,540px); padding-top:12px; }
    .besit-intro { grid-template-columns:42px minmax(0,1fr); gap:12px; padding:16px; }
    .besit-intro-icon { width:42px; height:42px; }
    .besit-intro-icon svg { width:23px; height:23px; }
    .besit-intro-mark { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:5px; width:100%; box-sizing:border-box; text-align:center; }
    .besit-intro-mark span { margin:0; }
    .besit-composer { grid-template-columns:36px minmax(0,1fr); }
    .besit-media { min-height:90px; padding:8px; }
    .besit-media img,.besit-media video { max-height:300px; }
    .besit-hub-header .hub-header-title { white-space:normal; }
}

/* ============================================================
   ГЛАВНОЕ (feed) — единый стиль карточек из всех разделов
   ============================================================ */
.feed-page { max-width: 800px; }

/* ---------- Шапка главной ---------- */
.home-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 2.4rem 2.2rem 1.6rem;
    margin-bottom: 1.1rem;
    color: #fff;
    background:
        radial-gradient(120% 120% at 88% -15%, #7DD3FC 0%, rgba(125,211,252,0) 52%),
        radial-gradient(95% 130% at -12% 115%, #172554 0%, rgba(23,37,84,0) 62%),
        radial-gradient(90% 100% at 55% 125%, #4F46E5 0%, rgba(79,70,229,0) 60%),
        linear-gradient(125deg, #1E3A8A 0%, #1D4ED8 34%, #3B82F6 72%, #60A5FA 100%);
    background-size: 160% 160%;
    animation: homeHeroBg 14s ease-in-out infinite;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 30px 70px -26px rgba(37, 99, 235, 0.8),
        0 2px 0 0 rgba(255,255,255,0.16) inset,
        0 -30px 60px -30px rgba(15,23,42,0.45) inset;
}
@keyframes homeHeroBg {
    0%, 100% { background-position: 0% 40%; }
    50% { background-position: 100% 60%; }
}
.home-hero-shine {
    position: absolute;
    top: -60%; left: -30%;
    width: 45%; height: 220%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 100%);
    animation: homeShine 7s ease-in-out infinite;
}
@keyframes homeShine {
    0% { left: -45%; }
    55%, 100% { left: 130%; }
}
.home-hero-deco { position: absolute; inset: 0; pointer-events: none; }
.home-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.55;
}
.home-hero-orb--a {
    width: 260px; height: 260px;
    right: -70px; top: -110px;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0) 70%);
    animation: homeFloat 9s ease-in-out infinite;
}
.home-hero-orb--b {
    width: 180px; height: 180px;
    left: 32%; bottom: -120px;
    background: radial-gradient(circle at 50% 40%, rgba(147,197,253,0.6) 0%, rgba(147,197,253,0) 68%);
    animation: homeFloat 11s ease-in-out infinite reverse;
}
.home-hero-orb--c {
    width: 120px; height: 120px;
    right: 26%; top: -50px;
    background: radial-gradient(circle at 40% 40%, rgba(253,230,138,0.5) 0%, rgba(253,230,138,0) 68%);
    animation: homeFloat 13s ease-in-out infinite;
    animation-delay: -4s;
}
.home-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%);
}
@keyframes homeFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(-14px, 16px, 0) scale(1.07); }
}

.home-hero-body { position: relative; z-index: 2; }
.home-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.85rem 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.32);
    box-shadow: 0 4px 14px -6px rgba(15,23,42,0.5), 0 1px 0 rgba(255,255,255,0.25) inset;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
}
.home-hero-title {
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.045em;
    margin-bottom: 0.7rem;
    text-shadow: 0 2px 20px rgba(15,23,42,0.18);
}
.home-hero-title em {
    font-style: normal;
    background: linear-gradient(120deg, #FDE68A 0%, #FFFFFF 55%, #BFDBFE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.home-hero-dot { color: #FDE68A; }
.home-hero-desc {
    font-size: 1rem;
    line-height: 1.62;
    color: rgba(255,255,255,0.88);
    max-width: 540px;
    margin-bottom: 1.35rem;
}

.home-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.72rem 1.3rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}
.home-btn--light {
    background: linear-gradient(180deg, #FFFFFF 0%, #EAF2FF 100%);
    color: #1D4ED8;
    box-shadow: 0 12px 26px -10px rgba(15,23,42,0.55), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.home-btn--light:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(15,23,42,0.6); }
.home-btn--light:active { transform: translateY(0); }
.home-btn--ghost {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.home-btn--ghost:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.5); transform: translateY(-2px); }

/* ---------- Плитки разделов ---------- */
.home-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.6rem;
}
.home-tile {
    --tile-accent: #2563EB;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    overflow: hidden;
    transition: var(--transition);
}
.home-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--tile-accent) 14%, transparent) 0%, transparent 62%);
    opacity: 0;
    transition: var(--transition);
}
.home-tile:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tile-accent) 45%, var(--border-color));
    box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--tile-accent) 70%, transparent);
}
.home-tile:hover::after { opacity: 1; }
.home-tile-ico {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 12px;
    color: var(--tile-accent);
    background: color-mix(in srgb, var(--tile-accent) 12%, transparent);
    transition: var(--transition);
}
.home-tile:hover .home-tile-ico { transform: scale(1.08) rotate(-4deg); }
.home-tile-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-tile-label { font-size: 0.9rem; font-weight: 700; line-height: 1.25; color: var(--text-main); letter-spacing: -0.01em; }
.home-tile-hint {
    font-size: 0.73rem;
    line-height: 1.3;
    color: var(--text-muted);
    /* текст подсказки переносится целиком — ничего не обрезаем */
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.home-tile-count {
    position: relative;
    z-index: 1;
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--tile-accent);
    background: color-mix(in srgb, var(--tile-accent) 12%, transparent);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}
.home-tile--people    { --tile-accent: #2563EB; }
.home-tile--posts     { --tile-accent: #0EA5E9; }
.home-tile--besit     { --tile-accent: #EF4444; }
.home-tile--listings  { --tile-accent: #10B981; }
.home-tile--afisha    { --tile-accent: #8B5CF6; }
.home-tile--walks     { --tile-accent: #F59E0B; }
.home-tile--meetups   { --tile-accent: #EC4899; }
.home-tile--giveaways { --tile-accent: #14B8A6; }

/* ---------- Заголовок потока ---------- */
.home-stream-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}
.home-stream-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: 0 10px 20px -10px rgba(37,99,235,0.8);
}
.home-stream-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-main); }
.home-stream-sub { font-size: 0.83rem; color: var(--text-muted); margin-top: 2px; }

/* Тёмная тема для главной */
[data-theme="dark"] .home-hero {
    background:
        radial-gradient(120% 120% at 85% -10%, #1E40AF 0%, rgba(30,64,175,0) 55%),
        radial-gradient(100% 120% at -10% 110%, #0B1220 0%, rgba(11,18,32,0) 60%),
        linear-gradient(135deg, #111C34 0%, #172554 50%, #1E3A8A 100%);
    box-shadow: 0 26px 60px -30px rgba(0,0,0,0.9);
}
[data-theme="dark"] .home-tile { background: var(--bg-card); }
[data-theme="dark"] .home-btn--light { background: #E8EEFB; color: #14295C; }

/* Адаптив главной */
@media (max-width: 900px) {
    .home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .home-hero { padding: 1.8rem 1.35rem 1.3rem; border-radius: 22px; }
    .home-hero-title { font-size: 2.1rem; }
    .home-hero-desc { font-size: 0.93rem; }
    .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-btn { flex: 1; justify-content: center; }
    .home-stream-title { font-size: 1.15rem; }
}
@media (max-width: 420px) {
    .home-hero-title { font-size: 1.8rem; }
    .home-tile { padding: 0.7rem; }
    .home-tile-ico { width: 34px; height: 34px; border-radius: 10px; }
    .home-tile-hint { font-size: 0.7rem; }
}
.feed-new-badge {
    position: sticky;
    top: 74px;
    z-index: 30;
    margin: 0 auto 0.9rem;
    width: max-content;
    background: var(--primary-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(37,99,235,0.35);
    animation: feedBounce 1.4s ease-in-out infinite;
}
@keyframes feedBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.feed-list { display: flex; flex-direction: column; gap: 1.25rem; }

.feed-card {
    --feed-accent: #2563EB;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}
.feed-card::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--feed-accent) 0%, rgba(255,255,255,0) 78%);
    opacity: 0.9;
}
.feed-card:hover {
    box-shadow: 0 18px 38px -22px rgba(15, 23, 42, 0.28);
    transform: translateY(-3px);
    border-color: var(--border-hover);
}
.feed-card--besit { --feed-accent: #EF4444; }
.feed-card--posts { --feed-accent: #2563EB; }
.feed-card--listings { --feed-accent: #10B981; }
.feed-card--afisha { --feed-accent: #8B5CF6; }
.feed-card--hidden { display: none; }
.feed-card--new { animation: feedSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes feedSlideIn {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: translateY(0); }
}

.feed-card-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.15rem 1.4rem 0.6rem;
}
.feed-card-ava {
    display: block;
    flex-shrink: 0;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--feed-accent) 0%, rgba(148,163,184,0.35) 100%);
    transition: var(--transition);
}
.feed-card-ava:hover { transform: scale(1.05); }
.feed-card-ava img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-card);
    display: block;
}
.feed-card-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feed-card-name {
    font-weight: 700;
    font-size: 0.97rem;
    letter-spacing: -0.01em;
    color: var(--text-main);
    text-decoration: none;
}
.feed-card-name:hover { color: var(--primary); }
.feed-card-sub { display: flex; align-items: center; gap: 0.5rem; font-size: 0.79rem; color: var(--text-muted); }
.feed-card-time::before { content: '·'; margin-right: 0.4rem; opacity: 0.6; }

.feed-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.feed-badge--posts { background: var(--primary-light); color: var(--primary); }
.feed-badge--besit { background: #FEE2E2; color: #B91C1C; }
.feed-badge--listings { background: #D1FAE5; color: #047857; }
.feed-badge--afisha { background: #EDE9FE; color: #6D28D9; }

.feed-card-open {
    margin-left: auto;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}
.feed-card-open:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }

.feed-card-content { padding: 0.4rem 1.4rem 1rem; }
.feed-card-title {
    display: block;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    text-decoration: none;
    line-height: 1.32;
    margin-bottom: 0.55rem;
}
.feed-card-title:hover { color: var(--primary); }
.feed-card-media {
    display: block;
    margin: 0 0 0.85rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.feed-card-media img, .feed-card-media video {
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain; /* показываем картинку целиком, без обрезки сверху/снизу */
    display: block;
    margin: 0 auto;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.feed-card-media:hover img { transform: scale(1.01); }
.feed-card-text { font-size: 0.96rem; line-height: 1.65; color: var(--text-main); word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.feed-card-text.feed-card-text--full { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.feed-card-text--full { font-size: 1.02rem; }

.feed-card-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.85rem; }
.feed-chip-info {
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
}
.feed-chip-price {
    color: #047857;
    background: #ECFDF5;
    border-color: #A7F3D0;
    font-weight: 800;
}

.feed-card-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(248,250,252,0.6) 0%, var(--bg-secondary) 100%);
    flex-wrap: wrap;
}
.feed-act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}
.feed-act:hover { background: var(--primary-light); color: var(--primary); }
.feed-act.active { color: var(--primary); background: var(--primary-light); }
.feed-act.feed-react--dis.active { color: var(--danger); background: #FEE2E2; }
.feed-act b { font-weight: 800; }

.feed-open-btn {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1.5px solid var(--primary);
    transition: var(--transition);
    white-space: nowrap;
}
.feed-open-btn:hover { background: var(--primary); color: #fff; box-shadow: 0 6px 16px -6px rgba(37,99,235,0.6); transform: translateY(-1px); }

.feed-comments {
    padding: 1rem 1.4rem 1.2rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}
.feed-comments-inner { display: flex; flex-direction: column; gap: 0.6rem; }
.feed-comments-head { font-weight: 800; font-size: 0.92rem; color: var(--text-main); }
.feed-comments-loading { color: var(--text-muted); font-size: 0.88rem; padding: 0.5rem 0; }
.feed-comment-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.feed-comment-form textarea { min-height: 44px; resize: vertical; }
.feed-comment-form-actions { display: flex; justify-content: flex-end; }
.feed-comment-send {
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}
.feed-comment-send:hover { box-shadow: 0 4px 14px rgba(37,99,235,0.3); transform: translateY(-1px); }
.feed-comment-send:disabled { opacity: 0.6; cursor: wait; }
.feed-comment-login {
    font-size: 0.88rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.feed-comment-login:hover { text-decoration: underline; }

.feed-empty {
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-lg);
    padding: 3rem 1.5rem;
    box-shadow: var(--shadow-sm);
}
.feed-empty-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.feed-empty-title { font-size: 1.2rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.4rem; }
.feed-empty-desc { color: var(--text-muted); font-size: 0.93rem; max-width: 460px; margin: 0 auto 1.2rem; line-height: 1.6; }
.feed-empty-actions { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }
.feed-empty-btn {
    background: var(--primary-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    text-decoration: none;
    transition: var(--transition);
}
.feed-empty-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37,99,235,0.3); }

.feed-more-wrap { display: flex; justify-content: center; margin: 1.6rem 0 0.4rem; }
.feed-more-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.7rem 1.8rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.feed-more-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(37,99,235,0.65);
}
.feed-more-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

/* Тёмная тема */
[data-theme="dark"] .feed-card-actions { background: rgba(255,255,255,0.02); }
[data-theme="dark"] .feed-chip-price { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.35); color: #6EE7B7; }
[data-theme="dark"] .feed-card:hover { box-shadow: 0 18px 38px -22px rgba(0,0,0,0.8); }

@media (max-width: 640px) {
    .feed-hero { padding: 1.4rem 1.2rem 1.3rem; }
    .feed-hero-title { font-size: 1.6rem; }
    .feed-hero-desc { font-size: 0.9rem; }
    .feed-hero-live { top: 1rem; right: 1rem; }
    .feed-list { gap: 1rem; }
    .feed-card-head, .feed-card-content, .feed-card-actions, .feed-comments { padding-left: 1rem; padding-right: 1rem; }
    .feed-card-title { font-size: 1.1rem; }
    .feed-open-btn { margin-left: 0; width: 100%; text-align: center; }
    .feed-new-badge { top: 64px; }
}