.slide-panel {
            position: fixed;
            bottom: -1px;
            left: 0;
            right: 0;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            transform: translateY(100%);
        }

        .slide-panel.hidden-panel {
            transform: translateY(100%);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.4s ease, opacity 0.3s ease;
        }

        .slide-panel.expanded {
            transform: translateY(0);
        }

        .panel-handle {
            width: 60px;
            height: 6px;
            background: #4a4a62;
            border-radius: 4px;
            margin: 10px auto 6px;
            flex-shrink: 0;
            cursor: pointer;
            transition: background 0.3s;
        }
        .panel-handle:hover {
            background: #ffc100;
        }

        .panel-body {
            background: #18182a;
            border-radius: 20px 20px 0 0;
            border: 1px solid #4b4b4b;
            border-bottom: none;
            padding: 4px 20px 24px;
            width: 100%;
            max-width: 500px;
            max-height: 70vh;
            overflow-y: auto;
            box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
        }
        .panel-body::-webkit-scrollbar {
            width: 4px;
        }
        .panel-body::-webkit-scrollbar-track {
            background: transparent;
        }
        .panel-body::-webkit-scrollbar-thumb {
            background: #ffc100;
            border-radius: 4px;
        }

        /* ===== ГОРИЗОНТАЛЬНЫЙ ТРЕКЕР ===== */
        .horizontal-timeline {
            display: flex;
            flex-direction: column;
            padding: 12px 0 4px;
            position: relative;
        }

        .timeline-track {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            position: relative;
            padding: 20px 6px 10px;
        }

        /* Контейнер для SVG линии */
        .timeline-svg-wrapper {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            overflow: visible;
        }

        .timeline-svg-wrapper svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            position: relative;
            z-index: 1;
            cursor: pointer;
            gap: 8px;
            padding: 0 2px;
        }

        .step-dot {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #414141;
    border: 3px solid #4b4b4b;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 0 0 rgba(255, 193, 0, 0);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

        .step-item.done .step-dot {
            background: #ffc100;
            border-color: #ffb800;
            box-shadow: 0 0 20px rgba(255, 193, 0, 0.3);
        }

        .step-item.active .step-dot {
            width: 52px;
            height: 52px;
            background: #ffc100;
            border-color: #ffb800;
            transform: scale(1);
            box-shadow: 0 0 40px rgba(255, 193, 0, 0.5);
        }

        .step-icon {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
        }

        .step-icon img {
            width: 55%;
            height: 55%;
            display: block;
            filter: brightness(0) invert(1);
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .step-item.active .step-icon img {
            width: 65%;
            height: 65%;
            filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 193, 0, 0.8));
        }

        .step-label {
            font-size: 11px;
            font-weight: 500;
            color: #7a7a94;
            text-align: center;
            white-space: nowrap;
            transition: color 0.3s;
        }

        .step-item.done .step-label {
            color: #ffc100;
        }
        .step-item.active .step-label {
            color: #ffc100;
            font-weight: 600;
        }

        .panel-loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px 0;
        }
        .panel-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid #2a2a42;
            border-top-color: #ffc100;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .track-hidden {
            display: none;
        }