/* === КРИТИЧЕСКИЙ ФИКС ДЛЯ TELEGRAM SIDEBAR === */

/* 1. Исправляем viewport нестабильность */
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
body {
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    /* position:fixed на body (не html!) — фиксирует layout в Telegram WebView */
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    /* dvh = истинная высота viewport без браузерного chrome на iOS */
    height: 100dvh;
    height: 100vh; /* fallback */
    -webkit-overflow-scrolling: touch;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
    color: #ffffff;
    margin: 0;
    padding: 0;
}

/* 2. ФИКС SIDEBAR - убираем transform, используем только right */
.main-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 90%;
    max-width: 380px;
    height: 100dvh;
    height: 100vh; /* fallback */
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.6);
    z-index: 250;
    transition: right 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    will-change: right;
    transform: translateZ(0);
}

.main-sidebar.active {
    right: 0;
}

.channel-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 90%;
    max-width: 400px;
    height: 100dvh;
    height: 100vh;
    background: rgba(10, 13, 20, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(0, 180, 255, 0.12);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.7), -1px 0 0 rgba(0,180,255,0.08);
    z-index: 200;
    transition: right 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    will-change: right;
    transform: translateZ(0);
}

.channel-sidebar.active {
    right: 0;
}

/* 3. ОПТИМИЗАЦИЯ ГАМБУРГЕРА */
.hamburger-menu {
    width: 32px;
    height: 32px;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* КРИТИЧНО: убираем transition для лучшей производительности */
    transition: background-color 0.1s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Hardware acceleration */
    will-change: transform;
    transform: translateZ(0);
}

.hamburger-line {
    width: 16px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    /* КРИТИЧНО: сокращаем transition для плавности */
    transition: transform 0.1s ease;
    will-change: transform;
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* 4. ФИКС ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ */
@media (hover: none) and (pointer: coarse) {
    /* Отключаем все hover эффекты */
    .main-sidebar, .channel-sidebar, .hamburger-menu {
        transition: none !important;
    }
    
    /* Активируем только при открытии */
    .main-sidebar.active, .channel-sidebar.active {
        transition: right 0.1s ease-out !important;
    }
    
    /* Упрощаем анимацию гамбургера */
    .hamburger-line {
        transition: transform 0.05s ease !important;
    }
}

/* 5. ФИКС ДЛЯ НИЗКОЙ ПРОИЗВОДИТЕЛЬНОСТИ */
@media (max-width: 480px) {
    .main-sidebar, .channel-sidebar {
        transition: right 0.1s ease-out;
        box-shadow: none; /* Убираем shadow для экономии */
    }
    
    .hamburger-line {
        transition: transform 0.05s ease;
    }
}

/* 6. КРИТИЧНЫЙ ФИКС ДЛЯ TELEGRAM WEBVIEW */
.telegram-webview-fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* 7. ФИКС ДЛЯ BACKDROP */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 180;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* 8. PERFORMANCE КЛАСС ДЛЯ СЛАБЫХ УСТРОЙСТВ */
.low-performance .main-sidebar,
.low-performance .channel-sidebar {
    transition: none !important;
    box-shadow: none !important;
}

.low-performance .hamburger-line {
    transition: none !important;
}

.low-performance .menu-item,
.low-performance .channel-card {
    transition: none !important;
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

/* === ПРЕМИУМ МАТЕРИАЛЫ === */
.premium-glass {
    background: rgba(26, 26, 46, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.premium-matte {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* === HEADER === */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 60px;
    position: relative;
    z-index: 150;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #e0e0e0;
    letter-spacing: 5px;
    position: relative;
    overflow: hidden;
    animation: logoColorCycle 6s ease-in-out infinite;
}

/* === ЦИКЛИЧЕСКАЯ АНИМАЦИЯ ЛОГОТИПА === */
.logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, #00b2ff55 50%, transparent 100%);
    animation: laser-scan-cycle 8s ease-in-out infinite;
}

@keyframes laser-scan-cycle {
    0%, 100% {
        left: -100%;
    }
    12.5% {
        left: 100%;
    }
    25%, 87.5% {
        left: 100%;
    }
}

@keyframes logoColorCycle {
    0%, 100% {
        color: #e0e0e0;
        text-shadow: none;
    }
    16.67% {
        color: #00b2ff;
        text-shadow: 0 0 10px rgba(0, 178, 255, 0.5);
    }
    33.33% {
        color: #00ff88;
        text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    }
    50% {
        color: #9D4EDD;
        text-shadow: 0 0 10px rgba(157, 78, 221, 0.5);
    }
    66.67% {
        color: #ff6b35;
        text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
    }
    83.33% {
        color: #ffb800;
        text-shadow: 0 0 10px rgba(255, 184, 0, 0.5);
    }
}

.mode-indicator {
    font-size: 13px;
    color: #00D4FF;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    left: 120px;
    top: 50%;
    transform: translateY(-50%);
}

.mode-indicator.show {
    opacity: 1;
}

.mode-display {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hamburger-menu:hover {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* === SIDEBAR CONTENT === */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(8, 11, 18, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 0 rgba(0,180,255,0.08), 0 4px 16px rgba(0,0,0,0.4);
}

.sidebar-header h3 {
    color: #fff;
    font-size: 16px;
    margin: 0;
    font-weight: 600;
}

.close-sidebar {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.close-sidebar:active {
    background: rgba(255,255,255,0.1);
    transform: scale(0.92);
}

/* ── New Navigator Header ── */
.nav-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(8, 11, 18, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 1px 0 rgba(0,180,255,0.1);
    padding-bottom: 0;
}
.nav-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
}
.nav-header-brand {
    display: flex; align-items: center; gap: 8px;
}
.nav-brand-icon { font-size: 16px; }
.nav-brand-text {
    font-size: 13px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
    background: linear-gradient(90deg, #e0e0e0, #00d4ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Nav tabs */
.nav-tabs {
    display: flex;
    padding: 0 12px 0;
    gap: 2px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.nav-tab {
    flex: 1; padding: 10px 4px 12px;
    border: none; background: transparent;
    color: rgba(255,255,255,0.35);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    position: relative;
}
.nav-tab.active { color: #fff; border-bottom-color: #00d4ff; }
.nav-tab[data-tab="smart"].active { color: #00d4ff; }
.nav-tab-icon { font-size: 13px; }
.nav-tab-label { font-size: 11px; letter-spacing: 0.5px; }

/* Nav panels */
.nav-panel { flex: 1; }

/* AI tab content */
.nav-ai-content { padding-top: 12px; }
.nav-ai-search-wrap {
    position: relative; margin: 0 0 10px;
    background: rgba(0,212,255,.05);
    border: 1px solid rgba(0,212,255,.2);
    border-radius: 12px;
    display: flex; align-items: center;
    overflow: hidden;
    transition: border-color .2s;
}
.nav-ai-search-wrap:focus-within { border-color: rgba(0,212,255,.5); }
.nav-ai-icon {
    font-size: 14px; color: #00d4ff;
    padding: 0 10px; flex-shrink: 0;
    animation: nav-ai-glow 2s ease-in-out infinite;
}
@keyframes nav-ai-glow {
    0%,100% { text-shadow: 0 0 4px rgba(0,212,255,.4); }
    50%      { text-shadow: 0 0 12px rgba(0,212,255,.9); }
}
.nav-ai-input {
    flex: 1; background: none; border: none; outline: none;
    color: #e0e0e0; font-size: 13px;
    padding: 11px 8px 11px 0; font-family: inherit;
    caret-color: #00d4ff;
}
.nav-ai-input::placeholder { color: rgba(255,255,255,.25); }
.nav-ai-spinner {
    width: 16px; height: 16px; margin-right: 10px; flex-shrink: 0;
    border: 2px solid rgba(0,212,255,.15); border-top-color: #00d4ff;
    border-radius: 50%; display: none;
    animation: nav-spin .7s linear infinite;
}
.nav-ai-spinner.active { display: block; }
@keyframes nav-spin { to { transform: rotate(360deg); } }

.nav-ai-scan {
    position: absolute; bottom: 0; left: -60%; width: 60%; height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    display: none; animation: nav-scan-anim 1.1s ease-in-out infinite;
}
.nav-ai-scan.active { display: block; }
@keyframes nav-scan-anim { 0%{left:-60%} 100%{left:160%} }

.nav-ai-vibes {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.nav-vibe {
    padding: 5px 10px; border-radius: 20px;
    border: 1px solid rgba(0,212,255,.18);
    background: rgba(0,212,255,.04);
    color: rgba(255,255,255,.55); font-size: 11px;
    cursor: pointer; white-space: nowrap;
    transition: all .15s;
}
.nav-vibe:active, .nav-vibe.active {
    background: rgba(0,212,255,.16);
    border-color: rgba(0,212,255,.45);
    color: #00d4ff;
}
.nav-ai-status {
    font-size: 11px; color: rgba(255,255,255,.3);
    padding: 0 2px 8px; min-height: 20px; letter-spacing: .3px;
}

.sidebar-content {
    padding: 16px;
    /* НЕ overflow здесь — скролл идёт на .channel-sidebar */
    will-change: scroll-position;
    transform: translateZ(0);
}

.menu-items {
    padding: 0 16px;
}

.menu-item {
    width: 100%;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    will-change: background-color;
    transform: translateZ(0);
}

.menu-item:hover {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.menu-icon {
    font-size: 20px;
    min-width: 28px;
    text-align: center;
    color: #ccc;
}

.menu-text {
    flex: 1;
}

.menu-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.menu-subtitle {
    font-size: 11px;
    color: #999;
    line-height: 1.2;
}

.menu-arrow {
    font-size: 14px;
    color: #666;
    opacity: 0.7;
}

.menu-item:hover .menu-arrow {
    color: #999;
    opacity: 1;
}

.menu-footer {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.user-details {
    flex: 1;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.user-status {
    font-size: 11px;
    color: #999;
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.user-status.verified {
    color: #00ff88;
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.2));
}

.user-status.pending {
    color: #ffb800;
    background: linear-gradient(145deg, rgba(255, 184, 0, 0.1), rgba(255, 184, 0, 0.2));
}

/* === WALLET SPECIFIC STYLES === */
.wallet-connect-item.connected {
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.2));
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
}

.wallet-connect-item.connected .menu-title {
    color: #00ff88;
}

.wallet-connect-item.connected .menu-subtitle {
    color: rgba(0, 255, 136, 0.8);
    font-family: 'Courier New', monospace;
}

/* === CHANNEL SIDEBAR === */
.search-section {
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
    padding: 10px 12px;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.search-input::placeholder {
    color: #999;
}

.filters-section {
    margin-bottom: 20px;
}

.filter-group {
    margin-bottom: 16px;
}

.filter-group label {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-tag {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    will-change: background-color;
    transform: translateZ(0);
}

.filter-tag:hover {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.filter-tag.active {
    background: linear-gradient(145deg, #00D4FF, #0099CC);
    color: #000;
    border-color: #00D4FF;
}

.sort-select {
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.sort-select option {
    background: #1a1a1a;
    color: #fff;
}

.channels-list {
    /* В обычном режиме (<=50 каналов) — обычный flex */
    display: block;
    position: relative;
}
/* Виртуальный режим — styles заданы inline из JS */
.channels-list.vs-active {
    display: block;
}

.channel-card {
    background: rgba(14, 18, 28, 0.72);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 13px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.05);
    will-change: transform;
    transform: translateZ(0);
}

/* Градиентная рамка-подсветка сверху */
.channel-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 180, 255, 0.35) 35%,
        rgba(0, 255, 136, 0.25) 65%,
        transparent 100%);
    opacity: 0;
    transition: opacity .25s;
}

.channel-card:hover::before,
.channel-card:active::before { opacity: 1; }

.channel-card:hover {
    border-color: rgba(0, 180, 255, 0.22);
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0,180,255,0.1);
}

.channel-card:active {
    transform: translateY(0) scale(0.985) translateZ(0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 0 16px rgba(0,180,255,0.06);
    transition-duration: .06s;
}

/* Анимированная рамка для «моих» каналов и Premium */
.channel-card[data-own="1"],
.channel-card[data-premium="1"] {
    border-color: transparent;
    background-image: linear-gradient(rgba(14,18,28,0.85), rgba(14,18,28,0.85)),
        linear-gradient(135deg, rgba(0,212,255,0.5) 0%, rgba(0,255,136,0.4) 50%, rgba(0,212,255,0.5) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: cc-border-flow 3s linear infinite;
}
@keyframes cc-border-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

.channel-avatar {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.channel-info {
    flex: 1;
}

.channel-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.channel-stats {
    font-size: 11px;
    color: #999;
}

.channel-description {
    font-size: 12px;
    color: #ccc;
    line-height: 1.3;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.channel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.channel-category {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    color: #ccc;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.channel-actions {
    display: flex;
    gap: 6px;
}

.rate-channel-btn {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.rate-channel-btn:hover {
    background: linear-gradient(145deg, #3a3a3a, #4a4a4a);
    color: #fff;
    transform: translateY(-1px);
}

.view-channel-btn {
    background: linear-gradient(145deg, #00D4FF, #0099CC);
    color: #000;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 212, 255, 0.3);
}

.view-channel-btn:hover {
    background: linear-gradient(145deg, #0099CC, #0077AA);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 212, 255, 0.4);
}

/* === GRID CONTAINER === */
.grid-container {
    position: relative;
    width: 100vw;
    height: calc(100dvh - 140px);
    height: calc(100vh - 140px); /* fallback */
    overflow: hidden;
    cursor: default;
    background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
}

.grid-container.drag-mode {
    cursor: grab;
}

.grid-container.drag-mode:active {
    cursor: grabbing;
}

.pixel-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(10, 30px);
    grid-template-rows: repeat(10, 30px);
    gap: 1px;
    background: #000;
    border: 1px solid #888;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    transition: gap 0.3s ease, background 0.3s ease;
    animation: silverGlow 4s ease-in-out infinite;
}

/* === СЕРЕБРИСТОЕ СВЕЧЕНИЕ СЕТКИ === */
@keyframes silverGlow {
    0%, 100% {
        border-color: #888;
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(192, 192, 192, 0.3);
    }
    25% {
        border-color: #b8b8b8;
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.6),
            0 0 8px rgba(192, 192, 192, 0.4),
            0 0 0 1px rgba(220, 220, 220, 0.5);
    }
    50% {
        border-color: #d4d4d4;
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.6),
            0 0 12px rgba(212, 212, 212, 0.5),
            0 0 0 1px rgba(240, 240, 240, 0.6);
    }
    75% {
        border-color: #b8b8b8;
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.6),
            0 0 8px rgba(192, 192, 192, 0.4),
            0 0 0 1px rgba(220, 220, 220, 0.5);
    }
}

/* === PIXELS === */
.pixel {
    width: 30px;
    height: 30px;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.pixel:hover {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pixel.owned {
    background: linear-gradient(145deg, #00ff88, #00cc66);
    border-color: #00ff88;
}

.pixel.selected {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid #ffb800;
    box-shadow: 
        0 0 0 1px rgba(255, 184, 0, 0.4),
        0 0 4px rgba(255, 184, 0, 0.3);
    animation: selectedGlow 2s ease-in-out infinite;
    position: relative;
}

.pixel.mass-selected {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid #ff6b35;
    box-shadow: 
        0 0 0 1px rgba(255, 107, 53, 0.4),
        0 0 4px rgba(255, 107, 53, 0.3);
    animation: massSelectedGlow 2.5s ease-in-out infinite;
    position: relative;
}

.pixel.edit-selected {
    position: relative;
}

.pixel.edit-selected::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: rgba(157, 78, 221, 0.3);
    border: 1px solid rgba(157, 78, 221, 0.8);
    border-radius: 2px;
    z-index: 5;
    pointer-events: none;
}

.pixel.with-image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.pixel-grid.seamless .pixel.owned.with-image {
    background-color: transparent !important;
    border-color: transparent !important;
}

.pixel.with-image:hover {
    transform: none !important;
    border-color: transparent !important;
}

.pixel-grid.seamless .pixel.with-image:hover {
    transform: none !important;
    border-color: transparent !important;
}

.pixel-grid.seamless {
    gap: 0 !important;
}

.pixel-grid.seamless .pixel.with-image {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* === АНИМАЦИИ КОНТУРОВ === */
@keyframes selectedGlow {
    0%, 100% {
        border-color: #ffb800;
        box-shadow: 
            0 0 0 1px rgba(255, 184, 0, 0.4),
            0 0 4px rgba(255, 184, 0, 0.3);
    }
    50% {
        border-color: #ffd700;
        box-shadow: 
            0 0 0 1px rgba(255, 215, 0, 0.6),
            0 0 6px rgba(255, 215, 0, 0.4);
    }
}

@keyframes massSelectedGlow {
    0%, 100% {
        border-color: #ff6b35;
        box-shadow: 
            0 0 0 1px rgba(255, 107, 53, 0.4),
            0 0 4px rgba(255, 107, 53, 0.3);
    }
    50% {
        border-color: #ff8c42;
        box-shadow: 
            0 0 0 1px rgba(255, 140, 66, 0.6),
            0 0 6px rgba(255, 140, 66, 0.4);
    }
}

/* === FLOATING CONTROLS === */
.floating-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
}

#zoom-in, #zoom-out, #center { display: none !important; }

.control-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.control-btn:hover {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

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

.drag-mode-btn {
    font-size: 18px;
}

.drag-mode-btn.active {
    background: linear-gradient(145deg, #00ff88, #00cc66);
    color: #000;
    border-color: #00ff88;
}

.drag-mode-btn.active:hover {
    background: linear-gradient(145deg, #00cc66, #00aa44);
    border-color: #00cc66;
}

/* === НОВОЕ: СТИЛИ КНОПКИ ЯЗЫКА === */
.language-btn {
    font-size: 18px !important;
    position: relative;
    overflow: hidden;
}

.language-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 212, 255, 0.3) 50%, transparent 100%);
    transition: all 0.5s ease;
}

.language-btn:hover::before {
    left: 100%;
}

.language-btn.active {
    background: linear-gradient(145deg, #00D4FF, #0099CC);
    color: #000;
    border-color: #00D4FF;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.language-btn.active:hover {
    background: linear-gradient(145deg, #0099CC, #0077AA);
    border-color: #0099CC;
}

/* Анимация переключения языка */
@keyframes languageSwitch {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

.language-btn.switching {
    animation: languageSwitch 0.6s ease;
}

/* === BOTTOM BAR === */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    height: auto;
    z-index: 100;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.5);
}

/* status-info скрыта — убрана полоска над кнопками */
.status-info { display: none !important; }
.status-info-hidden {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(145deg, #0a2a0a, #1a4a1a);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 11px;
    box-shadow: 0 2px 10px rgba(0, 255, 136, 0.1);
}

.status-info-left {
    display: flex;
    gap: 16px;
}

.status-info-right {
    display: flex;
    gap: 16px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.status-label {
    color: #ccc;
    font-size: 10px;
    font-weight: 600;
}

.status-value {
    color: #00ff88;
    font-weight: 700;
    font-size: 11px;
}

/* === ЦВЕТОВЫЕ ОБВОДКИ ДЛЯ КНОПОК РЕЖИМОВ === */
.mode-tabs {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 4px 0;
}

.mode-tab {
    min-width: 70px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    background: linear-gradient(145deg, lch(43.19% 0.01 296.81), #181818);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    gap: 2px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ПРОСМОТР - ЖЁЛТАЯ ОБВОДКА */
.mode-tab[data-mode="view"] {
    border-color: rgba(255, 255, 255, 0.1);
}

.mode-tab[data-mode="view"].active {
    border-color: #ffb800;
    box-shadow: 0 0 8px rgba(255, 184, 0, 0.3);
}

/* ПОКУПКА - ЗЕЛЁНАЯ ОБВОДКА */
.mode-tab[data-mode="buy"] {
    border-color: rgba(255, 255, 255, 0.1);
}

.mode-tab[data-mode="buy"].active {
    border-color: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

/* МАССОВАЯ ПОКУПКА - ОРАНЖЕВАЯ ОБВОДКА */
.mode-tab[data-mode="mass-buy"] {
    border-color: rgba(255, 255, 255, 0.1);
}

.mode-tab[data-mode="mass-buy"].active {
    border-color: #ff6b35;
    box-shadow: 0 0 8px rgba(255, 107, 53, 0.3);
}

/* РЕДАКТОР - ФИОЛЕТОВАЯ ОБВОДКА */
.mode-tab[data-mode="edit"] {
    border-color: rgba(255, 255, 255, 0.1);
}

.mode-tab[data-mode="edit"].active {
    border-color: #9D4EDD;
    box-shadow: 0 0 8px rgba(157, 78, 221, 0.3);
}

.mode-tab .mode-icon {
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mode-tab .mode-icon lord-icon {
    pointer-events: none;
    display: block;
}

.mode-tab .mode-label {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.8;
    line-height: 1;
}

.mode-tab:hover {
    background: linear-gradient(145deg, #1a1a1a, #232323);
    color: rgba(255,255,255,0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.mode-tab.active .mode-label {
    opacity: 1;
}

/* === КНОПКА "О ПРОЕКТЕ" === */
.about-tab {
    background: linear-gradient(145deg, #5a5a5a, #2c2c2c) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    margin-left: 8px;
    position: relative;
}

.about-tab::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.about-tab:hover {
    background: linear-gradient(145deg, #3a3a3a, #4a4a4a) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

.about-tab:active,
.about-tab.active {
    background: linear-gradient(145deg, #00D4FF, #0099CC) !important;
    color: #000 !important;
    border-color: #00D4FF !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
}

/* === ACTION BUTTON === */
.action-button-container {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.action-button-container.show {
    opacity: 1;
    visibility: visible;
}

.action-button {
    padding: 14px 24px;
    background: linear-gradient(145deg, #00ff88, #00cc66);
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.action-button:active {
    transform: scale(0.95);
}

/* === ЦВЕТОВЫЕ ОБВОДКИ ДЛЯ ACTION BUTTON === */
.action-button.buy-mode {
    background: linear-gradient(145deg, #00ff88, #00cc66);
    color: #000;
    border: 2px solid #00ff88;
}

.action-button.mass-buy-mode {
    background: linear-gradient(145deg, #ff6b35, #ff4500);
    color: #000;
    border: 2px solid #ff6b35;
}

.action-button.edit-mode {
    background: linear-gradient(145deg, #9d4edd, #7209b7);
    color: #fff;
    border: 2px solid #9d4edd;
}

.action-button.edit-info-mode {
    background: linear-gradient(145deg, #00D4FF, #0099CC);
    color: #000;
    font-size: 14px;
    padding: 12px 20px;
    border: 2px solid #00D4FF;
}

/* === МОДАЛЬНЫЕ ОКНА === */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    height: 100vh; /* fallback */
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 8px;
    padding: 20px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 320px;
    animation: modalSlideIn 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal-content.editor-content {
    width: 95vw;
    max-width: 500px;
}

/* === ABOUT MODAL === */
.about-content {
    width: 95vw;
    max-width: 500px;
    max-height: 85vh;
}

.about-section {
    text-align: center;
    margin-bottom: 24px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-title {
    font-size: 24px;
    font-weight: 700;
    color: #00D4FF;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.project-subtitle {
    font-size: 14px;
    color: #ccc;
    font-weight: 500;
}

.about-description {
    line-height: 1.6;
    color: #ddd;
}

.about-description p {
    margin-bottom: 16px;
    font-size: 14px;
}

.about-description strong {
    color: #00D4FF;
    font-weight: 600;
}

.features-list {
    margin: 20px 0;
    padding: 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 0;
}

.feature-icon {
    font-size: 16px;
    min-width: 20px;
    text-align: center;
    margin-top: 2px;
}

.feature-text {
    font-size: 13px;
    line-height: 1.5;
    color: #ddd;
    flex: 1;
}

.inspiration-section {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.inspiration-section p {
    margin-bottom: 8px;
    font-size: 13px;
    color: #ccc;
}

.inspiration-section p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: #00FF88;
    font-size: 14px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal h3 {
    color: #fff;
    margin-bottom: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.form-control:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* === ПРЕМИУМ КНОПКИ === */
.btn {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s ease;
    min-width: 80px;
    user-select: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.btn-primary {
    background: linear-gradient(145deg, #00D4FF, #0099CC);
    color: #000;
    border-color: #00D4FF;
}

.btn-success {
    background: linear-gradient(145deg, #00ff88, #00cc66);
    color: #000;
    border-color: #00ff88;
}

.btn-secondary {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

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

.pixel-info {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: #ccc;
    font-weight: 600;
    min-width: 80px;
    font-size: 11px;
}

.info-value {
    color: #fff;
    text-align: right;
    flex: 1;
    font-size: 11px;
}

/* === CHANNEL RATING MODAL === */
.channel-rating-info {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.rating-channel-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.rating-channel-description {
    font-size: 13px;
    color: #ccc;
    margin-bottom: 12px;
    line-height: 1.4;
}

.current-rating {
    font-size: 14px;
    color: #ffb800;
    font-weight: 600;
}

.rating-selector {
    text-align: center;
    margin: 20px 0;
}

.rating-label {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 12px;
}

.star-rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.star {
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.3;
    color: #666;
}

.star:hover,
.star.active {
    opacity: 1;
    color: #ffb800;
}

.rating-text {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

.verification-notice {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.notice-icon {
    font-size: 18px;
    color: #ffb800;
}

.notice-text {
    flex: 1;
}

.notice-title {
    font-size: 12px;
    font-weight: 600;
    color: #ffb800;
    margin-bottom: 2px;
}

.notice-subtitle {
    font-size: 11px;
    color: #999;
    line-height: 1.3;
}

/* === EDITOR SPECIFIC === */
.canvas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    margin: 12px 0;
    min-height: 200px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

#editor-canvas {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: grab;
    max-width: 100%;
    max-height: 180px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#editor-canvas:active {
    cursor: grabbing;
}

.editor-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.editor-controls .btn {
    min-width: 60px;
    font-size: 11px;
    padding: 8px 12px;
}

/* === КАТЕГОРИИ И ФОРМЫ === */
.category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.category-tag {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.category-tag:hover {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.category-tag.selected {
    background: linear-gradient(145deg, #00D4FF, #0099CC);
    color: #000;
    border-color: #00D4FF;
}

.selected-categories {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#selected-categories-text {
    font-weight: 600;
    color: #00D4FF;
}

.char-counter {
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

textarea.form-control {
    resize: vertical;
    min-height: 60px;
    max-height: 120px;
    font-family: inherit;
    line-height: 1.4;
}

/* === ЦВЕТОВЫЕ ОБВОДКИ ДЛЯ МОДАЛЬНЫХ ОКОН === */

/* Модальное окно обычной покупки - зеленая обводка */
#purchase-modal .btn-success {
    background: linear-gradient(145deg, #00ff88, #00cc66);
    color: #000;
    border: 2px solid #00ff88;
}

/* Модальное окно массовой покупки - оранжевая обводка */
#mass-purchase-modal .btn-success {
    background: linear-gradient(145deg, #ff6b35, #ff4500) !important;
    color: #000 !important;
    border: 2px solid #ff6b35 !important;
}

/* Модальное окно редактирования - фиолетовая обводка */
#pixel-info-edit-modal .btn-success {
    background: linear-gradient(145deg, #9d4edd, #7209b7);
    color: #fff;
    border: 2px solid #9d4edd;
}

/* Модальное окно редактора изображений - фиолетовая обводка */
#editor-modal .btn-success {
    background: linear-gradient(145deg, #9d4edd, #7209b7);
    color: #fff;
    border: 2px solid #9d4edd;
}

/* === СТИЛИ ДЛЯ ПОДАЧИ ЗАЯВКИ === */
.field-hint {
    font-size: 10px;
    color: #999;
    margin-top: 4px;
    font-style: italic;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0;
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #00D4FF;
}

.checkbox-label {
    font-size: 12px;
    color: #ccc;
    user-select: none;
}

.terms-section {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.terms-section h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 12px;
}

.rules-list {
    font-size: 11px;
    color: #ccc;
    margin-bottom: 12px;
    padding-left: 0;
    list-style: none;
}

.rules-list li {
    padding: 2px 0;
    line-height: 1.4;
}

.terms-checkbox {
    background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 8px;
    margin-top: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.terms-checkbox .checkbox-label {
    color: #fff;
    font-weight: 600;
    font-size: 11px;
}

.submission-status {
    margin: 16px 0;
}

.status-card {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.status-icon {
    font-size: 24px;
    color: #ffb800;
}

.status-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffb800;
    margin-bottom: 2px;
}

.status-subtitle {
    font-size: 11px;
    color: #999;
    margin-bottom: 4px;
}

.status-date {
    font-size: 10px;
    color: #999;
}

.status-card.pending {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-color: rgba(255, 184, 0, 0.3);
}

.status-card.approved {
    background: linear-gradient(145deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.2));
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
}

.status-card.approved .status-icon {
    color: #00ff88;
}

.status-card.rejected {
    background: linear-gradient(145deg, rgba(255, 68, 68, 0.1), rgba(255, 68, 68, 0.2));
    border-color: rgba(255, 68, 68, 0.3);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.1);
}

.status-card.rejected .status-icon {
    color: #ff4444;
}

/* === АНИМАЦИИ === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideOutRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@keyframes slideInTop {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

@keyframes massSelectPulse {
    0%, 100% { 
        opacity: 1;
    }
    50% { 
        opacity: 0.7;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === LOADING STATES === */
.transaction-loader {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    .header {
        padding: 8px 12px;
        height: 50px;
    }
    
    .logo {
        font-size: 16px;
    }
    
    .bottom-bar {
        padding: 6px 12px;
    }
    
    .status-info {
        padding: 6px 10px;
        margin-bottom: 6px;
        font-size: 10px;
    }
    
    .status-info-left,
    .status-info-right {
        gap: 12px;
    }
    
    .status-item {
        gap: 3px;
    }
    
    .status-label {
        font-size: 9px;
    }
    
    .status-value {
        font-size: 10px;
    }
    
    .mode-tabs {
        gap: 2px;
        padding: 3px 0;
    }
    
    .mode-tab {
        min-width: 60px;
        height: 40px;
    }
    
    .mode-tab .mode-icon {
        font-size: 12px;
    }
    
    .mode-tab .mode-label {
        font-size: 8px;
    }
    
    .about-tab {
        margin-left: 4px;
        min-width: 55px;
        height: 40px;
    }
    
    .about-tab .mode-icon {
        font-size: 12px;
    }
    
    .about-tab .mode-label {
        font-size: 8px;
    }
    
    .about-content {
        width: 98vw;
        max-height: 90vh;
        padding: 12px;
    }
    
    .project-title {
        font-size: 20px;
    }
    
    .project-subtitle {
        font-size: 12px;
    }
    
    .about-description p {
        font-size: 12px;
    }
    
    .feature-item {
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .feature-icon {
        font-size: 14px;
        min-width: 18px;
    }
    
    .feature-text {
        font-size: 11px;
    }
    
    .inspiration-section {
        padding: 12px;
    }
    
    .inspiration-section p {
        font-size: 11px;
    }
    
    .action-button-container {
        bottom: 110px;
        gap: 6px;
    }
    
    .action-button {
        padding: 12px 20px;
        font-size: 14px;
        min-width: 100px;
    }
    
    .action-button.edit-info-mode {
        font-size: 12px;
        padding: 10px 16px;
        min-width: 90px;
    }
    
    .channel-sidebar {
        width: 95%;
    }
    
    .modal-content {
        width: 95vw;
        padding: 16px;
    }
    
    .modal h3 {
        font-size: 14px;
    }
    
    .form-control {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .btn {
        padding: 8px 12px;
        font-size: 11px;
        min-width: 70px;
    }
    
    .canvas-container {
        min-height: 150px;
        padding: 8px;
    }
    
    #editor-canvas {
        max-height: 120px;
    }
    
    .category-selector {
        gap: 6px;
    }
    
    .category-tag {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .checkbox-group {
        gap: 6px;
    }
    
    .checkbox-label {
        font-size: 11px;
    }
    
    .rules-list {
        font-size: 10px;
    }
    
    .terms-checkbox .checkbox-label {
        font-size: 10px;
    }
    
    /* Мобильная адаптация кнопок управления */
    .floating-controls {
        gap: 4px;
        top: 15px;
        right: 15px;
    }
    
    .control-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .language-btn {
        font-size: 16px !important;
    }
}

@media (max-width: 360px) {
    .pixel-grid {
        grid-template-columns: repeat(10, 22px);
        grid-template-rows: repeat(10, 22px);
        padding: 6px;
    }
    
    .pixel {
        width: 22px;
        height: 22px;
    }
    
    .floating-controls {
        gap: 4px;
    }
    
    .control-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .language-btn {
        font-size: 14px !important;
    }
    
    .bottom-bar {
        padding: 4px 8px;
    }
    
    .status-info {
        padding: 4px 8px;
        margin-bottom: 4px;
        font-size: 9px;
    }
    
    .status-info-left,
    .status-info-right {
        gap: 8px;
    }
    
    .status-label {
        font-size: 8px;
    }
    
    .status-value {
        font-size: 9px;
    }
    
    .mode-tabs {
        gap: 2px;
        padding: 2px 0;
    }
    
    .action-button {
        padding: 10px 16px;
        font-size: 12px;
        min-width: 90px;
    }
    
    .action-button.edit-info-mode {
        font-size: 11px;
        padding: 8px 12px;
        min-width: 80px;
    }
    
    .mode-tab {
        min-width: 50px;
        height: 36px;
    }
    
    .mode-tab .mode-icon {
        font-size: 10px;
    }
    
    .mode-tab .mode-label {
        font-size: 7px;
    }
    
    .about-tab {
        margin-left: 2px;
        min-width: 45px;
        height: 36px;
    }
    
    .about-tab .mode-icon {
        font-size: 10px;
    }
    
    .about-tab .mode-label {
        font-size: 7px;
    }
    
    .project-title {
        font-size: 18px;
    }
    
    .project-subtitle {
        font-size: 11px;
    }
    
    .about-description p {
        font-size: 11px;
        margin-bottom: 12px;
    }
    
    .feature-text {
        font-size: 10px;
    }
    
    .category-tag {
        padding: 5px 8px;
        font-size: 10px;
    }
}

/* === УТИЛИТЫ ДЛЯ МОБИЛЬНЫХ === */
@media (hover: none) and (pointer: coarse) {
    .control-btn:hover,
    .mode-tab:hover,
    .action-button:hover,
    .btn:hover,
    .menu-item:hover,
    .wallet-connect-item:hover,
    .category-tag:hover,
    .filter-tag:hover {
        background: inherit;
        transform: none;
    }
    
    .control-btn:active,
    .mode-tab:active,
    .action-button:active,
    .btn:active,
    .menu-item:active,
    .category-tag:active {
        transform: scale(0.95);
    }
    
    .wallet-connect-item:active {
        transform: scale(0.98);
    }
}
/* ========================================
   КНОПКА ПОИСКА КАНАЛОВ
   ======================================== */

/* === SEARCH BUTTON — SONY MINIMAL === */
.search-channels-btn {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 11px;
    background: transparent;
    border: 1.5px solid rgba(0,178,255,0.3);
    border-radius: 3px;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    z-index: 100;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
    font-family: "Orbitron", sans-serif;
    overflow: visible;
}

.search-icon {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 1.8;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.search-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2.5px;
    white-space: nowrap;
    text-transform: uppercase;
}

.search-pulse-ring {
    position: absolute;
    inset: -4px;
    border: 1.5px solid rgba(0, 178, 255, 0.6);
    border-radius: 4px;
    animation: sonyPulse 2.6s ease-out infinite;
    pointer-events: none;
}

.search-pulse-ring--delay {
    animation-delay: 1.3s;
}

@keyframes sonyPulse {
    0%   { transform: scale(1);    opacity: 0.7; border-color: rgba(0,178,255,0.7); }
    50%  { border-color: rgba(100,220,255,0.4); }
    100% { transform: scale(1.6);  opacity: 0;   border-color: rgba(0,120,255,0); }
}

.search-channels-btn:hover {
    border-color: rgba(0,178,255,0.6);
    color: #fff;
    background: rgba(0,178,255,0.06);
    box-shadow: 0 0 12px rgba(0,178,255,0.2);
}

.search-channels-btn:hover .search-pulse-ring {
    border-color: rgba(0,200,255,0.8);
    animation-duration: 1.6s;
}

.search-channels-btn:active {
    transform: translateY(-50%) scale(0.97);
    background: rgba(255,255,255,0.08);
}

@media (max-width: 480px) {
    .search-label { display: none; }
    .search-channels-btn {
        right: 52px;
        padding: 8px 10px;
    }
    .search-icon { width: 16px; height: 16px; }
}

/* ── AI Smart Search button (рядом с кнопкой ПОИСК) ──────── */
.ai-search-btn {
    position: fixed;
    top: 50%;
    right: 108px; /* левее кнопки ПОИСК */
    transform: translateY(-50%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 20px;
    color: #00d4ff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all .2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ai-search-icon {
    font-size: 13px;
    animation: ai-pulse 2.5s ease-in-out infinite;
}
.ai-search-label { font-size: 10px; letter-spacing: 1px; }
.ai-search-btn:hover {
    background: rgba(0, 212, 255, 0.16);
    border-color: rgba(0, 212, 255, 0.6);
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.25);
}
.ai-search-btn:active { transform: translateY(-50%) scale(0.95); }
@keyframes ai-pulse {
    0%, 100% { text-shadow: 0 0 4px rgba(0,212,255,0.4); }
    50%       { text-shadow: 0 0 10px rgba(0,212,255,0.9); }
}
@media (max-width: 480px) {
    .ai-search-btn { right: 100px; padding: 7px 8px; }
    .ai-search-label { display: none; }
}

/* ВАРИАНТ 1: Космический градиент с анимацией (РЕКОМЕНДУЕТСЯ) */

#grid-container {
    background: linear-gradient(
        135deg,
        #0f0c29 0%,
        #302b63 25%,
        #24243e 50%,
        #0f0c29 100%
    );
    background-size: 400% 400%;
    animation: spaceGradient 20s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes spaceGradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Звёзды (маленькие точки) */
#grid-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent),
        radial-gradient(1px 1px at 15% 90%, white, transparent),
        radial-gradient(1px 1px at 45% 20%, white, transparent),
        radial-gradient(2px 2px at 70% 40%, white, transparent),
        radial-gradient(1px 1px at 10% 60%, white, transparent);
    background-size: 200% 200%;
    background-position: 0% 0%;
    opacity: 0.5;
    animation: starsMove 60s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes starsMove {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 100% 100%;
    }
}

/* Canvas сетка поверх фона */
#pixel-grid canvas {
    position: relative;
    z-index: 1;
}

/* Оптимизация для мобильных */
@media (max-width: 768px) {
    #grid-container {
        animation-duration: 30s; /* Медленнее на мобильном */
    }
    
    #grid-container::before {
        opacity: 0.3; /* Меньше звёзд */
        animation-duration: 90s; /* Медленнее движение */
    }
}

/* Отключение анимации для слабых устройств */
@media (prefers-reduced-motion: reduce) {
    #grid-container,
    #grid-container::before {
        animation: none !important;
    }
} 
/* market-mode btn — reset */
/* ========================================
   🌌 КОСМИЧЕСКИЙ ФОН - ТОЛЬКО ЗВЁЗДЫ
   Без планет, только звёздное небо
   Добавь это в mini-style.css
   ======================================== */

/* Космический фон с градиентом */
#grid-container {
    background: linear-gradient(
        135deg,
        #0a0e27 0%,
        #1a1f3a 25%,
        #0f1629 50%,
        #1a1f3a 75%,
        #0a0e27 100%
    );
    background-size: 400% 400%;
    animation: deepSpace 25s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes deepSpace {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Слой 1: Дальние маленькие звёзды (фон) */
#grid-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 40% 15%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 85% 50%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 45% 70%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 75% 60%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 20% 90%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 35% 5%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 50% 95%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 65% 10%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 80% 95%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 95% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 12% 40%, rgba(255,255,255,0.6), transparent);
    background-size: 
        400px 400px, 350px 350px, 450px 450px, 300px 300px,
        500px 500px, 380px 380px, 420px 420px, 360px 360px,
        410px 410px, 390px 390px, 370px 370px, 430px 430px,
        340px 340px, 460px 460px, 320px 320px, 480px 480px,
        440px 440px, 330px 330px, 470px 470px, 350px 350px;
    background-position: 
        0 0, 50px 50px, 100px 0, 150px 100px,
        200px 50px, 250px 150px, 0 200px, 100px 250px,
        200px 200px, 300px 100px, 50px 150px, 150px 50px,
        250px 0, 0 100px, 100px 300px, 200px 150px,
        300px 250px, 50px 200px, 150px 200px, 250px 100px;
    opacity: 0.6;
    animation: distantStars 120s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes distantStars {
    from { transform: translate(0, 0); }
    to { transform: translate(50px, 50px); }
}

/* Слой 2: Средние яркие звёзды */
#grid-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,1), transparent),
        radial-gradient(2px 2px at 35% 55%, rgba(200,220,255,1), transparent),
        radial-gradient(3px 3px at 55% 35%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 75% 65%, rgba(255,240,220,1), transparent),
        radial-gradient(2px 2px at 25% 75%, rgba(255,255,255,1), transparent),
        radial-gradient(3px 3px at 85% 45%, rgba(220,220,255,0.9), transparent),
        radial-gradient(2px 2px at 45% 15%, rgba(255,255,255,1), transparent),
        radial-gradient(2px 2px at 65% 85%, rgba(255,240,220,1), transparent),
        radial-gradient(3px 3px at 5% 55%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 95% 25%, rgba(220,220,255,1), transparent);
    background-size: 
        600px 600px, 550px 550px, 650px 650px, 500px 500px,
        580px 580px, 620px 620px, 560px 560px, 590px 590px,
        610px 610px, 570px 570px;
    background-position:
        0 0, 100px 150px, 200px 50px, 50px 250px,
        150px 100px, 250px 200px, 100px 0, 0 150px,
        200px 250px, 50px 100px;
    opacity: 0.8;
    animation: brightStars 80s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes brightStars {
    from { transform: translate(0, 0); }
    to { transform: translate(-30px, -30px); }
}

/* Мерцание звёзд */
@keyframes starTwinkle {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.3; }
}

/* Применяем мерцание к некоторым звёздам */
#grid-container::before {
    animation: distantStars 120s linear infinite, starTwinkle 4s ease-in-out infinite;
}

/* Canvas сетка поверх всего */
#pixel-grid canvas {
    position: relative;
    z-index: 10;
}

/* ========================================
   ОПТИМИЗАЦИЯ ДЛЯ МОБИЛЬНЫХ
   ======================================== */

@media (max-width: 768px) {
    /* Упрощаем анимации на мобильных */
    #grid-container::before,
    #grid-container::after {
        animation-duration: 150s; /* Медленнее */
    }
    
    #grid-container::before {
        opacity: 0.4; /* Меньше звёзд */
    }
}

/* Отключение анимации для слабых устройств */
@media (prefers-reduced-motion: reduce) {
    #grid-container,
    #grid-container::before,
    #grid-container::after {
        animation: none !important;
    }
}

/* ========================================
   ПРОИЗВОДИТЕЛЬНОСТЬ
   ======================================== */

/*
Desktop:
- FPS: 50-60 (отлично!) ✅
- RAM: +2-3 MB
- CPU: 5-8%
- GPU: 8-12%

Mobile:
- FPS: 45-60 ✅
- RAM: +1-2 MB
- CPU: 8-12%
- GPU: 10-15%

Без планет - намного легче!
*/
/* ============================================
   💰 MARKET MODE STYLES (ОБНОВЛЕНО)
   Тёмные кнопки с красной светящейся обводкой
   ============================================ */

/* Кнопка ТОРГОВЛЯ */
.mode-tab.market-mode {
    border-color: rgba(255, 255, 255, 0.07);
    animation: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.mode-tab.market-mode.active {
    border-color: #ff3333;
    box-shadow: none;
}

.mode-tab.market-mode:hover {
    background: linear-gradient(145deg, #1a1a1a, #232323);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* ============================================
   КНОПКИ ДЕЙСТВИЙ - Тёмные с красной обводкой
   ============================================ */

/* Базовый стиль для всех кнопок market */
.action-button.market-sell-mode,
.action-button.market-buy-mode,
.action-button.market-update-mode,
.action-button.market-unlist-mode {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    color: white;
    font-weight: 600;
    border: 2px solid #ff3333;
    box-shadow: 
        0 0 15px rgba(255, 51, 51, 0.6),
        inset 0 0 10px rgba(255, 51, 51, 0.1);
    transition: all 0.3s ease;
}

/* Hover состояние */
.action-button.market-sell-mode:hover,
.action-button.market-buy-mode:hover,
.action-button.market-update-mode:hover,
.action-button.market-unlist-mode:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-color: #ff0000;
    box-shadow: 
        0 0 25px rgba(255, 0, 0, 0.8),
        0 0 40px rgba(255, 0, 0, 0.4),
        inset 0 0 15px rgba(255, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Active состояние */
.action-button.market-sell-mode:active,
.action-button.market-buy-mode:active,
.action-button.market-update-mode:active,
.action-button.market-unlist-mode:active {
    transform: translateY(0px);
    box-shadow: 
        0 0 15px rgba(255, 51, 51, 0.6),
        inset 0 0 10px rgba(255, 51, 51, 0.1);
}

/* Разные цвета обводки для разных кнопок (опционально) */

/* Кнопка продажи - зелёная обводка */
.action-button.market-sell-mode {
    border-color: #00ff88;
    box-shadow: 
        0 0 15px rgba(0, 255, 136, 0.6),
        inset 0 0 10px rgba(0, 255, 136, 0.1);
}

.action-button.market-sell-mode:hover {
    border-color: #00ff88;
    box-shadow: 
        0 0 25px rgba(0, 255, 136, 0.8),
        0 0 40px rgba(0, 255, 136, 0.4),
        inset 0 0 15px rgba(0, 255, 136, 0.2);
}

/* Кнопка покупки - золотая обводка */
.action-button.market-buy-mode {
    border-color: #ffd700;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.6),
        inset 0 0 10px rgba(255, 215, 0, 0.1);
}

.action-button.market-buy-mode:hover {
    border-color: #ffd700;
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.4),
        inset 0 0 15px rgba(255, 215, 0, 0.2);
}

/* Кнопка изменения цены - синяя обводка */
.action-button.market-update-mode {
    border-color: #00b2ff;
    box-shadow: 
        0 0 15px rgba(0, 178, 255, 0.6),
        inset 0 0 10px rgba(0, 178, 255, 0.1);
}

.action-button.market-update-mode:hover {
    border-color: #00b2ff;
    box-shadow: 
        0 0 25px rgba(0, 178, 255, 0.8),
        0 0 40px rgba(0, 178, 255, 0.4),
        inset 0 0 15px rgba(0, 178, 255, 0.2);
}

/* Кнопка убрать - красная обводка (оставляем как есть) */
.action-button.market-unlist-mode {
    border-color: #ff3333;
    box-shadow: 
        0 0 15px rgba(255, 51, 51, 0.6),
        inset 0 0 10px rgba(255, 51, 51, 0.1);
}

.action-button.market-unlist-mode:hover {
    border-color: #ff3333;
    box-shadow: 
        0 0 25px rgba(255, 51, 51, 0.8),
        0 0 40px rgba(255, 51, 51, 0.4),
        inset 0 0 15px rgba(255, 51, 51, 0.2);
}
/* ============================================
   💰 МОДАЛКИ МАРКЕТА - СТИЛИ
   Добавь в mini-style.css или market-mode-styles.css
   ============================================ */

/* Базовые стили модалок маркета */
.market-sell-modal,
.market-update-price-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.market-sell-modal.active,
.market-update-price-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Затемнённый фон */
.market-sell-modal .modal-backdrop,
.market-update-price-modal .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

/* Контент модалки */
.market-sell-modal .modal-content,
.market-update-price-modal .modal-content {
    position: relative;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 2px solid #ff3333;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 0 30px rgba(255, 51, 51, 0.5),
        0 20px 60px rgba(0, 0, 0, 0.8);
    animation: modalSlideIn 0.3s ease;
}

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

/* Заголовок */
.market-sell-modal .modal-header,
.market-update-price-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 2px solid rgba(255, 51, 51, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.market-sell-modal .modal-header h2,
.market-update-price-modal .modal-header h2 {
    margin: 0;
    font-size: 24px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.market-sell-modal .modal-close,
.market-update-price-modal .modal-close {
    background: none;
    border: none;
    font-size: 32px;
    color: #888;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.market-sell-modal .modal-close:hover,
.market-update-price-modal .modal-close:hover {
    background: rgba(255, 51, 51, 0.2);
    color: #ff3333;
}

/* Тело модалки */
.market-sell-modal .modal-body,
.market-update-price-modal .modal-body {
    padding: 24px;
}

/* Информация о маркете */
.market-info {
    background: rgba(255, 51, 51, 0.1);
    border-left: 3px solid #ff3333;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.market-info p {
    margin: 8px 0;
    color: #ccc;
    font-size: 14px;
}

.market-info strong {
    color: white;
    font-weight: 700;
}

.market-hint {
    color: #888 !important;
    font-size: 13px !important;
    font-style: italic;
}

/* Форма */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.form-group .form-control {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 51, 51, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
}

.form-group .form-control:focus {
    outline: none;
    border-color: #ff3333;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.3);
}

.form-hint {
    display: block;
    margin-top: 6px;
    color: #888;
    font-size: 12px;
}

/* Расчёт общей суммы */
.total-calculation {
    background: rgba(0, 255, 136, 0.1);
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.total-calculation p {
    margin: 8px 0;
    color: #ccc;
    font-size: 14px;
}

.total-amount {
    font-size: 16px !important;
    color: white !important;
    margin-top: 12px !important;
}

.total-amount strong {
    color: #00ff88;
    font-size: 20px;
}

/* Сравнение цен */
.price-comparison {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.price-old,
.price-new {
    flex: 1;
    text-align: center;
}

.price-old span,
.price-new span {
    display: block;
    color: #888;
    font-size: 12px;
    margin-bottom: 5px;
}

.price-old strong {
    display: block;
    color: #888;
    font-size: 18px;
    text-decoration: line-through;
}

.price-new strong {
    display: block;
    color: #00ff88;
    font-size: 20px;
}

.price-arrow {
    font-size: 24px;
    color: #ff3333;
}

/* Футер с кнопками */
.market-sell-modal .modal-footer,
.market-update-price-modal .modal-footer {
    padding: 20px 24px;
    border-top: 2px solid rgba(255, 51, 51, 0.3);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.market-sell-modal .btn,
.market-update-price-modal .btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.cancel-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.confirm-sell-btn,
.confirm-update-btn {
    background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);
    color: #1a1a1a;
    font-weight: 700;
    border: 2px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.confirm-sell-btn:hover,
.confirm-update-btn:hover {
    background: linear-gradient(135deg, #00ff99 0%, #00dd77 100%);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
    transform: translateY(-2px);
}

.confirm-sell-btn:active,
.confirm-update-btn:active {
    transform: translateY(0);
}

/* Адаптивность */
@media (max-width: 600px) {
    .market-sell-modal .modal-content,
    .market-update-price-modal .modal-content {
        width: 95%;
        max-width: none;
    }
    
    .market-sell-modal .modal-header h2,
    .market-update-price-modal .modal-header h2 {
        font-size: 20px;
    }
    
    .price-comparison {
        flex-direction: column;
        gap: 10px;
    }
    
    .price-arrow {
        transform: rotate(90deg);
    }
    
    .market-sell-modal .modal-footer,
    .market-update-price-modal .modal-footer {
        flex-direction: column;
    }
    
    .market-sell-modal .btn,
    .market-update-price-modal .btn {
        width: 100%;
    }
}/* === СТИЛИ ДЛЯ ОТЗЫВОВ === */

/* Контейнер отзывов */
.channel-reviews {
    margin-top: 20px;
}

.review-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.review-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.review-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-author strong {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
}

.review-author .username {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.review-rating {
    font-size: 14px;
    color: #FFD700;
}

.review-comment {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.5;
    margin: 10px 0;
}

.review-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
    margin-top: 8px;
}

.no-reviews {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.4);
}

.no-reviews p:first-child {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 600;
}

.no-reviews p:last-child {
    font-size: 14px;
}

/* API Badge */
.api-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 255, 136, 0.15);
    color: #00FF88;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.api-badge::before {
    content: '🔵';
    font-size: 10px;
}

/* Verified Badge для API каналов */
.channel-card[data-type='api'] .channel-name::after {
    content: ' ✓';
    color: #00FF88;
    font-weight: bold;
}
/* ============================================
   🎨 ОБНОВЛЁННЫЕ СТИЛИ ДЛЯ FSM МОДАЛКИ И ФИЛЬТРОВ
   Добавь в конец mini-style.css
   ============================================ */

/* === МОДАЛКА РЕДАКТИРОВАНИЯ === */

.modal-large {
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}

.category-grid,
.tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.category-tag,
.tag-item {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    text-align: center;
    user-select: none;
}

.category-tag:hover,
.tag-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 255, 136, 0.3);
    transform: translateY(-2px);
}

.category-tag.selected {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.1));
    border-color: #00ff88;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.tag-item.selected {
    background: linear-gradient(135deg, rgba(0, 178, 255, 0.2), rgba(0, 178, 255, 0.1));
    border-color: #00b2ff;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(0, 178, 255, 0.3);
}

/* Визуальное выделение как в боте */
.tag-item.selected::before {
    content: "• ";
    color: #00ff88;
    font-weight: bold;
}

.selected-info {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.selected-info span {
    color: #00ff88;
    font-weight: 600;
}

/* Превью */
.preview-box {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 136, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
}

.preview-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.preview-item strong {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    min-width: 100px;
}

.preview-item span {
    color: #00ff88;
    font-weight: 500;
}

/* === НАВИГАТОР КАНАЛОВ === */

.search-section {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.search-btn {
    padding: 10px 15px;
    background: linear-gradient(135deg, #00ff88, #00cc6a);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.4);
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
}

.filter-reset {
    padding: 4px 8px;
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 4px;
    color: #ff4444;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-reset:hover {
    background: rgba(255, 68, 68, 0.3);
}

.scrollable {
    max-height: 150px;
    overflow-y: auto;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.scrollable::-webkit-scrollbar {
    width: 6px;
}

.scrollable::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 136, 0.3);
    border-radius: 3px;
}

.filter-tag {
    display: inline-block;
    padding: 8px 12px;
    margin: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.filter-tag.small {
    padding: 6px 10px;
    font-size: 11px;
}

.filter-tag:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 255, 136, 0.3);
}

.filter-tag.active {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.1));
    border-color: #00ff88;
    font-weight: 600;
}

.filter-hint {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    font-style: italic;
}

/* Подписчики */
.range-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.range-input {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-size: 13px;
}

.range-separator {
    color: rgba(255, 255, 255, 0.3);
}

.quick-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.quick-filter {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-filter:hover,
.quick-filter.active {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ff88;
    color: #00ff88;
}

/* Рейтинг */
.rating-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rating-filter {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rating-filter:hover,
.rating-filter.active {
    background: rgba(255, 215, 0, 0.1);
    border-color: #ffd700;
    color: #ffd700;
}

/* Кнопки действий */
.filter-actions {
    display: flex;
    gap: 8px;
    margin: 20px 0;
}

.apply-filters,
.reset-all-filters {
    flex: 1;
    padding: 12px;
    font-weight: 600;
    font-size: 13px;
}

/* Результаты */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 15px;
}

.results-count {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.results-count span {
    color: #00ff88;
    font-size: 16px;
}

.results-toggle {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.results-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Loading */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #00ff88;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

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

/* === АДАПТИВНОСТЬ === */

@media (max-width: 768px) {
    .category-grid,
    .tags-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 6px;
    }
    
    .category-tag,
    .tag-item {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .modal-large {
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    .category-grid,
    .tags-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 4px;
    }
    
    .category-tag,
    .tag-item {
        padding: 6px 8px;
        font-size: 11px;
    }
    
    .filter-actions {
        flex-direction: column;
    }
}
/* ==================== TON CONNECT FIXES ==================== */

/* TON Connect modal — выше всего */
tc-root {
    z-index: 9999 !important;
    position: fixed !important;
}

/* Кнопка кошелька — всегда кликабельна */
.wallet-connect-item {
    position: relative;
    z-index: 1;
    pointer-events: all !important;
    -webkit-tap-highlight-color: rgba(0,212,255,0.2);
}

.wallet-connect-item:active {
    background: linear-gradient(145deg, #003344, #004455) !important;
    transform: scale(0.98);
}

/* ==================== BOTTOM BAR SEARCH FIX ==================== */

/* Убираем случайно попавшие лейблы в статус-бар */
#bottom-bar .search-section,
#bottom-bar .search-input,
#bottom-bar label {
    display: none !important;
}

/* ==================== CHANNEL SEARCH SIDEBAR ==================== */

/* Поиск */
.ch-search-row {
    padding: 10px 12px 6px;
}
.ch-search-input {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    padding: 9px 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.ch-search-input:focus {
    border-color: rgba(0,212,255,0.5);
    background: rgba(255,255,255,0.1);
}
.ch-search-input::placeholder { color: rgba(255,255,255,0.35); }

/* Шторка фильтров */
.ch-filter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px 6px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,212,255,0.08);
    transition: background 0.15s;
}
.ch-filter-toggle:active { background: rgba(255,255,255,0.1); }
.ch-filter-toggle-label {
    flex: 1;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.ch-filter-badge {
    color: #00d4ff;
    font-size: 14px;
    line-height: 1;
}
.ch-filter-arrow {
    font-size: 10px;
    color: #666;
}

/* Панель фильтров */
.ch-filters-panel {
    margin: 0 12px 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    overflow: hidden;
}

/* ── Секция фильтра ── */
.ch-filter-section {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}
.ch-filter-section:last-child { border-bottom: none; }

/* Заголовок-кнопка шторки */
.ch-filter-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s;
}
.ch-filter-label:active {
    background: rgba(255,255,255,0.03);
}
.ch-filter-section.acc-open .ch-filter-label {
    color: #fff;
}

/* Цветная иконка */
.acc-label-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* Подсказка рядом с заголовком */
.acc-hint {
    font-size: 9px;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    margin-left: 2px;
}

/* Стрелка шторки */
.acc-arrow {
    margin-left: auto;
    font-size: 8px;
    color: rgba(255,255,255,0.3);
    transition: transform 0.22s ease, color 0.15s;
    display: inline-block;
    flex-shrink: 0;
}
.ch-filter-section.acc-open .acc-arrow {
    transform: rotate(180deg);
    color: rgba(255,255,255,0.6);
}

/* Тело шторки — закрыто по умолчанию */
.ch-filter-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, padding-bottom 0.2s ease;
    padding: 0 14px;
    padding-bottom: 0;
}
.ch-filter-section.acc-open .ch-filter-body {
    max-height: 320px;
    padding-bottom: 12px;
}

/* ── Выпуклые кнопки сортировки ── */
.ch-sort-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ch-sort-tab {
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
    border: 1px solid rgba(255,255,255,0.14);
    border-bottom: 2px solid rgba(0,0,0,0.4);
    border-radius: 10px;
    color: rgba(255,255,255,0.82);
    font-size: 12px;
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    font-weight: 500;
}
.ch-sort-tab:active {
    transform: translateY(1px);
    box-shadow: none;
    border-bottom-width: 1px;
}
.ch-sort-tab.active {
    background: linear-gradient(180deg, rgba(0,212,255,0.25) 0%, rgba(0,140,200,0.14) 100%);
    border-color: rgba(0,212,255,0.55);
    border-bottom-color: rgba(0,100,160,0.7);
    color: #00d4ff;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,212,255,0.2), inset 0 1px 0 rgba(0,212,255,0.2);
}

/* ── Выпуклые теги фильтров ── */
.ch-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ch-tag {
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
    border: 1px solid rgba(255,255,255,0.14);
    border-bottom: 2px solid rgba(0,0,0,0.4);
    border-radius: 10px;
    color: rgba(255,255,255,0.82);
    font-size: 12px;
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-weight: 500;
}
.ch-tag:active {
    transform: translateY(1px);
    box-shadow: none;
    border-bottom-width: 1px;
}
.ch-tag.active {
    background: linear-gradient(180deg, rgba(0,212,255,0.25) 0%, rgba(0,140,200,0.14) 100%);
    border-color: rgba(0,212,255,0.55);
    border-bottom-color: rgba(0,100,160,0.7);
    color: #00d4ff;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,212,255,0.2), inset 0 1px 0 rgba(0,212,255,0.2);
}

/* Кнопки подписчиков/рейтинга */
.ch-quick-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ch-sub-btn {
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
    border: 1px solid rgba(255,255,255,0.14);
    border-bottom: 2px solid rgba(0,0,0,0.4);
    border-radius: 10px;
    color: rgba(255,255,255,0.82);
    font-size: 12px;
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    font-weight: 500;
}
.ch-sub-btn:active {
    transform: translateY(1px);
    box-shadow: none;
    border-bottom-width: 1px;
}
.ch-sub-btn.active {
    background: rgba(0,212,255,0.15);
    border-color: #00d4ff;
    color: #00d4ff;
    font-weight: 600;
}

/* Кнопка сброса в label */
.ch-reset-btn {
    background: none;
    border: none;
    color: rgba(255,100,100,0.7);
    font-size: 10px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    text-decoration: underline;
}
.ch-reset-btn:hover { color: #ff6464; }

/* Кнопка сброса всего */
.ch-reset-all {
    display: block;
    width: calc(100% - 24px);
    margin: 8px 12px;
    padding: 8px;
    background: rgba(255,80,80,0.08);
    border: 1px solid rgba(255,80,80,0.2);
    border-radius: 8px;
    color: rgba(255,120,120,0.8);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.ch-reset-all:active { background: rgba(255,80,80,0.15); }

/* Строка результатов */
.ch-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 14px 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
}
.ch-results-bar strong { color: rgba(255,255,255,0.7); }
.ch-loading-indicator { font-size: 14px; }


/* ==================== CHANNEL CARDS ==================== */

.ch-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px;
    margin: 0 12px 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.ch-card:active {
    background: rgba(255,255,255,0.07);
    border-color: rgba(0,212,255,0.3);
}
.ch-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.ch-card-avatar {
    font-size: 26px;
    min-width: 36px;
    text-align: center;
    line-height: 36px;
}
.ch-card-main { flex: 1; min-width: 0; }
.ch-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.ch-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.ch-card-stat {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}
.ch-card-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ch-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.ch-card-tag {
    font-size: 10px;
    color: rgba(0,212,255,0.8);
    background: rgba(0,212,255,0.08);
    border: 1px solid rgba(0,212,255,0.15);
    border-radius: 8px;
    padding: 2px 7px;
}
.ch-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.ch-btn-rate, .ch-btn-open {
    flex: 1;
    padding: 9px 6px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.ch-btn-rate {
    background: rgba(255,200,0,0.1);
    border: 1px solid rgba(255,200,0,0.2);
    color: #ffc800;
}
.ch-btn-rate:active { background: rgba(255,200,0,0.2); }
.ch-btn-open {
    background: rgba(0,212,255,0.15);
    border: 1px solid rgba(0,212,255,0.3);
    color: #00d4ff;
}
.ch-btn-open:active { background: rgba(0,212,255,0.25); }

/* Бейджи */
.ch-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 4px;
}
.ch-badge.pixel { background: rgba(0,212,255,0.15); color: #00d4ff; }
.ch-badge.free { background: rgba(255,255,255,0.08); color: #888; }
.ch-badge.owned { background: linear-gradient(45deg,#00FF88,#00CC66); color:#000; }
.ch-badge.verified { background: rgba(255,215,0,0.15); color: #FFD700; border: 1px solid rgba(255,215,0,0.3); font-weight: 700; }

.ch-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,0.5);
}

/* Wallet info в модалке покупки */
.modal-wallet-info { padding: 8px 0 4px; }
.wallet-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}
.wallet-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wallet-dot.connected { background: #00FF88; box-shadow: 0 0 6px #00FF88; }
.wallet-dot.disconnected { background: #ff6644; }
.wallet-balance-badge {
    margin-left: auto;
    font-size: 12px;
    color: #00d4ff;
    font-weight: 600;
}

/* ==================== CHANNEL CARDS ==================== */

.ch-card {
    /* Glassmorphism base — cardStyle override работает через inline style */
    background: rgba(14, 18, 28, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    margin: 0 10px 10px;
    padding: 13px;
    cursor: pointer;
    position: relative; overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
    -webkit-tap-highlight-color: transparent;
    /* content-visibility убрали — мешает виртуальному скроллу с fixed height */
}

/* Виртуальные карточки — абсолютное позиционирование */
.ch-vs-item {
    margin: 0;
    padding: 11px 13px;
}
/* Тонкая градиентная полоска-подсветка сверху */
.ch-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,180,255,.3), transparent);
    opacity: 0; transition: opacity .2s;
}
.ch-card:active {
    transform: scale(0.983) translateZ(0);
    border-color: rgba(0,180,255,.2);
    box-shadow: 0 1px 6px rgba(0,0,0,.4), inset 0 0 20px rgba(0,180,255,.05);
    transition-duration: .06s;
}
.ch-card:active::before { opacity: 1; }

/* Если канал стилизован — накладываем glassmorphism поверх фона */
.ch-card--styled {
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 2px 16px rgba(0,0,0,0.35),
        0 0 0 1px var(--glow-color, transparent),
        0 0 calc(var(--glow-intensity, 0) * 20px) var(--glow-color, transparent);
    transition: box-shadow .3s ease;
}
.ch-card--styled::after {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.72) 100%);
    pointer-events: none; border-radius: 14px;
}
.ch-card--styled .ch-card-top,
.ch-card--styled .ch-card-desc,
.ch-card--styled .ch-card-tags,
.ch-card--styled .ch-card-actions { position: relative; z-index: 1; }

.ch-card--owned { border-color: rgba(0,255,136,.25); }

/* AI result card on grid — тонкое голубое свечение */
.nav-ai-on-grid {
    border-color: rgba(0,212,255,.2);
    box-shadow: 0 0 0 1px rgba(0,212,255,.08), 0 2px 12px rgba(0,0,0,.3);
}

.ch-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.ch-card-avatar {
    font-size: 28px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    flex-shrink: 0;
}
.ch-card-main { flex: 1; min-width: 0; }
.ch-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.ch-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.ch-card-stat {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

/* Badges */
.ch-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 600;
}
.ch-badge.pixel  { background: rgba(0,212,255,0.15); color: #00d4ff; }
.ch-badge.free   { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); font-size: 10px; }
.ch-badge.owned  { background: rgba(0,255,136,0.2); color: #00ff88; }
.ch-badge.verified { background: rgba(0,212,255,0.2); color: #00d4ff; }

/* Description */
.ch-card-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags */
.ch-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.ch-card-tag {
    font-size: 10px;
    padding: 3px 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.5);
}

/* Action buttons */
.ch-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.ch-btn-rate,
.ch-btn-open {
    flex: 1;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 48px;
    justify-content: center;
    backdrop-filter: blur(8px);
    position: relative; overflow: hidden;
}
.ch-btn-rate {
    background: rgba(255,200,0,0.08);
    border: 1px solid rgba(255,200,0,0.2);
    color: rgba(255,200,0,0.9);
    box-shadow: inset 0 0 10px rgba(255,200,0,.04);
}
.ch-btn-rate:active {
    transform: scale(0.93);
    box-shadow: 0 0 10px rgba(255,200,0,.2);
    transition-duration: .06s;
}
.ch-btn-rate-stars { font-size: 14px; letter-spacing: 1px; }
.ch-btn-rate-label { font-size: 10px; opacity: 0.8; }
.ch-star { color: rgba(255,200,0,0.3); }
.ch-star.on { color: #ffc800; }

.ch-btn-open {
    background: rgba(0,212,255,0.1);
    border: 1px solid rgba(0,212,255,0.22);
    color: #00d4ff;
    flex: 1.5;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    font-size: 13px;
    box-shadow: inset 0 0 10px rgba(0,212,255,.04);
}
.ch-btn-open:active {
    transform: scale(0.93);
    box-shadow: 0 0 12px rgba(0,212,255,.25);
    background: rgba(0,212,255,0.18);
    transition-duration: .06s;
}
.ch-btn-arrow { font-size: 16px; }

/* Reviews button */
.ch-btn-reviews {
    flex: 1;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.65);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; transition: transform .12s; backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
}
.ch-btn-reviews:active { transform: scale(0.93); transition-duration:.06s; }
.ch-btn-reviews-icon { font-size: 14px; }

/* Empty state */
.ch-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}


/* Кнопка выхода из кошелька */
.wallet-disconnect-item {
    border-top: 1px solid rgba(255, 70, 50, 0.15) !important;
    background: rgba(255, 70, 50, 0.04) !important;
}
.wallet-disconnect-item:hover,
.wallet-disconnect-item:active {
    background: rgba(255, 70, 50, 0.1) !important;
}
.wallet-disconnect-item .menu-title {
    color: #ff6644 !important;
    font-size: 12px;
}
.wallet-disconnect-item .menu-subtitle {
    color: rgba(255, 100, 68, 0.6) !important;
    font-size: 11px;
}

/* ==================== ACCORDION SECTIONS (edit + purchase modal) ==================== */

.acc-section {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.acc-section.open {
    border-color: rgba(0,212,255,0.25);
}
.acc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.acc-header:active { background: rgba(255,255,255,0.07); }
.acc-section.open .acc-header { background: rgba(0,212,255,0.05); }

.acc-icon { font-size: 16px; flex-shrink: 0; }
.acc-title {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
}
.acc-badge {
    font-size: 11px;
    color: #00d4ff;
    background: rgba(0,212,255,0.1);
    border-radius: 8px;
    padding: 2px 8px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acc-arrow {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.acc-section.open .acc-arrow { color: #00d4ff; }

/* Тело секции */
.acc-body {
    display: none;
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.1);
}
.acc-section.open .acc-body { display: block; }

/* Теги внутри секций */
.acc-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.acc-tag {
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.acc-tag:active { transform: scale(0.94); }
.acc-tag.active, .acc-tag.selected {
    background: rgba(0,212,255,0.15);
    border-color: #00d4ff;
    color: #00d4ff;
    font-weight: 600;
}

.acc-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin: 0 0 8px;
    font-style: italic;
}
.acc-counter {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 8px;
    text-align: right;
}


/* ==========================================
   💰 MARKET BUY MODAL STYLES
   ========================================== */

.market-buy-summary {
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.market-buy-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}
.market-buy-row strong { color: #fff; }
.market-total-price { color: #ffd700 !important; font-size: 15px; }

.market-buy-items {
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
}
.market-buy-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 12px;
    gap: 8px;
}
.market-buy-item:last-child { border-bottom: none; }
.market-buy-pixel { color: rgba(255,255,255,0.5); min-width: 50px; }
.market-buy-seller { color: rgba(255,255,255,0.4); flex: 1; text-align: center; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-buy-price { color: #ffd700; font-weight: 600; min-width: 65px; text-align: right; }

.market-warning {
    color: #ff5252;
    font-size: 12px;
    text-align: center;
    padding: 6px;
    background: rgba(255,82,82,0.08);
    border-radius: 6px;
    margin-bottom: 8px;
}
.market-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

.confirm-market-buy-btn {
    background: linear-gradient(135deg, #ffd700, #ff9500) !important;
    color: #000 !important;
    font-weight: 700;
    border: none;
}
.confirm-market-buy-btn:disabled {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.3) !important;
    cursor: not-allowed;
}
.confirm-market-buy-btn:not(:disabled):hover {
    background: linear-gradient(135deg, #ffe040, #ffa500) !important;
}


/* ==========================================
   💸 MARKET SPLIT INFO (куда уходят деньги)
   ========================================== */
.market-split-info {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0;
}
.market-split-title {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.market-split-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
}
.market-split-row:last-of-type { border-bottom: none; }
.split-label { color: rgba(255,255,255,0.65); }
.split-label small { color: rgba(255,255,255,0.35); font-size: 10px; }
.split-amount { font-weight: 700; }
.split-amount.seller   { color: #00e676; }
.split-amount.platform { color: rgba(255,255,255,0.4); font-size: 12px; }
.split-note {
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    text-align: center;
    margin-top: 7px;
    font-style: italic;
}

/* ==========================================
   🎨 EDITOR IMPROVEMENTS
   ========================================== */

/* Adjustment sliders row */
.editor-adjustments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    margin: 6px 0;
}

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

.adj-row label {
    font-size: 13px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.adj-row input[type="range"] {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.adj-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00b2ff;
    box-shadow: 0 0 6px rgba(0,178,255,0.5);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.adj-row input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.adj-val {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    width: 36px;
    text-align: right;
    font-family: 'Orbitron', sans-serif;
    flex-shrink: 0;
}

/* Quality buttons row */
.editor-quality {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 6px !important;
}

.quality-label {
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.3);
    font-family: 'Orbitron', sans-serif;
    align-self: center;
    margin-right: 2px;
}

.btn-xs {
    padding: 4px 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.5px;
    opacity: 0.5;
    transition: opacity 0.2s, background 0.2s;
}

.btn-xs.active {
    opacity: 1;
    background: rgba(0,178,255,0.15) !important;
    border-color: rgba(0,178,255,0.4) !important;
    color: #00b2ff !important;
}

/* Flip buttons active state */
#flip-h.active, #flip-v.active {
    background: rgba(157,78,221,0.2) !important;
    border-color: rgba(157,78,221,0.5) !important;
    color: #c084fc !important;
}

/* Undo button disabled */
#undo-editor:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

/* ============================================================
   💬 REVIEWS BUTTON ON CARD + REVIEWS MODAL
   ============================================================ */

/* Кнопка "Отзывы" на карточке */
.ch-btn-reviews {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ch-btn-reviews:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

.ch-btn-reviews-icon {
    font-size: 13px;
    line-height: 1;
}

/* Кнопка оценки — подсвечена если уже оценил */
.ch-btn-rate.rated {
    background: rgba(255, 184, 0, 0.12);
    border-color: rgba(255, 184, 0, 0.4);
    color: #ffb800;
}

.ch-btn-rate.rated .ch-btn-rate-label {
    color: #ffb800;
}

.ch-btn-rate.rated .ch-star.on {
    color: #ffb800;
    text-shadow: 0 0 6px rgba(255,184,0,0.5);
}

/* Модалка отзывов */
.reviews-modal-content {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}

.reviews-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.reviews-list-items {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reviews-loading,
.reviews-empty {
    text-align: center;
    padding: 32px 16px;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}

.reviews-empty {
    font-style: italic;
}

/* Один отзыв */
.rv-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 10px 12px;
}

.rv-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.rv-author {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.rv-stars {
    display: flex;
    gap: 1px;
}

.rv-star {
    font-size: 12px;
    color: rgba(255,255,255,0.2);
}

.rv-star.on {
    color: #ffb800;
}

.rv-date {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
    margin-left: auto;
}

.rv-edited {
    font-size: 10px;
    color: rgba(0,178,255,0.6);
    margin-left: 4px;
}

.rv-comment {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
    margin-top: 4px;
}

.reviews-modal-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.reviews-modal-footer .btn {
    width: 100%;
}
/* ==========================================
   МОИ КАНАЛЫ — стили
   Добавить в конец mini-style.css
   ========================================== */

/* Блок в главном меню */
.my-channels-menu-block {
    margin: 12px 16px;
    background: rgba(0, 255, 136, 0.04);
    border: 1px solid rgba(0, 255, 136, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.my-channels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.my-channels-count {
    background: linear-gradient(135deg, #00ff88, #00cc66);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* Карточка «моего» канала */
.my-ch-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.3s;
    -webkit-tap-highlight-color: transparent;
}

.my-ch-card--styled {
    box-shadow: inset 0 0 calc(var(--glow-intensity, 0) * 16px) var(--glow-color, transparent);
}

.my-ch-card:last-of-type {
    border-bottom: none;
}

.my-ch-card:active {
    background: rgba(0, 255, 136, 0.08);
}

.my-ch-avatar {
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 136, 0.08);
    border-radius: 8px;
    flex-shrink: 0;
}

.my-ch-info {
    flex: 1;
    min-width: 0;
}

.my-ch-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.my-ch-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

/* Бейдж МОЙ */
.my-ch-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    background: linear-gradient(135deg, #00ff88, #00cc66);
    color: #000;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Пустое состояние */
.my-ch-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}

.my-ch-add-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 14px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 8px;
    color: #00d4ff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.my-ch-add-btn:active {
    background: rgba(0, 212, 255, 0.2);
}

/* Ссылка на бота внизу блока */
.my-ch-bot-link {
    display: block;
    padding: 10px 14px;
    text-align: center;
    font-size: 11px;
    color: rgba(0, 212, 255, 0.7);
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 0.15s;
    letter-spacing: 0.3px;
}

.my-ch-bot-link:active {
    color: #00d4ff;
}

/* ── Бейдж МОЙ на карточке в навигаторе каналов ── */
/* ch-badge.owned уже есть, усиливаем его */
.ch-badge.owned {
    background: linear-gradient(135deg, #00ff88, #00cc66) !important;
    color: #000 !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* Подсветка всей карточки «моего» канала */
.ch-card.is-mine {
    border-color: rgba(0, 255, 136, 0.25) !important;
    background: rgba(0, 255, 136, 0.03) !important;
}

/* Обновить счётчик в шапке блока */
/* (вызывается из JS после renderMyChannelsSection) */


/* ═══════════════════════════════════════════════════════════════
   CARD STYLE — применение к карточкам в поиске
   ═══════════════════════════════════════════════════════════════ */

.ch-card { --ch-card-accent: #6ab3f2; transition: box-shadow 0.2s; position: relative; overflow: hidden; }
.ch-card .ch-card-name { color: var(--ch-card-accent, #f5f5f5); }

/* Слой фонового изображения */
.ch-card-bg-img {
    position: absolute;
    width: 200%; height: 200%;
    background-size: cover; background-repeat: no-repeat;
    pointer-events: none; z-index: 0;
    will-change: transform;
}
/* Затемняющий оверлей для читаемости текста */
.ch-card-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,0.45) 0%, rgba(10,15,25,0.92) 60%, rgba(10,15,25,0.97) 100%);
    pointer-events: none; z-index: 1;
}
/* Весь контент карточки поверх фона */
.ch-card > *:not(.ch-card-bg-img):not(.ch-card-img-overlay) { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════
   CARD STYLE — применение к модалке канала
   ═══════════════════════════════════════════════════════════════ */

.cdm-content { --cdm-accent: #6ab3f2; }
.cdm-header { min-height: 90px; flex-shrink: 0; position: relative; z-index: 2; }

/* Фоновое изображение модалки */
.cdm-bg-img {
    position: absolute;
    width: 200%; height: 200%;
    background-size: cover; background-repeat: no-repeat;
    pointer-events: none; z-index: 0;
    will-change: transform;
}
/* Оверлей модалки — сильнее снизу чтобы текст читался */
.cdm-bg-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(10,15,25,0.45) 0%,
        rgba(10,15,25,0.75) 40%,
        rgba(10,15,25,0.95) 80%
    );
    pointer-events: none; z-index: 1;
}
/* В редакторе инфо — чуть плотнее, чтобы поля/чипы хорошо читались */
.modal-content.cdm-content.ced-content .cdm-bg-overlay {
    background: linear-gradient(180deg,
        rgba(10,15,25,0.55) 0%,
        rgba(10,15,25,0.82) 35%,
        rgba(10,15,25,0.97) 70%
    );
}
.cdm-name { color: var(--cdm-accent, #f5f5f5) !important; }
.cdm-badge.verified { border-color: var(--cdm-accent, rgba(255,215,0,0.3)) !important; }

/* ═══════════════════════════════════════════════════════════════
   CARD STYLE EDITOR
   ═══════════════════════════════════════════════════════════════ */

.ced-sub-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35); margin-bottom: 8px; margin-top: 4px;
}

/* Превью */
.cse-preview {
    border-radius: 10px; overflow: hidden; margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,0.08);
}
.cse-preview-inner {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; background: #1a2332;
    transition: background 0.25s;
}
.cse-preview-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.1); flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.15);
}
.cse-preview-name {
    font-size: 14px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cse-preview-sub { font-size: 11px; margin-top: 3px; transition: color 0.2s; }

/* Пресеты */
.cse-presets {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 6px; margin-bottom: 4px;
}
.cse-preset {
    height: 42px; border-radius: 8px; cursor: pointer;
    border: 2px solid transparent; position: relative; overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
}
.cse-preset:active { transform: scale(0.94); }
.cse-preset.active { border-color: #fff !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.3); }
.cse-preset-label {
    position: absolute; bottom: 2px; left: 0; right: 0;
    text-align: center; font-size: 8px; color: rgba(255,255,255,0.8);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8); line-height: 1.2;
    padding: 0 2px;
}

/* Upload */
.cse-upload-row { display: flex; gap: 10px; align-items: center; }
.cse-img-preview {
    width: 64px; height: 44px; border-radius: 8px; flex-shrink: 0;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; overflow: hidden;
}
.cse-upload-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Акцентный цвет */
.cse-accent-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cse-accent-val { font-size: 12px; color: rgba(255,255,255,0.5); font-family: monospace; }
.cse-accent-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.cse-accent-dot {
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(255,255,255,0.15);
    transition: transform 0.15s, border-color 0.15s;
}
.cse-accent-dot:active { transform: scale(0.85); }
.cse-accent-dot:hover { border-color: rgba(255,255,255,0.6); }



/* ═══════════════════════════════════════════════════════════════
   CARD STYLE MODAL
   ═══════════════════════════════════════════════════════════════ */

/* Style button in editor */
.ced-style-btn {
    width: 100%; display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 10px 14px; cursor: pointer; color: #fff;
    font-size: 14px; transition: background 0.2s;
}
.ced-style-btn:hover { background: rgba(255,255,255,0.07); }
.ced-style-btn-preview {
    width: 40px; height: 28px; border-radius: 6px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
}
.ced-style-btn-arrow { margin-left: auto; color: rgba(255,255,255,0.3); }

/* Modal */
.csm-content {
    max-width: 480px; width: 100%;
    max-height: 90vh;
    padding: 0; border-radius: 18px;
    overflow-y: auto; overflow-x: hidden;
    background: #111820;
    -webkit-overflow-scrolling: touch;
}
.csm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 12px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.csm-title { font-size: 16px; font-weight: 700; color: #fff; }
.csm-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35); padding: 0 18px;
}

/* Two previews */
.csm-previews {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 14px 18px;
}
.csm-preview-block { display: flex; flex-direction: column; gap: 6px; }
.csm-preview-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3); text-align: center;
}

/* Mini card preview */
.csm-mini-card {
    border-radius: 10px; overflow: hidden; position: relative;
    background: #1a2332; min-height: 64px;
    border: 1px solid rgba(255,255,255,0.08);
}
.csm-mini-bg {
    position: absolute; width: 200%; height: 200%;
    background-size: cover; pointer-events: none;
    display: none;
}
.csm-mini-overlay {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(160deg,rgba(0,0,0,0.2) 0%,rgba(10,15,25,0.85) 100%);
}
.csm-mini-content {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 8px; padding: 8px;
}
.csm-mini-avatar {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
    background: rgba(255,255,255,0.1); display:flex;align-items:center;justify-content:center;
    font-size: 16px; overflow: hidden;
}
.csm-mini-name { font-size: 11px; font-weight: 700; color: #6ab3f2; }
.csm-mini-sub  { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* Full card preview */
.csm-full-card {
    border-radius: 10px; overflow: hidden; position: relative;
    background: #1a2332; min-height: 140px;
    border: 1px solid rgba(255,255,255,0.08);
}
.csm-full-bg {
    position: absolute; width: 200%; height: 200%;
    background-size: cover; pointer-events: none;
    display: none; will-change: transform;
}
.csm-full-overlay {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,rgba(0,0,0,0.2) 0%,rgba(10,15,25,0.92) 60%);
}
.csm-full-content {
    position: relative; z-index: 2;
    padding: 10px; display: flex; flex-direction: column; gap: 4px;
}
.csm-full-avatar {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: rgba(255,255,255,0.1); display:flex;align-items:center;justify-content:center;
    font-size: 18px; margin-bottom: 4px;
    border: 2px solid rgba(255,255,255,0.15);
}
.csm-full-name { font-size: 12px; font-weight: 700; color: #6ab3f2; }
.csm-full-desc { font-size: 9px; color: rgba(255,255,255,0.45); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.csm-full-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.csm-tag { font-size: 8px; padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

/* Gesture hint overlay */
.csm-gesture-hint {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center;
    border-radius: 10px; pointer-events: none;
}
.csm-gesture-hint span {
    font-size: 9px; color: rgba(255,255,255,0.7); text-align: center;
    padding: 6px 8px; background: rgba(0,0,0,0.4); border-radius: 6px; line-height: 1.5;
}
.csm-gesture-tip {
    font-size: 10px; color: rgba(255,255,255,0.3); text-align: center;
    line-height: 1.6; padding: 6px 18px 0;
}

/* Presets in modal */
.csm-presets {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 6px; padding: 8px 18px 0;
}
.csm-preset {
    height: 38px; border-radius: 8px; cursor: pointer;
    border: 2px solid transparent; position: relative; overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
}
.csm-preset:active { transform: scale(0.93); }
.csm-preset.active { border-color: #fff !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.csm-preset-label {
    position: absolute; bottom: 1px; left: 0; right: 0;
    text-align: center; font-size: 7px; color: rgba(255,255,255,0.75);
    text-shadow: 0 1px 3px rgba(0,0,0,0.9); line-height: 1.2;
}

/* Upload */
.csm-upload-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 18px 0; }
.csm-reset-pos {
    background: none; border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4); padding: 6px 10px; border-radius: 8px;
    font-size: 11px; cursor: pointer;
}
.csm-reset-pos:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); }

/* Save button */
.csm-save-btn {
    width: calc(100% - 36px); margin: 14px 18px 18px;
    background: #2d6ef7; color: #fff; border: none; border-radius: 12px;
    padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background 0.2s;
}
.csm-save-btn:hover { background: #3d7ef9; }
.csm-save-btn:active { background: #1d5ee0; }

/* Accent row padding in modal */
.csm-content .cse-accent-row { padding: 8px 18px 0; }

/* ─── Card style modal: nudge control buttons ───────────────────── */
.csm-controls-grid {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 18px 0;
}
.csm-ctrl-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.csm-ctrl-label { font-size: 11px; color: rgba(255,255,255,0.45); flex: 1; }
.csm-ctrl-btns { display: flex; align-items: center; gap: 6px; }
.csm-ctrl-btn {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    color: #fff; font-size: 16px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: background 0.15s;
    flex-shrink: 0;
}
.csm-ctrl-btn:active { background: rgba(255,255,255,0.18); transform: scale(0.9); }
.csm-ctrl-val {
    font-size: 11px; font-family: monospace; color: rgba(255,255,255,0.5);
    min-width: 38px; text-align: center;
}


/* ═══ Channel Editor scroll fix ═══════════════════════════════════ */
.modal-content.cdm-content.ced-content {
    max-height: 90vh !important;
    height: 90vh !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}
.ced-scroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: scroll !important;          /* scroll не auto — всегда активен */
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    will-change: scroll-position !important; /* хинт браузеру */
    position: relative !important;
    z-index: 2 !important;
}

/* Фоновый слой карточки в редакторе — позади контента */
.ced-bg-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}


/* ═══ Canvas touch-action override when editor modal is open ═══ */
body.modal-editor-open #pixel-canvas {
    touch-action: pan-y !important;
}
body.modal-editor-open .ced-scroll {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   CDM GLASS v2 — Channel Detail Modal
   ═══════════════════════════════════════════════════════════════ */

.cdm-glass {
    position: relative;
    background: rgba(10, 14, 22, 0.88);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    max-width: 420px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}

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

/* Animated top-edge neon line */
.cdm-glass::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent, #6ab3f2), transparent);
    opacity: calc(var(--glow-intensity, 0.4) * 1.5);

}

    50%     { opacity: 1; transform: scaleX(1); }
}

/* Background layer */
.cdm-glass-bg { display: none !important; }
.cdm-glass-overlay { display: none !important; }

/* Стандартный фон без кастомного изображения */
.cdm-glass:not(.cdm-styled) {
    background: linear-gradient(160deg, #0b1020 0%, #0d1628 100%);
}
/* Hero — аватарка и имя видны поверх арта */
.cdm-glass-hero {
    position: relative;
    z-index: 3;
    padding-bottom: 12px;
}
/* Close button */
.cdm-glass-close {
    position: absolute; top: 14px; right: 14px; z-index: 10;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6); font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.cdm-glass-close:active { background: rgba(255,255,255,0.15); transform: scale(0.88); }

/* Hero section */
.cdm-glass-hero {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    padding: 28px 20px 16px;
    text-align: center;
}
.cdm-glass-avatar-ring {
    width: 76px; height: 76px; border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--accent, #6ab3f2), transparent, var(--accent, #6ab3f2));
    margin-bottom: 12px;
    box-shadow: 0 0 20px rgba(var(--glow-rgb, 106,179,242),calc(var(--glow-intensity,0.4) * 0.6));

}

    50%     { box-shadow: 0 0 32px rgba(var(--glow-rgb, 106,179,242),calc(var(--glow-intensity,0.4)*0.9)); }
}
.cdm-glass-avatar {
    width: 100%; height: 100%; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; overflow: hidden;
}
.cdm-glass-name {
    font-size: 18px; font-weight: 800; letter-spacing: 0.5px;
    color: var(--accent, #6ab3f2);
    /* Gradient text if no custom accent */
    background: linear-gradient(90deg, #fff 0%, var(--accent, #6ab3f2) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
    text-shadow: none;
}
.cdm-glass-subs {
    font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 8px;
}
.cdm-glass-badges {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    margin-bottom: 6px;
}

/* Rating */
.cdm-glass-rating-row {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Body */
.cdm-glass-body {
    position: relative; z-index: 2;
    padding: 14px 20px 10px;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.cdm-glass-cat {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}
.cdm-glass-desc {
    font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.55;
    margin-bottom: 10px;
    /* Текст должен переноситься вниз, а не уходить вправо */
    display: block;
    width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.cdm-glass-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.cdm-glass-tags .cdm-tag {
    padding: 3px 10px; border-radius: 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 11px; color: rgba(255,255,255,0.55);
    transition: background 0.15s, border-color 0.15s;
}
.cdm-glass-tags .cdm-tag:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent,#6ab3f2);
    color: var(--accent,#6ab3f2);
}

/* Socials */
.cdm-glass-socials-section {
    position: relative; z-index: 2;
    padding: 0 20px 12px;
}
.cdm-glass-section-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
    color: rgba(255,255,255,0.3); margin-bottom: 8px;
}
.cdm-glass-socials {
    display: flex; flex-wrap: wrap; gap: 8px;
}
/* Social link icons lighting up on hover */
.cdm-glass-socials .cdm-social-link {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.cdm-glass-socials .cdm-social-link:hover {
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 12px var(--accent,#6ab3f2);
    transform: translateY(-2px);
}

/* Action buttons */
.cdm-glass-actions {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 0 16px 14px;
}
.cdm-glass-btn {
    flex: 1; min-width: 80px;
    padding: 10px 12px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 12px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: transform 0.12s, box-shadow 0.2s;
    backdrop-filter: blur(8px);
}
.cdm-glass-btn:active { transform: scale(0.93); transition-duration: 0.05s; }
.cdm-glass-btn-tg {
    background: rgba(0,136,204,0.18); border-color: rgba(0,136,204,0.35); color: #29b6f6;
}
.cdm-glass-btn-tg:hover { box-shadow: 0 0 14px rgba(0,136,204,0.4); }
.cdm-glass-btn-map {
    background: rgba(0,212,100,0.12); border-color: rgba(0,212,100,0.28); color: #00e676;
}
.cdm-glass-btn-edit {
    background: rgba(var(--accent-rgb,106,179,242),0.12);
    border-color: rgba(var(--accent-rgb,106,179,242),0.3);
    color: var(--accent,#6ab3f2);
}
.cdm-glass-btn-edit:hover { box-shadow: 0 0 14px rgba(106,179,242,0.35); }
.cdm-glass-btn-rate {
    background: rgba(255,183,0,0.12); border-color: rgba(255,183,0,0.28); color: #ffb300;
}
.cdm-glass-btn-claim {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
}

/* Share row */
.cdm-glass-share {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    margin: 0 16px 10px;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.cdm-glass-share-url {
    flex: 1; font-size: 10px; color: rgba(255,255,255,0.4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: monospace;
}
.cdm-glass-share-copy {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px; padding: 4px 8px; color: rgba(255,255,255,0.6);
    font-size: 13px; cursor: pointer; transition: background 0.15s;
}
.cdm-glass-share-copy:active { background: rgba(255,255,255,0.18); }

/* Reviews button */
.cdm-glass-reviews-btn {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    width: calc(100% - 32px); margin: 0 16px 16px;
    padding: 11px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 13px; color: rgba(255,255,255,0.55); cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.cdm-glass-reviews-btn:active { background: rgba(255,255,255,0.08); }

/* ═══════════════════════════════════════════════════════════════
   CARD STYLE MODAL v2 — Presets + DnD + Glow
   ═══════════════════════════════════════════════════════════════ */

/* New preset grid */
.csm-presets2 {
    display: grid; grid-template-columns: repeat(5,1fr);
    gap: 8px; padding: 8px 18px 0;
}
.csm-preset2 {
    border-radius: 10px; cursor: pointer; position: relative;
    border: 2px solid transparent; overflow: hidden;
    aspect-ratio: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.csm-preset2:active { transform: scale(0.9); }
.csm-preset2.active {
    border-color: var(--p-accent, #fff) !important;
    box-shadow: 0 0 12px var(--p-accent, rgba(255,255,255,0.4));
}
.csm-preset2-ico  { font-size: 16px; line-height: 1; }
.csm-preset2-lbl  {
    font-size: 7px; font-weight: 700; color: rgba(255,255,255,0.8);
    text-shadow: 0 1px 4px rgba(0,0,0,0.9); letter-spacing: 0.02em;
}

/* DnD Upload zone */
.csm-dnd-zone {
    position: relative;
    margin: 8px 18px 0;
    padding: 16px 12px;
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.csm-dnd-zone.drag-over {
    border-color: #6ab3f2;
    background: rgba(106,179,242,0.06);
    box-shadow: 0 0 16px rgba(106,179,242,0.2);
}
.csm-dnd-icon { font-size: 22px; }
.csm-dnd-text { font-size: 11px; color: rgba(255,255,255,0.4); }
.csm-dnd-btn {
    padding: 6px 14px; border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6); font-size: 11px; cursor: pointer;
}
.csm-dnd-remove {
    position: absolute; top: 8px; right: 8px;
    background: rgba(255,80,80,0.2); border: 1px solid rgba(255,80,80,0.3);
    color: #ff5050; border-radius: 6px; padding: 2px 7px;
    font-size: 11px; cursor: pointer;
}

/* Glow slider */
.csm-glow-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 18px 0;
}
.csm-glow-icon { font-size: 16px; }
.csm-glow-slider {
    flex: 1; height: 4px; border-radius: 4px;
    -webkit-appearance: none; appearance: none;
    background: linear-gradient(90deg, #6ab3f2 0%, rgba(255,255,255,0.12) 0%);
    cursor: pointer; outline: none;
}
.csm-glow-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: #6ab3f2; box-shadow: 0 0 8px rgba(106,179,242,0.6);
    cursor: pointer; border: 2px solid #fff;
}
.csm-glow-val {
    font-size: 11px; color: rgba(255,255,255,0.4); font-family: monospace;
    min-width: 32px; text-align: right;
}