.tags-container{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6;padding:20px 0;} /* Базовые стили для всех тегов */ .tag{display:inline-block;margin:4px 6px;padding:6px 12px;text-decoration:none;border-radius:20px;transition:all 0.3s ease;position:relative;overflow:hidden;color:#e0e0e0;font-weight:400;} .tag::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s;} .tag:hover::before{left:100%;} .tag small{font-size:0.85em;opacity:0.8;margin-left:4px;} .tag.very-high{background:linear-gradient(135deg,#ff1744,#d50000) !important;color:white !important;font-weight:bold !important;font-size:1.2em !important;padding:8px 16px !important;box-shadow:0 0 15px rgba(255,23,68,0.8) !important;border:2px solid #ff1744 !important;transition:all 0.3s ease !important;text-shadow:0 1px 2px rgba(0,0,0,0.5) !important;} .tag.very-high:hover{transform:translateY(-2px) !important;box-shadow:0 0 25px rgba(255,23,68,1) !important;background:linear-gradient(135deg,#ff0033,#b71c1c) !important;} /* Теги с высокой популярностью (10-19) */ .tag.high{background:linear-gradient(135deg,#3f51b5,#7986cb);color:white;font-weight:700;font-size:1.2em;padding:8px 16px;box-shadow:0 0 15px rgba(63,81,181,0.8),0 0 30px rgba(63,81,181,0.5),0 0 45px rgba(63,81,181,0.3),inset 0 1px 0 rgba(255,255,255,0.2);border:2px solid #3f51b5;text-shadow:0 1px 2px rgba(0,0,0,0.4);} .tag.high:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 25px rgba(63,81,181,1),0 0 40px rgba(63,81,181,0.7),0 0 60px rgba(63,81,181,0.5),inset 0 1px 0 rgba(255,255,255,0.3);background:linear-gradient(135deg,#303f9f,#5c6bc0);} /* Теги со средней популярностью (5-9) */ .tag.medium{background:linear-gradient(135deg,#2196f3,#64b5f6);color:white;font-weight:400;font-size:1.1em;padding:7px 14px;box-shadow:0 0 12px rgba(33,150,243,0.8),0 0 25px rgba(33,150,243,0.5),0 0 40px rgba(33,150,243,0.3),inset 0 1px 0 rgba(255,255,255,0.2);border:2px solid #2196f3;text-shadow:0 1px 2px rgba(0,0,0,0.3);} .tag.medium:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 0 20px rgba(33,150,243,1),0 0 35px rgba(33,150,243,0.7),0 0 50px rgba(33,150,243,0.5),inset 0 1px 0 rgba(255,255,255,0.3);background:linear-gradient(135deg,#1976d2,#42a5f5);} /* Теги с небольшой популярностью (3-4) */ .tag.low-medium{background:linear-gradient(135deg,#4caf50,#81c784);color:white;font-weight:400;padding:6px 13px;box-shadow:0 0 10px rgba(76,175,80,0.8),0 0 20px rgba(76,175,80,0.5),0 0 30px rgba(76,175,80,0.3),inset 0 1px 0 rgba(255,255,255,0.2);border:2px solid #4caf50;text-shadow:0 1px 1px rgba(0,0,0,0.3);} .tag.low-medium:hover{transform:translateY(-1px);box-shadow:0 0 15px rgba(76,175,80,1),0 0 30px rgba(76,175,80,0.7),0 0 45px rgba(76,175,80,0.5),inset 0 1px 0 rgba(255,255,255,0.3);background:linear-gradient(135deg,#388e3c,#66bb6a);} /* Теги с низкой популярностью (2) */ .tag.low{background:linear-gradient(135deg,#ff9800,#ffb74d);color:white;font-weight:400;padding:6px 12px;box-shadow:0 0 8px rgba(255,152,0,0.8),0 0 16px rgba(255,152,0,0.5),0 0 25px rgba(255,152,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2);border:2px solid #ff9800;text-shadow:0 1px 1px rgba(0,0,0,0.3);} .tag.low:hover{background:linear-gradient(135deg,#f57c00,#ffb300);color:white;box-shadow:0 0 12px rgba(255,152,0,1),0 0 25px rgba(255,152,0,0.7),0 0 35px rgba(255,152,0,0.5),inset 0 1px 0 rgba(255,255,255,0.3);} /* Теги с единичным упоминанием (1) */ .tag.single{background:linear-gradient(135deg,#757575,#9e9e9e);color:white;font-weight:400;box-shadow:0 0 6px rgba(117,117,117,0.6),0 0 12px rgba(117,117,117,0.4),0 0 20px rgba(117,117,117,0.2),inset 0 1px 0 rgba(255,255,255,0.2);border:2px solid #757575;text-shadow:0 1px 1px rgba(0,0,0,0.3);} .tag.single:hover{background:linear-gradient(135deg,#616161,#424242);color:white;box-shadow:0 0 10px rgba(117,117,117,0.8),0 0 20px rgba(117,117,117,0.6),0 0 30px rgba(117,117,117,0.4),inset 0 1px 0 rgba(255,255,255,0.3);transform:translateY(-1px);}.sort-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2rem;padding:1rem 0}.sort-btn{align-items:center;backdrop-filter:blur(10px);background:rgba(0,0,0,.7);border:2px solid rgba(255,0,102,.3);border-radius:25px;color:#f36;display:inline-flex;font-size:.95rem;font-weight:700;overflow:hidden;padding:.8rem 1.8rem;position:relative;text-decoration:none;transition:all .4s cubic-bezier(.4,0,.2,1)}.sort-btn:before{background:linear-gradient(90deg,transparent,rgba(255,0,102,.2),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .6s;width:100%}.sort-btn:hover:before{left:100%}.sort-btn:hover{background:rgba(255,0,102,.1);border-color:#f06;box-shadow:0 8px 25px rgba(255,0,102,.4);color:#f06;transform:translateY(-3px);text-decoration:none;}.sort-btn.active{background:linear-gradient(135deg,#f06,#8b00ff);border-color:#f06;box-shadow:0 6px 25px rgba(255,0,102,.5);color:#fff} /* Анимация для самых популярных тегов */ @keyframes pulse-red{0%{box-shadow:0 0 20px rgba(255,23,68,0.8),0 0 40px rgba(255,23,68,0.6),0 0 60px rgba(255,23,68,0.4),inset 0 1px 0 rgba(255,255,255,0.3);} 50%{box-shadow:0 0 30px rgba(255,23,68,1),0 0 50px rgba(255,23,68,0.8),0 0 80px rgba(255,23,68,0.6),inset 0 1px 0 rgba(255,255,255,0.4);} 100%{box-shadow:0 0 20px rgba(255,23,68,0.8),0 0 40px rgba(255,23,68,0.6),0 0 60px rgba(255,23,68,0.4),inset 0 1px 0 rgba(255,255,255,0.3);}} /* Адаптивность */ @media (max-width:768px){.tags-container{padding:15px 10px;} .tag{margin:3px 4px;padding:4px 8px;font-size:0.9em;} .tag.very-high{font-size:1.1em;padding:6px 12px;} .tag.high{font-size:1em;padding:5px 10px;}}/* Pagination Styles - Dark Theme */.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:50px 0;flex-wrap:wrap;}.pagination a,.pagination span{padding:12px 18px;text-decoration:none;border:2px solid rgba(255,0,102,0.3);border-radius:12px;transition:all 0.3s ease;min-width:50px;text-align:center;display:inline-block;font-weight:600;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);}.pagination a{color:#ff3366;box-shadow:0 4px 15px rgba(255,0,102,0.2);}.pagination a:hover{background:rgba(255,0,102,0.1);color:#ff0066;border-color:#ff0066;transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,0,102,0.3);}.page-current{background:linear-gradient(135deg,#ff0066 0%,#8b00ff 100%);color:white;border-color:#ff0066;box-shadow:0 6px 25px rgba(255,0,102,0.4);}.page-prev,.page-next{font-weight:700;padding:12px 24px;background:rgba(255,0,102,0.1);border-color:rgba(255,0,102,0.5);}.page-prev:hover,.page-next:hover{background:rgba(255,0,102,0.2);transform:translateY(-3px);box-shadow:0 8px 25px rgba(255,0,102,0.3);}.page-dots{background:none;border:none;color:#666;cursor:default;font-size:18px;}.page-dots:hover{background:none;color:#666;transform:none;box-shadow:none;}.pagination .disabled{color:#444;pointer-events:none;cursor:not-allowed;border-color:rgba(255,0,102,0.1);background:rgba(0,0,0,0.5);}/* Адаптивность пагинации */@media (max-width:768px){.pagination{gap:5px;margin:30px 0;} .pagination a,.pagination span{padding:10px 14px;min-width:40px;font-size:14px;} .page-prev,.page-next{padding:10px 18px;}}@media (max-width:480px){.pagination a,.pagination span{padding:8px 12px;min-width:36px;font-size:13px;} .page-prev,.page-next{padding:8px 16px;}}