/* Вынесено из discounts.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);
/* ЭКСКЛЮЗИВНЫЙ ВЕКТОРНЫЙ КИБЕР-ПАТТЕРН */
--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;
}
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-top: 62px; font-size: 13px; -webkit-font-smoothing: antialiased; zoom: 1; }
.layout {
grid-template-columns: 107px 1fr;
}
.main { padding: 0px 4px 4px 4px !important; margin-top:-5px;width: 100%; box-sizing: border-box;
background-color: #f4f7fb;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
background-size: 290px 290px;
}
.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) {
.main{margin-top:-25px;}
.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: 15px 12px; border-radius: 12px; margin-bottom: 8px; 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: 8px; }
/* ИДЕАЛЬНАЯ ТАБЛИЦА */
.table-section-title { margin-top: 5px !important; margin-bottom: 5px !important; }
.table-section-title h1 { margin: 0; font-size: 15px !important; font-weight: 800; color: #ffffff !important; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.table-section-title p { margin: 3px 0 0 0; font-size: 10.5px; color: #ffffff !important; }
/* ===== СОРТИРОВКА: компактный сегментированный переключатель (2026) ===== */
.sort-switch {
display: inline-flex;
gap: 4px;
background: rgba(255,255,255,0.88);
backdrop-filter: blur(6px);
padding: 3px;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.6);
}
.sort-switch a {
display: inline-flex;
align-items: center;
gap: 5px;
text-decoration: none;
padding: 6px 11px;
border-radius: 7px;
font-size: 11px;
font-weight: 700;
color: #4b5563;
background: transparent;
transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
white-space: nowrap;
}
.sort-switch a svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.75; }
.sort-switch a.active {
color: #0f172a;
background: #ffffff;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.sort-switch a.active svg { opacity: 1; color: var(--blue); }
.sort-switch a:hover:not(.active) { color: #1e293b; }
@media (max-width: 640px) {
.sort-switch { width: 100%; }
.sort-switch a { flex: 1; justify-content: center; padding: 6px 8px; font-size: 10px; }
.head-tbl { padding: 11px 10px !important; flex-direction: column; align-items: flex-start !important; }
.table-section-title h1 { font-size: 13.5px !important; }
.table-section-title p { font-size: 8.5px !important; }
.d-metrics {
display: flex;
flex-wrap: wrap;
gap: 3px !important;
margin-bottom: 10px;
}
}
/* ===== СЕТКА КАРТОЧЕК: 3 в ряд ===== */
.discounts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
@media (max-width: 900px) {
.discounts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.discounts-grid { grid-template-columns: 1fr; gap: 6px; }
}
/* ===== КОМПАКТНАЯ КАРТОЧКА КАНАЛА (2026) ===== */
.d-card {
background: #ffffffa3;
border: 1px solid #e9edf3;
border-radius: 16px;
padding: 13px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
box-shadow: 0 2px 8px rgba(15,23,42,0.03);
transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s cubic-bezier(0.4,0,0.2,1), border-color 0.22s;
min-width: 0;
overflow: hidden;
}
.d-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 26px rgba(15,23,42,0.08);
border-color: #dbe4f0;
}
.d-badge {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 3px;
background: linear-gradient(135deg, #ff5b5b 0%, #ef4444 60%, #dc2626 100%);
color: #fff;
font-weight: 800;
font-size: 11.5px;
padding: 4px 9px;
border-radius: 20px;
box-shadow: 0 3px 8px rgba(239,68,68,0.32);
z-index: 2;
}
.d-badge svg { width: 10px; height: 10px; }
.d-head {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 6px;
padding-right: 66px;
cursor: pointer;
}
.d-avatar {
width: 36px; height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #f1f5f9;
flex-shrink: 0;
}
.d-name { min-width: 0; flex: 1; }
.d-title {
margin: 0;
font-size: 12.5px;
color: #0f172a;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d-username {
font-size: 11px;
color: var(--blue);
font-weight: 500;
}
.d-category {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
font-weight: 600;
color: #475569;
background: #f1f5f9;
border: 1px solid #e8ecf3;
padding: 3px 9px 3px 5px;
border-radius: 20px;
margin-bottom: 8px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d-category .ic {
width: 15px; height: 15px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.d-category .ic svg { width: 9px; height: 9px; color: #fff; }
.d-category span { overflow: hidden; text-overflow: ellipsis; }
/* Метрики: только иконка + цифра, без подписей (подсказка в title) */
.d-metrics {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 7px;
}
.d-metric {
display: inline-flex;
align-items: center;
gap: 3px;
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 8px;
padding: 4px 7px 4px 4px;
font-size: 10.5px;
font-weight: 700;
color: #1e293b;
}
.d-metric .ic {
width: 17px; height: 17px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.d-metric .ic svg { width: 10px; height: 10px; }
.d-metric.m-subs .ic { background: rgba(0,153,255,0.12); color: var(--blue); }
.d-metric.m-reach .ic { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.d-metric.m-err .ic { background: rgba(236,72,153,0.13); color: #ec4899; }
.d-metric.m-rating .ic { background: rgba(250,204,21,0.18); color: #d4a017; }
.d-metric.m-iv .ic { background: rgba(147,51,234,0.13); color: #9333ea; }
.d-metric.m-cpm .ic { background: rgba(20,184,166,0.14); color: #0d9488; }
.d-quote {
margin: 0 0 10px 0;
font-size: 11px;
color: #334155;
line-height: 1.35;
font-style: italic;
background: #fffdf5;
border-left: 3px solid #f59e0b;
padding: 7px 9px;
border-radius: 0 8px 8px 0;
font-weight: 500;
min-height: 30px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
}
.d-prices {
border-top: 1px dashed #e2e8f0;
padding-top: 9px;
font-size: 11px;
display: flex;
flex-direction: column;
gap: 5px;
}
.d-price-row { display: flex; justify-content: space-between; align-items: center; }
.d-price-row .lbl { color: #64748b; }
.d-price-old { color: #94a3b8; text-decoration: line-through; margin-right: 5px; font-size: 10px; }
.d-price-new { color: #0f172a; font-weight: 700; }
.d-price-max .d-price-new { color: #10b981; font-weight: 800; font-size: 12.5px; }
.d-cta {
display: block;
text-align: center;
background: #0f172a;
color: #ffffff;
text-decoration: none;
padding: 8px;
border-radius: 9px;
font-size: 11.5px;
font-weight: 700;
margin-top: 11px;
transition: background 0.2s;
}
.d-cta:hover { background: var(--blue); }
@media (max-width: 640px) {
.d-card { padding: 11px; border-radius: 14px; box-shadow:0 6px 18px rgb(0 0 0 / 16%); }
.d-avatar { width: 32px; height: 32px; }
.d-title { font-size: 12px; }
.d-username { font-size: 10px; }
.d-metric { font-size: 7.5px; padding: 2px 4px 2px 2px; }
.d-metric .ic { width: 15px; height: 15px; }
.d-category{font-size:8.5px;}
}
.discounts-empty-state { background: #ffffff; padding: 60px; text-align: center; border-radius: 12px; border: 1px dashed #cbd5e1; color: #6b7280; width: 100%; }
.discounts-empty-icon { font-size: 45px; }
.discounts-empty-title { margin: 15px 0 5px 0; color: #1f2937; font-size: 18px; }
.discounts-empty-text { margin: 0; font-size: 14px; }
/* ===== ФИКСИРОВАННОЕ увеличение +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);
/* ЭКСКЛЮЗИВНЫЙ ВЕКТОРНЫЙ КИБЕР-ПАТТЕРН */
--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;
}
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-top: 73.78px; font-size: 15.47px; -webkit-font-smoothing: antialiased; zoom: 1; }
.layout {
grid-template-columns: 127.33px 1fr;
}
.main { padding: 0px 4.76px 4.76px 4.76px !important; margin-top:-5.95px;width: 100%; box-sizing: border-box;
background-color: #f4f7fb;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
background-size: 345.1px 345.1px;
}
.top-nav-buttons {
display: flex;
gap: 5.95px;
margin-bottom: 4.76px;
width: 100%;
align-items: stretch;
}
.promo-card {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
padding: 9.52px 11.9px 10.71px 14.28px;
border-radius: 19.04px;
text-decoration: none;
overflow: hidden;
isolation: isolate;
border: 1.19px solid rgba(255,255,255,0.14);
box-shadow: 0 7.14px 21.42px 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.57px);
border-color: rgba(255,255,255,0.32);
}
.card-catalog:hover {
box-shadow: 0 9.52px 19.04px -4.76px rgba(4, 197, 107, 0.4), 0 3.57px 9.52px rgba(0,0,0,0.14);
}
.card-discounts:hover {
box-shadow: 0 9.52px 19.04px -4.76px rgba(37, 117, 252, 0.4), 0 3.57px 9.52px rgba(0,0,0,0.14);
}
.card-wholesale:hover {
box-shadow: 0 9.52px 19.04px -4.76px rgba(182, 36, 255, 0.4), 0 3.57px 9.52px 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.95px;
}
.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.19px solid rgba(255,255,255,0.22);
backdrop-filter: blur(4.76px);
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.45px; height: 18.45px; color: #ffffff; }
.promo-card-title {
font-weight: 800;
font-size: 16.66px;
color: #ffffff;
line-height: 1.2;
letter-spacing: -0.24px;
text-shadow: 0 1.19px 3.57px rgba(0,0,0,0.15);
}
.promo-card-stat {
margin-left: auto;
flex-shrink: 0;
display: inline-flex;
align-items: center;
font-size: 12.26px;
font-weight: 800;
color: #ffffff;
padding: 4.76px 11.9px;
border-radius: 23.8px;
background: rgba(255,255,255,0.16);
border: 1.19px solid rgba(255,255,255,0.24);
backdrop-filter: blur(4.76px);
white-space: nowrap;
}
.promo-card-desc {
font-weight: 450;
font-size: 11.19px;
color: rgba(255,255,255,0.90);
line-height: 1.3;
margin: 0 0 7.14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.promo-card-link {
margin-top: auto;
font-size: 13.09px;
font-weight: 700;
color: #ffffff;
display: inline-flex;
align-items: center;
gap: 4.76px;
letter-spacing: 0.12px;
}
.promo-card-link svg {
width: 14.28px; height: 14.28px;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.promo-card:hover .promo-card-link svg { transform: translateX(4.76px); }
@media (max-width: 992px) {
.main{margin-top:-25px;}
.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: 17.85px 14.28px; border-radius: 14.28px; margin-bottom: 9.52px; box-shadow: 0 1.19px 3.57px rgba(0,0,0,0.01); border: 1.19px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 9.52px; }
/* ИДЕАЛЬНАЯ ТАБЛИЦА */
.table-section-title { margin-top: 5.95px !important; margin-bottom: 5.95px !important; }
.table-section-title h1 { margin: 0; font-size: 17.85px !important; font-weight: 800; color: #ffffff !important; letter-spacing: -0.02em; display: flex; align-items: center; gap: 9.52px; }
.table-section-title p { margin: 3.57px 0 0 0; font-size: 12.49px; color: #ffffff !important; }
/* ===== СОРТИРОВКА: компактный сегментированный переключатель (2026) ===== */
.sort-switch {
display: inline-flex;
gap: 4.76px;
background: rgba(255,255,255,0.88);
backdrop-filter: blur(7.14px);
padding: 3.57px;
border-radius: 11.9px;
box-shadow: 0 1.19px 4.76px rgba(0,0,0,0.08), inset 0 0 0 1.19px rgba(255,255,255,0.6);
}
.sort-switch a {
display: inline-flex;
align-items: center;
gap: 5.95px;
text-decoration: none;
padding: 7.14px 13.09px;
border-radius: 8.33px;
font-size: 13.09px;
font-weight: 700;
color: #4b5563;
background: transparent;
transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
white-space: nowrap;
}
.sort-switch a svg { width: 14.28px; height: 14.28px; flex-shrink: 0; opacity: 0.75; }
.sort-switch a.active {
color: #0f172a;
background: #ffffff;
box-shadow: 0 2.38px 7.14px rgba(0,0,0,0.12);
}
.sort-switch a.active svg { opacity: 1; color: var(--blue); }
.sort-switch a:hover:not(.active) { color: #1e293b; }
@media (max-width: 640px) {
.sort-switch { width: 100%; }
.sort-switch a { flex: 1; justify-content: center; padding: 6px 8px; font-size: 10px; }
.head-tbl { padding: 11px 10px !important; flex-direction: column; align-items: flex-start !important; }
.table-section-title h1 { font-size: 13.5px !important; }
.table-section-title p { font-size: 8.5px !important; }
.d-metrics {
display: flex;
flex-wrap: wrap;
gap: 3px !important;
margin-bottom: 10px;
}
}
/* ===== СЕТКА КАРТОЧЕК: 3 в ряд ===== */
.discounts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4.76px;
}
@media (max-width: 900px) {
.discounts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.discounts-grid { grid-template-columns: 1fr; gap: 6px; }
}
/* ===== КОМПАКТНАЯ КАРТОЧКА КАНАЛА (2026) ===== */
.d-card {
background: #ffffffa3;
border: 1.19px solid #e9edf3;
border-radius: 19.04px;
padding: 15.47px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
box-shadow: 0 2.38px 9.52px rgba(15,23,42,0.03);
transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s cubic-bezier(0.4,0,0.2,1), border-color 0.22s;
min-width: 0;
overflow: hidden;
}
.d-card:hover {
transform: translateY(-3.57px);
box-shadow: 0 16.66px 30.94px rgba(15,23,42,0.08);
border-color: #dbe4f0;
}
.d-badge {
position: absolute;
top: 14.28px;
right: 14.28px;
display: inline-flex;
align-items: center;
gap: 3.57px;
background: linear-gradient(135deg, #ff5b5b 0%, #ef4444 60%, #dc2626 100%);
color: #fff;
font-weight: 800;
font-size: 13.68px;
padding: 4.76px 10.71px;
border-radius: 23.8px;
box-shadow: 0 3.57px 9.52px rgba(239,68,68,0.32);
z-index: 2;
}
.d-badge svg { width: 11.9px; height: 11.9px; }
.d-head {
display: flex;
align-items: center;
gap: 10.71px;
margin-bottom: 7.14px;
padding-right: 78.54px;
cursor: pointer;
}
.d-avatar {
width: 42.84px; height: 42.84px;
border-radius: 50%;
object-fit: cover;
border: 2.38px solid #f1f5f9;
flex-shrink: 0;
}
.d-name { min-width: 0; flex: 1; }
.d-title {
margin: 0;
font-size: 14.88px;
color: #0f172a;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d-username {
font-size: 13.09px;
color: var(--blue);
font-weight: 500;
}
.d-category {
display: inline-flex;
align-items: center;
gap: 5.95px;
font-size: 12.49px;
font-weight: 600;
color: #475569;
background: #f1f5f9;
border: 1.19px solid #e8ecf3;
padding: 3.57px 10.71px 3.57px 5.95px;
border-radius: 23.8px;
margin-bottom: 9.52px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d-category .ic {
width: 17.85px; height: 17.85px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.d-category .ic svg { width: 10.71px; height: 10.71px; color: #fff; }
.d-category span { overflow: hidden; text-overflow: ellipsis; }
/* Метрики: только иконка + цифра, без подписей (подсказка в title) */
.d-metrics {
display: flex;
flex-wrap: wrap;
gap: 5.95px;
margin-bottom: 8.33px;
}
.d-metric {
display: inline-flex;
align-items: center;
gap: 3.57px;
background: #f8fafc;
border: 1.19px solid #f1f5f9;
border-radius: 9.52px;
padding: 4.76px 8.33px 4.76px 4.76px;
font-size: 12.49px;
font-weight: 700;
color: #1e293b;
}
.d-metric .ic {
width: 20.23px; height: 20.23px;
border-radius: 7.14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.d-metric .ic svg { width: 11.9px; height: 11.9px; }
.d-metric.m-subs .ic { background: rgba(0,153,255,0.12); color: var(--blue); }
.d-metric.m-reach .ic { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.d-metric.m-err .ic { background: rgba(236,72,153,0.13); color: #ec4899; }
.d-metric.m-rating .ic { background: rgba(250,204,21,0.18); color: #d4a017; }
.d-metric.m-iv .ic { background: rgba(147,51,234,0.13); color: #9333ea; }
.d-metric.m-cpm .ic { background: rgba(20,184,166,0.14); color: #0d9488; }
.d-quote {
margin: 0 0 11.9px 0;
font-size: 13.09px;
color: #334155;
line-height: 1.35;
font-style: italic;
background: #fffdf5;
border-left: 3.57px solid #f59e0b;
padding: 8.33px 10.71px;
border-radius: 0 9.52px 9.52px 0;
font-weight: 500;
min-height: 35.7px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
}
.d-prices {
border-top: 1.19px dashed #e2e8f0;
padding-top: 10.71px;
font-size: 13.09px;
display: flex;
flex-direction: column;
gap: 5.95px;
}
.d-price-row { display: flex; justify-content: space-between; align-items: center; }
.d-price-row .lbl { color: #64748b; }
.d-price-old { color: #94a3b8; text-decoration: line-through; margin-right: 5.95px; font-size: 11.9px; }
.d-price-new { color: #0f172a; font-weight: 700; }
.d-price-max .d-price-new { color: #10b981; font-weight: 800; font-size: 14.88px; }
.d-cta {
display: block;
text-align: center;
background: #0f172a;
color: #ffffff;
text-decoration: none;
padding: 9.52px;
border-radius: 10.71px;
font-size: 13.68px;
font-weight: 700;
margin-top: 13.09px;
transition: background 0.2s;
}
.d-cta:hover { background: var(--blue); }
@media (max-width: 640px) {
.d-card { padding: 11px; border-radius: 14px; box-shadow:0 6px 18px rgb(0 0 0 / 16%); }
.d-avatar { width: 32px; height: 32px; }
.d-title { font-size: 12px; }
.d-username { font-size: 10px; }
.d-metric { font-size: 7.5px; padding: 2px 4px 2px 2px; }
.d-metric .ic { width: 15px; height: 15px; }
.d-category{font-size:8.5px;}
}
.discounts-empty-state { background: #ffffff; padding: 71.4px; text-align: center; border-radius: 14.28px; border: 1.19px dashed #cbd5e1; color: #6b7280; width: 100%; }
.discounts-empty-icon { font-size: 53.55px; }
.discounts-empty-title { margin: 17.85px 0 5.95px 0; color: #1f2937; font-size: 21.42px; }
.discounts-empty-text { margin: 0; font-size: 16.66px; }
}
.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; }