/* Вынесено из header.php. Правьте здесь — страница подключает этот файл. */
.gs-dd {
    position: fixed; z-index: 99999; display: none;
    background: linear-gradient(160deg, rgba(10,32,42,.97) 0%, rgba(6,20,30,.97) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(38,230,150,.18); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden; font-family: 'Inter', system-ui, sans-serif;
    opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease;
}
.gs-dd.open { display: block; }
.gs-dd.show { opacity: 1; transform: translateY(0); }
.gs-dd::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(38,230,150,.55), rgba(34,211,238,.55), transparent);
}
.gs-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: rgba(255,255,255,.42);
}
.gs-head b { color: #26e696; font-weight: 800; }
.gs-list { max-height: min(460px, calc(100vh - 140px)); overflow-y: auto; padding: 0 6px 6px; overscroll-behavior: contain; }
.gs-list::-webkit-scrollbar { width: 6px; }
.gs-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 6px; }

.gs-item {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 12px; text-decoration: none; color: #e2e8f0;
    transition: background .15s ease;
}
.gs-item + .gs-item { margin-top: 2px; }
.gs-item:hover, .gs-item.active { background: rgba(255,255,255,.06); }
.gs-item.active { box-shadow: 0 0 0 1px rgba(38,230,150,.35) inset; }

/* Аватар с рамкой "подтверждён / не подтверждён" — как в каталоге */
.gs-ava { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.gs-ava img, .gs-ava .gs-ava-ph {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; box-sizing: border-box;
    border: 2px solid #475569; background: #0f2530;
}
.gs-ava .gs-ava-ph {
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: #fff;
    background: linear-gradient(135deg, #0ea5a4, #2563eb);
}
.gs-ava.verified img, .gs-ava.verified .gs-ava-ph { border-color: #33e649; box-shadow: 0 0 0 3px rgba(51,230,73,.14); }
.gs-ava-badge {
    position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 2px solid #0a1f29;
    background: #475569; color: #fff; font-size: 8.5px; font-weight: 800; line-height: 1;
}
.gs-ava.verified .gs-ava-badge { background: #33e649; }
.gs-ava-badge svg { width: 8px; height: 8px; fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

.gs-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-title {
    font-size: 13px; font-weight: 700; color: #f8fafc; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.gs-title mark { background: rgba(38,230,150,.2); color: #5ef3b4; border-radius: 3px; padding: 0 1px; }
.gs-user { font-size: 11.5px; color: #7c93a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gs-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.gs-subs { font-size: 11px; font-weight: 600; color: #9fb3c3; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.gs-subs svg { width: 11px; height: 11px; opacity: .7; }

/* ============ БЕЙДЖ РЕЙТИНГА ============ */
.gs-rank {
    --c1: #334155; --c2: #1e293b; --bd: rgba(148,163,184,.35); --tx: #cbd5e1; --ic: #94a3b8; --glow: transparent;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; gap: 5px;
    min-width: 62px; height: 24px; padding: 0 9px 0 4px; box-sizing: border-box; border-radius: 999px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    border: 1px solid var(--bd); color: var(--tx);
    box-shadow: 0 0 14px var(--glow), inset 0 1px 0 rgba(255,255,255,.14);
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .2px; line-height: 1;
}
.gs-rank-ic {
    width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.22); color: var(--ic);
}
.gs-rank-ic svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.gs-rank-val { flex: 1; text-align: right; }
.gs-rank::after { /* блик */
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-20deg); opacity: 0;
}
.gs-rank.zero { opacity: .6; }
.gs-rank.t-silver { --c1: #0e4c68; --c2: #0b2f44; --bd: rgba(56,189,248,.55); --tx: #e0f2fe; --ic: #7dd3fc; --glow: rgba(56,189,248,.18); }
.gs-rank.t-gold   { --c1: #f7c948; --c2: #d98a0b; --bd: rgba(254,240,138,.8); --tx: #3b1d00; --ic: #fff7cc; --glow: rgba(251,191,36,.35); }
.gs-rank.t-gold .gs-rank-ic { background: rgba(120,53,15,.35); }
.gs-rank.t-diamond {
    --bd: rgba(255,255,255,.55); --tx: #fff; --ic: #fff; --glow: rgba(94,157,255,.45);
    background: linear-gradient(120deg, #22d3a8, #5e9dff, #a855f7, #22d3a8); background-size: 250% 100%;
    animation: gsDiamond 5s linear infinite;
}
.gs-rank.t-gold::after, .gs-rank.t-diamond::after { opacity: 1; animation: gsShine 3.2s ease-in-out infinite; }
.gs-item:hover .gs-rank::after, .gs-item.active .gs-rank::after { opacity: 1; animation: gsShine 1.1s ease-out 1; }
@keyframes gsShine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes gsDiamond { to { background-position: 250% 0; } }
@media (prefers-reduced-motion: reduce) { .gs-rank, .gs-rank::after { animation: none !important; } }

.gs-empty, .gs-loading { padding: 22px 16px; text-align: center; color: #7c93a6; font-size: 12.5px; }
.gs-empty svg { display: block; margin: 0 auto 8px; width: 26px; height: 26px; opacity: .6; }
.gs-sk { display: flex; align-items: center; gap: 12px; padding: 9px 10px; }
.gs-sk i { display: block; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05)); background-size: 200% 100%; animation: gsSk 1.1s linear infinite; }
@keyframes gsSk { to { background-position: -200% 0; } }

/* ---------- Телефоны ---------- */
@media (max-width: 640px) {
    .gs-dd { border-radius: 14px; }
    .gs-list { max-height: calc(100vh - 110px); padding: 0 4px 4px; }
    .gs-item { gap: 10px; padding: 8px; }
    .gs-ava { width: 38px; height: 38px; }
    .gs-title { font-size: 12.5px; }
    .gs-user { font-size: 11px; }
    .gs-subs { font-size: 10.5px; }
    .gs-rank { min-width: 56px; height: 22px; font-size: 11px; padding: 0 8px 0 3px; }
    .gs-rank-ic { width: 16px; height: 16px; }
    .gs-rank-ic svg { width: 10px; height: 10px; }
}