:root {
    --ruler-thick: 15px;
    --ruler-bg-a: #768289;
    --ruler-bg-b1: #011c30;
    --ruler-bg-b2: #768289;
    --size-a: 20.27px;
    --size-b: 246.62px;
    --sta-stroke-width-cn: 2px;
    --sta-stroke-width-en: 1.75px;
}

[data-theme="dark"] {
    --ruler-bg-a: #555;
    --ruler-bg-b1: #151515;
    --ruler-bg-b2: #444;
}

#ruler-h-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ruler-thick);
    z-index: 900;
    pointer-events: none;
    overflow: hidden;
    transition: top 0.2s, bottom 0.2s;
    background: transparent;
}

#ruler-h-wrapper.at-bottom {
    top: auto;
    bottom: 0;
}

#ruler-h-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 3000px;
    height: 100%;
    display: flex;
    transform-origin: 0 0;
    will-change: transform;
}

.ruler-block-h {
    height: 100%;
}

#ruler-v-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ruler-thick);
    z-index: 901;
    pointer-events: none;
    overflow: hidden;
    transition: left 0.2s, right 0.2s;
    background: transparent;
}

#ruler-v-wrapper.at-right {
    left: auto;
    right: 0;
}

#ruler-v-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3000px;
    display: flex;
    flex-direction: column;
    transform-origin: 0 0;
    will-change: transform;
}

.ruler-block-v {
    width: 100%;
}

.bg-a {
    background-color: var(--ruler-bg-a);
}

.bg-b1 {
    background-color: var(--ruler-bg-b1);
}

.bg-b2 {
    background-color: var(--ruler-bg-b2);
}

.ruler-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Arimo', sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.ruler-block-v,
.ruler-block-h {
    position: relative;
}

#map-content {
    width: 3000px !important;
    height: 3000px !important;
}

#basemap-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 3000px;
    height: 3000px;
    background-color: var(--map-bg);
    overflow: hidden;
    pointer-events: none;
}

.map-tile {
    position: absolute;
    width: 256px;
    height: 256px;
    image-rendering: -webkit-optimize-contrast;
    transform-origin: 0 0;
}

.stacn {
    -webkit-text-stroke: var(--sta-stroke-width-cn) var(--map-bg);
    paint-order: stroke fill;
}

.staen {
    -webkit-text-stroke: var(--sta-stroke-width-en) var(--map-bg);
    paint-order: stroke fill;
}

#connectors-layer {
    pointer-events: none;
}

#map-content>svg,
#map-content>div {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#basemap-layer {
    z-index: 1 !important;
}

#lines-layer {
    z-index: 10 !important;
}

#not-open-layer {
    z-index: 12 !important;
}

#scattered-layer {
    z-index: 14 !important;
}

#highlight-layer {
    z-index: 15 !important;
}

#connectors-layer {
    z-index: 20 !important;
    pointer-events: none !important;
}

#stations-layer {
    z-index: 30 !important;
}

#labels-layer {
    z-index: 29 !important;
}

#route-ui-container {
    top: 30px !important;
    left: 85px !important;
}

#route-capsule,
#route-result-panel,
#custom-context-menu {
    background-color: rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] #route-capsule,
[data-theme="dark"] #route-result-panel,
[data-theme="dark"] #custom-context-menu {
    background-color: rgba(31, 32, 32, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

#modern-zoom-control {
    top: 30px !important;
    left: 30px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] #modern-zoom-control {
    background-color: rgba(31, 32, 32, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#modern-zoom-control button {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background-color: rgba(240, 242, 245, 0.8) !important;
}

[data-theme="dark"] #modern-zoom-control button {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    background-color: rgba(55, 56, 56, 0.8) !important;
}

body.minimal-mode #ruler-h-wrapper,
body.minimal-mode #ruler-v-wrapper {
    display: none !important;
}

body.minimal-mode #basemap-layer {
    display: none !important;
}

@media (min-width: 641px) {
    body.legend-pinned #map-container {
        left: 360px !important;
        width: calc(100% - 360px) !important;
        transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    body.legend-pinned #modern-zoom-control {
        left: 390px !important;
        transition: left 0.3s;
    }

    body.legend-pinned #route-ui-container {
        left: 445px !important;
        transition: left 0.3s;
    }

    body.legend-pinned.pinned-hidden #map-container {
        left: 0 !important;
        width: 100% !important;
    }

    body.legend-pinned.pinned-hidden #modern-zoom-control {
        left: 30px !important;
    }

    body.legend-pinned.pinned-hidden #route-ui-container {
        left: 85px !important;
    }
}

@media (max-width: 640px) {
    #modern-zoom-control .mz-slider-track {
        display: none !important;
    }
}

/* Sidebar Layout Refactor */
/* Fix: Strict hide when JS sets display: none */
#info-panel[style*="display: none"],
#info-panel[style*="display:none"] {
    display: none !important;
}