:root {
            --primary: #1A73E8;
            --primary-dark: #1557B0;
            --primary-light: #4A90E8;
            --primary-glow: rgba(26,115,232,0.25);
            --bg: #F0F2F5;
            --bg-secondary: #FFFFFF;
            --bg-card: #FFFFFF;
            --bg-card-hover: #F0F2F5;
            --bg-input: #E8ECF0;
            --bg-input-focus: #DCE0E5;
            --text: #1A1A2E;
            --text-secondary: #5A5A7A;
            --text-muted: #9A9ABF;
            --border: #E4E6EB;
            --border-hover: #C0C4D0;
            --danger: #E53935;
            --gold: #F5A623;
            --success: #34A853;
            --premium: #FF6B00;
            --premium-glow: rgba(255,107,0,0.3);
            --shadow: 0 2px 8px rgba(0,0,0,0.06);
            --shadow-hover: 0 8px 30px rgba(0,0,0,0.08);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-full: 50px;
            --header-height: 64px;
            --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
            --transition-bounce: 0.4s cubic-bezier(0.34,1.56,0.64,1);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            line-height: 1.6;
            transition: background var(--transition), color var(--transition);
        }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
        
        .header {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            padding: 0 24px;
            height: var(--header-height);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 40;
            backdrop-filter: blur(12px);
            gap: 16px;
            transition: all var(--transition);
        }
        .header .logo { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
        .header .logo i { color: var(--primary); }
        .header .logo span { background: linear-gradient(135deg, var(--primary), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .header .search { flex: 1; max-width: 480px; display: flex; align-items: center; background: var(--bg-input); border-radius: var(--radius-full); padding: 0 18px; border: 2px solid transparent; transition: all var(--transition); }
        .header .search:focus-within { border-color: var(--primary); background: var(--bg-input-focus); }
        .header .search input { border: none; background: transparent; padding: 10px 14px; font-size: 14px; color: var(--text); width: 100%; outline: none; font-family: inherit; }
        .header .search input::placeholder { color: var(--text-muted); }
        .header .search i { color: var(--text-muted); }
        .header .right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        .header .right .icon-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; transition: all var(--transition); font-size: 18px; position: relative; }
        .header .right .icon-btn:hover { background: var(--bg-card-hover); color: var(--text); }
        .header .right .icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--danger); border-radius: 50%; border: 2px solid var(--bg-secondary); display: none; }
        .header .right .icon-btn .dot.show { display: block; }
        .header .right .icon-btn .notif-count { position: absolute; top: -5px; right: -5px; background: var(--danger); color: white; border-radius: 50%; padding: 2px 6px; font-size: 9px; font-weight: 700; display: none; min-width: 18px; text-align: center; line-height: 1.4; }
        .header .right .icon-btn .notif-count.show { display: block; }
        .coins { display: flex; align-items: center; gap: 6px; background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.2); padding: 4px 14px 4px 10px; border-radius: var(--radius-full); font-weight: 700; font-size: 13px; color: var(--gold); cursor: pointer; transition: all var(--transition); }
        .coins:hover { background: rgba(245,166,35,0.18); transform: scale(1.02); }
        .coins i { color: var(--gold); }
        .header .right .user-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--primary); object-fit: cover; cursor: pointer; transition: all var(--transition); flex-shrink: 0; position: relative; }
        .header .right .user-avatar .premium-badge-header { position: absolute; bottom: -2px; right: -2px; background: var(--premium); color: white; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; display: none; align-items: center; justify-content: center; border: 2px solid var(--bg-secondary); box-shadow: 0 0 20px var(--premium-glow); animation: premiumPulse 2s ease-in-out infinite; }
        .header .right .user-avatar .premium-badge-header.show { display: flex; }
        @keyframes premiumPulse { 0%,100% { box-shadow: 0 0 10px var(--premium-glow); } 50% { box-shadow: 0 0 30px var(--premium-glow); } }
        .hamburger { display: none; font-size: 22px; color: var(--text); padding: 4px 8px; background: none; border: none; cursor: pointer; }
        
        .main-area { display: flex; gap: 20px; padding: 16px 24px 80px; max-width: 1360px; margin: 0 auto; min-height: calc(100vh - var(--header-height)); }
        .sidebar { width: 220px; flex-shrink: 0; padding: 20px 12px; background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border); height: fit-content; position: sticky; top: calc(var(--header-height) + 16px); transition: all var(--transition); }
        .sidebar .logo { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
        .sidebar .logo i { color: var(--primary); }
        .sidebar .logo span { background: linear-gradient(135deg, var(--primary), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .sidebar .nav-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); padding: 8px 12px 4px; }
        .sidebar .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; border: none; width: 100%; cursor: pointer; font-size: 14px; font-weight: 500; font-family: inherit; transition: all var(--transition); text-align: left; }
        .sidebar .nav-item:hover { background: var(--bg-card-hover); color: var(--text); }
        .sidebar .nav-item.active { background: var(--primary); color: white; box-shadow: 0 4px 16px var(--primary-glow); }
        .sidebar .nav-item i { width: 20px; text-align: center; }
        .sidebar .nav-item .badge { margin-left: auto; background: var(--danger); color: white; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full); min-width: 18px; text-align: center; display: none; }
        .sidebar .nav-item .badge.show { display: block; }
        .sidebar .nav-item .badge.gold { background: var(--gold); color: #1A1A2E; }
        .sidebar .divider { height: 1px; background: var(--border); margin: 8px 12px; }
        
        .center { flex: 1; min-width: 0; max-width: 820px; }
        .right-col { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
        
        .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); }
        .card:hover { border-color: var(--border-hover); }
        .card .card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
        .card .card-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
        .card .card-title i { color: var(--primary); }
        .card .card-body { padding: 16px 20px; }
        
        .hero-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 20px; position: relative; overflow: hidden; }
        .hero-section::before { content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px; background: radial-gradient(circle, var(--primary-glow), transparent 70%); border-radius: 50%; pointer-events: none; opacity: 0.4; }
        .hero-section .greeting { font-size: 26px; font-weight: 800; position: relative; z-index: 1; }
        .hero-section .greeting span { color: var(--primary); }
        .hero-section .sub-greeting { color: var(--text-secondary); font-size: 14px; margin-top: 2px; position: relative; z-index: 1; }
        .hero-section .stats { display: flex; gap: 28px; margin-top: 14px; position: relative; z-index: 1; flex-wrap: wrap; }
        .hero-section .stats .stat { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-secondary); }
        .hero-section .stats .stat .num { font-weight: 700; color: var(--text); font-size: 18px; }
        .hero-section .stats .stat .premium-badge-stat { background: var(--premium); color: white; padding: 2px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; }
        
        .quick-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
        .quick-action { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 8px; text-align: center; cursor: pointer; transition: all var(--transition-bounce); }
        .quick-action:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
        .quick-action .icon { font-size: 26px; display: block; }
        .quick-action .label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
        
        .create-post-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 18px; }
        .create-post-container .post-input-area { display: flex; gap: 12px; align-items: flex-start; }
        .create-post-container .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); flex-shrink: 0; position: relative; }
        .create-post-container .avatar .premium-badge-small { position: absolute; bottom: -2px; right: -2px; background: var(--premium); color: white; border-radius: 50%; width: 16px; height: 16px; font-size: 8px; display: none; align-items: center; justify-content: center; border: 2px solid var(--bg-card); box-shadow: 0 0 15px var(--premium-glow); animation: premiumPulse 2s ease-in-out infinite; }
        .create-post-container .avatar .premium-badge-small.show { display: flex; }
        .create-post-container .post-input-wrapper { flex: 1; }
        .create-post-container .post-input-wrapper textarea { width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text); font-size: 14px; font-family: inherit; resize: vertical; min-height: 60px; outline: none; transition: all var(--transition); }
        .create-post-container .post-input-wrapper textarea:focus { border-color: var(--primary); background: var(--bg-input-focus); }
        .create-post-container .post-actions-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 8px; }
        .create-post-container .post-actions-bar .media-buttons { display: flex; gap: 6px; }
        .create-post-container .post-actions-bar .media-buttons button { padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; font-size: 12px; font-family: inherit; transition: all var(--transition); }
        .create-post-container .post-actions-bar .media-buttons button:hover { background: var(--bg-card-hover); border-color: var(--primary); }
        .create-post-container .btn-post { padding: 8px 24px; background: var(--primary); color: white; border: none; border-radius: var(--radius-full); font-weight: 700; font-size: 14px; cursor: pointer; transition: all var(--transition); font-family: inherit; }
        .create-post-container .btn-post:hover { background: var(--primary-dark); transform: scale(1.02); }
        
        .post-premium { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; transition: all var(--transition); }
        .post-premium:hover { border-color: var(--border-hover); box-shadow: var(--shadow-hover); }
        .post-premium .post-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px 6px; cursor: pointer; }
        .post-premium .post-header .avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; position: relative; }
        .post-premium .post-header .premium-badge { position: absolute; bottom: -2px; right: -2px; background: var(--premium); color: white; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-card); box-shadow: 0 0 15px var(--premium-glow); animation: premiumPulse 2s ease-in-out infinite; }
        .post-premium .post-header .info .name { font-weight: 700; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; }
        .post-premium .post-header .info .name .premium-icon { color: var(--premium); font-size: 14px; animation: premiumPulse 2s ease-in-out infinite; }
        .post-premium .post-header .info .time { font-size: 12px; color: var(--text-muted); }
        .post-premium .post-content { padding: 6px 20px 12px; }
        .post-premium .post-content .text { font-size: 15px; line-height: 1.7; word-wrap: break-word; }
        .post-premium .post-content .media { margin-top: 10px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
        .post-premium .post-content .media img { width: 100%; max-height: 500px; object-fit: cover; border-radius: var(--radius-sm); transition: all var(--transition); cursor: pointer; }
        .post-premium .post-content .media img:hover { transform: scale(1.01); filter: brightness(0.95); }
        .post-premium .post-content .media video { width: 100%; max-height: 500px; border-radius: var(--radius-sm); background: #000; }
        .post-premium .post-actions { display: flex; padding: 8px 12px; border-top: 1px solid var(--border); gap: 4px; }
        .post-premium .post-actions button { flex: 1; padding: 8px 0; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; color: var(--text-secondary); transition: all var(--transition); display: flex; align-items: center; justify-content: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; }
        .post-premium .post-actions button:hover { background: var(--bg-card-hover); color: var(--text); }
        .post-premium .post-actions button.liked { color: var(--danger); }
        .post-premium .post-actions button.liked i { animation: pulse 0.3s ease; }
        
        .filter-buttons { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
        .btn-filter { padding: 6px 18px; border: 2px solid var(--border); border-radius: var(--radius-full); background: transparent; color: var(--text-secondary); font-weight: 600; font-size: 13px; cursor: pointer; transition: all var(--transition); font-family: inherit; }
        .btn-filter:hover { border-color: var(--primary); color: var(--text); }
        .btn-filter.active { background: var(--primary); border-color: var(--primary); color: white; }
        
        .widget-item { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); }
        .widget-item:hover { background: var(--bg-card-hover); }
        .widget-item .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; position: relative; }
        .widget-item .avatar .premium-badge { position: absolute; bottom: -2px; right: -2px; background: var(--premium); color: white; border-radius: 50%; width: 14px; height: 14px; font-size: 8px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-card); box-shadow: 0 0 15px var(--premium-glow); animation: premiumPulse 2s ease-in-out infinite; }
        .widget-item .info { flex: 1; min-width: 0; }
        .widget-item .info .name { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
        .widget-item .info .name .premium-icon { color: var(--premium); font-size: 12px; animation: premiumPulse 2s ease-in-out infinite; }
        .widget-item .info .desc { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .widget-item .btn-follow { padding: 4px 14px; border-radius: var(--radius-full); border: 2px solid var(--primary); background: transparent; color: var(--primary); font-weight: 600; font-size: 12px; cursor: pointer; transition: all var(--transition); font-family: inherit; flex-shrink: 0; }
        .widget-item .btn-follow:hover { background: var(--primary); color: white; }
        .widget-item .btn-follow.accepted { background: var(--success); color: white; border-color: var(--success); }
        .widget-item .btn-follow.pending { background: var(--gold); color: white; border-color: var(--gold); }
        .widget-item .btn-follow.blocked { background: var(--danger); color: white; border-color: var(--danger); }
        
        .btn-follow { padding: 6px 16px; border-radius: var(--radius-full); border: 2px solid var(--border); background: transparent; color: var(--text-secondary); font-weight: 600; font-size: 13px; cursor: pointer; transition: all var(--transition); font-family: inherit; }
        .btn-follow:hover { border-color: var(--primary); color: var(--text); }
        .btn-follow.primary { background: var(--primary); color: white; border-color: var(--primary); }
        .btn-follow.success { background: var(--success); color: white; border-color: var(--success); }
        .btn-follow.danger { background: var(--danger); color: white; border-color: var(--danger); }
        .btn-follow.gold { background: var(--gold); color: #1A1A2E; border-color: var(--gold); }
        .btn-follow.premium { background: var(--premium); color: white; border-color: var(--premium); box-shadow: 0 0 20px var(--premium-glow); }
        
        /* ============================================================
   РАЗДЕЛ СООБЩЕНИЙ - ПИЗДАТЫЙ СТИЛЬ
   ============================================================ */

/* КОНТЕЙНЕР ЧАТА */
.chat-container {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 16px;
    box-shadow: var(--shadow-hover);
    display: flex;
    flex-direction: column;
    max-height: 600px;
    height: 600px;
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.chat-container:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-hover);
}

/* ХЕДЕР ЧАТА */
.chat-container .chat-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-secondary);
    flex-shrink: 0;
    transition: all var(--transition);
}

.chat-container .chat-header .avatar-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.chat-container .chat-header .avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    transition: all var(--transition);
}

.chat-container .chat-header .avatar-wrapper img:hover {
    transform: scale(1.05);
    border-color: var(--primary-dark);
}

.chat-container .chat-header .avatar-wrapper .online-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
    background: var(--text-muted);
}

.chat-container .chat-header .avatar-wrapper .online-status.online {
    background: var(--success);
    box-shadow: 0 0 12px rgba(52,168,83,0.4);
    animation: pulse 2s ease-in-out infinite;
}

.chat-container .chat-header .chat-info {
    flex: 1;
    min-width: 0;
}

.chat-container .chat-header .chat-info .name {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-container .chat-header .chat-info .name .premium-icon {
    color: var(--premium);
    font-size: 14px;
    animation: premiumPulse 2s ease-in-out infinite;
}

.chat-container .chat-header .chat-info .status {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-container .chat-header .chat-info .status .typing-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.chat-container .chat-header .chat-info .status .typing-dots span {
    width: 5px;
    height: 5px;
    background: var(--primary);
    border-radius: 50%;
    animation: typingBounce 1.2s infinite;
}

.chat-container .chat-header .chat-info .status .typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-container .chat-header .chat-info .status .typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.chat-container .chat-header .chat-actions {
    display: flex;
    gap: 4px;
}

.chat-container .chat-header .chat-actions button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-container .chat-header .chat-actions button:hover {
    background: var(--bg-card-hover);
    color: var(--text);
    transform: scale(1.05);
}

.chat-container .chat-header .chat-actions button:active {
    transform: scale(0.9);
}

/* СООБЩЕНИЯ */
.chat-container .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg);
}

.chat-container .chat-messages::-webkit-scrollbar {
    width: 4px;
}

.chat-container .chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-container .chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

.chat-container .chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* СООБЩЕНИЕ */
.chat-container .chat-message {
    display: flex;
    animation: messageSlide 0.3s ease;
    max-width: 80%;
}

.chat-container .chat-message.sent {
    align-self: flex-end;
}

.chat-container .chat-message.received {
    align-self: flex-start;
}

.chat-container .chat-message .bubble {
    padding: 10px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
    transition: all 0.2s;
}

.chat-container .chat-message.sent .bubble {
    background: var(--primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-container .chat-message.sent .bubble:hover {
    background: var(--primary-dark);
}

.chat-container .chat-message.received .bubble {
    background: var(--bg-card-hover);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

.chat-container .chat-message.received .bubble:hover {
    background: var(--bg-input);
}

.chat-container .chat-message .bubble .time {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: right;
    opacity: 0.7;
}

.chat-container .chat-message.sent .bubble .time {
    color: rgba(255,255,255,0.6);
}

.chat-container .chat-message .bubble img {
    max-width: 200px;
    border-radius: 8px;
    margin-top: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.chat-container .chat-message .bubble img:hover {
    transform: scale(1.02);
}

.chat-container .chat-message .bubble video {
    max-width: 200px;
    border-radius: 8px;
    margin-top: 4px;
    background: #000;
}

/* ГОЛОСОВОЕ СООБЩЕНИЕ */
.chat-container .chat-message .bubble .voice-message {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    padding: 6px 12px 6px 8px;
    border-radius: 12px;
    min-width: 150px;
    transition: all 0.3s;
}

.chat-container .chat-message.sent .bubble .voice-message {
    background: rgba(255,255,255,0.15);
}

.chat-container .chat-message.received .bubble .voice-message {
    background: var(--bg-card-hover);
}

.chat-container .chat-message .bubble .voice-message .play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
}

.chat-container .chat-message .bubble .voice-message .play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--primary-glow);
}

.chat-container .chat-message .bubble .voice-message .play-btn:active {
    transform: scale(0.9);
}

.chat-container .chat-message .bubble .voice-message .waveform {
    flex: 1;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.chat-container .chat-message .bubble .voice-message .waveform .bar {
    width: 3px;
    background: var(--primary);
    border-radius: 2px;
    animation: wave 0.8s ease-in-out infinite alternate;
}

.chat-container .chat-message .bubble .voice-message .waveform .bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.chat-container .chat-message .bubble .voice-message .waveform .bar:nth-child(2) { height: 18px; animation-delay: 0.1s; }
.chat-container .chat-message .bubble .voice-message .waveform .bar:nth-child(3) { height: 24px; animation-delay: 0.2s; }
.chat-container .chat-message .bubble .voice-message .waveform .bar:nth-child(4) { height: 14px; animation-delay: 0.3s; }
.chat-container .chat-message .bubble .voice-message .waveform .bar:nth-child(5) { height: 20px; animation-delay: 0.4s; }
.chat-container .chat-message .bubble .voice-message .waveform .bar:nth-child(6) { height: 10px; animation-delay: 0.5s; }
.chat-container .chat-message .bubble .voice-message .waveform .bar:nth-child(7) { height: 22px; animation-delay: 0.6s; }
.chat-container .chat-message .bubble .voice-message .waveform .bar:nth-child(8) { height: 16px; animation-delay: 0.7s; }

.chat-container .chat-message .bubble .voice-message .duration {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.chat-container .chat-message.sent .bubble .voice-message .duration {
    color: rgba(255,255,255,0.7);
}

@keyframes wave {
    0% { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}

/* ПЕРЕСЛАННЫЙ ПОСТ */
.chat-container .chat-message .bubble .forwarded-post {
    background: var(--bg-card-hover);
    border-radius: var(--radius-sm);
    padding: 12px;
    border-left: 3px solid var(--primary);
    margin-top: 4px;
    transition: all 0.3s;
}

.chat-container .chat-message .bubble .forwarded-post:hover {
    background: var(--bg-input);
}

.chat-container .chat-message .bubble .forwarded-post .forwarded-title {
    font-weight: 700;
    color: var(--primary);
    font-size: 13px;
}

.chat-container .chat-message .bubble .forwarded-post .forwarded-text {
    margin: 4px 0;
    font-size: 14px;
}

.chat-container .chat-message .bubble .forwarded-post .forwarded-message {
    color: var(--text-secondary);
    font-style: italic;
    margin: 4px 0;
    font-size: 13px;
}

.chat-container .chat-message .bubble .forwarded-post .forwarded-author {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.chat-container .chat-message .bubble .forwarded-post .forwarded-media {
    margin-top: 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.chat-container .chat-message .bubble .forwarded-post .forwarded-media img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.chat-container .chat-message .bubble .forwarded-post .forwarded-media video {
    width: 100%;
    max-height: 300px;
    border-radius: var(--radius-sm);
    background: #000;
}

/* АНИМАЦИЯ ПОЯВЛЕНИЯ СООБЩЕНИЙ */
@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ПОЛЕ ВВОДА */
.chat-container .chat-input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    transition: all 0.3s;
}

.chat-container .chat-input-area .toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.chat-container .chat-input-area .toolbar button {
    padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
    color: var(--text-secondary);
}

.chat-container .chat-input-area .toolbar button:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.chat-container .chat-input-area .toolbar button:active {
    transform: scale(0.95);
}

.chat-container .chat-input-area .input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chat-container .chat-input-area input[type="text"] {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: 50px;
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border 0.3s, box-shadow 0.3s;
}

.chat-container .chat-input-area input[type="text"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.chat-container .chat-input-area input[type="text"]::placeholder {
    color: var(--text-muted);
}

.chat-container .chat-input-area .send-btn {
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    font-size: 14px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-container .chat-input-area .send-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.02);
    box-shadow: 0 4px 20px var(--primary-glow);
}

.chat-container .chat-input-area .send-btn:active {
    transform: scale(0.95);
}

.chat-container .chat-input-area .recording-status {
    display: none;
    color: var(--danger);
    font-size: 13px;
    text-align: center;
    padding: 4px;
    background: rgba(229,57,53,0.1);
    border-radius: var(--radius-sm);
    margin-top: 6px;
    animation: pulse 1s ease-in-out infinite;
}

.chat-container .chat-input-area .recording-status.show {
    display: block;
}

/* ===== ВЫБОР СООБЩЕНИЙ ===== */
.chat-message.selected .bubble {
    border: 2px solid var(--primary) !important;
    box-shadow: 0 0 20px var(--primary-glow) !important;
}

.chat-message .message-checkbox {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s;
}

.chat-message:hover .message-checkbox {
    opacity: 1;
}

/* ===== СТАТУС ПЕЧАТАЕТ ===== */
.typing-indicator {
    display: none;
    padding: 8px 20px;
    font-size: 12px;
    color: var(--text-muted);
    gap: 8px;
    align-items: center;
    background: var(--bg);
}

.typing-indicator.show {
    display: flex !important;
}

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

.typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typingBounce 1.2s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* ============================================================
   СПИСОК ДИАЛОГОВ
   ============================================================ */
.chat-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    border-bottom: 1px solid var(--border);
    position: relative;
}

.chat-list-item:hover {
    background: var(--bg-card-hover);
    transform: translateX(4px);
}

.chat-list-item:active {
    transform: scale(0.98);
}

.chat-list-item .avatar-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.chat-list-item .avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: all 0.3s;
}

.chat-list-item .avatar-wrapper img:hover {
    border-color: var(--primary);
}

.chat-list-item .avatar-wrapper .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background: var(--success);
    box-shadow: 0 0 12px rgba(52,168,83,0.4);
}

.chat-list-item .avatar-wrapper .online-dot.offline {
    background: var(--text-muted);
    box-shadow: none;
}

.chat-list-item .chat-info {
    flex: 1;
    min-width: 0;
}

.chat-list-item .chat-info .name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-list-item .chat-info .name .premium-badge {
    font-size: 12px;
    color: var(--premium);
}

.chat-list-item .chat-info .last-message {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-list-item .unread-badge {
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
    box-shadow: 0 0 20px var(--primary-glow);
}

.chat-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
}

.chat-empty .icon {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
    opacity: 0.3;
}

.chat-empty h4 {
    font-size: 16px;
    color: var(--text-secondary);
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ ЧАТА
   ============================================================ */
@media (max-width: 768px) {
    .chat-container {
        border-radius: 12px !important;
        margin-top: 8px !important;
        max-height: 500px !important;
        height: 500px !important;
    }
    
    .chat-container .chat-header {
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    
    .chat-container .chat-header .avatar-wrapper {
        width: 36px !important;
        height: 36px !important;
    }
    
    .chat-container .chat-header .chat-info .name {
        font-size: 14px !important;
    }
    
    .chat-container .chat-messages {
        padding: 8px 12px !important;
    }
    
    .chat-container .chat-message .bubble {
        font-size: 13px !important;
        padding: 8px 12px !important;
        max-width: 90% !important;
        border-radius: 12px !important;
    }
    
    .chat-container .chat-input-area {
        padding: 6px 10px !important;
    }
    
    .chat-container .chat-input-area input[type="text"] {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    
    .chat-container .chat-input-area .send-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    .chat-container .chat-input-area .toolbar button {
        padding: 4px 6px !important;
        font-size: 14px !important;
    }
    
    #chatContainer {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 100 !important;
        background: var(--bg) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 56px) !important;
    }
    
    #chatContainer .chat-container {
        max-height: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #chatContainer .chat-container #chatMessages {
        flex: 1 !important;
        max-height: none !important;
        min-height: 100px !important;
        overflow-y: auto !important;
        padding: 12px 14px !important;
    }
    
    #chatContainer .chat-container .chat-header {
        flex-shrink: 0 !important;
        padding: 10px 14px !important;
        gap: 10px !important;
    }
    
    #chatContainer .chat-container .chat-header .avatar-wrapper {
        width: 36px !important;
        height: 36px !important;
    }
    
    #chatContainer .chat-container .chat-header .chat-user-info .chat-user-name {
        font-size: 15px !important;
    }
    
    #chatContainer .chat-container .chat-header .chat-user-info .chat-user-status {
        font-size: 11px !important;
    }
    
    #chatContainer .chat-container .chat-input-area {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 8px)) !important;
        gap: 4px !important;
    }
    
    #chatContainer .chat-container .chat-input-area .toolbar {
        gap: 2px !important;
    }
    
    #chatContainer .chat-container .chat-input-area .toolbar button {
        padding: 4px 6px !important;
        font-size: 14px !important;
    }
    
    #chatContainer .chat-container .chat-input-area #chatInput {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    
    #chatContainer .chat-container .chat-input-area .send-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    .chat-list-item {
        padding: 8px 12px !important;
        gap: 10px !important;
        border-radius: 8px !important;
    }
    
    .chat-list-item .avatar-wrapper {
        width: 40px !important;
        height: 40px !important;
    }
    
    .chat-list-item .chat-info .name {
        font-size: 13px !important;
    }
    
    .chat-list-item .chat-info .last-message {
        font-size: 12px !important;
    }
    
    .chat-list-item .unread-badge {
        font-size: 10px !important;
        padding: 1px 6px !important;
        min-width: 16px !important;
    }
}

        .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 380px; width: 100%; }
        .toast { padding: 14px 20px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-hover); color: var(--text); font-size: 14px; font-weight: 500; animation: slideInRight 0.4s var(--transition-bounce); display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all var(--transition); }
        .toast:hover { transform: scale(1.02); }
        .toast .toast-icon { font-size: 24px; }
        .toast .toast-content { flex: 1; }
        .toast .toast-content .toast-title { font-weight: 700; font-size: 13px; }
        .toast .toast-content .toast-text { font-size: 12px; color: var(--text-secondary); }
        .toast.success { border-left: 4px solid var(--success); }
        .toast.error { border-left: 4px solid var(--danger); }
        .toast.info { border-left: 4px solid var(--primary); }
        .toast.warning { border-left: 4px solid var(--gold); }
        .toast.premium { border-left: 4px solid var(--premium); box-shadow: 0 0 30px var(--premium-glow); }
        
        .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 6px 0 env(safe-area-inset-bottom, 6px); z-index: 100; backdrop-filter: blur(20px); }
        .bottom-nav .nav-items { display: flex; justify-content: space-around; align-items: center; }
        .bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--text-secondary); text-decoration: none; font-size: 9px; padding: 4px 12px; cursor: pointer; background: none; border: none; font-family: inherit; transition: all var(--transition); position: relative; }
        .bottom-nav .nav-item i { font-size: 20px; transition: all var(--transition); }
        .bottom-nav .nav-item.active { color: var(--primary); }
        .bottom-nav .nav-item.active i { transform: scale(1.1); }
        .bottom-nav .nav-item .nav-badge { position: absolute; top: -2px; right: -2px; background: var(--danger); color: white; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); min-width: 16px; text-align: center; display: none; }
        .bottom-nav .nav-item .nav-badge.show { display: block; }
        
        .premium-lock { background: rgba(255,107,0,0.05); border: 1px solid var(--premium); border-radius: var(--radius-sm); padding: 12px; text-align: center; color: var(--premium); margin: 8px 0; }
        .premium-lock i { font-size: 24px; display: block; margin-bottom: 4px; }
        
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
        .modal-overlay.active { display: flex; }
        .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 32px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.4); }
        .modal h3 { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
        .modal h3 i { color: var(--primary); }
        .modal .modal-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; flex-wrap: wrap; }
        .modal .btn { padding: 10px 24px; border-radius: var(--radius-full); font-weight: 700; font-size: 14px; border: none; cursor: pointer; transition: all var(--transition); font-family: inherit; }
        .modal .btn-primary { background: var(--primary); color: white; }
        .modal .btn-primary:hover { background: var(--primary-dark); transform: scale(1.02); }
        .modal .btn-secondary { background: var(--bg-input); color: var(--text-secondary); }
        .modal .btn-secondary:hover { background: var(--bg-card-hover); }
        .modal .btn-premium { background: var(--premium); color: white; box-shadow: 0 0 20px var(--premium-glow); }
        .modal .btn-premium:hover { transform: scale(1.02); }
        
        .modal-friend-list { max-height: 300px; overflow-y: auto; margin: 12px 0; }
        .modal-friend-list .friend-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); border-bottom: 1px solid var(--border); }
        .modal-friend-list .friend-item:hover { background: var(--bg-card-hover); }
        .modal-friend-list .friend-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
        .modal-friend-list .friend-item .friend-name { font-weight: 600; flex:1; }
        .modal-friend-list .friend-item .friend-status { font-size: 12px; color: var(--text-muted); }
        
        .emoji-grid { display: flex; flex-wrap: wrap; gap: 4px; max-height: 200px; overflow-y: auto; padding: 8px; background: var(--bg-input); border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 8px 0; }
        .emoji-grid span { font-size: 28px; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); transition: all var(--transition); }
        .emoji-grid span:hover { background: var(--bg-card-hover); transform: scale(1.3); }
        
        .gift-message-input { width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text); font-size: 14px; font-family: inherit; outline: none; transition: border var(--transition); margin: 8px 0; resize: vertical; min-height: 60px; }
        .gift-message-input:focus { border-color: var(--primary); background: var(--bg-input-focus); }
        
        .nearby-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
        .nearby-filters select { padding: 8px 12px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text); font-family: inherit; outline: none; transition: border var(--transition); }
        .nearby-filters select:focus { border-color: var(--primary); }
        
        .premium-countdown { background: rgba(255,107,0,0.1); border: 1px solid var(--premium); border-radius: var(--radius-sm); padding: 12px; text-align: center; color: var(--premium); margin: 8px 0; }
        .premium-countdown strong { font-size: 16px; }
        
        @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
        @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
        
        .media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
        .media-grid .media-item { aspect-ratio: 1; background: var(--bg-card-hover); border-radius: 8px; border: 1px solid var(--border); overflow: hidden; cursor: pointer; position: relative; transition: all 0.2s ease; }
        .media-grid .media-item:hover { transform: scale(1.03); border-color: var(--primary); }
        .media-grid .media-item img { width: 100%; height: 100%; object-fit: cover; }
        .media-grid .media-item .media-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
        .media-grid .media-item:hover .media-overlay { opacity: 1; }
        .media-grid .media-item .media-overlay i { color: white; font-size: 18px; background: rgba(0,0,0,0.5); padding: 6px; border-radius: 50%; }
        
        .friend-request { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
        .friend-request .request-info { display: flex; align-items: center; gap: 12px; cursor: pointer; }
        .friend-request .request-info img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
        .friend-request .request-actions { display: flex; gap: 8px; }
        
        .settings-group { margin-bottom: 20px; }
        .settings-group label { display: block; font-weight: 600; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
        .settings-group .desc { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
        .settings-group input, .settings-group select, .settings-group textarea { width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text); font-size: 14px; font-family: inherit; outline: none; transition: border var(--transition); }
        .settings-group input:focus, .settings-group select:focus, .settings-group textarea:focus { border-color: var(--primary); background: var(--bg-input-focus); }
        .settings-group .toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
        .settings-group .toggle-switch { position: relative; width: 48px; height: 26px; background: var(--bg-input); border-radius: 13px; cursor: pointer; transition: all var(--transition); }
        .settings-group .toggle-switch.active { background: var(--primary); }
        .settings-group .toggle-switch .toggle-dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: all var(--transition); }
        .settings-group .toggle-switch.active .toggle-dot { transform: translateX(22px); }
        .settings-group .color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
        .settings-group .color-btn { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--border); cursor: pointer; transition: all var(--transition); }
        .settings-group .color-btn:hover { transform: scale(1.1); border-color: var(--text); }
        .settings-group .color-btn.active { border-color: var(--primary); }
        
        /* Медиа кнопки в постах */
        .post-premium .media .media-download-btn {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: rgba(0,0,0,0.75);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition);
            opacity: 0;
            z-index: 5;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255,255,255,0.1);
        }
        .post-premium .media:hover .media-download-btn { opacity: 1; }
        .post-premium .media .media-download-btn:hover { background: var(--primary); transform: scale(1.1); border-color: var(--primary); }
        .post-premium .media .media-view-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.6);
            color: white;
            border: none;
            border-radius: 50%;
            width: 56px;
            height: 56px;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition);
            opacity: 0;
            z-index: 5;
            backdrop-filter: blur(4px);
        }
        .post-premium .media:hover .media-view-btn { opacity: 1; }
        .post-premium .media .media-view-btn:hover { background: var(--primary); transform: translate(-50%, -50%) scale(1.1); }
        .post-premium .media .media-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            border-radius: 50%;
            width: 64px;
            height: 64px;
            cursor: pointer;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition);
            z-index: 5;
            backdrop-filter: blur(4px);
            border: 2px solid rgba(255,255,255,0.2);
        }
        .post-premium .media .media-play-btn:hover { background: var(--primary); transform: translate(-50%, -50%) scale(1.05); }
        
        @media (max-width: 992px) { .right-col { display: none; } .quick-actions { grid-template-columns: repeat(3, 1fr); } }
        
/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (все в одном месте)
   ============================================================ */
@media (max-width: 768px) {
    /* ----- ОБЩИЕ ПРАВКИ ----- */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .main-area {
    padding: 8px 8px 100px !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    align-items: flex-start !important; /* ДОБАВИТЬ ЭТУ СТРОКУ */
    min-height: auto !important; /* ДОБАВИТЬ ЭТУ СТРОКУ */
}
    
    .center {
        max-width: 100% !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .right-col {
        display: none !important;
    }
    
    /* ----- ХЕДЕР - КОМПАКТНЫЙ ----- */
    .header {
        padding: 0 10px !important;
        height: 56px !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .header .logo {
        font-size: 16px !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .header .logo img {
        height: 28px !important;
    }
    
        /* ----- ПОИСК - КРУГЛАЯ КНОПКА С ЛУПОЙ ----- */
    .header .search {
        max-width: 44px !important;
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: var(--bg-input) !important;
        border: 2px solid var(--border) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        flex: none !important;
    }
    
    .header .search:focus-within {
        max-width: 200px !important;
        width: 200px !important;
        border-radius: 24px !important;
        border-color: var(--primary) !important;
        background: var(--bg-input-focus) !important;
        box-shadow: 0 0 0 4px var(--primary-glow) !important;
        flex: none !important;
    }
    
    .header .search input {
        display: none !important;
        padding: 8px 12px !important;
        padding-left: 36px !important;
        font-size: 14px !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: var(--text) !important;
        font-family: inherit !important;
    }
    
    .header .search:focus-within input {
        display: block !important;
    }
    
    .header .search i {
        font-size: 20px !important;
        color: var(--text-secondary) !important;
        transition: all 0.3s ease !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: none !important;
    }
    
    .header .search:focus-within i {
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        color: var(--primary) !important;
    }
    
    .header .search .search-clear {
        display: none !important;
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: none !important;
        border: none !important;
        color: var(--text-muted) !important;
        cursor: pointer !important;
        font-size: 16px !important;
        padding: 4px !important;
    }
    
    .header .search .search-clear.show {
        display: block !important;
    }
    
    .header .search .search-loader {
        display: none !important;
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--primary) !important;
        font-size: 16px !important;
    }
    
    .header .search .search-loader.active {
        display: block !important;
    }
    
    /* Результаты поиска для мобильных */
    .header .live-search-results {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        max-height: calc(100vh - 56px) !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
        margin-top: 0 !important;
        background: var(--bg-secondary) !important;
    }
    
    .header .live-search-results.active {
        display: block !important;
    }
    
    .header .live-search-item {
        padding: 12px 16px !important;
    }
    
    .header .live-search-item .result-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    .header .live-search-item .result-info .result-name {
        font-size: 15px !important;
    }
    
    .header .live-search-item .result-info .result-username {
        font-size: 13px !important;
    }
    
    .hamburger {
        display: block !important;
        font-size: 18px !important;
        padding: 4px !important;
        flex-shrink: 0 !important;
    }
    
    .coins {
        font-size: 11px !important;
        padding: 2px 10px 2px 6px !important;
        flex-shrink: 0 !important;
    }
    
    .header .right {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
    
    .header .right .user-avatar {
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
    }
    
    .header .right .icon-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
    }
    
    .header .right .icon-btn .notif-count {
        font-size: 8px !important;
        min-width: 14px !important;
        padding: 1px 4px !important;
        top: -4px !important;
        right: -4px !important;
    }
    
    /* ----- САЙДБАР - ВЫДВИЖНОЙ ----- */
    .sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 280px !important;
        height: 100% !important;
        z-index: 1000 !important;
        background: var(--bg-secondary) !important;
        border-radius: 0 !important;
        border-right: 1px solid var(--border) !important;
        padding: 16px !important;
        overflow-y: auto !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 0 40px rgba(0,0,0,0.1) !important;
        max-height: 100vh !important;
        height: 100vh !important;
        flex: none !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }
    .sidebar.open {
        left: 0 !important;
    }
    
    .sidebar-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 999 !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    .sidebar-overlay.active {
        display: block !important;
    }
    
    /* ----- ГЕРОЙ-СЕКЦИЯ ----- */
    .hero-section {
        padding: 12px 14px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
        width: 100% !important;
    }
    
    .hero-section .greeting {
        font-size: 17px !important;
    }
    
    .hero-section .sub-greeting {
        font-size: 11px !important;
    }
    
    .hero-section .stats {
        gap: 10px !important;
        margin-top: 6px !important;
        flex-wrap: wrap !important;
    }
    
    .hero-section .stats .stat {
        font-size: 11px !important;
    }
    
    .hero-section .stats .stat .num {
        font-size: 14px !important;
    }
    
    /* ----- БЫСТРЫЕ ДЕЙСТВИЯ ----- */
    .quick-actions {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
    }
    
    .quick-action {
        padding: 8px 2px !important;
        border-radius: 10px !important;
    }
    
    .quick-action .icon {
        font-size: 18px !important;
    }
    
    .quick-action .label {
        font-size: 8px !important;
    }
    
    /* ----- ПОСТЫ ----- */
    .post-premium {
        border-radius: 12px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .post-premium .post-header {
        padding: 8px 12px 4px !important;
        gap: 8px !important;
    }
    
    .post-premium .post-header .avatar {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }
    
    .post-premium .post-header .info .name {
        font-size: 12px !important;
    }
    
    .post-premium .post-content {
        padding: 4px 12px 8px !important;
    }
    
    .post-premium .post-content .text {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    .post-premium .post-content .media {
        margin-top: 6px !important;
        border-radius: 8px !important;
    }
    
    .post-premium .post-content .media img,
    .post-premium .post-content .media video {
        max-height: 200px !important;
        width: 100% !important;
    }
    
    .post-premium .post-actions {
        padding: 4px 6px !important;
        gap: 2px !important;
        flex-wrap: wrap !important;
    }
    
    .post-premium .post-actions button {
        font-size: 10px !important;
        padding: 4px 0 !important;
        flex: 1 !important;
        min-width: 40px !important;
    }
    
    /* ----- СОЗДАНИЕ ПОСТА ----- */
    .create-post-container {
        padding: 8px 10px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
        width: 100% !important;
    }
    
    .create-post-container .post-input-area {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    
    .create-post-container .avatar {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }
    
    .create-post-container .post-input-wrapper textarea {
        font-size: 12px !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }
    
    .create-post-container .post-actions-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    
    .create-post-container .post-actions-bar .media-buttons {
        flex-wrap: wrap !important;
        gap: 3px !important;
    }
    
    .create-post-container .post-actions-bar .media-buttons button {
        font-size: 10px !important;
        padding: 3px 8px !important;
        border-radius: 20px !important;
    }
    
    .create-post-container .btn-post {
        padding: 5px 12px !important;
        font-size: 12px !important;
        width: 100% !important;
        border-radius: 20px !important;
    }
    
    /* ----- ФИЛЬТРЫ ----- */
    .filter-buttons {
        gap: 3px !important;
        margin-bottom: 6px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    .btn-filter {
        font-size: 10px !important;
        padding: 3px 10px !important;
        border-radius: 20px !important;
    }
    
    /* ----- КАРТОЧКИ ----- */
    .card {
        border-radius: 12px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .card .card-header {
        padding: 8px 12px !important;
    }
    
    .card .card-title {
        font-size: 12px !important;
    }
    
    .card .card-body {
        padding: 8px 12px !important;
    }
    
    /* ----- ФОТОГРАФИИ ----- */
    .media-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
    }
    
    .media-grid .media-item {
        border-radius: 6px !important;
        aspect-ratio: 1/1 !important;
    }
    
    /* ----- ДРУЗЬЯ И ЗАЯВКИ ----- */
    .widget-item {
        padding: 4px 0 !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .widget-item .avatar {
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
    }
    
    .widget-item .info .name {
        font-size: 11px !important;
    }
    
    .widget-item .info .desc {
        font-size: 9px !important;
    }
    
    .widget-item .btn-follow {
        font-size: 10px !important;
        padding: 2px 8px !important;
        border-radius: 20px !important;
    }
    
    .btn-follow {
        font-size: 11px !important;
        padding: 3px 10px !important;
        border-radius: 20px !important;
    }
    
    /* ----- ЧАТ ----- */
    .chat-container {
        border-radius: 12px !important;
        margin-top: 8px !important;
        max-height: 500px !important;
        height: 500px !important;
    }
    
    .chat-container .chat-header {
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    
    .chat-container .chat-header .avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    .chat-container .chat-header .avatar-wrapper {
        width: 30px !important;
        height: 30px !important;
    }
    
    .chat-container .chat-header .chat-info .name {
        font-size: 13px !important;
    }
    
    .chat-container .chat-messages {
        padding: 8px 12px !important;
    }
    
    .chat-container .chat-message .bubble {
        font-size: 12px !important;
        padding: 6px 10px !important;
        max-width: 90% !important;
        border-radius: 12px !important;
    }
    
    .chat-container .chat-message .bubble img {
        max-width: 120px !important;
    }
    
    .chat-container .chat-message .bubble video {
        max-width: 120px !important;
    }
    
    .chat-container .chat-input-area {
        padding: 6px 10px !important;
    }
    
    .chat-container .chat-input-area input[type="text"] {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border-radius: 20px !important;
    }
    
    .chat-container .chat-input-area .send-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 20px !important;
    }
    
    .chat-container .chat-input-area .toolbar button {
        padding: 4px 6px !important;
        font-size: 14px !important;
    }
    
    /* ----- СПИСОК ДРУЗЕЙ/ЧАТОВ ----- */
    .chat-list-item {
        padding: 6px 10px !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }
    
    .chat-list-item .avatar-wrapper {
        width: 32px !important;
        height: 32px !important;
    }
    
    .chat-list-item .chat-info .name {
        font-size: 12px !important;
    }
    
    .chat-list-item .chat-info .last-message {
        font-size: 10px !important;
    }
    
    .chat-list-item .unread-badge {
        font-size: 9px !important;
        padding: 1px 5px !important;
        min-width: 14px !important;
    }
    
    /* ----- МОДАЛКИ ----- */
    .modal {
        padding: 14px 16px !important;
        max-width: 95% !important;
        margin: 8px !important;
        max-height: 85vh !important;
        border-radius: 14px !important;
    }
    
    .modal h3 {
        font-size: 16px !important;
    }
    
    .modal .btn {
        padding: 6px 14px !important;
        font-size: 12px !important;
        border-radius: 20px !important;
    }
    
    .modal-friend-list .friend-item {
        padding: 6px 8px !important;
        gap: 8px !important;
    }
    
    .modal-friend-list .friend-item img {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* ----- НИЖНЯЯ НАВИГАЦИЯ - МАКСИМАЛЬНО УВЕЛИЧЕННАЯ ----- */
    .bottom-nav {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--bg-secondary) !important;
        border-top: 2px solid var(--border) !important;
        padding: 12px 0 env(safe-area-inset-bottom, 18px) !important;
        z-index: 100 !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.1) !important;
        min-height: 85px !important;
    }
    
    [data-theme="dark"] .bottom-nav {
        background: rgba(20, 20, 42, 0.95) !important;
        border-top: 2px solid rgba(42, 42, 80, 0.6) !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.4) !important;
    }
    
    .bottom-nav .nav-items {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        max-width: 100% !important;
        padding: 0 6px !important;
        gap: 2px !important;
    }
    
    .bottom-nav .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        color: var(--text-secondary) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 10px 8px !important;
        cursor: pointer !important;
        background: none !important;
        border: none !important;
        font-family: inherit !important;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        position: relative !important;
        min-width: 64px !important;
        flex: 1 !important;
        max-width: 88px !important;
        border-radius: 16px !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        user-select: none !important;
    }
    
    .bottom-nav .nav-item i {
        font-size: 32px !important;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        line-height: 1 !important;
        margin-bottom: 1px !important;
    }
    
    .bottom-nav .nav-item span {
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        letter-spacing: 0.3px !important;
        transition: all 0.3s ease !important;
        margin-top: 1px !important;
    }
    
    /* Активное состояние */
    .bottom-nav .nav-item.active {
        color: var(--primary) !important;
        background: var(--primary-glow) !important;
        transform: translateY(-4px) !important;
        box-shadow: 0 4px 24px var(--primary-glow) !important;
    }
    
    .bottom-nav .nav-item.active i {
        transform: scale(1.15) !important;
        color: var(--primary) !important;
        text-shadow: 0 0 32px var(--primary-glow) !important;
    }
    
    .bottom-nav .nav-item.active span {
        color: var(--primary) !important;
        font-weight: 800 !important;
        font-size: 12px !important;
    }
    
    /* Наведение/тап */
    .bottom-nav .nav-item:active {
        transform: scale(0.92) !important;
    }
    
    /* Бейдж уведомлений */
    .bottom-nav .nav-item .nav-badge {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        background: var(--danger) !important;
        color: white !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        padding: 2px 8px !important;
        border-radius: 50px !important;
        min-width: 22px !important;
        text-align: center !important;
        line-height: 1.5 !important;
        display: none !important;
        box-shadow: 0 2px 16px rgba(229, 57, 53, 0.6) !important;
        border: 2.5px solid var(--bg-secondary) !important;
        z-index: 5 !important;
    }
    
    .bottom-nav .nav-item .nav-badge.show {
        display: block !important;
        animation: badgePulse 1.8s ease-in-out infinite !important;
    }
    
    @keyframes badgePulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
    
    /* ----- ЧАТ В ПОЛНЫЙ ЭКРАН НА МОБИЛЬНЫХ ----- */
    #chatContainer {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 100 !important;
        background: var(--bg) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 56px) !important;
    }
    
    #chatContainer .chat-container {
        max-height: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #chatContainer .chat-messages,
    #chatContainer #chatMessages {
        flex: 1 !important;
        max-height: none !important;
        min-height: 100px !important;
        overflow-y: auto !important;
        padding: 12px 14px !important;
    }
    
    #chatContainer .chat-header {
        flex-shrink: 0 !important;
        padding: 10px 14px !important;
        gap: 10px !important;
    }
    
    #chatContainer .chat-header .avatar-wrapper {
        width: 36px !important;
        height: 36px !important;
    }
    
    #chatContainer .chat-input-area {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 8px)) !important;
        gap: 4px !important;
    }
    
    #chatContainer .chat-input-area .toolbar {
        gap: 2px !important;
    }
    
    #chatContainer .chat-input-area .toolbar button {
        padding: 4px 6px !important;
        font-size: 14px !important;
    }
    
    #chatContainer .chat-input-area #chatInput {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    
    #chatContainer .chat-input-area .send-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 400px) {
    .header .search {
        max-width: 60px !important;
    }
    
    .header .search input {
        font-size: 10px !important;
        padding: 3px 4px !important;
    }
    
    .coins {
        font-size: 10px !important;
        padding: 2px 6px 2px 4px !important;
    }
    
    .coins span {
        font-size: 10px !important;
    }
    
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .media-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .profile-media-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .profile-gifts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .card-body > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .bottom-nav {
        padding: 6px 0 env(safe-area-inset-bottom, 8px) !important;
    }
    
    .bottom-nav .nav-items {
        padding: 0 4px !important;
        gap: 2px !important;
    }
    
    .bottom-nav .nav-item {
        min-width: 44px !important;
        max-width: 64px !important;
        padding: 4px 4px !important;
    }
    
    .bottom-nav .nav-item i {
        font-size: 22px !important;
    }
    
    .bottom-nav .nav-item span {
        font-size: 8px !important;
        letter-spacing: 0 !important;
    }
    
    .bottom-nav .nav-item.active span {
        font-size: 9px !important;
    }
    
    .bottom-nav .nav-item .nav-badge {
        font-size: 8px !important;
        min-width: 14px !important;
        padding: 1px 5px !important;
        top: 2px !important;
        right: 2px !important;
    }
}

/* ============================================================
   ТАБЛЕТЫ (769px - 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .bottom-nav .nav-items {
        max-width: 600px !important;
    }
    
    .bottom-nav .nav-item {
        max-width: 80px !important;
        padding: 6px 12px !important;
    }
    
    .bottom-nav .nav-item i {
        font-size: 24px !important;
    }
    
    .bottom-nav .nav-item span {
        font-size: 10px !important;
    }
}

/* ============================================================
   ПК (1025px и больше) - нижняя навигация скрыта
   ============================================================ */
@media (min-width: 1025px) {
    .bottom-nav {
        display: none !important;
    }
}

/* ============================================================
   ДЛЯ IPHONE С ВЫРЕЗОМ (safe-area)
   ============================================================ */
@supports (padding: max(0px)) {
    .bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    }
}
* ============================================================
   САЙДБАР - ПРАВИЛЬНОЕ ПОЗИЦИОНИРОВАНИЕ
   ============================================================ */

/* ПК - фиксированная позиция */
@media (min-width: 769px) {
    .sidebar {
        position: fixed !important;
        top: 80px !important;
        left: 24px !important;
        right: auto !important;
        bottom: auto !important;
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        height: calc(100vh - 160px) !important;
        max-height: calc(100vh - 160px) !important;
        z-index: 50 !important;
        background: var(--bg-secondary) !important;
        border-radius: var(--radius-lg) !important;
        border: 1px solid var(--border) !important;
        padding: 0 !important;
        box-shadow: var(--shadow-hover) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    .sidebar .sidebar-scroll {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 16px !important;
        padding-right: 8px !important;
    }
    
    .sidebar .sidebar-scroll::-webkit-scrollbar {
        width: 4px;
    }
    .sidebar .sidebar-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    .sidebar .sidebar-scroll::-webkit-scrollbar-thumb {
        background: var(--border-hover);
        border-radius: 4px;
    }
    .sidebar .sidebar-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--primary);
    }
    .sidebar .sidebar-scroll {
        scrollbar-width: thin;
        scrollbar-color: var(--border-hover) transparent;
    }
    
    .sidebar-overlay {
        display: none !important;
    }
    
    /* Скрываем drag handle */
    .sidebar-drag-handle {
        display: none !important;
    }
}

/* Мобильная версия - выдвижной */
@media (max-width: 768px) {
    .sidebar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        right: auto !important;
        bottom: 0 !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1000 !important;
        background: var(--bg-secondary) !important;
        border-radius: 0 !important;
        border-right: 1px solid var(--border) !important;
        padding: 16px !important;
        overflow-y: auto !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 0 40px rgba(0,0,0,0.1) !important;
        transform: none !important;
    }
    
    .sidebar.open {
        left: 0 !important;
    }
    
    .sidebar-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 999 !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    .sidebar-overlay.active {
        display: block !important;
    }
}

/* ============================================================
   СМЕЩЕНИЕ КОНТЕНТА ПОД САЙДБАР
   ============================================================ */
@media (min-width: 769px) {
    .main-area {
        padding-left: 270px !important;
        padding-right: 24px !important;
        justify-content: flex-start !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .center {
        max-width: 820px !important;
        flex: 1 !important;
    }
    
    .right-col {
        flex: 0 0 280px !important;
        width: 280px !important;
    }
}

@media (max-width: 768px) {
    .main-area {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Блокируем inline-стили от JS перетаскивания */
.sidebar[style*="left:"] {
    left: 24px !important;
}

@media (max-width: 768px) {
    .sidebar[style*="left:"] {
        left: -100% !important;
    }
    .sidebar.open[style*="left:"] {
        left: 0 !important;
    }
}

        /* ============================================================
           ВЫПАДАЮЩЕЕ МЕНЮ ПОЛЬЗОВАТЕЛЯ
           ============================================================ */
        .user-menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            z-index: 999;
            backdrop-filter: blur(2px);
            animation: fadeIn 0.2s ease;
        }
        .user-menu-overlay.active { display: block; }
        
        .user-menu {
            display: none;
            position: fixed;
            top: 70px;
            right: 24px;
            width: 300px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            overflow: hidden;
            animation: slideDown 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .user-menu.active { display: block; }
        
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px) scale(0.96); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .user-menu-header {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 18px 12px;
            cursor: pointer;
            transition: background var(--transition);
        }
        .user-menu-header:hover { background: var(--bg-card-hover); }
        
        .user-menu-avatar {
            position: relative;
            width: 48px;
            height: 48px;
            flex-shrink: 0;
        }
        .user-menu-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary);
        }
        
        .user-menu-premium-badge {
            position: absolute;
            bottom: -2px;
            right: -2px;
            background: var(--premium);
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 10px;
            display: none;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--bg-card);
            box-shadow: 0 0 20px var(--premium-glow);
            animation: premiumPulse 2s ease-in-out infinite;
        }
        .user-menu-premium-badge.show { display: flex; }
        
        .user-menu-info { flex: 1; min-width: 0; }
        .user-menu-name {
            font-weight: 700;
            font-size: 15px;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .user-menu-username {
            font-size: 13px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .user-menu-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 12px;
        }
        
        .user-menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 10px 18px;
            background: none;
            border: none;
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            transition: all var(--transition);
            font-family: inherit;
            text-align: left;
        }
        .user-menu-item:hover { background: var(--bg-card-hover); }
        .user-menu-item i { width: 20px; text-align: center; color: var(--text-secondary); }
        .user-menu-item-danger { color: var(--danger); }
        .user-menu-item-danger i { color: var(--danger); }
        
        @media (max-width: 768px) {
            .user-menu {
                top: 60px;
                right: 12px;
                left: 12px;
                width: auto;
                border-radius: var(--radius-md);
            }
        }

        /* ============================================================
           СКРОЛЛ В САЙДБАРЕ (ВИДИМАЯ ПОЛОСА)
           ============================================================ */
        .sidebar {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: fit-content;
            max-height: calc(100vh - var(--header-height) - 32px);
        }
        .sidebar-scroll {
            flex: 1;
            overflow-y: auto;
            padding-right: 10px;
            scroll-behavior: smooth;
        }
        .sidebar-scroll::-webkit-scrollbar {
            width: 6px !important;
        }
        .sidebar-scroll::-webkit-scrollbar-track {
            background: var(--bg-card-hover) !important;
            border-radius: 10px !important;
            margin: 8px 0 !important;
        }
        .sidebar-scroll::-webkit-scrollbar-thumb {
            background: var(--primary) !important;
            border-radius: 10px !important;
            min-height: 40px !important;
            transition: all 0.3s !important;
        }
        .sidebar-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark) !important;
            width: 8px !important;
        }
        .sidebar-scroll {
            scrollbar-width: thin !important;
            scrollbar-color: var(--primary) var(--bg-card-hover) !important;
        }
        @media (max-width: 768px) {
            .sidebar-scroll::-webkit-scrollbar { width: 3px !important; }
            .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-hover) !important; min-height: 20px !important; }
            .sidebar-scroll { scrollbar-width: thin !important; }
        }
        
        .sidebar-scrollbar {
            height: 3px;
            background: var(--primary);
            border-radius: 2px;
            transition: width 0.2s;
            width: 0%;
            opacity: 0;
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 5;
        }
        .sidebar-scrollbar.visible { opacity: 1; }
        
        @media (max-width: 768px) {
            .sidebar { max-height: calc(100vh - var(--header-height)); height: 100%; }
            .sidebar-scroll { padding-right: 0px; padding-bottom: 20px; }
        }

/* ============================================================
   ПРОФИЛЬ - ПИЗДАТЫЙ ПРЕМИУМ ДИЗАЙН
   ============================================================ */

/* ----- ОБЩИЙ КОНТЕЙНЕР ----- */
.profile-container {
    max-width: 820px;
    margin: 0 auto;
}

/* ----- ОБЛОЖКА С ГРАДИЕНТОМ ----- */
.profile-cover {
    position: relative;
    background: linear-gradient(135deg, var(--primary), #7C3AED, var(--primary-dark));
    border-radius: 24px;
    padding: 32px 28px 28px;
    margin-bottom: 24px;
    overflow: hidden;
    min-height: 200px;
    box-shadow: 0 12px 48px rgba(26,115,232,0.25);
}

.profile-cover::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.profile-cover::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.profile-cover-content {
    display: flex;
    align-items: center;
    gap: 28px;
    position: relative;
    z-index: 1;
}

/* ----- АВАТАРКА С ПРЕМИУМ КОЛЬЦОМ ----- */
.profile-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar-wrapper .profile-avatar-img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.35);
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
    background: var(--bg-card);
}

.profile-avatar-wrapper .profile-avatar-img:hover {
    transform: scale(1.04);
    border-color: rgba(255,255,255,0.7);
}

/* PREMIUM КОЛЬЦО - АНИМИРОВАННОЕ */
.profile-avatar-wrapper .premium-ring {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: linear-gradient(135deg, #FF6B00, #FFD700, #FF6B00) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: premiumSpin 3s linear infinite;
    box-shadow: 0 0 50px rgba(255,107,0,0.3);
}

.profile-avatar-wrapper .premium-ring-glow {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,107,0,0.25), transparent 70%);
    animation: premiumPulse 2s ease-in-out infinite;
}

@keyframes premiumSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes premiumPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* КНОПКА РЕДАКТИРОВАНИЯ АВАТАРКИ */
.profile-avatar-wrapper .avatar-edit-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 3;
}

.profile-avatar-wrapper .avatar-edit-btn:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.12);
    border-color: var(--primary);
    box-shadow: 0 4px 24px var(--primary-glow);
}

/* ----- ИНФОРМАЦИЯ В ШАПКЕ ----- */
.profile-info-header {
    flex: 1;
    min-width: 0;
    color: white;
}

.profile-name {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    text-shadow: 0 2px 16px rgba(0,0,0,0.1);
}

.profile-name .premium-badge {
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(135deg, #FF6B00, #FFD700);
    color: white;
    padding: 3px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 24px rgba(255,107,0,0.4);
    animation: premiumPulse 2s ease-in-out infinite;
    text-shadow: none;
}

.profile-username {
    font-size: 16px;
    opacity: 0.85;
    margin: 0 0 6px;
    font-weight: 400;
}

.profile-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    opacity: 0.9;
}

.profile-status .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.profile-status .status-dot.online {
    background: #34A853;
    box-shadow: 0 0 20px rgba(52,168,83,0.5);
    animation: onlinePulse 2s ease-in-out infinite;
}

.profile-status .status-dot.offline {
    background: rgba(255,255,255,0.4);
}

@keyframes onlinePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ----- PREMIUM СЧЕТЧИК ----- */
.premium-countdown {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px 18px 8px 14px;
    border-radius: 14px;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}

.premium-countdown .premium-countdown-icon {
    font-size: 20px;
}

.premium-countdown strong {
    font-weight: 700;
    font-size: 14px;
}

.premium-countdown span {
    opacity: 0.8;
    font-size: 13px;
}

/* ============================================================
   КНОПКИ ДЕЙСТВИЙ
   ============================================================ */
.profile-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.profile-btn {
    padding: 12px 24px;
    border-radius: 14px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-btn:hover {
    transform: translateY(-3px);
}

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

.profile-btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 20px var(--primary-glow);
}

.profile-btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 8px 32px var(--primary-glow);
}

.profile-btn-danger {
    background: var(--danger);
    color: white;
    box-shadow: 0 4px 20px rgba(229,57,53,0.3);
}

.profile-btn-danger:hover {
    background: #C62828;
    box-shadow: 0 8px 32px rgba(229,57,53,0.4);
}

.profile-btn-success {
    background: var(--success);
    color: white;
    box-shadow: 0 4px 20px rgba(52,168,83,0.3);
}

.profile-btn-success:hover {
    background: #2E7D32;
    box-shadow: 0 8px 32px rgba(52,168,83,0.4);
}

.profile-btn-gold {
    background: var(--gold);
    color: #1A1A2E;
    box-shadow: 0 4px 20px rgba(245,166,35,0.3);
}

.profile-btn-gold:hover {
    background: #F57F17;
    box-shadow: 0 8px 32px rgba(245,166,35,0.4);
}

.profile-btn-premium {
    background: linear-gradient(135deg, #FF6B00, #FFD700);
    color: white;
    box-shadow: 0 4px 24px rgba(255,107,0,0.4);
}

.profile-btn-premium:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 40px rgba(255,107,0,0.5);
}

.profile-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================================
   СТАТИСТИКА
   ============================================================ */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.profile-stat {
    background: var(--bg-card);
    padding: 18px 14px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.profile-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.3s;
}

.profile-stat:hover::before {
    opacity: 1;
}

.profile-stat:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.profile-stat .stat-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    display: block;
    line-height: 1.2;
}

.profile-stat .stat-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
    display: block;
}

.profile-stat.premium-stat {
    background: linear-gradient(135deg, rgba(255,107,0,0.08), rgba(255,215,0,0.04));
    border-color: rgba(255,107,0,0.3);
}

.profile-stat.premium-stat .stat-number {
    color: var(--premium);
}

.profile-stat.premium-stat::before {
    background: var(--premium);
}

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.profile-section {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 22px 24px 24px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    transition: all 0.3s;
}

.profile-section:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-hover);
}

.profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.profile-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.profile-section-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    background: var(--bg-card-hover);
    padding: 1px 12px;
    border-radius: 50px;
}

/* ============================================================
   ИНФОРМАЦИЯ
   ============================================================ */
.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.profile-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card-hover);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid transparent;
}

.profile-info-item:hover {
    border-color: var(--primary);
    background: var(--bg-card);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.profile-info-item.full-width {
    grid-column: 1 / -1;
}

.profile-info-item .info-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: all 0.3s;
    background: var(--bg-input);
    color: var(--text-secondary);
}

.profile-info-item:hover .info-icon {
    transform: scale(1.08) rotate(-5deg);
}

.profile-info-item .info-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.profile-info-item .info-value {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    display: block;
    word-break: break-word;
}

/* ЦВЕТА ИКОНОК */
.profile-info-item .info-icon.city { background: rgba(255,107,0,0.12); color: #FF6B00; }
.profile-info-item:hover .info-icon.city { background: #FF6B00; color: white; }

.profile-info-item .info-icon.age { background: rgba(229,57,53,0.12); color: #E53935; }
.profile-info-item:hover .info-icon.age { background: #E53935; color: white; }

.profile-info-item .info-icon.gender { background: rgba(124,58,237,0.12); color: #7C3AED; }
.profile-info-item:hover .info-icon.gender { background: #7C3AED; color: white; }

.profile-info-item .info-icon.join { background: rgba(26,115,232,0.12); color: #1A73E8; }
.profile-info-item:hover .info-icon.join { background: #1A73E8; color: white; }

.profile-info-item .info-icon.bio { background: rgba(52,168,83,0.12); color: #34A853; }
.profile-info-item:hover .info-icon.bio { background: #34A853; color: white; }

.profile-info-item .info-icon.country { background: rgba(0,188,212,0.12); color: #00BCD4; }
.profile-info-item:hover .info-icon.country { background: #00BCD4; color: white; }

/* ============================================================
   СОЦИАЛЬНЫЕ СЕТИ
   ============================================================ */
.profile-social-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card-hover);
    border-radius: 12px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.profile-social-link:hover {
    border-color: var(--primary);
    background: var(--bg-card);
    transform: translateX(4px);
    box-shadow: var(--shadow-hover);
}

.profile-social-link .social-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.profile-social-link .social-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.profile-social-link .social-handle {
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
}

.profile-social-link:hover .social-handle {
    color: var(--primary);
}

/* ============================================================
   ИСТОРИИ
   ============================================================ */
.profile-stories {
    display: flex;
    gap: 14px;
    padding: 12px 4px 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.profile-stories::-webkit-scrollbar {
    display: none;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    width: 80px;
    position: relative;
}

.story-item:hover {
    transform: translateY(-4px) scale(1.05);
}

.story-item:active {
    transform: scale(0.92);
}

.story-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #FF6B00, #E53935, #7C3AED, #1A73E8);
    box-shadow: 0 4px 20px rgba(255,107,0,0.25);
    transition: all 0.3s;
    position: relative;
}

.story-item:hover .story-avatar {
    box-shadow: 0 8px 40px rgba(255,107,0,0.4);
    transform: scale(1.02);
}

.story-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: var(--bg-card);
}

.story-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-card);
}

.story-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    max-width: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.story-item:hover .story-name {
    color: var(--text);
}

.story-premium-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--premium);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 20px var(--premium-glow);
    animation: premiumPulse 2s ease-in-out infinite;
}

.story-add {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-muted);
    background: var(--bg-card-hover);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.story-add:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-glow);
    transform: scale(1.05);
}

.story-add:active {
    transform: scale(0.92);
}

.story-item.active .story-avatar {
    background: linear-gradient(135deg, #FF6B00, #FF8C00, #FFD700);
    box-shadow: 0 4px 30px rgba(255,107,0,0.5);
    animation: storyGlow 1.5s ease-in-out infinite;
}

@keyframes storyGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(255,107,0,0.3); }
    50% { box-shadow: 0 4px 40px rgba(255,107,0,0.6); }
}

.story-item.viewed .story-avatar {
    background: var(--border);
    box-shadow: none;
}

.story-item.viewed .story-avatar-inner {
    border: 2px solid var(--border);
}

/* ============================================================
   ФОТОГРАФИИ
   ============================================================ */
.profile-media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.profile-media-item {
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.profile-media-item:hover {
    transform: scale(1.04);
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    z-index: 2;
}

.profile-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.profile-media-item:hover img {
    transform: scale(1.05);
}

.profile-media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-media-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.profile-media-item:hover .profile-media-overlay {
    opacity: 1;
}

.profile-media-overlay i {
    color: white;
    font-size: 26px;
    background: rgba(0,0,0,0.5);
    padding: 14px;
    border-radius: 50%;
    transition: all 0.3s;
    transform: scale(0.8);
}

.profile-media-item:hover .profile-media-overlay i {
    transform: scale(1);
}

.profile-media-item.video-item .profile-media-overlay i {
    padding-left: 18px;
}

/* ============================================================
   ПОДАРКИ
   ============================================================ */
.profile-gifts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.gift-card {
    background: var(--bg-card-hover);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gift-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.gift-card .gift-card-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 4px;
}

.gift-card .gift-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.gift-card .gift-card-from {
    font-size: 10px;
    color: var(--text-muted);
}

.gift-card .gift-card-message {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: 8px;
    font-style: italic;
}

/* ============================================================
   КНОПКИ ДЛЯ СВОЕГО ПРОФИЛЯ
   ============================================================ */
.profile-actions-own {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.profile-actions-own .profile-btn {
    flex: 1;
    justify-content: center;
    min-width: 160px;
}

/* ============================================================
   ПУСТЫЕ СОСТОЯНИЯ
   ============================================================ */
.profile-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}

.profile-empty .empty-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.2;
}

.profile-empty .empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 4px;
}

.profile-empty .empty-sub {
    font-size: 14px;
    margin: 0;
}

/* ============================================================
   ОШИБКА
   ============================================================ */
.profile-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.profile-error i {
    font-size: 56px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.3;
}

.profile-error h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 4px;
}

.profile-error p {
    font-size: 14px;
    margin: 0 0 16px;
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 768px) {
    .profile-cover {
        padding: 24px 18px 20px;
        min-height: 160px;
        border-radius: 18px;
        margin-bottom: 16px;
    }

    .profile-cover-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .profile-avatar-wrapper .profile-avatar-img {
        width: 80px;
        height: 80px;
    }

    .profile-avatar-wrapper .premium-ring {
        inset: -5px;
        border-width: 2px;
    }

    .profile-avatar-wrapper .premium-ring-glow {
        inset: -8px;
    }

    .profile-avatar-wrapper .avatar-edit-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .profile-name {
        font-size: 22px;
        justify-content: center;
    }

    .profile-username {
        font-size: 14px;
    }

    .profile-status {
        justify-content: center;
        font-size: 13px;
    }

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .profile-stat .stat-number {
        font-size: 22px;
    }

    .profile-info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .profile-info-item {
        padding: 12px 14px;
        gap: 12px;
    }

    .profile-info-item .info-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .profile-media-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .profile-section {
        padding: 16px 16px 18px;
        border-radius: 14px;
    }

    .profile-section-title {
        font-size: 15px;
    }

    .profile-actions {
        justify-content: center;
        gap: 8px;
    }

    .profile-actions .profile-btn {
        font-size: 13px;
        padding: 10px 16px;
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }

    .profile-gifts-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .profile-actions-own {
        flex-direction: column;
    }

    .profile-actions-own .profile-btn {
        min-width: auto;
    }

    .premium-countdown {
        justify-content: center;
        font-size: 13px;
        padding: 6px 14px 6px 10px;
    }

    .story-avatar {
        width: 60px;
        height: 60px;
    }
    .story-item {
        width: 68px;
    }
    .story-add {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }
    .story-name {
        font-size: 10px;
    }
    .profile-stories {
        gap: 10px;
        padding: 8px 4px 12px;
    }
}

@media (max-width: 480px) {
    .profile-avatar-wrapper .profile-avatar-img {
        width: 64px;
        height: 64px;
    }

    .profile-avatar-wrapper .avatar-edit-btn {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }

    .profile-avatar-wrapper .premium-ring {
        inset: -4px;
        border-width: 2px;
    }

    .profile-avatar-wrapper .premium-ring-glow {
        inset: -6px;
    }

    .profile-name {
        font-size: 18px;
    }

    .profile-name .premium-badge {
        font-size: 10px;
        padding: 2px 12px;
    }

    .profile-media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .profile-gifts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-stats {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .profile-stat {
        padding: 14px 10px;
    }

    .profile-stat .stat-number {
        font-size: 20px;
    }

    .profile-section {
        padding: 14px 14px 16px;
    }

    .profile-cover {
        padding: 18px 14px 16px;
        min-height: 140px;
        border-radius: 14px;
    }

    .profile-actions .profile-btn {
        font-size: 12px;
        padding: 8px 12px;
        min-width: 80px;
    }

    .story-avatar {
        width: 50px;
        height: 50px;
    }
    .story-item {
        width: 58px;
    }
    .story-add {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    .story-name {
        font-size: 9px;
    }
    .profile-stories {
        gap: 8px;
        padding: 6px 4px 10px;
    }
}
/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 768px) {
    .profile-cover {
        padding: 24px 18px 20px;
        min-height: 160px;
        border-radius: 18px;
        margin-bottom: 16px;
    }

    .profile-cover-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .profile-avatar-wrapper .profile-avatar-img {
        width: 80px;
        height: 80px;
    }

    .profile-avatar-wrapper .premium-ring {
        inset: -5px;
        border-width: 2px;
    }

    .profile-avatar-wrapper .premium-ring-glow {
        inset: -8px;
    }

    .profile-avatar-wrapper .avatar-edit-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .profile-name {
        font-size: 22px;
        justify-content: center;
    }

    .profile-username {
        font-size: 14px;
    }

    .profile-status {
        justify-content: center;
        font-size: 13px;
    }

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .profile-stat .stat-number {
        font-size: 22px;
    }

    .profile-info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .profile-info-item {
        padding: 12px 14px;
        gap: 12px;
    }

    .profile-info-item .info-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .profile-media-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .profile-section {
        padding: 16px 16px 18px;
        border-radius: 14px;
    }

    .profile-section-title {
        font-size: 15px;
    }

    .profile-actions {
        justify-content: center;
        gap: 8px;
    }

    .profile-actions .profile-btn {
        font-size: 13px;
        padding: 10px 16px;
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }

    .profile-gifts-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .profile-actions-own {
        flex-direction: column;
    }

    .profile-actions-own .profile-btn {
        min-width: auto;
    }

    .premium-countdown {
        justify-content: center;
        font-size: 13px;
        padding: 6px 14px 6px 10px;
    }
}

@media (max-width: 480px) {
    .profile-avatar-wrapper .profile-avatar-img {
        width: 64px;
        height: 64px;
    }

    .profile-avatar-wrapper .avatar-edit-btn {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }

    .profile-avatar-wrapper .premium-ring {
        inset: -4px;
        border-width: 2px;
    }

    .profile-avatar-wrapper .premium-ring-glow {
        inset: -6px;
    }

    .profile-name {
        font-size: 18px;
    }

    .profile-name .premium-badge {
        font-size: 10px;
        padding: 2px 12px;
    }

    .profile-media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .profile-gifts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-stats {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .profile-stat {
        padding: 14px 10px;
    }

    .profile-stat .stat-number {
        font-size: 20px;
    }

    .profile-section {
        padding: 14px 14px 16px;
    }

    .profile-cover {
        padding: 18px 14px 16px;
        min-height: 140px;
        border-radius: 14px;
    }

    .profile-actions .profile-btn {
        font-size: 12px;
        padding: 8px 12px;
        min-width: 80px;
    }
}
    
    /* ----- НИЖНЯЯ НАВИГАЦИЯ - МАКСИМАЛЬНО УВЕЛИЧЕННАЯ ----- */
    .bottom-nav {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--bg-secondary) !important;
        border-top: 2px solid var(--border) !important;
        padding: 14px 0 env(safe-area-inset-bottom, 18px) !important;
        z-index: 100 !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.08) !important;
        min-height: 88px !important;
    }
    
    [data-theme="dark"] .bottom-nav {
        background: rgba(20, 20, 42, 0.95) !important;
        border-top: 2px solid rgba(42, 42, 80, 0.6) !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.4) !important;
    }
    
    .bottom-nav .nav-items {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        gap: 4px !important;
    }
    
    .bottom-nav .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        color: var(--text-secondary) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 10px 10px !important;
        cursor: pointer !important;
        background: none !important;
        border: none !important;
        font-family: inherit !important;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        position: relative !important;
        min-width: 68px !important;
        flex: 1 !important;
        max-width: 92px !important;
        border-radius: 18px !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        user-select: none !important;
    }
    
    .bottom-nav .nav-item i {
        font-size: 34px !important;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        line-height: 1 !important;
        margin-bottom: 2px !important;
    }
    
    .bottom-nav .nav-item span {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        letter-spacing: 0.3px !important;
        transition: all 0.3s ease !important;
        margin-top: 1px !important;
    }
    
    /* Активное состояние */
    .bottom-nav .nav-item.active {
        color: var(--primary) !important;
        background: var(--primary-glow) !important;
        transform: translateY(-5px) !important;
        box-shadow: 0 4px 32px var(--primary-glow) !important;
    }
    
    .bottom-nav .nav-item.active i {
        transform: scale(1.18) !important;
        color: var(--primary) !important;
        text-shadow: 0 0 40px var(--primary-glow) !important;
    }
    
    .bottom-nav .nav-item.active span {
        color: var(--primary) !important;
        font-weight: 800 !important;
        font-size: 13px !important;
    }
    
    /* Наведение/тап */
    .bottom-nav .nav-item:active {
        transform: scale(0.90) !important;
    }
    
    /* Бейдж уведомлений */
    .bottom-nav .nav-item .nav-badge {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        background: var(--danger) !important;
        color: white !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        padding: 2px 9px !important;
        border-radius: 50px !important;
        min-width: 24px !important;
        text-align: center !important;
        line-height: 1.5 !important;
        display: none !important;
        box-shadow: 0 2px 20px rgba(229, 57, 53, 0.6) !important;
        border: 2.5px solid var(--bg-secondary) !important;
        z-index: 5 !important;
    }
    
    .bottom-nav .nav-item .nav-badge.show {
        display: block !important;
        animation: badgePulse 1.8s ease-in-out infinite !important;
    }
    
    @keyframes badgePulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
    
    /* ----- ЧАТ В ПОЛНЫЙ ЭКРАН НА МОБИЛЬНЫХ ----- */
    #chatContainer {
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 100 !important;
        background: var(--bg) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 64px) !important;
    }
    
    #chatContainer .chat-container {
        max-height: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #chatContainer .chat-messages,
    #chatContainer #chatMessages {
        flex: 1 !important;
        max-height: none !important;
        min-height: 100px !important;
        overflow-y: auto !important;
        padding: 16px 18px !important;
    }
    
    #chatContainer .chat-header {
        flex-shrink: 0 !important;
        padding: 14px 18px !important;
        gap: 12px !important;
    }
    
    #chatContainer .chat-header .avatar-wrapper {
        width: 44px !important;
        height: 44px !important;
    }
    
    #chatContainer .chat-header .chat-info .name {
        font-size: 17px !important;
    }
    
    #chatContainer .chat-header .chat-info .status {
        font-size: 13px !important;
    }
    
    #chatContainer .chat-input-area {
        flex-shrink: 0 !important;
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 12px)) !important;
        gap: 6px !important;
    }
    
    #chatContainer .chat-input-area .toolbar {
        gap: 4px !important;
    }
    
    #chatContainer .chat-input-area .toolbar button {
        padding: 6px 10px !important;
        font-size: 18px !important;
    }
    
    #chatContainer .chat-input-area #chatInput {
        font-size: 15px !important;
        padding: 12px 16px !important;
        height: 50px !important;
        border-radius: 25px !important;
    }
    
    #chatContainer .chat-input-area .send-btn {
        padding: 12px 22px !important;
        font-size: 15px !important;
        height: 50px !important;
        border-radius: 25px !important;
    }


/* ============================================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ (до 400px)
   ============================================================ */
@media (max-width: 400px) {
    .header .search {
        max-width: 80px !important;
        height: 36px !important;
        padding: 0 10px !important;
    }
    
    .header .search input {
        font-size: 12px !important;
        padding: 4px 6px !important;
    }
    
    .header .logo {
        font-size: 16px !important;
    }
    
    .header .logo img {
        height: 28px !important;
    }
    
    .header .logo span {
        font-size: 16px !important;
    }
    
    .coins {
        font-size: 12px !important;
        padding: 2px 10px 2px 6px !important;
        height: 32px !important;
    }
    
    .coins i {
        font-size: 13px !important;
    }
    
    .header .right .user-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .header .right .icon-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }
    
    .hamburger {
        font-size: 20px !important;
    }
    
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .media-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .profile-media-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .profile-gifts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .card-body > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* ----- НАВИГАЦИЯ ДЛЯ МАЛЕНЬКИХ ТЕЛЕФОНОВ ----- */
    .bottom-nav {
        padding: 10px 0 env(safe-area-inset-bottom, 14px) !important;
        min-height: 76px !important;
    }
    
    .bottom-nav .nav-items {
        padding: 0 4px !important;
        gap: 2px !important;
    }
    
    .bottom-nav .nav-item {
        min-width: 56px !important;
        max-width: 76px !important;
        padding: 8px 6px !important;
        gap: 3px !important;
    }
    
    .bottom-nav .nav-item i {
        font-size: 28px !important;
    }
    
    .bottom-nav .nav-item span {
        font-size: 10px !important;
        letter-spacing: 0 !important;
    }
    
    .bottom-nav .nav-item.active {
        transform: translateY(-4px) !important;
    }
    
    .bottom-nav .nav-item.active span {
        font-size: 11px !important;
    }
    
    .bottom-nav .nav-item.active i {
        transform: scale(1.15) !important;
    }
    
    .bottom-nav .nav-item .nav-badge {
        font-size: 10px !important;
        min-width: 20px !important;
        padding: 1px 7px !important;
        top: 2px !important;
        right: 2px !important;
    }
}

/* ============================================================
   БОЛЬШИЕ ТЕЛЕФОНЫ (401px - 768px)
   ============================================================ */
@media (min-width: 401px) and (max-width: 768px) {
    .bottom-nav .nav-item {
        min-width: 72px !important;
        max-width: 96px !important;
        padding: 12px 10px !important;
    }
    
    .bottom-nav .nav-item i {
        font-size: 36px !important;
    }
    
    .bottom-nav .nav-item span {
        font-size: 13px !important;
    }
    
    .bottom-nav .nav-item.active i {
        transform: scale(1.2) !important;
    }
    
    .bottom-nav .nav-item.active span {
        font-size: 14px !important;
    }
}

/* ============================================================
   АНИМАЦИИ ДЛЯ ЧАТА
   ============================================================ */

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-message {
    animation: messageSlide 0.3s ease;
}


/* ============================================================
   ЧАТ - ПОЛНАЯ ВЕРСИЯ (ВСЁ ВМЕЩАЕТСЯ)
   ============================================================ */

/* КОНТЕЙНЕР ЧАТА */
.chat-container,
#chatContainer .chat-container,
.chat-container-modern {
    background: var(--bg-card) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    margin-top: 16px !important;
    box-shadow: var(--shadow-hover) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 600px !important;
    max-height: 70vh !important;
    min-height: 400px !important;
    border: 1px solid var(--border) !important;
    transition: all var(--transition) !important;
    position: relative !important;
}

/* ХЕДЕР ЧАТА - ФИКСИРОВАННЫЙ СВЕРХУ */
.chat-header,
#chatContainer .chat-header,
.chat-container-modern .chat-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: var(--bg-secondary) !important;
    flex-shrink: 0 !important;
    z-index: 5 !important;
    min-height: 60px !important;
}

/* АВАТАРКА В ХЕДЕРЕ */
.chat-header .avatar-wrapper {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.chat-header .avatar-wrapper img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--primary) !important;
}

/* ОНЛАЙН СТАТУС */
.chat-header .avatar-wrapper .online-status {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid var(--bg-secondary) !important;
    background: var(--text-muted) !important;
}

.chat-header .avatar-wrapper .online-status.online {
    background: var(--success) !important;
    box-shadow: 0 0 12px rgba(52,168,83,0.4) !important;
    animation: pulse 2s ease-in-out infinite !important;
}

/* ИНФО В ХЕДЕРЕ */
.chat-header .chat-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.chat-header .chat-info .name {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.chat-header .chat-info .status {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* КНОПКИ В ХЕДЕРЕ */
.chat-header .chat-actions {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.chat-header .chat-actions button {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: all 0.3s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.chat-header .chat-actions button:hover {
    background: var(--bg-card-hover) !important;
    color: var(--text) !important;
    transform: scale(1.05) !important;
}

/* ===== СООБЩЕНИЯ - СКРОЛЛ ===== */
.chat-messages,
#chatMessages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    background: var(--bg) !important;
    min-height: 100px !important;
    max-height: none !important;
    overflow-x: hidden !important;
}

.chat-messages::-webkit-scrollbar,
#chatMessages::-webkit-scrollbar {
    width: 4px !important;
}

.chat-messages::-webkit-scrollbar-track,
#chatMessages::-webkit-scrollbar-track {
    background: transparent !important;
}

.chat-messages::-webkit-scrollbar-thumb,
#chatMessages::-webkit-scrollbar-thumb {
    background: var(--border-hover) !important;
    border-radius: 4px !important;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
#chatMessages::-webkit-scrollbar-thumb:hover {
    background: var(--primary) !important;
}

/* ===== СООБЩЕНИЕ ===== */
.chat-message {
    display: flex !important;
    animation: messageSlide 0.3s ease !important;
    max-width: 80% !important;
    position: relative !important;
}

.chat-message.sent {
    align-self: flex-end !important;
}

.chat-message.received {
    align-self: flex-start !important;
}

/* ПУЗЫРЕК СООБЩЕНИЯ */
.chat-message .bubble {
    padding: 8px 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    position: relative !important;
    transition: all 0.2s !important;
    max-width: 100% !important;
}

.chat-message.sent .bubble {
    background: var(--primary) !important;
    color: white !important;
    border-bottom-right-radius: 4px !important;
}

.chat-message.received .bubble {
    background: var(--bg-card-hover) !important;
    color: var(--text) !important;
    border-bottom-left-radius: 4px !important;
}

.chat-message .bubble .time {
    display: block !important;
    font-size: 9px !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
    text-align: right !important;
    opacity: 0.7 !important;
}

.chat-message.sent .bubble .time {
    color: rgba(255,255,255,0.5) !important;
}

.chat-message .bubble img {
    max-width: 200px !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    cursor: pointer !important;
}

/* ===== ПОЛЕ ВВОДА - ФИКСИРОВАННОЕ ВНИЗУ ===== */
.chat-input-area,
#chatContainer .chat-input-area {
    padding: 10px 14px !important;
    border-top: 1px solid var(--border) !important;
    background: var(--bg-secondary) !important;
    flex-shrink: 0 !important;
    z-index: 5 !important;
    position: sticky !important;
    bottom: 0 !important;
}

.chat-input-area .toolbar {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    flex-wrap: wrap !important;
}

.chat-input-area .toolbar button {
    padding: 4px 8px !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: all 0.3s !important;
    color: var(--text-secondary) !important;
}

.chat-input-area .toolbar button:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.chat-input-area .input-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.chat-input-area input[type="text"] {
    flex: 1 !important;
    padding: 8px 14px !important;
    border: 2px solid var(--border) !important;
    border-radius: 50px !important;
    background: var(--bg-input) !important;
    color: var(--text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    outline: none !important;
    transition: border 0.3s, box-shadow 0.3s !important;
    min-height: 40px !important;
}

.chat-input-area input[type="text"]:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-glow) !important;
}

.chat-input-area .send-btn {
    padding: 8px 16px !important;
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    font-family: inherit !important;
    font-size: 14px !important;
    min-width: 44px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.chat-input-area .send-btn:hover {
    background: var(--primary-dark) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 20px var(--primary-glow) !important;
}

/* ===== СТАТУС ПЕЧАТАЕТ ===== */
#chatTyping {
    display: none !important;
    padding: 4px 20px !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    font-style: italic !important;
    min-height: 24px !important;
    background: var(--bg) !important;
    align-items: center !important;
    gap: 8px !important;
}

#chatTyping.show {
    display: flex !important;
}

.typing-dots {
    display: inline-flex !important;
    gap: 4px !important;
    align-items: center !important;
}

.typing-dots span {
    width: 6px !important;
    height: 6px !important;
    background: var(--text-muted) !important;
    border-radius: 50% !important;
    animation: typingBounce 1.2s infinite !important;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s !important; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s !important; }

/* ===== ВЫБОР СООБЩЕНИЙ ===== */
.chat-message.selected .bubble {
    border: 2px solid var(--primary) !important;
    box-shadow: 0 0 20px var(--primary-glow) !important;
}

/* ===== СПИСОК ЧАТОВ ===== */
.chat-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    border-bottom: 1px solid var(--border) !important;
    position: relative !important;
}

.chat-list-item:hover {
    background: var(--bg-card-hover) !important;
    transform: translateX(4px) !important;
}

.chat-list-item .avatar-wrapper {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.chat-list-item .avatar-wrapper img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--border) !important;
}

.chat-list-item .avatar-wrapper .online-dot {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid var(--bg-card) !important;
    background: var(--success) !important;
    box-shadow: 0 0 12px rgba(52,168,83,0.4) !important;
}

.chat-list-item .avatar-wrapper .online-dot.offline {
    background: var(--text-muted) !important;
    box-shadow: none !important;
}

.chat-list-item .chat-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.chat-list-item .chat-info .name {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.chat-list-item .chat-info .last-message {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.chat-list-item .unread-badge {
    background: var(--primary) !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-full) !important;
    min-width: 20px !important;
    text-align: center !important;
    box-shadow: 0 0 20px var(--primary-glow) !important;
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ ЧАТА
   ============================================================ */
@media (max-width: 768px) {
    .chat-container,
    #chatContainer .chat-container,
    .chat-container-modern {
        border-radius: 0 !important;
        max-height: 100% !important;
        height: 100% !important;
        margin-top: 0 !important;
        border: none !important;
    }
    
    .chat-header {
        padding: 10px 14px !important;
        gap: 10px !important;
    }
    
    .chat-header .avatar-wrapper {
        width: 36px !important;
        height: 36px !important;
    }
    
    .chat-header .chat-info .name {
        font-size: 14px !important;
    }
    
    .chat-messages,
    #chatMessages {
        padding: 12px 14px !important;
    }
    
    .chat-message .bubble {
        font-size: 13px !important;
        padding: 8px 12px !important;
        max-width: 90% !important;
        border-radius: 12px !important;
    }
    
    .chat-input-area {
        padding: 8px 12px !important;
    }
    
    .chat-input-area input[type="text"] {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    
    .chat-input-area .send-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    #chatContainer {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 100 !important;
        background: var(--bg) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 56px) !important;
    }
    
    #chatContainer .chat-container {
        max-height: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #chatContainer .chat-messages,
    #chatContainer #chatMessages {
        flex: 1 !important;
        max-height: none !important;
        min-height: 100px !important;
        overflow-y: auto !important;
        padding: 12px 14px !important;
    }
    
    #chatContainer .chat-header {
        flex-shrink: 0 !important;
        padding: 10px 14px !important;
        gap: 10px !important;
    }
    
    #chatContainer .chat-header .avatar-wrapper {
        width: 36px !important;
        height: 36px !important;
    }
    
    #chatContainer .chat-input-area {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 8px)) !important;
        gap: 4px !important;
    }
    
    #chatContainer .chat-input-area .toolbar {
        gap: 2px !important;
    }
    
    #chatContainer .chat-input-area .toolbar button {
        padding: 4px 6px !important;
        font-size: 14px !important;
    }
    
    #chatContainer .chat-input-area #chatInput {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }
    
    #chatContainer .chat-input-area .send-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    .chat-list-item {
        padding: 8px 12px !important;
        gap: 10px !important;
    }
    
    .chat-list-item .avatar-wrapper {
        width: 40px !important;
        height: 40px !important;
    }
    
    .chat-list-item .chat-info .name {
        font-size: 13px !important;
    }
    
    .chat-list-item .chat-info .last-message {
        font-size: 12px !important;
    }
    
    .chat-list-item .unread-badge {
        font-size: 10px !important;
        padding: 1px 6px !important;
        min-width: 16px !important;
    }
}

/* АНИМАЦИИ */
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ДОБАВИТЬ ЭТО: */
@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(15deg); }
    20%, 40% { transform: rotate(-15deg); }
}

/* Класс для анимации колокольчика */
.bell-ringing {
    animation: bellRing 0.5s ease 3; /* 3 раза */
}


/* ============================================================
   МУЗЫКАЛЬНЫЙ ПЛЕЕР - ПОЛНАЯ ВЕРСИЯ
   ============================================================ */

/* ПЛАВАЮЩИЙ ПЛЕЕР (ВСЕГДА СВЕРХУ) */
.floating-player {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    padding: 12px 20px;
    display: none;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-width: 300px;
    max-width: 90%;
    transition: all var(--transition);
    animation: slideUpPlayer 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-player.active {
    display: flex;
}

.floating-player:hover {
    box-shadow: 0 12px 48px rgba(0,0,0,0.25);
    transform: translateX(-50%) scale(1.02);
}

.floating-player .player-cover {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.floating-player .player-info {
    flex: 1;
    min-width: 0;
}

.floating-player .player-info .player-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-player .player-info .player-artist {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-player .player-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.floating-player .player-controls button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-player .player-controls button:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}

.floating-player .player-controls .play-btn {
    background: var(--primary);
    color: white;
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.floating-player .player-controls .play-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.08);
}

.floating-player .player-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    width: 0%;
    transition: width 0.1s;
}

@keyframes slideUpPlayer {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* КНОПКИ В РЕЗУЛЬТАТАХ ПОИСКА */
.music-result-item .track-actions .btn-download,
.music-result-item .track-actions .btn-share {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition);
}

.music-result-item .track-actions .btn-download:hover {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.music-result-item .track-actions .btn-share:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ЗАГРУЗКА СВОЕЙ МУЗЫКИ */
.upload-music-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 12px;
}

.upload-music-area:hover {
    border-color: var(--primary);
    background: var(--bg-card-hover);
}

.upload-music-area.dragover {
    border-color: var(--primary);
    background: var(--primary-glow);
}

.upload-music-area .upload-icon {
    font-size: 36px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}

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

.upload-music-area .upload-sub {
    font-size: 12px;
    color: var(--text-muted);
}

/* МОБИЛЬНАЯ ВЕРСИЯ ПЛЕЕРА */
@media (max-width: 768px) {
    .floating-player {
        bottom: 70px;
        padding: 10px 14px;
        min-width: auto;
        width: calc(100% - 16px);
        border-radius: var(--radius-md);
    }
    
    .floating-player .player-cover {
        width: 40px;
        height: 40px;
    }
    
    .floating-player .player-info .player-title {
        font-size: 12px;
    }
    
    .floating-player .player-info .player-artist {
        font-size: 10px;
    }
    
    .floating-player .player-controls button {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .floating-player .player-controls .play-btn {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
}

/* ============================================================
   МУЗЫКА - ПИЗДАТЫЙ СТИЛЬ
   ============================================================ */

/* КАРТОЧКА МУЗЫКИ */
.music-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.music-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-hover);
}

.music-card .music-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
}

.music-card .music-header .music-title {
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

.music-card .music-header .music-title i {
    color: var(--primary);
    font-size: 20px;
}

.music-card .music-body {
    padding: 16px 20px;
}

/* ЗАГРУЗКА МУЗЫКИ */
.upload-music-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 16px;
    background: var(--bg-card-hover);
    position: relative;
    overflow: hidden;
}

.upload-music-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-glow), transparent);
    opacity: 0;
    transition: all var(--transition);
}

.upload-music-area:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--primary-glow);
}

.upload-music-area:hover::before {
    opacity: 1;
}

.upload-music-area.dragover {
    border-color: var(--primary);
    background: var(--primary-glow);
    transform: scale(1.02);
}

.upload-music-area .upload-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.upload-music-area .upload-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    position: relative;
    z-index: 1;
}

.upload-music-area .upload-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

/* ПОИСК */
.music-search-wrap {
    position: relative;
    flex: 1;
    min-width: 150px;
}

.music-search-wrap .music-search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
}

.music-search-wrap .music-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
    background: var(--bg-input-focus);
}

.music-search-wrap .music-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    transition: all 0.3s;
}

.music-search-wrap .music-search-input:focus + .music-search-icon {
    color: var(--primary);
}

.music-search-wrap .music-search-loader {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 18px;
}

.music-search-wrap .music-search-loader.active {
    display: block;
}

/* РЕЗУЛЬТАТЫ */
.music-results {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 12px;
}

.music-results::-webkit-scrollbar {
    width: 4px;
}

.music-results::-webkit-scrollbar-track {
    background: transparent;
}

.music-results::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

.music-results::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ЭЛЕМЕНТ ТРЕКА */
.music-track-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-card-hover);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.music-track-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--primary-glow), transparent);
    opacity: 0;
    transition: all 0.3s;
}

.music-track-item:hover {
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.music-track-item:hover::before {
    opacity: 1;
}

.music-track-item .track-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.music-track-item .track-info .track-thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-input);
    transition: all 0.3s;
}

.music-track-item:hover .track-info .track-thumb {
    transform: scale(1.05);
}

.music-track-item .track-info .track-thumb-placeholder {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    flex-shrink: 0;
}

.music-track-item .track-info .track-text {
    flex: 1;
    min-width: 0;
}

.music-track-item .track-info .track-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.music-track-item:hover .track-info .track-title {
    color: var(--primary);
}

.music-track-item .track-info .track-artist {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-track-item .track-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.music-track-item .track-actions .track-duration {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 40px;
    text-align: right;
}

.music-track-item .track-actions .track-btn {
    padding: 6px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.music-track-item .track-actions .track-btn:hover {
    transform: translateY(-2px) scale(1.05);
}

.music-track-item .track-actions .track-btn.btn-download {
    border-color: var(--success);
    color: var(--success);
}

.music-track-item .track-actions .track-btn.btn-download:hover {
    background: var(--success);
    color: white;
    box-shadow: 0 4px 16px rgba(52,168,83,0.3);
}

.music-track-item .track-actions .track-btn.btn-share {
    border-color: var(--primary);
    color: var(--primary);
}

.music-track-item .track-actions .track-btn.btn-share:hover {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 16px var(--primary-glow);
}

.music-track-item .track-actions .track-btn.btn-fav {
    border-color: var(--border);
    color: var(--text-secondary);
}

.music-track-item .track-actions .track-btn.btn-fav:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.music-track-item .track-actions .track-btn.btn-fav.active {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(229,57,53,0.1);
}

.music-track-item .track-actions .track-btn.btn-play {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    width: 36px;
    height: 36px;
    padding: 0;
}

.music-track-item .track-actions .track-btn.btn-play:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
    box-shadow: 0 4px 20px var(--primary-glow);
}

/* ПЛЕЕР */
.music-player {
    background: var(--bg-card-hover);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    transition: all var(--transition);
    display: none;
}

.music-player.active {
    display: block;
    animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.music-player .player-top {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.music-player .player-top .player-cover {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-input);
}

.music-player .player-top .player-cover-placeholder {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 26px;
    flex-shrink: 0;
}

.music-player .player-top .player-info {
    flex: 1;
    min-width: 0;
}

.music-player .player-top .player-info .player-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-player .player-top .player-info .player-artist {
    font-size: 14px;
    color: var(--text-secondary);
}

.music-player .player-top .player-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.music-player .player-top .player-controls .ctrl-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-player .player-top .player-controls .ctrl-btn:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}

.music-player .player-top .player-controls .ctrl-btn.play-btn {
    background: var(--primary);
    color: white;
    width: 46px;
    height: 46px;
    font-size: 20px;
}

.music-player .player-top .player-controls .ctrl-btn.play-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.08);
    box-shadow: 0 4px 20px var(--primary-glow);
}

.music-player .player-top .player-controls .ctrl-btn.fav-btn.active {
    color: var(--danger);
}

.music-player .player-progress-wrap {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.music-player .player-progress-wrap .progress-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-input);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height 0.2s;
}

.music-player .player-progress-wrap .progress-bar:hover {
    height: 6px;
}

.music-player .player-progress-wrap .progress-bar .progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 2px;
    transition: width 0.1s;
    position: relative;
}

.music-player .player-progress-wrap .progress-bar .progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 0 20px var(--primary-glow);
}

.music-player .player-progress-wrap .progress-bar:hover .progress-fill::after {
    opacity: 1;
}

.music-player .player-progress-wrap .player-time {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 40px;
    font-variant-numeric: tabular-nums;
}

/* ПУСТОЕ СОСТОЯНИЕ */
.music-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.music-empty .empty-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.3;
}

.music-empty .empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

.music-empty .empty-sub {
    font-size: 13px;
    margin-top: 4px;
}

/* ИЗБРАННОЕ */
.music-favorites-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.music-favorites-title i {
    color: var(--danger);
}

/* АНИМАЦИИ */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    .music-track-item {
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .music-track-item .track-info .track-thumb,
    .music-track-item .track-info .track-thumb-placeholder {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .music-track-item .track-info .track-title {
        font-size: 13px;
    }
    
    .music-track-item .track-info .track-artist {
        font-size: 11px;
    }
    
    .music-track-item .track-actions {
        gap: 2px;
        flex-wrap: wrap;
    }
    
    .music-track-item .track-actions .track-btn {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .music-track-item .track-actions .track-btn.btn-play {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .music-player .player-top {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .music-player .player-top .player-cover,
    .music-player .player-top .player-cover-placeholder {
        width: 80px;
        height: 80px;
        align-self: center;
        font-size: 32px;
    }
    
    .music-player .player-top .player-info .player-title {
        font-size: 15px;
        text-align: center;
    }
    
    .music-player .player-top .player-info .player-artist {
        font-size: 13px;
        text-align: center;
    }
    
    .music-player .player-top .player-controls {
        justify-content: center;
    }
    
    .music-player .player-top .player-controls .ctrl-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .music-player .player-top .player-controls .ctrl-btn.play-btn {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    
    .upload-music-area {
        padding: 16px;
    }
    
    .upload-music-area .upload-icon {
        font-size: 30px;
    }
    
    .upload-music-area .upload-text {
        font-size: 13px;
    }
    
    .music-search-wrap .music-search-input {
        font-size: 13px;
        padding: 10px 14px 10px 38px;
    }
    
    .music-results {
        max-height: 300px;
    }
}

/* ============================================================
   НОВОСТИ - ПИЗДАТЫЙ СТИЛЬ
   ============================================================ */

/* ----- ИСТОРИИ В ЛЕНТЕ НОВОСТЕЙ ----- */
.feed-stories {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-bottom: 16px;
    align-items: center;
}

.feed-stories::-webkit-scrollbar {
    display: none;
}

.feed-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    width: 72px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feed-story-item:hover {
    transform: translateY(-4px) scale(1.05);
}

.feed-story-item:active {
    transform: scale(0.92);
}

.feed-story-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #FF6B00, #E53935, #7C3AED, #1A73E8);
    box-shadow: 0 4px 16px rgba(255,107,0,0.2);
    transition: all 0.3s;
    position: relative;
}

.feed-story-item:hover .feed-story-avatar {
    box-shadow: 0 8px 32px rgba(255,107,0,0.35);
}

.feed-story-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: var(--bg-card);
}

.feed-story-avatar-inner img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-card);
}

.feed-story-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    max-width: 64px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.feed-story-item:hover .feed-story-name {
    color: var(--text);
}

/* Просмотренная история */
.feed-story-item.viewed .feed-story-avatar {
    background: var(--border);
    box-shadow: none;
}

.feed-story-item.viewed .feed-story-avatar-inner {
    border: 2px solid var(--border);
}

/* Активная история (сейчас в процессе) */
.feed-story-item.active .feed-story-avatar {
    background: linear-gradient(135deg, #FF6B00, #FF8C00, #FFD700);
    box-shadow: 0 4px 24px rgba(255,107,0,0.4);
    animation: storyGlow 1.5s ease-in-out infinite;
}

@keyframes storyGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(255,107,0,0.3); }
    50% { box-shadow: 0 4px 32px rgba(255,107,0,0.6); }
}

/* Premium бейдж на истории */
.feed-story-premium-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--premium);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 20px var(--premium-glow);
    animation: premiumPulse 2s ease-in-out infinite;
}

/* Кнопка "Добавить историю" в ленте */
.feed-story-add {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-muted);
    background: var(--bg-card-hover);
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.feed-story-add:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-glow);
    transform: scale(1.05);
}

.feed-story-add:active {
    transform: scale(0.92);
}

.feed-story-add-label {
    font-size: 8px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 2px;
}

/* ОБЩИЙ КОНТЕЙНЕР НОВОСТЕЙ */
.news-feed {
    max-width: 100%;
    margin: 0 auto;
}

/* КАРТОЧКА ПОСТА */
.post-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 16px;
    transition: all var(--transition);
    box-shadow: var(--shadow);
    position: relative;
}

.post-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* ШАПКА ПОСТА */
.post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 6px;
    cursor: pointer;
}

.post-header .post-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.post-header .post-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: all 0.3s;
}

.post-header .post-avatar img:hover {
    border-color: var(--primary);
    transform: scale(1.05);
}

.post-header .post-avatar .premium-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--premium);
    animation: spin 6s linear infinite;
    pointer-events: none;
    box-shadow: 0 0 20px var(--premium-glow);
}

.post-header .post-avatar .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background: var(--success);
    box-shadow: 0 0 12px rgba(52,168,83,0.4);
}

.post-header .post-user-info {
    flex: 1;
    min-width: 0;
}

.post-header .post-user-info .post-username {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-header .post-user-info .post-username .premium-badge {
    background: linear-gradient(135deg, var(--premium), #FF8C00);
    color: white;
    font-size: 10px;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    font-weight: 700;
    animation: premiumPulse 2s ease-in-out infinite;
}

.post-header .post-user-info .post-time {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-header .post-user-info .post-time i {
    font-size: 10px;
}

.post-header .post-more-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    transition: all 0.3s;
}

.post-header .post-more-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text);
}

/* КОНТЕНТ ПОСТА */
.post-content {
    padding: 6px 18px 10px;
}

.post-content .post-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    word-wrap: break-word;
    margin-bottom: 6px;
}

.post-content .post-text .hashtag {
    color: var(--primary);
    font-weight: 500;
    cursor: pointer;
}

.post-content .post-text .hashtag:hover {
    text-decoration: underline;
}

.post-content .post-text .mention {
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.post-content .post-text .mention:hover {
    text-decoration: underline;
}

/* ============================================================
   МЕДИА В ПОСТЕ - КВАДРАТНЫЙ ФОРМАТ (1:1)
   ============================================================ */

.post-media {
    margin-top: 10px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg);
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: clamp(280px, 45vw, 600px);
    /* минимум 280px, средний 45% от ширины экрана, максимум 600px */
}

.post-media img,
.post-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.post-media img {
    transition: all 0.4s;
    cursor: pointer;
}

.post-media img:hover {
    transform: scale(1.02);
    filter: brightness(0.95);
}

.post-media video {
    background: #000;
}

/* ============================================================
   КНОПКИ НА ФОТО (СКАЧАТЬ, УВЕЛИЧИТЬ)
   ============================================================ */
.post-media .media-actions {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.post-media:hover .media-actions {
    opacity: 1;
}

.post-media .media-actions .media-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    flex-shrink: 0;
    z-index: 11;
}

.post-media .media-actions .media-btn:hover {
    transform: scale(1.12);
}

/* Кнопка скачать */
.post-media .media-actions .download-btn:hover {
    background: var(--success);
    box-shadow: 0 0 20px rgba(52, 168, 83, 0.4);
}

/* Кнопка увеличить */
.post-media .media-actions .view-btn:hover {
    background: var(--primary);
    box-shadow: 0 0 20px var(--primary-glow);
}

/* ============================================================
   ДЛЯ ВИДЕО - КНОПКИ СКРЫТЫ
   ============================================================ */
.post-media.video-post .media-actions {
    display: none !important;
}

/* ============================================================
   ДЕЙСТВИЯ ПОСТА
   ============================================================ */
.post-actions {
    display: flex;
    padding: 6px 12px 10px;
    border-top: 1px solid var(--border);
    gap: 4px;
}

.post-actions .action-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.post-actions .action-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text);
    transform: translateY(-1px);
}

.post-actions .action-btn:active {
    transform: scale(0.95);
}

.post-actions .action-btn.liked {
    color: var(--danger);
}

.post-actions .action-btn.liked i {
    animation: heartBeat 0.4s ease;
}

.post-actions .action-btn .action-count {
    font-weight: 600;
    font-size: 12px;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ============================================================
   КОММЕНТАРИИ
   ============================================================ */
.comments-section {
    padding: 0 18px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-card-hover);
}

.comments-section .comments-list {
    max-height: 200px;
    overflow-y: auto;
    margin: 8px 0;
}

.comments-section .comments-list::-webkit-scrollbar {
    width: 3px;
}

.comments-section .comments-list::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

.comments-section .comment-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
}

.comments-section .comment-item:last-child {
    border-bottom: none;
}

.comments-section .comment-item .comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.comments-section .comment-item .comment-content {
    flex: 1;
    min-width: 0;
}

.comments-section .comment-item .comment-content .comment-author {
    font-weight: 600;
    font-size: 12px;
    color: var(--text);
}

.comments-section .comment-item .comment-content .comment-text {
    font-size: 13px;
    color: var(--text-secondary);
    word-wrap: break-word;
}

.comments-section .comment-item .comment-content .comment-time {
    font-size: 10px;
    color: var(--text-muted);
}

.comments-section .comment-input-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.comments-section .comment-input-wrap input {
    flex: 1;
    min-width: 100px;
    padding: 8px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: all 0.3s;
}

.comments-section .comment-input-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.comments-section .comment-input-wrap .send-comment-btn {
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    font-size: 13px;
}

.comments-section .comment-input-wrap .send-comment-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.02);
}

.comments-section .comment-input-wrap .emoji-btn {
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
}

.comments-section .comment-input-wrap .emoji-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
}

/* ============================================================
   ПУСТОЕ СОСТОЯНИЕ
   ============================================================ */
.feed-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.feed-empty .empty-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.3;
}

.feed-empty .empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-secondary);
}

.feed-empty .empty-sub {
    font-size: 14px;
    margin-top: 4px;
}

/* ============================================================
   ФИЛЬТРЫ
   ============================================================ */
.feed-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.feed-filters .filter-btn {
    padding: 6px 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
}

.feed-filters .filter-btn:hover {
    border-color: var(--primary);
    color: var(--text);
    transform: translateY(-2px);
}

.feed-filters .filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 16px var(--primary-glow);
}

/* ============================================================
   АНИМАЦИИ
   ============================================================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes premiumPulse {
    0%, 100% { box-shadow: 0 0 10px var(--premium-glow); }
    50% { box-shadow: 0 0 30px var(--premium-glow); }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 768px) {
    .post-card {
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }
    
    .post-header {
        padding: 10px 14px 4px !important;
        gap: 10px !important;
    }
    
    .post-header .post-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    .post-header .post-user-info .post-username {
        font-size: 13px !important;
    }
    
    .post-content {
        padding: 4px 14px 8px !important;
    }
    
    .post-content .post-text {
        font-size: 14px !important;
    }
    
    .post-media {
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .post-actions {
        padding: 4px 8px 8px !important;
        gap: 2px !important;
    }
    
    .post-actions .action-btn {
        font-size: 11px !important;
        padding: 6px 0 !important;
    }
    
    .comments-section {
        padding: 0 14px 12px !important;
    }
    
    .comments-section .comment-item .comment-avatar {
        width: 26px !important;
        height: 26px !important;
    }
    
    .feed-filters .filter-btn {
        font-size: 11px !important;
        padding: 4px 12px !important;
    }

    .feed-stories {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    
    .feed-story-item {
        width: 60px;
    }
    
    .feed-story-avatar {
        width: 52px;
        height: 52px;
    }
    
    .feed-story-add {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    
    .feed-story-name {
        font-size: 9px;
        max-width: 52px;
    }
    
    .post-media .media-actions .media-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .post-media {
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .post-header .post-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    .feed-stories {
        padding: 8px 10px;
        gap: 8px;
    }
    
    .feed-story-item {
        width: 52px;
    }
    
    .feed-story-avatar {
        width: 44px;
        height: 44px;
    }
    
    .feed-story-add {
        width: 44px;
        height: 44px;
        font-size: 16px;
        border-width: 2px;
    }
    
    .feed-story-name {
        font-size: 8px;
        max-width: 44px;
    }
    
    .post-media .media-actions .media-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .post-media .media-actions {
        bottom: 10px;
        right: 10px;
        gap: 6px;
    }
}

/* Кнопка увеличить */
.post-media .media-actions .view-btn {
    background: rgba(0, 0, 0, 0.75);
}

.post-media .media-actions .view-btn:hover {
    background: var(--primary);
    box-shadow: 0 0 20px var(--primary-glow);
}

/* ============================================================
   ДЛЯ ВИДЕО - КНОПКИ СКРЫТЫ
   ============================================================ */
.post-media.video-post .media-actions {
    display: none !important;
}

/* ============================================================
   ДЕЙСТВИЯ ПОСТА
   ============================================================ */
.post-actions {
    display: flex;
    padding: 6px 12px 10px;
    border-top: 1px solid var(--border);
    gap: 4px;
}

.post-actions .action-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.post-actions .action-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text);
    transform: translateY(-1px);
}

.post-actions .action-btn:active {
    transform: scale(0.95);
}

.post-actions .action-btn.liked {
    color: var(--danger);
}

.post-actions .action-btn.liked i {
    animation: heartBeat 0.4s ease;
}

.post-actions .action-btn .action-count {
    font-weight: 600;
    font-size: 12px;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ============================================================
   КОММЕНТАРИИ
   ============================================================ */
.comments-section {
    padding: 0 18px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-card-hover);
}

.comments-section .comments-list {
    max-height: 200px;
    overflow-y: auto;
    margin: 8px 0;
}

.comments-section .comments-list::-webkit-scrollbar {
    width: 3px;
}

.comments-section .comments-list::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

.comments-section .comment-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
}

.comments-section .comment-item:last-child {
    border-bottom: none;
}

.comments-section .comment-item .comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.comments-section .comment-item .comment-content {
    flex: 1;
    min-width: 0;
}

.comments-section .comment-item .comment-content .comment-author {
    font-weight: 600;
    font-size: 12px;
    color: var(--text);
}

.comments-section .comment-item .comment-content .comment-text {
    font-size: 13px;
    color: var(--text-secondary);
    word-wrap: break-word;
}

.comments-section .comment-item .comment-content .comment-time {
    font-size: 10px;
    color: var(--text-muted);
}

.comments-section .comment-input-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.comments-section .comment-input-wrap input {
    flex: 1;
    min-width: 100px;
    padding: 8px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: all 0.3s;
}

.comments-section .comment-input-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.comments-section .comment-input-wrap .send-comment-btn {
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    font-size: 13px;
}

.comments-section .comment-input-wrap .send-comment-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.02);
}

.comments-section .comment-input-wrap .emoji-btn {
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
}

.comments-section .comment-input-wrap .emoji-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
}

/* ============================================================
   ПУСТОЕ СОСТОЯНИЕ
   ============================================================ */
.feed-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.feed-empty .empty-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.3;
}

.feed-empty .empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-secondary);
}

.feed-empty .empty-sub {
    font-size: 14px;
    margin-top: 4px;
}

/* ============================================================
   ФИЛЬТРЫ
   ============================================================ */
.feed-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.feed-filters .filter-btn {
    padding: 6px 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
}

.feed-filters .filter-btn:hover {
    border-color: var(--primary);
    color: var(--text);
    transform: translateY(-2px);
}

.feed-filters .filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 16px var(--primary-glow);
}

/* ============================================================
   АНИМАЦИИ
   ============================================================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes premiumPulse {
    0%, 100% { box-shadow: 0 0 10px var(--premium-glow); }
    50% { box-shadow: 0 0 30px var(--premium-glow); }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 768px) {
    .post-card {
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }
    
    .post-header {
        padding: 10px 14px 4px !important;
        gap: 10px !important;
    }
    
    .post-header .post-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    .post-header .post-user-info .post-username {
        font-size: 13px !important;
    }
    
    .post-content {
        padding: 4px 14px 8px !important;
    }
    
    .post-content .post-text {
        font-size: 14px !important;
    }
    
    .post-media {
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .post-actions {
        padding: 4px 8px 8px !important;
        gap: 2px !important;
    }
    
    .post-actions .action-btn {
        font-size: 11px !important;
        padding: 6px 0 !important;
    }
    
    .comments-section {
        padding: 0 14px 12px !important;
    }
    
    .comments-section .comment-item .comment-avatar {
        width: 26px !important;
        height: 26px !important;
    }
    
    .feed-filters .filter-btn {
        font-size: 11px !important;
        padding: 4px 12px !important;
    }

    .feed-stories {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    
    .feed-story-item {
        width: 60px;
    }
    
    .feed-story-avatar {
        width: 52px;
        height: 52px;
    }
    
    .feed-story-add {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    
    .feed-story-name {
        font-size: 9px;
        max-width: 52px;
    }
}

@media (max-width: 480px) {
    .post-media {
        aspect-ratio: 1 / 1 !important;
        max-width: 100% !important;
    }
    
    .post-header .post-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    .feed-stories {
        padding: 8px 10px;
        gap: 8px;
    }
    
    .feed-story-item {
        width: 52px;
    }
    
    .feed-story-avatar {
        width: 44px;
        height: 44px;
    }
    
    .feed-story-add {
        width: 44px;
        height: 44px;
        font-size: 16px;
        border-width: 2px;
    }
    
    .feed-story-name {
        font-size: 8px;
        max-width: 44px;
    }
}
/* ============================================================
   МЕДИА КНОПКИ (СКАЧАТЬ, УВЕЛИЧИТЬ)
   ============================================================ */
.post-media .media-actions {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: row; /* кнопки в ряд */
    gap: 10px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.post-media:hover .media-actions {
    opacity: 1;
}

.post-media .media-actions .media-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    position: relative; /* убираем absolute */
    flex-shrink: 0;
    z-index: 11;
}

.post-media .media-actions .media-btn:hover {
    transform: scale(1.12);
}

/* Кнопка скачать */
.post-media .media-actions .download-btn {
    background: rgba(0, 0, 0, 0.75);
}

.post-media .media-actions .download-btn:hover {
    background: var(--success);
    box-shadow: 0 0 20px rgba(52, 168, 83, 0.4);
}

/* Кнопка увеличить */
.post-media .media-actions .view-btn {
    background: rgba(0, 0, 0, 0.75);
}

.post-media .media-actions .view-btn:hover {
    background: var(--primary);
    box-shadow: 0 0 20px var(--primary-glow);
}

/* Кнопка play (только для видео, но скрыта) */
.post-media .media-actions .play-btn {
    display: none !important;
}

/* ============================================================
   ДЛЯ ВИДЕО - ВСЕ КНОПКИ СКРЫТЫ
   ============================================================ */
.post-media.video-post .media-actions {
    display: none !important;
}
/* ============================================================
   ДЕЙСТВИЯ ПОСТА
   ============================================================ */
.post-actions {
    display: flex;
    padding: 6px 12px 10px;
    border-top: 1px solid var(--border);
    gap: 4px;
}

.post-actions .action-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.post-actions .action-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text);
    transform: translateY(-1px);
}

.post-actions .action-btn:active {
    transform: scale(0.95);
}

.post-actions .action-btn.liked {
    color: var(--danger);
}

.post-actions .action-btn.liked i {
    animation: heartBeat 0.4s ease;
}

.post-actions .action-btn .action-count {
    font-weight: 600;
    font-size: 12px;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ============================================================
   КОММЕНТАРИИ
   ============================================================ */
.comments-section {
    padding: 0 18px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-card-hover);
}

.comments-section .comments-list {
    max-height: 200px;
    overflow-y: auto;
    margin: 8px 0;
}

.comments-section .comments-list::-webkit-scrollbar {
    width: 3px;
}

.comments-section .comments-list::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

.comments-section .comment-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
}

.comments-section .comment-item:last-child {
    border-bottom: none;
}

.comments-section .comment-item .comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.comments-section .comment-item .comment-content {
    flex: 1;
    min-width: 0;
}

.comments-section .comment-item .comment-content .comment-author {
    font-weight: 600;
    font-size: 12px;
    color: var(--text);
}

.comments-section .comment-item .comment-content .comment-text {
    font-size: 13px;
    color: var(--text-secondary);
    word-wrap: break-word;
}

.comments-section .comment-item .comment-content .comment-time {
    font-size: 10px;
    color: var(--text-muted);
}

.comments-section .comment-input-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.comments-section .comment-input-wrap input {
    flex: 1;
    min-width: 100px;
    padding: 8px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: all 0.3s;
}

.comments-section .comment-input-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.comments-section .comment-input-wrap .send-comment-btn {
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    font-size: 13px;
}

.comments-section .comment-input-wrap .send-comment-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.02);
}

.comments-section .comment-input-wrap .emoji-btn {
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
}

.comments-section .comment-input-wrap .emoji-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
}

/* ============================================================
   ПУСТОЕ СОСТОЯНИЕ
   ============================================================ */
.feed-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.feed-empty .empty-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.3;
}

.feed-empty .empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-secondary);
}

.feed-empty .empty-sub {
    font-size: 14px;
    margin-top: 4px;
}

/* ============================================================
   ФИЛЬТРЫ
   ============================================================ */
.feed-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.feed-filters .filter-btn {
    padding: 6px 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
}

.feed-filters .filter-btn:hover {
    border-color: var(--primary);
    color: var(--text);
    transform: translateY(-2px);
}

.feed-filters .filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 16px var(--primary-glow);
}

/* ============================================================
   АНИМАЦИИ
   ============================================================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes premiumPulse {
    0%, 100% { box-shadow: 0 0 10px var(--premium-glow); }
    50% { box-shadow: 0 0 30px var(--premium-glow); }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 768px) {
    .post-card {
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }
    
    .post-header {
        padding: 10px 14px 4px !important;
        gap: 10px !important;
    }
    
    .post-header .post-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    .post-header .post-user-info .post-username {
        font-size: 13px !important;
    }
    
    .post-content {
        padding: 4px 14px 8px !important;
    }
    
    .post-content .post-text {
        font-size: 14px !important;
    }
    
    .post-media img,
    .post-media video {
        max-height: 220px !important;
    }
    
    .post-actions {
        padding: 4px 8px 8px !important;
        gap: 2px !important;
    }
    
    .post-actions .action-btn {
        font-size: 11px !important;
        padding: 6px 0 !important;
    }
    
    .comments-section {
        padding: 0 14px 12px !important;
    }
    
    .comments-section .comment-item .comment-avatar {
        width: 26px !important;
        height: 26px !important;
    }
    
    .feed-filters .filter-btn {
        font-size: 11px !important;
        padding: 4px 12px !important;
    }

    .feed-stories {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    
    .feed-story-item {
        width: 60px;
    }
    
    .feed-story-avatar {
        width: 52px;
        height: 52px;
    }
    
    .feed-story-add {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    
    .feed-story-name {
        font-size: 9px;
        max-width: 52px;
    }
}

@media (max-width: 480px) {
    .post-media img,
    .post-media video {
        max-height: 180px !important;
    }
    
    .post-header .post-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    .feed-stories {
        padding: 8px 10px;
        gap: 8px;
    }
    
    .feed-story-item {
        width: 52px;
    }
    
    .feed-story-avatar {
        width: 44px;
        height: 44px;
    }
    
    .feed-story-add {
        width: 44px;
        height: 44px;
        font-size: 16px;
        border-width: 2px;
    }
    
    .feed-story-name {
        font-size: 8px;
        max-width: 44px;
    }
}
/* ============================================================
   ИСПРАВЛЕНИЕ АВАТАРОК И ВЕРСТКИ В НОВОСТЯХ
   ============================================================ */

/* УМЕНЬШАЕМ АВАТАРКИ В ПОСТАХ */
.post-header .post-avatar {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
}

.post-header .post-avatar img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--border) !important;
}

.post-header .post-avatar .premium-ring {
    inset: -3px !important;
    border-width: 2px !important;
}

.post-header .post-avatar .online-dot {
    width: 10px !important;
    height: 10px !important;
    bottom: 1px !important;
    right: 1px !important;
    border-width: 2px !important;
}

/* УМЕНЬШАЕМ АВАТАРКИ В КОММЕНТАРИЯХ */
.comments-section .comment-item .comment-avatar {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

/* УМЕНЬШАЕМ АВАТАРКИ В СОЗДАНИИ ПОСТА */
.create-post-container .post-avatar {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
}

.create-post-container .post-avatar img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--border) !important;
}

.create-post-container .post-avatar .premium-ring {
    inset: -3px !important;
    border-width: 2px !important;
}

.create-post-container .post-avatar .online-dot {
    width: 10px !important;
    height: 10px !important;
    bottom: 1px !important;
    right: 1px !important;
    border-width: 2px !important;
}

/* УМЕНЬШАЕМ АВАТАРКИ В РЕКОМЕНДАЦИЯХ */
.widget-item .avatar {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
}

.widget-item .avatar img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--border) !important;
}

.widget-item .avatar .premium-badge {
    width: 14px !important;
    height: 14px !important;
    font-size: 7px !important;
    bottom: -2px !important;
    right: -2px !important;
}

/* ============================================================
   КОМПАКТНАЯ ВЕРСТКА НОВОСТЕЙ
   ============================================================ */

.post-card {
    margin-bottom: 12px !important;
    border-radius: 12px !important;
}

.post-header {
    padding: 10px 14px 4px !important;
    gap: 10px !important;
}

.post-header .post-user-info .post-username {
    font-size: 14px !important;
}

.post-header .post-user-info .post-time {
    font-size: 11px !important;
}

.post-header .post-user-info .post-username .premium-badge {
    font-size: 8px !important;
    padding: 1px 6px !important;
}

.post-content {
    padding: 4px 14px 8px !important;
}

.post-content .post-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.post-actions {
    padding: 4px 8px 8px !important;
    gap: 2px !important;
}

.post-actions .action-btn {
    font-size: 12px !important;
    padding: 4px 0 !important;
}

.post-actions .action-btn .action-count {
    font-size: 11px !important;
}

/* КОММЕНТАРИИ КОМПАКТНО */
.comments-section {
    padding: 0 14px 12px !important;
}

.comments-section .comment-item {
    padding: 4px 0 !important;
    gap: 8px !important;
}

.comments-section .comment-item .comment-content .comment-author {
    font-size: 11px !important;
}

.comments-section .comment-item .comment-content .comment-text {
    font-size: 12px !important;
}

.comments-section .comment-input-wrap input {
    font-size: 12px !important;
    padding: 6px 12px !important;
}

.comments-section .comment-input-wrap .send-comment-btn {
    font-size: 12px !important;
    padding: 6px 14px !important;
}

/* СОЗДАНИЕ ПОСТА КОМПАКТНО */
.create-post-container {
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
}

.create-post-container .post-input-area {
    gap: 10px !important;
}

.create-post-container .post-input-wrapper textarea {
    font-size: 13px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
}

.create-post-container .post-actions-bar .media-buttons button {
    font-size: 11px !important;
    padding: 4px 10px !important;
}

.create-post-container .btn-post {
    font-size: 13px !important;
    padding: 6px 18px !important;
}

/* ФИЛЬТРЫ КОМПАКТНО */
.feed-filters {
    gap: 6px !important;
    margin-bottom: 12px !important;
}

.feed-filters .filter-btn {
    font-size: 12px !important;
    padding: 4px 14px !important;
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 768px) {
    .feed-stories {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    
    .feed-story-item {
        width: 60px;
    }
    
    .feed-story-avatar {
        width: 52px;
        height: 52px;
    }
    
    .feed-story-add {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    
    .feed-story-name {
        font-size: 9px;
        max-width: 52px;
    }
    
    .post-header .post-avatar {
        width: 34px !important;
        height: 34px !important;
    }
    
    .post-header .post-avatar img {
        width: 34px !important;
        height: 34px !important;
    }
    
    .post-header .post-avatar .online-dot {
        width: 8px !important;
        height: 8px !important;
    }
    
    .post-header .post-user-info .post-username {
        font-size: 13px !important;
    }
    
    .create-post-container .post-avatar {
        width: 34px !important;
        height: 34px !important;
    }
    
    .create-post-container .post-avatar img {
        width: 34px !important;
        height: 34px !important;
    }
    
    .widget-item .avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    .widget-item .avatar img {
        width: 30px !important;
        height: 30px !important;
    }
}

@media (max-width: 480px) {
    .feed-stories {
        padding: 8px 10px;
        gap: 8px;
    }
    
    .feed-story-item {
        width: 52px;
    }
    
    .feed-story-avatar {
        width: 44px;
        height: 44px;
    }
    
    .feed-story-add {
        width: 44px;
        height: 44px;
        font-size: 16px;
        border-width: 2px;
    }
    
    .feed-story-name {
        font-size: 8px;
        max-width: 44px;
    }
    
    .post-header .post-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    .post-header .post-avatar img {
        width: 30px !important;
        height: 30px !important;
    }
    
    .create-post-container .post-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    .create-post-container .post-avatar img {
        width: 30px !important;
        height: 30px !important;
    }
    
    .widget-item .avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    .widget-item .avatar img {
        width: 28px !important;
        height: 28px !important;
    }
}
/* ============================================================
   ГОСТИ - ПИЗДАТЫЙ СТИЛЬ ДЛЯ PREMIUM
   ============================================================ */

/* КОНТЕЙНЕР ГОСТЕЙ */
.visitors-container {
    padding: 4px 0;
}

/* КАРТОЧКА ГОСТЯ */
.visitor-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all var(--transition);
    cursor: pointer;
    margin-bottom: 6px;
    position: relative;
}

.visitor-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: var(--shadow-hover);
}

.visitor-item:active {
    transform: scale(0.98);
}

/* АВАТАРКА ГОСТЯ */
.visitor-item .visitor-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.visitor-item .visitor-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: all 0.3s;
}

.visitor-item:hover .visitor-avatar img {
    border-color: var(--primary);
    transform: scale(1.05);
}

.visitor-item .visitor-avatar .premium-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--premium);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 20px var(--premium-glow);
    animation: premiumPulse 2s ease-in-out infinite;
}

.visitor-item .visitor-avatar .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background: var(--success);
    box-shadow: 0 0 12px rgba(52,168,83,0.4);
}

.visitor-item .visitor-avatar .online-dot.offline {
    background: var(--text-muted);
    box-shadow: none;
}

/* ИНФО ГОСТЯ */
.visitor-item .visitor-info {
    flex: 1;
    min-width: 0;
}

.visitor-item .visitor-info .visitor-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.visitor-item .visitor-info .visitor-name .premium-icon {
    color: var(--premium);
    font-size: 14px;
    animation: premiumPulse 2s ease-in-out infinite;
}

.visitor-item .visitor-info .visitor-detail {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.visitor-item .visitor-info .visitor-detail i {
    font-size: 10px;
}

/* ВРЕМЯ ПОСЕЩЕНИЯ */
.visitor-item .visitor-time {
    text-align: right;
    flex-shrink: 0;
}

.visitor-item .visitor-time .time-main {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.visitor-item .visitor-time .time-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* КОЛ-ВО ПОСЕЩЕНИЙ */
.visitor-item .visitor-count {
    background: var(--bg-card-hover);
    border-radius: var(--radius-full);
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.visitor-item .visitor-count.many {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
}

/* НОВЫЙ ПОСЕТИТЕЛЬ (первый раз) */
.visitor-item .visitor-new-badge {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

/* ПУСТОЕ СОСТОЯНИЕ */
.visitors-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.visitors-empty .empty-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.3;
}

.visitors-empty .empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

.visitors-empty .empty-sub {
    font-size: 13px;
    margin-top: 4px;
}

/* PREMIUM ЗАМОК */
.premium-lock {
    background: rgba(255,107,0,0.05);
    border: 2px solid var(--premium);
    border-radius: var(--radius-md);
    padding: 30px 20px;
    text-align: center;
    color: var(--premium);
}

.premium-lock .lock-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.premium-lock .lock-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 4px;
}

.premium-lock .lock-desc {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 16px;
}

.premium-lock .lock-btn {
    padding: 10px 30px;
    background: linear-gradient(135deg, var(--premium), #FF8C00);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    box-shadow: 0 4px 20px var(--premium-glow);
}

.premium-lock .lock-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 40px var(--premium-glow);
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    .visitor-item {
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .visitor-item .visitor-avatar {
        width: 40px;
        height: 40px;
    }
    
    .visitor-item .visitor-info .visitor-name {
        font-size: 13px;
    }
    
    .visitor-item .visitor-time .time-main {
        font-size: 12px;
    }
    
    .visitor-item .visitor-time .time-date {
        font-size: 10px;
    }
    
    .premium-lock {
        padding: 20px 16px;
    }
    
    .premium-lock .lock-icon {
        font-size: 36px;
    }
    
    .premium-lock .lock-title {
        font-size: 17px;
    }
}

/* АНИМАЦИЯ ДЛЯ НОВЫХ ГОСТЕЙ */
.visitor-item.new-visitor {
    animation: visitorFlash 1s ease;
    border-color: var(--primary) !important;
    background: var(--primary-glow) !important;
}

@keyframes visitorFlash {
    0% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

/* СВЕЖИЙ ВИЗИТ (менее минуты) */
.visitor-item .visitor-time .time-main {
    position: relative;
}

.visitor-item .visitor-time .time-main .fresh-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    margin-left: 4px;
    animation: pulse 1s ease-in-out infinite;
}

/* ============================================================
   ЧАТ - ПИЗДАТЫЙ СТИЛЬ С ИКОНКОЙ ЗВОНКА
   ============================================================ */

/* ХЕДЕР ЧАТА - ОБНОВЛЕННЫЙ */
.chat-container .chat-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: var(--bg-secondary) !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.chat-container .chat-header .avatar-wrapper {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

.chat-container .chat-header .avatar-wrapper:hover {
    transform: scale(1.05) !important;
}

.chat-container .chat-header .avatar-wrapper img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--primary) !important;
    transition: all 0.3s !important;
}

.chat-container .chat-header .avatar-wrapper .online-status {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid var(--bg-secondary) !important;
    background: var(--text-muted) !important;
}

.chat-container .chat-header .avatar-wrapper .online-status.online {
    background: var(--success) !important;
    box-shadow: 0 0 12px rgba(52,168,83,0.4) !important;
    animation: pulse 2s ease-in-out infinite !important;
}

.chat-container .chat-header .chat-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.chat-container .chat-header .chat-info .name {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.chat-container .chat-header .chat-info .name .premium-icon {
    color: var(--premium) !important;
    font-size: 14px !important;
    animation: premiumPulse 2s ease-in-out infinite !important;
}

.chat-container .chat-header .chat-info .status {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.chat-container .chat-header .chat-info .status .typing-dots {
    display: inline-flex !important;
    gap: 3px !important;
    align-items: center !important;
}

.chat-container .chat-header .chat-info .status .typing-dots span {
    width: 5px !important;
    height: 5px !important;
    background: var(--primary) !important;
    border-radius: 50% !important;
    animation: typingBounce 1.2s infinite !important;
}

.chat-container .chat-header .chat-info .status .typing-dots span:nth-child(2) {
    animation-delay: 0.2s !important;
}

.chat-container .chat-header .chat-info .status .typing-dots span:nth-child(3) {
    animation-delay: 0.4s !important;
}

/* ===== КНОПКИ В ХЕДЕРЕ (ЗВОНОК СВЕРХУ) ===== */
.chat-container .chat-header .chat-actions {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}

.chat-container .chat-header .chat-actions .action-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    font-size: 18px !important;
    transition: all 0.3s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.chat-container .chat-header .chat-actions .action-btn:hover {
    background: var(--bg-card-hover) !important;
    color: var(--text) !important;
    transform: scale(1.1) !important;
}

.chat-container .chat-header .chat-actions .action-btn:active {
    transform: scale(0.9) !important;
}

/* КНОПКА ЗВОНКА - ОСОБАЯ */
.chat-container .chat-header .chat-actions .call-btn {
    background: var(--success) !important;
    color: white !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
    box-shadow: 0 4px 16px rgba(52,168,83,0.3) !important;
}

.chat-container .chat-header .chat-actions .call-btn:hover {
    background: #2D9248 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 24px rgba(52,168,83,0.4) !important;
}

.chat-container .chat-header .chat-actions .call-btn:active {
    transform: scale(0.9) !important;
}

/* ВИДЕОЗВОНОК */
.chat-container .chat-header .chat-actions .video-call-btn {
    background: var(--primary) !important;
    color: white !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
    box-shadow: 0 4px 16px var(--primary-glow) !important;
}

.chat-container .chat-header .chat-actions .video-call-btn:hover {
    background: var(--primary-dark) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 24px var(--primary-glow) !important;
}

/* РАЗДЕЛИТЕЛЬ В ХЕДЕРЕ */
.chat-container .chat-header .chat-actions .divider {
    width: 1px !important;
    height: 30px !important;
    background: var(--border) !important;
    margin: 0 2px !important;
}

/* ===== АНИМАЦИЯ ЗВОНКА ===== */
@keyframes ring {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(-5deg); }
    70% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.chat-container .chat-header .chat-actions .call-btn.ringing {
    animation: ring 0.8s ease infinite !important;
    background: var(--danger) !important;
    box-shadow: 0 4px 20px rgba(229,57,53,0.4) !important;
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media (max-width: 768px) {
    .chat-container .chat-header {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    
    .chat-container .chat-header .avatar-wrapper {
        width: 36px !important;
        height: 36px !important;
    }
    
    .chat-container .chat-header .chat-info .name {
        font-size: 14px !important;
    }
    
    .chat-container .chat-header .chat-actions .action-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
    }
    
    .chat-container .chat-header .chat-actions .call-btn,
    .chat-container .chat-header .chat-actions .video-call-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
}

/* ============================================================
   ЖИВОЙ ПОИСК ЛЮДЕЙ
   ============================================================ */

/* КОНТЕЙНЕР ПОИСКА */
.live-search-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* ПОЛЕ ВВОДА */
.live-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border-radius: var(--radius-full);
    padding: 0 18px;
    border: 2px solid var(--border);
    transition: all var(--transition);
}

.live-search-input-wrap:focus-within {
    border-color: var(--primary);
    background: var(--bg-input-focus);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.live-search-input-wrap .search-icon {
    color: var(--text-muted);
    font-size: 16px;
    margin-right: 10px;
}

.live-search-input-wrap .search-input {
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 15px;
    color: var(--text);
    width: 100%;
    outline: none;
    font-family: inherit;
}

.live-search-input-wrap .search-input::placeholder {
    color: var(--text-muted);
}

.live-search-input-wrap .search-clear {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    transition: all 0.3s;
}

.live-search-input-wrap .search-clear:hover {
    color: var(--danger);
    transform: scale(1.1);
}

.live-search-input-wrap .search-loader {
    display: none;
    color: var(--primary);
    font-size: 18px;
}

.live-search-input-wrap .search-loader.active {
    display: block;
}

/* РЕЗУЛЬТАТЫ ПОИСКА */
.live-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hover);
    max-height: 400px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    margin-top: 8px;
    animation: slideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.live-search-results.active {
    display: block;
}

.live-search-results::-webkit-scrollbar {
    width: 4px;
}

.live-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.live-search-results::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

.live-search-results::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ЭЛЕМЕНТ РЕЗУЛЬТАТА */
.live-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid var(--border);
}

.live-search-item:last-child {
    border-bottom: none;
}

.live-search-item:hover {
    background: var(--bg-card-hover);
    transform: translateX(4px);
}

.live-search-item .result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.live-search-item .result-avatar.premium {
    border-color: var(--premium);
    box-shadow: 0 0 20px var(--premium-glow);
}

.live-search-item .result-info {
    flex: 1;
    min-width: 0;
}

.live-search-item .result-info .result-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-search-item .result-info .result-name .premium-badge {
    font-size: 10px;
    color: var(--premium);
}

.live-search-item .result-info .result-username {
    font-size: 12px;
    color: var(--text-muted);
}

.live-search-item .result-info .result-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.live-search-item .result-status {
    font-size: 12px;
    flex-shrink: 0;
}

.live-search-item .result-status.online {
    color: var(--success);
}

.live-search-item .result-status.offline {
    color: var(--text-muted);
}

.live-search-item .result-action {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    flex-shrink: 0;
}

.live-search-item .result-action:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
}

.live-search-item .result-action.friend {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.live-search-item .result-action.friend:hover {
    background: var(--danger);
    border-color: var(--danger);
}

/* ПУСТОЕ СОСТОЯНИЕ */
.live-search-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
}

.live-search-empty .empty-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.3;
}

.live-search-empty .empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}

.live-search-empty .empty-sub {
    font-size: 13px;
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    .live-search-results {
        max-height: 300px;
        margin-top: 4px;
    }
    
    .live-search-item {
        padding: 8px 12px;
        gap: 10px;
    }
    
    .live-search-item .result-avatar {
        width: 32px;
        height: 32px;
    }
    
    .live-search-item .result-info .result-name {
        font-size: 13px;
    }
    
    .live-search-item .result-info .result-username {
        font-size: 11px;
    }
    
    .live-search-input-wrap .search-input {
        font-size: 14px;
        padding: 10px 0;
    }
}

/* ============================================================
   МОБИЛЬНАЯ НАВИГАЦИЯ - УЛУЧШЕННАЯ ВЕРСИЯ
   ============================================================ */

.bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border) !important;
    padding: 6px 0 env(safe-area-inset-bottom, 8px) !important;
    z-index: 100 !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
}

/* Тёмная тема */
[data-theme="dark"] .bottom-nav {
    background: rgba(20, 20, 42, 0.95) !important;
    border-top: 1px solid rgba(42, 42, 80, 0.6) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.3) !important;
}

.bottom-nav .nav-items {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
    gap: 2px !important;
}

.bottom-nav .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    color: var(--text-secondary) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    font-family: inherit !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    min-width: 48px !important;
    flex: 1 !important;
    max-width: 72px !important;
    border-radius: 12px !important;
    -webkit-tap-highlight-color: transparent !important;
}

.bottom-nav .nav-item i {
    font-size: 22px !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    line-height: 1 !important;
}

.bottom-nav .nav-item span {
    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    transition: all 0.25s ease !important;
}

/* Активное состояние */
.bottom-nav .nav-item.active {
    color: var(--primary) !important;
}

.bottom-nav .nav-item.active i {
    transform: translateY(-2px) scale(1.1) !important;
    color: var(--primary) !important;
    text-shadow: 0 0 20px var(--primary-glow) !important;
}

.bottom-nav .nav-item.active span {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Бейдж уведомлений */
.bottom-nav .nav-item .nav-badge {
    position: absolute !important;
    top: 0 !important;
    right: 2px !important;
    background: var(--danger) !important;
    color: white !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    padding: 1px 5px !important;
    border-radius: 50px !important;
    min-width: 14px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    display: none !important;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.4) !important;
    border: 1.5px solid var(--bg-secondary) !important;
}

.bottom-nav .nav-item .nav-badge.show {
    display: block !important;
    animation: badgePulse 2s ease-in-out infinite !important;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (768px и меньше)
   ============================================================ */
@media (max-width: 768px) {
    .bottom-nav {
        padding: 8px 0 env(safe-area-inset-bottom, 10px) !important;
    }
    
    .bottom-nav .nav-items {
        max-width: 100% !important;
        padding: 0 6px !important;
        gap: 0 !important;
    }
    
    .bottom-nav .nav-item {
        min-width: 40px !important;
        max-width: 64px !important;
        padding: 4px 4px !important;
        gap: 2px !important;
    }
    
    .bottom-nav .nav-item i {
        font-size: 20px !important;
    }
    
    .bottom-nav .nav-item span {
        font-size: 8px !important;
    }
    
    .bottom-nav .nav-item .nav-badge {
        font-size: 7px !important;
        min-width: 12px !important;
        padding: 1px 4px !important;
        top: -1px !important;
        right: 0 !important;
    }
    
    /* Убираем активный translate на мобильных для производительности */
    .bottom-nav .nav-item.active i {
        transform: scale(1.05) !important;
        translate: 0 !important;
    }
}

/* ============================================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ (400px и меньше)
   ============================================================ */
@media (max-width: 400px) {
    .bottom-nav {
        padding: 4px 0 env(safe-area-inset-bottom, 6px) !important;
    }
    
    .bottom-nav .nav-items {
        padding: 0 2px !important;
        gap: 0 !important;
    }
    
    .bottom-nav .nav-item {
        min-width: 32px !important;
        max-width: 56px !important;
        padding: 2px 2px !important;
    }
    
    .bottom-nav .nav-item i {
        font-size: 17px !important;
    }
    
    .bottom-nav .nav-item span {
        font-size: 7px !important;
        letter-spacing: 0 !important;
    }
    
    .bottom-nav .nav-item .nav-badge {
        font-size: 6px !important;
        min-width: 10px !important;
        padding: 0 3px !important;
        top: -2px !important;
        right: -2px !important;
    }
}

/* ============================================================
   ТАБЛЕТЫ (769px - 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .bottom-nav .nav-items {
        max-width: 600px !important;
    }
    
    .bottom-nav .nav-item {
        max-width: 80px !important;
        padding: 6px 12px !important;
    }
    
    .bottom-nav .nav-item i {
        font-size: 24px !important;
    }
    
    .bottom-nav .nav-item span {
        font-size: 10px !important;
    }
}

/* ============================================================
   ПК (1025px и больше) - навигация скрыта
   ============================================================ */
@media (min-width: 1025px) {
    .bottom-nav {
        display: none !important;
    }
}

/* ============================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ НАВИГАЦИИ
   ============================================================ */
.bottom-nav {
    animation: navSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

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

/* ============================================================
   ДОПОЛНИТЕЛЬНО: ДЛЯ iphone с вырезом (safe-area)
   ============================================================ */
@supports (padding: max(0px)) {
    .bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    }
}

/* ============================================================
   КОНТЕНТ ПРИЖАТ К ВЕРХУ ЭКРАНА
   ============================================================ */

/* Основной контейнер - убираем центрирование по вертикали */
.main-area {
    display: flex !important;
    align-items: flex-start !important; /* Прижимаем к верху */
    justify-content: center !important;
    padding: 12px 24px 100px !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
    min-height: auto !important; /* Убираем min-height */
    width: 100% !important;
    gap: 20px !important;
}

/* Центральная колонка - тоже прижата к верху */
.center {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 820px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-top: 0 !important;
}

/* Все карточки и контейнеры - без отступов сверху */
.card:first-child,
.post-premium:first-child,
.create-post-container:first-child,
.hero-section:first-child {
    margin-top: 0 !important;
}

/* Убираем лишние отступы в карточках */
.card .card-body {
    padding: 12px 16px !important;
}

/* Мобильная версия - всё прижато к верху */
@media (max-width: 768px) {
    .main-area {
        padding: 8px 8px 100px !important;
        align-items: flex-start !important;
        min-height: auto !important;
        gap: 0 !important;
    }
    
    .center {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Убираем отступы сверху у всех элементов */
    .hero-section,
    .quick-actions,
    .create-post-container,
    .post-premium,
    .card,
    .chat-container,
    .music-card,
    .profile-container {
        margin-top: 0 !important;
    }
    
    /* Первый элемент после хедера - без отступа */
    .center > *:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 400px) {
    .main-area {
        padding: 4px 4px 90px !important;
    }
}

/* ============================================================
   АНИМАЦИЯ ПОИСКА НА МОБИЛЬНЫХ
   ============================================================ */

.live-search-input-wrap {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.live-search-input-wrap.search-open {
    max-width: 200px !important;
    width: 200px !important;
    border-radius: 24px !important;
    border-color: var(--primary) !important;
    background: var(--bg-input-focus) !important;
    box-shadow: 0 0 0 4px var(--primary-glow) !important;
}

.live-search-input-wrap.search-open input {
    display: block !important;
}

.live-search-input-wrap.search-open .search-icon {
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    color: var(--primary) !important;
}

@media (max-width: 768px) {
    .live-search-input-wrap {
        max-width: 44px !important;
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: var(--bg-input) !important;
        border: 2px solid var(--border) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .live-search-input-wrap input {
        display: none !important;
        padding: 8px 12px !important;
        padding-left: 36px !important;
        font-size: 14px !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: var(--text) !important;
        font-family: inherit !important;
    }
    
    .live-search-input-wrap .search-icon {
        font-size: 20px !important;
        color: var(--text-secondary) !important;
        transition: all 0.3s ease !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: none !important;
    }
    
    .live-search-input-wrap .search-clear {
        display: none !important;
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: none !important;
        border: none !important;
        color: var(--text-muted) !important;
        cursor: pointer !important;
        font-size: 16px !important;
        padding: 4px !important;
    }
    
    .live-search-input-wrap .search-clear.show {
        display: block !important;
    }
    
    .live-search-input-wrap .search-loader {
        display: none !important;
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--primary) !important;
        font-size: 16px !important;
    }
    
    .live-search-input-wrap .search-loader.active {
        display: block !important;
    }
    
    .live-search-input-wrap.search-open {
        max-width: 200px !important;
        width: 200px !important;
        border-radius: 24px !important;
        border-color: var(--primary) !important;
        background: var(--bg-input-focus) !important;
        box-shadow: 0 0 0 4px var(--primary-glow) !important;
        padding: 0 12px !important;
    }
    
    .live-search-input-wrap.search-open input {
        display: block !important;
    }
    
    .live-search-input-wrap.search-open .search-icon {
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        color: var(--primary) !important;
    }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ ПОИСКА - КРУГЛАЯ КНОПКА
   ============================================================ */

@media (max-width: 768px) {
    /* КОНТЕЙНЕР ПОИСКА - ПРИЖАТ К ПРАВОМУ КРАЮ */
    .live-search-container {
        max-width: none !important;
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        margin-left: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        position: relative !important;
    }
    
    /* ПОЛЕ ВВОДА - КРУГЛАЯ КНОПКА */
    .live-search-input-wrap {
        max-width: 44px !important;
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: var(--bg-input) !important;
        border: 2px solid var(--border) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        flex: none !important;
        gap: 0 !important;
    }
    
    /* РАСКРЫТОЕ СОСТОЯНИЕ */
    .live-search-input-wrap.active {
        max-width: 220px !important;
        width: 220px !important;
        border-radius: 24px !important;
        border-color: var(--primary) !important;
        background: var(--bg-input-focus) !important;
        box-shadow: 0 0 0 4px var(--primary-glow) !important;
        flex: none !important;
        padding: 0 14px !important;
        gap: 0 !important;
    }
    
    /* ПОЛЕ ВВОДА - СКРЫТО ПО УМОЛЧАНИЮ */
    .live-search-input-wrap .search-input {
        display: none !important;
        padding: 8px 0 !important;
        padding-left: 6px !important;
        font-size: 14px !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: var(--text) !important;
        font-family: inherit !important;
        min-width: 120px !important;
    }
    
    /* ПОЛЕ ВВОДА - ПОКАЗЫВАЕМ ПРИ РАСКРЫТИИ */
    .live-search-input-wrap.active .search-input {
        display: block !important;
    }
    
    /* ИКОНКА ЛУПЫ */
    .live-search-input-wrap .search-icon {
        font-size: 20px !important;
        color: var(--text-secondary) !important;
        transition: all 0.3s ease !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: none !important;
        margin: 0 !important;
    }
    
    /* ИКОНКА ЛУПЫ ПРИ РАСКРЫТИИ */
    .live-search-input-wrap.active .search-icon {
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 16px !important;
        color: var(--primary) !important;
        position: absolute !important;
    }
    
    /* КНОПКА ОЧИСТКИ */
    .live-search-input-wrap .search-clear {
        display: none !important;
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: none !important;
        border: none !important;
        color: var(--text-muted) !important;
        cursor: pointer !important;
        font-size: 18px !important;
        padding: 4px !important;
        z-index: 5 !important;
    }
    
    .live-search-input-wrap .search-clear.show {
        display: block !important;
    }
    
    /* ЛОАДЕР */
    .live-search-input-wrap .search-loader {
        display: none !important;
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--primary) !important;
        font-size: 16px !important;
    }
    
    .live-search-input-wrap .search-loader.active {
        display: block !important;
    }
    
    /* РЕЗУЛЬТАТЫ ПОИСКА НА МОБИЛЬНЫХ */
    .live-search-results {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        max-height: calc(100vh - 56px) !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
        margin-top: 0 !important;
        background: var(--bg-secondary) !important;
        z-index: 999 !important;
        display: none !important;
        animation: slideDownMobile 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    
    .live-search-results.active {
        display: block !important;
    }
    
    @keyframes slideDownMobile {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* ЭЛЕМЕНТЫ РЕЗУЛЬТАТОВ НА МОБИЛЬНЫХ */
    .live-search-item {
        padding: 12px 16px !important;
        gap: 12px !important;
    }
    
    .live-search-item .result-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    .live-search-item .result-info .result-name {
        font-size: 15px !important;
    }
    
    .live-search-item .result-info .result-username {
        font-size: 13px !important;
    }
    
    .live-search-item .result-action {
        padding: 6px 14px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   ДЛЯ МАЛЕНЬКИХ ТЕЛЕФОНОВ (до 400px)
   ============================================================ */
@media (max-width: 400px) {
    .live-search-input-wrap {
        max-width: 38px !important;
        min-width: 38px !important;
        width: 38px !important;
        height: 38px !important;
    }
    
    .live-search-input-wrap.active {
        max-width: 180px !important;
        width: 180px !important;
    }
    
    .live-search-input-wrap .search-icon {
        font-size: 17px !important;
    }
    
    .live-search-input-wrap.active .search-icon {
        font-size: 14px !important;
        left: 12px !important;
    }
    
    .live-search-input-wrap .search-input {
        font-size: 13px !important;
        padding: 6px 0 !important;
    }
    
    .live-search-results {
        top: 56px !important;
        max-height: calc(100vh - 56px) !important;
    }
    
    .live-search-item {
        padding: 10px 14px !important;
        gap: 10px !important;
    }
    
    .live-search-item .result-avatar {
        width: 34px !important;
        height: 34px !important;
    }
    
    .live-search-item .result-info .result-name {
        font-size: 14px !important;
    }
    
    .live-search-item .result-info .result-username {
        font-size: 12px !important;
    }
    
    .live-search-item .result-action {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   ТАБЛЕТЫ И ПК (ПОЛНОРАЗМЕРНЫЙ ПОИСК)
   ============================================================ */
@media (min-width: 769px) {
    .live-search-input-wrap {
        max-width: 480px !important;
        width: 100% !important;
        border-radius: var(--radius-full) !important;
        padding: 0 18px !important;
        background: var(--bg-input) !important;
        border: 2px solid var(--border) !important;
        transition: all var(--transition) !important;
    }
    
    .live-search-input-wrap:focus-within {
        border-color: var(--primary) !important;
        background: var(--bg-input-focus) !important;
        box-shadow: 0 0 0 4px var(--primary-glow) !important;
    }
    
    .live-search-input-wrap .search-input {
        display: block !important;
        padding: 12px 0 !important;
        font-size: 15px !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: var(--text) !important;
        font-family: inherit !important;
    }
    
    .live-search-input-wrap .search-icon {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        font-size: 16px !important;
        color: var(--text-muted) !important;
        margin-right: 10px !important;
        pointer-events: auto !important;
    }
    
    .live-search-input-wrap .search-clear {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        display: none !important;
    }
    
    .live-search-input-wrap .search-clear.show {
        display: block !important;
    }
    
    .live-search-input-wrap .search-loader {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        display: none !important;
    }
    
    .live-search-input-wrap .search-loader.active {
        display: block !important;
    }
    
    .live-search-results {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 400px !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid var(--border) !important;
        box-shadow: var(--shadow-hover) !important;
        margin-top: 8px !important;
        background: var(--bg-card) !important;
        display: none !important;
        z-index: 1000 !important;
    }
    
    .live-search-results.active {
        display: block !important;
    }
}

/* Пульсация для онлайн статуса */
@keyframes onlinePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.online-status-dot {
    animation: onlinePulse 2s ease-in-out infinite;
}

/* Аватарка в онлайн списке */
.online-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.online-avatar-wrapper .online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 0 12px rgba(52,168,83,0.4);
    animation: onlinePulse 2s ease-in-out infinite;
}

.online-avatar-wrapper img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--success);
}

.online-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid var(--border);
}

.online-user-item:hover {
    background: var(--bg-card-hover);
    transform: translateX(4px);
}

.online-user-item:active {
    transform: scale(0.98);
}

/* ЦВЕТА ИКОНОК - БЕЗ ГРАДИЕНТОВ */
.notification-item .notif-icon.like { background: #E53935; }
.notification-item .notif-icon.comment { background: #1A73E8; }
.notification-item .notif-icon.friend { background: #F5A623; }
.notification-item .notif-icon.gift { background: #FF6B00; }
.notification-item .notif-icon.message { background: #34A853; }
.notification-item .notif-icon.system { background: #6A6A8A; }
.notification-item .notif-icon.forward { background: #7C3AED; }
.notification-item .notif-icon.premium { background: #FF6B00; }

/* КОНТЕНТ - МАКСИМАЛЬНО СЖАТ */
.notification-item .notif-content {
    flex: 1;
    min-width: 0;
}

.notification-item .notif-content .notif-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    line-height: 1.2;
}

.notification-item .notif-content .notif-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item .notif-content .notif-time {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 1px;
}

.notification-item .notif-content .notif-time i {
    font-size: 8px;
}

/* ТОЧКА НЕПРОЧИТАННОГО */
.notification-item .notif-badge {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

/* ПУСТОЕ СОСТОЯНИЕ */
.notifications-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.notifications-empty .empty-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.3;
}

.notifications-empty .empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}

.notifications-empty .empty-sub {
    font-size: 12px;
    margin-top: 2px;
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    .notification-item {
        padding: 6px 8px;
        gap: 8px;
        border-radius: 6px;
    }
    
    .notification-item .notif-icon {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    .notification-item .notif-content .notif-title {
        font-size: 12px;
    }
    
    .notification-item .notif-content .notif-text {
        font-size: 11px;
    }
    
    #notificationsList {
        max-height: 350px !important;
    }
}

/* ============================================================
   ОПТИМИЗАЦИЯ СКРОЛЛА УВЕДОМЛЕНИЙ
   ============================================================ */

#notificationsList {
    max-height: 420px;
    overflow-y: auto;
    padding: 2px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    overscroll-behavior: contain;
}

#notificationsList::-webkit-scrollbar {
    width: 4px;
}

#notificationsList::-webkit-scrollbar-track {
    background: transparent;
}

#notificationsList::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

#notificationsList::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.notification-item {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

@media (hover: hover) {
    .notification-item:hover {
        background: var(--bg-card-hover);
        border-color: var(--border);
        transform: translateX(2px);
    }
}

@media (hover: none) {
    .notification-item:hover {
        background: transparent;
        border-color: transparent;
        transform: none;
    }
    
    .notification-item:active {
        transform: scale(0.98);
    }
}
/* ============================================================
   НАСТРОЙКИ УВЕДОМЛЕНИЙ
   ============================================================ */

.settings-group {
    margin-bottom: 20px;
}

.settings-group label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-group .desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 12px 0;
}

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}

.toggle-row:last-child {
    border-bottom: none;
}

.toggle-row span {
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-row span i {
    color: var(--text-muted);
    width: 18px;
    text-align: center;
}

/* ----- TOGGLE SWITCH ----- */
.toggle-switch {
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.toggle-switch.active {
    background: var(--primary);
}

.toggle-switch .toggle-dot {
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch.active .toggle-dot {
    left: 23px;
}

/* ----- COLOR PICKER ----- */
.color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.color-btn:hover {
    transform: scale(1.1);
}

.color-btn.active {
    border-color: var(--text);
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--text);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */

@media (min-width: 768px) {
    .toast-container {
        bottom: 100px !important;
        right: 12px !important;
        left: auto !important;
        max-width: 380px !important;
    }
    
    .toast {
        padding: 14px 18px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
    }
    
    .toast .toast-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    
    .toast .toast-content .toast-title {
        font-size: 15px !important;
    }
    
    .toast .toast-content .toast-text {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .modal {
        padding: 12px 14px;
        width: 95%;
        border-radius: 12px;
    }
    
    .notification-item {
        padding: 6px 8px;
    }
    
    .notification-item .notif-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .notif-title {
        font-size: 13px;
    }
    
    .notif-text {
        font-size: 12px;
    }
}

/* ============================================================
   УВЕДОМЛЕНИЯ - НОВЫЙ ПРЕМИУМ ДИЗАЙН
   ============================================================ */

/* ----- МОДАЛКА ----- */
.notifications-modal {
    max-width: 480px !important;
    width: 100% !important;
    padding: 0 !important;
    border-radius: 20px !important;
    background: var(--bg-card) !important;
    overflow: hidden !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25) !important;
    animation: notifModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes notifModalIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ----- ХЕДЕР ----- */
.notif-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.notif-modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.notif-modal-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 16px var(--primary-glow);
}

.notif-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    border: 2px solid var(--primary);
    opacity: 0.4;
    animation: notifPulse 2s ease-in-out infinite;
}

@keyframes notifPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.15); opacity: 0; }
}

.notif-modal-header-left h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.notif-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
}

.notif-modal-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notif-mark-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    border: none;
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.notif-mark-all:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.03);
}

.notif-mark-all i {
    font-size: 12px;
}

.notif-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-close-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text);
    transform: rotate(90deg);
}

/* ----- СЧЕТЧИК ----- */
.notif-counter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
}

.notif-counter-bar span:first-child {
    font-weight: 800;
    font-size: 16px;
    color: var(--primary);
    background: var(--bg-card);
    padding: 0 10px;
    border-radius: 8px;
    min-width: 24px;
    text-align: center;
}

/* ----- СПИСОК ----- */
.notif-list {
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 12px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.notif-list::-webkit-scrollbar {
    width: 4px;
}

.notif-list::-webkit-scrollbar-track {
    background: transparent;
}

.notif-list::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

/* ----- ЭЛЕМЕНТ УВЕДОМЛЕНИЯ ----- */
.notification-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    margin-bottom: 4px;
}

.notification-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border);
    transform: translateX(4px);
}

.notification-item:active {
    transform: scale(0.97);
}

/* ----- НЕПРОЧИТАННОЕ ----- */
.notification-item.unread {
    background: var(--primary-glow);
    border-color: var(--primary);
    border-left: 3px solid var(--primary);
}

.notification-item.unread:hover {
    background: var(--primary-glow);
    border-color: var(--primary);
}

/* ----- ИКОНКА ----- */
.notification-item .notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    color: white;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.notification-item:hover .notif-icon {
    transform: scale(1.08) rotate(-5deg);
}

/* ----- ЦВЕТА ИКОНОК ----- */
.notif-icon.like { background: linear-gradient(135deg, #E53935, #FF6B6B); }
.notif-icon.comment { background: linear-gradient(135deg, #1A73E8, #4A90E8); }
.notif-icon.friend { background: linear-gradient(135deg, #34A853, #66BB6A); }
.notif-icon.gift { background: linear-gradient(135deg, #F5A623, #FFD54F); }
.notif-icon.message { background: linear-gradient(135deg, #7C3AED, #B388FF); }
.notif-icon.forward { background: linear-gradient(135deg, #00BCD4, #4DD0E1); }
.notif-icon.system { background: linear-gradient(135deg, #6c757d, #adb5bd); }
.notif-icon.premium { background: linear-gradient(135deg, #FF6B00, #FFA726); }

/* ----- КОНТЕНТ ----- */
.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.notif-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.notif-time {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    opacity: 0.7;
}

.notif-time i {
    font-size: 10px;
}

/* ----- БЭЙДЖ ----- */
.notif-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    animation: notifBadgePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 12px var(--primary-glow);
}

@keyframes notifBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.6); }
}

/* ----- ПУСТОЕ СОСТОЯНИЕ ----- */
.notif-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.notif-empty .empty-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.2;
}

.notif-empty h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 4px;
}

.notif-empty p {
    font-size: 14px;
    margin: 0;
}

/* ----- ЗАГРУЗКА ----- */
.notif-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.notif-loader {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: spin 0.8s linear infinite;
}

/* ----- ФУТЕР ----- */
.notif-modal-footer {
    padding: 14px 24px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    background: var(--bg-secondary);
}

.notif-footer-btn {
    padding: 8px 24px;
    border-radius: 12px;
    border: none;
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.notif-footer-btn:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.03);
}

/* ============================================================
   АДАПТИВ
   ============================================================ */

@media (max-width: 480px) {
    .notifications-modal {
        max-width: 100% !important;
        border-radius: 16px !important;
        margin: 10px !important;
    }
    
    .notif-modal-header {
        padding: 16px 18px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .notif-modal-header-left h3 {
        font-size: 17px;
    }
    
    .notif-modal-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        border-radius: 10px;
    }
    
    .notif-mark-all span {
        display: none;
    }
    
    .notif-mark-all {
        padding: 8px 12px;
    }
    
    .notification-item {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .notification-item .notif-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
        border-radius: 10px;
    }
    
    .notif-title {
        font-size: 13px;
    }
    
    .notif-text {
        font-size: 12px;
    }
    
    .notif-list {
        padding: 4px 8px;
        max-height: 350px;
    }
    
    .notif-counter-bar {
        padding: 8px 18px;
        font-size: 12px;
    }
    
    .notif-modal-footer {
        padding: 12px 18px 16px;
    }
}

/* ============================================================
   КНОПКА ДОБАВИТЬ ИСТОРИЮ - ФИКСИРОВАННАЯ ПЕРВАЯ
   ============================================================ */

.feed-story-add-item {
    flex-shrink: 0;
    width: 76px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.feed-story-add {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--primary);
    box-shadow: 0 0 20px var(--primary-glow);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feed-story-add:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--primary-glow);
}

.feed-story-add img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-story-add .add-story-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s;
    backdrop-filter: blur(2px);
}

.feed-story-add:hover .add-story-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.feed-story-add .add-story-overlay i {
    font-size: 20px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.feed-story-add .add-story-overlay span {
    font-size: 8px;
    font-weight: 600;
    margin-top: 1px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ИМЯ ПОД КНОПКОЙ */
.feed-story-add-item .feed-story-name {
    color: var(--primary);
    font-weight: 600;
    font-size: 10px;
}

/* ============================================================
   КОНТЕЙНЕР ИСТОРИЙ ПОЛЬЗОВАТЕЛЕЙ
   ============================================================ */

#storiesContainer {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.feed-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    width: 76px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.feed-story-item:hover {
    transform: translateY(-3px);
}

.feed-story-item:active {
    transform: scale(0.92);
}

.feed-story-item .feed-story-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: var(--border);
    flex-shrink: 0;
    transition: all 0.3s;
}

/* НЕПРОСМОТРЕННАЯ ИСТОРИЯ */
.feed-story-item:not(.viewed) .feed-story-avatar {
    background: linear-gradient(135deg, #FF6B00, #E53935, #7C3AED, #1A73E8);
    box-shadow: 0 2px 12px rgba(255,107,0,0.25);
    animation: storyBorderPulse 2s ease-in-out infinite;
}

@keyframes storyBorderPulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(255,107,0,0.25); }
    50% { box-shadow: 0 2px 24px rgba(255,107,0,0.45); }
}

/* ПРОСМОТРЕННАЯ */
.feed-story-item.viewed .feed-story-avatar {
    background: var(--border);
    box-shadow: none;
    animation: none;
}

.feed-story-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2px;
    background: var(--bg-card);
    overflow: hidden;
}

.feed-story-avatar-inner img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-card);
}

.feed-story-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    max-width: 68px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-story-premium-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B00, #FFD700);
    color: white;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 20px rgba(255,107,0,0.4);
    z-index: 2;
}

/* ============================================================
   МИНИ-ПЛЕЕР В ХЕДЕРЕ
   ============================================================ */
.header-player {
    position: relative;
    animation: headerPlayerIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-player:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow);
}

@keyframes headerPlayerIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    .header-player {
        max-width: 160px !important;
        padding: 3px 10px 3px 6px !important;
    }
    
    .header-player .player-cover {
        width: 26px !important;
        height: 26px !important;
    }
    
    .header-player .player-title {
        font-size: 10px !important;
    }
    
    .header-player .player-artist {
        font-size: 8px !important;
    }
    
    .header-player .player-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
    }
}
/* ===== УНИВЕРСАЛЬНЫЙ ПОИСК ===== */
.search-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.search-section:last-child {
    border-bottom: none;
}

.search-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 12px 8px 12px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-show-more {
    padding: 8px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s;
    border-top: 1px solid var(--border);
    font-weight: 600;
}

.search-show-more:hover {
    background: var(--bg-card-hover);
}

.live-search-item.music-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid var(--border);
}

.live-search-item.music-item:hover {
    background: var(--bg-card-hover);
}

.live-search-item.music-item .result-avatar.music-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card-hover);
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.live-search-item.music-item .result-name.music-title {
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-search-item.music-item .result-username.music-artist {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 12px;
}

.live-search-item.music-item .result-detail {
    font-size: 11px;
    color: var(--text-muted);
}

.result-action.music-play {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.result-action.music-play:hover {
    transform: scale(1.1);
    background: var(--primary-dark);
}

.result-action.music-fav {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.result-action.music-fav:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(229, 57, 53, 0.1);
}
/* ===== SHORTS / КЛИПЫ ===== */
.shorts-container {
    max-width: 420px;
    margin: 0 auto;
    height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.shorts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 10;
}

.shorts-title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shorts-player {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #000;
}

.shorts-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    z-index: 5;
    gap: 12px;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.shorts-feed {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.shorts-feed::-webkit-scrollbar {
    width: 0;
}

.shorts-item {
    height: 100%;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.shorts-video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.shorts-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.shorts-demo {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shorts-demo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
}

.shorts-duration {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    z-index: 3;
}

.shorts-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.2);
    z-index: 3;
}

.shorts-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary);
    transition: width 0.1s linear;
}

.shorts-sidebar {
    position: absolute;
    right: 12px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 5;
}

.shorts-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.shorts-action:hover {
    transform: scale(1.1);
}

.shorts-action.liked {
    color: #E53935;
}

.shorts-action i {
    font-size: 28px;
}

.shorts-action-count {
    font-size: 11px;
    font-weight: 600;
}

.shorts-bottom {
    position: absolute;
    bottom: 20px;
    left: 16px;
    right: 80px;
    z-index: 5;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.shorts-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.shorts-author-name {
    display: flex;
    align-items: center;
    gap: 4px;
}

.shorts-views {
    font-weight: 400;
    font-size: 12px;
    opacity: 0.7;
}

.shorts-title {
    font-size: 14px;
    margin-top: 4px;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shorts-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    padding: 40px;
    text-align: center;
    background: var(--bg-card);
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .shorts-container {
        height: calc(100vh - 120px);
        border-radius: 0;
        margin: 0 -16px;
    }
    
    .shorts-sidebar {
        right: 8px;
        bottom: 80px;
    }
    
    .shorts-action i {
        font-size: 24px;
    }
    
    .shorts-bottom {
        left: 12px;
        right: 60px;
        bottom: 12px;
    }
}

/* ============================================================
   ПОДДЕРЖКА - СТИЛИ
   ============================================================ */

/* БАННЕР С ИНФОРМАЦИЕЙ */
.support-info-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card-hover);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
    margin-bottom: 16px;
}

.support-info-banner .banner-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.support-info-banner .banner-content {
    flex: 1;
}

.support-info-banner .banner-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}

.support-info-banner .banner-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* АДМИН ИНФО */
.support-admin-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(26, 115, 232, 0.08);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.support-admin-info i {
    color: var(--primary);
    font-size: 18px;
}

/* ПУСТОЕ СОСТОЯНИЕ */
.support-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.support-empty .empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.3;
}

.support-empty .empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

.support-empty .empty-sub {
    font-size: 14px;
}

/* СПИСОК ТИКЕТОВ */
.support-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.support-ticket-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition);
}

.support-ticket-item:hover {
    transform: translateX(4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.support-ticket-item .ticket-status-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.support-ticket-item .ticket-info {
    flex: 1;
    min-width: 0;
}

.support-ticket-item .ticket-subject {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}

.support-ticket-item .ticket-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.support-ticket-item .ticket-id {
    font-weight: 600;
    color: var(--text-secondary);
}

.support-ticket-item .ticket-user {
    color: var(--text-secondary);
}

.support-ticket-item .ticket-date {
    color: var(--text-muted);
}

.support-ticket-item .ticket-unread {
    background: var(--primary);
    color: white;
    padding: 0 8px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
}

.support-ticket-item .ticket-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 50px;
    flex-shrink: 0;
}

.support-ticket-item .ticket-status-badge.open {
    background: rgba(52, 168, 83, 0.15);
    color: #34A853;
}

.support-ticket-item .ticket-status-badge.in_progress {
    background: rgba(26, 115, 232, 0.15);
    color: #1A73E8;
}

.support-ticket-item .ticket-status-badge.resolved {
    background: rgba(245, 166, 35, 0.15);
    color: #F5A623;
}

.support-ticket-item .ticket-status-badge.closed {
    background: rgba(106, 106, 138, 0.15);
    color: #6A6A8A;
}

.support-ticket-item .ticket-arrow {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

/* СООБЩЕНИЯ В ТИКЕТЕ */
.support-message {
    animation: messageSlide 0.3s ease;
}

.support-message .message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.support-message .message-body {
    padding: 12px 16px;
    border-radius: 12px;
    word-wrap: break-word;
    line-height: 1.5;
}

.support-message.from-support .message-body {
    background: var(--bg-card-hover);
    border-left: 3px solid var(--primary);
    color: var(--text);
}

.support-message.from-user .message-body {
    background: var(--primary);
    color: white;
}

/* ЗАКРЫТЫЙ ТИКЕТ */
.support-ticket-item.closed {
    opacity: 0.6;
}

.support-ticket-item.closed:hover {
    opacity: 1;
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    .support-ticket-item {
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .support-ticket-item .ticket-status-icon {
        font-size: 20px;
    }
    
    .support-ticket-item .ticket-subject {
        font-size: 13px;
    }
    
    .support-ticket-item .ticket-meta {
        font-size: 11px;
        gap: 6px;
    }
    
    .support-message .message-body {
        max-width: 95% !important;
        font-size: 14px;
    }
    
    .support-info-banner {
        flex-direction: column;
        text-align: center;
        padding: 12px 14px;
    }
    
    .support-info-banner .banner-icon {
        font-size: 32px;
    }
}