/* Вынесено из catalog.php. Правьте здесь — страница подключает этот файл. */
    *, *::before, *::after { box-sizing: border-box; }
    :root { 
        --bg: #f4f6fa; --card: #ffffff; --border: #e8ecf3; --blue: #0099ff; --blue-hover: #007acc;
        --blue-soft: rgba(0, 153, 255, 0.08); --text: #1e293b; --muted: #64748b; --green: #10b981;
        --green-soft: rgba(16, 185, 129, 0.1); --orange: #f59e0b; --orange-soft: rgba(245, 158, 11, 0.1);
        
         /* ЭКСКЛЮЗИВНЫЙ ВЕКТОРНЫЙ КИБЕР-ПАТТЕРН (Космические узлы, созвездия и неоновые самолетики Telegram) */
    --tg-cosmic-mesh: url("data:image/svg+xml,%3Csvg width='190' height='180' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M30,50 L80,25 L140,65 L200,35 L220,110 L160,150 L85,120 L30,190 L65,225 L150,210 L210,175 M80,25 L85,120 M140,65 L160,150 M200,35 L210,175 M30,50 L30,190' stroke-opacity='0.16' stroke-dasharray='3,3'/%3E%3Cpath d='M15,110 L90,80 L180,160 M100,10 L230,130' stroke='%2300c9a7' stroke-opacity='0.15' stroke-width='0.8'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='50' r='2' opacity='0.5'/%3E%3Ccircle cx='80' cy='25' r='3.5' opacity='0.7' fill='%2300c9a7'/%3E%3Ccircle cx='140' cy='65' r='2' opacity='0.4'/%3E%3Ccircle cx='200' cy='35' r='4' opacity='0.6' fill='%2300c9a7'/%3E%3Ccircle cx='220' cy='110' r='2' opacity='0.4'/%3E%3Ccircle cx='160' cy='150' r='3.5' opacity='0.7' fill='%2300c9a7'/%3E%3Ccircle cx='85' cy='120' r='2.5' opacity='0.5'/%3E%3Ccircle cx='30' cy='190' r='3' opacity='0.4'/%3E%3Ccircle cx='150' cy='210' r='3' opacity='0.6' fill='%2300c9a7'/%3E%3C/g%3E%3Cg transform='translate%2845, 65%29 scale%280.55%29' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.35' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3Ccircle cx='20' cy='20' r='22' stroke-opacity='0.15' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate%28170, 45%29 scale%280.45%29' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.25' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3C/g%3E%3Cg transform='translate%28105, 155%29 scale%280.65%29' stroke='%2300c9a7' stroke-width='1.6' stroke-opacity='0.4' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3Ccircle cx='20' cy='20' r='24' stroke-opacity='0.2' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
        #searchInput::placeholder {
        color: rgba(255, 255, 255, 0.6);
        opacity: 1;
    }

    .tbl-search-wrap { display: flex; align-items: center; gap: 12px; }
    .tbl-search-input {
        padding: 8px 14px; color: rgba(255, 255, 255, 0.6);
        border: 1px solid #62a2b3bf; border-radius: 10px; font-size: 10.5px;
        width: 220px; outline: none; background: #18171c87; height: 32px;
        box-sizing: border-box; transition: border-color 0.15s;
    }
    .tbl-verified-label {
        display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
        color: #fff; cursor: pointer; user-select: none; background: #18171c87;
        padding: 8px 14px; border-radius: 10px; border: 1px solid #62a2b3bf;
        font-size: 10.5px; height: 32px; box-sizing: border-box; margin: 0 !important;
    }
    .tbl-verified-checkbox { cursor: pointer; width: 14px; height: 14px; margin: 0; accent-color: #fff; }

    .sort-link {
        color: inherit; text-decoration: none; cursor: pointer; display: flex;
        align-items: center; gap: 4px; justify-content: center; width: 100%; height: 100%;
    }
    .sort-arrow { display: inline-flex; align-items: center; }
    .sort-arrow-default { opacity: 0.3; font-size: 11px; }
    .sort-arrow-active { color: var(--blue); font-weight: 800; font-size: 12px; }
        
    }
    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-top: 57px; font-size: 12px; -webkit-font-smoothing: antialiased; }
    
   .layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: calc(100vh - 60px);
    gap: 0;
    align-items: stretch;
}

@media (max-width: 992px) {
    .layout {
        grid-template-columns: 107px 1fr;
    }
}
    
    .main { padding: 0px 4px 4px 4px !important; width: 100%; box-sizing: border-box; background: #f8fafc; 
         background-color: #f4f7fb;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420"><g fill="none" stroke="%230088cc" stroke-width="1.4" opacity="0.12"><path d="M35 40 L95 62 L60 78 Z"/><path d="M60 78 L68 108 L95 62"/><path d="M300 130 L365 108 L332 148 Z"/><path d="M332 148 L342 182 L365 108"/><path d="M150 260 L200 245 L172 278 Z"/><path d="M172 278 L180 300 L200 245"/></g><g fill="%230088cc" opacity="0.15"><circle cx="20" cy="150" r="1.6"/><circle cx="380" cy="40" r="2"/><circle cx="250" cy="30" r="1.3"/><circle cx="110" cy="330" r="1.8"/><circle cx="390" cy="300" r="1.4"/><circle cx="45" cy="380" r="1.6"/><circle cx="220" cy="180" r="1.2"/></g><g fill="none" stroke="%230088cc" stroke-width="0.7" stroke-dasharray="4 5" opacity="0.18"><path d="M10 220 Q 90 190 160 230 T 300 210"/><path d="M120 30 Q 180 70 260 55 T 410 90"/><path d="M0 340 Q 70 320 140 350 T 300 330"/></g><g opacity="0.12"><circle cx="330" cy="230" r="26" fill="none" stroke="%230088cc" stroke-width="1"/><circle cx="330" cy="230" r="15" fill="none" stroke="%230088cc" stroke-width="1"/></g></svg>');
    background-repeat: repeat;
    background-size: 290px 290px;
    }
    
    .table-section-title { margin-top: 5px !important; margin-bottom: 5px !important; }
    .table-section-title h1 { margin: 0; font-size: 17px !important; font-weight: 800; color: #ffffff !important; letter-spacing: -0.02em; display: flex; align-items: center; gap: 7px; } 
    .table-section-title p { margin: 4px 0 0 0; font-size: 11px; color: #ffffff !important; }
    
  .table-responsive { width: 100%; overflow-x: auto; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0; -webkit-overflow-scrolling: touch; }
    .table-responsive > .tbl-head, .table-responsive > .channels-list { }
    
    .tbl-head { background:var(--tg-cosmic-mesh), linear-gradient(316deg, #0b09ac 0%, #088793 35%, #00aa71 70%, #31f621 100%) !important; color: #ffffff !important; font-size: 9px !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .tbl-head span { display: flex; align-items: center; justify-content: center; }
.tbl-head span:nth-child(2) { justify-content: flex-start; }
    
    .channels-list { display: flex; flex-direction: column; }
    .channels-list .ch-wrapper.js-channel-row:last-child { border-radius: 0 0 13px 13px !important; }
    .ch-wrapper { box-shadow: 0 4px 11px rgba(15, 23, 42, 0.02) !important; margin-bottom: 9px; transition: all 0.2s ease; }
    .ch-wrapper.js-channel-row { background: #ffffff !important; margin-bottom: 0 !important; border-radius: 0 !important; border: 1px solid var(--border) !important; border-top: none !important; }
    .ch-wrapper.verified { border-left: 3px solid #10b981 !important; background: rgba(16, 185, 129, 0.01); }
    .ch-wrapper.unverified { border-left: 3px solid #cbd5e1 !important; background: transparent; }

    .tbl-head.grid-all { border-radius: 13px 13px 0 0 !important; overflow: hidden; }
.grid-all { display: grid; grid-template-columns: 15px 1.5fr 55px 59px 55px 30px 40px 137px 53px 38px 105px 70px; align-items: center; padding: 12px 2px; gap: 6px; }
    .tbl-head.grid-all { gap: 10px; }
    .grid-my { display: grid; align-items: center; padding: 11px 14px; gap: 4px; }
    .grid-all > div, .grid-my > div { display: flex; justify-content: center; align-items: center; }
    .grid-all > div.ch-meta, .grid-my > div.ch-meta { justify-content: flex-start; min-width: 0; width: 100%; } 
    .grid-all > div.btn-write-wrap { justify-content: flex-end; }

    .sort-link-inner { font-size: 9px; gap: 2px; }
    .sort-arrow { font-size: 11px; }
    .sort-arrow.active { font-size: 12px; }

    .tbl-head.grid-all > span { position: relative; }
    .tbl-head.grid-all > span:nth-child(1)  { transform: translateX(10px); }
    .tbl-head.grid-all > span:nth-child(2)  { transform: translateX(10px); }
    .tbl-head.grid-all > span:nth-child(3)  { transform: translateX(58px); }
    .tbl-head.grid-all > span:nth-child(4)  { transform: translateX(58px); }
    .tbl-head.grid-all > span:nth-child(5)  { transform: translateX(50px); }
    .tbl-head.grid-all > span:nth-child(6)  { transform: translateX(40px); }
    .tbl-head.grid-all > span:nth-child(7)  { transform: translateX(30px); }
    .tbl-head.grid-all > span:nth-child(8)  { transform: translateX(17px); }
    .tbl-head.grid-all > span:nth-child(9)  { transform: translateX(15px); }
    .tbl-head.grid-all > span:nth-child(10) { transform: translateX(10px); }
    .tbl-head.grid-all > span:nth-child(11) { transform: translateX(-5px); }
    .tbl-head.grid-all > span:nth-child(12) { transform: translateX(-15px); }

    .channels-list .ch-row.grid-all,
    .channels-list-2 .ch-row.grid-all {
        gap: 3px;
    }
    
.ch-row { cursor: pointer; user-select: none; font-size: 11px !important; padding: 7px 7px !important; align-items: center !important; }
    .ch-row > div { padding: 2px 4px !important; font-size: 9px !important; text-align: left !important; }
    .ch-row > div:first-child { padding-left: 4px !important; max-width: 30px !important; text-align: center !important; font-weight: 700; color: #94a3b8; }
    .ch-num { font-size: 11px; color: #94a3b8; font-weight: 600; text-align: center; }
    .ch-meta { display: flex; align-items: center; gap: 9px; min-width: 0; width: 100%; }
    
   .avatar-wrap { position: relative !important; display: inline-flex !important; width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; min-width: 32px !important; min-height: 32px !important; flex-shrink: 0 !important; }
    .avatar-wrap .ch-avatar { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; border-radius: 50% !important; object-fit: cover !important; background: #ffffff !important; border: 2px solid #cbd5e1 !important; box-sizing: border-box !important; display: block !important; }
    .avatar-wrap.verified .ch-avatar { border: 2px solid var(--green) !important; }
    .avatar-wrap .avatar-badge { position: absolute !important; width: 13px !important; height: 13px !important; bottom: -2px !important; right: -2px !important; border: 2px solid #ffffff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; }
    .avatar-wrap.verified .avatar-badge { background-color: var(--green) !important; }
    .avatar-wrap.unverified .avatar-badge { background-color: #475569 !important; }
    .avatar-wrap .avatar-badge svg { width: 7px !important; height: 7px !important; display: block !important; fill: none !important; stroke: #ffffff !important; stroke-width: 5 !important; }
    .avatar-wrap .avatar-badge .quest-mark { font-size: 8px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1 !important; font-family: 'Inter', sans-serif !important; }

    .pinned-badge { background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 8px; padding: 2px 5px; border-radius: 4px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; text-transform: uppercase; box-shadow: 0 2px 5px rgba(34, 197, 94, 0.3); }
   .ch-title { font-size: 9.5px !important; font-weight: 600 !important; color: #0f172a !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .ch-user { font-size: 9px !important; color: #05a279 !important; text-decoration: none; font-weight: 500; }
    .ch-user:hover { text-decoration: underline; }
   .ch-subs { font-size: 11.5px; font-weight: 600; color: #0f172a; }
  .iv-badge { background: #8b26fb; color: #ffffff; font-size: 8.5px; font-weight: 700; padding: 3px 5px; border-radius: 6px; border: 1px solid #e2e8f0; }
    .ch-cat-inline { display: none; }
    .ch-cpm-badge { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #ffffff; font-weight: 700; font-size: 8.8px; padding: 4px 6px; border-radius: 6px; box-shadow: 0 3px 8px rgba(34, 197, 94, 0.25); white-space: nowrap; letter-spacing: 0.2px; }
.ch-badge { font-size: 10px; color: #475569; background: #f1f5f9; padding: 4px 8px; border-radius: 6px; display: inline-block; width: max-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 105px; font-weight: 500; }


    /* ===== RANK CHIP — UNIVERSAL FLAT EDITION (1в1 из account.php) ===== */
    .ch-row > div.rank-chip,
    div.rank-chip {
        padding: 1px 5px !important;
        display: inline-flex;
        align-items: center; 
        justify-content: center;
        gap: 4px;
        border-radius: 20px;
        font-size: 10px; 
        font-weight: 700; 
        line-height: 1; 
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        margin: 0 auto;
        flex-shrink: 0;
        background: var(--rank-bg) !important;
        color: var(--rank-text) !important;
        border: 1px solid var(--rank-border);
        box-shadow: none !important; 
        cursor: default;
    }

    .rank-chip-icon {
        width: 11px !important;
        height: 11px !important;
        display: flex; 
        align-items: center; 
        justify-content: center;
        flex-shrink: 0;
        color: var(--rank-icon);
    }

    .rank-chip-icon-svg { 
        width: 100%; 
        height: 100%; 
        display: block; 
    }
    .rank-chip-value { 
        color: inherit; 
        display: inline-block;
    }

    .rank-chip.rank-steel { 
        --rank-bg: #f8fafc; 
        --rank-text: #64748b; 
        --rank-icon: #94a3b8; 
        --rank-border: #e2e8f0;
    }

    .rank-chip.rank-silver { 
        --rank-bg: #f0f9ff; 
        --rank-text: #0369a1; 
        --rank-icon: #38bdf8; 
        --rank-border: #bae6fd;
    }

    .rank-chip.rank-gold { 
        --rank-bg: #fffbeb; 
        --rank-text: #b45309; 
        --rank-icon: #fbbf24; 
        --rank-border: #fde68a;
    }

    .rank-chip.rank-diamond {
        --rank-bg: linear-gradient(135deg, #22d3a8 0%, #5e9dff 50%, #a855f7 100%);
        --rank-text: #ffffff;
        --rank-icon: #ffffff;
        --rank-border: transparent;
    }
    
    .btn-fav { display: inline-flex; align-items: center; background: transparent; border: none; color: #cbd5e1; cursor: pointer; padding: 2px; text-decoration: none; transition: all 0.15s; }
    .btn-fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transform: translateY(4px); }
    .btn-fav:hover, .btn-fav.active { color: #eab308; } .btn-fav.active svg { fill: #eab308; }

    .row-voting-block { display: flex; align-items: center; gap: 4px; justify-content: center; width: 100%; }
    .row-stars-row { display: flex; gap: 2px; }
   .row-star-btn { width: 11px; height: 11px; cursor: pointer; color: #cbd5e1; transition: all 0.15s ease; position: relative; }
    .row-star-btn svg { width: 100%; height: 100%; fill: currentColor; }
    .row-star-btn:hover, .row-star-btn.selected { color: var(--star-color); transform: scale(1.2); }
    .row-star-btn .tt { visibility: hidden; opacity: 0; background: #1e293b; color: #fff; text-align: center; padding: 4px 7px; border-radius: 6px; position: absolute; z-index: 100; bottom: 150%; left: 50%; transform: translateX(-50%); font-size: 9px; white-space: nowrap; transition: 0.15s; pointer-events: none; font-weight: 500; box-shadow: 0 4px 9px rgba(0,0,0,0.15); }
    .row-star-btn .tt::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border-width: 4px; border-style: solid; border-color: #1e293b transparent transparent transparent; }
    .row-star-btn:hover .tt { visibility: visible; opacity: 1; }
    .row-voting-block button.row-btn-vote { background: #0099ff; border: none; color: #ffffff; padding: 4px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; transition: 0.15s; white-space: nowrap; }
    .row-vote-success { display: none; align-items: center; gap: 3px; color: #10b981; font-size: 10px; font-weight: 600; animation: fadeIn 0.2s ease; white-space: nowrap; }
    .row-vote-success svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.5; }

   .btn-write { display: inline-flex; align-items: center; justify-content: center; gap: 1px; background: #ffffff; border: 1px solid #e2e8f0; color: #00bfa5; text-decoration: none; padding: 4px 6px; border-radius: 8px; font-size: 8px; font-weight: 600; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
    .btn-write:hover { border-color: #00bfa5; background: #e6f9f6; }
    
    .form-container { max-width: 540px; background: #fff; padding: 27px; border-radius: 13px; border: 1px solid var(--border); }
    .form-control { width: 100%; padding: 9px 11px; margin: 7px 0 14px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 12px; }
    .form-label { font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; }
    .page-header { margin-bottom: 18px; background: #fff; padding: 18px; border-radius: 13px; border: 1px solid var(--border); }
    .page-title { font-size: 18px; font-weight: 800; margin: 0; }
    .btn-prime { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #ffffff; text-decoration: none; padding: 7px 13px; border-radius: 7px; font-size: 11px; font-weight: 600; border: none; cursor: pointer; }
    .empty-category-results { display: none; padding: 36px; text-align: center; color: var(--muted); font-size: 12px; background: #fff; border: 1px dashed var(--border); border-radius: 13px; margin-top: 14px; }
    .catalog-seo-box {
        background:
            radial-gradient(circle at 30% 35%, rgba(56, 224, 178, 0.42), transparent 50%),
            radial-gradient(circle at 70% 25%, rgba(94, 129, 255, 0.38), transparent 55%),
            radial-gradient(circle at 50% 85%, rgba(168, 85, 247, 0.32), transparent 60%),
            linear-gradient(135deg, #05070f 0%, #071b2e 40%, #062a24 75%, #041f3d 100%);
        border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
        padding: 18px 20px; margin-top: 16px;
    }
    .catalog-seo-box h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #ffffff; }
    .catalog-seo-box p { margin: 0; font-size: 12px; line-height: 1.65; color: rgba(255,255,255,0.82); max-width: 900px; }
    
   .top-nav-buttons { 
        display: flex; 
        gap: 5px; 
        margin-bottom: 4px; 
        width: 100%;
        align-items: stretch;
    }
    .promo-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 10px 9px 12px;
    border-radius: 16px;
        text-decoration: none;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid rgba(255,255,255,0.14);
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Фирменный космический паттерн + свой цветовой перелив под каждую карточку */
   .card-catalog { background:var(--tg-cosmic-mesh), linear-gradient(135deg, #43b487 0%, #4ab48b 45%, #42f782 100%) !important; }
    .card-discounts { background: var(--tg-cosmic-mesh), linear-gradient(135deg, #10c5ab 0%, #00a6dd 45%, #068de5 100%) !important;}
   .card-wholesale { background: var(--tg-cosmic-mesh), linear-gradient(135deg, #b357f2 0%, #931eff 45%, #c757ff 100%) !important; }

    .promo-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.32);
    }
    .card-catalog:hover {
        box-shadow: 0 8px 16px -4px rgba(4, 197, 107, 0.4), 0 3px 8px rgba(0,0,0,0.14);
    }
    .card-discounts:hover {
        box-shadow: 0 8px 16px -4px rgba(37, 117, 252, 0.4), 0 3px 8px rgba(0,0,0,0.14);
    }
    .card-wholesale:hover {
        box-shadow: 0 8px 16px -4px rgba(182, 36, 255, 0.4), 0 3px 8px rgba(0,0,0,0.14);
    }
    .promo-card.active {
        border-color: rgba(255,255,255,0.55);
    }

    .promo-card-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
    }
    .promo-card-icon {
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: rgba(255,255,255,0.16);
        border: 1px solid rgba(255,255,255,0.22);
        backdrop-filter: blur(4px);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .promo-card:hover .promo-card-icon { transform: scale(1.08) rotate(-4deg); }
    .promo-card-icon svg { width: 15.5px; height: 15.5px; color: #ffffff; }

    .promo-card-title {
        font-weight: 800;
        font-size: 14px;
        color: #ffffff;
        line-height: 1.2;
        letter-spacing: -0.2px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

    .promo-card-stat {
        margin-left: auto;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        font-size: 10.3px;
        font-weight: 800;
        color: #ffffff;
        padding: 4px 10px;
        border-radius: 20px;
        background: rgba(255,255,255,0.16);
        border: 1px solid rgba(255,255,255,0.24);
        backdrop-filter: blur(4px);
        white-space: nowrap;
    }

    .promo-card-desc {
    font-weight: 450;
    font-size: 9.4px;
    color: rgba(255,255,255,0.90);
    line-height: 1.3;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
    .promo-card-link {
        margin-top: auto;
        font-size: 11px;
        font-weight: 700;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        letter-spacing: 0.1px;
    }
    .promo-card-link svg {
        width: 12px; height: 12px;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .promo-card:hover .promo-card-link svg { transform: translateX(4px); }

    @media (max-width: 992px) {
        .top-nav-buttons { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 2px !important; margin-bottom: 4px !important; }
        .promo-card { padding: 4px 1.5px 5px 5px !important; border-radius: 8px !important; }
        .promo-card-row { gap: 3px !important; margin-bottom: 4px !important; flex-wrap: wrap !important; }
        .promo-card-icon { width: 15px !important; height: 15px !important; border-radius: 5px !important; }
        .promo-card-icon svg { width: 8px !important; height: 8px !important; }
        .promo-card-title { font-size: 7px !important; max-width: 50px; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15 !important; }
        .promo-card-stat { font-size: 5.5px !important; padding: 1px 4px !important; }
        .promo-card-desc { font-size: 5px !important; -webkit-line-clamp: 3 !important; margin-bottom: 3px !important; line-height: 1.2 !important; }
        .promo-card-link { font-size: 7px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: 100% !important; }
        .promo-card-link svg { width: 6px !important; height: 6px !important; flex-shrink: 0 !important; }
    }
    .head-tbl {background: var(--tg-cosmic-mesh), linear-gradient(316deg, #0b09ac 0%, #088793 35%, #00aa71 70%, #31f621 100%) !important; padding: 12px 15px; border-radius: 13px; margin-bottom: 9px; box-shadow: 0 1px 3px rgba(0,0,0,0.01); border: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 7px;}
    
    .tbl-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    margin-top: 3px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.tbl-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 6px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 15px;
    font-size: 9.3px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: all 0.18s ease;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.tbl-cat-chip:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-1px);
}
.tbl-cat-chip .chip-dot {
    width: 11px;
    height: 11px;
    border-radius: 3.5px;
    border: 1.5px solid rgba(255,255,255,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}
.tbl-cat-chip .chip-dot svg {
    width: 7px;
    height: 7px;
    stroke: #065f46;
    stroke-width: 4;
    fill: none;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.15s ease;
}
.tbl-cat-chip.active {
    background: #ffffff;
    color: #065f46;
    border-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.tbl-cat-chip.active .chip-dot {
    background: #065f46;
    border-color: #065f46;
}
.tbl-cat-chip.active .chip-dot svg {
    opacity: 1;
    stroke: #ffffff;
    transform: scale(1);
}
    .ch-no-price-panel {
        grid-column: span 2 !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        padding: 4px 9px !important;
        border-radius: 6px !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        height: 22px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 126px !important;
        margin: 0 auto !important;
    }
.ch-wrapper.js-channel-row.tariff-business-yellow {
    background: #fffdf5 !important;
    border-left: 3px solid #eab308 !important;
}
.ch-wrapper.js-channel-row.tariff-business-yellow:hover {
    background: #fffbeb !important;
}
.ch-wrapper.tariff-business-yellow .ch-title {
    color: #855306 !important;
}

.ch-wrapper.js-channel-row.tariff-premium-purple {
    background: linear-gradient(90deg, #fbf7ff 0%, #ffffff 100%) !important;
    border-left: 5px solid #a855f7 !important;
}
.ch-wrapper.js-channel-row.tariff-premium-purple:hover {
    background: linear-gradient(90deg, #f6edff 0%, #fbf7ff 100%) !important;
}
.ch-wrapper.tariff-premium-purple .ch-title {
    color: #6b21a8 !important;
}

.tariff-designer-badge {
    position: absolute; 
    top: -2px; 
    left: -2px; 
    width: 18px; 
    height: 18px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
    100% { transform: translateY(0); }
}

    @media (max-width: 992px) { body { padding-top: 34px !important; }  .sidebar { width: 96px !important; } .main { padding:4px 2px 4px 2px  !important; } }

    .pagination-container { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 22px; margin-bottom: 14px; }
    .pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 29px; height: 29px; padding: 0 5px; background: #fff; border: 1px solid var(--border); border-radius: 7px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 11px; transition: all 0.15s ease; }
    .pagination-link:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
    .pagination-link.active { background: var(--blue); color: #fff; border-color: var(--blue); }
    .pagination-link.disabled { opacity: 0.4; pointer-events: none; background: #f1f5f9; }
    
    /* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ТАБЛИЦЫ (1в1 из account.css) ===== */
@media (max-width: 992px) {
    .table-responsive { min-width: 0 !important; margin-top: 4px !important; }
    .channels-list-2 { min-width: 0 !important; padding: 0 !important; }

    .tbl-head.grid-all > span { transform: none !important; }
    .tbl-head.grid-all > span:nth-child(1)  { transform: translateX(4px) !important; }
    .tbl-head.grid-all > span:nth-child(2)  { transform: translateX(6px) !important; }
    .tbl-head.grid-all > span:nth-child(3)  { transform: translateX(2px) !important; }
    .tbl-head.grid-all > span:nth-child(4)  { transform: translateX(2px) !important; }
    .tbl-head.grid-all > span:nth-child(5)  { transform: translateX(2px) !important; }
    .tbl-head.grid-all > span:nth-child(6)  { transform: translateX(0px) !important; }
    .tbl-head.grid-all > span:nth-child(7)  { transform: translateX(0px) !important; }
    .tbl-head.grid-all > span:nth-child(9)  { transform: translateX(0px) !important; }
    .tbl-head.grid-all > span:nth-child(10) { transform: translateX(0px) !important; }

    .sort-link { gap: 1.5px !important; }
    .sort-arrow-default { font-size: 6px !important; opacity: 0.35; transform: translateY(-1px); }
    .sort-arrow-active { font-size: 6.5px !important; transform: translateY(-1px); }

    .channels-list-2 .grid-all,
    .tbl-head.grid-all:has(+ .channels-list-2) {
        grid-template-columns: 11px 1fr 34px 32px 32px 24px 18px 32px 29px !important;
        gap: 1px !important;
    }
    .channels-list-2 .grid-all > *:nth-child(8),
    .tbl-head.grid-all:has(+ .channels-list-2) > *:nth-child(8) { display: none !important; }
    .channels-list-2 .grid-all > *:nth-child(12),
    .tbl-head.grid-all:has(+ .channels-list-2) > *:nth-child(12) { display: none !important; }
    .channels-list-2 .grid-all { grid-template-rows: auto !important; row-gap: 0px !important; align-items: stretch !important; }
    .channels-list-2 .grid-all > * { align-self: center !important; }
    .channels-list-2 .grid-all .row-voting-block { display: none !important; }
    .channels-list-2 .grid-all > div:has(.row-voting-block) { display: none !important; }
    .tbl-head.grid-all:has(+ .channels-list-2) > *:nth-child(11) { display: none !important; }
    .channels-list-2 .btn-write-wrap { display: none !important; }

    .row-star-btn { width: 6px !important; height: 6px !important; }
    .row-stars-row { gap: 1px !important; }

    .ch-row { cursor: pointer; user-select: none; font-size: 11px !important; padding: 2px 1px !important; align-items: center !important; }
    .ch-row > div { padding: 2px 2px !important; font-size: 6px !important; text-align: left !important; }
    .ch-row > div:first-child { padding-left: 4px !important; max-width: 30px !important; text-align: center !important; font-weight: 700; color: #94a3b8; }
    .ch-row .ch-title { font-size: 6px !important; font-weight: 600 !important; color: #0f172a !important; padding-top: 2px; line-height: 1.2 !important; }
    .ch-row .ch-user { font-size: 5px !important; max-width: 55px !important; color: #05a279 !important; }

   .ch-meta { display: flex; align-items: center; gap: 3px; min-width: 0; width: 100%; }
   .ch-meta {
    position: relative !important;
}
.btn-fav {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}
.ch-names {
    padding-right: 11px !important;
}
    .ch-cat-inline {
        max-width: 55px !important;
        flex-shrink: 1 !important;
        display: inline-block !important;
        font-size: 4.9px !important;
        color: #475569 !important;
        background: #f1f5f9 !important;
        padding: 2px 4px !important;
        border-radius: 5px !important;
        margin-top: 1.5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .tbl-head, .tbl-head.grid-all { font-size: 5px !important; padding: 4px 2px !important; }
    .ch-title { font-size: 7.5px !important; }
    .ch-user { font-size: 6.6px !important; }
    .ch-subs { font-size: 7px !important; }
    .ch-badge { font-size: 6px !important; padding: 2px 4px !important; max-width: 55px !important; }

    .rank-chip {
    padding: 3px 8px 3px 6px !important;
    font-size: 8.5px !important;
    border-radius: 12px !important;
    gap: 2px !important;
    align-self: center !important;
    margin: 0 auto !important;
   
}
.rank-chip-icon {
    width: 8px !important;
    height: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ch-row > div.rank-chip, div.rank-chip { padding: 1px 3px !important; }

    .avatar-wrap { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; min-width: 20px !important; min-height: 20px !important; }
    .avatar-wrap.verified .ch-avatar { border: 1px solid var(--green) !important; }
    .avatar-wrap .avatar-badge { width: 8px !important; height: 8px !important; border-width: 1px !important; bottom: -1px !important; right: -1px !important; }
    .avatar-wrap .avatar-badge svg { width: 5px !important; height: 5px !important; stroke-width: 4 !important; }
    .avatar-wrap .avatar-badge .quest-mark { font-size: 6px !important; }

    .tariff-designer-badge { position: absolute; top: -2px; left: -2px; width: 10px; height: 10px; display: flex; align-items: center; justify-content: center; z-index: 10; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }

    .btn-write { font-size: 5px !important; padding: 2px 4px !important; gap: 0px; }
    .btn-write svg { display: none !important; }
    .status-badge { font-size: 5.5px !important; padding: 2px 5px !important; }

    .btn-fav { padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
   .btn-fav svg { width: 9px !important; height: 9px !important; transform: none !important; }
    .grid-all > div:nth-child(4),
    .grid-all > div:nth-child(5),
    .grid-all > div:nth-child(6),
    .grid-all > div:nth-child(9) { font-size: 5.7px !important; }

    .cat-pill { font-size: 5.3px !important; padding: 2px 6px !important; }
    .iv-badge { background: #8b26fb; color: #ffffff; font-size: 5.2px; font-weight: 700; padding: 1px 4px; border-radius: 6px; border: 1px solid #e2e8f0; }

    .ch-cpm-badge {
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: #ffffff; font-weight: 700; font-size: 5px; padding: 1.7px 4px;
        border-radius: 6px; box-shadow: 0 3px 8px rgba(34, 197, 94, 0.25);
        white-space: nowrap; letter-spacing: 0.2px;
    }

    .ch-no-price-panel {
        font-size: 5.5px !important;
        padding: 2px 4px !important;
        border-radius: 4px !important;
        height: auto !important;
        max-width: 55px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
     /* сам контейнер заголовка */
    .head-tbl {
        padding: 5px 5px !important;
        margin-bottom: 2px !important;
        border-radius: 10px !important;
        gap: 5px !important;
    }
    .table-section-title h1 { font-size: 12px !important; gap: 4px !important; }
    .table-section-title p  { font-size: 7.5px !important; margin: 2px 0 0 0 !important; }

    /* строка с поиском и чекбоксом — держим в одну линию */
    .tbl-search-wrap {
        gap: 5px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    #searchInput {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 5px 7px !important;
        font-size: 8px !important;
        height: 24px !important;
        border-radius: 6px !important;
    }

    .head-tbl label[for="verifiedOnlyCheckbox"],
    .head-tbl label {
        flex-shrink: 0 !important;
        padding: 5px 7px !important;
        font-size: 6.5px !important;
        height: 24px !important;
        gap: 3px !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
    }
    #verifiedOnlyCheckbox {
        width: 9px !important;
        height: 9px !important;
    }

    /* категории — компактнее */
    .tbl-cat-row {
        gap: 3px !important;
        padding-top: 6px !important;
        margin-top: 2px !important;
    }
    .tbl-cat-chip {
        padding: 1.3px 4px 1.3px 3px !important;
        font-size: 5.7px !important;
        gap: 2px !important;
        border-radius: 10px !important;
    }
    .tbl-cat-chip .chip-dot {
        width: 8px !important;
        height: 8px !important;
        border-width: 1px !important;
    }
    .tbl-cat-chip .chip-dot svg {
        width: 5px !important;
        height: 5px !important;
        stroke-width: 5 !important;
    }
    
    .pinned-badge {
    font-size: 4.5px !important;
    padding: 1px 2px !important;
    border-radius: 3px !important;
    gap: 1px !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}
.ch-num {
    padding-left: 0 !important;
    overflow: visible !important;
}
    .rank-chip-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

}
    
    
    


/* ===================================================================
   ПЕРЕНЕСЕНО 1-В-1 ИЗ ACCOUNT.CSS — стили новой таблицы каналов
   (цветные иконки категорий, премиальные плашки ИВ/CPM, рейтинг-чипы,
   кнопки пагинации). Стоит в конце файла, поэтому перекрывает старые
   конфликтующие правила catalog.php с тем же именем класса.
   =================================================================== */
.promo-card.active { border-color: rgba(255,255,255,0.55); }
.slide.active { display: block; }
.ch-wrapper.pinned-top { background: linear-gradient(90deg, #f0fdf4 0%, #dcfce7 100%) !important; border: 1px solid #86efac !important; border-left: 4px solid #22c55e !important; box-shadow: 0 4px 15px rgba(34, 197, 94, 0.15) !important; }
.pinned-badge { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; text-transform: uppercase; box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3); }
.iv-badge { background: #f8fafc; color:#1e293b; font-size: 8.5px; font-weight: 700; padding: 2.5px 5px 2.5px 4px; border-radius: 6px; border:1px solid #f1f5f9; }
.avatar-wrap { position: relative !important;
    display: inline-flex !important;
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    flex-shrink: 0 !important; }
.avatar-wrap .ch-avatar { width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    box-sizing: border-box !important;
    display: block !important; }
.avatar-wrap.verified .ch-avatar { border: 2px solid #00ff64 !important; }
.avatar-wrap .avatar-badge { position: absolute !important;
    width: 13px !important;
    height: 13px !important;
    bottom: -2px !important;
    right: -2px !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important; }
.avatar-wrap.verified .avatar-badge { background-color: #33e649 !important; }
.avatar-wrap.unverified .avatar-badge { background-color: #475569 !important; }
.avatar-wrap .avatar-badge svg { width: 7px !important; height: 7px !important; display: block !important; fill: none !important; stroke: #ffffff !important; stroke-width: 5 !important; }
.avatar-wrap .avatar-badge .quest-mark { font-size: 8px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1 !important; font-family: 'Inter', sans-serif !important; }
/* Плашка номера позиции под аватаркой — по умолчанию скрыта (используется только в мобильной версии) */
.ch-num-badge { display: none; }
.board-avatar-wrap.verified .board-avatar { border: 2.5px solid #22e6a0 !important; box-shadow: 0 0 0 3px rgba(34,230,160,0.18); }
.board-avatar-wrap .avatar-badge { position: absolute !important;
    width: 11px !important;
    height: 11px !important;
    bottom: -1px !important;
    right: -1px !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important; }
.board-avatar-wrap.verified .avatar-badge { background-color: var(--green) !important; }
.board-avatar-wrap.unverified .avatar-badge { background-color: #475569 !important; }
.board-avatar-wrap .avatar-badge svg { width: 6px; height: 6px; fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; display: block !important; }
.board-avatar-wrap .avatar-badge .quest-mark { font-size: 7px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1 !important; font-family: 'Inter', sans-serif !important; }
.glass-filter-panel .table-section-title,
.glass-filter-panel .cat-filter-row,
.glass-filter-panel .table-responsive,
.glass-filter-panel .pagination-container,
.glass-filter-panel .empty-category-results,
.glass-filter-panel .empty-state { position: relative;
    z-index: 1;
    max-width: none; }
.glass-filter-panel .table-responsive,
.glass-filter-panel .pagination-container,
.glass-filter-panel .empty-category-results,
.glass-filter-panel .empty-state { margin-top: 2px; }
.glass-filter-panel .cat-check-chip.active { background: linear-gradient(90deg, rgba(20,165,255,0.14), rgba(24,210,168,0.14)); }
/* таблица внутри стекла — скругляем углы шапки/списка */
.glass-filter-panel .tbl-head.grid-all { border-radius: 8px 8px 0 0 !important; }
.glass-filter-panel .channels-list,
.glass-filter-panel .channels-list-2 { border-radius: 0 0 16px 16px;
    overflow: hidden; }
.btn-pagination-next { display: inline-flex; align-items: center; justify-content: center; gap: 6.4px;
    background: linear-gradient(90deg, #26e696, #5e9dff);
    color: #ffffff; font-size: 9.6px; font-weight: 700;
    padding: 0 17.6px; height: 33.6px; border-radius: 10px;
    text-decoration: none; border: none; cursor: pointer;
    box-shadow: 0 9px 21.5px rgba(38,230,150,0.3);
    transition: all 0.2s ease; }
.btn-pagination-next:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(38,230,150,0.45); }
.btn-pagination-prev { display: inline-flex; align-items: center; justify-content: center; gap: 6.4px;
    background: #ffffff; color: var(--text); font-size: 9.6px; font-weight: 700;
    padding: 0 17.6px; height: 33.6px; border-radius: 10px;
    text-decoration: none; border: 1.5px solid var(--border); cursor: pointer;
    box-shadow: 0 4px 12px rgba(15,23,42,0.04);
    transition: all 0.2s ease; }
.btn-pagination-prev:hover { border-color: #26e696; color: #0a7a52; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(38,230,150,0.15); }
/* Плашки рейтинга (rank-chip) внутри тёмных карточек "Лидеров" — своя палитра под тёмный фон,
   та же пилл-форма, что и у остальных плашек (board-val), чтобы всё смотрелось одинаково */
.board-item .rank-chip { border-radius: 20px !important;
    padding: 3px 10px 3px 8px !important;
    font-size: 9.5px !important;
    gap: 4px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important; }
.board-item .rank-chip-icon { width: 10px !important; height: 10px !important; }
.board-item .rank-chip.rank-steel { --rank-bg: rgba(148,163,184,0.16);
    --rank-text: #cbd5e1;
    --rank-icon: #94a3b8;
    --rank-border: rgba(148,163,184,0.32); }
.board-item .rank-chip.rank-silver { --rank-bg: linear-gradient(135deg, rgba(56,189,248,0.3), rgba(14,165,233,0.16));
    --rank-text: #7dd3fc;
    --rank-icon: #38bdf8;
    --rank-border: rgba(56,189,248,0.4); }
.board-item .rank-chip.rank-gold { --rank-bg: linear-gradient(135deg, rgba(251,191,36,0.32), rgba(217,119,6,0.18));
    --rank-text: #fcd34d;
    --rank-icon: #fbbf24;
    --rank-border: rgba(251,191,36,0.42); }
.board-item .rank-chip.rank-diamond { --rank-bg: linear-gradient(135deg, #22d3a8 0%, #5e9dff 50%, #a855f7 100%);
    --rank-text: #ffffff;
    --rank-icon: #ffffff;
    --rank-border: transparent;
    box-shadow: 0 2px 10px rgba(94,157,255,0.4) !important; }
.top-boards-dots .dot.active { width: 18px; border-radius: 3px;
    background: linear-gradient(90deg, #22d3a8, #5e9dff);
    box-shadow: 0 0 10px rgba(94,157,255,0.6); }
.table-responsive { width: 100%; 
    overflow-x: auto; 
    background: transparent !important; 
    border: none !important;            
    box-shadow: none !important;        
    padding: 0; 
    overflow: hidden; }
.table-responsive { overflow-x: auto; }
.tbl-head { background:var(--tg-cosmic-mesh),linear-gradient(316deg, #4206af 0%, #088793 35%, #02b67a 70%, #58ff4b 100%) !important; color: #ffffff !important; font-size: 9px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.tbl-head a { color: #ffffff !important; }
.tbl-head i, .tbl-head svg { font-size: 8px !important; margin-left: 2px !important; opacity: 0.8; }
.tbl-head span { display: flex; align-items: center; justify-content: center; }
.tbl-head span:nth-child(2) { justify-content: flex-start; }
.channels-list .ch-wrapper.js-channel-row:last-child { border-radius: 0 0 14px 14px !important; }
.channels-list-2 { min-width: 900px; }
.ch-wrapper { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
    margin-bottom: 10px; 
    transition: box-shadow 0.2s ease; }
.ch-wrapper.js-channel-row { background: #ffffff !important;
    margin-bottom: 0 !important;            
    border-radius: 0 !important;            
    border: 1px solid var(--border) !important;
    border-top: none !important; }
.ch-wrapper:last-child { margin-bottom: 0; }
.ch-wrapper.verified { border-left: 2px solid #35ea3d !important; background: rgba(16, 185, 129, 0.01); }
.ch-wrapper.unverified { border-left: 2px solid #cbd5e1 !important; background: transparent; }
.ch-wrapper.is-open { border:1px solid #ffffff40 !important;
    border-radius: 9px !important;
    margin-bottom: 7px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.02) !important;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.ch-wrapper.is-open:hover { transform: translateY(-4px) !important;
    box-shadow: 0 16px 34px -6px rgba(15, 23, 42, 0.16), 0 6px 18px -2px rgba(15, 23, 42, 0.08) !important; }
.ch-no-price-panel { grid-column: span 2 !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    height: 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 140px !important;
    margin: 0 auto !important; }
.tbl-head.grid-all { border-radius: 14px 14px 0 0 !important; overflow: hidden; }
.grid-all { display: grid; grid-template-columns:11px 1.5fr 47px 76px 77px 64px 44px 130px 53px 68px 71px; align-items: center; padding: 12px 2px; gap: 6px; }
.tbl-head.grid-all { gap: 10px; }
.sort-arrow.active { font-size: 12px; }
/* Отдельный (меньший) гэп для обычных строк таблицы */
.channels-list .ch-row.grid-all,
.channels-list-2 .ch-row.grid-all { gap: 3px; }
/* Чтобы каждую надпись в шапке можно было двигать индивидуально — 
   даём каждому span позицию relative и свой класс-модификатор */
.tbl-head.grid-all > span { position: relative; }
/* Примеры точечной подвижки — меняй значения под себя */
.tbl-head.grid-all > span:nth-child(1) { transform: translateX(10px); }
/* номер */
.tbl-head.grid-all > span:nth-child(2) { transform: translateX(10px); }
/* Название */
.tbl-head.grid-all > span:nth-child(3) { transform: translateX(58px); }
/* Рейтинг */
.tbl-head.grid-all > span:nth-child(4) { transform: translateX(58px); }
/* Подписчики */
.tbl-head.grid-all > span:nth-child(5) { transform: translateX(50px); }
/* Охват */
.tbl-head.grid-all > span:nth-child(6) { transform: translateX(40px); }
/* ERR */
.tbl-head.grid-all > span:nth-child(7) { transform: translateX(30px); }
/* ИВ */
.tbl-head.grid-all > span:nth-child(8) { transform: translateX(17px); }
/* категория */
.tbl-head.grid-all > span:nth-child(9) { transform: translateX(15px); }
/* Цена от */
.tbl-head.grid-all > span:nth-child(10) { transform: translateX(10px); }
/* CPM */
.tbl-head.grid-all > span:nth-child(11) { transform: translateX(-15px); }
.grid-all > div, .grid-my > div { display: flex; justify-content: center; align-items: center; }
.grid-all > div.ch-meta, .grid-my > div.ch-meta { justify-content: flex-start; min-width: 0; width: 100%; }
.grid-all > div.btn-write-wrap { justify-content: flex-end; }
.ch-row { cursor: pointer; user-select: none; background:#fffffff7 !important; font-size: 11px !important; padding: 6px 3px 7px 6px !important; align-items: center !important; }
.ch-row td, .ch-row > div { padding: 2px 4px !important; font-size: 9px !important; text-align: left !important; }
.ch-row td:first-child, .ch-row > div:first-child { padding-left: 4px !important; max-width: 30px !important; text-align: center !important; font-weight: 700; color: #94a3b8; }
.ch-row .ch-title { font-size: 10.8px !important; margin-top:2px; font-weight: 600 !important; color: #0f172a !important; line-height: 1.2 !important; }
.ch-row .ch-user { font-size: 9px !important; color:#0ac81a !important; }
/* устаревшее правило смещения удалено — теперь стили на .tbl-verified-label */
.ch-num { font-size: 12px; color: #94a3b8; font-weight: 600; text-align: center; }
.ch-meta { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; }
.ch-title { font-size: 12.5px; font-weight: 600; color: #0f172a; }
.btn-fav { display: inline-flex; align-items: center; background: transparent; border: none; color: #cbd5e1; cursor: pointer; padding: 2px; text-decoration: none; transition: all 0.15s; }
.btn-fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transform: translateY(4px); }
.btn-fav:hover { color: #eab308; transform: scale(1.1); }
.btn-fav.active { color: #eab308; }
.btn-fav.active svg { fill: #eab308; }
.ch-user { font-size: 11.5px; color: #0099ff; text-decoration: none; font-weight: 500; }
.ch-user:hover { text-decoration: underline; }
.ch-subs { font-size: 11.5px; font-weight: 600; color: #0f172a; }
/* Категория под @username в карточках-плашках — видна только на телефоне,
   на ПК категория и так есть в отдельной колонке таблицы */
.ch-cat-mobile-only { display: none; }
.ch-badge { font-size: 8.2px; color: #334155; background: #ffffff; padding: 3px 8px 3px 3px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; width: max-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 195px; font-weight: 600; min-width: 0; border: 1px solid #e8ecf3; box-shadow: 0 1px 3px rgba(15,23,42,0.05); }
.ch-badge-label { overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto; }
.ch-cpm-badge { display: inline-flex; align-items: center; justify-content: center;
    background:#f8fafcad;
    color: #48556a; font-weight: 700; font-size: 8.8px; padding: 2px 5px;
    border-radius: 6px;
    white-space: nowrap; letter-spacing: 0.2px;
    border:1px solid #f1f5f9; }
/* Выравнивание отдельной звездочки в таблице */
.ch-row svg[class*="star"],
.ch-row .star,
.ch-row .fa-star { display: inline-flex !important;
    align-self: center !important;
    vertical-align: middle !important;
    transform: translateY(1px) !important; /* Опускаем на 1px вровень с чипом */ }
/* === "Мои каналы" — оставляем как было === */
.ch-row.grid-my .avatar-wrap { width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important; }
.ch-row.grid-my .ch-title { font-size: 10.8px !important; }
/* === "Главная" / "Сохранённые" (grid-all) — отдельные, свои размеры === */
.ch-row.grid-all .avatar-wrap { width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important; }
.ch-row.grid-all .avatar-badge { width: 15px !important;
    height: 15px !important; }
.ch-row.grid-all .ch-title { font-size: 9.5px !important; }
/* ===== RANK CHIP — UNIVERSAL FLAT EDITION ===== */
/* Увеличиваем вес селектора, чтобы перебить .ch-row > div */
.ch-row > div.rank-chip,
div.rank-chip { padding: 3px 3.5px !important; /* <--- ТЕПЕРЬ ЭТИ ПАДДИНГИ ТОЧНО ЗАРАБОТАЮТ! */
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    gap: 4px;
    border-radius: 5px;
    font-size: 10px; 
    font-weight: 700; 
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    margin: 0 auto;
    flex-shrink: 0;
    background: var(--rank-bg) !important;
    color: var(--rank-text) !important;
    border: 1px solid var(--rank-border);
    box-shadow: none !important; 
    cursor: default; }
.rank-chip-icon { width: 11px !important;  /* Сделали чуть крупнее (было 12px) */
    height: 11px !important;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0;
    color: var(--rank-icon); }
.rank-chip-icon-svg { width: 100%; 
    height: 100%; 
    display: block; }
.rank-chip-value { color: inherit; 
    display: inline-block; }
/* --- ПАЛИТРА ТИРОВ --- */

.rank-chip.rank-steel { --rank-bg: #f8fafc; 
    --rank-text: #64748b; 
    --rank-icon: #94a3b8; 
    --rank-border: #e2e8f0; }
.rank-chip.rank-silver { --rank-bg: #f0f9ff; 
    --rank-text: #0369a1; 
    --rank-icon: #38bdf8; 
    --rank-border: #bae6fd; }
.rank-chip.rank-gold { --rank-bg: #fffbeb; 
    --rank-text: #b45309; 
    --rank-icon: #fbbf24; 
    --rank-border: #fde68a; }
.rank-chip.rank-diamond { --rank-bg: linear-gradient(135deg, #22d3a8 0%, #5e9dff 50%, #a855f7 100%);
    --rank-text: #ffffff;
    --rank-icon: #ffffff;
    --rank-border: transparent; }
.btn-write { display: inline-flex; align-items: center; justify-content: center; gap: 1px; background: #ffffff; border: 1px solid #e2e8f0; color: #00bfa5; text-decoration: none; padding: 4px 6px; border-radius: 8px; font-size: 8px; font-weight: 600; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.btn-write:hover { border-color: #00bfa5; background: #e6f9f6; }
.empty-category-results { display: none; padding: 40px; text-align: center; color: var(--muted); font-size: 13px; background: #fff; border: 1px dashed var(--border); border-radius: 14px; margin-top: 15px; }
/* --- СТИЛИ АВАТАРОК И ТАРИФОВ ИЗ КАТАЛОГА --- */
.avatar-wrap { position: relative !important; display: inline-flex !important; width: 45px !important; height:45px !important; flex-shrink: 0 !important; }
.avatar-wrap .ch-avatar { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; background: #ffffff !important; border: 2px solid #cbd5e1 !important; box-sizing: border-box !important; display: block !important; }
.avatar-wrap.verified .ch-avatar { border:3px solid #4cf667 !important; }
.avatar-wrap .avatar-badge { position: absolute !important; width: 13px !important; height: 13px !important; bottom: -2px !important; right: -2px !important; border: 2px solid #ffffff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; }
/* Дизайнерские бейджи тарифов */
.tariff-designer-badge { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; z-index: 10; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }
/* Фоны строк для тарифов */
.ch-wrapper.js-channel-row.tariff-business-yellow { background: #fffdf5 !important; border-left: 2px solid #eab308 !important; }
.ch-wrapper.js-channel-row.tariff-business-yellow:hover { background: #fffbeb !important; }
.ch-wrapper.tariff-business-yellow .ch-title { color: #855306 !important; }
.ch-wrapper.js-channel-row.tariff-premium-purple { background: linear-gradient(90deg, #fbf7ff 0%, #ffffff 100%) !important; border-left: 2px solid #a855f7 !important; }
.ch-wrapper.js-channel-row.tariff-premium-purple:hover { background: linear-gradient(90deg, #f6edff 0%, #fbf7ff 100%) !important; }
.ch-wrapper.tariff-premium-purple .ch-title { color: #6b21a8 !important; }
/* ===== ПРИНУДИТЕЛЬНЫЙ ЗЕЛЁНЫЙ ФОН ДЛЯ ЗАКРЕПЛЁННЫХ (ТОП) КАНАЛОВ ===== */
/* 4 класса в селекторе — специфичность выше, чем у .tariff-business-yellow / .tariff-premium-purple (3 класса),
   поэтому зелёный фон закрепа побеждает всегда, независимо от тарифа владельца */
.ch-wrapper.js-channel-row.verified.js-top-ch-card { background: #e6f9f0 !important;
    border: 1px solid #a7f3d0 !important;
    border-left: 4px solid #10b981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08) !important; }
.ch-wrapper.js-channel-row.verified.js-top-ch-card .ch-title { color: #065f46 !important; }
.ch-wrapper.js-channel-row.verified.js-top-ch-card .ch-user { color: #06ca16 !important; }
.cat-check-chip.active { border-color: transparent; background: linear-gradient(90deg, rgba(20,165,255,0.08), rgba(24,210,168,0.08)); box-shadow: 0 3px 9px rgba(20, 165, 255, 0.1); }
/* ===== Иконки-плашки метрик (взято со страницы скидок) для "Мои каналы" ===== */
.gm-metric-icon { display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; margin-right: 2px; }
.gm-metric-icon svg { width: 8px; height: 8px; }
.gm-icon-subs { background: rgba(0,153,255,0.12); color: var(--blue); }
.gm-icon-reach { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.gm-icon-iv { background: rgba(147,51,234,0.13); color: #9333ea; }
.gm-icon-cpm { background: rgb(129 242 178 / 92%); color: #0d9488; }
.gm-icon-cat { width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-right: 0;
    box-shadow: 0 1.5px 4px rgba(15,23,42,0.18); }
.gm-icon-cat svg { width: 9.5px; height: 9.5px; color: #fff; }
.gm-metric-row { display: inline-flex; align-items: center; }
/* Единый класс для значений в строке "Мои каналы" (Охват / ERR / Цена от) —
   раньше эти цифры были заданы через style="" и не подхватывали мобильные правки. */
.gm-cell-value { font-size: 11.5px; font-weight: 500; color: #334155;
    display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 2px; }
.gm-cell-value.gm-cell-price { font-size: 12px; font-weight: 700; color: #0f172a; }
/* ============================================================
   ОТДЕЛЬНЫЕ, НЕЗАВИСИМЫЕ КЛАССЫ ДЛЯ ВКЛАДКИ "СОХРАНЕННЫЕ"
   Специально НЕ используют .my-channels-header / .tbl-head.grid-all,
   чтобы правки каталога/"моих каналов" никогда не влияли на эту вкладку.
   ============================================================ */
.saved-page-header { background: var(--tg-cosmic-mesh), linear-gradient(316deg, #0a7db3 0%, #148762 35%, #0b2756 70%, #3316a3 100%);
    border-radius: 0 !important;
    padding: 13px 25px;
    margin-bottom: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.01);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.tbl-head.tbl-head-saved.grid-all { border-radius: 0 !important; }
.addch-loading.active { display: flex; }

@media (max-width: 992px) {
/* --- Доски "Топ-5 по..." --- */
    .btn-pagination-next, .btn-pagination-prev { padding: 0 15.4px !important; height: 29.4px !important; border-radius: 8.75px !important;
        font-size: 8.4px !important; gap: 5.6px !important; }
.board-avatar-wrap.verified .board-avatar { border-width: 1.3px !important; box-shadow: 0 0 0 1.5px rgba(34,230,160,0.18) !important; }
label:has(#verifiedOnlyCheckbox), 
div:has(> #verifiedOnlyCheckbox), 
.verified-filter-wrapper { display: table !important;
    margin: 1px 6px 0 auto !important; }
/* --- Таблица "Все каналы" / "Сохраненные" --- */
    .table-responsive { min-width: 0 !important;margin-top:4px !important; }
.channels-list-2 { min-width: 0 !important; padding: 0 !important; }
.tbl-head.grid-all > span { transform: none !important; }
.tbl-head.grid-all > span:nth-child(1) { transform: translateX(4px) !important; }
/* номер */
.tbl-head.grid-all > span:nth-child(2) { transform: translateX(8px) !important; }
/* Название */
.tbl-head.grid-all > span:nth-child(3) { transform: translateX(0px) !important; }
/* Рейтинг */
.tbl-head.grid-all > span:nth-child(4) { transform: translateX(7px) !important; }
/* Подписчики */
.tbl-head.grid-all > span:nth-child(5) { transform: translateX(6px) !important; }
/* Охват */
.tbl-head.grid-all > span:nth-child(6) { transform: translateX(0px) !important; }
/* ERR */
.tbl-head.grid-all > span:nth-child(7) { transform: translateX(0px) !important; }
/* ИВ */
.tbl-head.grid-all > span:nth-child(9) { transform: translateX(0px) !important; }
/* Цена от */
.tbl-head.grid-all > span:nth-child(10) { transform: translateX(0px) !important; }
.sort-link { gap: 1.5px !important; }
.sort-arrow-default { font-size: 6px !important; opacity: 0.35; transform: translateY(0px); }
.sort-arrow-active { font-size: 6.5px !important; transform: translateY(0px); }
/* Убираем отдельный столбец "№" на мобильной таблице "Все каналы" / "Сохранённые" —
   номер позиции переезжает в плашку прямо под аватаркой (см. .ch-num-badge ниже) */
.channels-list-2 .grid-all > *:nth-child(1),
.tbl-head.grid-all:has(+ .channels-list-2) > *:nth-child(1) { display: none !important; }
.channels-list-2 .grid-all,
.tbl-head.grid-all:has(+ .channels-list-2) { grid-template-columns:1fr 21px 37px 36px 29px 26px 26px 36px !important;
    gap: 1px !important; }
.channels-list-2 .grid-all > *:nth-child(8),
.tbl-head.grid-all:has(+ .channels-list-2) > *:nth-child(8) { display: none !important; }
.channels-list-2 .grid-all > *:nth-child(11),
.tbl-head.grid-all:has(+ .channels-list-2) > *:nth-child(11) { display: none !important; }
.channels-list-2 .grid-all { grid-template-rows: auto !important; 
    row-gap: 0px !important;
    align-items: stretch !important; }
.channels-list-2 .grid-all > * { align-self: center !important; }
.channels-list-2 .btn-write-wrap { display: none !important; }
.ch-row { cursor: pointer; user-select: none; font-size: 11px !important; padding: 7px 7px !important; align-items: center !important; }
.ch-row td, .ch-row > div { padding: 2px 1px !important; font-size: 4.5px !important; text-align: left !important; }
.ch-row td:first-child, .ch-row > div:first-child { padding-left: 4px !important; max-width: 30px !important; text-align: center !important; font-weight: 700; color: #94a3b8; }
.ch-row .ch-title { font-size: 6px !important; font-weight: 600 !important; color: #0f172a !important;padding-top:2px; line-height: 1.2 !important; }
.ch-row .ch-user { font-size: 5px !important; max-width: 55px !important; color:#05a279 !important; }
.ch-meta { display: flex; align-items: center; gap: 3px; min-width: 0; width: 100%; }
.ch-row.grid-all .avatar-badge { width: 8px !important;
    height: 8px !important; }
/* Категория теперь показывается той же цветной иконкой-плашкой, что и на ПК */
.ch-cat-mobile-only { display: inline-flex !important; }
.ch-names .ch-badge { margin-top: 1.7px !important;
    gap: 2px !important; }
.tbl-head, .tbl-head.grid-all { font-size: 5px !important; padding: 4px 2px !important; }
.ch-row { font-size: 7px !important; padding: 1px 2px 3px 2px !important; }
.ch-title { font-size: 7.5px !important; }
.ch-user { font-size: 6.6px !important; }
.ch-subs { font-size: 7px !important; }
.ch-badge { font-size: 6px !important; padding: 2px 4px !important; max-width: 55px !important;min-width: 0 !important; }
.rank-chip { padding: 3px 8px 3px 6px !important;
        font-size: 8.5px !important;
        border-radius: 12px !important;
        gap: 2px !important; }
.rank-chip-icon { display: none !important; }
.avatar-wrap { width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important; }
.ch-row.grid-my .avatar-wrap { width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important; }
.ch-row.grid-my .ch-title { font-size: 5.5px !important; }
.ch-row.grid-all .avatar-wrap { width: 23px !important;
    height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important; }
.ch-row.grid-all .ch-title { font-size: 5.5px !important; }
.avatar-wrap.verified .ch-avatar { border: 2px solid #4cf667 !important; }
.ch-row > div.rank-chip,
div.rank-chip { padding: 1px 3px !important; }
/* Дизайнерские бейджи тарифов */
.tariff-designer-badge { position: absolute; top: -2px; left: -2px; width: 10px; height: 10px; display: flex; align-items: center; justify-content: center; z-index: 10; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)); }
.board-avatar-wrap .avatar-badge { width: 7px !important;
    height: 7px !important;
    border-width: 1px !important;
    bottom: -1px !important;
    right: -1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important; }
.board-avatar-wrap.verified .avatar-badge { background-color: #22e6a0 !important; }
.board-avatar-wrap .avatar-badge svg { width: 4px !important;
    height: 4px !important;
    stroke-width: 4 !important;
    display: block !important;
    margin: 0 !important; }
.board-avatar-wrap .avatar-badge .quest-mark { font-size: 4.5px !important;
    display: block !important;
    line-height: 1 !important;
    margin-top: 1px !important; }
.avatar-wrap .avatar-badge { width: 8px !important;
    height: 8px !important;
    border-width: 1px !important;
    bottom: 1.5px !important;
    right: -2px !important;
    z-index: 6 !important; }
.avatar-wrap .avatar-badge svg { width: 4.5px !important;
    height: 4.5px !important;
    stroke-width: 5 !important; }
.avatar-wrap .avatar-badge .quest-mark { font-size: 6px !important; }
.board-item .rank-chip { padding: 1.5px 5px 1.5px 4px !important;
    font-size: 6.5px !important;
    border-radius: 10px !important;
    gap: 1.5px !important; }
.board-item .rank-chip-icon { width: 6px !important;
    height: 6px !important; }
.btn-write { font-size: 5px !important; padding: 2px 4px !important; gap:0px; }
.btn-write svg { display: none !important; }
.btn-fav { padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important; }
.btn-fav svg { width: 9px !important;
    height: 9px !important;
     transform: translateY(2px) !important;  /* базовое положение — для 2-строчных карточек (вкладка "Сохранённые") */ }
/* На вкладке "Все каналы" в имени канала три строки (название + юзернейм + категория) —
   звёздочка сидит на первой строке, поэтому центр этой строки сильнее уходит вверх
   от центра всего ряда. Тут нужен более сильный сдвиг вниз, чем на "Сохранённые". */
.ch-names:has(.ch-badge) .btn-fav svg { transform: translateY(0px) !important; }
.grid-all > div:nth-child(4),
.grid-all > div:nth-child(5),
.grid-all > div:nth-child(6),
.grid-all > div:nth-child(9) { font-size: 4.5px !important; }
.iv-badge { font-size: 4.5px !important; padding: 1px 4px !important; }
.ch-cpm-badge { font-size: 5px !important; padding: 1px 2px !important; }
.ch-no-price-panel { font-size: 5.5px !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    height: auto !important;
    max-width: 55px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; }
/* Заголовок шапки "Мои каналы" (.tbl-head.grid-my) на ПК двигается через
       margin-left, заданный инлайново в PHP (?tab=channels). На мобиле эти же
       инлайн-отступы тянутся вместе с версткой и ломают выравнивание, т.к. колонки
       здесь узкие. Обнуляем их именно в моб. версии — независимо от ПК —
       и даём отдельные ручки (nth-child) под каждый заголовок, чтобы можно было
       подвинуть их только на мобиле, не трогая десктоп. */
    .tbl-head.grid-my > span { margin-left: 0 !important; }
.tbl-head.grid-my > span:nth-child(2) { transform: translateX(0px) !important; }
/* Площадка */
    .tbl-head.grid-my > span:nth-child(3) { transform: translateX(0px) !important; }
/* Рейтинг */
    .tbl-head.grid-my > span:nth-child(4) { transform: translateX(0px) !important; }
/* Подписчики */
    .tbl-head.grid-my > span:nth-child(5) { transform: translateX(0px) !important; }
/* Охват */
    .tbl-head.grid-my > span:nth-child(6) { transform: translateX(0px) !important; }
/* ERR */
    .tbl-head.grid-my > span:nth-child(9) { transform: translateX(0px) !important; }
/* Цена от */
    .tbl-head.grid-my > span:nth-child(10) { transform: translateX(0px) !important; }
.ch-wrapper.is-open { border-radius: 7px !important; margin-bottom: 3px !important; }
.ch-wrapper.is-open:hover { transform: translateY(-2px) !important; }
.gm-metric-icon { width: 9px !important; height: 9px !important; margin-right: 1.5px !important; }
.gm-metric-icon svg { width: 5px !important; height: 5px !important; }
.gm-icon-cat { width: 8px !important; height: 8px !important; margin-right: 1px !important; box-shadow: 0 1px 3px rgba(15,23,42,0.25) !important; }
.gm-icon-cat svg { width: 5px !important; height: 5px !important; }
.ch-badge { font-size: 4px !important; padding: 0.5px 2px !important; max-width: 54px !important;min-width: 0 !important; }
.ch-cpm-badge { font-size: 4.5px !important; }
.iv-badge { font-size: 4.5px !important; padding: 1px 2px !important; }
/* Все цифры в строке "Мои каналы" (подписчики/охват/ERR/цена) — один и тот же размер */
    .ch-subs { font-size: 6.3px !important; }
.gm-cell-value,
    .gm-cell-value.gm-cell-price,
    .gm-err-ring + span { font-size: 4.5px !important; }
.grid-my .rank-chip { font-size: 4.5px !important; padding: 2px 5px !important; gap: 2px !important; }
.grid-my .rank-chip-icon { width: 6px !important; height: 6px !important; }
/* ============================================================
       НОМЕР ПОЗИЦИИ ПОД АВАТАРКОЙ (вместо отдельного столбца "№")
       Работает для всех вкладок с таблицей каналов: "Все каналы",
       "Мои каналы", "Сохранённые" и для закреплённых ТОП-каналов.
       ============================================================ */
    .avatar-wrap { overflow: visible !important; }
.ch-num-badge { display: flex !important;
        position: absolute !important;
        left: 50% !important;
        bottom: -4px !important;
        transform: translateX(-50%) !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 18px !important;
        height: 8px !important;
        padding: 0 3px !important;
        border-radius: 6px !important;
        background: #0d1c3ded !important;
        color: #ffffff !important;
        font-size: 4.5px !important;
        font-weight: 800 !important;
        border: 1.3px solid #ffffff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.28) !important;
        z-index: 5 !important;
        letter-spacing: 0 !important; }
/* Закреплённые ТОП-строки — плашка зелёная и содержит текст "ТОП" */
    .js-top-ch-card .ch-num-badge { background: linear-gradient(135deg, #10b981, #059669) !important;
        min-width: 16px !important;
        padding: 0 4px !important; }
.ch-num-badge .pinned-badge { background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 6px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        display: inline !important; }
/* В "Мои каналы" аватарка меньше (20px) — чуть уменьшаем плашку, чтобы не вылезала за строку */
    .ch-row.grid-my .ch-num-badge { min-width: 18px !important;
        height: 8px !important;
        font-size: 4.5px !important;
        bottom: -4px !important; }
}
/* Строка поиска на десктопе больше не переносится на новую строку.
   Категории при этом всегда должны начинаться с новой строки — это не трогаем. */
@media (min-width: 993px) {
    .head-tbl > .tbl-cat-row { flex-basis: 100%; }
    .head-tbl > div:first-child { min-width: 0; flex-shrink: 1; }
    .tbl-search-wrap { flex-wrap: nowrap !important; flex-shrink: 0; min-width: 0; }
    .tbl-search-input { flex-shrink: 1; min-width: 90px; }
    .tbl-verified-label { flex-shrink: 0; white-space: nowrap; }
}


/* ===== ФИКСИРОВАННОЕ увеличение +19% для всех десктопных экранов (993px+), БЕЗ vw/clamp/тиров ===== */
@media (min-width: 993px) {

    *, *::before, *::after { box-sizing: border-box; }
    :root { 
        --bg: #f4f6fa; --card: #ffffff; --border: #e8ecf3; --blue: #0099ff; --blue-hover: #007acc;
        --blue-soft: rgba(0, 153, 255, 0.08); --text: #1e293b; --muted: #64748b; --green: #10b981;
        --green-soft: rgba(16, 185, 129, 0.1); --orange: #f59e0b; --orange-soft: rgba(245, 158, 11, 0.1);
        
         /* ЭКСКЛЮЗИВНЫЙ ВЕКТОРНЫЙ КИБЕР-ПАТТЕРН (Космические узлы, созвездия и неоновые самолетики Telegram) */
    --tg-cosmic-mesh: url("data:image/svg+xml,%3Csvg width='190' height='180' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M30,50 L80,25 L140,65 L200,35 L220,110 L160,150 L85,120 L30,190 L65,225 L150,210 L210,175 M80,25 L85,120 M140,65 L160,150 M200,35 L210,175 M30,50 L30,190' stroke-opacity='0.16' stroke-dasharray='3,3'/%3E%3Cpath d='M15,110 L90,80 L180,160 M100,10 L230,130' stroke='%2300c9a7' stroke-opacity='0.15' stroke-width='0.8'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='50' r='2' opacity='0.5'/%3E%3Ccircle cx='80' cy='25' r='3.5' opacity='0.7' fill='%2300c9a7'/%3E%3Ccircle cx='140' cy='65' r='2' opacity='0.4'/%3E%3Ccircle cx='200' cy='35' r='4' opacity='0.6' fill='%2300c9a7'/%3E%3Ccircle cx='220' cy='110' r='2' opacity='0.4'/%3E%3Ccircle cx='160' cy='150' r='3.5' opacity='0.7' fill='%2300c9a7'/%3E%3Ccircle cx='85' cy='120' r='2.5' opacity='0.5'/%3E%3Ccircle cx='30' cy='190' r='3' opacity='0.4'/%3E%3Ccircle cx='150' cy='210' r='3' opacity='0.6' fill='%2300c9a7'/%3E%3C/g%3E%3Cg transform='translate%2845, 65%29 scale%280.55%29' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.35' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3Ccircle cx='20' cy='20' r='22' stroke-opacity='0.15' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate%28170, 45%29 scale%280.45%29' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.25' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3C/g%3E%3Cg transform='translate%28105, 155%29 scale%280.65%29' stroke='%2300c9a7' stroke-width='1.6' stroke-opacity='0.4' fill='none'%3E%3Cpath d='M5,22 L35,5 L28,37 L18,28 Z M18,28 L31,11 L14,24 Z'/%3E%3Ccircle cx='20' cy='20' r='24' stroke-opacity='0.2' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
        #searchInput::placeholder {
        color: rgba(255, 255, 255, 0.6);
        opacity: 1;
    }

    .tbl-search-wrap { display: flex; align-items: center; gap: 14.3px; }
    .tbl-search-input {
        padding: 9.5px 16.7px; color: rgba(255, 255, 255, 0.6);
        border: 1.2px solid #62a2b3bf; border-radius: 11.9px; font-size: 12.5px;
        width: 261.8px; outline: none; background: #18171c87; height: 38.1px;
        box-sizing: border-box; transition: border-color 0.15s;
    }
    .tbl-verified-label {
        display: inline-flex; align-items: center; gap: 9.5px; font-weight: 600;
        color: #fff; cursor: pointer; user-select: none; background: #18171c87;
        padding: 9.5px 16.7px; border-radius: 11.9px; border: 1.2px solid #62a2b3bf;
        font-size: 12.5px; height: 38.1px; box-sizing: border-box; margin: 0 !important;
    }
    .tbl-verified-checkbox { cursor: pointer; width: 16.7px; height: 16.7px; margin: 0; accent-color: #fff; }

    .sort-link {
        color: inherit; text-decoration: none; cursor: pointer; display: flex;
        align-items: center; gap: 4.8px; justify-content: center; width: 100%; height: 100%;
    }
    .sort-arrow { display: inline-flex; align-items: center; }
    .sort-arrow-default { opacity: 0.3; font-size: 13.1px; }
    .sort-arrow-active { color: var(--blue); font-weight: 800; font-size: 14.3px; }
        
    }
    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-top: 67.8px; font-size: 14.3px; -webkit-font-smoothing: antialiased; }
    
   .layout {
    display: grid;
    grid-template-columns: 238px 1fr;
    min-height: calc(100vh - 71.4px);
    gap: 0;
    align-items: stretch;
}


    
    .main { padding: 0px 4.8px 4.8px 4.8px !important; width: 100%; box-sizing: border-box; background: #f8fafc; 
         background-color: #f4f7fb;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420"><g fill="none" stroke="%230088cc" stroke-width="1.4" opacity="0.12"><path d="M35 40 L95 62 L60 78 Z"/><path d="M60 78 L68 108 L95 62"/><path d="M300 130 L365 108 L332 148 Z"/><path d="M332 148 L342 182 L365 108"/><path d="M150 260 L200 245 L172 278 Z"/><path d="M172 278 L180 300 L200 245"/></g><g fill="%230088cc" opacity="0.15"><circle cx="20" cy="150" r="1.6"/><circle cx="380" cy="40" r="2"/><circle cx="250" cy="30" r="1.3"/><circle cx="110" cy="330" r="1.8"/><circle cx="390" cy="300" r="1.4"/><circle cx="45" cy="380" r="1.6"/><circle cx="220" cy="180" r="1.2"/></g><g fill="none" stroke="%230088cc" stroke-width="0.7" stroke-dasharray="4 5" opacity="0.18"><path d="M10 220 Q 90 190 160 230 T 300 210"/><path d="M120 30 Q 180 70 260 55 T 410 90"/><path d="M0 340 Q 70 320 140 350 T 300 330"/></g><g opacity="0.12"><circle cx="330" cy="230" r="26" fill="none" stroke="%230088cc" stroke-width="1"/><circle cx="330" cy="230" r="15" fill="none" stroke="%230088cc" stroke-width="1"/></g></svg>');
    background-repeat: repeat;
    background-size: 345.1px 345.1px;
    }
    
    .table-section-title { margin-top: 5.9px !important; margin-bottom: 5.9px !important; }
    .table-section-title h1 { margin: 0; font-size: 20.2px !important; font-weight: 800; color: #ffffff !important; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8.3px; } 
    .table-section-title p { margin: 4.8px 0 0 0; font-size: 13.1px; color: #ffffff !important; }
    
  .table-responsive { width: 100%; overflow-x: auto; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0; -webkit-overflow-scrolling: touch; }
    .table-responsive > .tbl-head, .table-responsive > .channels-list { }
    
    .tbl-head { background:var(--tg-cosmic-mesh), linear-gradient(316deg, #0b09ac 0%, #088793 35%, #00aa71 70%, #31f621 100%) !important; color: #ffffff !important; font-size: 10.7px !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1.2px solid rgba(255, 255, 255, 0.1); }
    .tbl-head span { display: flex; align-items: center; justify-content: center; }
.tbl-head span:nth-child(2) { justify-content: flex-start; }
    
    .channels-list { display: flex; flex-direction: column; }
    .channels-list .ch-wrapper.js-channel-row:last-child { border-radius: 0 0 15.5px 15.5px !important; }
    .ch-wrapper { box-shadow: 0 4.8px 13.1px rgba(15, 23, 42, 0.02) !important; margin-bottom: 10.7px; transition: all 0.2s ease; }
    .ch-wrapper.js-channel-row { background: #ffffff !important; margin-bottom: 0 !important; border-radius: 0 !important; border: 1.2px solid var(--border) !important; border-top: none !important; }
    .ch-wrapper.verified { border-left: 3.6px solid #10b981 !important; background: rgba(16, 185, 129, 0.01); }
    .ch-wrapper.unverified { border-left: 3.6px solid #cbd5e1 !important; background: transparent; }

    .tbl-head.grid-all { border-radius: 15.5px 15.5px 0 0 !important; overflow: hidden; }
.grid-all { display: grid; grid-template-columns: 17.8px 1.5fr 65.5px 70.2px 65.5px 35.7px 47.6px 163px 63.1px 45.2px 124.9px 83.3px; align-items: center; padding: 14.3px 2.4px; gap: 7.1px; }
    .tbl-head.grid-all { gap: 11.9px; }
    .grid-my { display: grid; align-items: center; padding: 13.1px 16.7px; gap: 4.8px; }
    .grid-all > div, .grid-my > div { display: flex; justify-content: center; align-items: center; }
    .grid-all > div.ch-meta, .grid-my > div.ch-meta { justify-content: flex-start; min-width: 0; width: 100%; } 
    .grid-all > div.btn-write-wrap { justify-content: flex-end; }

    .sort-link-inner { font-size: 10.7px; gap: 2.4px; }
    .sort-arrow { font-size: 13.1px; }
    .sort-arrow.active { font-size: 14.3px; }

    .tbl-head.grid-all > span { position: relative; }
    .tbl-head.grid-all > span:nth-child(1)  { transform: translateX(11.9px); }
    .tbl-head.grid-all > span:nth-child(2)  { transform: translateX(11.9px); }
    .tbl-head.grid-all > span:nth-child(3)  { transform: translateX(69px); }
    .tbl-head.grid-all > span:nth-child(4)  { transform: translateX(69px); }
    .tbl-head.grid-all > span:nth-child(5)  { transform: translateX(59.5px); }
    .tbl-head.grid-all > span:nth-child(6)  { transform: translateX(47.6px); }
    .tbl-head.grid-all > span:nth-child(7)  { transform: translateX(35.7px); }
    .tbl-head.grid-all > span:nth-child(8)  { transform: translateX(20.2px); }
    .tbl-head.grid-all > span:nth-child(9)  { transform: translateX(17.8px); }
    .tbl-head.grid-all > span:nth-child(10) { transform: translateX(11.9px); }
    .tbl-head.grid-all > span:nth-child(11) { transform: translateX(-5.9px); }
    .tbl-head.grid-all > span:nth-child(12) { transform: translateX(-17.8px); }

    .channels-list .ch-row.grid-all,
    .channels-list-2 .ch-row.grid-all {
        gap: 3.6px;
    }
    
.ch-row { cursor: pointer; user-select: none; font-size: 13.1px !important; padding: 8.3px 8.3px !important; align-items: center !important; }
    .ch-row > div { padding: 2.4px 4.8px !important; font-size: 10.7px !important; text-align: left !important; }
    .ch-row > div:first-child { padding-left: 4.8px !important; max-width: 35.7px !important; text-align: center !important; font-weight: 700; color: #94a3b8; }
    .ch-num { font-size: 13.1px; color: #94a3b8; font-weight: 600; text-align: center; }
    .ch-meta { display: flex; align-items: center; gap: 10.7px; min-width: 0; width: 100%; }
    
   .avatar-wrap { position: relative !important; display: inline-flex !important; width: 38.1px !important; height: 38.1px !important; max-width: 38.1px !important; max-height: 38.1px !important; min-width: 38.1px !important; min-height: 38.1px !important; flex-shrink: 0 !important; }
    .avatar-wrap .ch-avatar { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; border-radius: 50% !important; object-fit: cover !important; background: #ffffff !important; border: 2.4px solid #cbd5e1 !important; box-sizing: border-box !important; display: block !important; }
    .avatar-wrap.verified .ch-avatar { border: 2.4px solid var(--green) !important; }
    .avatar-wrap .avatar-badge { position: absolute !important; width: 15.5px !important; height: 15.5px !important; bottom: -2.4px !important; right: -2.4px !important; border: 2.4px solid #ffffff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; }
    .avatar-wrap.verified .avatar-badge { background-color: var(--green) !important; }
    .avatar-wrap.unverified .avatar-badge { background-color: #475569 !important; }
    .avatar-wrap .avatar-badge svg { width: 8.3px !important; height: 8.3px !important; display: block !important; fill: none !important; stroke: #ffffff !important; stroke-width: 5 !important; }
    .avatar-wrap .avatar-badge .quest-mark { font-size: 9.5px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1 !important; font-family: 'Inter', sans-serif !important; }

    .pinned-badge { background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 9.5px; padding: 2.4px 5.9px; border-radius: 4.8px; font-weight: 800; display: inline-flex; align-items: center; gap: 4.8px; margin-bottom: 4.8px; text-transform: uppercase; box-shadow: 0 2.4px 5.9px rgba(34, 197, 94, 0.3); }
   .ch-title { font-size: 11.3px !important; font-weight: 600 !important; color: #0f172a !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .ch-user { font-size: 10.7px !important; color: #05a279 !important; text-decoration: none; font-weight: 500; }
    .ch-user:hover { text-decoration: underline; }
   .ch-subs { font-size: 13.7px; font-weight: 600; color: #0f172a; }
  .iv-badge { background: #8b26fb; color: #ffffff; font-size: 10.1px; font-weight: 700; padding: 3.6px 5.9px; border-radius: 7.1px; border: 1.2px solid #e2e8f0; }
    .ch-cat-inline { display: none; }
    .ch-cpm-badge { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #ffffff; font-weight: 700; font-size: 10.5px; padding: 4.8px 7.1px; border-radius: 7.1px; box-shadow: 0 3.6px 9.5px rgba(34, 197, 94, 0.25); white-space: nowrap; letter-spacing: 0.2px; }
.ch-badge { font-size: 11.9px; color: #475569; background: #f1f5f9; padding: 4.8px 9.5px; border-radius: 7.1px; display: inline-block; width: max-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 124.9px; font-weight: 500; }


    /* ===== RANK CHIP — UNIVERSAL FLAT EDITION (1в1 из account.php) ===== */
    .ch-row > div.rank-chip,
    div.rank-chip {
        padding: 1.2px 5.9px !important;
        display: inline-flex;
        align-items: center; 
        justify-content: center;
        gap: 4.8px;
        border-radius: 23.8px;
        font-size: 11.9px; 
        font-weight: 700; 
        line-height: 1; 
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        margin: 0 auto;
        flex-shrink: 0;
        background: var(--rank-bg) !important;
        color: var(--rank-text) !important;
        border: 1.2px solid var(--rank-border);
        box-shadow: none !important; 
        cursor: default;
    }

    .rank-chip-icon {
        width: 13.1px !important;
        height: 13.1px !important;
        display: flex; 
        align-items: center; 
        justify-content: center;
        flex-shrink: 0;
        color: var(--rank-icon);
    }

    .rank-chip-icon-svg { 
        width: 100%; 
        height: 100%; 
        display: block; 
    }
    .rank-chip-value { 
        color: inherit; 
        display: inline-block;
    }

    .rank-chip.rank-steel { 
        --rank-bg: #f8fafc; 
        --rank-text: #64748b; 
        --rank-icon: #94a3b8; 
        --rank-border: #e2e8f0;
    }

    .rank-chip.rank-silver { 
        --rank-bg: #f0f9ff; 
        --rank-text: #0369a1; 
        --rank-icon: #38bdf8; 
        --rank-border: #bae6fd;
    }

    .rank-chip.rank-gold { 
        --rank-bg: #fffbeb; 
        --rank-text: #b45309; 
        --rank-icon: #fbbf24; 
        --rank-border: #fde68a;
    }

    .rank-chip.rank-diamond {
        --rank-bg: linear-gradient(135deg, #22d3a8 0%, #5e9dff 50%, #a855f7 100%);
        --rank-text: #ffffff;
        --rank-icon: #ffffff;
        --rank-border: transparent;
    }
    
    .btn-fav { display: inline-flex; align-items: center; background: transparent; border: none; color: #cbd5e1; cursor: pointer; padding: 2.4px; text-decoration: none; transition: all 0.15s; }
    .btn-fav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; transform: translateY(4.8px); }
    .btn-fav:hover, .btn-fav.active { color: #eab308; } .btn-fav.active svg { fill: #eab308; }

    .row-voting-block { display: flex; align-items: center; gap: 4.8px; justify-content: center; width: 100%; }
    .row-stars-row { display: flex; gap: 2.4px; }
   .row-star-btn { width: 13.1px; height: 13.1px; cursor: pointer; color: #cbd5e1; transition: all 0.15s ease; position: relative; }
    .row-star-btn svg { width: 100%; height: 100%; fill: currentColor; }
    .row-star-btn:hover, .row-star-btn.selected { color: var(--star-color); transform: scale(1.2); }
    .row-star-btn .tt { visibility: hidden; opacity: 0; background: #1e293b; color: #fff; text-align: center; padding: 4.8px 8.3px; border-radius: 7.1px; position: absolute; z-index: 100; bottom: 150%; left: 50%; transform: translateX(-50%); font-size: 10.7px; white-space: nowrap; transition: 0.15s; pointer-events: none; font-weight: 500; box-shadow: 0 4.8px 10.7px rgba(0,0,0,0.15); }
    .row-star-btn .tt::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4.8px; border-width: 4.8px; border-style: solid; border-color: #1e293b transparent transparent transparent; }
    .row-star-btn:hover .tt { visibility: visible; opacity: 1; }
    .row-voting-block button.row-btn-vote { background: #0099ff; border: none; color: #ffffff; padding: 4.8px 8.3px; border-radius: 7.1px; font-size: 11.9px; font-weight: 600; cursor: pointer; transition: 0.15s; white-space: nowrap; }
    .row-vote-success { display: none; align-items: center; gap: 3.6px; color: #10b981; font-size: 11.9px; font-weight: 600; animation: fadeIn 0.2s ease; white-space: nowrap; }
    .row-vote-success svg { width: 13.1px; height: 13.1px; fill: none; stroke: currentColor; stroke-width: 2.5; }

   .btn-write { display: inline-flex; align-items: center; justify-content: center; gap: 1.2px; background: #ffffff; border: 1.2px solid #e2e8f0; color: #00bfa5; text-decoration: none; padding: 4.8px 7.1px; border-radius: 9.5px; font-size: 9.5px; font-weight: 600; transition: all 0.15s; box-shadow: 0 1.2px 3.6px rgba(0,0,0,0.02); }
    .btn-write:hover { border-color: #00bfa5; background: #e6f9f6; }
    
    .form-container { max-width: 642.6px; background: #fff; padding: 32.1px; border-radius: 15.5px; border: 1.2px solid var(--border); }
    .form-control { width: 100%; padding: 10.7px 13.1px; margin: 8.3px 0 16.7px; border: 1.2px solid #cbd5e1; border-radius: 8.3px; font-size: 14.3px; }
    .form-label { font-size: 11.9px; font-weight: 700; color: #475569; text-transform: uppercase; }
    .page-header { margin-bottom: 21.4px; background: #fff; padding: 21.4px; border-radius: 15.5px; border: 1.2px solid var(--border); }
    .page-title { font-size: 21.4px; font-weight: 800; margin: 0; }
    .btn-prime { display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #ffffff; text-decoration: none; padding: 8.3px 15.5px; border-radius: 8.3px; font-size: 13.1px; font-weight: 600; border: none; cursor: pointer; }
    .empty-category-results { display: none; padding: 42.8px; text-align: center; color: var(--muted); font-size: 14.3px; background: #fff; border: 1.2px dashed var(--border); border-radius: 15.5px; margin-top: 16.7px; }
    
   .top-nav-buttons { 
        display: flex; 
        gap: 5.9px; 
        margin-bottom: 4.8px; 
        width: 100%;
        align-items: stretch;
    }
    .promo-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 9.5px 11.9px 10.7px 14.3px;
    border-radius: 19px;
        text-decoration: none;
        overflow: hidden;
        isolation: isolate;
        border: 1.2px solid rgba(255,255,255,0.14);
        box-shadow: 0 7.1px 21.4px rgba(0,0,0,0.12);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Фирменный космический паттерн + свой цветовой перелив под каждую карточку */
   .card-catalog { background:var(--tg-cosmic-mesh), linear-gradient(135deg, #43b487 0%, #4ab48b 45%, #42f782 100%) !important; }
    .card-discounts { background: var(--tg-cosmic-mesh), linear-gradient(135deg, #10c5ab 0%, #00a6dd 45%, #068de5 100%) !important;}
   .card-wholesale { background: var(--tg-cosmic-mesh), linear-gradient(135deg, #b357f2 0%, #931eff 45%, #c757ff 100%) !important; }

    .promo-card:hover {
        transform: translateY(-3.6px);
        border-color: rgba(255,255,255,0.32);
    }
    .card-catalog:hover {
        box-shadow: 0 9.5px 19px -4.8px rgba(4, 197, 107, 0.4), 0 3.6px 9.5px rgba(0,0,0,0.14);
    }
    .card-discounts:hover {
        box-shadow: 0 9.5px 19px -4.8px rgba(37, 117, 252, 0.4), 0 3.6px 9.5px rgba(0,0,0,0.14);
    }
    .card-wholesale:hover {
        box-shadow: 0 9.5px 19px -4.8px rgba(182, 36, 255, 0.4), 0 3.6px 9.5px rgba(0,0,0,0.14);
    }
    .promo-card.active {
        border-color: rgba(255,255,255,0.55);
    }

    .promo-card-row {
        display: flex;
        align-items: center;
        gap: 11.9px;
        margin-bottom: 5.9px;
    }
    .promo-card-icon {
        position: relative;
        width: 35.7px;
        height: 35.7px;
        border-radius: 11.9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: rgba(255,255,255,0.16);
        border: 1.2px solid rgba(255,255,255,0.22);
        backdrop-filter: blur(4.8px);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .promo-card:hover .promo-card-icon { transform: scale(1.08) rotate(-4deg); }
    .promo-card-icon svg { width: 18.4px; height: 18.4px; color: #ffffff; }

    .promo-card-title {
        font-weight: 800;
        font-size: 16.7px;
        color: #ffffff;
        line-height: 1.2;
        letter-spacing: -0.2px;
        text-shadow: 0 1.2px 3.6px rgba(0,0,0,0.15);
    }

    .promo-card-stat {
        margin-left: auto;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        font-size: 12.3px;
        font-weight: 800;
        color: #ffffff;
        padding: 4.8px 11.9px;
        border-radius: 23.8px;
        background: rgba(255,255,255,0.16);
        border: 1.2px solid rgba(255,255,255,0.24);
        backdrop-filter: blur(4.8px);
        white-space: nowrap;
    }

    .promo-card-desc {
    font-weight: 450;
    font-size: 11.2px;
    color: rgba(255,255,255,0.90);
    line-height: 1.3;
    margin: 0 0 7.1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
    .promo-card-link {
        margin-top: auto;
        font-size: 13.1px;
        font-weight: 700;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        gap: 4.8px;
        letter-spacing: 0.1px;
    }
    .promo-card-link svg {
        width: 14.3px; height: 14.3px;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .promo-card:hover .promo-card-link svg { transform: translateX(4.8px); }

    
    .head-tbl {background: var(--tg-cosmic-mesh), linear-gradient(316deg, #0b09ac 0%, #088793 35%, #00aa71 70%, #31f621 100%) !important; padding: 14.3px 17.8px; border-radius: 15.5px; margin-bottom: 10.7px; box-shadow: 0 1.2px 3.6px rgba(0,0,0,0.01); border: 1.2px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8.3px;}
    
    .tbl-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5.9px;
    width: 100%;
    margin-top: 3.6px;
    padding-top: 11.9px;
    border-top: 1.2px solid rgba(255,255,255,0.18);
}
.tbl-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5.9px;
    padding: 4.8px 13.1px 4.8px 7.1px;
    background: rgba(255,255,255,0.1);
    border: 1.2px solid rgba(255,255,255,0.28);
    border-radius: 17.8px;
    font-size: 11.1px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: all 0.18s ease;
    white-space: nowrap;
    backdrop-filter: blur(4.8px);
    -webkit-backdrop-filter: blur(4.8px);
}
.tbl-cat-chip:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-1.2px);
}
.tbl-cat-chip .chip-dot {
    width: 13.1px;
    height: 13.1px;
    border-radius: 4.2px;
    border: 1.8px solid rgba(255,255,255,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}
.tbl-cat-chip .chip-dot svg {
    width: 8.3px;
    height: 8.3px;
    stroke: #065f46;
    stroke-width: 4;
    fill: none;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.15s ease;
}
.tbl-cat-chip.active {
    background: #ffffff;
    color: #065f46;
    border-color: #ffffff;
    box-shadow: 0 4.8px 11.9px rgba(0,0,0,0.18);
}
.tbl-cat-chip.active .chip-dot {
    background: #065f46;
    border-color: #065f46;
}
.tbl-cat-chip.active .chip-dot svg {
    opacity: 1;
    stroke: #ffffff;
    transform: scale(1);
}
    .ch-no-price-panel {
        grid-column: span 2 !important;
        background: #f1f5f9 !important;
        border: 1.2px solid #cbd5e1 !important;
        color: #64748b !important;
        font-size: 11.9px !important;
        font-weight: 600 !important;
        padding: 4.8px 10.7px !important;
        border-radius: 7.1px !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        height: 26.2px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 149.9px !important;
        margin: 0 auto !important;
    }
.ch-wrapper.js-channel-row.tariff-business-yellow {
    background: #fffdf5 !important;
    border-left: 3.6px solid #eab308 !important;
}
.ch-wrapper.js-channel-row.tariff-business-yellow:hover {
    background: #fffbeb !important;
}
.ch-wrapper.tariff-business-yellow .ch-title {
    color: #855306 !important;
}

.ch-wrapper.js-channel-row.tariff-premium-purple {
    background: linear-gradient(90deg, #fbf7ff 0%, #ffffff 100%) !important;
    border-left: 5.9px solid #a855f7 !important;
}
.ch-wrapper.js-channel-row.tariff-premium-purple:hover {
    background: linear-gradient(90deg, #f6edff 0%, #fbf7ff 100%) !important;
}
.ch-wrapper.tariff-premium-purple .ch-title {
    color: #6b21a8 !important;
}

.tariff-designer-badge {
    position: absolute; 
    top: -2.4px; 
    left: -2.4px; 
    width: 21.4px; 
    height: 21.4px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 10;
    filter: drop-shadow(0 2.4px 4.8px rgba(0,0,0,0.15));
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-1.8px); }
    100% { transform: translateY(0); }
}

    

    .pagination-container { display: flex; justify-content: center; align-items: center; gap: 5.9px; margin-top: 26.2px; margin-bottom: 16.7px; }
    .pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34.5px; height: 34.5px; padding: 0 5.9px; background: #fff; border: 1.2px solid var(--border); border-radius: 8.3px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 13.1px; transition: all 0.15s ease; }
    .pagination-link:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
    .pagination-link.active { background: var(--blue); color: #fff; border-color: var(--blue); }
    .pagination-link.disabled { opacity: 0.4; pointer-events: none; background: #f1f5f9; }
    
    /* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ТАБЛИЦЫ (1в1 из account.css) ===== */

    
    
    


/* ===================================================================
   ПЕРЕНЕСЕНО 1-В-1 ИЗ ACCOUNT.CSS — стили новой таблицы каналов
   (цветные иконки категорий, премиальные плашки ИВ/CPM, рейтинг-чипы,
   кнопки пагинации). Стоит в конце файла, поэтому перекрывает старые
   конфликтующие правила catalog.php с тем же именем класса.
   =================================================================== */
.promo-card.active { border-color: rgba(255,255,255,0.55); }
.slide.active { display: block; }
.ch-wrapper.pinned-top { background: linear-gradient(90deg, #f0fdf4 0%, #dcfce7 100%) !important; border: 1.2px solid #86efac !important; border-left: 4.8px solid #22c55e !important; box-shadow: 0 4.8px 17.8px rgba(34, 197, 94, 0.15) !important; }
.pinned-badge { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 10.7px; padding: 2.4px 7.1px; border-radius: 4.8px; font-weight: 800; display: inline-flex; align-items: center; gap: 4.8px; margin-bottom: 4.8px; text-transform: uppercase; box-shadow: 0 2.4px 7.1px rgba(34, 197, 94, 0.3); }
.iv-badge { background: #f8fafc; color:#1e293b; font-size: 10.1px; font-weight: 700; padding: 3px 5.9px 3px 4.8px; border-radius: 7.1px; border:1.2px solid #f1f5f9; }
.avatar-wrap { position: relative !important;
    display: inline-flex !important;
    width: 53.5px !important;
    height: 53.5px !important;
    max-width: 53.5px !important;
    max-height: 53.5px !important;
    min-width: 53.5px !important;
    min-height: 53.5px !important;
    flex-shrink: 0 !important; }
.avatar-wrap .ch-avatar { width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #ffffff !important;
    border: 2.4px solid #cbd5e1 !important;
    box-sizing: border-box !important;
    display: block !important; }
.avatar-wrap.verified .ch-avatar { border: 2.4px solid #00ff64 !important; }
.avatar-wrap .avatar-badge { position: absolute !important;
    width: 15.5px !important;
    height: 15.5px !important;
    bottom: -2.4px !important;
    right: -2.4px !important;
    border: 2.4px solid #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important; }
.avatar-wrap.verified .avatar-badge { background-color: #33e649 !important; }
.avatar-wrap.unverified .avatar-badge { background-color: #475569 !important; }
.avatar-wrap .avatar-badge svg { width: 8.3px !important; height: 8.3px !important; display: block !important; fill: none !important; stroke: #ffffff !important; stroke-width: 5 !important; }
.avatar-wrap .avatar-badge .quest-mark { font-size: 9.5px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1 !important; font-family: 'Inter', sans-serif !important; }
/* Плашка номера позиции под аватаркой — по умолчанию скрыта (используется только в мобильной версии) */
.ch-num-badge { display: none; }
.board-avatar-wrap.verified .board-avatar { border: 3px solid #22e6a0 !important; box-shadow: 0 0 0 3.6px rgba(34,230,160,0.18); }
.board-avatar-wrap .avatar-badge { position: absolute !important;
    width: 13.1px !important;
    height: 13.1px !important;
    bottom: -1.2px !important;
    right: -1.2px !important;
    border: 1.8px solid #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important; }
.board-avatar-wrap.verified .avatar-badge { background-color: var(--green) !important; }
.board-avatar-wrap.unverified .avatar-badge { background-color: #475569 !important; }
.board-avatar-wrap .avatar-badge svg { width: 7.1px; height: 7.1px; fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; display: block !important; }
.board-avatar-wrap .avatar-badge .quest-mark { font-size: 8.3px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1 !important; font-family: 'Inter', sans-serif !important; }
.glass-filter-panel .table-section-title,
.glass-filter-panel .cat-filter-row,
.glass-filter-panel .table-responsive,
.glass-filter-panel .pagination-container,
.glass-filter-panel .empty-category-results,
.glass-filter-panel .empty-state { position: relative;
    z-index: 1;
    max-width: none; }
.glass-filter-panel .table-responsive,
.glass-filter-panel .pagination-container,
.glass-filter-panel .empty-category-results,
.glass-filter-panel .empty-state { margin-top: 2.4px; }
.glass-filter-panel .cat-check-chip.active { background: linear-gradient(90deg, rgba(20,165,255,0.14), rgba(24,210,168,0.14)); }
/* таблица внутри стекла — скругляем углы шапки/списка */
.glass-filter-panel .tbl-head.grid-all { border-radius: 9.5px 9.5px 0 0 !important; }
.glass-filter-panel .channels-list,
.glass-filter-panel .channels-list-2 { border-radius: 0 0 19px 19px;
    overflow: hidden; }
.btn-pagination-next { display: inline-flex; align-items: center; justify-content: center; gap: 7.6px;
    background: linear-gradient(90deg, #26e696, #5e9dff);
    color: #ffffff; font-size: 11.4px; font-weight: 700;
    padding: 0 20.9px; height: 40px; border-radius: 11.9px;
    text-decoration: none; border: none; cursor: pointer;
    box-shadow: 0 10.7px 25.6px rgba(38,230,150,0.3);
    transition: all 0.2s ease; }
.btn-pagination-next:hover { filter: brightness(1.06); transform: translateY(-2.4px); box-shadow: 0 14.3px 33.3px rgba(38,230,150,0.45); }
.btn-pagination-prev { display: inline-flex; align-items: center; justify-content: center; gap: 7.6px;
    background: #ffffff; color: var(--text); font-size: 11.4px; font-weight: 700;
    padding: 0 20.9px; height: 40px; border-radius: 11.9px;
    text-decoration: none; border: 1.8px solid var(--border); cursor: pointer;
    box-shadow: 0 4.8px 14.3px rgba(15,23,42,0.04);
    transition: all 0.2s ease; }
.btn-pagination-prev:hover { border-color: #26e696; color: #0a7a52; transform: translateY(-2.4px); box-shadow: 0 9.5px 21.4px rgba(38,230,150,0.15); }
/* Плашки рейтинга (rank-chip) внутри тёмных карточек "Лидеров" — своя палитра под тёмный фон,
   та же пилл-форма, что и у остальных плашек (board-val), чтобы всё смотрелось одинаково */
.board-item .rank-chip { border-radius: 23.8px !important;
    padding: 3.6px 11.9px 3.6px 9.5px !important;
    font-size: 11.3px !important;
    gap: 4.8px !important;
    box-shadow: 0 2.4px 7.1px rgba(0,0,0,0.18) !important; }
.board-item .rank-chip-icon { width: 11.9px !important; height: 11.9px !important; }
.board-item .rank-chip.rank-steel { --rank-bg: rgba(148,163,184,0.16);
    --rank-text: #cbd5e1;
    --rank-icon: #94a3b8;
    --rank-border: rgba(148,163,184,0.32); }
.board-item .rank-chip.rank-silver { --rank-bg: linear-gradient(135deg, rgba(56,189,248,0.3), rgba(14,165,233,0.16));
    --rank-text: #7dd3fc;
    --rank-icon: #38bdf8;
    --rank-border: rgba(56,189,248,0.4); }
.board-item .rank-chip.rank-gold { --rank-bg: linear-gradient(135deg, rgba(251,191,36,0.32), rgba(217,119,6,0.18));
    --rank-text: #fcd34d;
    --rank-icon: #fbbf24;
    --rank-border: rgba(251,191,36,0.42); }
.board-item .rank-chip.rank-diamond { --rank-bg: linear-gradient(135deg, #22d3a8 0%, #5e9dff 50%, #a855f7 100%);
    --rank-text: #ffffff;
    --rank-icon: #ffffff;
    --rank-border: transparent;
    box-shadow: 0 2.4px 11.9px rgba(94,157,255,0.4) !important; }
.top-boards-dots .dot.active { width: 21.4px; border-radius: 3.6px;
    background: linear-gradient(90deg, #22d3a8, #5e9dff);
    box-shadow: 0 0 11.9px rgba(94,157,255,0.6); }
.table-responsive { width: 100%; 
    overflow-x: auto; 
    background: transparent !important; 
    border: none !important;            
    box-shadow: none !important;        
    padding: 0; 
    overflow: hidden; }
.table-responsive { overflow-x: auto; }
.tbl-head { background:var(--tg-cosmic-mesh),linear-gradient(316deg, #4206af 0%, #088793 35%, #02b67a 70%, #58ff4b 100%) !important; color: #ffffff !important; font-size: 10.7px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1.2px solid rgba(255, 255, 255, 0.1); }
.tbl-head a { color: #ffffff !important; }
.tbl-head i, .tbl-head svg { font-size: 9.5px !important; margin-left: 2.4px !important; opacity: 0.8; }
.tbl-head span { display: flex; align-items: center; justify-content: center; }
.tbl-head span:nth-child(2) { justify-content: flex-start; }
.channels-list .ch-wrapper.js-channel-row:last-child { border-radius: 0 0 16.7px 16.7px !important; }
.channels-list-2 { min-width: 1071px; }
.ch-wrapper { box-shadow: 0 4.8px 14.3px rgba(15, 23, 42, 0.02) !important;
    margin-bottom: 11.9px; 
    transition: box-shadow 0.2s ease; }
.ch-wrapper.js-channel-row { background: #ffffff !important;
    margin-bottom: 0 !important;            
    border-radius: 0 !important;            
    border: 1.2px solid var(--border) !important;
    border-top: none !important; }
.ch-wrapper:last-child { margin-bottom: 0; }
.ch-wrapper.verified { border-left: 2.4px solid #35ea3d !important; background: rgba(16, 185, 129, 0.01); }
.ch-wrapper.unverified { border-left: 2.4px solid #cbd5e1 !important; background: transparent; }
.ch-wrapper.is-open { border:1.2px solid #ffffff40 !important;
    border-radius: 10.7px !important;
    margin-bottom: 8.3px !important;
    box-shadow: 0 11.9px 29.8px -5.9px rgba(15, 23, 42, 0.04), 0 4.8px 14.3px -2.4px rgba(15, 23, 42, 0.02) !important;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.ch-wrapper.is-open:hover { transform: translateY(-4.8px) !important;
    box-shadow: 0 19px 40.5px -7.1px rgba(15, 23, 42, 0.16), 0 7.1px 21.4px -2.4px rgba(15, 23, 42, 0.08) !important; }
.ch-no-price-panel { grid-column: span 2 !important;
    background: #f1f5f9 !important;
    border: 1.2px solid #cbd5e1 !important;
    color: #64748b !important;
    font-size: 13.1px !important;
    font-weight: 600 !important;
    padding: 4.8px 11.9px !important;
    border-radius: 7.1px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    height: 28.6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 166.6px !important;
    margin: 0 auto !important; }
.tbl-head.grid-all { border-radius: 16.7px 16.7px 0 0 !important; overflow: hidden; }
.grid-all { display: grid; grid-template-columns:13.1px 1.5fr 55.9px 90.4px 91.6px 76.2px 52.4px 154.7px 63.1px 80.9px 84.5px; align-items: center; padding: 14.3px 2.4px; gap: 7.1px; }
.tbl-head.grid-all { gap: 11.9px; }
.sort-arrow.active { font-size: 14.3px; }
/* Отдельный (меньший) гэп для обычных строк таблицы */
.channels-list .ch-row.grid-all,
.channels-list-2 .ch-row.grid-all { gap: 3.6px; }
/* Чтобы каждую надпись в шапке можно было двигать индивидуально — 
   даём каждому span позицию relative и свой класс-модификатор */
.tbl-head.grid-all > span { position: relative; }
/* Примеры точечной подвижки — меняй значения под себя */
.tbl-head.grid-all > span:nth-child(1) { transform: translateX(11.9px); }
/* номер */
.tbl-head.grid-all > span:nth-child(2) { transform: translateX(11.9px); }
/* Название */
.tbl-head.grid-all > span:nth-child(3) { transform: translateX(69px); }
/* Рейтинг */
.tbl-head.grid-all > span:nth-child(4) { transform: translateX(69px); }
/* Подписчики */
.tbl-head.grid-all > span:nth-child(5) { transform: translateX(59.5px); }
/* Охват */
.tbl-head.grid-all > span:nth-child(6) { transform: translateX(47.6px); }
/* ERR */
.tbl-head.grid-all > span:nth-child(7) { transform: translateX(35.7px); }
/* ИВ */
.tbl-head.grid-all > span:nth-child(8) { transform: translateX(20.2px); }
/* категория */
.tbl-head.grid-all > span:nth-child(9) { transform: translateX(17.8px); }
/* Цена от */
.tbl-head.grid-all > span:nth-child(10) { transform: translateX(11.9px); }
/* CPM */
.tbl-head.grid-all > span:nth-child(11) { transform: translateX(-17.8px); }
.grid-all > div, .grid-my > div { display: flex; justify-content: center; align-items: center; }
.grid-all > div.ch-meta, .grid-my > div.ch-meta { justify-content: flex-start; min-width: 0; width: 100%; }
.grid-all > div.btn-write-wrap { justify-content: flex-end; }
.ch-row { cursor: pointer; user-select: none; background:#fffffff7 !important; font-size: 13.1px !important; padding: 7.1px 3.6px 8.3px 7.1px !important; align-items: center !important; }
.ch-row td, .ch-row > div { padding: 2.4px 4.8px !important; font-size: 10.7px !important; text-align: left !important; }
.ch-row td:first-child, .ch-row > div:first-child { padding-left: 4.8px !important; max-width: 35.7px !important; text-align: center !important; font-weight: 700; color: #94a3b8; }
.ch-row .ch-title { font-size: 12.9px !important; margin-top:2.4px; font-weight: 600 !important; color: #0f172a !important; line-height: 1.2 !important; }
.ch-row .ch-user { font-size: 10.7px !important; color:#0ac81a !important; }
/* устаревшее правило смещения удалено — теперь стили на .tbl-verified-label */
.ch-num { font-size: 14.3px; color: #94a3b8; font-weight: 600; text-align: center; }
.ch-meta { display: flex; align-items: center; gap: 7.1px; min-width: 0; width: 100%; }
.ch-title { font-size: 14.9px; font-weight: 600; color: #0f172a; }
.btn-fav { display: inline-flex; align-items: center; background: transparent; border: none; color: #cbd5e1; cursor: pointer; padding: 2.4px; text-decoration: none; transition: all 0.15s; }
.btn-fav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; transform: translateY(4.8px); }
.btn-fav:hover { color: #eab308; transform: scale(1.1); }
.btn-fav.active { color: #eab308; }
.btn-fav.active svg { fill: #eab308; }
.ch-user { font-size: 13.7px; color: #0099ff; text-decoration: none; font-weight: 500; }
.ch-user:hover { text-decoration: underline; }
.ch-subs { font-size: 13.7px; font-weight: 600; color: #0f172a; }
/* Категория под @username в карточках-плашках — видна только на телефоне,
   на ПК категория и так есть в отдельной колонке таблицы */
.ch-cat-mobile-only { display: none; }
.ch-badge { font-size: 9.8px; color: #334155; background: #ffffff; padding: 3.6px 9.5px 3.6px 3.6px; border-radius: 23.8px; display: inline-flex; align-items: center; gap: 5.9px; width: max-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 232px; font-weight: 600; min-width: 0; border: 1.2px solid #e8ecf3; box-shadow: 0 1.2px 3.6px rgba(15,23,42,0.05); }
.ch-badge-label { overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto; }
.ch-cpm-badge { display: inline-flex; align-items: center; justify-content: center;
    background:#f8fafcad;
    color: #48556a; font-weight: 700; font-size: 10.5px; padding: 2.4px 5.9px;
    border-radius: 7.1px;
    white-space: nowrap; letter-spacing: 0.2px;
    border:1.2px solid #f1f5f9; }
/* Выравнивание отдельной звездочки в таблице */
.ch-row svg[class*="star"],
.ch-row .star,
.ch-row .fa-star { display: inline-flex !important;
    align-self: center !important;
    vertical-align: middle !important;
    transform: translateY(1.2px) !important; /* Опускаем на 1.2px вровень с чипом */ }
/* === "Мои каналы" — оставляем как было === */
.ch-row.grid-my .avatar-wrap { width: 53.5px !important;
    height: 53.5px !important;
    max-width: 53.5px !important;
    max-height: 53.5px !important;
    min-width: 53.5px !important;
    min-height: 53.5px !important; }
.ch-row.grid-my .ch-title { font-size: 12.9px !important; }
/* === "Главная" / "Сохранённые" (grid-all) — отдельные, свои размеры === */
.ch-row.grid-all .avatar-wrap { width: 53.5px !important;
    height: 53.5px !important;
    max-width: 53.5px !important;
    max-height: 53.5px !important;
    min-width: 53.5px !important;
    min-height: 53.5px !important; }
.ch-row.grid-all .avatar-badge { width: 17.8px !important;
    height: 17.8px !important; }
.ch-row.grid-all .ch-title { font-size: 11.3px !important; }
/* ===== RANK CHIP — UNIVERSAL FLAT EDITION ===== */
/* Увеличиваем вес селектора, чтобы перебить .ch-row > div */
.ch-row > div.rank-chip,
div.rank-chip { padding: 3.6px 4.2px !important; /* <--- ТЕПЕРЬ ЭТИ ПАДДИНГИ ТОЧНО ЗАРАБОТАЮТ! */
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    gap: 4.8px;
    border-radius: 5.9px;
    font-size: 11.9px; 
    font-weight: 700; 
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    margin: 0 auto;
    flex-shrink: 0;
    background: var(--rank-bg) !important;
    color: var(--rank-text) !important;
    border: 1.2px solid var(--rank-border);
    box-shadow: none !important; 
    cursor: default; }
.rank-chip-icon { width: 13.1px !important;  /* Сделали чуть крупнее (было 14.3px) */
    height: 13.1px !important;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0;
    color: var(--rank-icon); }
.rank-chip-icon-svg { width: 100%; 
    height: 100%; 
    display: block; }
.rank-chip-value { color: inherit; 
    display: inline-block; }
/* --- ПАЛИТРА ТИРОВ --- */

.rank-chip.rank-steel { --rank-bg: #f8fafc; 
    --rank-text: #64748b; 
    --rank-icon: #94a3b8; 
    --rank-border: #e2e8f0; }
.rank-chip.rank-silver { --rank-bg: #f0f9ff; 
    --rank-text: #0369a1; 
    --rank-icon: #38bdf8; 
    --rank-border: #bae6fd; }
.rank-chip.rank-gold { --rank-bg: #fffbeb; 
    --rank-text: #b45309; 
    --rank-icon: #fbbf24; 
    --rank-border: #fde68a; }
.rank-chip.rank-diamond { --rank-bg: linear-gradient(135deg, #22d3a8 0%, #5e9dff 50%, #a855f7 100%);
    --rank-text: #ffffff;
    --rank-icon: #ffffff;
    --rank-border: transparent; }
.btn-write { display: inline-flex; align-items: center; justify-content: center; gap: 1.2px; background: #ffffff; border: 1.2px solid #e2e8f0; color: #00bfa5; text-decoration: none; padding: 4.8px 7.1px; border-radius: 9.5px; font-size: 9.5px; font-weight: 600; transition: all 0.15s; box-shadow: 0 1.2px 3.6px rgba(0,0,0,0.02); }
.btn-write:hover { border-color: #00bfa5; background: #e6f9f6; }
.empty-category-results { display: none; padding: 47.6px; text-align: center; color: var(--muted); font-size: 15.5px; background: #fff; border: 1.2px dashed var(--border); border-radius: 16.7px; margin-top: 17.8px; }
/* --- СТИЛИ АВАТАРОК И ТАРИФОВ ИЗ КАТАЛОГА --- */
.avatar-wrap { position: relative !important; display: inline-flex !important; width: 53.5px !important; height:53.5px !important; flex-shrink: 0 !important; }
.avatar-wrap .ch-avatar { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; background: #ffffff !important; border: 2.4px solid #cbd5e1 !important; box-sizing: border-box !important; display: block !important; }
.avatar-wrap.verified .ch-avatar { border:3.6px solid #4cf667 !important; }
.avatar-wrap .avatar-badge { position: absolute !important; width: 15.5px !important; height: 15.5px !important; bottom: -2.4px !important; right: -2.4px !important; border: 2.4px solid #ffffff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; }
/* Дизайнерские бейджи тарифов */
.tariff-designer-badge { position: absolute; top: -7.1px; left: -7.1px; width: 23.8px; height: 23.8px; display: flex; align-items: center; justify-content: center; z-index: 10; filter: drop-shadow(0 2.4px 4.8px rgba(0,0,0,0.15)); }
/* Фоны строк для тарифов */
.ch-wrapper.js-channel-row.tariff-business-yellow { background: #fffdf5 !important; border-left: 2.4px solid #eab308 !important; }
.ch-wrapper.js-channel-row.tariff-business-yellow:hover { background: #fffbeb !important; }
.ch-wrapper.tariff-business-yellow .ch-title { color: #855306 !important; }
.ch-wrapper.js-channel-row.tariff-premium-purple { background: linear-gradient(90deg, #fbf7ff 0%, #ffffff 100%) !important; border-left: 2.4px solid #a855f7 !important; }
.ch-wrapper.js-channel-row.tariff-premium-purple:hover { background: linear-gradient(90deg, #f6edff 0%, #fbf7ff 100%) !important; }
.ch-wrapper.tariff-premium-purple .ch-title { color: #6b21a8 !important; }
/* ===== ПРИНУДИТЕЛЬНЫЙ ЗЕЛЁНЫЙ ФОН ДЛЯ ЗАКРЕПЛЁННЫХ (ТОП) КАНАЛОВ ===== */
/* 4 класса в селекторе — специфичность выше, чем у .tariff-business-yellow / .tariff-premium-purple (3 класса),
   поэтому зелёный фон закрепа побеждает всегда, независимо от тарифа владельца */
.ch-wrapper.js-channel-row.verified.js-top-ch-card { background: #e6f9f0 !important;
    border: 1.2px solid #a7f3d0 !important;
    border-left: 4.8px solid #10b981 !important;
    box-shadow: 0 4.8px 14.3px rgba(16, 185, 129, 0.08) !important; }
.ch-wrapper.js-channel-row.verified.js-top-ch-card .ch-title { color: #065f46 !important; }
.ch-wrapper.js-channel-row.verified.js-top-ch-card .ch-user { color: #06ca16 !important; }
.cat-check-chip.active { border-color: transparent; background: linear-gradient(90deg, rgba(20,165,255,0.08), rgba(24,210,168,0.08)); box-shadow: 0 3.6px 10.7px rgba(20, 165, 255, 0.1); }
/* ===== Иконки-плашки метрик (взято со страницы скидок) для "Мои каналы" ===== */
.gm-metric-icon { display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; border-radius: 5.9px; flex-shrink: 0; margin-right: 2.4px; }
.gm-metric-icon svg { width: 9.5px; height: 9.5px; }
.gm-icon-subs { background: rgba(0,153,255,0.12); color: var(--blue); }
.gm-icon-reach { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.gm-icon-iv { background: rgba(147,51,234,0.13); color: #9333ea; }
.gm-icon-cpm { background: rgb(129 242 178 / 92%); color: #0d9488; }
.gm-icon-cat { width: 19px; height: 19px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-right: 0;
    box-shadow: 0 1.8px 4.8px rgba(15,23,42,0.18); }
.gm-icon-cat svg { width: 11.3px; height: 11.3px; color: #fff; }
.gm-metric-row { display: inline-flex; align-items: center; }
/* Единый класс для значений в строке "Мои каналы" (Охват / ERR / Цена от) —
   раньше эти цифры были заданы через style="" и не подхватывали мобильные правки. */
.gm-cell-value { font-size: 13.7px; font-weight: 500; color: #334155;
    display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 2.4px; }
.gm-cell-value.gm-cell-price { font-size: 14.3px; font-weight: 700; color: #0f172a; }
/* ============================================================
   ОТДЕЛЬНЫЕ, НЕЗАВИСИМЫЕ КЛАССЫ ДЛЯ ВКЛАДКИ "СОХРАНЕННЫЕ"
   Специально НЕ используют .my-channels-header / .tbl-head.grid-all,
   чтобы правки каталога/"моих каналов" никогда не влияли на эту вкладку.
   ============================================================ */
.saved-page-header { background: var(--tg-cosmic-mesh), linear-gradient(316deg, #0a7db3 0%, #148762 35%, #0b2756 70%, #3316a3 100%);
    border-radius: 0 !important;
    padding: 15.5px 29.8px;
    margin-bottom: 5.9px;
    box-shadow: 0 1.2px 3.6px rgba(0,0,0,0.01);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 9.5px; }
.tbl-head.tbl-head-saved.grid-all { border-radius: 0 !important; }
.addch-loading.active { display: flex; }


/* Строка поиска на десктопе больше не переносится на новую строку.
   Категории при этом всегда должны начинаться с новой строки — это не трогаем. */


}