/* Group Activity Cards — compact rows */
        .ga-section-label {
            display: flex;
            align-items: center;
            gap: 6px;
            color: rgba(255,255,255,0.35);
            font-size: var(--bp-fs-caption);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            /* Тот же ритм, что у заголовков групп слотов выше: воздух сверху,
               подпись прижата к своему списку. */
            margin: var(--bp-space-6) 0 var(--bp-space-2);
        }
        /* Строки плотного списка — ступень 2; она же у списков «Сообщений»
           и «Уведомлений», чтобы одинаковое выглядело одинаково. */
        .ga-list { display: flex; flex-direction: column; gap: var(--bp-space-2); }
        .ga-card {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(30, 41, 59, 0.6);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px;
            padding: var(--bp-space-3) 12px;
            color: #e2e8f0;
            cursor: pointer;
            transition: all 0.15s;
        }
        @media (hover: hover) and (pointer: fine) {
            .ga-card:hover {
                background: rgba(30, 41, 59, 0.9);
                border-color: rgba(255,255,255,0.12);
            }
        }
        .ga-card.ga-full { opacity: 0.5; }
        .ga-time-badge {
            font-weight: 700;
            font-size: var(--bp-fs-secondary);
            color: white;
            min-width: 38px;
        }
        .ga-body { flex: 1; min-width: 0; }
        .ga-title {
            font-weight: 600;
            font-size: var(--bp-fs-secondary);
        }
        .ga-sub {
            font-size: var(--bp-fs-caption);
            color: #64748b;
            white-space: normal;
            overflow-wrap: anywhere;
        }
        .ga-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
            flex-shrink: 0;
        }
        .ga-price {
            font-weight: 700;
            font-size: var(--bp-fs-secondary);
            color: var(--bp-green);
        }
        .ga-card.ga-full .ga-price { color: #64748b; }
        .ga-spots-badge {
            font-size: var(--bp-fs-micro);
            font-weight: 600;
            padding: 1px 6px;
            border-radius: 8px;
        }
        .ga-spots-left {
            background: rgba(121, 172, 43, 0.15);
            color: #4ade80;
        }
        .ga-spots-none {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
        }
        .ga-expand-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 7px;
            background: rgba(148, 163, 184, 0.08);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px;
            color: #cbd5e1;
            font-size: var(--bp-fs-caption);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
        }
        @media (hover: hover) and (pointer: fine) {
            .ga-expand-btn:hover {
                background: rgba(148, 163, 184, 0.14);
                color: #e2e8f0;
            }
        }

        .queue-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #7c3aed;
            color: white;
            font-size: var(--bp-fs-micro);
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }

        .captain-rate-badge {
            position: absolute;
            bottom: -8px;
            left: -4px;
            font-size: 0.5rem;
            font-weight: 800;
            padding: 2px 5px;
            border-radius: 6px;
            white-space: nowrap;
            z-index: 1;
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            color: white;
            box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
        }

        .captain-rate-badge.prime {
            background: rgba(148, 163, 184, 0.40);
            color: white;
            box-shadow: none;
        }

        .captain-rate-badge.mixed {
            background: rgba(139, 92, 246, 0.50);
            color: white;
            box-shadow: none;
        }

        /* Urgency badges */
        .urgency-badge {
            position: absolute;
            top: -7px;
            right: -7px;
            font-size: 0.5rem;
            font-weight: 800;
            padding: 2px 5px;
            border-radius: 6px;
            white-space: nowrap;
            z-index: 2;
            line-height: 1.3;
            letter-spacing: 0.02em;
        }
        .urgency-badge.last {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
            box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
            animation: pulse-badge 1.5s ease-in-out infinite;
        }
        .urgency-badge.few {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
        }
        .urgency-badge.single {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            color: white;
            box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
        }
        @keyframes pulse-badge {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .duration-dots {
            display: flex;
            gap: 3px;
            justify-content: center;
            align-items: center;
            min-height: 10px;
        }
        .duration-dots .dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255,255,255,0.85);
        }
        .duration-dots .dot.half {
            background: linear-gradient(90deg, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.25) 50%);
        }
        /* Trainer availability — inline glyph left of the duration dots */
        .duration-dots .slot-trainer-inline {
            font-size: var(--bp-fs-micro);
            line-height: 1;
            color: rgba(255,255,255,0.95);
            margin-right: 1px;
        }

        /* Single court info popover */
        .single-info-popover {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            border: 1px solid rgba(139, 92, 246, 0.3);
            color: white;
            padding: var(--bp-space-3) 16px;
            border-radius: 10px;
            font-size: var(--bp-fs-secondary);
            z-index: 1001;
            max-width: 280px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        }

        /* Waitlist slot with label */
        .slot-btn.waitlist {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0;
            padding: 8px 6px;
        }

        .slot-btn.waitlist .slot-time {
            font-size: var(--bp-fs-body);
            line-height: 1.2;
        }

        .waitlist-label {
            display: flex;
            align-items: center;
            gap: 3px;
            font-size: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            opacity: 0.9;
            margin-top: 4px;
        }

        .waitlist-plus {
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 50%;
            position: relative;
        }

        .waitlist-plus::before,
        .waitlist-plus::after {
            content: '';
            position: absolute;
            background: var(--bp-orange);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .waitlist-plus::before {
            width: 6px;
            height: 2px;
        }

        .waitlist-plus::after {
            width: 2px;
            height: 6px;
        }

        /* Tooltip for waitlist slots */
        .slot-btn.waitlist {
            position: relative;
        }

        .slot-btn.waitlist[data-tip]::after {
            content: attr(data-tip);
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: #0f172a;
            color: white;
            font-size: var(--bp-fs-micro);
            font-weight: 400;
            padding: 6px 10px;
            border-radius: 6px;
            width: 130px;
            white-space: normal;
            text-align: center;
            line-height: 1.3;
            /* `display: none`, а не прозрачность: спрятанный прозрачностью
               элемент продолжает занимать место, и подсказка шириной 130px
               распирала колонку слота (77px) — страница получала
               горизонтальную прокрутку, хотя на глаз за край ничего не
               торчало. Подсказка живёт только под мышью, поэтому терять с
               появлением ей нечего. */
            display: none;
            z-index: 200;
            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
            pointer-events: none;
        }

        @media (hover: hover) and (pointer: fine) {
            .slot-btn.waitlist[data-tip]:hover::after {
                display: block;
            }
        }

        /* Fix plus icon - move to separate element */
        .slot-btn.waitlist .waitlist-plus::before,
        .slot-btn.waitlist .waitlist-plus::after {
            content: '';
            position: absolute;
            background: var(--bp-orange);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .slot-btn.waitlist .waitlist-plus::before {
            width: 6px;
            height: 2px;
            border: none;
        }

        .slot-btn.waitlist .waitlist-plus::after {
            width: 2px;
            height: 6px;
            border: none;
        }