/* Вынесено из channel.php. Правьте здесь — страница подключает этот файл. */ *, *::before, *::after { box-sizing: border-box; } :root { --bg: #f4f6fa; --card: #ffffff; --sidebar-bg: #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); --red: #ef4444; /* --- премиальные токены редизайна --- */ --violet: #7c3aed; --gold: #d4af37; --ink: #0f172a; --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px -18px rgba(15,23,42,.20); --shadow-card-hover: 0 1px 2px rgba(15,23,42,.05), 0 18px 36px -18px rgba(15,23,42,.30); /* --- Цвета графиков (Chart.js) --- Каждый график может использовать от 1 до 3 цветов (стопов) градиента. Чтобы сделать градиент из 2-3 цветов — просто впишите значения в -2 / -3. Чтобы вернуть однотонную линию — оставьте -2 и -3 пустыми. */ --chart-subs-1: #4bfe61; --chart-subs-2: #6aefdc; --chart-subs-3: #8ae3c9; --chart-views-1: #f7d17b; --chart-views-2: #fbee4d; --chart-views-3: #f6b8b3; --chart-err-1:#2df50b; --chart-err-2: #61cd83; --chart-err-3: #61c598; --chart-cpm-1: #ff74b9; --chart-cpm-2: #fc990f; --chart-cpm-3: #e155aa; --chart-influence-1: #f4fc3c; --chart-influence-2: #11c8c3; --chart-influence-3: #9939f4; --chart-hourly-1: #efb8fe; --chart-hourly-2: #d574ff; --chart-hourly-3: #ab38f2; /* Диаграмма "пол аудитории" (doughnut) */ --chart-gender-male: #78e59f; --chart-gender-female: #feff58; --chart-gender-border: #ffffff; /* Общие настройки графиков */ --chart-fill-opacity: 0.08; --chart-tooltip-bg: #1e293b; --chart-tooltip-title: #ffffff; --chart-tooltip-body: #ffffff; --chart-grid: #f1f5f9; --chart-tick: #64748b; /* Ширина правого блока (рейтинг/лига/голосовалка) — SVG-паттерн шапки канала обрезается по этой границе */ --card-pattern-right-cut: 267px; } .font-display { font-family: 'Manrope', 'Inter', sans-serif; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } @keyframes ringSpin { to { transform: rotate(360deg); } } @keyframes sealShine { to { transform: rotate(360deg); } } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(34,224,139,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,224,139,0); } 100% { box-shadow: 0 0 0 0 rgba(34,224,139,0); } } @keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .channel-avatar-wrap.verified::before, .live-views-chip .lvc-dot, .reveal-in { animation: none !important; } } body { font-family: 'Inter', sans-serif; background: var(--bg); color: #1e293b; margin: 0; padding: 0; padding-top: 63px; font-size: 13px; -webkit-font-smoothing: antialiased; zoom: 1; } /* === СЕТКА СТРАНИЦЫ (шапка и сайдбар подключаются через include header.php / sidebar.php) === */ .layout { display: grid; grid-template-columns: var(--tgx-channel-1); min-height: calc(100vh - 65px); gap: 0; } .main { padding: 9px 5px; width: 100%; box-sizing: border-box; overflow-x: hidden; margin-top:-15px; position: relative; } .main::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 30% at 12% 0%, rgba(0,153,255,.09), transparent 60%), radial-gradient(45% 28% at 100% 8%, rgba(124,58,237,.08), transparent 60%), radial-gradient(38% 24% at 55% 100%, rgba(16,185,129,.06), transparent 60%), radial-gradient(28% 22% at 88% 62%, rgba(212,175,55,.06), transparent 65%), linear-gradient(160deg, rgba(0,153,255,.035) 0%, rgba(124,58,237,.035) 45%, rgba(212,175,55,.035) 100%); background-attachment: fixed; } /* Тонкая сетка-«биржевой график» поверх авроры */ .main::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: url('data:image/svg+xml;utf8,'); background-repeat: repeat; background-size: 290px 290px; mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 85%); -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 85%); } .reveal-in { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; } /* ——— ФИКС ГЛАВНОЙ АВАТАРКИ НА СТРАНИЦЕ КАНАЛА ——— */ .channel-avatar-wrap { position: relative !important; display: inline-flex !important; width: 93px !important; height: 93px !important; max-width: 93px !important; max-height: 93px !important; min-width: 93px !important; min-height: 93px !important; flex-shrink: 0 !important; } .channel-avatar-wrap .channel-avatar-big { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; border-radius: 50% !important; object-fit: cover !important; box-sizing: border-box !important; display: block !important; } .channel-avatar-wrap.unverified .channel-avatar-big { border-color: #cbd5e1 !important; } /* Вращающееся металлическое кольцо-halo вокруг подтвержденных аватарок */ /* Вращающееся металлическое кольцо-halo вокруг аватарок (зелёное для подтвержденных, серое для неподтвержденных) */ .channel-avatar-wrap.verified, .channel-avatar-wrap.unverified { position: relative !important; } .channel-avatar-wrap.verified::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; z-index: 0; background:conic-gradient(from 0deg, #37ffbd, #31ff2a 25%, #39ffbd 50%, #6ee7b7 75%, #6ef3ff 100%); animation: ringSpin 6s linear infinite; } .channel-avatar-wrap.unverified::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; z-index: 0; background:conic-gradient(from 0deg, #66f93e, #89f2ef 25%, #de9bf6 50%, #ffffff 75%, #1dec25 100%); animation: ringSpin 6s linear infinite; } .channel-avatar-wrap.verified .channel-avatar-big, .channel-avatar-wrap.unverified .channel-avatar-big { position: relative; z-index: 1; } .channel-avatar-wrap.verified .avatar-badge, .channel-avatar-wrap.unverified .avatar-badge { z-index: 4 !important; } .channel-avatar-wrap .avatar-badge { position: absolute !important; width: 21px !important; height: 21px !important; bottom: -3px !important; right: 3px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; } .channel-avatar-wrap.verified .avatar-badge { background-color: #52d93b !important; } .channel-avatar-wrap.unverified .avatar-badge { background-color:#19334beb !important;color:#ffffff; } .channel-avatar-wrap .avatar-badge svg { width: 8.5px !important; height: 8.5px !important; display: block !important; fill: none !important; stroke: #ffffff !important; stroke-width: 4.5 !important; } /* === СТИЛИ КАНАЛА === */ .page-header-actions { position: absolute; top: 13px; left: 14px; z-index: 5; display: flex; align-items: center; } .back-link { display: inline-flex; align-items: center; gap: 2.5px; color:#094741;padding:7px 30px 7px 20px;background:linear-gradient(86deg, rgb(255 255 255) 0%, rgb(255 255 255 / 34%) 100%); border-radius:6px; text-decoration: none; font-size: 11px; font-weight: 500; transition: color 0.2s; } .back-link svg { width: 13px; height: 13px; stroke-width: 2.5; } .back-link:hover { color: #5a6171;background:linear-gradient(86deg, rgb(255 255 255) 0%, rgb(231 249 255 / 34%) 100%); } .channel-main-card { background:linear-gradient(120deg, rgb(102 254 127) 0%, rgb(0 60 78) 45%, rgb(0 0 0) 100%); border-radius: 16px; padding: 15px 20px 15px 29px; border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 13px; margin-bottom: 3.5px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .channel-main-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(118deg, #55ff7d 0%, #286ca0 55%, #135619 100%); opacity: .85; } .channel-main-card::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: var(--card-pattern-right-cut); /* обрезаем паттерн до линии-разделителя перед блоком рейтинга */ pointer-events: none; z-index: 0; border-radius: inherit; background-image: radial-gradient(circle at 100% -20%, rgba(0,153,255,.10), transparent 55%), radial-gradient(circle at -5% 120%, rgba(124,58,237,.07), transparent 50%), url('data:image/svg+xml;utf8,'); background-repeat: no-repeat, no-repeat, repeat; background-position: right top, left bottom, 0 0; background-size: auto, auto, 230px 210px; mask-image: linear-gradient(115deg, transparent 0%, black 30%, black 75%, transparent 100%); -webkit-mask-image: linear-gradient(115deg, transparent 0%, black 30%, black 75%, transparent 100%); } .channel-header-left, .channel-header-right-voting, .live-views-chip { position: relative; z-index: 1; } /* --- Плашка счетчика уникальных просмотров страницы --- */ .live-views-chip { position: absolute; top: 24px; right: 278px; z-index: 5; display: inline-flex; align-items: center; gap: 6.5px; background: var(--ink); color: #fff; padding: 5.5px 11px 5.5px 9px; border-radius: 20px; font-size: 9.5px; font-weight: 700; box-shadow: 0 6px 16px rgba(15,23,42,0.25); } .live-views-chip .lvc-dot { width: 6px; height: 6px; border-radius: 50%; background: #22e08b; animation: pulseDot 1.8s infinite; flex-shrink: 0; } .live-views-chip svg { width: 11px; height: 11px; opacity: .8; flex-shrink: 0; } .live-views-chip .lvc-num { font-family: 'Manrope', sans-serif; font-weight: 800; } .live-views-chip .lvc-label { color: #94a3b8; font-weight: 600; } .channel-header-left { display: flex; align-items: center; gap: 16px; flex-grow: 1; margin-top:5px;margin-left:13px; } .channel-avatar-big { width: 53px; height: 53px; border-radius: 50%; object-fit: cover; background: #f1f5f9; } .channel-title-info h1 { margin-top: 0; font-size: 22px; font-weight: 700; color: #ffffff;margin-bottom:10px;} .channel-username-line { color:#2cffb8; text-decoration: none; font-size: 13px; font-weight: 500; display: inline-block; margin-right: 4.5px; margin-bottom: 3.5px; } .channel-username-line:hover { color:#47f76a; } .badge-container { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .cat-badge { display: inline-block; background:#d9ffe329; color: #ffffff; padding: 3.5px 10px; border-radius: 5px; font-size: 10.5px; font-weight: 600;border:1px solid rgba(255, 255, 255, 0.15) !important; } .verified-badge-inline { display: inline-flex; align-items: center; gap: 3.5px; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; padding: 3.2px 7.5px; border-radius: 7.5px; font-size: 10.5px; font-weight: 600; } .verified-badge-inline svg { width: 10px; height: 10px; color: #16a34a; } /* === ОТДЕЛЬНЫЕ КРАСИВЫЕ МИКРО-БЛОКИ ДАННЫХ === */ .modern-stats-row { display: flex; gap: 6.5px; margin-top: 10px; flex-wrap: wrap; } .modern-stat-box { background: #f8fafc2e; border: 1px solid #e8ecf300; padding: 5px 10px; border-radius: 9px; display: flex; flex-direction: column; gap: 1px; min-width: 53px; position: relative; overflow: hidden; transition: transform .18s ease, border-color .18s ease, background .18s ease; } .modern-stat-box:hover { transform: translateY(-2px); border-color: #e8ecf300; background: #c9cdd426; } .modern-stat-box::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #22ff8a, #22a6fc); opacity: 0; transition: opacity .18s ease; } .modern-stat-box:hover::after { opacity: .8; } .modern-stat-label { font-size: 11px; color: #ffffff; font-weight: 600; letter-spacing: 0.5px; text-align:center !important;} .modern-stat-num { font-size: 10px; font-weight: 600; font-family: 'Manrope', sans-serif; color: #ffffff; display: flex; align-items: center; font-variant-numeric: tabular-nums; } /* === УВЕЛИЧЕННЫЙ ПРАВЫЙ БЛОК РЕЙТИНГА И ГОЛОСОВАЛКИ === */ .channel-header-right-voting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 247px; padding-left: 17px; border-left:1px solid #839fcd; } .rating-medal-label { font-size: 15.5px; font-weight: 500; letter-spacing: .4px; color:rgb(255 255 255); margin-bottom: 8px; } .vote-cta-label { font-size: 10px; font-weight: 600; color: rgb(255 255 255 / 89%); margin-top: 2px; margin-bottom: 2px; } /* === МЕДАЛЬОН РЕЙТИНГА — КАРТИНКА (ОКРАШЕНА ПОД ЦВЕТ ЛИГИ ЧЕРЕЗ CSS MASK) + НОМЕР ПОВЕРХ === */ .rating-medal-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 80px; flex-shrink: 0; } .rating-medal-img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-mask-image: url('/uploads/rating.png'); mask-image: url('/uploads/rating.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background 0.25s ease; } .rating-medal-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #header-rating-val { font-size: 13px; font-weight: 800; font-family: 'Manrope', sans-serif; color: #ffffff; font-variant-numeric: tabular-nums; } .tier-status-badge { font-size: 13.5px; font-weight: 800; letter-spacing: 0.3px; margin-top: 1px; margin-bottom: 2px; transition: all 0.25s ease; font-family: 'Manrope', sans-serif; } .header-mini-voting { display: flex; flex-direction: column; gap: 5px; align-items: center; } .stars-row { display: flex; gap: 2.5px; align-items: center; } .vote-star-btn { align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: #cbd5e1; transition: all 0.15s ease; user-select: none; padding: 1.5px 6px; border-radius: 6px; background: #ffffff29; line-height: 1; } .vote-star-btn .star-num { font-size: 10px; font-weight: 700; margin-left: 1px; font-family: 'Inter', sans-serif; } .vote-star-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 3.5px rgba(0,0,0,0.05); } .vote-star-btn[data-value="-3"] { color: #ef4444; border-color: #fee2e2; } .vote-star-btn[data-value="-2"] { color: #f97316; border-color: #ffedd5; } .vote-star-btn[data-value="-1"] { color: #f59e0b; border-color: #fef3c7; } .vote-star-btn[data-value="1"] { color: #84cc16; border-color: #f0fdf4; } .vote-star-btn[data-value="2"] { color: #22c55e; border-color: #f0fdf4; } .vote-star-btn[data-value="3"] { color: #10b981; border-color: #ecfdf5; } .vote-star-btn.selected[data-value="-3"] { background: #ef4444; color: #fff; border-color: #ef4444; } .vote-star-btn.selected[data-value="-2"] { background: #f97316; color: #fff; border-color: #f97316; } .vote-star-btn.selected[data-value="-1"] { background: #f59e0b; color: #fff; border-color: #f59e0b; } .vote-star-btn.selected[data-value="1"] { background: #84cc16; color: #fff; border-color: #84cc16; } .vote-star-btn.selected[data-value="2"] { background: #22c55e; color: #fff; border-color: #22c55e; } .vote-star-btn.selected[data-value="3"] { background: #10b981; color: #fff; border-color: #10b981; } .vote-star-btn.locked { cursor: not-allowed; opacity: 0.55; } .btn-submit-vote-green { display: inline-flex; align-items: center; gap: 3.5px; background: #10f93f; color: #fff; border: none; padding: 4.5px 10px; border-radius: 4px; font-size: 10.5px; font-weight: 600; cursor: pointer; transition: background 0.15s; width: max-content; box-shadow: 0 2px 3.5px rgba(16,185,129,0.15); } .btn-submit-vote-green:hover { background: #26e864; } .vote-toast-success { display: inline-flex; align-items: center; color:#40ff87; background:#f0fdf417; border:1px solid #47b956; padding: 2.7px 12.5px; border-radius: 3.5px; font-size: 10px; font-weight: 600; width: max-content; white-space: nowrap; } .btn-revote-clean { background: #1b3a2538; border:1px solid #9aaee5; color: #fefefe; padding: 3.5px 9.5px; border-radius: 4px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.03);letter-spacing:0.4px; } .btn-revote-clean:hover { background: #ddffdb40; color: #ffffff; border-color:#86fc71b8; } /* Обёртки .rating-col-mobile / .vote-col-mobile нужны только для мобильной раскладки (см. медиа-запрос ниже). На ПК display:contents убирает их из потока полностью — верстка и порядок элементов остаются как были. */ .rating-col-mobile, .vote-col-mobile { display: contents; } /* Кнопка "Проголосовать" теперь всегда есть в разметке (не только после клика по звезде), но на ПК по умолчанию скрыта — показывается через класс .has-selection, который вешается на .vote-actions-area кликом по звезде. Поведение на ПК не меняется. На мобиле кнопка открыта всегда — см. медиа-запрос ниже. */ #btn-execute-vote { display: none; } .vote-actions-area.has-selection #btn-execute-vote { display: inline-flex; } /* === СЕТКА И СТРУКТУРА БЛОКОВ ПОСЛЕ КОРРЕКЦИИ === */ .channel-top-row-grid { display: grid; grid-template-columns: 1fr 232px 216px; gap: 4.5px; align-items: stretch; /* Выравнивает высоту всех 3-х блоков по одной струне */ margin-bottom: 4.5px; } .channel-top-row-grid .white-panel, .channel-bottom-row-grid > .white-panel { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; } .channel-top-row-grid .white-panel:nth-child(1) { animation-delay: .04s; } .channel-top-row-grid .white-panel:nth-child(2) { animation-delay: .09s; } .channel-top-row-grid .white-panel:nth-child(3) { animation-delay: .14s; } .channel-bottom-row-grid > .white-panel:nth-of-type(1) { animation-delay: .18s; } .channel-bottom-row-grid > .white-panel:nth-of-type(2) { animation-delay: .24s; } .channel-top-row-grid .white-panel { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; } /* ФИКС ОПИСАНИЯ: раньше текст обрезался на 6-й строке (справа при этом пустовало место) — теперь текст течёт в 2 колонки, используя ширину панели вместо того чтобы упираться в нижнюю границу. В той же высоте помещается примерно вдвое больше текста. */ .description-text-container { flex: 1; max-height: 140px; overflow: hidden; column-count: 1; column-gap: 38px; column-rule: 1px solid #f1f5f9; column-fill: auto; font-size:11px; margin-left:10px; color: #4a5568; line-height: 1.6; } .description-text-container.description-2col { column-count: 2; } .channel-bottom-row-grid { width: 100%; margin-bottom: 8.5px; } .white-panel { background: #ffffffe0; border-radius: 14px; padding:12px 17px; border: 1px solid var(--border); margin-bottom: 5.5px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; } .white-panel:hover { box-shadow: var(--shadow-card-hover); } .white-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background:linear-gradient(118deg, #55ff7d 0%, #5cebff 55%, #66ff67 100%); opacity: .7; z-index: 2; } /* Декоративный SVG-фон: чередуем самолётики / свечной график по типу карточки */ .white-panel::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: repeat; background-size: 290px 290px; mask-image: linear-gradient(135deg, black 0%, black 35%, transparent 80%); -webkit-mask-image: linear-gradient(135deg, black 0%, black 35%, transparent 80%); } .white-panel > * { position: relative; z-index: 1; } .panel-header { font-size: 13px; font-weight: 800; margin: 0 0 12px 0; padding-bottom: 8.5px; border-bottom: 1px solid #f1f5f9; color: #495a76; display: flex; align-items: center; gap: 7px; font-family: 'Manrope', sans-serif; } .panel-header::before { content: ""; width: 3px; height: 18px; border-radius: 3px; flex-shrink: 0; background: linear-gradient(180deg, #97ff84, #0ffdff); } .mention-sync-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #0d9488; background: rgba(13, 148, 136, 0.08); border: 1px solid rgba(13, 148, 136, 0.18); padding: 4px 10px; border-radius: 20px; white-space: nowrap; text-transform: none; } .mention-sync-badge svg { width: 11px; height: 11px; flex-shrink: 0; } .period-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8.5px; margin-bottom: 10px; } /* --- Карточка "подписчики + периоды" отделена от карточки "прирост по часам" --- */ .subs-combo-card { background:linear-gradient(135deg, #b7fcf826, #c7edff12); border: 1px solid var(--border); border-radius: 12px; padding: 9px 9px 9px 9px; } .hourly-stats-side-block { background: linear-gradient(135deg, #b7fcf826, #c7edff12); border: 1px solid var(--border); border-radius: 12px; padding: 10px 10px 0 10px; box-shadow: var(--shadow-card); } .period-card { background: linear-gradient(135deg, #14fdff08, #3effc529); border: 1px solid #e8ecf3; border-radius: 10px; padding: 10px; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; gap: 3.5px; } .period-card:hover { background: linear-gradient(135deg, rgb(108 228 251 / 9%), rgb(15 249 143 / 9%)); border-color: #3effb6; transform: translateY(-1px); } .period-card.active { background: linear-gradient(135deg, var(--blue-soft), rgba(124,58,237,.06)); border-color:#5dffa9; box-shadow: 0 0 0 1px #9bffbb; } /* --- Компактные плашки периода для остальных графиков (не подписчики) --- */ .mini-period-row { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; } .mini-period-chip { background: linear-gradient(135deg, #14fdff08, #3effc529); border: 1px solid #e8ecf3; border-radius: 7px; padding: 3.5px 8px; font-size: 9px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .mini-period-chip:hover { background: linear-gradient(135deg, rgb(108 228 251 / 9%), rgb(15 249 143 / 9%)); border-color: #3effb6; } .mini-period-chip.active { background: linear-gradient(135deg, var(--blue-soft), rgba(124,58,237,.06)); border-color:#5dffa9; box-shadow: 0 0 0 1px #9bffbb; color: var(--text); } .period-label { font-size: 11px; color: var(--muted); font-weight: 600; } .period-value { font-size: 12.5px; font-weight: 800; color: var(--text); font-family: 'Manrope', sans-serif; font-variant-numeric: tabular-nums; } .period-value.pos { color: #65e68e; } .period-value.neg { color: #ff8585; } .charts-container { display: flex; flex-direction: column; gap: 8px; } .chart-wrapper { position: relative; height: 216px; width: 100%; } .chart-title-sub { font-size: 10px; font-weight: 600; color:#4f5c6e; margin-bottom: 9.5px; text-transform: uppercase; letter-spacing: 0.3px; } .modern-stat-down{color: #f78b8b; font-size: 10px; font-weight: 700; margin-left: 5px; white-space: nowrap;} .modern-stat-up{color:#a7ff68; font-size: 10px; font-weight: 600; margin-left: 5px; white-space: nowrap;} .modern-stat-zero{ color: #e8eff9; font-size: 10px; font-weight: 500; margin-left: 5px; white-space: nowrap;} /* ПОЧАСОВАЯ СТАТИСТИКА */ .chart-and-hourly-wrapper { display: flex; gap: 7px; align-items: stretch; } /* Почасовка имеет строго фиксированную высоту и внутренний скрытый скроллбар */ .hourly-stats-container { background: transparent; border: none; border-radius: 0; display: flex; flex-direction: column; height: 100%; flex: 1; overflow: hidden; padding-bottom:10px; } .hourly-controls { display: flex; gap: 3.5px; padding: 6.5px 8.5px 11px 8.5px; border-bottom: 1px solid var(--border); background: transparent; flex-wrap: wrap; justify-content: space-between; } .hourly-btn { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 3.5px 6.5px; font-size: 8.5px; font-weight: 700; color: #475569; cursor: pointer; transition: 0.2s; flex: 1; text-align: center; } .hourly-btn.active { background: var(--ink); color: #ffffff; border-color: var(--ink); } .hourly-btn:hover:not(.active) { background: #f1f5f9; } .hourly-date-picker { width: 100%; margin-top: 4px; padding: 3.5px 6.5px; font-size: 8.5px; font-weight: 500; border: 1px solid #cbd5e1; border-radius: 5px; color: #475569; outline: none; box-sizing: border-box; font-family: 'Inter', sans-serif; cursor: pointer; } .hourly-list { flex: 1; overflow-y: auto; max-height: 230px; padding: 6px 0 0 0; background: transparent; } .hourly-list::-webkit-scrollbar { width: 3.5px; } .hourly-list::-webkit-scrollbar-track { background: transparent; } .hourly-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3.5px; } .hourly-item { display: flex; justify-content: space-between; align-items: center; padding: 2.5px 12px; border-bottom: 1px dashed #f1f5f9; font-size: 8.5px; transition: background 0.15s; } .hourly-item:hover { background: #f8fafc; } .hourly-item:last-child { border-bottom: none; } .hour-label { font-weight: 600; color: #64748b; } /* СЕТКА ДЛЯ НИЖНИХ СПАРЕННЫХ ГРАФИКОВ (50% на 50%) */ .bottom-charts-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } /* КРАСИВОЕ ЗАБЛОКИРОВАННОЕ ОКНО ДЛЯ CPM ГРАФИКА */ .locked-chart-placeholder { height: 216px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 20px; text-align: center; box-sizing: border-box; } .locked-chart-placeholder .lock-icon { font-size: 22px; margin-bottom: 6.5px; line-height: 1; } .locked-chart-placeholder .lock-title { font-size: 11px; font-weight: 700; color: #1e293b; margin-bottom: 3.5px; } .locked-chart-placeholder .lock-text { font-size: 9px; color: #64748b; max-width: 232px; line-height: 1.4; font-weight: 500; } /* === 🔥 СТИЛИ ДЛЯ SEO БЛОКИРОВКИ / BLUR PAYWALL === */ .seo-lock-container { position: relative; overflow: hidden; } .seo-blur-box { filter: blur(4px); pointer-events: none; user-select: none; } .seo-lock-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.82); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 99; text-align: center; padding: 17px; } .seo-lock-btn { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff; text-decoration: none; padding: 6.5px 17px; border-radius: 6.5px; font-size: 10px; font-weight: 600; margin-top: 8.5px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 3.5px 10px rgba(14, 165, 233, 0.25); transition: 0.2s; cursor: pointer; } .seo-lock-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgba(14, 165, 233, 0.4); color:#fff; } .price-list-rows { display: flex; flex-direction: column; gap: 5px; } .price-row { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 6.5px; padding: 8.5px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; } .price-label { font-weight: 500; color: var(--muted); } .price-value { font-weight: 700; color: var(--text); } .btn-contact-admin { display: block; width: 100%; text-align: center; background:linear-gradient(135deg, #8dff9f, #003d3d); color: #fff; text-decoration: none; padding: 10px; border-radius: 9px; font-weight: 700; font-size: 11px; margin-top: 12px; transition: transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer; box-shadow: 0 8px 18px rgba(0,153,255,.22); } .btn-contact-admin:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,153,255,.3); } /* === ТАБЛИЦА УПОМИНАНИЙ === */ .mentions-table-container { width: 100%; overflow-x: auto; margin-top: 8.5px; background: #fff; border: 1px solid var(--border); border-radius: 12px; } .mentions-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 10px; min-width: 498px; } .mentions-table th { background: #f8fafc; padding: 10px 13px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); text-transform: uppercase; font-size: 8.5px; letter-spacing: .4px; } .mentions-table td { padding: 9.5px 13px; border-bottom: 1px solid #f8fafc; vertical-align: middle; font-variant-numeric: tabular-nums; } .mentions-table tbody tr { transition: background .15s ease; } .mentions-table tbody tr:hover { background: #f9fbff; } .mentions-table tr:last-child td { border-bottom: none; } .donor-cell-info { display: flex; align-items: center; gap: 8.5px; } .donor-avatar-img { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--border); } .mention-badge-type { display: inline-block; padding: 3px 7.5px; border-radius: 6px; font-size: 8.5px; font-weight: 700; } .mention-badge-type.m-repost { background: rgba(124, 58, 237, 0.09); color: var(--violet); } .mention-badge-type.m-mention { background: var(--blue-soft); color: var(--blue); } .btn-tg-link { color: var(--blue); text-decoration: none; font-weight: 700; } .btn-tg-link:hover { text-decoration: underline; } /* Короткие подписи для узких экранов (см. мобильный брейкпоинт ниже) — на десктопе показываем только полный текст. */ .th-short { display: none; } .th-full { display: inline; } /* Модальное окно авторизации */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(3.5px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-card { background: #ffffff; border-radius: 13px; padding: 29px; width: 100%; max-width: 398px; position: relative; box-shadow: 0 21px 42px -10px rgba(0, 0, 0, 0.25); transform: translateY(-17px); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: center; } .modal-overlay.active .modal-card { transform: translateY(0); } .modal-close { position: absolute; top: 13px; right: 13px; width: 23px; height: 23px; border-radius: 50%; background: #f1f5f9; border: none; color: #64748b; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .modal-close:hover { background: #e2e8f0; color: #0f172a; } .modal-title { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 10px; } .modal-text { font-size: 11px; color: #64748b; line-height: 1.5; margin-bottom: 20px; } .btn-tg-modal { display: inline-flex; align-items: center; justify-content: center; background: #00a8e8; color: #ffffff; text-decoration: none; padding: 9px 20px; border-radius: 8.5px; font-size: 11px; font-weight: 600; transition: background 0.15s; width: 100%; box-shadow: 0 3.5px 10px rgba(0, 168, 232, 0.2); } .btn-tg-modal:hover { background: #0093cc; } /* === 🔥 ЖЕЛЕЗНЫЙ ВЫРАВНЕННЫЙ МОБИЛЬНЫЙ МАСШТАБ (КОМП-СТИЛЬ) === */ @media (max-width: 992px) { body { padding-top: 65px !important; } /* Сетка адаптивно подстраивается под сайдбар */ .layout { display: grid !important; grid-template-columns: var(--tgx-channel-2) !important; min-height: calc(100vh - 65px) !important; } .main { padding: 10px !important; overflow-x: hidden; } .live-views-chip { top: 11px !important; right: 11px !important; padding: 6px 9px 6px 8px !important; font-size: 8px !important; } .live-views-chip svg { width: 9px !important; height: 9px !important; } /* Счётчики в одну строку */ .modern-stats-row { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; width: 100% !important; } .modern-stat-box { min-width: 0 !important; padding: 4px 6px !important; border-radius: 6px !important; } .modern-stat-label { font-size: 8px !important; } .modern-stat-num { font-size: 11px !important; flex-wrap: wrap !important; } .channel-main-card { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 12px !important; } .channel-header-right-voting { border-left: 1px solid #f1f5f9 !important; border-top: none !important; padding-top: 0 !important; padding-left: 12px !important; min-width: 140px !important; } .channel-title-info h1 { font-size: 22px !important; } /* Три верхних блока в ряд */ .channel-top-row-grid { display: grid !important; grid-template-columns: 1.1fr 1fr 1fr !important; gap: 6px !important; width: 100% !important; } .channel-top-row-grid .white-panel { padding: 10px !important; border-radius: 8px !important; } .channel-top-row-grid .panel-header { font-size: 11px !important; margin-bottom: 8px !important; } .description-text-container { max-height: 110px !important; font-size: 10px !important; column-count: 1 !important; /* на узких экранах 2 колонки слишком узкие — возвращаем в одну */ display: -webkit-box !important; -webkit-line-clamp: 6 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } .price-row { padding: 6px 8px !important; font-size: 11px !important; } .btn-contact-admin { padding: 8px !important; font-size: 11px !important; margin-top: 5px !important; } /* Нижние спаренные графики в ряд */ .bottom-charts-split-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100% !important; } .chart-and-hourly-wrapper { display: flex !important; flex-direction: row !important; gap: 10px !important; align-items: stretch !important; } .hourly-stats-side-block { width: 180px !important; } .period-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 4px !important; } .period-card { padding: 6px !important; border-radius: 6px !important; } .period-label { font-size: 9px !important; } .period-value { font-size: 11px !important; } } /* === 🔥 НАСТОЯЩИЙ ТЕЛЕФОННЫЙ БРЕЙКПОИНТ === Блок выше (max-width: 992px) на самом деле рассчитан на планшет — на узких экранах телефона (350-400px) те же 3-колоночные и 2-колоночные сетки сжимаются до нечитаемых полосок. Здесь всё разворачиваем в один столбец. */ @media (max-width: 640px) { /* Убираем лишний воздух сверху страницы (не трогаем body padding-top — это высота фиксированной шапки из header.php, её лучше не менять здесь) */ .main { padding: 3px !important; margin-top: -29px !important; } .page-header-actions { position: static !important; padding:3px 5px 9px 6px!important; } .back-link { padding: 5px 20px 5px 16px !important; font-size: 10px !important; } .channel-main-card { flex-direction: column !important; align-items: stretch !important; padding: 6px 4px 15px !important; gap: 2px !important; } .verified-badge-inline {font-size:8px;} .subs-combo-card { border-radius: 5px; padding: 8px 3px 4px 4px; } .chart-title-sub {margin-left:5px; margin-bottom:7px;text-align:center !important;} .hourly-stats-side-block{border-radius: 5px; padding: 8px 3px 4px 4px;} .hourly-controls { padding:0px 3.5px 5px 3.5px !important;} .hourly-date-picker{margin-top:0px;} .period-label{ font-size: 8px !important; } .period-value { font-size: 8px !important; } .period-card{ padding:4px !important;} /* Аватарка стоит напротив названия/ссылки/категории (не всего блока целиком). Блок статистики (Подписчики/Охват/ERR/CPM/Индекс) — отдельной строкой на всю ширину под ними. Технически: .channel-title-info "раскрывается" (display:contents), и её дети расставляются по сетке .channel-header-left вручную. */ .channel-header-left { display: grid !important; grid-template-columns: 66px 1fr !important; column-gap: 10px !important; row-gap: 0px !important; align-items: start !important; padding: 0px 10px !important; } .channel-avatar-wrap { grid-column: 1 !important; grid-row: 1 / 4 !important; width: 66px !important; height: 66px !important; max-width: 66px !important; max-height: 66px !important; min-width: 66px !important; min-height: 66px !important; } .channel-avatar-big { width: 56px !important; height: 56px !important; } .channel-avatar-wrap .avatar-badge { width: 16px !important; height: 16px !important; bottom: -2px !important; right: 1px !important; } .channel-avatar-wrap .avatar-badge svg { width: 7px !important; height: 7px !important; } .channel-title-info { display: contents !important; } .channel-title-info h1 { grid-column: 2 !important; grid-row: 1 !important; } .channel-title-info .channel-username-line { grid-column: 2 !important; grid-row: 2 !important; } .channel-title-info .badge-container { grid-column: 2 !important; grid-row: 3 !important; } .channel-title-info .modern-stats-row { grid-column: 1 / -1 !important; grid-row: 4 !important; margin-top: 11px !important; } /* Блок "Это ваш канал?" (для неподтвержденных) — тоже на всю ширину, ниже статистики */ .channel-title-info > div[style*="0b0e1d8a"] { grid-column: 1 / -1 !important; grid-row: 5 !important; margin-top: 6px !important; } .channel-title-info h1 { font-size: 13px !important; margin-bottom: 0px !important; margin-top:8px;word-break: break-word !important; line-height: 1.2 !important; } .channel-username-line { font-size: 9.5px !important; margin-bottom: 2px !important; } .cat-badge { font-size: 9px !important; padding: 2.5px 7px !important; } /* Блок "Рейтинг канала" — на мобиле раскладываем в 2 колонки: слева медальон + лига, справа голосовалка, между ними вертикальная черта-разделитель (как на десктопе border-left между этим блоком и остальной шапкой). */ .channel-header-right-voting { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 3px !important; align-items: center !important; border-left: none !important; border-top: 1px solid #3bffb529 !important; padding-left: 0 !important; padding-top: 10px !important; margin-top: 8px !important; min-width: 0 !important; width: 100% !important; position: relative !important; } .channel-header-right-voting::before { content: "" !important; position: absolute !important; top: 14px !important; bottom: 4px !important; left: 50% !important; width: 1px !important; background:#1f465199 !important; } /* Левая и правая половины теперь — два самостоятельных grid-item'а (по одному на весь ряд каждый), а не 5 отдельных элементов, делящих общие grid-row между собой. Поэтому отступ, который сдвигает вниз звёзды в правой колонке, не тянет за собой медальон рейтинга слева — колонки полностью независимы по высоте. */ .rating-col-mobile { display: flex !important; flex-direction: column !important; align-items: center !important; grid-column: 1 !important; grid-row: 1 !important; } .vote-col-mobile { display: flex !important; flex-direction: column !important; align-items: center !important; grid-column: 2 !important; grid-row: 1 !important; } .rating-medal-label { text-align: center !important; } .tier-status-badge { text-align: center !important; } .vote-cta-label { text-align: center !important; padding: 3px 6px !important; } /* Подписчики + Охват — 2 в ряду сверху (по половине ширины каждый); ERR/CPM/Индекс Влияния — 3 в ряду снизу, но "Индекс Влияния" — шире (текст длиннее), а ERR и CPM — уже. Технически: сетка на 8 колонок; ERR и CPM занимают по 2 колонки (по 25% каждый), Индекс Влияния — 4 колонки (50%), при этом всё помещается в одну строку без переносов. */ .modern-stats-row { display: grid !important; grid-template-columns: repeat(8, 1fr) !important; margin-top: 6px !important; gap: 4px !important; } .modern-stat-box:nth-child(1), .modern-stat-box:nth-child(2) { grid-column: span 4 !important; } .modern-stat-box:nth-child(3), .modern-stat-box:nth-child(4) { grid-column: span 2 !important; } .modern-stat-box:nth-child(5) { grid-column: span 4 !important; } /* Текст внутри блоков — по центру (и метка, и само значение) */ .modern-stat-box { align-items: center !important; text-align: center !important; } .modern-stat-label { text-align: center !important; width: 100%; } .modern-stat-num { justify-content: center !important; width: 100%; } .btn-claim-ownership { margin-left: 0 !important; margin-top: 6px !important; } /* Три верхних блока — было в ряд по 3, теперь описание сверху на всю ширину, а "Тарифы" и "Гендерный состав" — рядом друг с другом в 2 колонки */ .channel-top-row-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-areas: "desc desc" "price gender" !important; gap: 6px !important; } .channel-top-row-grid > div:nth-of-type(1) { grid-area: desc !important; } .channel-top-row-grid > div:nth-of-type(2) { grid-area: price !important; } .channel-top-row-grid > div:nth-of-type(3) { grid-area: gender !important; } .channel-top-row-grid .white-panel { padding: 8px 6px !important; } .channel-top-row-grid .panel-header { font-size: 10.5px !important; margin-bottom: 6px !important;padding:2px; } /* Описание площадки: раньше обрезалось снизу (line-clamp) при пустом месте справа — теперь одна колонка, текст течёт полностью, без обрезания, как в ПК-версии по смыслу */ .description-text-container { max-height: none !important; overflow: visible !important; display: block !important; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; text-overflow: clip !important; column-count: 1 !important; font-size: 11px !important; line-height: 1.45 !important; padding:3px 15px; } .price-row { padding: 5px 6px !important; font-size: 9.5px !important; flex-wrap: wrap !important; gap: 2px !important; } .price-label { font-size: 7.5px !important; } .price-value { font-size: 8px !important; } .btn-contact-admin { padding: 6px !important; font-size: 9px !important; margin-top: 4px !important; } /* Диаграмма "пол аудитории" — сжимаем под половину ширины карточки */ .gender-chart-canvas { height: 65px !important; } .gender-legend-row { padding-top: 4px !important; } .gender-legend-row span { font-size: 8px !important; } /* Почасовой график + карточка периодов — было бок о бок, теперь друг под другом */ .chart-and-hourly-wrapper { flex-direction: column !important; } .hourly-stats-side-block { width: 100% !important; } .period-grid { grid-template-columns: repeat(5, 1fr) !important; } /* Нижние спаренные графики — было по 2 в ряд, теперь по одному */ .bottom-charts-split-grid { grid-template-columns: 1fr !important; } .chart-wrapper { height: 180px !important; } /* Общее уплотнение остальной части страницы: панели, заголовки, медальон рейтинга, блок голосования, статы, таблица упоминаний — везде поменьше шрифт/отступы */ .white-panel { padding: 10px 5px !important; border-radius: 10px !important; margin-bottom: 6px !important; } .panel-header { font-size: 11px !important; margin: 0 0 8px 0 !important; padding-bottom: 6px !important; flex-wrap: wrap !important; row-gap: 6px !important; } .panel-header::before { height: 14px !important; } .mention-sync-badge { font-size: 9px !important; padding: 3px 8px !important; margin-left: 0 !important; } .modern-stat-box { padding: 5px 7px !important; border-radius: 6px !important; } .modern-stat-label { font-size: 8.5px !important; } .modern-stat-num { font-size: 9px !important; } .modern-stat-down{color: #f78b8b; font-size: 9px; font-weight: 700; margin-left: 5px; white-space: nowrap;} .modern-stat-up{color:#a7ff68; font-size: 9px; font-weight: 600; margin-left: 5px; white-space: nowrap;} .modern-stat-zero{ color: #e8eff9; font-size: 9px; font-weight: 500; margin-left: 5px; white-space: nowrap;} .rating-medal-label { font-size: 10.5px !important; margin-bottom: 8px !important; } .rating-medal-wrap { width: 86px !important; height: 66px !important; } #header-rating-val { font-size: 10.5px !important; } .tier-status-badge { font-size: 10px !important;margin-top:8px; } .vote-cta-label { font-size: 9px !important; } /* Правая колонка (голосовалка) сжата в свои 50% ширины: звёзды мельче и переносятся при нехватке места. margin-top здесь — это тот самый отступ "текст и звёздочки пониже", он висит на .header-mini-voting (сами звёзды+кнопки), а не на подписи "Проголосуйте за канал:", и не задевает левую колонку рейтинга благодаря .rating-col-mobile/.vote-col-mobile выше. */ .header-mini-voting { gap: 6px !important; min-width: 0 !important; width: 100% !important; margin-top: 4px !important; } .stars-row { flex-wrap: wrap !important; justify-content: center !important; gap: 1.5px !important; } .vote-star-btn { font-size: 9.5px !important; padding: 3px 3px !important; } .vote-star-btn .star-num { font-size: 7px !important; } /* "Голос учтен" и "Переголосовать" — теперь в ряд, а не друг под другом. Шрифт/паддинги немного уменьшены, чтобы оба помещались рядом в узкой половине карточки. */ .vote-actions-area { flex-direction: row !important; flex-wrap: wrap !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; justify-content: center !important; } .btn-submit-vote-green, .vote-toast-success { font-size: 9px !important; padding: 3px 9px !important;margin-top:4px; white-space: nowrap !important; width: max-content !important; max-width: 100% !important; } .btn-revote-clean{ font-size: 8px !important; padding: 4px 10px !important; white-space: nowrap !important; width: max-content !important; max-width: 100% !important;} /* Кнопка "Проголосовать" на мобиле активна сразу при загрузке, ещё до выбора звезды (на ПК её поведение не меняется — она по-прежнему появляется только после выбора оценки). */ #btn-execute-vote { display: inline-flex !important; } .mentions-table-container{ border-radius:6px; border:1px solid #e8ecf378;} .mentions-table { font-size: 7px !important; min-width: 0 !important; width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; } .mentions-table th, .mentions-table td { padding: 5px 3px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mentions-table th { font-size: 7px !important; } /* Переключаемся на короткие подписи заголовков/значений — освобождает место для самого важного столбца (название канала-донора) */ .th-short { display: inline !important; } .th-full { display: none !important; } /* Явные ширины колонок вместо равномерного деления — раньше короткие по контенту столбцы ("Тип", "Балл") получали столько же места, сколько длинное название канала, и оно обрезалось */ .mentions-table th:nth-child(1), .mentions-table td:nth-child(1) { width: 35% !important; } .mentions-table th:nth-child(2), .mentions-table td:nth-child(2) { width: 9% !important; text-align: center !important; } .mentions-table th:nth-child(3), .mentions-table td:nth-child(3) { width: 17% !important; } .mentions-table th:nth-child(4), .mentions-table td:nth-child(4) { width: 15% !important; } .mentions-table th:nth-child(5), .mentions-table td:nth-child(5) { width: 13% !important; } .mentions-table th:nth-child(6), .mentions-table td:nth-child(6) { width: 10% !important; text-align: center !important; } .donor-avatar-img { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; } .donor-cell-info { gap: 4px !important; min-width: 0 !important; } .donor-title-text { font-size: 7.5px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donor-username-text { font-size: 6.5px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Бейдж типа: раньше "Упом."/"Реп." всё равно обрезался в узкой колонке — уменьшаем шрифт вместо обрезания, чтобы текст был виден целиком */ .mention-badge-type { padding: 1.5px 2px !important; font-size: 6px !important; display: block !important; text-align: center !important; white-space: nowrap; overflow: visible !important; } .period-grid { gap: 4px !important; margin-bottom: 6px !important; } } /* ===== ФИКСИРОВАННОЕ увеличение +19% для всех десктопных экранов (993px+), БЕЗ vw/clamp/тиров ===== */ @media (min-width: 993px) { *, *::before, *::after { box-sizing: border-box; } :root { --bg: #f4f6fa; --card: #ffffff; --sidebar-bg: #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); --red: #ef4444; /* --- премиальные токены редизайна --- */ --violet: #7c3aed; --gold: #d4af37; --ink: #0f172a; --shadow-card: 0 1.2px 2.4px rgba(15,23,42,.04), 0 11.9px 30.9px -21.4px rgba(15,23,42,.20); --shadow-card-hover: 0 1.2px 2.4px rgba(15,23,42,.05), 0 21.4px 42.8px -21.4px rgba(15,23,42,.30); /* --- Цвета графиков (Chart.js) --- Каждый график может использовать от 1 до 3 цветов (стопов) градиента. Чтобы сделать градиент из 2-3 цветов — просто впишите значения в -2 / -3. Чтобы вернуть однотонную линию — оставьте -2 и -3 пустыми. */ --chart-subs-1: #4bfe61; --chart-subs-2: #6aefdc; --chart-subs-3: #8ae3c9; --chart-views-1: #f7d17b; --chart-views-2: #fbee4d; --chart-views-3: #f6b8b3; --chart-err-1:#2df50b; --chart-err-2: #61cd83; --chart-err-3: #61c598; --chart-cpm-1: #ff74b9; --chart-cpm-2: #fc990f; --chart-cpm-3: #e155aa; --chart-influence-1: #f4fc3c; --chart-influence-2: #11c8c3; --chart-influence-3: #9939f4; --chart-hourly-1: #efb8fe; --chart-hourly-2: #d574ff; --chart-hourly-3: #ab38f2; /* Диаграмма "пол аудитории" (doughnut) */ --chart-gender-male: #78e59f; --chart-gender-female: #feff58; --chart-gender-border: #ffffff; /* Общие настройки графиков */ --chart-fill-opacity: 0.08; --chart-tooltip-bg: #1e293b; --chart-tooltip-title: #ffffff; --chart-tooltip-body: #ffffff; --chart-grid: #f1f5f9; --chart-tick: #64748b; /* Ширина правого блока (рейтинг/лига/голосовалка) — SVG-паттерн шапки канала обрезается по этой границе */ --card-pattern-right-cut: 317.7px; } .font-display { font-family: 'Manrope', 'Inter', sans-serif; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } @keyframes ringSpin { to { transform: rotate(360deg); } } @keyframes sealShine { to { transform: rotate(360deg); } } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(34,224,139,.55); } 70% { box-shadow: 0 0 0 8.3px rgba(34,224,139,0); } 100% { box-shadow: 0 0 0 0 rgba(34,224,139,0); } } @keyframes riseIn { from { opacity: 0; transform: translateY(9.5px); } to { opacity: 1; transform: translateY(0); } } body { font-family: 'Inter', sans-serif; background: var(--bg); color: #1e293b; margin: 0; padding: 0; padding-top: 75px; font-size: 15.5px; -webkit-font-smoothing: antialiased; zoom: 1; } /* === СЕТКА СТРАНИЦЫ (шапка и сайдбар подключаются через include header.php / sidebar.php) === */ .layout { display: grid; grid-template-columns: var(--tgx-channel-3); min-height: calc(100vh - 77.3px); gap: 0; } .main { padding: 10.7px 5.9px; width: 100%; box-sizing: border-box; overflow-x: hidden; margin-top:-17.8px; position: relative; } .main::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 30% at 12% 0%, rgba(0,153,255,.09), transparent 60%), radial-gradient(45% 28% at 100% 8%, rgba(124,58,237,.08), transparent 60%), radial-gradient(38% 24% at 55% 100%, rgba(16,185,129,.06), transparent 60%), radial-gradient(28% 22% at 88% 62%, rgba(212,175,55,.06), transparent 65%), linear-gradient(160deg, rgba(0,153,255,.035) 0%, rgba(124,58,237,.035) 45%, rgba(212,175,55,.035) 100%); background-attachment: fixed; } /* Тонкая сетка-«биржевой график» поверх авроры */ .main::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: url('data:image/svg+xml;utf8,'); background-repeat: repeat; background-size: 345.1px 345.1px; mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 85%); -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 85%); } .reveal-in { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; } /* ——— ФИКС ГЛАВНОЙ АВАТАРКИ НА СТРАНИЦЕ КАНАЛА ——— */ .channel-avatar-wrap { position: relative !important; display: inline-flex !important; width: 110.7px !important; height: 110.7px !important; max-width: 110.7px !important; max-height: 110.7px !important; min-width: 110.7px !important; min-height: 110.7px !important; flex-shrink: 0 !important; } .channel-avatar-wrap .channel-avatar-big { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; border-radius: 50% !important; object-fit: cover !important; box-sizing: border-box !important; display: block !important; } .channel-avatar-wrap.unverified .channel-avatar-big { border-color: #cbd5e1 !important; } /* Вращающееся металлическое кольцо-halo вокруг подтвержденных аватарок */ /* Вращающееся металлическое кольцо-halo вокруг аватарок (зелёное для подтвержденных, серое для неподтвержденных) */ .channel-avatar-wrap.verified, .channel-avatar-wrap.unverified { position: relative !important; } .channel-avatar-wrap.verified::before { content: ""; position: absolute; inset: -3.6px; border-radius: 50%; z-index: 0; background:conic-gradient(from 0deg, #37ffbd, #31ff2a 25%, #39ffbd 50%, #6ee7b7 75%, #6ef3ff 100%); animation: ringSpin 6s linear infinite; } .channel-avatar-wrap.unverified::before { content: ""; position: absolute; inset: -3.6px; border-radius: 50%; z-index: 0; background:conic-gradient(from 0deg, #66f93e, #89f2ef 25%, #de9bf6 50%, #ffffff 75%, #1dec25 100%); animation: ringSpin 6s linear infinite; } .channel-avatar-wrap.verified .channel-avatar-big, .channel-avatar-wrap.unverified .channel-avatar-big { position: relative; z-index: 1; } .channel-avatar-wrap.verified .avatar-badge, .channel-avatar-wrap.unverified .avatar-badge { z-index: 4 !important; } .channel-avatar-wrap .avatar-badge { position: absolute !important; width: 25px !important; height: 25px !important; bottom: -3.6px !important; right: 3.6px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 3 !important; } .channel-avatar-wrap.verified .avatar-badge { background-color: #52d93b !important; } .channel-avatar-wrap.unverified .avatar-badge { background-color:#19334beb !important;color:#ffffff; } .channel-avatar-wrap .avatar-badge svg { width: 10.1px !important; height: 10.1px !important; display: block !important; fill: none !important; stroke: #ffffff !important; stroke-width: 4.5 !important; } /* === СТИЛИ КАНАЛА === */ .page-header-actions { position: absolute; top: 15.5px; left: 16.7px; z-index: 5; display: flex; align-items: center; } .back-link { display: inline-flex; align-items: center; gap: 3px; color:#094741;padding:8.3px 35.7px 8.3px 23.8px;background:linear-gradient(86deg, rgb(255 255 255) 0%, rgb(255 255 255 / 34%) 100%); border-radius:7.1px; text-decoration: none; font-size: 13.1px; font-weight: 500; transition: color 0.2s; } .back-link svg { width: 15.5px; height: 15.5px; stroke-width: 2.5; } .back-link:hover { color: #5a6171;background:linear-gradient(86deg, rgb(255 255 255) 0%, rgb(231 249 255 / 34%) 100%); } .channel-main-card { background:linear-gradient(120deg, rgb(102 254 127) 0%, rgb(0 60 78) 45%, rgb(0 0 0) 100%); border-radius: 19px; padding: 17.8px 23.8px 17.8px 34.5px; border: 1.2px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 15.5px; margin-bottom: 4.2px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .channel-main-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.6px; background: linear-gradient(118deg, #55ff7d 0%, #286ca0 55%, #135619 100%); opacity: .85; } .channel-main-card::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: var(--card-pattern-right-cut); /* обрезаем паттерн до линии-разделителя перед блоком рейтинга */ pointer-events: none; z-index: 0; border-radius: inherit; background-image: radial-gradient(circle at 100% -20%, rgba(0,153,255,.10), transparent 55%), radial-gradient(circle at -5% 120%, rgba(124,58,237,.07), transparent 50%), url('data:image/svg+xml;utf8,'); background-repeat: no-repeat, no-repeat, repeat; background-position: right top, left bottom, 0 0; background-size: auto, auto, 273.7px 249.9px; mask-image: linear-gradient(115deg, transparent 0%, black 30%, black 75%, transparent 100%); -webkit-mask-image: linear-gradient(115deg, transparent 0%, black 30%, black 75%, transparent 100%); } .channel-header-left, .channel-header-right-voting, .live-views-chip { position: relative; z-index: 1; } /* --- Плашка счетчика уникальных просмотров страницы --- */ .live-views-chip { position: absolute; top: 28.6px; right: 330.8px; z-index: 5; display: inline-flex; align-items: center; gap: 7.7px; background: var(--ink); color: #fff; padding: 6.5px 13.1px 6.5px 10.7px; border-radius: 23.8px; font-size: 11.3px; font-weight: 700; box-shadow: 0 7.1px 19px rgba(15,23,42,0.25); } .live-views-chip .lvc-dot { width: 7.1px; height: 7.1px; border-radius: 50%; background: #22e08b; animation: pulseDot 1.8s infinite; flex-shrink: 0; } .live-views-chip svg { width: 13.1px; height: 13.1px; opacity: .8; flex-shrink: 0; } .live-views-chip .lvc-num { font-family: 'Manrope', sans-serif; font-weight: 800; } .live-views-chip .lvc-label { color: #94a3b8; font-weight: 600; } .channel-header-left { display: flex; align-items: center; gap: 19px; flex-grow: 1; margin-top:5.9px;margin-left:15.5px; } .channel-avatar-big { width: 63.1px; height: 63.1px; border-radius: 50%; object-fit: cover; background: #f1f5f9; } .channel-title-info h1 { margin-top: 0; font-size: 26.2px; font-weight: 700; color: #ffffff;margin-bottom:11.9px;} .channel-username-line { color:#2cffb8; text-decoration: none; font-size: 15.5px; font-weight: 500; display: inline-block; margin-right: 5.4px; margin-bottom: 4.2px; } .channel-username-line:hover { color:#47f76a; } .badge-container { display: flex; align-items: center; gap: 5.9px; flex-wrap: wrap; } .cat-badge { display: inline-block; background:#d9ffe329; color: #ffffff; padding: 4.2px 11.9px; border-radius: 5.9px; font-size: 12.5px; font-weight: 600;border:1.2px solid rgba(255, 255, 255, 0.15) !important; } .verified-badge-inline { display: inline-flex; align-items: center; gap: 4.2px; background: #f0fdf4; color: #166534; border: 1.2px solid #bbf7d0; padding: 3.8px 8.9px; border-radius: 8.9px; font-size: 12.5px; font-weight: 600; } .verified-badge-inline svg { width: 11.9px; height: 11.9px; color: #16a34a; } /* === ОТДЕЛЬНЫЕ КРАСИВЫЕ МИКРО-БЛОКИ ДАННЫХ === */ .modern-stats-row { display: flex; gap: 7.7px; margin-top: 11.9px; flex-wrap: wrap; } .modern-stat-box { background: #f8fafc2e; border: 1.2px solid #e8ecf300; padding: 5.9px 11.9px; border-radius: 10.7px; display: flex; flex-direction: column; gap: 1.2px; min-width: 63.1px; position: relative; overflow: hidden; transition: transform .18s ease, border-color .18s ease, background .18s ease; } .modern-stat-box:hover { transform: translateY(-2.4px); border-color: #e8ecf300; background: #c9cdd426; } .modern-stat-box::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.4px; background: linear-gradient(90deg, #22ff8a, #22a6fc); opacity: 0; transition: opacity .18s ease; } .modern-stat-box:hover::after { opacity: .8; } .modern-stat-label { font-size: 13.1px; color: #ffffff; font-weight: 600; letter-spacing: 0.6px; text-align:center !important;} .modern-stat-num { font-size: 11.9px; font-weight: 600; font-family: 'Manrope', sans-serif; color: #ffffff; display: flex; align-items: center; font-variant-numeric: tabular-nums; } /* === УВЕЛИЧЕННЫЙ ПРАВЫЙ БЛОК РЕЙТИНГА И ГОЛОСОВАЛКИ === */ .channel-header-right-voting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.6px; min-width: 293.9px; padding-left: 20.2px; border-left:1.2px solid #839fcd; } .rating-medal-label { font-size: 18.4px; font-weight: 500; letter-spacing: .4.8px; color:rgb(255 255 255); margin-bottom: 9.5px; } .vote-cta-label { font-size: 11.9px; font-weight: 600; color: rgb(255 255 255 / 89%); margin-top: 2.4px; margin-bottom: 2.4px; } /* === МЕДАЛЬОН РЕЙТИНГА — КАРТИНКА (ОКРАШЕНА ПОД ЦВЕТ ЛИГИ ЧЕРЕЗ CSS MASK) + НОМЕР ПОВЕРХ === */ .rating-medal-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 142.8px; height: 95.2px; flex-shrink: 0; } .rating-medal-img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-mask-image: url('/uploads/rating.png'); mask-image: url('/uploads/rating.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background 0.25s ease; } .rating-medal-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #header-rating-val { font-size: 15.5px; font-weight: 800; font-family: 'Manrope', sans-serif; color: #ffffff; font-variant-numeric: tabular-nums; } .tier-status-badge { font-size: 16.1px; font-weight: 800; letter-spacing: 0.4px; margin-top: 1.2px; margin-bottom: 2.4px; transition: all 0.25s ease; font-family: 'Manrope', sans-serif; } .header-mini-voting { display: flex; flex-direction: column; gap: 5.9px; align-items: center; } .stars-row { display: flex; gap: 3px; align-items: center; } .vote-star-btn { align-items: center; justify-content: center; cursor: pointer; font-size: 16.7px; color: #cbd5e1; transition: all 0.15s ease; user-select: none; padding: 1.8px 7.1px; border-radius: 7.1px; background: #ffffff29; line-height: 1; } .vote-star-btn .star-num { font-size: 11.9px; font-weight: 700; margin-left: 1.2px; font-family: 'Inter', sans-serif; } .vote-star-btn:hover { transform: translateY(-1.2px); box-shadow: 0 2.4px 4.2px rgba(0,0,0,0.05); } .vote-star-btn[data-value="-3"] { color: #ef4444; border-color: #fee2e2; } .vote-star-btn[data-value="-2"] { color: #f97316; border-color: #ffedd5; } .vote-star-btn[data-value="-1"] { color: #f59e0b; border-color: #fef3c7; } .vote-star-btn[data-value="1"] { color: #84cc16; border-color: #f0fdf4; } .vote-star-btn[data-value="2"] { color: #22c55e; border-color: #f0fdf4; } .vote-star-btn[data-value="3"] { color: #10b981; border-color: #ecfdf5; } .vote-star-btn.selected[data-value="-3"] { background: #ef4444; color: #fff; border-color: #ef4444; } .vote-star-btn.selected[data-value="-2"] { background: #f97316; color: #fff; border-color: #f97316; } .vote-star-btn.selected[data-value="-1"] { background: #f59e0b; color: #fff; border-color: #f59e0b; } .vote-star-btn.selected[data-value="1"] { background: #84cc16; color: #fff; border-color: #84cc16; } .vote-star-btn.selected[data-value="2"] { background: #22c55e; color: #fff; border-color: #22c55e; } .vote-star-btn.selected[data-value="3"] { background: #10b981; color: #fff; border-color: #10b981; } .vote-star-btn.locked { cursor: not-allowed; opacity: 0.55; } .btn-submit-vote-green { display: inline-flex; align-items: center; gap: 4.2px; background: #10f93f; color: #fff; border: none; padding: 5.4px 11.9px; border-radius: 4.8px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s; width: max-content; box-shadow: 0 2.4px 4.2px rgba(16,185,129,0.15); } .btn-submit-vote-green:hover { background: #26e864; } .vote-toast-success { display: inline-flex; align-items: center; color:#40ff87; background:#f0fdf417; border:1.2px solid #47b956; padding: 3.2px 14.9px; border-radius: 4.2px; font-size: 11.9px; font-weight: 600; width: max-content; white-space: nowrap; } .btn-revote-clean { background: #1b3a2538; border:1.2px solid #9aaee5; color: #fefefe; padding: 4.2px 11.3px; border-radius: 4.8px; font-size: 11.9px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1.2px 2.4px rgba(0,0,0,0.03);letter-spacing:0.5px; } .btn-revote-clean:hover { background: #ddffdb40; color: #ffffff; border-color:#86fc71b8; } /* Обёртки .rating-col-mobile / .vote-col-mobile нужны только для мобильной раскладки (см. медиа-запрос ниже). На ПК display:contents убирает их из потока полностью — верстка и порядок элементов остаются как были. */ .rating-col-mobile, .vote-col-mobile { display: contents; } /* Кнопка "Проголосовать" теперь всегда есть в разметке (не только после клика по звезде), но на ПК по умолчанию скрыта — показывается через класс .has-selection, который вешается на .vote-actions-area кликом по звезде. Поведение на ПК не меняется. На мобиле кнопка открыта всегда — см. медиа-запрос ниже. */ #btn-execute-vote { display: none; } .vote-actions-area.has-selection #btn-execute-vote { display: inline-flex; } /* === СЕТКА И СТРУКТУРА БЛОКОВ ПОСЛЕ КОРРЕКЦИИ === */ .channel-top-row-grid { display: grid; grid-template-columns: 1fr 276.1px 257px; gap: 5.4px; align-items: stretch; /* Выравнивает высоту всех 3-х блоков по одной струне */ margin-bottom: 5.4px; } .channel-top-row-grid .white-panel, .channel-bottom-row-grid > .white-panel { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; } .channel-top-row-grid .white-panel:nth-child(1) { animation-delay: .04s; } .channel-top-row-grid .white-panel:nth-child(2) { animation-delay: .09s; } .channel-top-row-grid .white-panel:nth-child(3) { animation-delay: .14s; } .channel-bottom-row-grid > .white-panel:nth-of-type(1) { animation-delay: .18s; } .channel-bottom-row-grid > .white-panel:nth-of-type(2) { animation-delay: .24s; } .channel-top-row-grid .white-panel { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; } /* ФИКС ОПИСАНИЯ: раньше текст обрезался на 6-й строке (справа при этом пустовало место) — теперь текст течёт в 2 колонки, используя ширину панели вместо того чтобы упираться в нижнюю границу. В той же высоте помещается примерно вдвое больше текста. */ .description-text-container { flex: 1; max-height: 166.6px; overflow: hidden; column-count: 1; column-gap: 45.2px; column-rule: 1.2px solid #f1f5f9; column-fill: auto; font-size:13.1px; margin-left:11.9px; color: #4a5568; line-height: 1.6; } .description-text-container.description-2col { column-count: 2; } .channel-bottom-row-grid { width: 100%; margin-bottom: 10.1px; } .white-panel { background: #ffffffe0; border-radius: 16.7px; padding:14.3px 20.2px; border: 1.2px solid var(--border); margin-bottom: 6.5px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; } .white-panel:hover { box-shadow: var(--shadow-card-hover); } .white-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.6px; background:linear-gradient(118deg, #55ff7d 0%, #5cebff 55%, #66ff67 100%); opacity: .7; z-index: 2; } /* Декоративный SVG-фон: чередуем самолётики / свечной график по типу карточки */ .white-panel::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: repeat; background-size: 345.1px 345.1px; mask-image: linear-gradient(135deg, black 0%, black 35%, transparent 80%); -webkit-mask-image: linear-gradient(135deg, black 0%, black 35%, transparent 80%); } .white-panel > * { position: relative; z-index: 1; } .panel-header { font-size: 15.5px; font-weight: 800; margin: 0 0 14.3px 0; padding-bottom: 10.1px; border-bottom: 1.2px solid #f1f5f9; color: #495a76; display: flex; align-items: center; gap: 8.3px; font-family: 'Manrope', sans-serif; } .panel-header::before { content: ""; width: 3.6px; height: 21.4px; border-radius: 3.6px; flex-shrink: 0; background: linear-gradient(180deg, #97ff84, #0ffdff); } .mention-sync-badge { display: inline-flex; align-items: center; gap: 5.9px; font-size: 12.5px; font-weight: 600; color: #0d9488; background: rgba(13, 148, 136, 0.08); border: 1.2px solid rgba(13, 148, 136, 0.18); padding: 4.8px 11.9px; border-radius: 23.8px; white-space: nowrap; text-transform: none; } .mention-sync-badge svg { width: 13.1px; height: 13.1px; flex-shrink: 0; } .period-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10.1px; margin-bottom: 11.9px; } /* --- Карточка "подписчики + периоды" отделена от карточки "прирост по часам" --- */ .subs-combo-card { background:linear-gradient(135deg, #b7fcf826, #c7edff12); border: 1.2px solid var(--border); border-radius: 14.3px; padding: 10.7px 10.7px 10.7px 10.7px; } .hourly-stats-side-block { background: linear-gradient(135deg, #b7fcf826, #c7edff12); border: 1.2px solid var(--border); border-radius: 14.3px; padding: 11.9px 11.9px 0 11.9px; box-shadow: var(--shadow-card); } .period-card { background: linear-gradient(135deg, #14fdff08, #3effc529); border: 1.2px solid #e8ecf3; border-radius: 11.9px; padding: 11.9px; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; gap: 4.2px; } .period-card:hover { background: linear-gradient(135deg, rgb(108 228 251 / 9%), rgb(15 249 143 / 9%)); border-color: #3effb6; transform: translateY(-1.2px); } .period-card.active { background: linear-gradient(135deg, var(--blue-soft), rgba(124,58,237,.06)); border-color:#5dffa9; box-shadow: 0 0 0 1.2px #9bffbb; } /* --- Компактные плашки периода для остальных графиков (не подписчики) --- */ .mini-period-row { display: flex; gap: 4.8px; margin-bottom: 9.5px; flex-wrap: wrap; } .mini-period-chip { background: linear-gradient(135deg, #14fdff08, #3effc529); border: 1.2px solid #e8ecf3; border-radius: 8.3px; padding: 4.2px 9.5px; font-size: 10.7px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .mini-period-chip:hover { background: linear-gradient(135deg, rgb(108 228 251 / 9%), rgb(15 249 143 / 9%)); border-color: #3effb6; } .mini-period-chip.active { background: linear-gradient(135deg, var(--blue-soft), rgba(124,58,237,.06)); border-color:#5dffa9; box-shadow: 0 0 0 1.2px #9bffbb; color: var(--text); } .period-label { font-size: 13.1px; color: var(--muted); font-weight: 600; } .period-value { font-size: 14.9px; font-weight: 800; color: var(--text); font-family: 'Manrope', sans-serif; font-variant-numeric: tabular-nums; } .period-value.pos { color: #65e68e; } .period-value.neg { color: #ff8585; } .charts-container { display: flex; flex-direction: column; gap: 9.5px; } .chart-wrapper { position: relative; height: 257px; width: 100%; } .chart-title-sub { font-size: 11.9px; font-weight: 600; color:#4f5c6e; margin-bottom: 11.3px; text-transform: uppercase; letter-spacing: 0.4px; } .modern-stat-down{color: #f78b8b; font-size: 11.9px; font-weight: 700; margin-left: 5.9px; white-space: nowrap;} .modern-stat-up{color:#a7ff68; font-size: 11.9px; font-weight: 600; margin-left: 5.9px; white-space: nowrap;} .modern-stat-zero{ color: #e8eff9; font-size: 11.9px; font-weight: 500; margin-left: 5.9px; white-space: nowrap;} /* ПОЧАСОВАЯ СТАТИСТИКА */ .chart-and-hourly-wrapper { display: flex; gap: 8.3px; align-items: stretch; } /* Почасовка имеет строго фиксированную высоту и внутренний скрытый скроллбар */ .hourly-stats-container { background: transparent; border: none; border-radius: 0; display: flex; flex-direction: column; height: 100%; flex: 1; overflow: hidden; padding-bottom:11.9px; } .hourly-controls { display: flex; gap: 4.2px; padding: 7.7px 10.1px 13.1px 10.1px; border-bottom: 1.2px solid var(--border); background: transparent; flex-wrap: wrap; justify-content: space-between; } .hourly-btn { background: #ffffff; border: 1.2px solid #cbd5e1; border-radius: 7.1px; padding: 4.2px 7.7px; font-size: 10.1px; font-weight: 700; color: #475569; cursor: pointer; transition: 0.2s; flex: 1; text-align: center; } .hourly-btn.active { background: var(--ink); color: #ffffff; border-color: var(--ink); } .hourly-btn:hover:not(.active) { background: #f1f5f9; } .hourly-date-picker { width: 100%; margin-top: 4.8px; padding: 4.2px 7.7px; font-size: 10.1px; font-weight: 500; border: 1.2px solid #cbd5e1; border-radius: 5.9px; color: #475569; outline: none; box-sizing: border-box; font-family: 'Inter', sans-serif; cursor: pointer; } .hourly-list { flex: 1; overflow-y: auto; max-height: 273.7px; padding: 7.1px 0 0 0; background: transparent; } .hourly-list::-webkit-scrollbar { width: 4.2px; } .hourly-list::-webkit-scrollbar-track { background: transparent; } .hourly-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4.2px; } .hourly-item { display: flex; justify-content: space-between; align-items: center; padding: 3px 14.3px; border-bottom: 1.2px dashed #f1f5f9; font-size: 10.1px; transition: background 0.15s; } .hourly-item:hover { background: #f8fafc; } .hourly-item:last-child { border-bottom: none; } .hour-label { font-weight: 600; color: #64748b; } /* СЕТКА ДЛЯ НИЖНИХ СПАРЕННЫХ ГРАФИКОВ (50% на 50%) */ .bottom-charts-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9.5px; width: 100%; } /* КРАСИВОЕ ЗАБЛОКИРОВАННОЕ ОКНО ДЛЯ CPM ГРАФИКА */ .locked-chart-placeholder { height: 257px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f8fafc; border: 1.2px dashed #cbd5e1; border-radius: 11.9px; padding: 23.8px; text-align: center; box-sizing: border-box; } .locked-chart-placeholder .lock-icon { font-size: 26.2px; margin-bottom: 7.7px; line-height: 1; } .locked-chart-placeholder .lock-title { font-size: 13.1px; font-weight: 700; color: #1e293b; margin-bottom: 4.2px; } .locked-chart-placeholder .lock-text { font-size: 10.7px; color: #64748b; max-width: 276.1px; line-height: 1.4; font-weight: 500; } /* === 🔥 СТИЛИ ДЛЯ SEO БЛОКИРОВКИ / BLUR PAYWALL === */ .seo-lock-container { position: relative; overflow: hidden; } .seo-blur-box { filter: blur(4.8px); pointer-events: none; user-select: none; } .seo-lock-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.82); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 99; text-align: center; padding: 20.2px; } .seo-lock-btn { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff; text-decoration: none; padding: 7.7px 20.2px; border-radius: 7.7px; font-size: 11.9px; font-weight: 600; margin-top: 10.1px; border: 1.2px solid rgba(255,255,255,0.1); box-shadow: 0 4.2px 11.9px rgba(14, 165, 233, 0.25); transition: 0.2s; cursor: pointer; } .seo-lock-btn:hover { transform: translateY(-1.2px); box-shadow: 0 5.9px 15.5px rgba(14, 165, 233, 0.4); color:#fff; } .price-list-rows { display: flex; flex-direction: column; gap: 5.9px; } .price-row { background: #f8fafc; border: 1.2px solid #f1f5f9; border-radius: 7.7px; padding: 10.1px 14.3px; display: flex; justify-content: space-between; align-items: center; font-size: 11.9px; } .price-label { font-weight: 500; color: var(--muted); } .price-value { font-weight: 700; color: var(--text); } .btn-contact-admin { display: block; width: 100%; text-align: center; background:linear-gradient(135deg, #8dff9f, #003d3d); color: #fff; text-decoration: none; padding: 11.9px; border-radius: 10.7px; font-weight: 700; font-size: 13.1px; margin-top: 14.3px; transition: transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer; box-shadow: 0 9.5px 21.4px rgba(0,153,255,.22); } .btn-contact-admin:hover { transform: translateY(-1.2px); box-shadow: 0 11.9px 26.2px rgba(0,153,255,.3); } /* === ТАБЛИЦА УПОМИНАНИЙ === */ .mentions-table-container { width: 100%; overflow-x: auto; margin-top: 10.1px; background: #fff; border: 1.2px solid var(--border); border-radius: 14.3px; } .mentions-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11.9px; min-width: 592.6px; } .mentions-table th { background: #f8fafc; padding: 11.9px 15.5px; font-weight: 700; color: var(--muted); border-bottom: 1.2px solid var(--border); text-transform: uppercase; font-size: 10.1px; letter-spacing: .4.8px; } .mentions-table td { padding: 11.3px 15.5px; border-bottom: 1.2px solid #f8fafc; vertical-align: middle; font-variant-numeric: tabular-nums; } .mentions-table tbody tr { transition: background .15s ease; } .mentions-table tbody tr:hover { background: #f9fbff; } .mentions-table tr:last-child td { border-bottom: none; } .donor-cell-info { display: flex; align-items: center; gap: 10.1px; } .donor-avatar-img { width: 32.1px; height: 32.1px; border-radius: 50%; object-fit: cover; border: 1.8px solid #fff; box-shadow: 0 0 0 1.2px var(--border); } .mention-badge-type { display: inline-block; padding: 3.6px 8.9px; border-radius: 7.1px; font-size: 10.1px; font-weight: 700; } .mention-badge-type.m-repost { background: rgba(124, 58, 237, 0.09); color: var(--violet); } .mention-badge-type.m-mention { background: var(--blue-soft); color: var(--blue); } .btn-tg-link { color: var(--blue); text-decoration: none; font-weight: 700; } .btn-tg-link:hover { text-decoration: underline; } /* Короткие подписи для узких экранов (см. мобильный брейкпоинт ниже) — на десктопе показываем только полный текст. */ .th-short { display: none; } .th-full { display: inline; } /* Модальное окно авторизации */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4.2px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-card { background: #ffffff; border-radius: 15.5px; padding: 34.5px; width: 100%; max-width: 473.6px; position: relative; box-shadow: 0 25px 50px -11.9px rgba(0, 0, 0, 0.25); transform: translateY(-20.2px); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: center; } .modal-overlay.active .modal-card { transform: translateY(0); } .modal-close { position: absolute; top: 15.5px; right: 15.5px; width: 27.4px; height: 27.4px; border-radius: 50%; background: #f1f5f9; border: none; color: #64748b; font-size: 17.8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .modal-close:hover { background: #e2e8f0; color: #0f172a; } .modal-title { font-size: 20.2px; font-weight: 700; color: #0f172a; margin-bottom: 11.9px; } .modal-text { font-size: 13.1px; color: #64748b; line-height: 1.5; margin-bottom: 23.8px; } .btn-tg-modal { display: inline-flex; align-items: center; justify-content: center; background: #00a8e8; color: #ffffff; text-decoration: none; padding: 10.7px 23.8px; border-radius: 10.1px; font-size: 13.1px; font-weight: 600; transition: background 0.15s; width: 100%; box-shadow: 0 4.2px 11.9px rgba(0, 168, 232, 0.2); } .btn-tg-modal:hover { background: #0093cc; } /* === 🔥 ЖЕЛЕЗНЫЙ ВЫРАВНЕННЫЙ МОБИЛЬНЫЙ МАСШТАБ (КОМП-СТИЛЬ) === */ /* === 🔥 НАСТОЯЩИЙ ТЕЛЕФОННЫЙ БРЕЙКПОИНТ === Блок выше (max-width: 1180.5px) на самом деле рассчитан на планшет — на узких экранах телефона (350-476px) те же 3-колоночные и 2-колоночные сетки сжимаются до нечитаемых полосок. Здесь всё разворачиваем в один столбец. */ } /* ===== Цвета графиков в гамме сайта (обе темы) ===== */ :root, body { --chart-subs-1: #10b981; --chart-subs-2: #22d3ee; --chart-subs-3: #38bdf8; --chart-views-1: #0ea5e9; --chart-views-2: #6366f1; --chart-views-3: #8b5cf6; --chart-err-1: #14b8a6; --chart-err-2: #34d399; --chart-err-3: #a3e635; --chart-cpm-1: #f59e0b; --chart-cpm-2: #f97316; --chart-cpm-3: #f43f5e; --chart-influence-1: #8b5cf6; --chart-influence-2: #6366f1; --chart-influence-3: #22d3ee; --chart-hourly-1: #22d3ee; --chart-hourly-2: #6366f1; --chart-hourly-3: #a855f7; --chart-gender-male: #22d3ee; --chart-gender-female: #c084fc; --chart-fill-opacity: 0.12; }