:root {
    --bg: #f5f7fb;
    --card: #ffffff;
    --border: #d0d5dd;
    --text: #101828;
    --muted: #667085;
    --accent: #2563eb;
    --shadow: 0 12px 36px rgba(16, 24, 40, .08);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

button,
select,
a {
    font: inherit;
}

.route-page {
    min-height: 100vh;
}

.route-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: #0f172a;
    color: #fff;
}

.route-header h1 {
    margin: 0 0 4px;
    font-size: 28px;
}

.route-header p {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}

.route-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.route-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 9px;
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.08);
}

.route-nav a.active,
.route-nav a:hover {
    background: rgba(255,255,255,.16);
}

.route-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 18px;
    padding: 18px;
    align-items: start;
}

.route-sidebar {
    position: sticky;
    top: 14px;
    display: grid;
    gap: 14px;
}

.route-content {
    display: grid;
    gap: 16px;
}

.card,
.diagram-card,
.empty-state {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.card {
    padding: 15px;
}

.card h2 {
    margin: 0 0 12px;
    font-size: 17px;
}

.field {
    display: block;
    margin-bottom: 12px;
}

.field span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.field select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
}

.sidebar-actions {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.sidebar-actions button,
.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

.sidebar-actions button:hover,
.link-button:hover:not(.disabled) {
    border-color: var(--accent);
}

.link-button.disabled {
    opacity: .55;
    pointer-events: none;
}

.legend {
    display: grid;
    gap: 8px;
    font-size: 13px;
}

.legend-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
}

.legend-icon.stop {
    border-radius: 50%;
    background: #2563eb;
    box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 1px #2563eb;
}

.legend-icon.switch {
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: #f59e0b;
    box-shadow: 0 0 0 1px #f59e0b;
}

.legend-icon.signal {
    border-radius: 3px;
    background: #ef4444;
}

.legend-icon.depot {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid #7c3aed;
    margin-right: 10px;
    vertical-align: -1px;
}

.legend-icon.other {
    border-radius: 50%;
    background: #64748b;
}

.muted {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.status-box {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.status-box.error {
    color: #b42318;
}

.empty-state {
    padding: 28px;
    text-align: center;
}

.empty-state h2 {
    margin: 0 0 8px;
    font-size: 24px;
}

.empty-state p {
    margin: 0;
    color: var(--muted);
}

.diagram-cards {
    display: grid;
    gap: 16px;
}

.diagram-card {
    overflow: hidden;
}

.diagram-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 8px;
}

.diagram-card__header h3 {
    margin: 0 0 5px;
    font-size: 19px;
}

.diagram-card__header p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.arrow {
    margin: 0 8px;
    color: #2563eb;
    font-weight: 700;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.badge--secondary {
    background: #ede9fe;
    color: #6d28d9;
}

.badge--muted {
    background: #f2f4f7;
    color: #344054;
}

.diagram-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 0 18px 10px;
    color: #475467;
    font-size: 13px;
}

.diagram-scroll {
    overflow-x: auto;
    padding: 10px 10px 16px;
    border-top: 1px solid #eef2f7;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.route-svg {
    display: block;
    min-width: 100%;
    max-width: none;
}

.distance-label {
    fill: #475467;
    font-size: 12px;
    font-weight: 700;
}

.node-id-label {
    fill: #98a2b3;
    font-size: 10px;
    font-weight: 700;
}

.node-label {
    fill: #1d2939;
    font-size: 11px;
}

.node-label--stop {
    font-size: 12px;
    font-weight: 700;
}

.node-label--technical {
    fill: #475467;
}

@media (max-width: 980px) {
    .route-layout {
        grid-template-columns: 1fr;
    }

    .route-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .route-header {
        flex-direction: column;
    }

    .diagram-card__header {
        flex-direction: column;
    }

    .diagram-card__meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}


.legend img,
.legend-svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -4px;
    object-fit: contain;
}


.movement-card {
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.movement-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 18px 10px;
}

.movement-card__header h2 {
    margin: 0 0 5px;
    font-size: 22px;
}

.movement-card__header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.movement-controls {
    display: grid;
    grid-template-columns:
        minmax(280px, 1.8fr)
        minmax(180px, .8fr)
        auto;
    gap: 10px;
    align-items: end;
    padding: 8px 18px 10px;
}

.movement-controls label > span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.movement-controls select,
.movement-controls input,
.movement-controls button {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
}

.movement-controls button {
    cursor: pointer;
}

.movement-controls button:hover:not(:disabled) {
    border-color: var(--accent);
}

.movement-controls button:disabled {
    opacity: .55;
    cursor: wait;
}

.secondary-button {
    background: #f8fafc !important;
}

.movement-day-note {
    margin: 0 18px 14px;
    padding: 10px 12px;
    border: 1px solid #b2ddff;
    border-radius: 10px;
    background: #eff8ff;
    color: #175cd3;
    font-size: 13px;
    line-height: 1.45;
}

.movement-status {
    margin: 0 18px 12px;
    color: var(--muted);
    font-size: 13px;
}

.movement-status.error {
    color: #b42318;
}

.movement-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 18px 12px;
    padding: 10px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 13px;
}

.movement-summary span {
    color: var(--muted);
}

.movement-summary em {
    color: #b54708;
    font-style: normal;
}

.movement-graph {
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    border-top: 1px solid #eaecf0;
    background: #fff;
}

.movement-label-column {
    position: relative;
    z-index: 2;
    flex: 0 0 260px;
    width: 260px;
    border-right: 1px solid #d0d5dd;
    background: #fff;
    box-shadow: 8px 0 16px rgba(16, 24, 40, .05);
}

.movement-axis-caption {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.movement-stop-label {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 25px;
    padding-right: 5px;
    overflow: hidden;
    text-align: right;
    line-height: 1.08;
}

.movement-stop-label span {
    display: block;
    overflow: hidden;
    color: #1d2939;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movement-stop-label small {
    display: block;
    color: #98a2b3;
    font-size: 9px;
}

.movement-svg-scroll {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
    scrollbar-color: #98a2b3 #f2f4f7;
    scrollbar-width: auto;
}

.movement-svg-scroll::-webkit-scrollbar {
    height: 16px;
}

.movement-svg-scroll::-webkit-scrollbar-track {
    background: #f2f4f7;
}

.movement-svg-scroll::-webkit-scrollbar-thumb {
    background: #98a2b3;
    border: 3px solid #f2f4f7;
    border-radius: 999px;
}

.movement-svg {
    display: block;
    background: #fff;
}

.movement-stop-grid {
    stroke: #dfe3e8;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.movement-time-grid {
    shape-rendering: crispEdges;
}

.movement-time-grid.minor {
    stroke: #f2f4f7;
    stroke-width: 1;
}

.movement-time-grid.quarter {
    stroke: #e4e7ec;
    stroke-width: 1;
}

.movement-time-grid.half {
    stroke: #d0d5dd;
    stroke-width: 1;
}

.movement-time-grid.major {
    stroke: #98a2b3;
    stroke-width: 1.4;
}

.movement-time-grid.day-break {
    stroke: #175cd3;
    stroke-width: 2.4;
}

.movement-time-label {
    fill: #475467;
    font-size: 12px;
    font-weight: 650;
}

.movement-time-label.hour {
    fill: #101828;
    font-size: 13px;
    font-weight: 800;
}

.movement-time-label--next-day {
    fill: #175cd3;
    font-size: 10px;
    font-weight: 700;
}

.movement-day-break-label {
    fill: #175cd3;
    font-size: 11px;
    font-weight: 800;
}

.movement-trip-line,
.movement-trip-hit {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.movement-trip-line {
    stroke-width: 2.1;
    opacity: .82;
    pointer-events: none;
}

.movement-trip-hit {
    stroke: transparent;
    stroke-width: 10;
    pointer-events: stroke;
    cursor: help;
}

.movement-trip:hover .movement-trip-line {
    stroke-width: 4;
    opacity: 1;
}

.movement-trip--0 .movement-trip-line { stroke: #2563eb; }
.movement-trip--1 .movement-trip-line { stroke: #7c3aed; }
.movement-trip--2 .movement-trip-line { stroke: #0891b2; }
.movement-trip--3 .movement-trip-line { stroke: #dc2626; }
.movement-trip--4 .movement-trip-line { stroke: #059669; }
.movement-trip--5 .movement-trip-line { stroke: #d97706; }
.movement-trip--6 .movement-trip-line { stroke: #4f46e5; }
.movement-trip--7 .movement-trip-line { stroke: #be185d; }

@media (max-width: 900px) {
    .movement-controls {
        grid-template-columns: 1fr 1fr;
    }

    .movement-controls button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .movement-card__header {
        flex-direction: column;
    }

    .movement-controls {
        grid-template-columns: 1fr;
    }

    .movement-controls button {
        grid-column: auto;
    }

    .movement-label-column {
        flex-basis: 190px;
        width: 190px;
    }
}

@media (max-width: 480px) {
    .movement-controls {
        grid-template-columns: 1fr;
    }
}

.route-line{stroke:#0f172a;stroke-width:4;}
.route-line--virtual{stroke:#dc2626;stroke-width:4;stroke-dasharray:10 7;}
.badge--draft{color:#175cd3;background:#eff8ff;border-color:#b2ddff;}
.badge--warning{color:#b42318;background:#fff1f0;border-color:#fda29b;}


/* Уточнение временной шкалы: при масштабе 8 px/мин подписи через
   15 минут расположены с шагом 120 px и не перекрываются. */
.movement-time-grid.quarter {
    stroke: #d8dee7;
    stroke-width: 1.15;
}

.movement-time-grid.half {
    stroke: #b8c1ce;
    stroke-width: 1.35;
}

.movement-time-grid.major {
    stroke: #667085;
    stroke-width: 1.65;
}

.movement-time-label {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
}

.movement-time-label.hour {
    font-size: 14px;
}

.movement-day-note strong {
    color: #123d86;
}


/* Другие маршруты на общих участках графика движения. */
.movement-other-routes-note {
    padding: 6px 18px;
    border-bottom: 1px solid #eaecf0;
    background: #f8fafc;
    color: #667085;
    font-size: 11px;
    line-height: 1.35;
}

.movement-other-trip-line {
    fill: none;
    stroke: #98a2b3;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .34;
    pointer-events: none;
}

.movement-other-trip-stub {
    stroke: #667085;
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: .48;
    pointer-events: none;
}

.movement-other-trip-label {
    fill: #667085;
    font-size: 9px;
    font-weight: 800;
    opacity: .72;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
}

.movement-other-trip:hover .movement-other-trip-line {
    stroke-width: 2.3;
    opacity: .70;
}

.movement-other-trip:hover .movement-other-trip-stub,
.movement-other-trip:hover .movement-other-trip-label {
    opacity: 1;
}


/* Пояснение других маршрутов размещается в сводке и не влияет
   на двухколоночную разметку самого графика. */
.movement-summary .movement-other-routes-note {
    flex: 0 0 100%;
    width: 100%;
    margin: 2px 0 0;
    padding: 6px 8px 0;
    border: 0;
    border-top: 1px solid #e4e7ec;
    background: transparent;
    color: #667085;
    font-size: 11px;
    line-height: 1.35;
}


/* Текущее московское время на графике движения. */
.movement-now-marker {
    pointer-events: none;
}

.movement-now-line {
    stroke: #d92d20;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .88;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.movement-now-label {
    fill: #b42318;
    font-size: 11px;
    font-weight: 800;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 4px;
    stroke-linejoin: round;
    pointer-events: none;
}


/* Маркер v2. SVG содержит те же атрибуты и остаётся видимым без CSS. */
.movement-now-label-box {
    pointer-events: none;
}

.movement-now-line {
    stroke: #dc2626;
    stroke-width: 3;
    stroke-dasharray: 8 4;
    opacity: .96;
}

.movement-now-label {
    fill: #b91c1c;
    font-size: 11px;
    font-weight: 800;
}


/* Рейс, открытый вторым кликом по вагону. */
.movement-svg--has-highlight
.movement-trip:not(.movement-trip--highlighted)
.movement-trip-line {
    opacity: .16;
}

.movement-trip--highlighted
.movement-trip-line {
    stroke: #ef4444 !important;
    stroke-width: 6 !important;
    opacity: 1 !important;
    filter:
        drop-shadow(
            0 0 2px
            rgba(255, 255, 255, .95)
        )
        drop-shadow(
            0 0 4px
            rgba(239, 68, 68, .72)
        );
}

.movement-trip--highlighted
.movement-trip-hit {
    stroke-width: 16;
}

.legend-section-title{grid-column:1/-1;margin-top:8px;font-weight:700}.route-segment-swatch{display:inline-block;width:28px;height:6px;border-radius:4px;vertical-align:middle}.route-segment-swatch--tram-overhead {
    position: relative;
    background: #fff;
    border: 3px solid #0f172a;
    height: 9px;
}.route-segment-swatch--tram-battery {
    background: #fff;
    border: 3px solid #0f172a;
    height: 9px;
}.route-segment-swatch--third-center{background:#ca8a04}.route-segment-swatch--road{background:#64748b;height:8px}.route-segment-swatch--water{background:#2563eb}.route-segment-swatch--trolley{background:repeating-linear-gradient(90deg,#0f766e 0 5px,transparent 5px 9px)}

.route-segment-swatch--tram-overhead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #374151;
    transform: translateY(-50%);
}