/* Карточки серверов — редизайн «Минимализм 2.0» (утверждён владельцем 04.10.2026).
   Собран скриптом из превью mu-plugins/assets/cards-preview/cards.css (вариант v9 + Elite «яркий оранжевый»).
   Классы body: sv-cards, sv-elite-orange (ставит functions.php). JS: assets/js/sv-cards.js.
   Подробности и решения — _memory/cards-preview.md. */
@property --sv-a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.sv-cards { --cp-radius: 6px; --cp-ease: cubic-bezier(.22,.8,.26,1); --cp-default: #9aa3b2; --cp-top: #ff7a3d; --cp-vip: #2f8bff; --cp-elite: #ff5e62; }
.sv-cards .sv-servers-list .sv-server-item { position: relative !important; display: grid !important; grid-template-columns: 22px minmax(0,1fr) auto 98px !important; grid-template-areas: "icon title rate date" "icon chron rate date" !important; align-items: center !important; column-gap: 10px !important; row-gap: 2px !important; margin: 6px 0 0 !important; padding: 9px 10px 9px 10px !important; border-radius: var(--cp-radius) !important; overflow: hidden !important; isolation: isolate; font-size: 15px !important; animation: none !important; outline: none !important; cursor: pointer; transition: transform .25s var(--cp-ease), box-shadow .25s var(--cp-ease), background-color .25s ease, opacity .5s var(--cp-ease), translate .5s var(--cp-ease) !important; }
.sv-cards .sv-servers-list .sv-server-item > .sv-server-item-priority { grid-area: icon; width: 22px !important; height: 22px !important; justify-content: center; }
.sv-cards .sv-servers-list .sv-server-item > .sv-server-item-title { grid-area: title; width: auto !important; padding: 0 !important; justify-content: flex-start !important; gap: 8px; min-width: 0; overflow: visible !important; }
.sv-cards .sv-servers-list .sv-server-item > .sv-server-item-rate { grid-area: rate; width: auto !important; }
.sv-cards .sv-servers-list .sv-server-item > .sv-server-item-chronicle { grid-area: chron; width: auto !important; padding: 0 !important; }
.sv-cards .sv-servers-list .sv-server-item > .sv-server-item-date { grid-area: date; }
.sv-cards .sv-server-item.sv-round-animation > span { display: none !important; }
.sv-cards .sv-servers-list .sv-server-item::before { display: none !important; }
.sv-cards .sv-servers-list .sv-server-item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cp-accent, var(--cp-default)); transition: top .25s var(--cp-ease), bottom .25s var(--cp-ease), width .25s var(--cp-ease); z-index: 1; }
.sv-cards .sv-server-item.sv-server-top { --cp-accent: var(--cp-top); }
.sv-cards .sv-server-item.sv-server-vip { --cp-accent: var(--cp-vip); }
.sv-cards .sv-server-item.sv-server-elite { --cp-accent: linear-gradient(180deg, #ffb36b, var(--cp-elite)); }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { font-size: 15px !important; font-weight: 700 !important; letter-spacing: .02em; line-height: 1.2 !important; min-width: 0; overflow-wrap: anywhere; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color .2s ease; }
.sv-cards .sv-servers-list .sv-server-item:not(.sv-server-top):not(.sv-server-vip):not(.sv-server-elite) .sv-server-item-link { font-weight: 600 !important; font-size: 14.5px !important; }
.sv-cards .sv-server-item .sv-server-statuses { gap: 4px !important; flex: 0 0 auto; }
.sv-cards .sv-server-item .sv-status-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: rgba(20,150,170,.10); transition: transform .2s var(--cp-ease), background-color .2s ease; }
.sv-cards .sv-server-item .sv-status-icon svg { width: 14px !important; height: 14px !important; }
.sv-cards .sv-server-item .sv-status-icon:hover { transform: translateY(-1px) scale(1.08); }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle { font-size: 12.5px !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-rate { justify-self: end; padding: 3px 9px !important; border-radius: 3px !important; font-size: 13px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; line-height: 1.4 !important; text-align: center !important; min-width: 42px; color: rgb(var(--cp-rate)) !important; background: rgba(var(--cp-rate), .12) !important; box-shadow: inset 0 0 0 1px rgba(var(--cp-rate), .22); }
.sv-cards .sv-server-item-rate { --cp-rate: 120,130,150; }
.sv-cards .sv-server-item-rate[data-tier="low"] { --cp-rate: 22,150,110; }
.sv-cards .sv-server-item-rate[data-tier="mid"] { --cp-rate: 40,120,230; }
.sv-cards .sv-server-item-rate[data-tier="high"] { --cp-rate: 225,120,20; }
.sv-cards .sv-server-item-rate[data-tier="ultra"] { --cp-rate: 200,60,170; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-rate.cp-empty { visibility: hidden; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date,
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday),
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { flex: none !important; width: 98px !important; min-width: 98px !important; max-width: 98px !important; padding: 7px 6px !important; border-radius: 4px !important; font-size: 13.5px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; letter-spacing: .02em; gap: 6px; color: #fff !important; background: linear-gradient(180deg, #5aaeff 0%, #2f86f5 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(47,134,245,.30); transition: transform .25s var(--cp-ease), box-shadow .25s ease, filter .25s ease; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date.sv-server-item-today { color: #fff !important; background: linear-gradient(180deg, #34c77b 0%, #1fa463 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(31,164,99,.35); }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date.sv-server-item-tomorrow { color: #5a3d00 !important; background: linear-gradient(180deg, #ffd66b 0%, #ffbe2e 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px rgba(255,190,46,.30); }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date.sv-server-item-yesterday { color: #fff !important; background: linear-gradient(180deg, #3cc3e0 0%, #1798c0 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(23,152,192,.30); }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date.sv-server-item-soon { color: #fff !important; background: linear-gradient(180deg, #9b7bff 0%, #6f4ff0 100%) !important; }
.sv-cards .sv-server-item-date.sv-server-item-today::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.8); animation: cp-live 1.6s ease-out infinite; flex: 0 0 auto; }
@keyframes cp-live {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.8); }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.sv-cards .sv-server-item-priority .sv-priority-icon.spin { animation: cp-twinkle 3.2s ease-in-out infinite !important; }
@keyframes cp-twinkle {
  0%, 70%, 100% { transform: scale(1) rotate(0); filter: none; }
  80% { transform: scale(1.25) rotate(18deg); filter: drop-shadow(0 0 6px rgba(255,140,60,.8)); }
  90% { transform: scale(.95) rotate(-6deg); }
}
.sv-cards .sv-server-item.sv-server-vip .sv-server-item-priority svg,
.sv-cards .sv-server-item.sv-server-elite .sv-server-item-priority svg { width: 20px; height: 20px; animation: cp-float 3s ease-in-out infinite; }
@keyframes cp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.sv-cards .sv-server-item.sv-server-default .sv-chevron { width: 16px; height: 16px; transition: transform .25s var(--cp-ease), opacity .25s ease; opacity: .55; }
@media (hover: hover) {
  .sv-cards .sv-servers-list .sv-server-item:hover { transform: translateY(-2px); z-index: 2; }
  .sv-cards .sv-servers-list .sv-server-item:hover::before { top: 0; bottom: 0; width: 4px; }
  .sv-cards .sv-server-item:hover .sv-server-item-date { transform: translateX(-2px); filter: brightness(1.06); }
  .sv-cards .sv-server-item.sv-server-default:hover .sv-chevron { transform: translateX(3px); opacity: 1; }
}
.sv-cards .sv-servers-list .sv-server-item:active { transform: scale(.985); transition-duration: .1s !important; }
.sv-cards .sv-server-item .cp-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 60%); z-index: 0; }
.sv-cards .sv-server-item:hover .cp-glow { opacity: 1; }
.sv-cards .sv-servers-list .sv-server-item > *:not(.cp-glow):not(.cp-ring) { position: relative; z-index: 1; }
.sv-cards.cp-js .sv-servers-list .sv-server-item:not(.cp-in) { opacity: 0; translate: 0 14px; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip { background: linear-gradient(115deg, #0b3f9e 0%, #1667e0 55%, #2a8bff 100%) !important; box-shadow: 0 6px 18px -6px rgba(22,103,224,.6), inset 0 1px 0 rgba(255,255,255,.18) !important; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite { background: linear-gradient(115deg, #e5484d 0%, #ff6b4a 55%, #ff9a5a 100%) !important; box-shadow: 0 6px 18px -6px rgba(229,72,77,.6), inset 0 1px 0 rgba(255,255,255,.22) !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-link { color: #ffd84d !important; text-shadow: 0 1px 8px rgba(255,216,77,.25); }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-link { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.18); }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-chronicle,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-chronicle { color: rgba(255,255,255,.82) !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-rate,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-rate { color: #fff !important; background: rgba(255,255,255,.16) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday),
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { background: rgba(255,255,255,.95) !important; color: #1554c4 !important; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { color: #d93a3f !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip::before,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite::before { display: none; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .cp-glow,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .cp-glow { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 60%); }
.sv-cards .sv-server-item .cp-ring { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--sv-a), transparent 0 55%, rgba(255,255,255,.95) 70%, #ffe37a 78%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cp-spin 4.5s linear infinite; z-index: 2; }
@keyframes cp-spin { to { --sv-a: 360deg; } }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip::after,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); animation: cp-shine 6s ease-in-out infinite; animation-delay: var(--cp-shine-delay, 0s); pointer-events: none; z-index: 0; }
@keyframes cp-shine {
  0%, 72% { left: -60%; }
  100%    { left: 130%; }
}
@media (hover: hover) {
  .sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip:hover { box-shadow: 0 12px 28px -8px rgba(22,103,224,.75), inset 0 1px 0 rgba(255,255,255,.2) !important; }
  .sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite:hover { box-shadow: 0 12px 28px -8px rgba(229,72,77,.75), inset 0 1px 0 rgba(255,255,255,.25) !important; }
}
@media (max-width: 576px) {
  .sv-cards .sv-servers-list .sv-server-item { grid-template-columns: 22px minmax(0,1fr) auto 92px !important; padding: 10px 10px 10px 10px !important; column-gap: 8px !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { font-size: 15px !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-date,
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday),
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { width: 92px !important; min-width: 92px !important; max-width: 92px !important; font-size: 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-cards .sv-server-item,
  .sv-cards .sv-server-item *,
  .sv-cards .sv-server-item::before,
  .sv-cards .sv-server-item::after { animation: none !important; transition: none !important; }
  .sv-cards.cp-js .sv-servers-list .sv-server-item:not(.cp-in) { opacity: 1; translate: none; }
}
@keyframes cp-tile-pulse { 50% { box-shadow: 0 0 0 4px rgba(31,164,99,.3), 0 2px 6px rgba(0,0,0,.15); } }
@keyframes cp-flip { from { transform: perspective(300px) rotateX(0); } to { transform: perspective(300px) rotateX(360deg); } }
@keyframes cp-neon { 50% { opacity: .6; } }
@keyframes cp-neon-vip { 50% { box-shadow: inset 0 0 0 1px rgba(63,208,255,.9), 0 0 26px -2px rgba(63,208,255,.75); } }
@keyframes cp-neon-elite { 50% { box-shadow: inset 0 0 0 1px rgba(255,79,139,.95), 0 0 26px -2px rgba(255,79,139,.75); } }
.sv-cards .sv-servers-list .sv-server-item { border-radius: 4px !important; }
.sv-cards .sv-servers-list .sv-server-item:not(.sv-servers-list-priority .sv-server-vip):not(.sv-servers-list-priority .sv-server-elite) { background: #f3f4f6 !important; box-shadow: none !important; }
@media (hover: hover) {
  .sv-cards .sv-servers-list .sv-server-item:not(.sv-servers-list-priority .sv-server-vip):not(.sv-servers-list-priority .sv-server-elite):hover { background: #fff !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,.55) !important; }
  .sv-cards .sv-server-item:hover .sv-server-item-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
.sv-cards .sv-server-item .cp-glow { display: none; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { font-weight: 600 !important; letter-spacing: .01em; }
.sv-cards .sv-servers-list .sv-server-item.sv-server-default .sv-server-item-link { color: #2b313c !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle { color: #8a919c !important; }
.sv-cards .sv-server-item .sv-status-icon { background: transparent; width: 18px; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-rate { background: transparent !important; box-shadow: none !important; padding: 0 2px !important; font-size: 14px !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date,
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday),
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { border-radius: 3px !important; background: #e4e8ee !important; color: #2b313c !important; box-shadow: none !important; font-weight: 700 !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date.sv-server-item-today { background: #dcf5e6 !important; color: #17834d !important; box-shadow: none !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date.sv-server-item-tomorrow { background: #fdf0cf !important; color: #8a6200 !important; box-shadow: none !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date.sv-server-item-yesterday { background: #d7f0f7 !important; color: #0f6f8c !important; box-shadow: none !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date.sv-server-item-soon { background: #e9e3ff !important; color: #5b3fd6 !important; box-shadow: none !important; }
.sv-cards .sv-server-item-date.sv-server-item-today::before { background: #17834d; }
.sv-cards .sv-server-item .cp-ring { display: none; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip { background: #1d5fd6 !important; box-shadow: none !important; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite { background: #e5484d !important; box-shadow: none !important; }
@media (hover: hover) {
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip:hover { background: #2468e0 !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6) !important; }
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite:hover { background: #ec5257 !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6) !important; }
}
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-link { text-shadow: none; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-link { text-shadow: none; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-rate,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-rate { color: #fff !important; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip::after,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); animation-duration: 8s; }
.sv-cards .sv-servers-list .sv-server-item { padding: 8px 10px !important; row-gap: 1px !important; }
.sv-cards .sv-servers-list .sv-server-item:not(.sv-servers-list-priority .sv-server-vip):not(.sv-servers-list-priority .sv-server-elite) { background: #f4f5f7 !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,.07) !important; }
@media (hover: hover) {
  .sv-cards .sv-servers-list .sv-server-item:not(.sv-servers-list-priority .sv-server-vip):not(.sv-servers-list-priority .sv-server-elite):hover { background: #fff !important; box-shadow: 0 8px 20px -10px rgba(0,0,0,.55) !important; }
  .sv-cards .sv-server-item:hover .sv-server-item-link { text-decoration: none; }
}
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-title { position: relative; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-title::after { content: "↗"; position: absolute; right: -2px; top: 50%; margin-top: -7px; font-size: 13px; font-weight: 700; line-height: 1; color: #8a919c; opacity: 0; transform: translate(-6px, 2px); transition: opacity .2s ease, transform .25s var(--cp-ease); pointer-events: none; }
@media (hover: hover) {
  .sv-cards .sv-servers-list .sv-server-item:hover .sv-server-item-title::after { opacity: 1; transform: translate(0, 0); }
}
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { font-size: 14.5px !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle { font-size: 12px !important; color: #8d939d !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date { background: #e7eaef !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05) !important; font-size: 13px !important; }
@media (hover: hover) {
  .sv-cards .sv-servers-list .sv-server-item:not(.sv-servers-list-priority .sv-server-vip):not(.sv-servers-list-priority .sv-server-elite):hover .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday):not(.sv-server-item-soon) { background: #2b313c !important; color: #fff !important; }
}
.sv-cards .sv-server-item .cp-ring { display: block; padding: 1px; background: conic-gradient(from var(--sv-a), transparent 0 60%, rgba(255,255,255,.7) 75%, transparent 90%); }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip { background: radial-gradient(140% 180% at 0% 50%, rgba(47,139,255,.55), transparent 60%), linear-gradient(180deg, #14213d, #0f172b) !important; box-shadow: inset 0 0 0 1px rgba(47,139,255,.45), 0 6px 18px -8px rgba(47,139,255,.6) !important; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite { background: radial-gradient(140% 180% at 0% 50%, rgba(255,94,98,.55), transparent 60%), linear-gradient(180deg, #2b161b, #1f1015) !important; box-shadow: inset 0 0 0 1px rgba(255,94,98,.45), 0 6px 18px -8px rgba(255,94,98,.6) !important; }
@media (hover: hover) {
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip:hover { background: radial-gradient(160% 220% at 0% 50%, rgba(47,139,255,.7), transparent 65%), linear-gradient(180deg, #16254a, #101a31) !important; box-shadow: inset 0 0 0 1px rgba(47,139,255,.7), 0 12px 26px -10px rgba(47,139,255,.75) !important; }
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite:hover { background: radial-gradient(160% 220% at 0% 50%, rgba(255,94,98,.7), transparent 65%), linear-gradient(180deg, #321a20, #241218) !important; box-shadow: inset 0 0 0 1px rgba(255,94,98,.7), 0 12px 26px -10px rgba(255,94,98,.75) !important; }
}
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-link { color: #ffd84d !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-link { color: #fff !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-chronicle,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-chronicle { color: rgba(255,255,255,.62) !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-title::after,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-title::after { color: rgba(255,255,255,.7); }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-rate,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-rate { color: #fff !important; background: rgba(255,255,255,.08) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2) !important; padding: 3px 8px !important; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { background: rgba(90,165,255,.14) !important; color: #9cc8ff !important; box-shadow: inset 0 0 0 1px rgba(90,165,255,.45) !important; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { background: rgba(255,150,150,.14) !important; color: #ffb0b0 !important; box-shadow: inset 0 0 0 1px rgba(255,150,150,.45) !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-rate { color: #2b313c !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { font-size: 15px !important; font-weight: 700 !important; letter-spacing: normal !important; line-height: 1.3 !important; }
.sv-cards .sv-servers-list .sv-server-item:not(.sv-server-top):not(.sv-server-vip):not(.sv-server-elite) .sv-server-item-link { font-size: 14px !important; font-weight: 400 !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle { font-size: 14px !important; font-weight: 400 !important; letter-spacing: normal !important; line-height: 1.3 !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-rate { font-size: 15px !important; font-weight: 600 !important; letter-spacing: normal !important; font-variant-numeric: normal; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date,
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday),
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { font-size: 14px !important; font-weight: 600 !important; letter-spacing: normal !important; font-variant-numeric: normal; }
@media (max-width: 767.98px) {
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-link,
  .sv-cards .sv-servers-list .sv-server-item:not(.sv-server-top):not(.sv-server-vip):not(.sv-server-elite) .sv-server-item-link { font-size: 16px !important; }
}
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-rate,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-rate { background: transparent !important; box-shadow: none !important; padding: 0 2px !important; }
.sv-cards .sv-server-item .cp-ring { animation-duration: 2s; }
.sv-cards .sv-server-item-priority .sv-priority-icon.spin { animation: spin 3s linear infinite !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip { --b1: #14213d; --b2: #0f172b; --ang: 180deg; --g: 47,139,255; --ga: .55; --bd: 47,139,255; --n: #ffd84d; --d: 140,195,255; --r: rgba(255,255,255,.7); }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite { --b1: #2b161b; --b2: #1f1015; --ang: 180deg; --g: 255,94,98; --ga: .55; --bd: 255,94,98; --n: #ffffff; --d: 255,170,170; --r: rgba(255,255,255,.7); }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip,
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite { background: radial-gradient(140% 180% at 0% 50%, rgba(var(--g), var(--ga)), transparent 60%), linear-gradient(var(--ang), var(--b1), var(--b2)) !important; box-shadow: inset 0 0 0 1px rgba(var(--bd), .45), 0 6px 18px -8px rgba(var(--g), calc(var(--ga) + .05)) !important; }
@media (hover: hover) {
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip:hover,
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite:hover { background: radial-gradient(160% 220% at 0% 50%, rgba(var(--g), calc(var(--ga) + .15)), transparent 65%), linear-gradient(var(--ang), var(--b1), var(--b2)) !important; box-shadow: inset 0 0 0 1px rgba(var(--bd), .75), 0 12px 26px -10px rgba(var(--g), calc(var(--ga) + .2)) !important; }
}
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-link,
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-link { color: var(--n) !important; }
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday),
.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { background: rgba(var(--d), .14) !important; color: rgb(var(--d)) !important; box-shadow: inset 0 0 0 1px rgba(var(--d), .45) !important; }
.sv-cards .sv-servers-list-priority .sv-server-item .cp-ring { background: conic-gradient(from var(--sv-a), transparent 0 60%, var(--r) 75%, transparent 90%); }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: unset; }
.sv-cards .sv-servers-list .sv-server-item { column-gap: 8px !important; }
@media (max-width: 440px) {
  .sv-cards .sv-servers-list .sv-server-item { grid-template-areas: "icon title title date" "icon chron rate date" !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-rate { font-size: 14px !important; }
}
.sv-cards .sv-servers-list .sv-server-item { padding-top: 8px !important; padding-bottom: 8px !important; row-gap: 2px !important; }
@media (max-width: 767.98px) {
  .sv-cards .sv-servers-list .sv-server-item { padding-top: 12px !important; padding-bottom: 12px !important; }
}
.sv-cards .sv-servers-list .sv-server-item .sv-server-statuses { gap: 3px !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-status-icon { width: 22px; height: 22px; }
.sv-cards .sv-servers-list .sv-server-item .sv-status-icon svg { width: 16px !important; height: 16px !important; }
@media (max-width: 767.98px) {
  .sv-cards .sv-servers-list .sv-server-item .sv-status-icon { width: 24px; height: 24px; }
  .sv-cards .sv-servers-list .sv-server-item .sv-status-icon svg { width: 18px !important; height: 18px !important; }
}
.sv-elite-orange.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite { --b1: #f07a2a; --b2: #ff9a4a; --ang: 100deg; --g: 255,255,255; --ga: .12; --bd: 255,220,180; --n: #ffffff; --d: 255,255,255; --r: rgba(255,255,255,.9); }
.sv-elite-orange.sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) { background: rgba(255,255,255,.2) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4) !important; }
.sv-elite-orange.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-chronicle { color: rgba(255,255,255,.85) !important; }
.sv-cards .sv-server-item-date.sv-server-item-today::before { display: none !important; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-date.sv-server-item-today { background: linear-gradient(to right, #ffffff, #cbff6f) !important; color: #238c47 !important; box-shadow: inset 0 0 0 1px rgba(35,140,71,.12) !important; }
.sv-cards .sv-server-item .cp-ring { display: none !important; }
.sv-cards .sv-servers-list .sv-server-item.sv-round-animation > span { display: block !important; position: absolute !important; z-index: 3 !important; pointer-events: none; border-radius: 2px; }
.sv-cards .sv-server-item.sv-round-animation > span:nth-of-type(1) { top: 0; left: -70%; width: 70%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85)); box-shadow: 0 0 3px rgba(255,255,255,.35); animation: cp-edge1 4s cubic-bezier(.45,.05,.55,.95) infinite; }
.sv-cards .sv-server-item.sv-round-animation > span:nth-of-type(2) { top: -100%; right: 0; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.85)); box-shadow: 0 0 3px rgba(255,255,255,.35); animation: cp-edge2 4s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay: .33s; }
.sv-cards .sv-server-item.sv-round-animation > span:nth-of-type(3) { bottom: 0; right: -70%; width: 70%; height: 1px; background: linear-gradient(270deg, transparent, rgba(255,255,255,.85)); box-shadow: 0 0 3px rgba(255,255,255,.35); animation: cp-edge3 4s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay: .66s; }
.sv-cards .sv-server-item.sv-round-animation > span:nth-of-type(4) { bottom: -100%; left: 0; width: 1px; height: 100%; background: linear-gradient(0deg, transparent, rgba(255,255,255,.85)); box-shadow: 0 0 3px rgba(255,255,255,.35); animation: cp-edge4 4s cubic-bezier(.45,.05,.55,.95) infinite; animation-delay: 1s; }
@keyframes cp-edge1 { 0% { left: -70%; opacity: 0; } 8% { opacity: 1; } 50%, 100% { left: 100%; opacity: 1; } }
@keyframes cp-edge2 { 0% { top: -100%; opacity: 0; } 8% { opacity: 1; } 50%, 100% { top: 100%; opacity: 1; } }
@keyframes cp-edge3 { 0% { right: -70%; opacity: 0; } 8% { opacity: 1; } 50%, 100% { right: 100%; opacity: 1; } }
@keyframes cp-edge4 { 0% { bottom: -100%; opacity: 0; } 8% { opacity: 1; } 50%, 100% { bottom: 100%; opacity: 1; } }
.sv-cards .sv-server-item.sv-round-animation > span:nth-of-type(1),
.sv-cards .sv-server-item.sv-round-animation > span:nth-of-type(3) { transform: scaleY(.6); }
.sv-cards .sv-server-item.sv-round-animation > span:nth-of-type(2),
.sv-cards .sv-server-item.sv-round-animation > span:nth-of-type(4) { transform: scaleX(.6); }
.sv-elite-orange.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite { --b1: #e4521f; --b2: #ffb44f; --ang: 100deg; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-statuses { margin-top: -3px; margin-bottom: -3px; height: 18px; align-items: center; }
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-title { min-height: 20px; }
@media (max-width: 767.98px) {
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-title { min-height: 21px; }
}
@media (max-width: 440px) {
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle { min-height: 19.6px; }
}

@media (max-width: 767.98px) {
  .sv-cards .sv-servers-list .sv-server-item { row-gap: 3px !important; }
}

/* 04.10: ПК — иконки статусов отдельной колонкой (были «впритык» к названию, у каждого на своём месте).
   Сетка: [значок] [название / хроника] [иконки] [рейт] [дата]. .sv-server-item-title раскрыт
   через display:contents, чтобы ссылка и иконки стали отдельными ячейками сетки.
   Рейт фиксированной ширины — иначе колонка иконок «гуляла» бы от x1 до x1200. */
@media (min-width: 768px) {
  .sv-cards .sv-servers-list .sv-server-item {
    grid-template-columns: 22px minmax(0,1fr) minmax(28px,auto) 56px 98px !important;
    grid-template-areas:
      "icon title stat rate date"
      "icon chron stat rate date" !important;
  }
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-title { display: contents !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { grid-area: title; min-height: 20px; padding-right: 18px; align-self: end; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-statuses {
    grid-area: stat; align-self: center; justify-self: center;
    margin: 0 !important; height: auto !important; gap: 4px !important;
  }
  .sv-cards .sv-servers-list .sv-server-item .sv-status-icon { width: 26px; height: 26px; }
  .sv-cards .sv-servers-list .sv-server-item .sv-status-icon svg { width: 18px !important; height: 18px !important; }
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-rate { justify-self: end; text-align: right !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle { align-self: start; }
  /* стрелка «перейти» при наведении — в конце ячейки названия */
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-title::after {
    grid-area: title; justify-self: end; align-self: end;
    position: relative !important; right: auto !important; top: auto !important; margin: 0 0 3px !important;
  }
}
/* колонка иконок auto: место только у карточек с иконкой; иконки всё равно на одной вертикали,
   т.к. рейт (50px) и дата (98px) справа фиксированной ширины. Без отступа под стрелку — названию тесно */
@media (min-width: 768px) {
  .sv-cards .sv-servers-list .sv-server-item { grid-template-columns: 22px minmax(0,1fr) auto 50px 98px !important; column-gap: 7px !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { padding-right: 0; }
}
/* иконка статуса при наведении только чуть увеличивается, без сдвига вверх: сдвиг на 1px у нижнего
   края уводил иконку из-под курсора → тултип мигал (hover → сдвиг → уход → возврат → hover…) */
.sv-cards .sv-server-item .sv-status-icon:hover { transform: scale(1.08); }

/* 04.10: хроника — «меткой» (вариант Б): у обычных карточек название (14px/400) и хроника сливались.
   Мельче, заглавными, полужирная, приглушённая — читается как подпись-тег и не спорит с названием */
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle {
  font-size: 12px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .06em !important;
  color: #74859c !important;
}
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-chronicle { color: rgba(255,255,255,.66) !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-chronicle { color: rgba(255,255,255,.8) !important; }

/* телефон: хроника-метка мельче рейта в той же строке — выравниваем обе по центру строки */
@media (max-width: 440px) {
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle,
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-rate { align-self: center !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle { display: flex; align-items: center; }
}

/* 04.10: хроника — СНОВА обычное начертание (метку Б владелец отменил): 14px / 400, без заглавных */
.sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle {
  font-size: 14px !important; font-weight: 400 !important;
  text-transform: none; letter-spacing: normal !important;
  color: #8d939d !important;
}
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-chronicle { color: rgba(255,255,255,.62) !important; }
.sv-cards .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-chronicle { color: rgba(255,255,255,.85) !important; }

/* 04.10: ПК — вариант В: хроника справа НАД рейтом, название одно в своей строке по центру.
   Сетка: [значок] [название] [иконки] [хроника/рейт] [дата] */
@media (min-width: 768px) {
  .sv-cards .sv-servers-list .sv-server-item {
    grid-template-columns: 22px minmax(0,1fr) auto 86px 98px !important;
    grid-template-areas:
      "icon title stat chron date"
      "icon title stat rate  date" !important;
    column-gap: 6px !important;
  }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { align-self: center !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-title::after { align-self: center !important; margin: 0 !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle {
    justify-self: end; align-self: end !important; text-align: right;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-height: 0 !important; line-height: 1.25 !important;
  }
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-rate { align-self: start !important; justify-self: end; line-height: 1.3 !important; }
}
@media (min-width: 768px) {
  /* колонка хроники/рейта расширяется под длинные хроники (Grand Crusade, Homunculus) — без обрезки */
  .sv-cards .sv-servers-list .sv-server-item { grid-template-columns: 22px minmax(0,1fr) auto minmax(86px,auto) 98px !important; }
  /* у сервера без рейта строка рейта не схлопывается — все карточки одной высоты */
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-rate { min-height: 19.5px; }
  /* длинное название с пробелом, не влезшее даже после ужатия, переносится ПО ПРОБЕЛУ (класс ставит JS) */
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-link.cp-wrap { white-space: normal !important; text-overflow: clip !important; line-height: 1.15 !important; overflow-wrap: normal; word-break: normal; }
}

/* 04.10: ПК — рейт сверху, хроника под ним (поменяли местами по просьбе владельца) */
@media (min-width: 768px) {
  .sv-cards .sv-servers-list .sv-server-item {
    grid-template-areas:
      "icon title stat rate  date"
      "icon title stat chron date" !important;
  }
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-rate { align-self: end !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle { align-self: start !important; }
}

/* 04.10: серверы без статуса — как на сайте раньше: название и хроника одного цвета #6e6e6e (светло-серый),
   14px / 400. Хроника у TOP-карточек тоже прежнего цвета */
.sv-cards .sv-servers-list .sv-server-item.sv-server-default .sv-server-item-link { color: #6e6e6e !important; font-weight: 400 !important; }
.sv-cards .sv-servers-list .sv-server-item:not(.sv-server-vip):not(.sv-server-elite) .sv-server-item-chronicle { color: #6e6e6e !important; }
.sv-cards .sv-servers-list .sv-server-item.sv-server-vip:not(.sv-servers-list-priority .sv-server-vip) .sv-server-item-chronicle,
.sv-cards .sv-servers-list .sv-server-item.sv-server-elite:not(.sv-servers-list-priority .sv-server-elite) .sv-server-item-chronicle { color: #6e6e6e !important; }

/* 04.10: телефон — больше места под название: значок/стрелка ближе к краю, колонка значка уже */
@media (max-width: 767.98px) {
  .sv-cards .sv-servers-list .sv-server-item {
    padding-left: 5px !important;
    column-gap: 6px !important;
    grid-template-columns: 18px minmax(0,1fr) auto 92px !important;
  }
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-priority { width: 18px !important; }
  .sv-cards .sv-server-item .sv-server-item-priority svg.sv-chevron { width: 14px; height: 14px; }
}

/* 04.10: телефон — иконки статусов одной колонкой: во второй строке, сразу перед рейтом.
   Рейт фиксированной ширины (52px, влезает x100k) → иконки во всех карточках на одной вертикали.
   Название теперь занимает всю верхнюю строку до даты. */
@media (max-width: 767.98px) {
  .sv-cards .sv-servers-list .sv-server-item {
    grid-template-columns: 18px minmax(0,1fr) auto 52px 92px !important;
    grid-template-areas:
      "icon title title title date"
      "icon chron stat  rate  date" !important;
  }
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-title { display: contents !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { grid-area: title; min-width: 0; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-statuses { grid-area: stat; align-self: center !important; justify-self: end; }
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-rate { grid-area: rate; justify-self: end; text-align: right !important; align-self: center !important; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-chronicle { grid-area: chron; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-title::after { display: none; }
}

/* 04.10 (по просьбе владельца): телефон — иконка статуса НАД рейтом (верхняя строка, справа),
   левый отступ у значка/стрелки возвращён как было (10px, колонка 22px, зазор 8px) */
@media (max-width: 767.98px) {
  .sv-cards .sv-servers-list .sv-server-item {
    padding-left: 10px !important;
    column-gap: 8px !important;
    grid-template-columns: 22px minmax(0,1fr) 52px 92px !important;
    grid-template-areas:
      "icon title stat date"
      "icon chron rate date" !important;
  }
  .sv-cards .sv-servers-list .sv-server-item > .sv-server-item-priority { width: 22px !important; }
  .sv-cards .sv-server-item .sv-server-item-priority svg.sv-chevron { width: 16px; height: 16px; }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-statuses { justify-self: end; align-self: center !important; }
}
@media (max-width: 767.98px) {
  /* ужатое название не должно делать карточку ниже — строка названия фиксированной высоты */
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-link { min-height: 21px; line-height: 21px !important; }
  /* колонка рейта/иконки уже: x100k влезает в 46px */
  .sv-cards .sv-servers-list .sv-server-item { grid-template-columns: 22px minmax(0,1fr) 46px 92px !important; }
}
/* узкие телефоны (<385px, напр. 360/375): места на название над иконкой не хватает (MULTERIA[MULTI-SUB]
   обрезался) — там иконка во второй строке перед рейтом, тоже одной колонкой */
@media (max-width: 384.98px) {
  .sv-cards .sv-servers-list .sv-server-item {
    grid-template-columns: 22px minmax(0,1fr) auto 46px 92px !important;
    grid-template-areas:
      "icon title title title date"
      "icon chron stat  rate  date" !important;
  }
}

/* 04.10: телефоны 370–399px (Samsung — 384px): иконка НАД рейтом за счёт более узких колонок
   рейта (40px) и даты (86px). Запасной вариант (иконка во 2-й строке) — только уже 370px. */
@media (max-width: 399.98px) {
  .sv-cards .sv-servers-list .sv-server-item {
    grid-template-columns: 22px minmax(0,1fr) 40px 86px !important;
    grid-template-areas: "icon title stat date" "icon chron rate date" !important;
    column-gap: 7px !important; padding-right: 8px !important;
  }
  .sv-cards .sv-servers-list .sv-server-item .sv-server-item-date,
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-vip .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday),
  .sv-cards .sv-servers-list .sv-servers-list-priority .sv-server-item.sv-server-elite .sv-server-item-date:not(.sv-server-item-today):not(.sv-server-item-tomorrow):not(.sv-server-item-yesterday) {
    width: 86px !important; min-width: 86px !important; max-width: 86px !important; padding-left: 4px !important; padding-right: 4px !important;
  }
}
@media (max-width: 369.98px) {
  .sv-cards .sv-servers-list .sv-server-item {
    grid-template-columns: 22px minmax(0,1fr) auto 40px 86px !important;
    grid-template-areas: "icon title title title date" "icon chron stat rate date" !important;
  }
}

/* 04.10: телефон — у карточки БЕЗ иконок статуса название занимает и колонку иконки
   (на странице рекламы карточка узкая: «DOMAIN-NAME.C…» обрезалось) */
@media (max-width: 767.98px) {
  .sv-cards .sv-servers-list .sv-server-item:not(:has(.sv-server-statuses)) {
    grid-template-areas: "icon title title date" "icon chron rate date" !important;
  }
}
@media (max-width: 369.98px) {
  .sv-cards .sv-servers-list .sv-server-item:not(:has(.sv-server-statuses)) {
    grid-template-areas: "icon title title title date" "icon chron stat rate date" !important;
  }
}
/* страница рекламы, телефон: карточка-пример такой же ширины, как на главной (12px от края экрана).
   Раньше её ужимали отступы блока-описания (20px) и подложки (6px): 348px вместо 388 на 412-м экране */
@media (max-width: 767.98px) {
  .sv-page-advertising .sv-page-advertising-item .sv-servers-list {
    margin-left: -14px !important; margin-right: -14px !important;
    padding-left: 0 !important; padding-right: 0 !important;
    max-width: none !important; background: none !important; box-shadow: none !important;
  }
}