body {
    font-family: 'Inter', sans-serif;
    background-color: #09090b;
    color: #f4f4f5;
    overflow-x: hidden;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #18181b; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }

.metro-line {
    fill: none;
    stroke: #10b981;
    stroke-width: 12;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.station-dot {
    transition: all 0.2s ease;
    cursor: pointer;
    fill: #ffffff;
    stroke: #10b981;
    stroke-width: 4;

    /* Привязываем центр трансформации к границам самого кружка */
    transform-box: fill-box;
    transform-origin: center;
}

.station-dot:hover, .station-dot.active {
    fill: #10b981;
    stroke: #ffffff;
    /* Увеличиваем размер на 50% ровно из центра */
    transform: scale(1.5);
    /* Делаем обводку чуть тоньше, так как при scale она тоже увеличивается пропорционально */
    stroke-width: 3;
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.8));
}

.station-text {
    fill: #a1a1aa;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.station-text:hover, .station-text.active {
    fill: #ffffff;
    font-weight: 700;
}

.train-group {
    cursor: pointer;
    transition: filter 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.train-group:hover {
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 1));
}
.train-body-fwd {
    fill: #1d4ed8;
    stroke: #fbbf24; /* Желтая обводка для направления на Ботаническую */
    stroke-width: 1.5px;
}
.train-body-bwd {
    fill: #1d4ed8;
    stroke: #38bdf8; /* Голубая обводка для направления на Космонавтов */
    stroke-width: 1.5px;
}
#tooltip {
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.1s ease;
    z-index: 50;
}

.glass-panel {
    background: rgba(24, 24, 27, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pulse-dot {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.2); }
}