* { box-sizing: border-box; }

    body {
        margin: 0;
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(14,165,233,.25), transparent 35%),
            radial-gradient(circle at bottom right, rgba(34,197,94,.18), transparent 30%),
            #020617;
        color: #fff;
        font-family: Inter, Arial, sans-serif;
    }

    header {
        padding: 24px 30px;
        background: rgba(15, 23, 42, .78);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(148,163,184,.18);
        box-shadow: 0 20px 60px rgba(0,0,0,.35);
    }

    h1 {
        margin: 0;
        font-size: 34px;
        letter-spacing: -1px;
        text-shadow: 0 0 24px rgba(56,189,248,.45);
    }

    h2 {
        margin: 22px 0 12px;
        font-size: 22px;
    }

    .wrap {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 20px;
        padding: 20px;
    }

    .mapbox, .panel {
        background: rgba(15, 23, 42, .72);
        border: 1px solid rgba(148,163,184,.18);
        border-radius: 22px;
        box-shadow: 0 24px 80px rgba(0,0,0,.45);
        backdrop-filter: blur(16px);
    }

    .mapbox {
        position: relative;
        overflow: hidden;
    }

    .mapbox::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(circle, black 55%, transparent 90%);
        z-index: 2;
    }

    .panel {
        padding: 20px;
        overflow-y: auto;
        max-height: calc(100vh - 125px);
    }

    svg {
        width: 100%;
        height: calc(100vh - 125px);
        display: block;
        background:
            radial-gradient(circle at center, rgba(30,64,175,.18), transparent 45%),
            #071827;
    }

    .field {
        stroke: rgba(255,255,255,.34);
        stroke-width: 2;
        filter: drop-shadow(0 8px 12px rgba(0,0,0,.45));
        transition: opacity .2s, stroke .2s, filter .2s;
    }

    .field:hover {
        opacity: .95;
        stroke: #38bdf8;
        filter: drop-shadow(0 0 14px rgba(56,189,248,.55));
    }

    .vehicle {
        fill: #38bdf8;
        stroke: #fff;
        stroke-width: 4;
        filter: drop-shadow(0 0 16px rgba(56,189,248,.9));
    }

    .train {
        fill: #fb923c;
        filter: drop-shadow(0 0 16px rgba(251,146,60,.9));
    }

    .label {
        fill: #fff;
        font-size: 20px;
        font-weight: 800;
        paint-order: stroke;
        stroke: rgba(0,0,0,.9);
        stroke-width: 5px;
        stroke-linejoin: round;
    }

    .small {
        color: #93c5fd;
        font-size: 13px;
    }

    .card {
        padding: 14px;
        background:
            linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,41,59,.75));
        border: 1px solid rgba(148,163,184,.16);
        border-radius: 16px;
        margin-bottom: 12px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }

    .card strong {
        color: #fff;
        font-size: 16px;
    }

    #browserUpdate {
        color: #22c55e;
        font-weight: 700;
    }